"Истина где-то рядом."
 Уроки HTML |
 Скрипты PHP |
 Шаблоны HTML |
| Уроки HTML |
| Уроки CSS |
| HTML5 |
| Скрипты JAVA |
| Вёрстка сайта |
| Примеры PHP |
| Графика |
| Оптимизация сайта |
| Полезное |
Изображения в HTML
Урок №9
Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, значков, рисунков, фотографий и карт изображений.
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения.
Важным составляющим любого изображения является его размер в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер—качество изображения — это GIF, JPG и PNG.
Для вывода изображений в html существует единственный тег <img>, данный тег является одиночным и не требует закрывающего тега </img>.
Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение.
Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
 | Даже если вам нечего сказать об загружаемом изображении, атрибут alt все равно нужно указывать, присваивая ему пустое значение: alt="". Иначе валидатор обнаружит изображение без атрибута alt и сообщит об ошибке. |
Пример вставки изображений в HTML-страницу
Пример. Вставки изображений:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Вставка изображений в HTML</title>
</head>
<body>
<div>
<img src="image/olene.gif" alt="Олень">
<img src="image/girl.gif" alt="Бегущая девочка">
</div>
</body>
</html>Как это будет выглядеть на странице:
...
(!) Если отключить в своем браузере показ изображений, то увидите альтернативный текст атрибута alt.
Выравнивание изображений
Свойство align="параметр" — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
- left — выравнивание по левому краю
- middle — выравнивание середины изображения по базовой линии текущей строки
- right — выравнивание по правому краю
- bottom — выравнивание нижней границы изображения по окружающему тексту
- top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
Пример:
<p><img src="/menu/imgages/olene.gif" align="middle">
Выравниваем изображение по базовой линии текущей строки.</p>Как это будет выглядеть на странице:
Рамка вокруг изображения
Атрибут border тега <img> позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует.
Пример:
<p><img src="/menu/imgages/olene.gif" align="middle"
border="3px" width="100" height="83" alt="Олень">Как это будет выглядеть на странице:
Размер изображения
Размеры графического изображения желательно всегда указывать явно с помощью атрибутов height и width, задающих соответственно высоту и ширину изображения.
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Пример:
<p>img src="/menu/imgages/olene.gif" width="128" height="128" alt="Олень">
<p><img src="/menu/imgages/olene.gif" width="64" height="64" alt="Олень">
<p><img src="/menu/imgages/olene.gif" width="32" height="32" alt="Олень">Как это будет выглядеть на странице:
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Отступы от изображения
Отступы от изображения (или поля вокруг изображения) до других элементов страницы задаются с помощью атрибутов hspace и vspace - отступы по горизонтали и вертикали соответственно.
Пример:
<p><img src="/menu/images/olene.gif"" align="left" border="3px" hspace="20px"></p>Как это будет выглядеть на странице:
(!) Отступы задаются в пикселях.
В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 20 пикселей.
Как скруглить углы у картинки
Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius
Пример:
<img src="/menu/imgages/olene_two.gif" style="border-radius: 30px">Как это будет выглядеть на странице:
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов.
На этом уроке мы рассмотрели как работать с изображениями и с тегами img а так же научились делать рамки вокруг изображения. Следующий урок будет посвящён заданию цвета в HTML.
