Система адресации в Интернете DNS Электронная почта Протокол передачи файлов FTP Броузеры Web-технологии хостинг web-дизайн Логическая и физическая структура сайта Теги и атрибуты Изучаем HTML GIF JPEG GIF-анимация

Основы Web технологий, основы Web дизайна - курс лекций

Урок 4 Первая web-страница

  Изучаем HTML

  Списки

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

  • Вхождение 1
  • Вхождение 2
  • Вхождение 3
  • Вхождение n.

На языке HTML подобный маркированный список можно представить при помощи команды <UL> следующим образом:

<UL ТУРЕ="параметр">

<LI> Вхождение 1</LI>

<LI>Вхождение 2</LI>

<LI>Обхождение 3</LI>

<LI>Обхождение n</LI>

</UL>

Атрибут TYPE позволяет программисту управлять так называемым «буллет стилем» , то есть внешним видом и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений: 

DISC — метки отображаются в виде заполненных черным цветом окружностей; 

CIRCLE — метки отображаются в виде полых окружностей; 

SQUARE — метки отображаются в виде заполненных черным цветом квадратов.

По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, TYPE="DISC".

Нумерованный список позволяет отображать упорядоченную информацию, которая выводится на экран в виде обозначенного цифрами перечисления, например:

1. Вхождение 1

2. Вхождение 2

3. Вхождение 3

И т. д.

[an error occurred while processing this directive]

В документе HTML нумерованный список можно представить с использованием тега <OL>:

<OL ТУРЕ="параметр" START="значение">

<LI> Вхождение 1</LI>

<LI>Обхождение 2</LI>

<LI>Вхождение 3</LI>

</OL>

Атрибут TYPE, так же как и в случае с маркированным списком, позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута TYPE команды <OL>можно использовать один из следующих параметров:

"1" — обычные арабские числа 1, 2, 3 и т. д.

"I" — римские цифры в заглавном регистре I, II, III, IV и т. д.

"i" — римские цифры в строчном регистре i, ii, iii и т. д.

"А" — символьная маркировка в заглавном регистре А, В, С и т. д.

"а" — символьная маркировка в строчном регистре а, b, с и т. д.

Атрибут START позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут TYPE задан как "1", а атрибут START —как "5", то нумерация начнется с цифры 5. Если же TYPE имеет значение "А", аSTART — "D", то маркировка начнется с символа D.

ВНИМАНИЕ При использовании атрибута START необходимо внимательно следить,— чтобы его значение соответствовало типу маркировки, указанному в атрибуте TYPE. Запись <OL TYPE="I" START="A"> не допускается. Наоборот, запись <OL TYPE="A" START="I"> вполне допустима.

По умолчанию значение атрибута TYPE принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки.

Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:

  1. Вхождение 1
  • Вхождение 1-а
  • Вхождение 1-6
  1. Вхождение 2
  • Вхождение 2-а
  • Вхождение 2-6

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

<OL>

<LI>Обхождение 1</LI>

<UL>

<LI>Обхождение l-a</LI>

<LI>Вхождение 1-б<LI>

</UL>

<LI> Вхождение 2</LI>

<UL>

<LI>Вхождение 2-a</LI>

<LI>Обхождение 2-6</LI>

</UL>

</OL>

Следует отметить, что тег О может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером DISC, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером SQUARE, можно записать тег данного элемента следующим образом: <LI ТYРЕ="SQUARE">Вхождение</1-1>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI ТУРЕ="А">Вхождение</LI>. Важно лишь следить за тем, чтобы указываемые в теге О параметры атрибутов совпадали с типом используемого списка.

Помимо нумерованных и маркированных списков язык разметки гипертекста позволяет создавать списки определений, для чего применяются команды <DL>.Внешний вид простого списка определений таков: Заголовок группы вхождений 1

Вхождение 1-а

Вхождение 1-6

Заголовок группы вхождений 2

Вхождение 2-а

Вхождение 2-6

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

<DL>

<DТ>Заголовок группы вхождений 1

<DD>Вхождение 1-а

<DD>Вхождение 1-6

<DT>3aголовок группы вхождений 2

<DD>Вхождение 2-а

<DD>Вхождение 2-6

</DL>

