Учебное пособие 1886
.pdfпечить его обратную совместимость, чтобы новые версии языка не противоречили старым.
Исходный вариант HTML никогда широко не использовался, потому что на момент его появления существовало всего несколько десятков Web-серверов, и почти все Web-авторы были знакомы друг с другом.
Первая версия HTML заложила превосходную основу, на которой были построены все последующие версии. Он справился со своими задачами.
HTML+
В 1993 году Дэйв Рэггетт (Dave Raggett) работал над созданием HTML+ - приемника HTML. Хотя HTML+ так и не стал официальной спецификацией, многие из его идей были реализованы в HTML 2.0.
HTML 2.0
Спецификация HTML 2.0 появилась в июле 1994 г. После редактирования ее Дейвом Коннолли (Dave Connolly) в ноябре
1994 года стандарт HTML 2.0 был утвержден IETF (Internet Engineering Task Force). HTML 2.0 содержал большинство те-
гов, используемых в наши дни. Он был несколько логичным и удобным по сравнению с HTML и стал первой версией языка, получившей широкое распространение. Большинство Webстраниц, созданных в период взрыва популярности Web (конец 1994-го - 1995 г.) было написано именно на HTML 2.0
HTML 2.0 был чрезвычайно прост в изучении. Он приобрел популярность у многих Web-авторов, среди которых в то время преобладали студенты и инженеры. С ростом популярности Web к языку проявили интерес профессиональные дизайнеры, критиковавшие его за малое количество команд форматирования.
Запатентованные расширения HTML
Поскольку HTML 2.0 содержал слишком мало команд форматирования (вообще говоря, форматирование не является основной целью HTML), некоторые разработчики (в первую очередь - Netscape) решили опередить темпы развития HTML. В первой версии Netscape Navigator, выпущенной в 1994 году,
73
поддерживались некоторые нестандартные теги (в том числе и теги для мерцания и центровки текста). В последующих версиях Novigator добавились и другие нестандартные теги. Когда в середине 1995 г. вышел Internet Explorer. Microsoft решила сыграть в ту же игру и добавила свои теги, поддерживаемые только в IE.
Эти теги были названы расширениями HTML. Они появились несмотря на то, что W3C не утверждал их. Многие существующие броузеры (например, Mosaic и Lynx) их не поддерживали. Так начинался период несовместимости. Некоторые расширения HTML 2.0 со временем были утверждены и вошли в HTML 3.2. Другие теги до сих пор считаются нестандартными и не пользуются широкой поддержкой.
HTML 3.0 – 1995 год.
На пути к HTML 3.2 произошла небольшая задержка - HTML 3.0, "тупиковая ветвь" языка. HTML 3.0, проект, которого был опубликован в марте 1995 года, заметно отличался от HTML 2.0. В него были включены многие дополнительные возможности, отсутствовавшие в предыдущих версиях, в том числе - таблицы, математические вычисления и т. д.
К сожалению, HTML 3.0 для большинства Web-авторов содержал радикальные изменения, к тому же он никогда не поддерживался двумя основными броузерами. HTML 3.0 так и не стал официальной спецификацией, а его новые теги так и не прижились. W3C отказался от выпуска спецификации HTML 3.0 и полностью заменил ее спецификацией HTML 3.2.
HTML 3.2
HTML 3.2 (кодовое название проекта - "Wilbur") был официально утвержден в 1997 г. Тем не менее, он был хорошо известен и широко использовался с момента первой публикации в мае 1996 года (W3C публикует
спецификацию HTML во время разработки; официальное утверждение стандарта занимает довольно много времени).
HTML 3.2 быстро завоевал популярность, в основном изза улучшенной совместимости с HTML 2.0. В нем появилась поддержка таблиц, а решение многих задач стало более логич-
74
ным. Стандарт HTML 3.2 почти полностью поддерживается в
IE 3 и Netscape 3.
HTML 4.0
HTML 4.0 (кодовое название проекта - "Project Cougar") - последняя из современных версий HTML. В HTML 4.0, как и в HTML 3.2, реализованы многие распространенные концепции Web-дизайна. В нем формально приняты некоторые теги и средства HTML (например, фреймы), которые раньше считались расширениями HTML 3.2
Самым значительным отличием HTML 4.0 от предыдущих версий является кодировка (набор символов). Вместо ограниченного набора международных символов в HTML 4.0 использована кодировка Unicode, которая позволяет работать с тысячами различных символов.
Применение Unicode повышает ценность Web для пользователей всего мира. Кроме того, HTML 4.0 облегчает создание Web-страниц, доступных для пользователей-инвалидов.
Кроме того, у пользователя появилась возможность изменять и динамически управлять выводом на экран текста и графики без необходимости обновления страницы. Отсюда другое название языка – Dynamic HTML.
Спецификация HTML 4.0 (редакторы - Дейв Рэггетт, Ар-
но Ле Хорс (Arnaud Le Hors) и Ян Джекобс (Ian Jacobs)) поощ-
ряет использование перечней стилей (style sheet). Перечень стилей управляет внешним видом документа. Поскольку перечень стилей берет на себя хлопоты по выравниванию текста и форматированию шрифтов, HTML 4.0 не рекомендует пользоваться тегами и атрибутами HTML, предназначенными исключительно для форматирования, изменения внешнего вида и макетирования?
Кроме того, в HTML 4.0 появился тег <OBJECT>, используемый для работы с мультимедиа (например, с видео клипами и звуком).
75
2.5.3. Основные принципы и понятия, используемые в HTML. Синтаксис языка
HTML-документ - это текстовый документ, в который вставлены символы разметки - специальные маркеры (коды, команды), называемые тегами (tegs). ТЕГОМ называется единица разметки - специфический набор символов, имеющий в HTML особое значение. Теги начинаются с символа "меньше" (открывающей угловой скобкой) "<", за которым следует ключевое слово, и заканчивается символом "больше" ">" (закрывающая угловая скобка).
Например, теги могут выглядеть так:
<HTML>
<img>
<Strong>
Следует заметить, что регистр символов в тегах не учи-
тывается, поэтому теги <Title>, <title>, <TITLE>, <tItLE> счи-
таются одинаковыми.
Каждый тег HTML имеет определенный смысл, который мы должны изучить и знать.
Например, тег <B> означает переключение на полужирный шрифт (сокращение от слова bold - "полужирный").
Свойства тегов а) Теги можно разделить на две группы:
Теги-контейнеры
Автономные Теги-контейнеры имеют две категории. Начальный тег
открывает действие некоторого эффекта, а конечный тег - отменяет его. Конечный тег всегда выглядит как ключевое слово, перед которым стоит символ "/" ("косая черта", или "слеш").
Например, текст, отображаемый полужирным шрифтом, заключается между начальным тегом <B> и конечным тегом
</B>:
Правила <B> применения </B> тегов
В результате слово "применения" выделяется полужирным шрифтом. Большинство тегов являются тегамиконтейнерами.
76
Автономный тег не требует тега конечной катего-
рии.
Например, тег <HR> вставляет в документ горизонтальную линию.
б) Теги можно вкладывать внутрь других тегов.
Например, теги <B> (для полужирного шрифта) и <I> (для курсива) можно скомбинировать:
Правила <B><I> применения</I></B> тегов - Правила
применения тегов Слово "применение" выводится одновременно и полу-
жирным и курсивным шрифтом. Обратите внимание, что начальный и конечный тег курсивного начертания полностью содержаться внутри пары тегов для полужирного начертания.
Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.
2.5.4. Атрибуты тегов
Многие начальные теги обладают атрибутами, влияющими на поведение данного тега. Атрибуты представляют собой ключевые слова, находящиеся в угловых скобках и отделенные от имени тега пробелом.
Например:
<HR NOSHADE> - (данный тег рисует горизонтальную линию без теневого выделения). Для некоторых атрибутов необходимо указать значение, перед которым стоит знак = (равенства), например, тег
<HR WIDTH=200> - рисует горизонтальную линию шириной в 200 пикселов.
В броузере отображаются не сами теги, а их эффект. Неизвестные браузеру теги и атрибуты игнорируются.
Таким образом, АТРИБУТ (attribute) - это параметр или свойство тэга. Это, по сути, переменная, которая имеет стандартное имя и ей можно присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать
77
кавычки. Число атрибутов у одного тега не ограничено. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Например:
<HR WIDTH=200 SIZE=4 ALIGN="CENTER">
где для тега создания горизонтальной линии задана ее длина, ширина и выравнивание по центру.
В общем виде структура тега имеет вид:
<имя тега_имя атрибута="значение атрибута"_..._имя атрибута="значение атрибута">
Исходя из этого, основной проблемой при изучении HTML является определение набора атрибутов и их значений, допустимых для каждого тега (элемента).
2.5.5. Структура HTML-документа
Документ HTML состоит из основного текста документа и тегов разметки, которые являются наборами обычных символов и определяют границы действия элементов, а также отделяют элементы друг от друга. Таким образом, документ HTML - это, по существу, обычный текстовый файл.
Для его создания можно использовать любой текстовый процессор – например, редактор Блокнот.
Все документы HTML имеют строго заданную структуру, формируемую элементами языка HTML. Рассмотрим эти элементы.
Элемент COMMENT – Комментарий
Форма записи:
<COMMENT> Комментарий к документу </comment>
Текст комментария - конструкция позволяющая создавать текстовые строки, не являющиеся частью программы, а служащие для пояснения. Текст, помещенный внутри
COMMENT, игнорируется браузером. COMMENT может располагаться в любом месте кода веб-страницы. Наличие конечного тега обязательно. Имеется одно ограничение: внутри комментария не должны располагаться другие элементы. Если
78
в комментарии будет присутствовать другой элемент, то его содержимое будет выведено на экран, отформатированное соответствующим образом.
Существует еще один способ обозначения комментария. Он заключается в использовании восклицательного знака и обрамлении текста комментария двойными тире.
Например: <!--Строка комментария-->
Внутри подобной конструкции можно помещать и теги: они не будут восприниматься браузером.
Элемент HTML - HTML-документ
Форма записи:
<HTML>Весь HTML-документ </html>
Отличительный признак HTML-документа: HTML является самым внешним, так как между его начальным и конечным тегами должна находиться вся веб-страница. Он имеет атрибуты version, lang и dir, которыми мало кто пользуется, и допускает вложение элементов HEAD, BODY и PLAINTEXT , определяющих общую структуру веб-страницы. Конечным тегом </html> заканчиваются все гипертекстовые документы.
Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Они определяются элементами HEAD и BODY соответственно.
Элемент HEAD - Область заголовка
Форма записи:
<HEAD>Теги содержащие информацию о документе
</head>
Область заголовка веб-страницы. Иными словами, ее первая часть. Заключает в себя теги, содержащие невидимую информацию о документе. Также как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускает вложе-
ние элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID, STYLE.
79
Элемент TITLE - Название HTML-документа
Форма записи
<TITLE>Название документа Теги содержащие информацию о документе </title>
Элемент для размещения заголовка веб-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна броузера. Эта особенность используется поисковыми системами для организации поиска в WWW. Поэтому авторы, создающие веб-страницы, должны позаботится о том, чтобы строка внутри TITLE не будучи слишком длинной, достаточно точно отражала назначение документа.
Элемент META - Дополнительная информацияФорма записи
<META name="Тип данных" content="Содержимое">
Этот элемент содержит служебную информацию и инструкции для броузера, которые не отображаются при просмотре веб-страниц. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент META содержит два основных атрибута, первый из которых (name - имя) определяет тип данных, а второй (content - содержимое) - содержание служебной информации. Примеры meta-данных приведены ниже.
Дата, обозначающая "срок годности" документа:<META name="Expires" content="Дата">
Имя автора веб-страницы:<META name="Author" content="Имя автора">
Набор ключевых слов для поиска:<META name="Keywords" content="Слово1, слово2, ...">
Краткое описание содержания веб-страницы:<META name="Description" content="Содержание страницы">
Описание типа и характеристик веб-страницы:<META name="Content-Type" content="Описание страницы">
Задание используемой в тексте кодировки кодиров-
ки:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
80
Указание приложения, в котором была создана веб-
страница:<META name="Generator" content="Название HTML-
редактора">
Атрибут name используется приложением-клиентом для получения дополнительной информации о веб-страницах и их упорядочения. Этот атрибут часто заменяется атрибутом httpequiv, использующимся для привязки содержимого элемента к заголовку HTTP. Он используется сервером для создания дополнительных полей при выполнении запроса. Кроме этого, элемент META может содержать URL.
Элемент BODY - Тело документа
Форма записи <BODY>Гипертекст всего HTMLдокумента </body>
За элементом Область заголовка следует элемент Тело документа. Этот элемент заключает в себе гипертекст, который определяет собственно веб-страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается броузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна веб-страницы.
Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Webстраницы благодаря нему расцвели яркими цветными узорами:
background="путь к файлу фона"
Более простое оформление фона сводится к заданию его цвета:
bgcolor="#RRGGBB"
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность крас-
81
ного, зеленого и синего цветов соответственно. Более подробно об определении цветов будет рассказано ниже.
Оба вышеприведенных атрибута не являются альтернативными и часто используются совместно. Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Для этого имеется следующий атрибут:
text="#RRGGBB"
Для задания цвета текста гиперссылок используется атрибут:
link="#RRGGBB"
Точно так же можно задать цвет для использованных ги-
перссылок(viziting link): vlink="#RRGGBB"
Можно указать изменение цвета для последней выбранной пользователем гиперссылки(activ link):
alink="#RRGGBB"
Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Эта структура определяется в первую очередь назначением Web-страницы и фантазией разработчика. Четыре перечисленных элемента HTML, HEAD, TITLE, BODY определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML. На практике определить местоположение этих основных элементов можно и при их отсутствии. Поэтому, если теги <HTML>, <HEAD> и <BODY>, а также соответствующие им закрывающие теги опущены, то программа браузер может сама определить то место, где они должны были находиться. Элемент TITLE определяющий заголовок документа, считается обязательным, так как браузер не может самостоятельно определить заголовок документа. Но в любом случае при создании веб-страницы опускать все эти элементы не рекомендуется, так как заранее неизвестно, как поведет себя конкретный браузер, установленный на компьютере пользователя.
82