Графические изображения
Графические изображения называются внедренными элементами, т. к., они не помещаются в самом HTML-коде страницы, а берутся Web-обозревателем из отдельных файлов и внедряются на страницу в соответствии со значениями параметров используемых тэгов. Это проистекает оттого, что графика принципиально отличается от текста, кодируется и хранится иначе, чем текст. Поэтому совместить в одном файле HTML-текст и графику невозможно.
Для размещения на странице графического объекта, необходимо его предварительно подготовить. Для этого создаётся изображение в форматах GIF, JPG, JPEG или PNG. У каждого из них есть свои особенности:
GIF – это графический формат, поддерживающий до 256 цветов и сжатие по алгоритму LZW. Его рационально применять в простых графических изображениях и навигации. Закодировать же фотографию, имеющую много цветов и большие габариты, с приличным качеством под силу только профессионалам. Стандарт GIF89a вводит дополнительные усовершенствования: прозрачность, чересстрочечная (Interlaced) развёртка и анимация.
JPEG / JPG – это другой формат, специально разработан для передачи фотографий через сеть. Он содержит 24-битовую цветовую палитру и высокую (регулируемую при создании) степень сжатия (алгоритм JPG). Файлы данного формата могут быть сохранены с опцией «прогрессивный»: это значит, что изображение выводится на экран не сразу, а фрагментарно (через строку), по мере загрузки. Применяется для кодирования изображений любой сложности.
PNG –формат, позволяющий задавать параметры прозрачности (как в GIF) и производит сжатие без потери качества. Поддерживает 24-, 32-, 48- битовую цветную палитры, 8- и 16- битовую палитру серого и 8-битовую пользовательскую палитру. Так же присутствуют механизмы чересстрочечной развёртки и контроля целостности файла при передаче через сеть. Данный формат используется реже.
Встраивание любого из описанных типов изображений в уже созданную страницу осуществляется при помощи непарного тэга <Img>. Он вставляется в том месте, где по смыслу должна располагаться иллюстрация. За настройку внедренного изображения отвечает ряд атрибутов, указанных в табл.4:
Таблица 5
Вставка графики
Тэг |
Атрибуты |
Назначение |
<HR> |
|
Горизонтальная линия |
<IMG> |
|
Расположение графики внутри документа, выводимого браузером |
|
src="url" |
Указывает адрес загружаемого графического файла форматов GIF или JPEG |
Продолжение табл. 5
|
||
|
name="имя" |
Имя изображения, которое может быть использовано в функциях языка JavaScript |
|
align="расположение" |
Расположение текста по отношению к изображению:
|
|
alt="текст" |
Текст, который выводится вместо изображения в браузерах, не поддерживающих графику. В браузерах, поддерживающих графику, этот текст выводится рядом с указателем мыши, если его подвести к данному изображению |
|
width=x |
Ширина изображения в пикселях |
|
height=x |
Высота изображения в пикселях |
|
border=x |
Размер рамки вокруг изображения. Установка border=o отключает рамку |
Рассмотрим фрагмент кода HTML-страницы, изображенной на рис.4:
<body text="black" bgcolor="#cococo" >
<center><img src="grafika.gif" border=0 width=464 height=48 alt="Графика"” ></center>
<b>Внедренный рисунок <br> </b>
<img src="treug2.gif" width="120" height="120" alt="Это рисунок"><hr>
<h2> Изображение, полученное при помощи WordArt </h2>
<img src ="wordart.gif">
В строке 2 тэг <img src="grafika.gif" border=0 width=464 height=48 alt=”Графика” > означает, что файл grafika.gif находится в том же каталоге, где сохранена данная html-страница (в противном случае, пришлось бы указывать полный адрес URL). Размеры этого изображения составляют 464 пикселя в ширину и 48 – в высоту. Рамка у рисунка отсутствует. При наведении курсора на картинку, появляется всплывающая надпись «Графика».
Рис. 4
Использование графики на странице должно соответствовать некоторым требованиям:
используйте графику только там, где это действительно необходимо;
желательно, чтобы объём загружаемой страницы не превышал 80-100 Кб (сюда включен сам html-документ, все изображения и скрипты); запомните: чем больше объем Web-страницы, тем меньше пользователей дождутся загрузки вашего HTML-документа.
не создавайте больших фоновых изображений – это значительно понизит скорость загрузки HTML-страницы.