2.6 Задание ссылок
Тег <A>является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутовnameилиhrefтег<A>задает ссылку или якорь. Якорь – закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Допускается переход к якорю и на другой странице.
Для создания ссылки необходимо:
задать ссылку (объект на который необходимо нажать);
указать адрес документа, на который следует перейти.
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде, независимо от имени сайта или веб-страницы. Относительные ссылки, построены относительно текущего документа или корня сайта. Синтаксис:
<a href="URL">...</a> <a name="идентификатор">...</a>
Атрибуты:
href="URL"– Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера,
name="закладка" – Устанавливает имя якоря внутри документа.
target ="имя окна"– Имя окна или фрейма, куда браузер будет загружать документ (_blank– в новое окно браузера,_self– текущее окно);
title="текст"– Добавляет всплывающую подсказку к тексту ссылки.
Пример. Использование тега <A>
Задание ссылки с использованием изображения:
<p><a href="images/my.jpg">Посмотрите на мою фотографию!</a></p>
Задание ссылки с использованием текста:
<p><a href="tip.html">Как сделать такое же фото?</a></p>
Пример. Использование параметра href
<a href="my.html">Относительная ссылка</a>
<a href="http://www.name.ru/html/my.html">Абсолютная ссылка</a>
Пример. Задание закладок.
Вначале следует задать в соответствующем месте якорь и установить его имя параметром nameтега<А>. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
<body>
<p><a name="top"></a></p> /*задание якоря*/
<p>Здесь много-много текста.
Прокручивай его вниз. </p>
<p><a href="#top">Наверх</a></p> /*ссылка на закладку*/
</body>
Пример. Открытие ссылки в новом окне
<p><a href="new.html" target="_blank">Открыть в новом окне</a></p>
Пример. Создание всплывающей подсказки
<p><a href="zoo.html" title="Рисунки животных ...">Рисунки</a></p>
2.7 Структурированные данные. Списки
Cписки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде. Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим задание списков.
Тег <UL> задает маркированный список. Каждый элемент списка должен начинаться с тега <LI>. Синтаксис:
<ul type= "disc | circle | square" >
<li>элемент маркированного списка</li>
<li>элемент маркированного списка</li>
…
</ul>
Атрибуты тега:
type= "disc | circle | square"– Устанавливает вид маркера списка. Значения параметра type и получаемый вид показан в таблице 2.6. По умолчанию значение атрибута – «disc».
Таблица 2.6 – Примеры маркированного списка
|
Код |
Пример |
|
<ul type=" disc "> <li>Чебурашка</li> <li>КрокодилГена</li> <li>Шапокляк</li> </ul> |
|
|
<ul type="circle"> <li>Чебурашка</li> <li>КрокодилГена</li> <li>Шапокляк</li> </ul> |
|
|
<ul type=" square "> <li>Чебурашка</li> <li>КрокодилГена</li> <li>Шапокляк</li> </ul> |
|
Тег <OL>задает нумерованный список. Каждый элемент списка должен начинаться с тега<LI>. Синтаксис:
<оl type="A | a | I | i | 1" start="число" >
<li>элемент маркированного списка</li>
<li>элемент маркированного списка</li>
<li>элемент маркированного списка</li>
…
</оl>
Атрибуты тега:
type= " A | a | I | i | 1" – вид и тип нумерации. В качестве маркеров могут быть следующие значения: заглавные латинские буквы; строчные латинские буквы; заглавные римские цифры; строчные римские цифры; арабские цифры. Значения параметра type и получаемый вид показан в таблице 2.7. По умолчанию значение атрибута – «1»;
start="число"– параметр устанавливает номер, с которого будет начинаться список.
Таблица 2.7 – Примеры нумерованного списка
|
Код |
Пример |
|
<o type="A"> ... </ol> |
|
|
<ol type="a"> ... </ol> |
|
|
<ol type="I"> ... </ol> |
|
|
<ol type="i"> ... </ol> |
|
|
<ol type="1"> ... </ol> |
|
Задание элементов списка используется тег <LI>. Атрибуты тега:
type= "disc | circle | square"– устанавливает вид маркера для ненумерованных списков;
type= " А | a | I | i | 1"– вид и тип нумерации маркера для нумерованных списков;
value="число"– Параметр устанавливает номер текущего элемента списка. Только для нумерованных списков.
Пример. Задать простой ненумерованный список с различными маркерами для его элементов.
|
<ul> <li type="square">Чебурашка</li> <li>Крокодил Гена</li> <li type="circle">Шапокляк</li> </ul> |
|
Пример. Задать вложенный нумерованный список с ненумерованными подсписком.
|
<p> Виды программного обеспечения: <ol> <li> Системное <ul> <li> Операционные системы <li> Драйверы </ul> <li> Прикладное <ul> <li> Текстовые процессоры <li> Табличные процессоры <li> СУБД </ul> </ol> </p>
|
|
Тег <OL>задает нумерованный список.
Для создания списка терминов и их определений используется тег <DL>. Определяемый термин задается тегом <DT>, а его определение тегом <DD>. Синтаксис:
<DL><DT>Термин</DT> <DD>Определение</DD></DL>
Пример. Задание определения
|
<h4>Новости</h4> <dl> <dt>14:30</dt> <dd>Премьер-министр с очередным визитом посетил...</dd> <dt>18:00</dt> <dd>Наши спортсмены выиграли соревнования по...</dd> <dt>19:00</dt> <dd>Абсолютно ничего не произошло...</dd> </dl> |
|
