HTML 4.01 strict&transitional

ГРАФИКА

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

JPEG. Формат создан группой экспертов в области фотографии (Joint Photographic Experts Group). Сжатие графики происходит с потерей качества. Коэффициент качества может достигать 1:100. Формат поддерживает 16,7 млн. цветов. Используется для фотографических изображений. В качестве недостатка отмечают “дрожание линий”, то есть потерю деталей вокруг четких контуров. На рисунках с четкими границами и большими заливочными областями сильно проявляются дефекты сжатия. Особенно характерно появление “грязи” вокруг темных линий на светлом фоне и видимых квадратных областей. Алгоритм сжатия обрабатывает изображение квадратами со стороной 8 пикселов. Формат позволяет определять прогрессивное отображение, когда при загрузке страницы на экране сначала появляется грубое изображение, которое по мере получения дополнительной информации постепенно улучшается.

GIF – Graphical Interchange Format. В этом формате заложен метод сжатия LZW. Сжатие графики происходит без потерь качества. Есть поддержка прозрачного фона (любой один цвет может быть сделан прозрачным), чересстрочного вывода на экран. Однако формат поддерживает не более 256 цветов. Существует термин “анимированный GIF (гиф)”. Им называют картинки, которые “оживают” на веб-странице. Анимированный гиф представляет собой слайдфильм, который проигрывает браузер на веб-странице. Хранение последовательности кадров в одном файле – еще одна отличительная особенность формата GIF.

PNG – Portable Network Graphics (компактная сетевая графика). Относительно новый формат, конкурирующий с GIF. Он считается единственным форматом в Интернете, способным поддерживать полноцветные изображения с прозрачным фоном в сжатом состоянии без потерь качества. Так же как GIF и JPEG поддерживает прогрессивную развертку в браузерах (interlased).

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

Линии и полосы

Рисунок1.jpg

Рисунок15.png

Рисунок16.png

Рисунок17.png

Рисунок18.png

Рисунок19.png

Пиктограммы-маркеры в списках

003b Моцарт

003b Вивальди

003b Бетховен

003b Паганини

<LI>Моцарт

<LI>Вивальди

<LI>Бетховен

<LI>Паганини

</UL>

Пиктограммы новинок

Рисунок20.png Рисунок21.png Рисунок22.png Рисунок23.png

Пиктограммы реконструкции

Рисунок26.png Рисунок27.png

Рисунок28.png Рисунок29.png

Пиктограммы перемещения

Рисунок30.png Рисунок31.png Рисунок32.jpg Рисунок33.png Рисунок34.png Рисунок35.png Рисунок36.png

Фоновые изображения

Рисунок37.jpg Рисунок38.png Рисунок39.png Рисунок40.jpg

Фоновые изображения добавляются ко многим элементам веб-страницы и самой странице атрибутом BACKGROUND, где в качестве значения параметра указывается путь к файлу, хранящему образец фона. Браузер, размножая образец в необходимом количестве, “оклеивает” им весь задний план занимаемого элементом пространства. Таблица стилей предлагает аналогичное свойство background-image.

Существует еще один необязательный атрибут BGPROPERTIES для тега <BODY>. Если ему присвоить значение FIXED, то при скроллинге (прокручивании) содержимого страницы, фон будет оставаться фиксированным (неподвижным). То есть содержимое будет как бы парить над фоновым рисунком.

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

Рекламные баннеры и логотипы

Картинки и фотографии

Рисунок41.jpg Рисунок42.png Рисунок43.png Рисунок44.png

Где взять файлы-картинки? Во-первых, их можно копировать непосредственно с веб-страниц, которые Вы сами посещаете. Просто щелкните правой кнопкой мыши на понравившемся Вам изображении и выберите из раскрывшегося списка команду “Сохранить рисунок как”. В появившемся после этого диалоговом окне “Сохранение файла” выберите (или создайте) ту папку, в которой будут храниться все компоненты Вашего HTML-документа.

Однако, если просматривается корпоративный сайт, то есть очень большая вероятность того, что вся страница защищена законом от нелегального копирования. Это можно обнаружить по значку Ó со стоящим рядом именем владельца ресурса (копирайт – права копирования защищены собственником ресурса). Это значит, что прежде чем копировать ту или иную часть этой страницы, Вам необходимо получить официальное разрешение у владельца. Не нарушая прав копирования, можно на своей веб-странице поставить ссылку на рисунок с внешнего сайта и тогда картинка будет отображаться и на Вашей странице. Ссылка копируется в зависимости от браузера либо через контекстное меню и команду «Копировать ссылку на изображение» (Mozilla FireFox), либо через пункт «Свойства», где откроется адрес картинки, который тоже можно выделить и скопировать (Internet Explorer). Помещенная в буфер обмена ссылка на изображение затем вставляется в тег IMG в качестве значения параметра SRC.

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

