Абсолютный и относительный URL

В разделе, посвященном компьютерным сетям и принципам поиска информации в Интернет, было введено понятие URL (универсального локатора ресурса), однозначно определяющего расположение объекта в глобальной сети. В общем случае URL имеет следующий вид (части, заключенные в квадратные скобки, не обязательны и могут быть опущены):

протокол://адрес_узла[:порт]/путь/файл[#метка]

В таблице ниже приведены назначения компонент URL.

Компонента	Назначение
протокол	Обозначение одного из протоколов, используемых для обращения к ресурсу, возможные значения: http, ftp, file и др.
адрес_узла	Доменное имя или IP-адрес компьютера в сети Интернет
порт	Порт, по которому клиент обращается к серверу для установления соединения; указывается только в случае обращения к нестандартному порту
путь	Путь к требуемому ресурсу
файл	Имя файла, содержащего HTML-документ или другой ресурс
метка	Позиция в документе, начиная с которой он отображается в окне браузера

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

Пример

При обращении к конкретному ресурсу порт и позиция в документе часто не указываются:

http://www.ctc.msiu.ru/education/book/index1.html

Пример

Рассмотрим ссылку на так называемую домашнюю страницу (Home Page) конкретного пользователя. Предположим, что на сервере www.msiu.ru зарегистрирован человек с пользовательским именем (login) ivanov. Домашней страницей называют файл index.html, находящийся в директории с именем public_html, которая, в свою очередь, должна располагаться в домашней директории пользователя. Тогда ссылка на домашнюю страницу этого человека может быть задана в виде

<A HREF="http://www.msiu.ru/~ivanov">Текст ссылки</A>

Обратите внимание, что имя самого файла при такой записи не указывается. Если потребуется сослаться на какой-либо другой документ данного пользователя, расположенный в директории public_html, например, photo.html, то ссылка примет вид:

<A HREF="http://www.msiu.ru/~ivanov/photo.html">Текст</A>

Относительный URL описывает положение ресурса, на который указывает ссылка, относительно URL текущего документа.

Пример

При задании относительных ссылок указывается путь по файловому дереву до того места, где находится требуемый HTML-ресурс. Вот ссылка на документ image.html, размещенный в текущем каталоге: <A HREF="image.html">Ссылка</A>.

Если файл pict.html лежит в родительском по отношению к текущему документу каталоге, то следует использовать запись

<A HREF="../pict.html">Текст ссылки</a>

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

<A HREF="Picture/pict.html">Текст ссылки</A>

Гиперссылки в пределах одного документа

Другая форма тега <A> предназначена для присваивания имени некоторому фрагменту документа HTML:

<A NAME="имя">фрагмент документа</A>

Тег <A> часто называют тегом якоря (anchor). Если якорь применяется для добавления метки (имени) к фрагменту документа, то его называют именованным якорем.

Для того чтобы сослаться на фрагмент, которому присвоено имя, используется следующая форма тега <A>:

<A HREF="URL_ресурса#имя">Текст ссылки</A>

Если нужно сослаться на фрагмент текущего документа, то URL-ресурса можно опустить:

<A HREF="#имя">Текст ссылки</A>

Пример

Пусть в документе с именем book.html заголовку главы 2 присвоено имя chapter2:

<A NAME="chapter2">Глава 2</A>

Тогда ссылка на эту главу, расположенная в этом же документе, будет иметь вид:

<A HREF="#chapter2">Глава 2</A>

Для задания ссылки на эту же метку файла book.html из другого файла нужно написать:

<A HREF="book.html#chapter2">Глава 2</A>

Ссылка на почтовый ящик

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

<A HREF=mailto:адрес_e-mail>текст ссылки2</A>

Здесь вместо адрес_e-mail нужно поставить адрес почтового ящика. После того, как посетитель активизирует эту ссылку, у него на экране появится специальное окно, позволяющее послать письмо по указанному адресу.

Пример

<A HREF=mailto:[e-mail]>Почта автору</A>

Задания

1. Откройте файл image.html и сделайте в нем ссылку в виде картинки на файл first.html.

2. Откройте файл first.html и сделайте в нем текстовую ссылку на файл image.html.

3. Добавьте в файл first.html несколько абзацев текста в таком количестве, чтобы документ уже не помещался целиком в окне браузера. Отметьте последний абзац, присвоив ему имя end.

4. Включите ссылку, ведущую сразу к последнему абзацу файла first.html, в файл image.html.

5. В файл first.html включите ссылку на свой почтовый ящик.

Дальше»

Списки

В настоящее время стандарты HTML поддерживают теги для списков трех различных видов: нумерованных (упорядоченных), маркированных (неупорядоченных) и списков определений. Списки и элементы списков являются блочными элементами. Это означает, что перед ними и после них автоматически добавляются пустые строки.

Язык HTML допускает вложенность любых видов списков. Для этого размещают одну пару тегов (стартовый и завершающий) внутри другой. Следует помнить о том, что все имеющиеся списки должны завершаться закрывающим тегом.

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

Нумерованные (упорядоченные) списки используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится.

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

Пример

<OL> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </OL>

 

Тег <OL> может имеет атрибуты TYPE и START:

<OL START=n TYPE=вид_счетчика>

Атрибут TYPE задает вид счетчика, возможные значения которого приведены в таблице, a START - начальное значение.

Значение	Функция
A	большие латинские буквы (A,B,C...)
a	маленькие латинские буквы (a,b,c...)
I	большие римские цифры (I,II,III...)
i	маленькие римские цифры (i,ii,iii...)
	арабские цифры (1,2,3...); используется по умолчанию

Пример

<OL TYPE=I START=15> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </OL>

 

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

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

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

