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

В этом уроке мы покажем как вставлять изображения в HTML документы.

Поместите в одной папке два файла, изображение с названием suret.jpg (или любым другим названием) и файл page.html с таким кодом:

<!doctype html>
<html>
<body>
<img src="suret.jpg" />
</body>
</html>
Теперь сохраните этот документ (page.html) и откройте его в браузере:

html изображения
Этим методом мы вставили изображение в HTML документ! ( Я использовал в качестве изображения рисунок цветка ).

Атрибуты изображении в HTML

1) Размеры изображении в HTML.

В HTML размеры изображении можно регулировать так:

<img src="suret.jpg" width="350" height="220" />

Где width это ширина а height высота изображения в пикселях (мое изображение 350*220 пикселей).

Поэкспериментируйте с вашим изображением, дав разные значения высоты и ширины.

2) Описание и заголовок изображения.

<img src="suret.jpg" title="Чудесный цветок" alt="Чудесный цветок" />

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

Замечание

Рекомендуется вставлять точные размеры высоты и ширины изображении в height и width, а также более или менее адекватные описания изображения в title и alt.
Изображения в HTML можно использовать следующих форматов — jpg (jpeg), png и gif.

Совет

Есть бесплатные онлайн сервисы для обработки изображении (наберите в Google: Онлайн фотошоп), с помощью которых можно — обрезать изображения, изменить размеры изображении, совместить изображения и так далее.