Границы документа. Самым главным из тэгов HTML является одноименный тэг - <HTML>. Он должен всегда открывать ваш документ, так же, как тэг </HTML> должен непременно стоять в последней его строке. Эти тэги обозначают, что находящиеся между ними строки представляют единый HTML-документ (листинг 1.1.). Это важно, так как сам по себе документ является обыкновенным текстовым файлом в формате ASCII. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
<HTML><HEAD><TITLE>A Very Basic HTML Document</TITLE></HEAD><BODY>This is where the text of the document would be.</BODY></HTML>
Примечание: Хотя большинство современных браузеров могут опознать документ и не содержащий тэгов <HTML> и </HTML>, все же их употребление крайне желательно. Новые области применения HTML, например, электронная почта, не предполагают обязательное использование браузеров; другие программы с большой долей вероятности примут HTML-документ без открывающего и закрывающего тэгов за обычный текстовый.
Закрывающий тэг столь же важен, что и открывающий. Если документ включен в электронное письмо, тэг </HTML> даёт команду программе просмотра прекратить интерпретацию текста как HTML-кода.
Заголовок документа. Заголовок документа не является обязательным элементом, однако хорошо составленный заголовок документа может быть весьма полезен. Задачей заголовка документа является представление необходимой информации для программы, интерпретирующей документ. Элементы, находящиеся внутри раздела HEAD (кроме названия документа, записываемого с помощью раздела TITLE), не видны на экране (во всяком случае, напрямую). Элементы, содержащиеся внутри раздела HEAD документа, нужны для того, чтобы:
Дать документу название.
Определить отношения между несколькими документами.
Дать указание браузеру создать форму для поиска.
Определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра.
Раздел НЕAD открывается тэгом <НЕAD>. Обычно этот тэг следует сразу же за тэгом <HTML>. Закрывающий тэг </HEAD> показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа. Название документа. Раздел TITLE является единственным обязательным элементом заголовка документа и служит для того, чтобы дать документу название. Оно обычно показывается в заголовке окна 6payaepa. Содержимое раздела ТIТLЕ нельзя путать с названием файла документа; напротив, оно представляет собой текстовую строку, совершенно не зависящую от имени и местоположения файла, что делает его весьма полезным. Имя же файла жестко определяется операционной системой того компьютера, на котором он хранится. Название документа записывается между тэгами <TITLE> и </TITLE> и представляет собой текстовую строку. Не следует заключать его в кавычки, если вы хотите, чтобы на экране название их также не имело. В большинстве случаев раздел TITLE занимает не более одной строки. В принципе, название может иметь любую длину и содержать любые символы, кроме некоторых зарезервированных. На практике лучше ограничиться одной строкой, имея в виду, что название появляется в заголовке окна браузера. Также следует помнить о том, что останется от названия документа при сворачивании окна браузера. Поэтому старайтесь поместить наиболее важные слова в начало названия.
Примечание: По умолчанию текст, содержащийся в названии документа, используется при создании закладки (bookmark) для документа, Поэтому для большей информативности избегайте безликих названий (Home Page, Index и т. п.). Подобные слова, используемые в качестве названия закладки, обычно совершенно бесполезны. <HTML><HEAD><TITLE>General Officers of the US Army in the Civil War</TITLE></HEAD><BODY></BODY></HTML>
Тэги заголовка, настраиваемые автором документа. Разработка новых спецификаций языка разметки гипертекста занимает немалый срок, и за это время компании, производящие браузеры, успевают выпустить несколько версий своих продуктов. Поэтому в заголовок добавлен еще один функциональный элемент, позволяющий избежать неприятностей с выводом документов на экран. Элемент META позволяет автору документа определять информацию, не имеющую отношения к HTML. Эта информация используется браузером для действий, которые не предусмотрены текущей версией HTML спецификации. Элемент META не потребуется вам для создания первых HTML-документов, но он вам наверняка понадобится, когда ваши странницы станут более сложными. На рис. 1.3 приведен пример того, как элемент META заставляет браузер произвести определенную операцию. Обратите внимание на следующую строку:
Браузеры Netscape Navigator и Internet Explorer поймут эту запись как инструкцию ожидать 60 секунд, а затем загрузить новый документ. Такая инструкция часто используется при изменении местоположения документов. Небольшой документ с приведенной строкой может быть оставлен на старом месте расположения документа для автоматической ссылки на его новое место расположения. Следующая командная строка <META HTTP-EQUIV=refresh" CONTENT="60"> инструктирует браузер перезагружать страницу каждые 60 секунд. Это может быть полезно, если данные на странице часто обновляются, например, в случае отслеживания котировок акций. Примечание: Команды, подобные приведенным выше, характерны для новой технологии clientpull, применяемой при запросе программой-клиентом, то есть вашим браузером, документа с сервера. На первых этапах вам вряд ли понадобится эта технология, разве что при частом обновлении данных или перезагрузке документа.
Сейчас стало весьма популярным применение элемента META для задания ключевых слов при помощи свойства Keywords <HTML><HEAD><TITLE>General Officers of the US Army in the Civil War</TITLE><META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic, War Between the States"><META NAME="Description" CONTENT="A listing of the general officers of the US Army in the Civil WAR"></HEAD><BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="RED" VLINK="BLUE" ALINK="GREEN"></BODY></HTML>
Разрабатывая документ, который впоследствии будет индексирован какой либо поисковой системой, полезно использовать и свойство Description. Если это свойство не используется, для индексации будет взят первый же встретившийся текст на вашей странице, который может не отражать основного смысла всего документа.
Примечание: Свойства Keywords и Description несложны в понимании и хороши для использования в элементе META уже на начальном этапе освоения HTML. Они придадут вашим документам дополнительные полезные качества. Элемент META может включать атрибуты, указанные в табл. 1.3. Так же, как в случае элемента LINK, в текущей спецификации HTML они еще не получили окончательного оформления.
Таблица 1.3.
Атрибут
Назначение
HТТР-EQUIV
Определяет свойство для элемента.
NАМЕ
Обеспечивает дополнительное описание элемента. Если этот атрибут опущен, он считается эквивалентным атрибуту HTTP-EQUIV.
URL
Определяет адрес документа для свойства.
СONTENT
Определяет возвращаемое значение для свойства.
Другие элементы заголовка. В заголовке могут присутствовать еще два элемента. Они оба не получили окончательного определения в спецификации HTML 3.2, но поддерживаются браузерами компаний Netscape и Microsoft.
Тело документа. Хотя в WWW и наметилась тенденция к увеличению "активного" содержания, большинству читателей все же будет интересна текстовая часть ваших страниц. Это особенно касается документов, создаваемых для корпоративных сетей Intranet и руководств on-line. Поэтому независимо от того, пишете ли вы новый текст или конвертируете старый, процесс работы над телом документа отнимет у вас немалое количество времени.
Обязательные элементы. Прежде чем вы приступите к наполнению вашего документа содержанием, есть смысл изготовить его "каркас". HTML-документ должен содержать некоторые обязательные элементы, без которых он будет неправильно интерпретирован. Для того чтобы не вводить такие элементы каждый раз при создании нового документа, следует приготовить более или менее универсальный шаблон.
<HTML><HEAD><TITLE>This is an example document</TITLE></HEAD><BODY>Enter body text here.</BODY></HTML>
Шаблон открывается тэгом <HTML>, который, как мы уже знаем, необходим для каждого HTML-документа. Следующим идет тэг <HEAD>, начинающий заголовок документа. Заголовок содержит элемент TITLE, вводящий название документа, в нашем случае, "This is an example document". Заголовок закрывается тэгом </HEAD>. Далее идет тэг <BODY>,после которого вы помещаете текст (тело) документа. Тэг <BODY> обозначает конец тела, а тэг </HTML> – конец всего документа. Все, что помещено внутри тела документа, интерпретируется согласно строгим правилам, позволяющим программам просмотра правильно выводить страницу на экран монитора.
Примечание: Строго говоря, использование тэгов <BODY> и </BODY> необязательно. HTML позволяет опускать тот или иной тэг, если он очевиден, из контекста. Однако лучше все же их употреблять, так как их отсутствие может ввести в заблуждение отдельные браузеры и другие программы, работающие с HTML-кодом.
Атрибуты элемента BODY. Элемент BODY может содержать большое количество атрибутов. Все они важны, так как определяют общий облик вашего документа. Они перечислены в табл. 1.4. Ниже мы рассмотрим функцию каждого из атрибутов подробнее.
Таблица 1.4.
Атрибут
Назначение
ALINK
Определяет цвет активной ссылки.
BACKGRQUND
Указывает на URL-адрес изображения, которое используется в качестве фонового.
BGCOLOR
Определяет цвет фона документа
BGPRQPERTIES
Если установлено значение FIXED, фоновое изображение не прокручивается.
LEFTNARGIN
Устанавливает границу левого поля в пикселах.
LINK
Определяет цвет еще не просмотренной ссылки.
ТЕХТ
Определяет цвет текста.
TOPMARGIN
Устанавливает границу верхнего поля в пикселах.
VLINK
Определяет цвет уже просмотренной ссылки.
Цветное оформление документа. Определение цвета составных частей документа – первый шаг в его создании. Если это не сделано, используются цвета по умолчанию. Они определяются установками программы просмотра.
Примечание: Так как вы не можете знать, какие цвета использует по умолчанию браузер вашего читателя, лучше всего определить все цветовые атрибуты. Тогда заведомо один и тот же цвет не будет использован, например, для текста и фона.
Не существует каких-либо правил создания хорошо сбалансированной палитры. Нужно лишь помнить о том, чтобы читатели смогли прочитать текст, не испытывая неудобств. Старайтесь поддерживать высокую контрастность текста и фона и избегайте соседства областей с близкими цветами.
Определение цветов. В HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах – красном, зеленом и синем – и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0 – 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Для простоты в HTML 3.2 определены 16 стандартных цветов, которые вместе с их шестнадцатеричными кодами приведены в табл. 1.5.
Таблица 1.5.
Цвет
Код
Black (черный)
#000000
Maroon (темно-бордовый)
#800000
Green (зеленый)
#008000
Olive (оливковый)
#808000
Navy (темно-синий)
#000080
Purple (фиолетовый)
#800080
Teal (чирок)
#008080
Gray (серый)
#808080
Silver (серебряный)
#C0C0C0
Red (красный)
#FF0000
Lime (известь)
#00FF00
Yellow (желтый)
#FFFF00
Blue (синий)
#0000FF
Fuchsia (фуксия)
#FF00FF
Aqua (аква)
#00FFFF
White (белый)
#FFFFFF
Определение цветовых атрибутов элемента BODY. Атрибут BGCOLOR отвечает за цвет фона документа. Если ваша страница имеет фоновое изображение, этот атрибут должен обеспечивать цвет, как можно более близкий к общему тону рисунка. Это позволит читателю, настроившему свой браузер на отказ от загрузки изображений, ясно видеть текст. Многие авторы не придерживаются этого правила. В этом случае, если фоновый рисунок исполнен в темных тонах и выбран белый цвет шрифта для текста, некоторые читатели могут быть удивлены, не увидев ничего, кроме пустой белой страницы. Атрибут TEXT определяет цвет текста документа. Старайтесь в ваших страницах всегда поддерживать высокую контрастность текста. При использовании шрифта с тонким начертанием помните, что он смотрится лучше темным на светлом фоне. Атрибут LINK используется браузером для показа ещё непросмотренных ссылок. Очевидно, что они должны выделяться цветом на фоне основного текста. Атрибут VLINK служит для показа уже просмотренных ссылок. Как правило, их окрашивают более темным оттенком того же цвета, что и непросмотренные ссылки. Атрибут ALINK определяет цвет ссылки, активной в текущий момент. Это сравнительно новый атрибут, обычно применяющийся для просмотра многокадровых документов. Познакомившись с возможностями раскрашивания HTML-страницы, вы можете спросить: а стоит ли игра свеч? Конечно, если вы пишете статичный документ (например, руководство), будет лучше, если цвета выберет сам читатель. Однако, если вы создаёте насыщенную страницу с большим количеством графики, не пожалейте времени на выбор гармоничной палитры.
Фоновые изображения. Одним из популярных способов украсить HTML-страницу является размещение на ней фоновой графики, видимой под основным текстом. Такой приём помогает подчеркнуть целостность документа либо, наоборот, разделить его на логические части. Большинство фоновых изображений малы по размеру, но их копии, как обои, заполняют все окно программы просмотра. Особенно популярны различные текстурные (узорчатые) изображения: кирпичи, мрамор, всевозможные виды тканей. В основном они служат для простого заполнения пустот в документе. Более продуманные странницы имеют фон, соответствующий содержанию.
Примечание: Атрибут BGPROPERTIES является уникальным для программы Microsoft Internet Explorer. Единственное значение, которое он может иметь – это FIXED. Если BGPROPERTIES = FIXED, фоновое изображение не прокручивается вместе с текстом.
Установка полей. Атрибуты LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение двух других краев текста не регулируется. Это сделано для того, чтобы обеспечить возможность просмотра вашей страницы любым браузером. Вы не можете знать, какой размер окна у программы просмотра вашего читателя. Атрибут LEFTMARGIN устанавливает расстояние между левым краем текста и левым краем окна браузера, которое измеряется в пикселах. Чаще всего этот атрибут применяется, когда автор хочет иметь слева поле, свободное от текста и отличающееся узором или цветом от остальной части фонового изображения. Атрибут TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера. Он обычно используется, если верхняя часть фонового изображения имеет большое значение, и его желательно оставить открытым. Включение комментариев. В HTML-документ можно включать комментарии, которые не будут видны вашему читателю. Они должны начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым.
Предупреждение: Вставляя комментарии, помните, что большинство браузеров имеет возможность просматривать также и код HTML-страницы.
Некоторые старые браузеры интерпретируют каждый символ как конец комментария, в результате чего оставшаяся часть страницы может быть искажена. Если вы используете комментарии для отделения элементов HTML друг от друга на стадии тестирования, лучше всего удалить их из окончательного варианта. Сейчас комментарии также применяются для того, чтобы "спрятать" от браузера скрипты в случае, если он не в состоянии распознать их.
Элемент ADDRESS. Элемент ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по вашему желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа. Элемент ADDRESS состоит из текста, помещенного между тэгами <ADDRESS и </ADDRESS>. Текст, заключенный между этими тэгами, обычно показывается в окне браузера курсивом.
Примечание: Очень важным дополнением к элементу ADDRESS является указание дат создания и последнего обновления документа. Это позволяет читателям определить, знакомились ли они ранее с версией, которую просматривают. <HTML><HEAD><TITLE> A Basic Document Template </TITLE><HEAD><BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK", LINK="BLUE", ALINK="GREEN", VLINK="RED">Put the body text in here.<ADDRESS>Created by Vitaliy Pavlenko<BR>Created on 31 December 1998</ADDRESS></BODY></HTML>
