Язык гипертекстовой разметки HTML

Списки

Списки являются одним из наиболее часто употребляемых форм представления данных.

Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле.

Маркированные списки

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

Для создания маркированного списка необходимо использовать тэг-контейнер <ul> … </ul>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <p> или принудительного перевода строки <br>.

Каждый новый элемент списка следует располагать внутри тэгов <li>…</li>. Пример:

<ul> 
<li>Иванов</li> 
<li>Петров</li> 
<li>Сидоров</li>
</ul>

Нумерованные списки:

Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными.

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

<ol> 
<li>Иванов</li> 
<li>Петров</li>
<li>Сидоров</li>
</ol>

Списки определений

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

Для создания списка определений используются тэги <dl> ... </dl>.

Вместо меток <li> в списках определений используются метки <dt> (от английского definition term — определяемый термин) и <dd> (от английского definition definition — определение определения).

Пример

<dl> 
<dt>HTML </dt>
<dd> Термин HTML (HyperText Markup Language) означает 
'язык маркировки гипертекстов'. 
</dd>
<dt>HTML-документ </dt>
<dd>Текстовый файл с расширением *.html </dd>
</dl>

Как правило, текст определяемого термина должен располагаться в одной строке. Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо.

Организация гиперссылок

Гипертекстовый документ — это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.

Ссылка состоит из двух частей. Первая из них — это то, что отображается на Web-странице; она называется указателем ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). При щелчке мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом.

Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов — текстовые и графические.

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

<a href="example.html">Указатель ссылки</a>

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

<a href="example.html">
<img src="picture.gif" />
</a>

Второй частью ссылки является URL-адрес - адрес Web-страницы, которая будет загружена при щелчке мышью на указателе. Указание адреса может быть относительным или абсолютным.

Тэг <a> имеет единственный параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например, http://www.server.com/home/index.htm. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </a>. Указатель ссылки может быть относительным или абсолютным.

Относительные ссылки

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка.

Например, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page, то относительный указатель /picture подразумевает адрес http://www.mysite.com/page/picture, т. е. подкаталог, расположенный на том же компьютере.

Относительный указатель работает по-другому, если в HTML-документе используется тэг <base>. Он содержит URL-адрес, относительно которого в документе построена адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <base> отсутствует, то адресация строится относительно адреса текущего документа.

Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

Если к публикации подготовлена некоторая группа HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на одном компьютере, то вся эта группа документов может быть перенесена в любой другой каталог на любом другом компьютере.

Абсолютные ссылки

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

<a href="http://www.othersite.com/home/index.html">
Документ на другом сайте 
</a>

В этом случае соответствующая ссылка называется абсолютной.

Внутренние ссылки (анкера)

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы.

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

Пример. Пусть необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге).

1. Необходимо создать следующий анкер в файле 2.html:

   <a name="AAA">Переход закончен</a>

   Слова "Переход закончен" при этом никак не будут выделены в тексте документа.
2. В файле 1.html (или в любом другом) можно определить переход на этот анкер:

   <a href="2.html#AAA">Переход к анкеру AAA</a>

   Переход к этому анкеру можно определить и внутри самого документа 2.html — достаточно только включить в него следующий тэг:

   <a href="#AAA">Переход к анкеру AAA</a>

Это удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа.

Рекомендуется задавать имена анкеров латинскими буквами. Большинство браузеров отличают большие буквы от маленьких.

В XTHML использование pвнутренних ссылок считается устаревшим инструментом.

Ссылки на другие виды ресурсов

Возможны ссылки и на другие виды ресурсов:

<a href="ftp://server/directory/file.ext">
Загрузить файл
</a>
<a href="mailto:user@mail.box">
Послать письмо
</a>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано mailto:user@mail.box.