ОБЩИЕ СВЕДЕНИЯ

Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web. В основу гипертекстовой разметки была положена теговая модель описания документа, позволяющая представить документ в виде совокупности элементов, каждый из которых окружен тегами. По своему назначению теги близки к понятию скобок и задают области действия имен локальных переменных, определяют область действия правил интерпретации текстовых элементов документа и т.п.

Общая схема построения элемента текста в формате HTML может быть записана в следующем виде:

"элемент":= <"имя элемента" "список атрибутов">

содержание элемента </"имя элемента">

Конструкция перед содержанием элемента называется тегом начала элемента, а конструкция, расположенная после содержания элемента, – тегом конца элемента.

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка – это адрес другого HTML документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, для которого эта ссылка определена.

Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма – Universe Resource Locator (URL). Типичным примером использования этой записи можно считать следующую запись:

Этот текст содержит <A HREF = "http://polyn.net.kiae.su/ altai/index.html"> гипертекстовую ссылку </A>.

Здесь элемент "A", который в HTML называют якорем (anchor), использует атрибут "HREF", обозначающий гипертекстовую ссылку для записи этой ссылки в форме URL. Данная ссылка указывает на документ с именем "index.html" в каталоге "altai" на сервере "polyn.net.kiae.su", доступ к которому осуществляется по протоколу "http".

Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры. Собственно, сам документ – это один большой контейнер с именем "HTML":

<HTML> Содержание документа </HTML>

Сам элемент HTML или гипертекстовый документ состоит из заголовка документа (HEAD) и тела (BODY):

<HTML><HEAD>Содержание заголовка</HEAD><BODY>Содержание тела документа</BODY></HTML>

Приведенная форма записи определяет классический HTML-документ, например:

Пример 1.

<HTML>

<!-Author: Ivanov IvanDate: December 31, 2010-><HEAD><TITLE> This is a Baner</TITLE></HEAD><BODY BACKGROUND=www_wall.jpg VLINK=0000FF LINK=FF0000><CENTER><TABLE><TR><TD><IMG SRC="interne0.jpg"></TD><TD CENTER><H3> Администрирование Internet</H3><I> Справочное руководство. </I></TD></TR></TABLE></CENTER></BODY></HTML>Каждый документ в WWW имеет свое имя, которое указывается в его заголовке <TITLE>. Его можно видеть в первой строке программы-интерфейса. Контейнер BODY открывает тело документа. В качестве фона <BODY BACKGROUND=www_wall.jpg> в этом документе определена картинка www_wall.jpg, которая в примере 1 задана частичной формой спецификации URL без указания полного адреса ресурса в сети. Далее в документе определена таблица <TABLE>, состоящая из двух ячеек: картинка и текстовый фрагмент. Текст определен как заголовок третьего уровня <H3>, который должен отображаться стилем Italic <I>.

Большинство HTML документов имеют заголовок. Для его создания используют тэги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тэгами, можно получить заголовок определенного уровня.

<H1>Заголовок</H1>

<H2>Заголовок</H2>

<H3>Заголовок</H3>

<H4>Заголовок</H4>

<H5>Заголовок</H5>

<H6>Заголовок</H6>

Для создания нового абзаца используется тэг <P>, а для перехода на новую строку без создания абзаца – тэг <BR>. Эти тэги закрывать не обязательно. При этом в тэге <P> используется элемент ALIGN, которым может задаваться выравнивание абзаца:

<P ALIGN=LEFT>По левому краю</P>

<P ALIGN=CENTER>По центру</P>

<P ALIGN=RIGHT>По правому краю</P>

<P ALIGN=JUSTIFY>Текст, находящийся между этими элементами выравнивается по ширине</P>

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

<B>Жирный текст</B>

<I>Курсив</I>

<U>Подчеркнутый</U>

<STRIKE>~~Перечеркнутый~~</STRIKE>

<SUP>^{Верхний индекс}</SUP>

<SUB>_{Нижний индекс}</SUB>

Некоторые тэги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тэга (можно сразу указывать несколько параметров в одном тэге). Например, открывающийся тэг <FONT> (закрывающийся тэг </FONT> обязателен) может иметь несколько атрибутов:

SIZE – задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тэгами <FONT SIZE=n></FONT>, где n – цифровое значение, можно придать ему нужный размер:

