Конспект урока по Информатике "Вставка изображения в документ HTML"

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

Цель:

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

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

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

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

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

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

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

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

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

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

Использование графики в документах позволяет повысить привлекательность ваших 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- программированию, купите и читайте), но основные элементы этой технологии рассмотрим.

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

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

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



 

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

URL

yi)

ТипОбласти (xl, yl)... URL

			'Файлы формата NCSA представляют собой набор записей вида: ТипОбласти	URL	xl,	yl,

ТипОбласти URL xl, yl, ...

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

	Default	Область, связанная с которой ссылка,- активизируется при выборе пользователем

области изображения без описания. Не требует задания координат.

	Rect	Прямоугольная область изображения. Задается двумя парами координат (левый-

нижний, правый-верхний).

	Poly	Многоугольник {до 100 вершин). Координаты первой и последней вершины должны

совпадать.

	Point	Точка на изображении. Задается координатами точки.

	Circle	Круг на изображении. Задается координатами центра круга и значения (NCSA-точка

на окружности/СЕШ-радиус)

	Создаем CGI-сценарий (Common Gateway Interface). Это программа (См. раздел 5.1.) которая храниться на Web-cepeepe и служит для преобразования координат щелчка мыши, переданного броузером, в URL ресурса, в соответствии с файлом определения карты ссылок. (данный этап, как правило можно пропустить, т.к. у всех провайдеров есть стандартный обработчик карт-ссылок, надо только узнать, где он лежит и какой MAP формат понимает).

	В 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	SHARE=RECT	CC)ORDS="51,0,

</MAP>

NAME=mapl>

	NOHREF><!~ мертвая зона ~> 100,100"	HREF-'page 1 ,htm">

<IMG SRC="map.gif" USEMAP=#mapl>