Миниатюра полное изображение

Алтернативный текст

Некоторые браузеры не поддерживают форматы GIF и JPeG, другие вообще не могут выводить изображения. Хотя наиболее распространенные браузеры поддерживают оба формата, вы наверняка захотите, чтобы ваша веб-страница была доступна абсолютно любому человеку. Кроме того, иногда загрузка изображений занимает много времени, и не очень приятно, если ваши посетители будут видеть просто белые пятна на месте изображений.

Торопливые посетители часто командуют браузерам прекратить загрузку иозображений с WWW. Поскольку загрузка изображений отнимает львиную долу времени, они предпочтут ускорить процесс, не дожидаясь полной загрузки всех изображений. Для таких посетителей полезен альтернативный текст - тогда они смогут прочесть короткое описание того, что предоставлено на рисунке, и при желании просмотреть его.

В описаных выше случаях полезно использовать ключевое словов ALT тега <img>. ALT выводит заданный текст в той части экрана, где должно быть (или будет) изображение.

Задание альтернативного текста, описывающего изображения домашней страницы, считается правилом вежливости. Альтернативный текст является частью тега <img>. Просто добавьте к тегу ключевое слово ALT="..." и наберите текст в кавычках после знака "равно". Данный тег с альтернативным текстом, к примеру с dc72.gif, выглядет так:

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.

Посмотрите, что мы добавили:

<center> <h3>-= Моя коллекция бабочек =-</h3> <img alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br>

Есть еще один плюс у альтернативного текста. Подведя курсор мыши к картинке где есть ключевое слово ALT="...", вы увидите всплывающее окошко с самим альтернативным текстом. Попробуйте подвести к бабочке чуть выше.

Мы начали разговор о веб-графике. Этот урок был вводным, поэтому важных материалов по обучению почти не содержал. Если у вас есть вопросы по пройденному материалу, присылайте их сюда.

Выравнивание изображений

Продолжая тему об изображениях перехожу к следующей процедуре. Есть несколько способов выравнивать изображения на странице по отношению к тексту. Ключевое слово align нам в этом поможет. С его помощью вы можете задавать место изображения на экране и вид оборки его текстом. Сейчас я приведу вам 8 опций ключевого слова align.

Опция	Действие
LEFT	Выравнивает изображение по левому краю страницы, строки текста выводятся справа от изображения
RIGHT	Действует подобно LEFT, но выравнивает изображение по правому краю страницы
TOP	Выравнивает изображение по самомы высокому элементу в строке.
TEXTTOP	Выравнивает изображение по самому высокому элементу в строке (обычно совпадает с top)
MIDDLE	Выравнивает нижнюю границу строки посередине изображения
ABSMIDDLE	Выравнивает середину строки посередине изображения (очень похожа на MIDDLE, но прменяется для мелких изображений)
BASELINE	см. сл.
BOTTOM	Выравнивает нижнюю границу строки по нижней границе изображения

Давайте будем избегать тегов TEXTTOP, ABSMIDDLE и BASELINE, они могут вас просто запутать. Чтобы задать выравнивание картинки бабочки по левому краю, зададим следующую команду:

<center> <img align="left" alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"> <h3>-= Моя коллекция бабочек =-</h3> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br>

Посмотрите, что получится:

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.