Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

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

Небольшое предупреждение!

С прошлого урока Вы должны самостоятельно прописывать все тэги, так будет намного полезнее и эффективнее для Вас, нежели просто копировать и вставлять код. Скопированный код не будет работать в браузере. Он даётся только для лучшего восприятия и понимания. Исключение, в тех местах где сказано, что можно скопировать.
Теория без Практики это как машина без колёс. Прошу понять меня правильно.

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

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

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

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

<img srс="picture/xxx.jpg">

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!