HTML: различия между версиями
Содержимое удалено Содержимое добавлено
Нет описания правки |
|||
Строка 519:
----
Делается это просто как новая строка: <nowiki><hr /></nowiki> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.
=== Картинки ===
До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <nowiki>
▲До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <nowiki> <img> </nowiki>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, что означает, что когда мы пишем код, который отвечает новейшим стандартам, его нужно заканчивать так: />.
Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.
<blockquote>''Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt. ''</blockquote>
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
<source lang="
<!DOCTYPE html>
<html>
<head>
<
Картинки
<img src="image.jpg" alt="Маленька картинка" title="Маленька картинка" width="100" height="100"/> <br/>▼
</title>
<img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400"/> <br/>▼
<meta charset="utf-8" />
<img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400"/> <br/>▼
</
<body>
▲ <img src="image.jpg" alt="
<br/>
▲ <img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400"
<br />
▲ <img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400"
<br/>
</body>
</html>
</source>
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
=== Карты ===
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <nowiki><map></nowiki> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <nowiki><area></nowiki>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника. ▼
▲Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <nowiki><map></nowiki> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap. Внутри тега карты содержатся теги областей, которые задаются тегами <nowiki><area></nowiki>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.
<!DOCTYPE html>
<html>
▲<source lang="html4strict">
<head>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">▼
<title>
<map id="planetmap" name="planetmap">▼
Карта планет
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">▼
</title>
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">▼
<meta>
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">▼
</
<body>
▲ <img src="planets.gif" width="145" height="126" usemap="#planetmap" />
▲ <map id="planetmap" name="planetmap">
▲ <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
▲ <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
</source>
Пример я бессовестно
Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в
== Представление информации структурировано ==
| |||