ЗАНЯТИЕ 8. Вставка рисунков в HTML-документ.

Графика в HTML-документе

На сегодняшний день для создания графических изображений, предназначенных для размещения в электронных документах, используются три основных стандарта: gif, jpeg (jpg), png. Для вставки графических изображений в HTML-документы используется специальный тег < img>, который не требует наличия закрывающего тега.

Параметры тега < IMG>

Параметр SRC является обязательным для указания. Он выполняет важную роль в графическом изображении на странице – задает путь (относительный или абсолютный) к рисунку. Формат указания следующий:

< IMG SRC=" picture.gif" >

В данном случае браузер станет искать файл " picture.gif" в том же каталоге, где находится и HTML-документ, ссы­лающийся на этот рисунок. Обычно (но не обязательно) для графических изображений выделя­ется отдельная папка:

< IMG SRC=" images/picture.gif" >

Параметр BORDER предназначен для отображения вокруг рисунка рамки оп­ределенной толщины. Толщина указывается в пикселях, по умол­чанию (если параметр пропущен) рамка браузером не отображается:

< IMG SRC=" images/clock.gif" BORDER=" 5" >

Задание 1. Вставьте в HTML-документ рисунок и установите вокруг него рамку в 10 пикселей.

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

< А HREF=" clock.html" > < IMG SRC=" images/clock.gif" BORDER=" 0" > < /A>

Параметры WIDTH и HEIGHT по аналогии с другими HTML-элементами (табличные ячейки, горизон­тальные разделители) используются для опреде­ления размеров графического изображения, встраиваемого в электронный документ (ширина и высота в пикселях):

< IMG SRC=" images/clock.gif" BORDER=" 1" WIDTH=" 300" HEIGHT=" 201" >

Использование этих параметров не обязательно, однако рекомендуется по двум основным причинам:

§ Во время загрузки изображения браузер сразу зарезервирует на странице столько места, сколько необходимо для отображения рисунка. Многие разработчики пренебрегают этим правилом, в результате чего при загруз­ке под рисунок изначально отводится слишком мало места, а потом страница начинает " скакать", поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла.

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

Корректно изменить пропорции рисунка можно, указав в теге < img> измененным только один из параметров (либо width, либо height). Браузер самостоятельно изменит второй параметр, сохра­няя пропорцию. Параметры width и height допускают указание размеров графического изображения в процентах. Этот формат записи дает команду браузеру растянуть или сузить рисунок в соот­ветствии с размерами окна страницы. Но такой подход не рекомендован и может применяться только в исключительных случаях и только в отношении однородных рисунков, поскольку некоторые браузеры либо не поддерживают подобное обозначение размеров, либо выводят рисунки некорректно.

Параметр align предназначен для определения типа выравнивания рисунка относительно текста и прочих элементов электронного документа. Существующие значения параметра align:

Все типы выравнивания можно условно разделить на две группы:

§ относительно края окна документа (LEFT, RIGHT);

§ относительно текущей строки текста (остальные значения).

Примеры выравнивания рисунков:

< HTML>

< HEAD>

< TITLE> Примеры выравнивания рисунков< /TITLE>

< /HEAD>

< BODY BGCOLOR=" #FFFFFF" TEXT=" black" LINK=" #00FF00" ALINK=" #00FF00" VLINK=" blue" >

< IMG SRC=" C: /Renault.gif" ALIGN=" left" BORDER=" 1" WIDTH=" 100" HEIGHT=" 67" >

< В> Выравнивание текста по правому краю рисунка< /B>

< BR> Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю.

< HR>

< IMG SRC=" C: /Renault.gif" ALIGN=" right" BORDER=" 1" WIDTH=" 100" HEIGHT=" 67" >

< В> Выравнивание текста по левому краю рисунка< /B>

< BR> Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю.

< HR>

< В> Выравнивание этого предложения < IMG SRC=" C: /Renault.gif" ALIGN=" top" BORDER=" 1" WIDTH=" 100" HEIGHT=" 67" > по верхнему краю рисунка< /В>

< /BODY>

< /HTML>

Так браузер представит описанный выше HTML-код:

Параметры hspace и vspace определяют размер горизонтального и верти­кального отступов от изображения до текста. Формат записи значений — в пикселях. По умолчанию значения обоих типов отступа равны нулю.

Задание 2. Создайте копию рисунка, используя параметры горизонтального и вертикального отступов:

Параметр альтернативного текста alt играет существенную роль в процессе встраивания графики в электронные документы. Изначальное его предназначение заключалось в возможности предоставле­ния пользователям неграфических браузеров информации о рисунке, кото­рая появляется при наведении на графический объект курсора мыши. Одна­ко сегодня понятие " неграфического браузера" стало практически неактуальным, поэтому функция параметра alt сильно расширилась и по­всеместно используется для вывода смысловых подсказок для значимых графических элементов. Для не имеющих какой-либо смысловой нагрузки рисунков альтернативный текст указывать не следует.

Например, для рисунка " renault.gif", демонстрирующего автомобиль «Рено Логан», будет уместным добавить альтернативный текст " Рено Логан". Для незначимых графических изображений обычно задается следующая конструкция:

< IMG SRC=" images/spacer.gif" WIDTH=" 5" HEIGHT=" 5" ALT=" " >

Таким образом, даже если ваш HTML-документ будут просматривать в тек­стовом редакторе, композиция страницы сохранится, а пользователю будет выведена информация о наличии рисунка.

Также указывать альтернативный текст alt рекомендуется в случае, если изображение по каким-либо причинам не загрузилось. Подсказка, отобра­женная на месте рисунка, даст пользователю хотя бы минимальную инфор­мацию о незагруженном объекте:

Задание 3. Создайте копию HTML-документа, изображенного на рисунке, используя параметр альтернативного текста ALT.