1 Изображения и объекты в HTML.

Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


Чувашия-это моя Россия

Изображения и объекты в HTML.

(продолжение)

Изображения, которые не являются частью содержания и связаны только с внешним видом страницы, часто размещаются в виде фоновых изображений с помощью CSS на страницах сайта. Изображение можно использовать в качестве фона для любого элемента (а не только body) с помощью параметра таблицы стилей background-image или ярлыка background, и нам не нужно «мостить» изображениями фон. Размещение декоративных изображений страниц сайта только с помощью внешней таблицы стилей, без включения их в структуру документа, дает ряд преимуществ. Это не только делает документ сайта более аккуратным и доступным, это также упрощает внесение изменений во внешний вид сайта по сравнению с ситуацией, когда стилевые элементы включены в содержание. Структура страниц сайта становится доступной и очень эффективной в плане внесения изменений всего того, чего мы хотим добиться, потому что мы не выдергиваем элементы выборки отдельно из каждой страницы сайта, но вкладываем всего лишь в общий контейнер внешнего файла.

Синтаксис элементов img в HTML. Еще раз повторим о атрибутах, применимых к элементу img для изменения его отображения, но обязательными являются только атрибут src, указывающий URL файла изображения, и alt, указывающий альтернативный текст для тех браузеров, которые не могут (или которым было запрещено) отображать изображения без оного атрибута. Базовый синтаксис элемента-изображения img выглядит так:

                      < img src="url изображения" а1t="альтернативный текст" />
                      Атрибуты:  id, class, style, title, lang, dir, события
                                 src = URI (URI графического файла)
                                 alt = текст (альтернативный текст)
                                 longdesc = URI (URI подробного описания образа)
                                 этот атрибут не все бруазеры прочитывают и возникает
                                 много проблем с тестированием страниц сайта.
                                 name = CDATA (название образа)
                                 width = размер (ширина образа)
                                 height = размер (высота образа)
                                 usemap = URI (URI клиентской карты ссылок)
                                 ismap = ismap (серверная карта ссылок)

Тут надо заметить, что атрибут alt необходим не только потому что некоторые браузеры капризничают и не хотят работать, когда отсутствует атрибут alt, но прежде всего расшифровка темы изображении в виде надписи alt помогает быстрее сориентироваться в большом каталоге файлов с изображениямми. URL, указываемый в атрибуте src, может быть абсолютным (включать протокол и домен) или относительным (путь по отношению к текущему документу). Если не учитывать потери скорости на выдачу страницы при огромнейшей библиотеке базы данных своего сайта, то, конечно, указание абсолютного адреса файла с изображениями помогает избегать некоторых проблем с точным указанием адреса.

Представление по умолчанию в HTML. Поскольку img представляет собой внутристрочный элемент, он не приводит к переводу строки или появлению дополнительных пробелов на страницах. По умолчанию нижняя часть изображения выравнивается по базовой линии окружающего его текста. И это иногда бывает полезно знать для аккуратного выстраивания структуры страниц сайта. Способ выравнивания и позиционирование изображения можно изменять при помощи правил таблиц стилей. Это мощнейший инструмент выборки элементов страниц сайта, хотя применяется и существует также ряд устаревших атрибутов, управляющих внешним видом изображений страниц сайта, с помощью которых можно управлять тегами. Об этом тоже не стоит забывать.

Вернемся и повторим об альтернативном тексте, потому что все что не делается на страницах сайта делается для посетителя и для его удобства при вхождения на страницы сайта. Нет никакой гарантии, что изображение будет выведено на экран. Оно может быть повреждено или не найдено, или пользователи могут применять текстовый или речевой браузер, не поддерживающий изображения. Если изображение не выводится, графические браузеры обычно размещают на его месте значок отсутствующего изображения. Неграфические браузеры обычно просто пишут [изображение]. Любой из этих вариантов будет тупиковым для пользователя, и часть материалов окажется недоступной и будет ли он далее задерживаться на таком сайте. Атрибут alt позволяет указать строку с альтернативным текстом, который будет отображаться вместо изображения, если изображение недоступно. Неграфические браузеры также будут отображать этот текст вместо изображения. В спецификации HTML 4.01 объявляется, что атрибут alt является обязательным атрибутом элементов img (хотя изображение и будет выводиться при его отсутствии). Если потратить время на написание альтернативного текста для изображений, сделаете страницу доступной для большого числа пользователей и еще раз повторюсь: удобной в созидании своего сайта.

Атрибут name в HTML содержит название образа, на которое можно ссылаться в таблицах стилей и сценариях, да и вообще при создании выборки элементов на страницах сайта. В последнее время атрибут name сохраняется только в целях совместимости со старыми обозревателями, поэтому куда проще и надежнее использовать вместо него атрибут id для идентификации элементов страниц сайта.

Атрибуты width и height определяют размеры изображения по горизонтали и вертикали соответственно при отображении на страницах сайта. Атрибуты width и height нужны при указании точных размеров изображения в пикселях. Задания значения атрибутов width и height позволяет обозревателю выделить и оставить пространство для изображения при загрузке документа и ускорить его отображение.Знать надо еще вот, что: многие обозреватели выделяют пространство для изображения на основе этих атрибутов даже тогда, когда они отображают не изображение, а альтернативный текст alt. Это может привести к тому, что альтернативный текст будет виден не полностью (под образ изображения резервируется мало, но тексты бывают иногда большими). Выделения под образы вертикальных height и горизонтальных width размеров в процентном отношении от экранов браузеров приводит к непредсказуемым результатом и об этом лучше не вспоминать.

Атрибут usemap задает и определяет через элемент map клиентскую карту ссылок. Значением usemap должно быть имя закладки, заданное атрибутом name соответствующего элемента map, но об этом поговорим на другой странице сайта.

Атрибут ismap указывает на серверную карту ссылок. Если элемент img содержит атрибут ismap , и пользователь щелкает мышью на изображение, то значением ismap возвращается координаты точки щелчка.

Вот среднестатический вызов изображения на страницу сайта через элемент img: < img class="expando" src="http://www.rulez-t.info/uploads/posts/2009-03/1238098799_raduga_15.jpg" height="530" width="770" vspace="15" hspace="40" alt="Радуга" title="Хочется смотреть и любоваться на радуга в теплые летние дни." />


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: