Тема: Вставка изображения в документ HTML

Цель:

1. Научить учащихся вставлять изображения в HTML - документ.

2. Развить навыки работы с HTML - документом.

3. Воспитать усидчивость, целеустремленность. Ход занятия:

   1. Орг момент (проверка присутствующих)

   2. Опрос домашнего задания

   3. Изложение темы и цели занятия

   4. Объяснение нового материала

   5. Закрепление пройденного (лабораторная работа)

   6. Выдача домашнего задания(выучить лекцию)

   7. Выставление оценок

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

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

Вставка изображений в документ

Для вставки изображения в документ используется одиночный тег IMG>. Местоположение изображения на странице и его выравнивание относительно текста задается следующими атрибутами:

• SRC - URL изображения;

• ALIGN - выравнивание текста относительно изображения {режимы с обтеканием текста: LEFT - изображение слева, текст обтекает справа / RlGHT-изображение справа, текст обтекает слева; режимы без обтекания текстом: ТОР - по верхнему краю изображения / MIDDLE - по центру изображения / BOTTOM - по нижнему краю );

• WIDTH - ширина изображения (пикселы);

• HEIGHT - высота изображения (пикселы);

• ALT - текстовое описание-альтернатива, для тех кто отключил загрузку изображений;

• BORDER - ширина рамки (поумолчанию BORDER=l);

• HSPACE - пустое поле от изображения по горизонтали;

• VSPACE - пустое поле от изображения по вертикали;

• ISMAP - признак карты-ссылок (обработка сервером)-,

• USEM АР - признак карты-ссылок (обработка клиентом);

Примерытега IMG>:

IMG SRC-'picl.gif¹ ALIGN=MIDDLE>

IMG SRC="pic2.jpg" HSPACE=20 VSPACE=20 АЕТ="Здесьизображениеофисанашейкомпании">

IMG SRC="pic3.jpg" WIDTH=120 HEIGHT=160 ALIGN=LEFT BORDER=5> Закрепим на примере использование графики в ваших документах:

Пример 4. Использование графики. Гпросмотр примера в окне]

HTML> HEAD>

TITLE>Bce графическое: элемент-якорь, линия-разделитель, фон и содержимоеТ1ТЬЕ> HEAD>

&

GIF

P ALIGN=CENTER>

GIF обезьяна похуже качеством, но зато живая.br>

JPG обезьяна красивая, но глазами хлопать не умеет. Р>

Р ALIGN=CENTER>

Р ALIGN=CENTER>© 2001 А REL="nofollow" target="_blank" HREF="http://doc4web.ru/go.html?href=%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FU%3E%3C%2FFONT%3E%3C%2FFONT%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FI%3E%3CA+HREF%3D"mailto:myname@mail.ru">mailto:myname@mail.ru">

почта ]">А>Вебмастер.

BODY> HTML>

Приведем несколько рекомендаций по использованию графики:

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

• при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BC)RDER=0), дабы не портить внешний вид документа;

• при указании размеров изображения больших или меньших от оригинального размера броузер производит их масштабирование, что может нарушить качество изображения некоторых форматов;

Использование изображений в качестве - карты ссылок

Как я уже говорил выше (См. раздел 2.2.) возможно использование графических изображений-якорей для ссылок в HTML-документах. Для этого необходимо поместить тег IMG SCR=" файл изображения"> в контейнер гиперссылки...А>.

Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" {imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером.

Карты ссылок обрабатываемые сервером

Не будем подробно рассматривать карты ссылок обрабатываемых сервером (тут вам не учебник по CGI- программированию, купите и читайте), но основные элементы этой технологии рассмотрим.

1. Создаем изображение - карту ссылок (например, сканируем политическую карту мира).

2. Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи непересекающихся областей изображения с ссылками на ресурсы Internet. Мар-файлы бывают двух форматов CERN и NCSA, а их поддержка определяется используемым Web-сервером.

Файлы формата CERN представляют собой набор записей вида:

ТипОбласти (xl,

URL