<font size="1">Пример 1</font>
<font size="2">Пример 2</font>

……..
<font size="6">Пример 6</font>

FACE – задает стандартное имя шрифта. Целесообразно использовать шрифты, установленные на компьютере пользователя, в противном случае Обозреватель (браузер) будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows XP, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семейства шрифта – имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке – Tahoma.

<font face="Times New Roman">Times New Roman</font>

<font face="System">System</font>

<font face="Arial">Arial</font>

<font face="Courier">Courier</font>

<font face="Verdana">Verdana</font>

<font face="Comic Sans MS, Tahoma">Comic Sans MS</font>

COLOR – задает цвет текста (по умолчанию черный – #000000). Цвет текста может определяться как самим названием, например, red, blue и т.д, так и представляться в шестнадцатеричном виде – #FF0000 (красный) #0000FF (синий).

<font COLOR="red">Красный</font>
<font COLOR="#FF0000">Красный</font>

С помощью элемента STYLE тэга <SPAN> (закрывающийся тэг </SPAN> обязателен) можно задавать выделение текста любым цветом:

<SPAN STYLE="BACKGROUND-COLOR: lightgreen">Светло-зеленый</SPAN>

<SPAN STYLE="BACKGROUND-COLOR: yellow">Желтый</SPAN>

<SPAN STYLE="BACKGROUND-COLOR: lightblue">Светло-синий</SPAN>

Цвет и фон страницы выбираются по желанию пользователя, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта.

Для вставки цвета фона страницы в строку с тэгом <BODY> документа нужно добавить параметр BGCOLOR и указать его значение – название цвета или его шестнадцатеричный вид. Данные два примера заполняют страницу документа красным цветом:

<BODY BGCOLOR="RED"> (использовано название цвета)
<BODY BGCOLOR="#FF0000"> (использован шестнадцатеричный вид цвета)

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

<BODY BACKGROUND="images.gif">

Для вставки изображений в HTML документ используется следующая конструкция:

В результате web-страница будет иметь вид представленный на рисунке 10.1.

Рисунок 10.1 Вид web-страницы с рисунком и фоном

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>

Параметры элемента <A> представлены в таблице 11.1.

Таблица 11.1 Параметры элемента A

Атрибут	Значение
HREF	URL (унифицированный локатор ресурсов) – адрес любого файла в Интернете. Может быть абсолютным, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET	Определяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения: _top – загружает гиперссылку на всем пространстве окна Обозревателя (если до этого существовало разбиение на фреймы, то оно исчезнет); _blank – загружает гиперссылку в новом окне Обозревателя; _self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать); _parent – загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
TITLE	Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

Для примера была создана ссылка на документ 002.htm под рисунком. Предполагается, что оба документа находятся в одной папке.

</p>

Щелкнув на ссылку, откроется другой документ, в данном случае 002.htm.

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

Пример таблицы представлен на рисунке ниже:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Такая таблица реализуется следующим кодом:

Примечание: В данном примере создана таблица с фиксированной шириной (WIDTH="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.

<TABLE BORDER="2" WIDTH="200" BGCOLOR=yellow> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE>

Таблица начинается открывающимся тэгом <TABLE> и завершается закрывающимся </TABLE>. Тэг <TABLE> может включать следующие атрибуты:

WIDTH="n"	Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
BORDER="n"	Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
BORDERCOLOR="#FFFFFF"	Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатеричное значение цвета.
BGCOLOR="#FFFFFF"	Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатеричное число.
BACKGROUND="image.gif"	Заполняет фон таблицы изображением.
ALIGN=LEFT	Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).

Нумерованные списки.Начинается пронумерованный список с тэга <OL> и завершается тэгом </OL>. В данном случае Обозреватель автоматически будет проставлять числа перед каждым элементом списка. Например:

<OL> <LI> Один <LI> Два <LI> Три <LI> Четыре <LI> Пять </OL>

1. Один 2. Два 3. Три 4. Четыре 5. Пять

Маркированные списки.Маркированный список начинается открывающимся тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>.

Для маркированных списков Обозреватель обычно использует маркеры для пометки элемента списка. По умолчанию вид маркера настраивает Обозреватель пользователя. Например:

<UL> <LI> Один <LI> Два <LI> Три <LI> Четыре <LI> Пять </UL>

o Один o Два o Три o Четыре o Пять