Язык гипертекстовой разметки HTML
Общие сведения
Среди общедоступных средств Internet для предоставления информации система WWW занимает особое место.
Система WWW была разработана несколько лет назад в одном из крупнейших европейских центров ядерных исследований CERN (EuropeanCenterforNuclearResearch, Швейцария), и предназначена для объединения документов и файлов по всей сети Internet с помощью гипертекстовых связей.
Язык гипертекстовой маркировки HTML является одним из составных компонентов WWW. Он был основан на стандарте ISO 8879-1986 SGML.
HTML позволяет определять структуру электронного документа с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные элементы: иллюстрации, аудио- и видео- фрагменты и так далее. Язык включает в свой состав развитые средства для специфицирования нескольких уровней заголовков, шрифтовых выделений, различных групп объектов, например, словари, каталоги или меню для размещения иллюстраций и других фрагментов, а также множество других возможностей.
В основу гипертекстовой разметки была положена теговая модель описания документа, позволяющая представить документ в виде совокупности элементов, каждый из которых окружен тегом (управляющим HTML-кодом). По своему значению теги близки к понятию операторных скобок begin/end в универсальных языках программирования и задают области действия имен локальных переменных, определяют область действия правил интерпретации текстовых элементов документа и т.п.
Документ HTML представляет собой не что иное, как обычный ASCII-файл, с добавленными в него управляющими HTML-кодами (тегами). Каждый тег начинается с левой угловой скобки "<" и заканчивается правой угловой скобкой ">" . Между скобками записывается идентификатор тега и, если необходимо, дополнительные аргументы. Все теги по их назначению и области действия можно разделить на пять основных групп:
Некоторые теги используются вместе с закрывающей парой, которая сигнализирует об окончании области действия соответствующего назначения. Закрывающая пара после левой угловой скобки содержит символ "/" (например, для тега наклонного шрифта <I> закрывающая пара представляет собой </I>, для тега заголовка <TITLE> закрывающей парой будет </TITLE>).
Иногда тег с закрывающей парой называют контейнером в том смысле, что внутри него можно поместить содержательную информацию определенного характера. Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры.
Работу с документами, выполненными в соответствии с соглашениями языка HTML, осуществляют специальные программы клиента WWW - так называемые броузеры (WWWBrowser).
Базовая структура HTML-страницы
HTML-файлы всегда начинаются с тега <HTML> , который указывается в начале файла. Этот тег сообщает считывающему файл броузеру, что он имеет дело с HTML-файлом. Последней строкой в документе должна быть закрывающая пара </HTML> , которую можно интерпретировать как "конец HTML-страницы". Таким образом, каждая HTML-страница должна содержать строки
<HTML> </HTML>
Следующие теги разделяют документ на две секции: голову и тело. Для определения головы добавляется тег <HEAD> с закрывающей парой </HEAD>. С учетом этого HTML-страница принимает вид:
<HTML> <HEAD> </HEAD> </HTML>
В секции тела вводится текст и все то, что фактически должно появится на HTML-странице. Для определения тела применяется тег <BODY> с закрывающей парой </BODY>, помещаемые после тегов головы:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Заглавие HTML-страницы
Заглавие показывает общий смысл HTML-страницы, его не следует путать с именем файла. При просмотре HTML-страницы в графическом броузере (например, NetscapeNavigator) заглавие появляется в полоске заголовка окна броузера. Для определения заглавия HTML-страницы применяется тег <TITLE> с закрывающей парой </TITLE> .
Заглавие всегда помещается в секцию головы. Например, чтобы назвать страницу Моя любимая страница, нужно создать следующий HTML-текст:
<HTML> <HEAD> <TITLE>Моя любимая страница</TITLE> </HEAD> <BODY> </BODY> </HTML>
Определение текстовых атрибутов и заголовков
Для придания большей выразительности HTML-страницам применяются следующие теги и их закрывающие пары:
В текст HTML-страницы могут быть добавлены заголовки и подзаголовки (с уровнем вложенности до шести). Для этого применяются теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6> с соответствующими закрывающими парами </H1>, </H2>, </H3>, </H4>, </H5>, </H6>.
Навигация и гипертекстовые ссылки
Структура WWW-сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML-документа или информационного ресурса Internet который тематически, логически или каким-либо другим способом связан с документом, в котором эта ссылка определена.
Для записи гипертекстовых ссылок в WWW-сети была разработана специальная форма UniverseResourceLocator (URL).
Эта форма представляет собой запись следующего вида:
access://host.somewhere.dom:port/apath/other/doc#anchorname
где
access - спецификация протокола, например, http, gopher, file, mailto, news и др.;
host.somewhere.dom - имя хоста;
:port - номер порта (необязательно);
/apath/other/doc - полный путь к объекту на указанном хосте;
#anchorname - наименование гипертекстовой связи (необязательно).
Для задания связи HTML-документа с различными сетевыми ресурсами и документами используется тег <A> и его закрывающая пара </A>. У данного тега есть несколько атрибутов, основным из которых является атрибут HREF , указывающий местонахождение сетевого ресурса и специфицирующий коммуникационный протокол (значение этого атрибута фактически представляет собой URL).
Примеры гипертекстовых ссылок:
<AHREF=http://home.netscape.com:/disk1/smith/docs/first.doc> Clickhere</A> <AHREF=file:///c /disk1/smith/docs/picture.gif >Clickhere</A>
При этом фраза Clickhere будет особым образом выделена броузером при просмотре HTML-страницы (будет подчеркнута и выделена другим цветом). Обратите внимание на правила записи пути к файлу (все слэши прямые, а не обратные, и диск от директории отделен не двоеточием, а символом ).
Предформатированый текст
При создании HTML-страниц необходимо иметь в виду, что броузеры игнорируют пустое пространство (несколько пробелов, табуляцию), а также возврат каретки. Для того, чтобы избавиться от этого явления используется тег <PRE> с закрывающей парой </PRE>. Этот тег делает заключенный в него текст предформатированным (текст выводится таким, какой он есть). Правда, справедливости ради, следует заметить, что текст будет выведен не очень красивым моноширинным шрифтом.
Пример использования тега <PRE>:
<PRE> У курицы - бантик У кошки - сапожки У двух петухов - по гармошке Вот так! </PRE>
Нумерованные списки
Для того, чтобы включить в HTML-страницу нумерованный список, не обязательно нумеровать строки. Можно воспользоваться так называемым упорядоченным списком, а номера сформирует сам броузер.
Для упорядоченного списка применяется два типа тегов: весь список обрамляется тегом <OL> и его закрывающей парой </OL>, а каждому элементу списка предшествует тег <LI>, у которого закрывающей пары нет, т.е. ее использовать не обязательно.
Пример использования нумерованного списка:
<OL> <LI>Первый элемент нумерованного списка <LI>Второй элемент нумерованного списка <LI>... <LI>... <LI>Последний элемент нумерованного списка </OL>
Маркированные списки
Для наглядного изображения небольшого числа элементов удобно вместо нумерованных применять маркированные списки (в таких списках броузер сам выводит слева от каждого элемента кружок или квадратик). Теги маркированного списка практически аналогичны нумерованному, с той лишь разницей, что для маркированного списка вместо тега <OL> и закрывающей пары </OL> применяется тег <UL> и его закрывающая пара </UL>.
Пример использования маркированного списка:
<UL> <LI>Первый элемент маркированного списка <LI>Второй элемент маркированного списка <LI>... <LI>... <LI>Последний элемент маркированного списка </UL>
Создание внутренних связей в документе
Выше было рассмотрено использование ссылок для установления связей с другими HTML-страницами. Кроме этого, механизм ссылок можно использовать и при навигации внутри документа (если он достаточно большой). Для этого вверху HTML-страницы создается некое подобие обычного оглавления с указанием связей к конкретным главам.
Пример создания оглавления:
<AHREF="#Chapter1">Общие сведения о языке HTML</A> <AHREF="#Chapter2">Форматирование текста</A> <AHREF="#Chapter3">Использование таблиц</A>
Для именования фрагментов текста применяются теги <A> с атрибутом <NAME>.
Пример именования глав текста HTML-страницы:
<ANAME="Chapter1">Общие сведения о языке HTML</A>
Далее сам текст первой главы:
<ANAME="Chapter2">Форматирование текста</A>
Далее сам текст второй главы:
<ANAME="Chapter3">Использование таблиц</A>
Далее сам текст третьей главы
Основные приемы работы с броузером
Броузер - это программа, которая применяется для вывода HTML-страницы и взаимодействия с ней.
Приемы работы с броузером рассмотрим на примере работы с броузером NetscapeNavigator. Запустив данный броузер, рассмотрим основные элементы его экрана:
Броузер NetscapeNavigator выводит гипертекстовые связи подчеркнутым шрифтом, цвет которого отличается от цвета остального текста. Для выбора связи надо щелкнуть на ней кнопкой мыши.
Чтобы посетить конкретную станцию WWW, можно определить ее адрес URL либо вводя адрес внутри поля Location, либо щелкнув на кнопке Open в инструментальной полоске, или открыв меню File из полосы выпадающих меню и выбрав команду OpenLocation.
Для возврата в предыдущий документ надо либо щелкнуть на кнопке Back (Назад) в инструментальной полоске, либо выбрать команду Back из меню Go в полосе выпадающих меню.
Назад | Содержание | Вперед
[an error occurred while processing this directive]