Заголовок документа Текст документа Из схемы видно, что документ состоит из двух основных блоков – " заголовка " и " тела документа ". Заголовок определяется.

Презентация:



Advertisements
Похожие презентации
1 Web-конструирование Шестаков Александр Петрович
Advertisements

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
(HyperText Markup Language) – язык гипертекстовой разметки.
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.
HTML Урок 2 Пищита Е.В.. СОДЕРЖАНИЕ УРОКА Вставка горизонтальной линии. Тег Цвет горизонтальной линии. Тег Выравнивание горизонтальной линии. Тег Линия.
Лекция 4. Тема «Форматирование Web-документа ». Вопросы темы: 1.Теги тела документа; 2.Теги управления разметкой; 3.Теги, управляющие формой отображения;
Форматирование текста на Web- странице. Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
2 Стили оформления текста жирный ( bold ) Вася курсив ( italic ) Вася подчеркивание ( underline ) Вася зачеркивание ( strike out ) Вася верхний индекс.
HTML (HyperText Markup Language) - Язык Разметки Гипертекста.
Основы HTML и CSS Ссылки и иллюстрации. Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Создание гиперссылок.
Название страницы содержание страницы Структура любого HTML файла.
Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
Язык разметки гипертекста НТМL (HyperText Markup Language)
был разработан британским учёным Тимом Бернерсом-Ли приблизительно в годах. это язык разметки гипертекста.
Основы языка HTML Теги разметки документа. Тег (tag - указатель, метка) Команда или фрагмент кода, который описывает определенный элемент документа HTML.
Web-страницы и Web-сайты. Структура Web- страницы.
Тема : Использование различных приемов форматирования. Таблицы в HTML.
Какой тег является тегом перевода строки? 1.BR 2.TR 3.HR 4.I.
Транксрипт:

Заголовок документа Текст документа

Из схемы видно, что документ состоит из двух основных блоков – " заголовка " и " тела документа ". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY. заголовка тела документаHEADBODY Заголовок содержит " техническую " информацию о документе, хотя чаще всего используется только для обозначения его названия. Тело документа – святая святых. Именно в нем находится все то, что отображается на странице : текст, картинки, таблицы. Соответственно, делаем вывод : большинство ваших HTML- экспериментов будет проводиться в пространстве между тегами и

Comment ( ) Используется для создания комментариев в любой части документа. Все, что находится внутри, будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран) Пример :

Заголовок HTML- документа Создается с помощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документаHEAD Элементы, относящиеся к заголовку документа : HEAD Определяет начало и конец заголовка документа TITLE Определяет имя всего документа, которое отображается в заголовке окна браузера BASE Определяет базовый адрес, от которого отсчитываются относительные линии внутри документа STYLE Используется для вставки в документ таблицы стилей CSS LINK Описывает взаимосвязь документа с другими объектами META Используется для вставки метаданных

HEAD Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.заголовка документа Справочник по HTML Текст документа Пример :

TITLE Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза Пример :... Руководство по эксплуатации...

BASE Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов. Атрибуты : HREF – определяет базовый адрес (URL) текущего документа. TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. фрейме Руководство по эксплуатации... Список … Пример :

STYLE Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet). Атрибуты: TYPE – обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css". TITLE – определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу. Пример использования таблицы стилей Пример :

LINK Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK. META Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.

BODY Указывает начало и конец тела HTML- документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза

MARGINHEIGHT – определяет ширину ( в пикселах ) верхнего и нижнего полей документа. Работает только в браузерах Netscape. TOPMARGIN – определяет ширину ( в пикселах ) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. MARGINWIDTH – определяет ширину ( в пикселах ) левого и правого полей документа. Работает только в браузерах Netscape. LEFTMARGIN – определяет ширину ( в пикселах ) левого и правого полей документа. Работает только в браузерах Internet Explorer. BACKGROUND – определяет изображение для " заливки " фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. LINK – определяет цвет гиперссылок в документе. гиперссылок ALINK – определяет цвет подсветки гиперссылок в момент нажатия. VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели. Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB- значением в шестнадцатиричной системе, либо одним из 16 базовых цветов16 базовых цветов

... Текст документа.... Пример :

