ГРАФИКА

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

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

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

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

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

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

Рисунок1.jpg

 

Рисунок15.png

 

Рисунок16.png

 

Рисунок17.png

 

Рисунок18.png

 

Рисунок19.png

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

003b Моцарт

003b Вивальди

003b Бетховен

003b Паганини

<UL STYLE=" list-style-image: url(smiley1_2.gif); text-align: absmiddle">

   <LI>Моцарт  

   <LI>Вивальди

   <LI>Бетховен

   <LI>Паганини

</UL>

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

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

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

image036Рисунок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.

<MARQUEE STYLE = "background-image: url(bgpict15.jpg); height: 50px; width: 300px">

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

<BODY BACKGROUND = “bgpict15.jpg” BGPROPERTIES = FIXED>

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

<BODY STYLE=”background-image: url(bgpict15.jpg);
background-attachment: fixed
;”>

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

Рисунок50.png   Рисунок51.png   Рисунок52.png    Рисунок53.png    Рисунок54.png

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

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

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

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

<IMG SRC=http://www.sura.ru/dikov/mycat.gif>

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

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

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

<IMG SRC=“путь к  файлу-картинке”>

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

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

2. корнезависимый (начинается с папки, в которой находится html-документ; при этом имя этой папки не указывается). Например,
<img src = "themes/laverne/alvbull1.gif">

Рисунок1.png

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

Рисунок2.png

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

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 CELLPADDING=10 CELLSPACING=0 BORDER=8>

<caption align=BOTTOM> Моё фото </CAPTION>

    <TR>
        <TD>  

        <TABLE BORDER = 10>   

             <TR><TD> <IMG SRC=”images/itsme1.jpg” ALT ="Моя фотография" > </TD> </TR>

       </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

<HR WIDTH=70% SIZE=3 NOSHADE>

Рисунок62.png