Не просто картинка!

УРОК «Исследуем код картинки»

Дорогие друзья!

В этом уроке мы поговорим о вещах, которые делают дизайн WEB привлекательным - об изображениях. Вы узнаете, что на самом деле скрывается в исходном коде веб-страничек вместо картинок, которые мы видим на сайтах, в блогах и т.д.

Изображения на страничках сайта являются отличным способом создания настроения у посетителей, а также представляют сложную информацию наглядно и понятно.

Давайте рассмотрим какую-нибудь картинку, например, вот эту слева. Под картинкой вы можете увидеть её код:

Есть два основных способа добавления изображений на сайт: содержательные изображения, добавляемые с помощью элемента <img атрибуты>, и фоновые изображения, применяемые к элементам с помощью CSS (это тема отдельного урока).

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

• Обязательным атрибутом элемента <img> является атрибут src="адрес", который указывает в кавычках адрес нашего изображения - путь к файлу.
• Также обязательным является атрибут alt="альтернативный текст", который содержит текст, выводящийся, если изображение недоступно по каким-то причинам: если его невозможно найти, загрузить или если в браузере отключена функция показа изображений. Кроме того, люди, имеющие проблемы со зрением, только по этому тексту могут догадаться о том, что изображено на картинке.
• Атрибут title="текст" проявляется при наведении мышки на картинку - мы увидим некоторый текст, который может нести дополнительную информацию об изображении, его название или какой-то эмоциональный отзыв;
• Атрибуты width="значение" и height="значение" нужны для указания размеров изображения и ускорения его загрузки браузером, так как при выводе картинок если есть указание на их размеры, то браузер резервирует это место и тем самым ускоряется загрузка и показ содержимого страницы. Эти значения рекомендуется всегда указывать.
• Атрибут border="значение" может задаваться для того, чтобы заключить картинку в рамку определённой ширины или же наоборот, убрать её.
• Атрибут vspace="значение" используется для задания вертикального отступа между изображением и окружающим контентом.
• Атрибут hspace="значение" используется для задания горизонтального отступа между изображением и окружающим контентом.

В настоящее время отображение многих свойств изображений передано "в руки" CSS и это является правильным, поскольку таким образом можно задавать свойства сразу всех изображений на сайте или некоторой их группы, а также экономит много времени разработчику и дизайнеру.

О том, как сделать, чтобы картинки выравнивались по центру, правому или левому краям документа, будет рассказано в другом уроке.