Гиперссылки Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.A навигационных картA

Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок. HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк ) на документ ( и / или область документа ), указанный в значении данного атрибута. Возможные значения : – создает ссылку на www- документ ; ftp://... – создает ссылку на ftp- сайт или расположенный на нем файл ; mailto:... – запускает почтовую программу - клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:.. – создает ссылку на конференцию сервера новостей ; telnet://... – создает ссылку на telnet- сессию с удаленной машиной ; wais://... – создает ссылку на WAIS – сервер ; gopher://... – создает ссылку на Gopher – сервер ; Атрибуты :

Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк Документаци я будет ссылаться на файл title.html в подкаталоге docs ( относительно текущего ).

NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово - указатель, уникальное для данного документа. Например : Раздел 1. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк Раздел 1 отправит вас в раздел "part" файла document.html, а линк В конец документа – в раздел "bottom" текущего документа. ( см. Пример 1) TARGET – определяет окно ( фрейм ), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезевированных имен : фреймов

_ elf – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме ; _ arent – указывает, что документ должен отображаться во фрейме - родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм ; _ op – указывает, что документ должен отображаться в окне - родителе всей текущей фреймовой структуры ; _ lank – указывает, что документ должен отображаться в новом окнеFRAMESET

H1,H2,...H6 Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы. Атрибуты : ALIGN – определяет способ выравнивания заголовка по горизонтали. Возможные значения : left, right, center. Самый большой заголовок посередине Заголовок поменьше... Малюююсенький такой заголовочек Пример :

P Используется для разметки параграфов. Атрибуты: ALIGN – определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение left. Это центрированный параграф. Текст располагается в центре окна браузера А это параграф, выровненный по правому краю. Пример :

FONT Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тегами. Вне тегов и используется шрифт, указанный в элементе BASEFONT. BASEFONT Атрибуты : SIZE – определяет размер шрифта. Возможные значения : – целое число от 1 до 7; – относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью атрибута SIZE элемента BASEFONT.BASEFONT COLOR – определяет цвет текста. Задается либо RGB- значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. 16 базовых цветов FACE – определяет используемый шрифт.

Увеличенный красный шрифт Моноширинны й фиолетовый текст 3 размера Пример :

IMG Используется для вставки изображений в HTML-документ. Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Червертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тега.

Атрибуты : SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением. HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется ( порой с заметной потерей качества ). HSPACE и VSPACE – определяют отступ картинки ( в пикселах ) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом. ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения : left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева. top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. middle – выравнивает базовую линию текущей текстовой строки с центром изображения. absmiddle – выравнивает центр текущей текстовой строки с центром изображения. bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки. absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript- сценариев. ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. BORDER – определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества ( и, соответственно, меньшего объема ), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC. USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1" ( см. Пример 4). Обратите внимание : прописные и строчные буквы в данном атрибуте трактуются браузером как разные.MAP ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y- координаты нажатия. В зависимости от полученных координат, сервер ( при наличии на нем соответствующего программного обеспечения ) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения.

Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов. Пример : Здесь я размещаю рисунок.

I Текст, заключенный между начальным и конечным тегами, будет выделен курсивом. Текст с курсивом B Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. Текст с выделенным словом U Данный элемент отображает помещенный между начальным и конечным тегами текст как подчеркнутый. Подчеркнутый текст S, STRIKE Элемент STRIKE отображает помещенный между начальным и конечным тегами текст как перечеркнутый. В HTML 3.2 вместо был предложен более краткий тег. Лена + Вася Коля = Love Пример :

BIG Текст, заключенный между начальным и конечным тегами, отображается увеличенным шрифтом (относительно текущего). Текст с увеличенным словом SMALL Текст, заключенный между начальным и конечным тегами, отображается уменьшенным шрифтом (относительно текущего). Небоскребы, небоскребы, а я маленький такой. Пример :

Таблица базовых цветов Это основные цвета, используемые в HTML. Именно эти цвета используются дизайнерами для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией, то есть используются там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в 256- цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато. Black Navy Gray Blue Silver Aqua White Green Red Lime Fuchsia Teal Maroon Yellow Purple Olive