Теперь разберёмся со вставкой изображения в html документ.
 Ведь сайт без картинок будет не столь интересен пользователю. Даже в детстве помню если какая нибудь книжка попадала мне в руки, я сначала смотрел картинки и, наверное, не я один был такой. Поэтому изображения в HTML это очень важная часть в построении сайта. Здесь всё легко.

На сайт можно ставить изображения в формате jpg, gif и png. Можно и других форматов, но они используются очень редко.
Для небольших изображений, не имеющих большого количества цветов,я посоветовал бы формат gif.
Для больших же картинок требующих качественного отображения можно использовать png. У него хорошее сжатие при максимальном качестве.
Ну а jpg всё таки тяжеловат,хотя если использовать его в меру, то всё будет нормально.

Для вставки изображения в HTML используется одиночный тэг

<imаgе srс="xxx.jpg"> ,где xxx.jpg название файла изображения. Если по правильному то картинка  должна хранится в отдельной папке, например picture. Конечно изображения можно хранить и не в папке, но это будет не совсем удобно.

Если картинка находится в папке picture html код будет такой:

<imаgе srс="picture/xxx.jpg">

Если на другом сайте в папке image то будет так:

<image srс="http://www.site.ru/image/xxx.jpg>

Попробуйте вставить изображение на свой сайт. Картинку можете скопировать ниже.

Также существуют атрибуты для этого тэга.

align - выравнивание по горизонтали

Имеет значения left и right. Если изображение будет в тексте, этими значениями можно управлять обтеканием текта. Если картинка имеет выравнивание по левому краю, то текст будет обтекать её справа. Если картинка по правому краю, то соответственно текст будет слева.

hspace (horizontal space) - отступ по горизонтали от других обьектов, картинок или текста

Значения задаются в пикселях.

vspace (vertical space) - отступ по вертикали

Также задаётся в пикселях.

height (высота) и width (ширина) - размер изображения в пикселях

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

Теперь изменим код в файле index.html вот в этом месте:

<!--Блок текста слева синим цветом!-->
<image srс="picture/somik.jpg" align="left" hspace="20" vspace="40">
<div align="left"><span style="color: #0000ff">
Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>

Вот что у нас получится:

Существует ещё несколько атрибутов, применяемые для изображений.

title- заголовок картинки

При наведении мышки на изображение появляется его заголовок.Например:

<img srс="picture/somik.jpg" title="сомик">

alt - название изображения

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

<img srс="picture/somik.jpg" alt="Сомик">

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

Создаёт рамку, значение задаётся в пикселях.Например рамка толщиной 1 пиксель:

<img srс="picture/somik.jpg" border="1">

Для того чтобы картинку сделать ссылкой нужно вместо текста ссылки вставить изображение. Например наша картинка будет вести на страницу о пресноводных рыбках:

<а hrеf="presnovodnie.html">
<img srс="picture/somik.jpg" title="сомик"></a>

Теперь немного потренируйтесь.

Перейти к следующему уроку

Цвет текста и фона в HTML