Наш первый HTML-документ
Как устроен HTML-документ
HTML-документ — это текстовый файл с расширением *.html (в Unix-системах возможны файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title> Пример 1 </title>
</head>
<body>
<h1> Привет! </h1>
<p> Это простейший пример HTML-документа. </p>
<p> Этот *.html-файл может быть одновременно открыт и в Блокноте, и в браузере.
Сохранив изменения в Блокноте, просто нажмите кнопку F5 ('перезагрузить') в IE,
чтобы увидеть эти изменения реализованными в HTML-документе. </p>
</body>
</html>Если хотите, можно посмотреть этот пример прямо сейчас.
Для удобства чтения я ввёл дополнительные отступы. Однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h1>Привет!</h1>
<p>Это простейший пример HTML-документа.</p>
<p>Этот *.html-файл может быть одновременно открыт и в Блокноте, и в браузере.
Сохранив изменения в Блокноте, просто нажмите кнопку F5 ('перезагрузить') в IE,
чтобы увидеть эти изменения реализованными в 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-документ. Начнём с малого — с абзаца.