HTML - 5. Ссылки и изображения



HTML ссылки — гиперссылки

  • HTML ссылки — это гиперссылки.
  • Гиперссылка — это часть документа (текст или изображение), ссылающаяся на другой элемент (документ)
<a href="Путь">Текст ссылки</a>

Локальные гиперссылки

В примере выше использовался абсолютный URL. В локальной ссылке указывается относительный URL (в данном случае ссылка указывает на тот же сайт).

<a href="page.html">Ссылка на другой документ на этом сайте</a>

Атрибут target

Атрибут target указывает как открыть связанный документ. В этом примере связанный документ откроется в новом окне или новой вкладке.

Таблица значений и описания.

Значение атрибутаОписание
_blankОткрывает связанный документ в новом окне или вкладке
_selfОткрывает связанный документ в текущем окне (значение по умолчанию)
_parentОткрывает связанный документ в родительском фрейме
_topОтменяет все фремы и загружает связанный документ в текущем окне браузера
framenameОткрывает связанный документ в фрейме с таким именем

Атрибут id

Атрибут id может использоваться для создания закладок внутри документа. Закладки не отображаются, они невидимы для читателя.

Создайте HTML документ и заполните его какой нибудь информацией (чтобы появился справа скролл) Добавте атрибут id на ссылку где нибудь в конце документа

<a id="tips">Раздел "Советы"</a>

Затем добавте ссылку в начало докумета

<a href="#tips">Перейти в раздел "Советы"</a>

Пример ссылки на внешний ресурс.

<a href="http://www.proglang.su/html/26#tips">Перейти в раздел "Изображения"</a>

Результат

Изображения

<!DOCTYPE html>
<html>
    <body>

        <h2>Изображение</h2>
        <img src="pic.jpg" alt="Моё изображение" width="304" height="228" />

    </body>
</html>

Изображения определяются с помощью одиночного тега img, который не имеет закрывающего тега. Путь к изображению указывается в в атрибуте src="путь". Атрибут alt задаёт альтернативный текст. Если по какой то причине браузеру не удалось загрузить изображение, то будет показан альтернативный текст.
Атрибут alt является оббязательным, страницу будет не валидна без него.
Атрибуты Width и Height задают размер изображения на странице (рекомендую использовать css через атрибут style.
style="width:128px;height:128px;"

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <img src="html5.gif" alt="HTML5 иконка" style="width:128px;height:128px;" />
        <img src="html5.gif" alt="HTML5 иконка" width="128" height="128" />

    </body>
</html>

Изображения в другой папке

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

<img src="/images/html5.gif" alt="HTML5 иконка" style="width:128px;height:128px;" />

В данном примере картинка находится в папке images, которая в свою очередь находится в папке с вашим HTML документом.

Изображение как гиперссылка

Рассмотрим пример где используется изображение в качестве ссылки (ссылка ведёт на документ page.html).

<a href="page.html">
  <img src="smiley.gif" alt="Логитип" width="42" height="42" />
</a>

Карта изображения

Изображения можно разделить на отдельные секторы, которые будут (как ссылки) указывать на какой нибудь документ.

Тег <map> определяет карту изображения. Для связи используются атрибуты: usemap="#значение" для тега <img и name="значение" для тега <map. Значение атрибутов должны быть одинаковые. В теге <map> используются теги <area>, в которых по координатам определяются активные области изображения.
Обратите внимание на атрибуты href="sun.htm", в них указываются путь к документу.

<img src="map.gif" alt="Изображение карта" usemap="#mymap" style="width:145px;height:126px;" />

<map name="mymap">
  <area shape="rect" coords="0,0,82,126" alt="Страница 1" href="page1.htm">
  <area shape="circle" coords="90,58,3" alt="Страница 2" href="page2.htm">
  <area shape="circle" coords="124,58,8" alt="Страница 3" href="page3.htm">
</map>