Изучаем
HTML
Как и любой другой
язык программирования, HTML подразумевает некую стандартизированную
структуру построения программы — в данном случае, html-документа. Такая
структура описывает даже не последовательность команд, а очередность
следования ряда обязательных блоков, которые содержат непосредственно
программный код. В отличие от иных языков программирования, директивы
HTML называются не «командами», «процедурами»
или «операторами», а имеют собственное наименование — «теги»
(от англ, tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис
их записи в общем виде выглядит как <тег>. Все объекты, не заключенные
в угловые скобки, интерпретатор воспринимает как текстовые элементы,
отображая их на экране компьютера «как есть». Итак, упрощенная
структура документа HTML выглядит следующим образом (рис. 4.1).
Рис. 4.1. Упрощенная
структура html-документа
У HTML имеется еще
одна значительная особенность, отличающая его от других языков программирования:
практически все теги данного языка, за исключением некоторых отдельно
оговоренных случаев, — парные. Такая пара состоит из «открывающего»
и «закрывающего» тега, которые отличаются лишь наличием
в последнем символа «/» Все, что расположено между открывающими
закрывающим тегом, обрабатывается интерпретатором согласно алгоритму,
присвоенному данному конкретному тегу. В общем виде программная строка
HTML с открывающим и закрывающим тегами выглядит так:
<тег>0брабатываемое
значение</тег>
Данное свойство HTML
позволяет использовать принцип вложения одного тега в другой, когда
обрабатываемым значением одной команды может служить другая команда.
Вот простой пример вложения двух тегов друг в друга:
<тег1>
<тег2>0брабатываемое
значение</тег2></тег1>
ВНИМАНИЕ
При роботе с кодом HTML необходимо запомнить одно простое правило: если
где-то в тексте программы встречается открывающий тег, обязательно должен
присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку
при обработке такого документа интерпретатором броузера.
Однако вернемся к
изображенной на рис. 4.1 структуре документа HTML. Как видно из иллюстрации,
основной, глобальной конструкцией внутреннего кода web-страницы является
нечто, обозначенное на рисунке прямоугольником с надписью «Документ
HTML». Вполне логично было бы предположить, что это «нечто»
— какая-то специальная команда, призванная «объяснить» броузеру,
что он имеет дело именно с документом HTML, а не с текстовым или, например,
графическим файлом. Такая команда действительно есть. Называется она
«тег верхнего уровня» и записывается так:
<НТМL>.Содержимое
</НТМL>
Тег верхнего уровня,
как становится ясно из предложенного примера, — парный, причем его содержимое
как раз и есть весь код HTML, составляющий документ. Таким образом,
правило применения данной директивы также очевидно: открывающий тег
записывается самой первой строкой html-документа, а закрывающий — самой
последней.
Следующим на очереди
у нас прямоугольник, обозначенный на схеме фразой «Заголовок документа».
Для чего нужен этот заголовок?
Заголовок web-страницы
содержит исчерпывающую информацию о самом документе, а иногда также
специальные директивы транслятора, подсказывающие встроенному в броузер
интерпретатору HTML правила, по которым следует обрабатывать составляющий
страницу код. Необходимо отметить, что содержимое заголовка не отображается
в броузере и не влияет на внешний вид документа: это, если можно так
выразиться, служебная информация, которая необходима, прежде всего,
самому броузеру. Синтаксис тега заголовка в общем виде выглядит так:
<HEAD> Содержимое
</HEAD>
Из приведенной схемы
видно, что раздел HEAD следует в html-документе непосредственно за тегом
<HTML> и является второй обязательной командой, которую необходимо
включать в код web-страницы.
Перейдем к следующему
объекту html-документа — разделу «Внешний заголовок», который,
как показано на схеме, является вложенной командой тега <HEAD>.
Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE>Внешний
заголовок</TITLE>
Чем же «внешний
заголовок» отличается от просто «заголовка» документа
HTML? Все очень просто: именно он отображается в верхнем поле броузера
в качестве названия страницы при ее открытии, и именно значение тега
<TITLE>подставляется по умолчанию в соответствующее диалоговое
окно, когда пользователь заносит документ в папку «избранное».
Непонятно? Взгляните на рис. 4.2.
Рис. 4.2. Значение
тега <TITLE>
Теперь, уверен, все
неясности ликвидированы. Последняя структурна составляющая кода web-страницы
— раздел «Тело документа».
Тело документа, описываемое
тегами <BODY> </BODY>, включает в себя весь основной код
разметки страницы, который и определяет отображение html-документа на
экране монитора. Основной текст, иллюстрации, элементы навигации и все,
что вы хотите продемонстрировать посетителям вашего сайта, размещается
внутри данного тега.
Теперь мы располагаем
достаточным объемом информации для того, чтобы представить нашу абстрактную
графическую схему в виде вполне конкретного кода HTML:
<HTML>
<HEAD>
<ТITLE>Моя
первая web-страничка</TITLE>
</HEAD>
<BODY>
</BOOY>
</HTML>
Создайте с помощью
Проводника Windows новую директорию на вашем жестком диске и назовите
ее, например, «MySite». Внутри этой папки создайте каталог
с названием «images», туда вы будете впоследствии помещать
иллюстрирующие ваш проект изображения. Теперь необходимо проделать следующие
действия: открыть Блокнот (Пуск > Программы > Стандартные >
Блокнот), набрать в нем полученный выше код, сохранить текущий файл
в папке «MySite» под именем index.html, воспользовавшись
функцией «Сохранить как», и открыть его в броузере путем
двойного щелчка мышью на значке данного файла в Проводнике. Вы получили
свою первую web-страничку (рис. 4.3).
Рис. 4.3. Первая
web-страничка
Постойте, скажете
вы, но ведь этот html-документ отображается в главном окне броузера
абсолютно пустым! Разумеется, ведь вы еще не внесли в него никакого
контекстного содержимого. Для того чтобы это содержимое наполнило вашу
страничку, необходимо изучить базовые теги разметки гипертекста. А для
начала я предлагаю обратить пристальное внимание на приведенную ниже
информацию, которая может пригодиться вам в последующей работе. Итак,
...
