Изображения - это важнейший элемент любого сайта.

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

Наиболее часто используются три типа файлов изображений.

GIF (Graphics Interchange Format) - имеет 256 цветов, поэтому является более подходящим для изображений с небольшим количеством оттенков.
JPG / JPEG (Joint Photographic Experts Group) - формат изображений, который использует до миллиона цветов. Применяется для фотографий и качественной графики.

PNG
(Portable Network Graphics) - данный формат использует более миллиона цветов, при этом можно уменьшать вес изображения и сохранять качество изображения, что очень немаловажно.

Для того, чтобы вставить изображение в html код используется одиночный тэг:
<img srс="kartinka.jpeg">
где kartinka.jpeg - это название файла изображения. Для удобства картинки размещают в отдельной папке, например images.
Если картинка находится в папке images, то html код будет такой:
<img srс="images/kartinka.jpeg">

Если на другом сайте в папке images то будет так:
<img srс="http://wm-port.com/images/kartinka.jpeg>

Попробуем вставить на страницу такое изображение:

<img src="/images/kartinka.jpeg">

В результате мы увидим:

Вставка изображения

В данном случае нам понадобились:
Элемент IMG - не имеет закрывающего тега. 
Атрибут SRC - который указывает путь где находится изображение.

Также существуют важные атрибуты:

ALIGN - используется для выравнивания изображения по горизонтали. Имеет значения LEFT и RIGHT. С помощью этих значений можно регулировать обтекание текста. Если картинку выравнять по левому краю, то текст будет обтекать её справа, или наоборот, картинку можно расположить по правому краю и текст будет обтекать слева.

HSPACE 
(горизонтальный отступ) и VSPACE (вертикальный отступ) - это отступы от изображения до других элементов текста.

HEIGHT
(высота) и WIDTH (ширина) -  задают размер картинки. Если задать реальные размеры изображения, то это поможет уменьшить время загрузки страницы. 

Вот еще два часто используемых атрибута - ALT и TITLE.

ALT
- отображает текст в случае если если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения:

<img src="/images/kartinka.jpeg" alt="Щука">

TITLE - обозначает заголовок изображения и при наведении на него появляется надпись с текстом из атрибута title:

<img src="/images/kartinka.jpeg" title="Щука" >

Попробуйте навести указатель на изображение:

Щука

Также можно картинку сделать ссылкой следующим образом:

<a href="http://wm-port.com">
<img src="/images/kartinka.jpeg" title="Щука">
</a>

Кликнув по изображению Вы перейдете на сайт, которой указан:

Изображение ссылкой

Border - для создания рамки вокруг изображения, значение задаётся в пикселях. Сделаем рамку толщиной 2 пикселя:

<img srс="images/kartinka.jpeg" style="border:2px;">

 Мы увидим:

картинка

Следующая страницаЦвет фона и текста

ПредыдущаяРабота с ссылками в html