Закрывающие теги для команд <ОТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> — для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.

  Разделители

Для того чтобы визуально отделить часть объектов html-документа от других, применяется тег <HR>. С его помощью можно отобразить в окне броузера горизонтальную черту заданного размера и цвета. В общем виде синтаксис директивы <HR> выглядит следующим образом:

<HR ALIGN="параметр" WIDTH="значение" SIZE="значение" COLOR="значение"> 

Атрибут ALIGN вам уже знаком, он определяет положение горизонтальной черты на экране и может принимать одно из трех возможных значений: CENTER, LEFT и RIGHT (выравнивание черты по центру, левой и правой границам экрана). Атрибут WIDTH определяет длину линии, причем его значение можно задавать либо в пикселах простым целым числом, либо в процентах от ширины экрана при помощи числа от 1 до 100 с добавлением символа «%», например, WIDTH="268" или WIDTH="80%". В последнем случае абсолютная длина линии будет меняться в зависимости от установленного пользователем экранного разрешения. Атрибут SIZE, значение которого — простое целое число, задает толщину линии в пикселах. И наконец, атрибут COLOR определяет цвет заливки линии, в качестве его значения указывается либо шестнадцатеричный цифровой код, либо символьная нотация необходимого цвета. Ниже приведен пример записи тега <HR>:

<HR ALIGN="CENTER" WIDTH="80%" SIZE="1" COLOR="#0000FF">

Очевидно, что подобно директиве <BR> команда <HR> не имеет закрывающего тега. По умолчанию, то есть в случае записи команды <HR> без указания каких-либо атрибутов, броузер отобразит двухцветную серо-белую «вогнутую» линию толщиной в три пиксела и длиной во весь экран.

  Гиперссылки

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

О правилах представления в качестве гиперссылки графических изображений мы подробно побеседуем в пятом уроке. Что касается текстовых гинерссылок,то их можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку.

  Ссылки на документы

Реализовать простую гиперссылку на другую web-страницу можно путем использования в html-документе тега <А>, синтаксис записи которого в общем виде выглядит следующим образом:

<А HREF="URL" TARGET="параметр" TITLE="альтернативный текст"> текст гиперссылки</А>

В приведенном примере атрибут HREF указывает на адрес страницы, с которой вы планируете установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, "http://www.server.ru/page.htinl"), если целевой документ физически расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой странице в пределах локального сервера (например, "/folder/page.html"). Если искомый документ расположен водной директории с текущим, в качестве параметра атрибута HREF достаточно записать его название.

Атрибут TARGET содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом

подчеркивания. Одно из наиболее часто встречающихся значений атрибута TARGET="_blank" отображает открываемый по ссылке документ HTML в новом окне броузера.

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

Следует помнить, что тег <А> является одной из немногих директив HTML, не позволяющих организовать внутри нее вложение однотипных элементов. Иными словами, одну гиперссылку нельзя размещать внутри другой.

  Ссылки на разделы

Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы разделили участок текста. При активизации подобной гиперссылки броузер «отматывает» экран таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа. Первый заключается в подготовке, так называемой «закладки» —специальной метки с уникальным в пределах данного документа именем, присваиваемым «закладке» посредством атрибута NAME. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда:

<А NAME="имя_закладки">ключевое слово или заголовок раздела</А>

Второй этап — создание самой ссылки при помощи такой команды:

<А HREF="#имя_закладки">текст ссылки</А>

Помните, что для задания имени «закладки» лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя «закладки» предваряется символом «#».

Если вы хотите разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем «закладки» указывается URL документа. В этом случае рекомендуется также использовать атрибут TARGET с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом:

<А HREF="http://www.server.ru/document.html#имя_закладки"

TARGET="_blank">текст ссылки</А>

ВНИМАНИЕ Помните, что броузеры не поддерживают режим «отката» при переходе— " по гиперссылке внутри документа. Иными словами, обратившись посредством ссылки к какому-либо разделу одной и той же страницы, при нажатии кнопки «НАЗАД» вы попадете не на тот участок документа, который отображался до активизации гиперссылки, а но ту страницу, которая загружалась в броузер последней.

Краткий экскурс в теорию сетей - Современный Интернет Основы Web технологий - курс лекций