Пример

<UL> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </UL>

 

Тег <UL> имеет атрибут TYPE, определяющий внешний вид маркера:

<UL TYPE=тип_маркера>

Значение атрибута TYPE может быть одним из следующих: disc (круг - форма по умолчанию), circle (окружность) или square (квадрат).

Пример

<UL TYPE=square> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </ul>

 

Атрибут TYPE применяется и в теге <LI> для изменения формы маркера перед конкретным элементом списка.

Пример

<UL> <LI TYPE=circle> Программирование <LI TYPE=disk> Алгоритмизация <LI TYPE=square> Проектирование</ul>

 

Тег <LI> обеспечивает вывод маркера и разделение элементов списка. Если хочется использовать нестандартные маркеры, то тег <LI> не указывается. Для выделения элементов списка в этом случае используются какие-либо картинки или символы, а тег <BR> обеспечивает переход к следующему элементу списка.

Пример

<UL> <IMG SRC=arr.gif ALIGN=top> <nbr>Программирование<BR> <IMG SRC=arr.gif ALIGN=top> <nbr>Алгоритмизация<BR> <IMG SRC=arr.gif ALIGN=top> <nbr>Проектирование<BR> </UL>

 

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

Список описаний (список определений) начинается с тега <DL> и завершается тегом </DL>. Данный список служит для создания списков типа "термин" - "описание". Термин автоматически размещается у левой границы страницы, а их определения смещены относительно них вправо. Каждый термин обозначается тегом <DT>, а его описание - тегом <DD>.

<DL> <DT>Отдел маркетинга <DD>Данный отдел занимается продвижением товаров и услуг <DT>Финансовый отдел <DD>Данный отдел занимается финансовыми операциями </DL>

В результате браузер покажет следующее:

 

Отметим, что все вышеперечисленные виды списков имеют атрибут СОМРАСТ, позволяющий выводить списки в более компактном виде.

Вложенные списки

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

<OL> <LI>Дирекция</LI> <UL> <LI>Иванов И.И.</LI> <LI>Петров К.В.</LI> </UL> <LI>Отдел маркетинга</LI> <UL> <LI>Варшавская Е.Л.</LI> <LI>Самсонов Д.М.</LI> </UL> </OL>

 

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

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

<OL TYPE=I> <LI>Дирекция</LI> <OL> <LI>Иванов И.И.</LI> <LI>Петров К.В.</LI> </OL> <LI>Отдел маркетинга</LI> <OL> <LI>Варшавская Е.Л.</LI> <LI>Самсонов Д.М.</LI> </OL> </OL>

 

Задания

1. Создайте файл list.html в директории public_html и включите в него маркированные и нумерованные списки нескольких уровней вложенности.

2. Используйте различные стартовые значения для нумерованных списков.

Дальше»

Использование таблиц в HTML

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

Таблицы в языке HTML всегда имеют прямоугольный вид и состоят из строк, которые в свою очередь состоят из ячеек. Все языковые конструкции, описывающие компоненты создаваемой таблицы, заключаются между тегами <TABLE> и </TABLE>.

Заполнение таблицы происходит построчно; для обозначения строки используется пара тегов <TR>... </TR>. Строка состоит из ячеек, для задания которых используют либо теги <TH>... </TH>, если эти ячейки содержат заголовки столбцов, либо теги <TD>... </TD>. Заголовки выводятся полужирным шрифтом и располагаются по центру ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки. Для задания заголовка всей таблицы используются теги <CAPTION> и </CAPTION>.

Пример

<TABLE><CAPTION>Заголовок таблицы</CAPTION><TR><TH>Заголовок 1</TH><TH>Заголовок 2</TH></TR><TR><TD>Ячейка 1</TD><TD>Ячейка 2</TD></TR><TR><TD>Ячейка 3</TD><TD>Ячейка 4</TD></TR></TABLE>

 

Наличие в ячейках данных не обязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<TD></TD>), либо поместить в нее символ неразрывного пробела, задаваемого специальной последовательностью символов - &nbsp; (т. е. создать ячейку вида <TD>& nbsp; </TD>).

Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тег <TR> сигнализирует о начале новой строки, пустые ячейки будут добавлены браузером автоматически.

Основные атрибуты тега <TABLE>

Назначение основных атрибутов тега <TABLE> и значения, которые они могут принимать перечислены в таблице.

Атрибут	Назначение
BORDER=n	Определяет ширину рамки таблицы (в пикселах), например, BORDER=1; значение, равное нулю, означает отсутствие рамки
WIDTH=n	Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера
HEIGHT=n	Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера
ALIGN	Задает горизонтальное выравнивание таблицы в окне браузера; имеет значения left, center и right (по умолчанию - left)
CELLPADDING=n	Добавляет свободное пространство между данными внутри ячейки и ее границами; по умолчанию значение равно 2
CELLSPACING=n	Добавляет свободное пространство между ячейками внутри всей таблицы; по умолчанию значение равно 2
HSPACE=n	Задает области свободного пространства указанной ширины (в пикселах) слева и справа от таблицы
VSPACE=n	Задает области свободного пространства заданной высоты (в пикселах) сверху и снизу от таблицы
BGCOLOR=цвет	Устанавливает цвет фона всей таблицы
BACKGROUND=URL	Указывает фоновое изображение для таблицы, где URL - адрес источника (имя файла с изображением)

Пример

Изменим содержимое документа, созданного в предыдущем примере, добавив атрибуты BORDER и ALIGN в тег <TABLE>:

<TABLE BORDER=1 ALIGN=center>

Теперь ячейки таблицы будут обрамлены рамкой, a таблица выровнена по центру окна браузера.