2. Язык гипертекстовой разметки

• История развития HTML и CSS
• Общая структура HTML
• Структура HTML-документа
• Формирование текста
• Организация ссылок
• Списки
• Графика
• Таблицы
• Мультимедиа

2.2. Общая структура HTML

Хотя многие говорят о программировании на HTML, он вовсе не является языком программирования в традиционном понимании. При разработке HTML-документа выполняется разметка текстового документа. Эти пометки служат для указания формы представления информации, содержащейся в документе. Для этого в текст вставляются специальные коды – теги (tags) или, как их еще называют, дескрипторы.

Теги – это основной элемент кодирования, принятый в стандарте HTML. В HTML практически все зависит от тегов. Они служат для привлечения внимания к определенным словам в документе, тем самым давая браузеру понять, что нужно выделить, где отобразить графику и где находятся гиперссылки. Теги заключаются в угловые скобки (< >). Браузер "знает", что любой текст внутри угловых скобок является скрытым, и не отображает его в своем окне, а все объекты, не заключенные в угловые скобки, воспринимаются им как текстовые элементы.

Существует два типа тегов: контейнеры и одиночные теги. Контейнер – это пара тегов, состоящая из начального (открывающего) и конечного (закрывающего) тега. Закрывающий тег записывается так же, как и открывающий, но с символом "/" (прямой слеш) перед именем тега:

<тег> … </тег>

Контейнеры предназначены для хранения некоторой информации, в отличие от одиночного тега.

Теги могут записываться с параметрами (атрибутами). Наборы допустимых атрибутов индивидуальны для каждого тега. Общие правила записи атрибутов заключаются в следующем. После имени тега могут следовать атрибуты, которые отделяются друг от друга пробелами. Порядок следования атрибутов произволен. Многие атрибуты требуют указания их значений, однако некоторые атрибуты не имеют значений. Если атрибут требует значения, то оно указывается после названия атрибута через знак равенства. Значение атрибута может записываться в кавычках, так и без них. Единственным случаем, в котором без кавычек не обойтись, является случай, когда в значении атрибута имеются пробелы. Следует помнить, что спецификации HTML рекомендуют использовать кавычки даже в тех случаях, когда без них можно обойтись. Заданные в теге атрибуты действуют только между его началом и концом, то есть, только внутри контейнера:

Данные свойства HTML позволяют использовать принцип вложения одного тега в другой. Вложенные элементы следует закрывать в порядке, обратном их открытию:

HTML является языком нечувствительным к регистру, в котором записываются команды (в данном случае – теги и имена их атрибуты). Интерпретатор браузера одинаково обработает тег <ТЕГ>, <тег>, <Тег> или <тЕг>. Исключениями из этого правила служат параметры class и id, URL-адреса и escape-последовательности. В языке XHTML все имена элементов должны быть указаны строчными буквами, чтобы считаться допустимыми. В связи с этим рекомендовано придерживаться написание тегов строчными буквами.

Неправильно написанные теги и атрибуты автоматически исключаются без сообщения об ошибке, что дает пользователю возможность прочитать документ, хотя, возможно, и не в том виде, в каком его задумал создатель сайта.

Форматированием тегов HTML следует выполнять с помощью каскадных таблицей стилей.

У всех браузеров есть собственные встроенные таблицы стилей (таблица стилей пользовательского агента), которые описывают представление элементов но умолчанию. Оно схоже у различных браузеров, но есть и неко-торые отличия.

Escape-последовательности.

