Урок 7:  Разбираемся с изображениями

Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

Несколько слов о форматах:

GIF - данный формат использует только 256 цветов и подойдет для изображений с небольшим количеством оттенков, также он поддерживает прозрачность картинки.
JPEG - использует около миллиона цветов. Обычно им пользуются для фотографий или хорошей графики (со множеством оттенков).
PNG - формат превосходящий по многим параметрам GIF и JPEG: в нем много цветов, поддерживает прозрачность и хорошо подходит для сжатия (минимальная потеря качества).

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

Добавить изображение на страницу не сложно (если оно находится в той же папке).

Вот пример:

В  браузере мы видим:

    

Здесь мы применили элемент IMG ( у него нет закрывающего тега) и атрибут SRC (source - положение), указывающий где расположена картинка. Также можно вставлять картинки находящиеся в других папках и даже на других сайтах. Нужно только указать путь к ним (похоже на создание ссылок).

Примеры с комментариями;

Вот еще необходимые атрибуты для изображений:

ALIGN - указывает на способ выравнивая изображения по горизонтали. Необходим при обтекании картинки текстом. Для выравнивая по левому краю используют LEFT (при этом текст будет отекать с право) или RIGHT для выравнивая по правому краю (текст будет обтекать слева). Это обязательное свойство для страниц где есть текст.

HSPACE и VSPACE - используются для обозначений отступов в пикселях по горизонтали и по вертикали от изображения до других объектов страницы. Не трудно запомнить, HSPACE - Horizontal Space - горизонтальное (отступ) пространство  и VSPACE - Vertical Space - вертикальное (отступ) пространство.

HEIGHT и WIDTH - обозначают высоту и ширину картинки в пикселях. Немаловажно задавать размеры изображений в HEIGHT и WIDTH , тем самым мы резервируем место в окне браузера еще до загрузки картинки. Если этого не сделать то при загрузке страницы каждое изображение будет перерисовываться. А при медленном интернете или на старых компьютерах смотрится это плохо... По большому счету можно этого не делать, просто грузиться будет немного медленней... Да вот еще не меняйте истинные размеры изображений.
      

Давайте рассмотрим все с на примерах:

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

Также есть еще атрибуты которые нам понадобятся - ALT и TITLE

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

Вот результат браузере:

Я специально изменил название файла с картинкой и браузер его не нашёл и показал текст указанный в атрибуте ALT .

TITLE - Этот атрибут определяет заголовок изображения. Ели навести на картинку, то появится текст из атрибута tite. Привожу пример:

Наведите стрелку  на изображение:

   
  

Как сделать картинку ссылкой?
Просто вместо текста ссылки, вставляем картинку. Пример чуть ниже.

В браузере видим:

  

Конечно вы спросите что еще за  border="0", тут дело в следующим, когда делаешь картинку ссылкой вокруг нее появляется рамка (border), и чтобы ее убрать прописывают атрибут border .

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

↑ Вверх ↑

См. также

Следующий   - Урок 8: Цвет текста и фона 
Предыдущий - Урок 6: Изучаемем html ссылки