Главное преимущество языка разметки перед языком, не имеющим явных команд форматирования, заключается в том, что он отделяет контент от того, каким образом он должен быть представлен. Таким образом, написание браузера является простой задачей: браузер должен понимать и применять содержащиеся в тексте команды разметки к контенту. С помощью встроенных стандартизированных команд разметки в HTML-файлах становится возможным читать и переформатировать любую вебстраницу веб-браузером. Способность изменять форматирование крайне важна, так как должна быть возможность просматривать веб-страницу, созданную на экране с установленным разрешением 1600 х 1200 точек при 24 битах на точку, на экране с разрешением, например, 640 х 320 точек при 8 битах на точку на мобильном телефоне.
Хотя в принципе можно создавать подобные документы с помощью стандартных текстовых редакторов, и многие так и делают, также есть возможность использовать специальные программы редактирования текстов (текстовые процессоры) и HTML-редакторы, берущие на себя большую часть работы (за счет снижения возможностей пользователя детально контролировать получаемый результат).
Простая веб-страница, написанная на HTML, и то, как она выглядит в браузере, показано на рис. 7.10. Страница состоит из заголовка и тела. Вся страница размещается между командами форматирования, называемыми в языке HTML тегами (tags), <html> и </html>. Впрочем, большинство браузеров правильно отобразят страницу и в отсутствие этих тегов. Как видно из рис. 7.10, а, заголовок веб-страницы заключен в скобки тегов <head> и </head>, а тело располагается между тегами <body> и </body>. Команды внутри тегов называют директивами (directives). Пусть не все, но большинство HTML-тегов имеют такой формат, то есть <something> помечает начало чего-либо, а </something> — его конец.
Регистр символов в тегах не имеет значения. Например, <head> и <HEAD> означают одно и то же, однако у нижнего регистра лучше характеристики совместимости. Формат самого HTML-текста, то есть расположение строк и т. д., не имеет значения. Программы обработки HTML-текстов игнорируют лишние пробелы и переносы строк, так как они все равно форматируют текст так, чтобы он помещался в заданной области
отображения. Соответственно, для того чтобы исходные HTML-документы легче читались, в них можно добавлять произвольное количество знаков табуляции, пробелов и символов переноса строк. И наоборот, для разделения абзацев в тексте в исходный HTML-текст недостаточно вставить пустую строку, так как она просто игнорируется браузером. В этом случае необходимо явное использование специального тега.
Рис. 7.10. HTML для примера веб-страницы (а). Отформатированная страница (б)
Некоторые теги могут иметь именованные параметры, называемые атрибутами (attributes). Например, тег <img> на рис. 7.10 используется для того, чтобы наравне с текстом расположить на странице изображение. У этого тега есть два атрибута src и alt. Первый атрибут предоставляет URL для изображения. HTML-стандарт не определяет, какие форматы изображений разрешены. На самом деле, практически все
браузеры поддерживают файлы GIF и JPEG. Браузеры могут поддерживать и другие форматы, но это палка о двух концах. Если пользователь привык к браузеру, который поддерживает, скажем, файлы TIFF, он может разместить их на своих веб-страницах, а потом с удивлением обнаружить, что другие браузеры просто игнорируют все эти замечательные картинки.
При помощи второго атрибута можно задать текст, который будет выводиться на страницу, если не удастся отобразить изображение. Для каждого тега стандарт HTML устанавливает список допустимых атрибутов и их значение. Поскольку все атрибуты являются именованными, их порядок не имеет значения.
Формально при написании HTML-документов должен использоваться набор символов Latin-1 международного стандарта ISO 8859-1, но для пользователей, чьи клавиатуры поддерживают только ASCII-символы, для ввода специальных символов, таких как, например, е, могут использоваться специальные управляющие последовательности символов. Эти последовательности должны начинаться со знака амперсанда и заканчиваться точкой с запятой. Например, означает пробел, è означает символ е, а é — символ е. Так как сами символы <, > и & оказываются зарезервированными, для их отображения в тексте также применяются управляющие последовательности: < (less than — знак «меньше»), > (greater than — знак «больше») и & (ampersand — амперсанд).
Главным элементом заголовка является название страницы, располагающееся между тегами <title> и </title>. В него можно поместить также некоторую метаинформацию, хотя в нашем примере ее нет. Она не отображается на странице, а используется некоторыми браузерами для того, чтобы помечать окно страницы.
Несколько заголовков используются на рис. 7.10. Каждый из них создается при помощи тега вида <hn>, где n — цифра от 1 до 6. <h1> является самым важным заголовком, <h6> — наименее важным. Как это отобразить на экране, зависит от браузера. Обычно заголовки с меньшими номерами отображаются более крупными шрифтами. Браузер может также выделять различные заголовки различными цветами. Обычно заголовки <h1> выводятся на экран крупным полужирным шрифтом и выделяются, по меньшей мере, одной пустой строкой над и под заголовком. В отличие от них заголовки <h2> отображаются шрифтом меньшего размера, отступы перед заголовком и после него также уменьшаются.
Теги <b> и <i> обозначают соответственно полужирный шрифт (boldface) и курсив (italics). При использовании тега <hr> отображается разрыв, а также горизонтальная черта на странице.
Тегом <p> отмечается начало абзаца. Браузер может это отобразить, например, добавив пустую строку и отступ. Заметим, что многие ленивые HTML-программисты не пользуются тегом </p>, обозначающим конец абзаца.
Язык HTML предоставляет несколько механизмов создания списков, включая вложенные списки. Неупорядоченные списки (unordered list), такие как на рис. 7.10, начинаются тегом <ul>. Отдельные пункты раньше помечались тегом <li>. Тег <ol> (ordered list) соответствует упорядоченному списку. При его использовании абзацы, отдельные пункты неупорядоченного списка помечаются знаком «•». Элементы упорядоченных списков автоматически нумеруются браузером.
И наконец, мы подошли к гиперссылкам. Примеры их использования вы можете увидеть на рис. 7.10. Гиперссылки вводятся при помощи пары тегов: <a> (anchor — закладка) и </a>. У этого тега также могут быть различные параметры, самым значимым из которых является href (гиперссылка, URL). Текст, располагающийся между тегами <a> и </a>, отображается на экране. Если этот текст выбирается, браузер открывает страницу, на которую указывает гиперссылка. Между тегами <a> и </a> можно также размещать и другие элементы, например изображение (тег <img>). В этом случае, если пользователь щелкнет на изображении, будет произведен переход по ссылке.
Существует множество других тегов и атрибутов HTML, которые мы не привели в этом простом примере. Так, тег <a> может содержать параметр name, что позволяет создать гиперссылку посреди текста, на которую можно ссылаться из другого места этой же страницы. Это может быть полезным в том случае, если веб-страницы начинаются с оглавления, состоящего из «локальных» гиперссылок. Щелчок мышью на пункте оглавления позволяет быстро переместиться в нужное место страницы. В качестве другого примера можно привести тег <br>. Он заставляет браузер вставить перевод строки.
Вероятно, лучший способ разобраться в тегах — посмотреть на них в действии. Чтобы это сделать, вы можете выбрать любую веб-страницу, открыть ее в вашем браузере в виде HTML и выяснить, как она устроена. В большинстве браузеров есть пункт меню Посмотреть исходный код страницы или что-то в этом духе. При выборе этого пункта вместо отформатированной страницы отображается ее исходный HTML-текст.
