Тема: Вставка изображения в документ 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.gif1 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> <BODY BACKGROUND="bgp.gif', BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <H1 ALIGN=CENTER>flBa вида обезьян</Н1> <P ALIGN=CENTER><IMG SRC="bar.gif' WIDTH="50%"> <P ALIGN=CENTER><IMG SRC="monkey.gif' ALT="GIF">&<IMG SRC="monkey.jpg" WIDTH=182 HEIGHT=122 • ALT="JPG"> <H2 ALIGN=CENTER>GIF обезьяна & JPEG обезьяна</Н2> <P ALIGN=CENTER> GIF обезьяна похуже качеством, но зато живая.<br> JPG обезьяна красивая, но глазами хлопать не умеет. <Р> <Р ALIGN=CENTER><IMG SRC="bar.gif' WIDTH="50%"> <Р ALIGN=CENTER>&copy 2001 <А HREF="mailto:myname@mail.ru"> <IMG SRC="mbox.gif' BORDER=0 ALT="[ почта ]"></А>Вебмастер. </BODY> </HTML> Приведем несколько рекомендаций по использованию графики: • • • старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности загрузить изображение или загрузки в броузер с отключенной графикой не нарушается структура документа (вместо графики будет прямоугольник заданного размера с текстовым описанием); при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BC)RDER=0), дабы не портить внешний вид документа; при указании размеров изображения больших или меньших от оригинального размера броузер производит их масштабирование, что может нарушить качество изображения некоторых форматов; Использование изображений в качестве - карты ссылок Как я уже говорил выше (См. раздел 2.2.) возможно использование графических изображений-якорей для ссылок в HTML-документах. Для этого необходимо поместить тег <IMG SCR=" файл изображения"> в контейнер гиперссылки<А>...</А>. Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" {imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером. Карты ссылок обрабатываемые сервером Не будем подробно рассматривать карты ссылок обрабатываемых сервером (тут вам не учебник по CGIпрограммированию, купите и читайте), но основные элементы этой технологии рассмотрим. 1. Создаем изображение - карту ссылок (например, сканируем политическую карту мира). 2. Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи непересекающихся областей изображения с ссылками на ресурсы Internet. Мар-файлы бывают двух форматов CERN и NCSA, а их поддержка определяется используемым Web-сервером. Файлы формата CERN представляют собой набор записей вида: ТипОбласти (xl, ТипОбласти (xl, yl)... URL yi) URL 'Файлы формата NCSA представляют собой набор записей вида: ТипОбласти URL xl, yl, ТипОбласти URL xl, yl, ... Типы областей задаются относительно размера изображения (а не относительно окна броузера), используемого в качестве карты ссылок, и бывают следующих типов: Default Область, связанная с которой ссылка,- активизируется при выборе пользователем области изображения без описания. Не требует задания координат. Rect Прямоугольная область изображения. Задается двумя парами координат (левыйнижний, правый-верхний). Poly Многоугольник {до 100 вершин). Координаты первой и последней вершины должны совпадать. Point Точка на изображении. Задается координатами точки. Circle Круг на изображении. Задается координатами центра круга и значения (NCSA-точка на окружности/СЕШ-радиус) 3. Создаем CGI-сценарий (Common Gateway Interface). Это программа (См. раздел 5.1.) которая храниться на Webcepeepe и служит для преобразования координат щелчка мыши, переданного броузером, в URL ресурса, в соответствии с файлом определения карты ссылок. (данный этап, как правило можно пропустить, т.к. у всех провайдеров есть стандартный обработчик карт-ссылок, надо только узнать, где он лежит и какой MAP формат понимает). 4. В HTML-документе указываем ссылку на тар-файл определения, а в качестве элемента-якоря задаем файл изображения карты ссылок. Например: <А HREF="http://www.mysite.ru/cgi-bin/mapdef.map"><IMG SRC="map.gif' ISMAP></A> Карты ссылок обрабатываемые клиентом Начиная с HTML 3.2, появилась возможность создавать карты ссылок, обрабатываемых клиентом т.е. броузером. При этом файл описания хранится в документе и задается при помощи специальных тегов, следующего формата: <МАР NAME="HMH карты <AREA SHARE="THN области 1" COORDS="x,y..." HREF="URL"/NOHREF> ссылок"> <AREA SHARE="TNN области N" COORDS="x,y..." HREF="URL"/NOHREF> </MAP> <IMG SRC="map.gif' USEMAP=#HMH карты ссылок> Типы областей изображения при этом аналогичны областям, приведенным в таблице выше. Пример определения карты ссылок: <МАР <AREA SHARE=RECT CC>ORDS="0,0, 50,100" <AREA </MAP> <IMG SRC="map.gif" USEMAP=#mapl> SHARE=RECT CC)ORDS="51,0, NAME=mapl> NOHREF><!~ мертвая зона ~> 100,100" HREF-'page 1 ,htm">