II. Размещение графики на Web-странице

Цель обучения: научиться внедрять в html-документ графические изображения

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

Задание: создать страницу с внедренным графическим изображением.

Теоретические аспекты:

Одна из наиболее привлекательных черт Web — возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега < IMG>. Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах.

Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда " inline image". Синтаксис тега:

< IMG SRC=" URL" ALT=" text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop>

Элементы синтаксиса тега:

URL - обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

ALT=" text" - этот необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение.

HEIGTH=n1 - этот необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2 - параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселах.

ALIGN - этот параметр используется, чтобы сообщить браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство браузеров располагает изображение в левой части экрана, а текст справа от него.

С версии HTML 2.0 у тега < IMG> появились дополнительные параметры:

< IMG SRC=" URL" ALT=" text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5>

Новые параметры:

BORDER - этот параметр позволяет автору определить ширину рамки вокруг рисунка.

VSPACE - позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.

HSPACE - то же самое, что и VSPACE, но только по горизонтали.

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

Описание фонового рисунка включается в тег BODY и выглядит следующим образом:

< BODY BACKGROUND=" picture.gif" >

Практические задания:

Внимание! Все необходимые в дальнейшем изображения можно найти в сетевой папке вашей группы в каталоге html.