Урок 5. HTML картинки

Современные сайты сложно приставить без присутствия в них изображений. Конечно сам дизайн без использования картинок - это нормально, но вот оформление постов так и хочется разбавить изображениями. Сегодня мы выучим всего один тег html, который вставляет на страницу картинку.

HTML картинки. Тег <img>

Как вы уже поняли из заголовка, в HTML за вывод картинки на странице, отвечает тег <img>.
Синтаксис:

<img src="путь_к_изображению" alt="альтернативный текст" />

Тег <img> - одинарный и не имеет закрывающего тега, но в HTML4 перед закрывающей скобкой ">" ставят слеш - "/".
У тега <img> есть всего два обязательных атрибута - это src и alt.

HTML картинки. Атрибуты

Атрибут src, в нем указывается путь к файлу изображения.

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

Атрибут title, в нем пишется текстовое описание картинки, которое будет всплывать при наведение на нее курсором. Данный атрибут универсальный и не обязательный.

Атрибут width, в нем пишется числовое значение ширины картинки в пикселах.
Атрибут height, в нем пишется числовое значение высоты картинки в пикселах.

Атрибут vspace, в нем пишется числовое значение вертикального отступа от картинки до окружающего контента.
Атрибут hspace, в нем пишется числовое значение горизонтального отступа от картинки до окружающего контента.

Атрибут align, может принимать значение left | center | right отвечает за выравнивание картинки по краю и обтекание ее текстом.

ВАЖНО!!! Атрибуты: width, height, vspace, hspace, align - не обязательные, их вы должны знать, но задавать размер картинки, отступы и выравнивание, нужно с помощью стилей.

Пример использование тега img как ссылку на статью:
 

 

При рассмотрении тега img я специально не стал делать примеры с обтеканием текста и прочими атрибутами (width, height, vspace, hspace, align), знать их стоит, но использовать на практике - нет. Старайтесь разделять HTML верстку и CSS стили в своей работе.

Рубрика: Основы HTML