Структура документа html
Простейший правильный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом:
<HTML> <HEAD><TITLE>Заголовок документа</TITLE></HEAD> <BODY> Текст документа </BODY> </HTML>
Здесь использованы ключевые слова:
HTML — начало и конец документа HTML;
HEAD — начало и конец раздела заголовка;
TITLE — начало и конец общего заголовка документа;
BODY — начало и конец тела документа.
Большинство элементов языка HTML описывает части содержания документа и помещаются между тегами <BODY> и </BODY> (структурный элемент BODY).
Основными функциональными элементами документа HTML являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи тегов от <H1> до <H6>. В Web-документе они отображаются шрифтом разного размера.
Обычные абзацы задаются с помощью парного тега <P>. В HTML нет средств для задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег </P> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает очередной абзац. Если в тексте присутствует символ конца строки, при воспроизведении в броузере он рассматривается как простой пробел. Для перехода на другую строку используется непарный тег <BR>. В качестве ограничителя абзацев может использоваться горизонтальная линейка, задаваемая тегом <HR>, например:
<HR ALIGN="RIGHT" SIZE="10" WIDTH="50%">
Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину ширины окна и расположенную справа.
Гипертекстовые ссылки
Как только в Web-страницу будет встроена гиперсвязь, документ можно назвать гипертекстом. Гиперссылка может указывать:
на позицию в своем документе (внутренние гиперссылки),
на другой документ на своем сервере,
на произвольный объект по любому адресу Internet.
Внутренние гиперссылки применяются для того, чтобы упростить пользователю ориентацию в больших документах.
Гиперссылки могут быть оформлены как абсолютные или относительные. Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL - Uniform Resource Locator.
Абсолютный URL — это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь. Относительный URL используется для адресации в пределах документа или совокупности документов на одном сервере.
Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-броузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet.
Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора <base> в заголовке HTML-документа.
Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet.
Гипертекстовая ссылка задается парным тегом <A>, который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например:
<A HREF=http://www.site.com/index.htm>
Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутренняя, например:
<A HREF="text.htm">
Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при изменении адреса Web-узла. Дескриптор гиперсвязи <A> иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor — якорь).
Полный формат гиперссылки включает возможность ссылки на определенное место внутри страницы. Для этого соответствующее место помечается с помощью якоря. Якорь задается тегом <A> с атрибутом name, например:
<A name="MyLabel">.
Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа "#":
<A HREF=http://www.site.com/index.htm#address>
Между дескрипторами <A> и </A> могут находиться только текст, графика и заголовки. Текст, располагающийся между <A> и </A> дескрипторами, обычно изображается броузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе <body> цвет текста гиперсвязи можно изменить.
При включении в Web-страницу гиперссылок учитывайте следующие рекомендации.
Выразительно оформляйте текст гиперсвязи. По тексту гиперсвязи должно быть четко и ясно понятно, куда ведет эта связь. Текст гиперссылки не был слишком длинным: кратко и сжато выражайте цель ссылки.
Не перегружайте документ гиперссылками. Вставляйте в текст Web-страницы только действительно необходимые ссылки. В противном случае, пытаясь ознакомиться со всеми адресуемыми объектами, пользователь очень быстро потеряет нить ваших рассуждений.
Никогда не размещайте два <а>-дескриптора по соседству друг с другом в тексте документа, не вставив между ними никакого разделителя. При отображении такого документа тексты этих гиперсвязей просто сольются.
Создав свою Web-страницу, попытайтесь взглянуть на нее глазами пользователя. Все ли гиперссылки выдержаны в одном стиле?
Основные дескрипторы для организации ссылок и форматирования текста показаны в таблице.
Дескриптор |
Атрибут |
Назначение |
<a>, </a> |
href=URL |
Адрес объекта |
|
name=имя метки |
Создание локального имени ссылки |
<b>, </b> |
|
Полужирный шрифт |
<base> |
href=URL |
Базовый URL |
<basefont> |
size=n |
Размер шрифта |
<big>,</big> |
|
Увеличение шрифта |
<body>, </body> |
|
Содержимое HTML-документа |
|
alink=Цвет |
Цвет активизированной гиперсвязи |
|
background=URL |
URL повторяющейся фоновой иллюстрации |
|
bgcolor=Цвет |
Цвет фона |
|
link=Цвет |
Цвет гиперсвязи |
|
text=Цвет |
Цвет текста |
|
vlink=Цвет |
Цвет посещенной гиперсвязи |
<br> |
|
Принудительный разрыв строки |
<caption>, </caption> |
|
Заголовок таблицы |
<center>,</center> |
|
Центрирование фрагмента документа |
<em>, </em> |
|
Выделение текста |
<font>, </font> |
color=Цвет |
Задание цвета шрифта |
|
face=Шрифт |
Вид шрифта |
|
size=n | +n | -n |
Размер (абсолютный | относительный) |
<hn>, </hn> |
|
Уровень заголовков, где n = 1 - 6 |
<hr> |
|
Горизонтальная линия |
|
align=Выравнивание |
Выравнивание по горизонтали |
|
noshade |
Выключение трехмерного изображения |
|
size=n |
Высота линии в пикселах |
|
width=n | n% |
Ширина линии |
<i>, </i> |
|
Курсив |
<li>, </li> |
|
Элемент списка |
|
value=n |
Явное задание номера элемента |
<ol>, </ol> |
|
Пронумерованный список |
|
start=n |
Начальный номер |
<p>, </p> |
|
Текстовый абзац |
|
align=Выравнивание |
Выравнивание по горизонтали |
<small>, </small> |
|
Уменьшение шрифта |
<sub>, </sub> |
|
Нижний индекс |
<sup>, </sup> |
|
Верхний индекс |
<table>, </table> |
border=n |
Определение таблицы с обрамлением |
<td>, </td> |
|
Ячейка данных таблицы |
|
colspan=n |
Захваченные столбцы |
|
rowspan=n |
Захваченные строки |
<th>, </th> |
|
Ячейка заголовка таблицы |
|
colspan=n |
Захваченные столбцы |
|
rowspan=n |
Захваченные строки |
<tr>, </tr> |
|
Строка таблицы |
<ul>, </ul> |
|
Ненумерованный список |
В таблице использованы следующие обозначения:
параметр Цвет задается шестнадцатеричным кодом #RRGGBB, где RR, GG, BB - соответственно красная, зеленая и синяя составляющие цвета, принимающие значения от 00 до FF. Чем больше значение, тем меньше насыщенность цвета. Стандартные цвета можно задать словом: Black, Silver, Gray, White, Red, Green, Yellow, Blue и другие;
параметр Выравнивание может принимать значения Center;
вертикальная черта "|" в описании атрибутов означает возможность выбора одного из атрибутов.
Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются следующие коды:
< — левая угловая скобка;
> — правая угловая скобка;
& — амперсанд;
" — кавычки;
  — непрерывный пробел.