Иногда возникает необходимость на веб-странице использовать в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки (символы < и >), в которые обычно заключаются теги, парные кавычки ("), употребляемые при задании значений атрибутов, и т. д. Иными словами, веб-дизайнеру необходимо, чтобы данные символы отображались в окне браузера "как есть", то есть как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Для того чтобы избежать проблем при отображении подобных элементов и были придуманы так называемые escape-последовательности.

Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности начинаются с символа ампресанд (&) и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в нижнем регистре. В таблице 1 приведен список наиболее часто используемых escape-последовательностей.

Escape-последовательности записываются в тексте по тем же правилам, по которым употребляются обозначаемые ими символы, иными словами, нотация символьного объекта просто вставляется в тот участок текста, где должен следовать соответствующий служебный символ.

Все символы могут быть также заданы своими ASCII-кодами. Например, символ неразрывного пробела имеет код 160. Он может записываться в десятичном виде как &#160;.

Единицы измерения.

Рассмотрим единицы измерения, используемые для задания значений свойств в HTML и CSS.

Для задания значений свойств, определяющих некоторые размеры, применяются относительные и абсолютные единицы измерения (табл. 2). Относительные единицы задают длину относительно значения другого свойства, определяющего длину. Документы, в которых таблицы стилей используют относительные единицы измерения, более приспособлены для отображения на разных устройствах (например, дисплей или лазерный принтер). Абсолютные единицы измерения полезны только тогда, когда известны физические характеристики устройства отображения.

Пикселы – относительные единицы измерения, зависящие от параметров дисплея пользователя. Пикселы всегда выражаются целым числом. Каждый дизайнер должен помнить об относительности измерения в пикселах и учитывать это при создании дизайна веб-страницы.

Относительные единицы измерения em и ех вычисляются относительно высоты шрифта элемента.

Для задания размера шрифта могут использоваться ключевые слова. Их удобно применять в том случае, когда эстетика дизайна приносится в жертву доступности страницы для большинства браузеров и, как следствие, пользователей. Область определения ключевых слов включает семь значений, приведенных ниже в порядке убывания:

• xx-large;
• х-large;
• large;
• medium (поумолчанию);
• small;
• x-small;
• xx-small.

Некоторые элементы HTML могут иметь в качестве атрибутов переменные, обозначающие цвета. Эти переменные применяются в основном для определения цвета фона, текста или гиперссылок HTML-документа. Определить тот или иной цвет при создании веб-страницы можно двумя методами: использовать зарезервированные ключевые слова HTML для определения наиболее употребительных цветовых оттенков или использовать цветовую модель RGB.

Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту можно получить абсолютно любой желаемый оттенок путем смешения всего лишь трех красок: красной, зеленой и синей. При помощи цветовых меток или цифрового кода возможно использовать в HTML-документе любой цвет, который поддается отображению в рамках стандарта RGB.

Разумеется, цветовые нотации, заданные посредством символьных меток, легче запоминаются и интуитивно понятны, хотя бы немного знакомому с английским языком. Существует 140 цветов, для которых приняты стандартные символьные метки. А 24-битная цветовая палитра RGB, в настоящий момент поддерживаемая браузерами, предоставляет веб-дизайнеру 16,7 миллионов (224) цветов на базе 256 оттенков по каждому каналу.

Используя палитру RGB, веб-дизайнер может задать цвет тремя способами (табл. 3):

• rgb(r.g.b) – три канала, десятичная система. Каждый канал принимает значения в диапазоне от 0 до 255;
• #rrggbb – три канала, шестнадцатеричная система. Для обозначения цвета шестнадцатеричным цифровым кодом принят следующий синтаксис записи: перед самим кодом ставится символ #, далее следует три значения в диапазоне от 00 до ff;
• #rgb – три канала, шестнадцатеричная система, уменьшенная глубина цвета; каждый канал принимает значение в диапазоне от 0 до f. Эквивалентный цвет в полноцветной палитре получается благодаря удвоению каждой шестнадцатеричной цифры. Таким образом, цвета #6cf и #66ccff идентичны.

Комментарии.

Код HTML может содержать комментарии, предназначенные как для самого веб-дизайнера, создающего документ, так и для постороннего пользователя, читающего листинг чужой странички. Комментарии не будут отображаться в браузере, и не будут оказывать никакого влияния на остальную часть контента. Комментарии открываются символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков дефиса (<!--), закрываются сочетанием двух знаков дефиса и закрывающей угловой скобкой (-->). Они могут состоять из произвольного числа строк. В общем случае синтаксис записи комментария будет выглядеть следующим образом:

Комментарии полезны для маркировки и организации длинных документов – в частности, когда над ними совместно трудится команда разработчиков. Иногда в комментарии включается информация о создателе документа, предупреждение об авторских правах или адрес электронной почты администратора сайта. Однако чаще всего данный элемент кода HTML используется по своему прямому назначению, для пояснения смысла тех или иных фрагментов листинга HTML-документа.

Имейте в виду, что, хотя браузер не будет отображать комментарии на веб-странице, посетители смогут увидеть их, если просмотрят исходный код документа, поэтому убедитесь, что комментарии, которые вы оставляете, допустимы для просмотра. Возможно, стоит удалить заметки, оставленные коллегами-разработчиками перед публикацией файла. К тому же это уменьшит его размер.