Изображения на Web-страницах. Гиперссылки
Тег <img>
Описание
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
<img src="URL" alt="альтернативный текст">
Атрибуты
align - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt - Альтернативный текст для изображения.
border - Толщина рамки вокруг изображения.
height - Высота изображения.
hspace - Горизонтальный отступ от изображения до окружающего контента.
ismap - Говорит браузеру, что картинка является серверной картой-изображением.
longdesc - Указывает адрес документа, где содержится аннотация к картинке.
lowsrc - Адрес изображения низкого качества.
src - Путь к графическому файлу.
vspace - Вертикальный отступ от изображения до окружающего контента.
width - Ширина изображения.
usemap - Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
Тег <a>
Описание
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис
<a href="URL">...</a>
<a name="идентификатор">...</a>
Атрибуты
accesskey - Активация ссылки с помощью комбинации клавиш.
coords - Устанавливает координаты активной области.
download - Предлагает скачать указанный по ссылке файл.
href - Задает адрес документа, на который следует перейти.
hreflang - Идентифицирует язык текста по ссылке.
name - Устанавливает имя якоря внутри документа.
rel - Отношения между ссылаемым и текущим документами.
rev - Отношения между текущим и ссылаемым документами.
shape - Задает форму активной области ссылки для изображений.
tabindex - Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target -Имя окна или фрейма, куда браузер будет загружать документ.
title - Добавляет всплывающую подсказку к тексту ссылки.
type - Указывает MIME-тип документа, на который ведёт ссылка.
Также для этого тега доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег IMG и тег А</title>
</head>
<body>
<p><a href="mysite.html"><img src="images/pic.png"
width="189" height="255" alt="mysite"></a>
Lorem ipsum dolor sit amet...</p>
</body>
</html>
Упражнения
Привести странички со стихотворениями, полученные на предыдущих уроках к виду, как показано на рисунке. Изображения на странице - произвольное.
Добавить ссылки перехода между страницами.