Замечание: в этих кодах нельзя использовать заглавные буквы.
Рассмотрим примеры форматирования текста.
Пример 1
<font color=Red size=6 face="Times New Roman"> Пример управления шрифтом </font>
Броузер воспроизведет текст
"Пример управления шрифтом"
красным цветом, размером — 6, шрифтом Times New Roman.
Пример 2
<UL> <LI>яблоки <LI>бананы </UL>
Результатом воспроизведения является маркированный список:
яблоки
бананы
Пример 3
<OL> <LI>апельсины <LI>персики <LI>виноград </OL>
Результатом воспроизведения является нумерованный список:
апельсины
персики
виноград
Пример 4
<table border=1> <caption>Результаты измерений</caption> <tr> <th>время</th> <th>температура</th> <th>давление</th> </tr> <tr align=right> <td>12:00</td> <td>26.00</td> <td>12.800</td> </tr> <tr align=right> <td>12:15</td> <td>22.50</td> <td>9.810</td>< /tr> <tr align=right> <td>12:30 </td><td>11.00 </td> <td>1.650</td> </tr> <tr align=right> <td>12:45</td> <td> 3.30</td> <td> 0.030</td>< /tr> <tr align=right> <td>13:00</td> <td> 0.05</td> <td> 0.002</td>< /tr> </table>
Результаты воспроизведения этого примера будет таблица:
Результаты измерений |
||
время |
температура |
давление |
12:00 |
26.00 |
12.800 |
12:15 |
22.50 |
9.810 |
12:30 |
11.00 |
1.650 |
12:45 |
3.30 |
0.030 |
13:00 |
0.05 |
0.002 |