2. Основы html

2.1. Понятие об html

Гипертекстовые документы создаются на специальном языке, который называется HTML (Hyper Text Markup Language). Разработка этого стандарта позволила снять две существенные проблемы, которые возникали у пользователей больших сетей.

Первая из них – время доставки информации, оно существенно зависит от объема передаваемого файла. Как правило, пользователь работает в каждый момент с небольшим объемом информации. Но если она является частью огромного документа, то при стандартной организации файла «все в одном» приходится ждать, пока загрузятся не только нужные, но и все сопутствующие сведения, и затем «копаться» в большом файле в поисках того, что нужно. В стандарте HTML вводится иерархическая структура документов: вся информация по некоторой теме разбивается на небольшие смысловые блоки и посылается пользователю только по мере возникновения необходимости в ней. Это существенно сокращает время ожидания ответа на возникший вопрос и делает работу в сети более комфортной и дешевой. Для организации такого режима работы в языке HTML введено средство гиперссылка (см. п. 2.10).

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

• весь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, "Блокнот", "WordPad");

• символы и конструкции, которые непонятны броузеру, игнорируются (а текстовые редакторы обычно прекращают интерпретировать документ, если встречают в нем непонятные коды);

• в текст документа можно добавлять разнообразные команды, которые указывают, как следует изображать на экране тот или иной фрагмент текста, или обеспечивают спецэффекты. Эти команды называют тегами. Они так же, как и документ, набираются текстовыми символами, но отделяются от него угловыми скобками: < >;

• файлы c HTML-кодом должны помечаться расширением .html или .htm

2.2. Структура тегов

Каждый тег обязательно содержит пару угловых скобок < >, между которыми находится ключевое слово, обозначающее основную функцию тега. Например, ключевое слово HR в теге <HR> означает, что тег вставляет в документ серую горизонтальную линию (Horizontal Row) по всей ширине страницы и толщиной в один пиксел.

Действие тега детализируется с помощью атрибутов. Например, применительно к тегу <HR> можно уточнить, какой длины, толщины и цвета должна быть линия. Каждому ключевому слову сопоставляется свой собственный набор атрибутов и стандартные значения для них. Они автоматически присваиваются тем атрибутам, которые не внесены в тег, поэтому в него можно включать только те атрибуты, значения которых Вы хотите изменить.

Атрибуты размещают после ключевого слова и перечисляют в произвольном порядке через пробел. После каждого атрибута ставят знак = и нужное значение. Например, тег <HR WIDTH=50% SIZE=4> означает, что в документ следует вставить горизонтальную линию, которая должна доходить только до середины строки и иметь ширину не один, а четыре пиксела. Значения атрибутов полагается заключать в двойные кавычки. Однако в современных броузерах это требование не обязательно.

Атрибуты, соответствующие одним и тем же свойствам, в разных тегах часто, но не всегда, обозначаются одинаковыми словами. Например, выравнивание текста в пределах строки, ячейки таблицы или около картинки задается одинаковым словом ALIGN. А свойство «цвет шрифта» для документа в целом задается атрибутом TEXT, но для отдельно взятого фрагмента документа – атрибутом COLOR. Соответствующие теги, задающие темно-синий цвет шрифта, выглядят так:

<BODY TEXT=NAVY>, <FONT COLOR=NAVY>.

Многие теги являются парными. Открывающий тег включает какое-нибудь действие, закрывающий прекращает его. В этом случае ключевое слово у обоих тегов одинаковое, но в открывающем теге дополнительно перечисляются все необходимые атрибуты, а в закрывающем атрибутов нет, и перед ключевым словом ставится знак /. Парные теги называются контейнерами. Например, контейнер <B>Я изучаю язык HTML</B> означает, что текст Я изучаю язык HTML следует изобразить жирным шрифтом, а дальнейшие символы – так, как до него.

Замечания:

• в ключевых словах и атрибутах строчные и прописные регистры букв не различаются, однако для облегчения редактирования рекомендуется набирать их заглавными буквами;

• URL файлов-ссылок заключаются в двойные кавычки, и регистры букв в них учитываются;

• в последовательности пробелов, идущих подряд, учитывается только первый, остальные игнорируются;

• признак начала новой строки игнорируется. Поэтому при составлении кода можно клавишей <Enter> разрывать его на строки так, как код удобно просматривать и редактировать. На виде документа в окне броузера это не отражается. Если нужно сохранить при просмотре через броузер введенные в код HTML пробелы и разрывы строк, следует воспользоваться тегами компоновки текста (см. п. 2.6).

Списки основных тегов, их функций и атрибутов приведены в табл. 3, 4, 5 Приложения. Пояснения по основным группам тегов – в п.п. 2.4 – 2.10.

2.3. &-последовательности, комментарии

Иногда в документе приходится использовать такие знаки, которые имеют в языке HTML специальный смысл. Например, двойные кавычки " " выделяют значение атрибута, и если их использовать вне тега, броузер не поймет конструкцию и пропустит ее. Чтобы этого не произошло, для отображения служебных символов используют специальные последовательности знаков, начинающиеся с символа & и заканчивающиеся знаком ; (точка с запятой) – так называемые &-последовательности. Основные из них:

последовательность < (от английского "less than") – вместо символа < (меньше);

последовательность > (от "greater than") – вместо символа > (больше);

последовательность " (от "quotations mark") – вместо символа " (двойные кавычки);

последовательность & (от "ampersand") – вместо символа &;

последовательность   (от nonbreaking space – неразрывный пробел) – вместо пробела, который не следует игнорировать при выдаче документа в окно броузера. Эта &-последовательность как бы вставляет в текст невидимую глазу букву, которую броузер воспринимает как реальную и оставляет для нее место на экране. Она используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP 100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следующую, например, при изменении шрифта или размера окна броузера).

Внимание! &-последовательности должны набираться только в нижнем регистре (никаких &LT; или &QUOT; быть не должно!), и точка с запятой в конце последовательности обязательна. Пример: чтобы пользователь увидел на экране слова крейсер "Аврора", в HTML-документе должен быть следующий код:

крейсер "Аврора"

Чтобы код HTML было легче понимать и править, полезно вводить в него комментарии, которые были бы видны только при работе с кодом, но не отражались бы в окне броузера при просмотре документа. Для этой цели используют специальный контейнер, написанный не по стандартным правилам. Он выглядит так: <!-- … -->

Примеры:

<!-- Это мой комментарий --> <!-- А этот комментарий занимает

в тексте несколько строк -->

Внимание! В текст комментария не допускается вставлять два и более дефисов подряд: -- или ----- (разные броузеры по-разному реагируют на это).