HTML: различия между версиями

Перейти к навигации Перейти к поиску
363 байта добавлено ,  7 лет назад
----
 
Делается это просто как новая строка: <nowiki><hr /></nowiki> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.
 
=== Картинки ===
До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <nowiki> <img /> </nowiki>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, что означает, что когда мы пишем код, который отвечает новейшим стандартам, его нужно заканчивать так: />.
 
До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <nowiki> <img> </nowiki>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, что означает, что когда мы пишем код, который отвечает новейшим стандартам, его нужно заканчивать так: />.
 
Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.
 
<blockquote>''Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt. ''</blockquote>
 
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
 
<source lang="html4stricthtml5">
<!DOCTYPE html>
<html>
<head>
<head> <title> Картинки </title> </head>
<bodytitle>
Картинки
<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/>
</Bodyhead>
<body>
<img src="image.jpg" alt="МаленькаМаленькая картинка" title="МаленькаМаленькая картинка" width="100" height="100"/> <br/>
<br/>
<img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400"/> <br/>
<br />
<img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400"/> <br/>
<br/>
</body>
</html>
</source>
 
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
 
=== Карты ===
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <nowiki><map></nowiki> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <nowiki><area></nowiki>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.
 
<source lang="html4stricthtml5">
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <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">
</maphead>
<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="90,58,3" alt="Mercury" href="mercurmercury.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
</source>
 
Пример я бессовестно свистнул«сдул» [http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap отсюда]. Очень хорошее место, чтобы потренироваться, без лишней мороки.
 
Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в пеинтеPaint'е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде [http://www.carlosag.net/Tools/XMap/ X-Map]. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.
 
== Представление информации структурировано ==
92

правки

Навигация