"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Оптимизация сайта
Дополнительно


Реклама на сайте:




Изображения в HTML


папка 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>

Как это будет выглядеть на странице:

Олень Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(!) Отступы задаются в пикселях.
В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 20 пикселей.


Как скруглить углы у картинки

Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius

Пример:

<img src="/menu/imgages/olene_two.gif" style="border-radius: 30px">

Как это будет выглядеть на странице:

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов.




На этом уроке мы рассмотрели как работать с изображениями и с тегами img а так же научились делать рамки вокруг изображения. Следующий урок будет посвящён заданию цвета в HTML.

 



Создано|Обновлено: 08.02.2020.