Как устроен HTML-документ
HTML-документ
— это просто текстовый файл с
расширением *.html (Unix-системы могут
содержать файлы с расширением *.htmll).
Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.html-файл может быть
одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите
кнопку Reload ('перезагрузить') в Netscape,
чтобы увидеть эти изменения реализованными
в HTML-документе.
</P>
</body>
</html>
Для
удобства чтения я ввел дополнительные
отступы, однако в HTML это совсем не
обязательно. Более того, браузеры
просто игнорируют символы конца
строки и множественные пробелы в HTML-файлах.
Поэтому наш пример вполне мог бы
выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт
и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку
Reload ('перезагрузить') в Netscape, чтобы увидеть
эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как
видно из примера, вся информация о
форматировании документа
сосредоточена в его фрагментах,
заключенных между знаками "<" и
">". Такой фрагмент (например, <html>)
называется меткой (по-английски — tag,
читается "тэг").
Большинство HTML-меток — парные, то есть
на каждую открывающую метку вида <tag>
есть закрывающая метка вида </tag>
с тем же именем, но с добавлением
"/".
Метки
можно вводить как большими, так и
маленькими буквами. Например, метки <body>,
<BODY> и <Body> будут
восприняты браузером одинаково.
Многие
метки, помимо имени, могут содержать атрибуты
— элементы, дающие дополнительную
информацию о том, как браузер должен
обработать текущую метку. В нашем
простейшем документе, однако, нет ни
одного атрибута. Но мы обязательно
встретимся с атрибутами уже в
следующем разделе.
Обязательные метки
<html> ... </html>
Метка <html>
должна открывать HTML-документ.
Аналогично, метка </html> должна
завершать HTML-документ.
<head> ... </head>
Эта
пара меток указывает на начало и конец
заголовка документа. Помимо
наименования документа (см. описание
метки <title> ниже), в этот раздел
может включаться множество служебной
информации, о которой мы обязательно
поговорим чуть позже.
<title> ... </title>
Все, что
находится между метками <title> и
</title>, толкуется браузером как
название документа. Netscape Navigator,
например, показывает название
текущего документа в заголовке окна и
печатает его в левом верхнем углу
каждой страницы при выводе на принтер.
Рекомендуется название не длиннее 64
символов.
<body> ... </body>
Эта
пара меток указывает на начало и конец
тела HTML-документа, каковое тело,
собственно, и определяет содержание
документа.
<H1> ... </H1> —
<H6> ... </H6>
Метки
вида <Hi> (где i — цифра от 1
до 6) описывают заголовки шести
различных уровней. Заголовок первого
уровня — самый крупный, шестого
уровня, естественно — самый мелкий.
<P> ... </P>
Такая
пара меток описывает абзац. Все, что
заключено между <P> и </P>,
воспринимается как один абзац.
Метки <Hi>
и <P> могут содержать
дополнительный атрибут ALIGN (читается
"элайн", от английского "выравнивать"),
например:
<H1 ALIGN=CENTER>Выравнивание заголовка
по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием
по правому краю</P>
Подытожим все, что мы знаем, с помощью примера
2:
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример
HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать
не только влево, </P>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>
С этого
момента Вы знаете достаточно, чтобы
создавать простые HTML-документы
самостоятельно от начала до конца. В
следующем разделе мы поговорим, как
можно улучшить наш простой HTML-документ.
Начнем с малого — с абзаца.
<<<<
>>>>