Включение графики в Web-страницу. Помещение изображения в рамку. Разметка Web-страницы при помощи таблицы

. Включение графики в Web- страницу.

          Интеграция графики в html – документ осуществляется с использованием команды <IMG>

<IMG SRC= “URL”  ALIGN = “значение”  WIDTH=”знач” HEIGHT=”значение”  ALT=”текст” >

Отрибуты: SRC –указывает путь к изображению в виде полного URL, либо сокращённого URL (http:// www.mysite.ru/images/picture.jpg) или ../ images/picture.jpg)

ALIGN – позиционирование картинки  в документе HTML.  RIGHT , LEFT, CENTER

WIDHT – ширина в пикселах

HEIGHT - высота

ALT – содержит некий альтернативный текст , который отображается  вместо картинки в браузерах, не поддерживающих графику . Этот же текст выводится в небольшом жёлтом прямоугольнике наподобие всплывающей “подсказки” , если пользователь несколько секунд подержит наведённый на изображение курсор ссылки.

Например:

 <IMG SRC=”/images/sunset.jpg” ALIGN= “CENTER” WIDHT=”325” HEIGHT=”215” ALT= “красивый закат на берегу Карибского  моря”>

Другие атрибуты :

       ALIGN – выравнивание

TOP – изображение совмещается с верхним краем с верхней границей ячейки  таблицы или верхней границей  текстовой строки, в которой размещена картинка.

BOTTON – совмещения с нижнем краем нижней границы ячейки таблицы или текстовой строки.

NIDDLE – центр изображения

BASELINE – изображение выравнивается по условной границе.

Графические компоненты web – страницы по назначению можно условно разделить на 3 обширные категории:

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

 Функциональная графика, представляющая собой элементы управления              (кнопки навигации, счётчики и элементы  интерактивных               )

Декоративная графика -  элементы дизайна страницы , включённые в неё для красоты и не несущие информационной нагрузки.(фоновые рисунки,           разделители выполненные в виде графических органов заголовки и многое другое  ).

В связи с использованием Интернета для загрузки графического изображения требуется определённое количество времени. И чем меньше это время  тем удобнее пользователю. Поэтому для графических изображений сейчас используют 2 самых популярных формата GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества , благодаря которым удаётся значительно уменьшить размер целевого файла.

GIF в 1978 израильские исследователи Якоб Зив и Абрахам Лешпел разработали  новый для того времени алгоритм сжатия информации без потери данных(LZ-78 –название проекта). Через несколько лет американский программист Терри Уэлг усовершенствовал его (LZW) и также представил свою разработку для использования всем желающим.

В 1987 Боб Барри на основе алгоритма LZW создал принципиально новый графический формат GIF. Суть алгоритма сжатия: уменьшение размера графического файла  достигается путём смешения сходных оттенков в один , информация об изображении  в файле GIF  записывается построчно, т.е. представляет собой массив описаний строк высотой в один пиксел.

Свойства:  смешение сходных оттенков в один и данный формат оперирует фиксированной палитрой 256 цветов.

GIF формат используется в  HTML  только для отображения бизнес графики : диаграмм, логотипов, кнопок, других элементов оформления страницы.

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

Еще одно свойство GIF – геристриность, т.е картинка загружается не целиком, а частями (считывается 1,5,10 стр. затем 2,6,11 и т.д.) т.е. как бы проявляется.

В 1989 году компания Compu Serve выпустила новую версию GIF 89а которая использует для создания изображения прозрачного фона методом сохранения вместе с файлом так называемого «альфа – каната» - представляющего собой маску