В-третьих, Вы можете воспользоваться любым графическим редактором для того, чтобы создать авторское оригинальное графическое изображение. Но не забудьте сохранить его в одном из сжатых форматов: GIF, PNG или JPEG.

Чтобы добавить любое графическое изображение на страницу, существует тег <IMG>, от слова IMaGe – изображение. У него есть обязательный атрибут SRC, от слова SouRCe – источник.

В качестве значения параметра SRC может выступать:

1. абсолютный путь к файлу (начинается с имени диска). Веб-разработчики никогда не используют этот вариант, так как при переносе сайта на сервер или другой компьютер, ссылки работать правильно уже не будут.
2. корнезависимый (начинается с папки, в которой находится html-документ; при этом имя этой папки не указывается). Например, <img src = "themes/laverne/alvbull1.gif">
3. документозависимый (строится относительно веб-страницы, на которой находится ссылка; каждый уровень вверх обозначается “../”). Например, <img src = "../../pics/home.gif">

Необязательные атрибуты

ALT = “текст-пояснение”. Предусматривает текстовое сообщение, которое появится вместо картинки в том случае, если в браузере выключена опция просмотра графики.

Изображение является по умолчанию строчным элементом, в отличие от абзацев и заголовков. Поэтому, если мы добавляем несколько изображений подряд, то они размещаются браузером в одной строке слева направо и выравниваются по нижнему краю. Чтобы изменить выравнивание или тип элемента используется параметр ALIGN или соответствующие свойства из таблицы стилей.

Рисунок147.png

Строгая версия HTML предполагает заключение строчных изображений в контейнеры, например, <p> или <div>, или <table>

Рисунок148.png

Значения атрибута ALIGN приведены в таблице. По умолчанию оно имеет значение baseline.

TOP	по самому высокому элементу строки (“vertical-align: top”)
TEXTTOP	по самому высокому текстовому элементу строки (“vertical-align: text-top”)
MIDDLE	по середине строки (“vertical-align: middle”)
ABSMIDDLE	по середине текущей строки с учетом нижней части некоторых символов (например: р, д)
BASELINE / BOTTOM	по нижней части строки (“vertical-align: baseline”)
ABSBOTTOM	по самой нижней части строки, с учетом нижней части некоторых символов (например: р, д)
LEFT	изображение располагается слева от текста и не является элементом строки, а как бы плавает (“float: left”)
RIGHT	изображение располагается слева от текста и не является элементом строки, а как бы плавает (“float: right”)

Строка может содержать как текст, так и графические изображения. Базовая линия — нижняя часть линии текста без учета самой нижней части некоторых символов (например: р, д). Остальные пять параметров приведены в таблице ниже.

HSPACE	число	и правое поле от изображения (“margin: 0рх 120рх 0рх 120рх”)
VSPACE	число	верхнее и нижнее поле от изображения (“margin: 120рх 0рх 120рх 0рх”)
WIDTH	число	устанавливает размер изображения по ширине
HEIGHT	число	устанавливает размер изображения по длине
BORDER	/ число пикселей	выводит рамку вокруг изображения (“border: 1px solid blue ”)

При использовании одного из параметров WIDTH или HEIGHT, второй параметр автоматически изменяется.

Рисунок147.png

Атрибуты ALIGN, HSPACE, VSPACE, BORDER не рекомендуются спецификацией HTML 4.01 от W3C. Используйте свойства таблицы стилей.

Рисунок148.png

Картинку или фотографию при желании можно заключить в красивую рамку. Для этого ее, например, помещают в ячейку таблицы.

</TABLE>

</TD>
</TR>

</TABLE>

Для размещения простых разделительных линий в HTML предусмотрен специальный тег <HR> (Horizontal Rule) со следующими атрибутами. Все атрибуты не рекомендованы спецификацией HTML 4.01. Вместо атрибутов лучше использовать таблицу стилей.

SHADE		тень (box-shadow)
NOSHADE		нет тени (box-shadow: none)
WIDTH	число / %	ширина линии (width)
ALIGN	LEFT / RIGHT / CENTER	горизонтальное выравнивание (margin)
SIZE	1...175 пикселов	толщина линии (height)
COLOR	Название или номер цвета	цвет линии (color)

Пример. <HR NOSHADE WIDTH=50% SIZE=6>

Рисунок61.png

Рисунок62.png