«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML



Графика является важной составляющей Интернет. Без графических изображений не обходится ни один сайт. Различные фотографии, иконки, значки, кнопки, рекламные баннеры и т.д. и т.п. являются неотъемлемыми элементами современных веб-страниц.



Как вставить изображение?

В основном на страницах размещают изображения в одном из трех графических форматов: gif, jpg/jpeg или png (подробнее здесь...).

Для вставки изображения на веб-страницу предназначен тег <img> и его обязательный атрибут src, который указывает адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...).

Атрибут align тега <img> позволяет разместить изображение справа или слева относительно текста и других элементов страницы, либо расположить его определенным образом относительно базовой линии текущей строки.

Фрагмент кода
<p> <img src="img/peng.gif" align="middle"> Выравниваем изображение по базовой линии текущей строки. </p>
Результат

Вставляем изображение Выравниваем изображение по базовой линии текущей строки.

Рамка вокруг изображения

Атрибут border тега <img> позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует.

Фрагмент кода
<p> <img src="img/peng.gif" align="middle" border="2px"> Изображение заключено в рамку, толщиной 2 пикселя. </p>
Результат

Рамка вокруг изображения Изображение заключено в рамку, толщиной 2 пикселя.

Размер изображения

Размеры графического изображения желательно всегда указывать явно с помощью атрибутов height и width, задающих соответственно высоту и ширину изображения.

В противном случае браузеру требуется дополнительное время для самостоятельного вычисления размеров изображения, что влияет на скорость загрузки страницы.

Размер изображения задается в пикселях и на скорость его загрузки не влияет.

Фрагмент кода
<p>
<img src="img/peng.gif" height="32" width="32">
<img src="img/peng.gif" height="64" width="64">
<img src="img/peng.gif" height="128" width="128">
</p>
Результат

Размер изображения Размер изображения Размер изображения

Отступы от изображения

Отступы от изображения (или поля вокруг изображения) до других элементов страницы задаются с помощью атрибутов hspace и vspace - отступы по горизонтали и вертикали соответственно.

Отступы задаются в пикселях.

Фрагмент кода
<p> <img src="img/peng.gif" align="left" border="2px" hspace="50px"> В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 50 пикселей. </p>
Результат

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

Альтернативный текст и всплывающая подсказка

При помощи атрибута alt тега <img> к изображению добавляют альтернативный текст.

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

Таким образом альтернативный текст Вы увидите, если браузер не загрузил или еще не загрузил изображение.

Всплывающая подсказка к картинке добавляется при помощи атрибута title. Она появляется при наведении на изображение курсора.

Фрагмент кода
<p><img src="img/peng.gif" align="left" border="1px" alt="Альтернативный текст" title="Пингвин думает!" hspace="50px"> Попробуйте отключить автоматическую загрузку изображений в Вашем браузере, и вместо пингвина в рамке Вы увидите "Альтернативный текст". </p>
Результат

Альтернативный текст Попробуйте отключить автоматическую загрузку изображений в Вашем браузере, и вместо пингвина в рамке Вы увидите "Альтернативный текст".




HTML по шагам

Все теги HTML

Тематические публикации

Тематические публикации