H T M L
Page 1. Введение
|
HTML (HyperText Markup Language) - это язык, принятый в World Wide Web для создания и публикации Веб-страниц. HTML предоставляет авторам средства для:
Фактически, современная Веб-страница формируется с помощью трех языковых средств:
HTML-документ является той средой, в которой размещаются остальные компоненты Веб-страницы. Поэтому начнем с описания языка HTML, за которым следуют описания CSS и JavaScript. Первоначально HTML был разработан Тимом Бернерсом-Ли (Tim Berners-Lee) и его коллегами из CERN Laboratories для обмена текстовыми документами и другими данными между учеными и приобрел популярность благодаря обозревателю Mosaic, авторы которого добавили к нему поддержку графических образов и ряд других полезных качеств. Быстрое развитие Сети в 90-е годы потребовало стандартизации этого языка, и в ноябре 1995 г. по эгидой IETF был создан HTML 2.0. Следующим шагом стала кодификация W3C в январе 1997 г. новой, гораздо более мощной версии HTML 3.2. Наконец, в апреле 1998 г. появился HTML 4.0, который является в настоящее время действующим стандартом языка (в уточненной редакции HTML 4.01, опубликованной в декабре 1999 г.) Составные элементы HTML-документаЭлементы и тегиHTML - это теговый язык разметки документов. Иными словами, любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Элементы - это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег - это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Например, элемент EM (выделение текста) выглядит так: <EM>выделяемый текст</EM> Имена элементов могут быть набраны в любом регистре, т. е. <EM> и <em> равнозначны. Элементы должны либо следовать друг за другом, либо быть вложены один в другой. Если начальный тег <EM> расположен внутри элемента <P>…</P>, то и конечный тег </EM> должен быть расположен внутри этого элемента. Конечные теги некоторых элементов могут быть опущены. Например, конечный тег элемента LI (пункт списка) не обязателен, поскольку начало очередного пункта списка означает конец предыдущего пункта: <UL> <LI>Первый пункт списка без конечного тега <LI>Второй пункт списка с необязательным конечным тегом</LI> <LI>Третий пункт списка без конечного тега </UL> Мы, однако, рекомендуем указывать конечный тег элемента даже в тех случаях, когда стандарт позволяет его опустить. Для этого есть две причины:
Некоторые элементы, такие, как BR (новая строка), не имеют конечного тега, поскольку не имеют содержимого. АтрибутыАтрибуты элемента определяют его свойства. Например, элемент IMG (графический образ) имеет атрибут src, указывающий расположение графического файла, и атрибут alt, задающий альтернативный текст на тот случай, если обозреватель не отображает графику: <IMG src="mylogo.gif" alt="Диг Киллер"> Атрибуты всегда включаются в начальный тег элемента и имеют вид: имя_атрибута="значение_атрибута" Значение атрибута может быть заключено в одинарные или двойные кавычки. Кавычки можно опустить, если значение атрибута состоит только из латинских букв (A-Za-z), цифр (0-9), дефисов ("-"), подчеркиваний ("_"), двоеточий (":") и точек ("."). Имена атрибутов могут быть набраны в любом регистре, но их значения могут зависеть от регистра. Мы для определенности всюду в дальнейшем пишем имена элементов прописными буквами, а именами атрибутов строчными. Специальные символыРяд символов в языке HTML зарезервирован и должен представляться специальным образом:
Для некоторых символов, отсутствующих на клавиатуре, также есть специальные обозначения. Например, символ авторского права © представляется как ©. Полный перечень специальных символов приведен в приложении. При желании авторы могут пользоваться и числовой кодировкой символов в стандарте Unicode. При этом символ может быть задан своим десятичным кодом (&#код;) или шестнадцатеричным кодом (&#xкод;). Например © представляет символ авторского права ©, а А - русскую букву А. Поддержка: КомментарииHTML-документы могут содержать комментарии, которые не влияют на отображение документа, а только поясняют его содержимое при просмотре HTML-текста. Комментарии в HTML имеют довольно сложный синтаксис, поэтому мы рекомендует следовать следующим четким правилам:
Пример комментариев: <!-- это комментарий -->
<!-- а вот еще комментарий,
занимающий более одной строки -->Типы данных HTMLЗначения атрибутов в языке HTML могут иметь различные типы данных. Основными типами данных являются следующие.
Примечание. Обозреватели Microscape дополнительно поддерживают имена цветов, перечисленные в таблице.
<LINK rev="Made" href="mailto:somebody@somewhere.com">
Общие атрибуты элементов HTMLРяд атрибутов применим к большинству элементов HTML. Эти атрибуты подразделяются на:
Идентификатор элемента: атрибут idСинтаксис: id = ID Поддержка: Атрибут id присваивает элементу имя, уникальное в пределах данного документа. Никакие два элемента не могут иметь одинаковых значений id. Этот атрибут имеет несколько применений в HTML:
В следующем примере атрибут id использован для идентификации двух абзацев: <P id="firstp">Мой первый абзац.</P> <P id="secondp">Мой второй абзац.</P> С абзацами из этого примера могут быть связаны соответствующие стили. Например, следующая таблица стилей определяет цвета каждого из абзацев: P#firstp { color: navy; background: transparent }
P#secondp { color: black; background: transparent }Эти же абзацы могут использоваться как цель в гиперссылках: <P>См. также <A HREF="#firstp">первый абзац</A>.</P> Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, SCRIPT, STYLE и TITLE. Примечание. Значения атрибутов id и name хранятся в одном пространстве имен, поэтому их значения не могут совпадать в пределах документа. Отметим также, что name может содержать специальные символы, а id нет. Класс элемента: атрибут classСинтаксис: class = список CDATA Поддержка: Атрибут class указывает, что элемент является членом определенного класса. В отличие от атрибута id любое количество элементов может относиться к одному классу. Далее, элемент может принадлежать к нескольким классам - в этом случае значением атрибута является список имен классов, разделенных пробелами. Примечание. Большинство обозревателей не поддерживают списки классов, попросту игнорируя такой атрибут class. Атрибут class особенно полезен в селекторах стилей. Рассмотрим следующий пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
p { font-size: medium }
p.note { font-size: small }
</STYLE>
</HEAD>
<BODY>
<P>Обычный абзац</P>
<P class="note">Примечание</P>
</BODY>
</HTML>Здесь в заголовке документа заданы размеры шрифта для обычных абзацев и для абзацев класса note (примечание). Теперь для того, чтобы включить в текст примечание, достаточно присвоить соответствующему абзацу (т. е. элементу P) атрибут class="note". Именно так построены все примечания в данном справочнике. Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE. Стиль элемента: атрибут styleСинтаксис: style = таблица стилей Поддержка: Атрибут style позволяет задать стиль элемента внутри его начального тега, например: <P>Популярным экранным шрифтом является <SPAN style="font-family: Verdana">Verdana</SPAN>.</P> Для использования этого атрибута в заголовок документа должен быть включен метаописатель <META http-equiv="Content-Style-Type" content="text/css"> В большинстве случаев употребление атрибутов class и id предпочтительнее, т. к. они обеспечивают разделение содержимого документа и стиля его отображения, что обычно упрощает сопровождение разработки. Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE. Титул элемента: атрибут titleСинтаксис: title = текст Поддержка: Атрибут title определяет титул элемента и часто используется обозревателями как подсказка (tooltip), которая выводится на экран, когда курсор помещается на данный элемент. Он особенно полезен в элементах A, LINK, IMG и OBJECT, в которых он указывает на титул связанного или вложенного ресурса. Приведем несколько примеров. Ссылка на почтовый ящик: <A href="mailto:digkiller@mail.ru" title="Пошлите мне свои замечания">digkiller@mail.ru</A> Ссылка на Веб-страницу: <A href="http://www.digkiller.narod.ru/pics/pics.htm" title="Библиотека CGI-сценариев">CGI.pm</A> Ссылка на альтернативную Веб-страницу: <LINK rel="Alternate" href="index.html" hreflang=ru lang=ru title="Русская версия"> Ссылка на аплет: <OBJECT classid="java:Audio.class" codetype="application/java" style="width: 666; height: 13" standby="Хочешь послушать?" title="Это моя песня"> <IMG src="music99.gif" alt="" title="DigKiller' Holiday"> Holiday - Это <EM>моя</EM> песня! </OBJECT> Атрибут title полезен также с элементами ABBR и ACRONYM, где он позволяет дать расшифровку сокращения. Примеры: <P>Ширина листа 20 <ABBR title="сантиметров" lang=ru>см</ABBR>.</P> <ACRONYM title="Организация Объединенных Наций">ООН</ACRONYM> Язык элемента: атрибут langСинтаксис: lang = код языка Поддержка: Атрибут lang определяет естественный язык, на котором написаны значения остальных атрибутов данного элемента и его содержимое (а также всех вложенных элементов, не имеющих своего атрибута lang). Хотя этот атрибут поддерживается не слишком широко, он находит все большее применение, например:
Значение атрибута lang не зависит от регистра. Список его возможных значений приведен в приложении. Использование lang также позволяет авторам легко менять стиль текста в зависимости от языка. Например, один из языков в двуязычном документе может изображаться курсивом или произноситься другим голосом в синтезаторе речи. Текст такого документа должен оформляться следующим образом: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Welcome - Добро пожаловать</TITLE> </HEAD> <BODY> <H1><SPAN lang=en>Welcome</SPAN> - <SPAN lang=ru>Добро пожаловать</SPAN></H1> <P lang=en>This paragraph is in English.</P> <P lang=ru>Этот абзац на русском языке.</P> </BODY> </HTML> Основной язык документа может быть задан атрибутом lang в элементе HTML или в поле заголовка HTTP Content-Language. Этот атрибут применим ко всем элементам, кроме BASE, BR, FRAME, FRAMESET, IFRAME, PARAM и SCRIPT. Примечание. Атрибут lang не должен использоваться для задания направления вывода текста - оно задается атрибутом dir. Направление вывода текста: атрибут dirСинтаксис: dir = ltr | rtl Поддержка: Атрибут dir определяет направление вывода текста: слева направо (dir="ltr", по умолчанию) или справа налево (dir="rtl"). Всем символам в кодировке Unicode приписано направление, с тем, чтобы текст отображался правильно. Так, латинские и русские буквы выводятся слева направо, а еврейские и арабские - справа налево. Стандарт Unicode определяет двунаправленный алгоритм, который должен применяться всякий раз, когда документ содержит символы, выводимые справа налево. Хотя обычно этот алгоритм дает правильное изображение текста, существуют ситуации, когда направление вывода текста приходится задавать явно с помощью атрибута dir. Допустим, например, что русское предложение содержит ивритскую фразу, которая содержит английскую цитату. В этом случае направление вывода ивритской фразы потребует явного указания направления: ивритская фраза, включая английскую цитату, должна быть заключена в элемент SPAN или BDO с атрибутом dir="rtl". Этот атрибут применим ко всем элементам, кроме BASE, BR, FRAME, FRAMESET, IFRAME, PARAM и SCRIPT. Обработчики событийСинтаксис: имя_события = сценарий Поддержка: HTML поддерживает обработку многих событий, которые могут происходить на компьютере-клиенте. Для обработки события нужно присвоить элементу соответствующий атрибут, имя которого является именем этого события, а значением - сценарий (либо вызов функции, либо набор операторов). Значение такого атрибута может содержать специальные символы. Следующий пример использует операторы языка JavaScript для обработки двух событий, связанных с кнопкой "Submit", а именно выводит подсказку в строке состояния, когда курсор мыши попадает на кнопку, и очищает строку состояния, когда курсор мыши оказывается за ее пределами. Обратите внимание, что значения атрибутов заключены в одинарные кавычки из-за того, что двойные кавычки использованы внутри них. <INPUT type=submit onmouseover='window.status="Вы заполнили всю форму?";' onmouseout='window.status="";'> Если документ содержит обработку событий, то язык сценариев, принятый по умолчанию, должен быть задан в заголовке документа в метаописателе <META http-equiv="Content-Script-Type" content="text/javascript"> Следующие атрибуты событий применимы ко всем элементам, кроме BASE, BDO, BR, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, PARAM, SCRIPT, STYLE и TITLE. Все они связаны либо с нажатием клавиш на клавиатуре, либо с движением мыши и нажатием ее кнопок.
|
Некоторые специальные символы не отображаются.
Некоторые специальные символы не отображаются;
шестнадцатеричные коды символов не распознаются.
