Конспект урока по Информатике "Вставка изображения в документ 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 графическое: элемент-якорь, линия-разделитель, фон и содержимое HEAD>
>flBa вида обезьянН1>
&
GIF
обезьяна & JPEG обезьянаН2>
<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:[email protected]">mailto:[email protected]">
почта ]">А>Вебмастер.
BODY> HTML>
Приведем несколько рекомендаций по использованию графики:
старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности загрузить изображение или загрузки в броузер с отключенной графикой не нарушается структура документа (вместо графики будет прямоугольник заданного размера с текстовым описанием);
при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BC)RDER=0), дабы не портить внешний вид документа;
при указании размеров изображения больших или меньших от оригинального размера броузер производит их масштабирование, что может нарушить качество изображения некоторых форматов;
Использование изображений в качестве - карты ссылок
Как я уже говорил выше (См. раздел 2.2.) возможно использование графических изображений-якорей для ссылок в HTML-документах. Для этого необходимо поместить тег <IMG SCR=" файл изображения"> в контейнер гиперссылки<А>....
Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" {imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером.
Карты ссылок обрабатываемые сервером
Не будем подробно рассматривать карты ссылок обрабатываемых сервером (тут вам не учебник по CGI- программированию, купите и читайте), но основные элементы этой технологии рассмотрим.
Создаем изображение - карту ссылок (например, сканируем политическую карту мира).
Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи непересекающихся областей изображения с ссылками на ресурсы Internet. Мар-файлы бывают двух форматов CERN и NCSA, а их поддержка определяется используемым Web-сервером.
Файлы формата CERN представляют собой набор записей вида:
ТипОбласти (xl,
URL yi)
'Файлы формата 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 карты ссылок">
области 1" COORDS="x,y..." REL="nofollow" target="_blank" HREF="http://doc4web.ru/go.html?href=URL"/NOHREF>
="tnn области N" COORDS="x,y..." REL="nofollow" target="_blank" HREF="http://doc4web.ru/go.html?href=URL"/NOHREF>
Типы областей изображения при этом аналогичны областям, приведенным в таблице выше. Пример определения карты ссылок: <МАР
ORDS="0,0, 50,100"
NAME=mapl> NOHREF>мертвая зона ~> 100,100" HREF-'page 1 ,htm">
Нравится материал? Поддержи автора!
Ещё документы из категории информатика:
Чтобы скачать документ, порекомендуйте, пожалуйста, его своим друзьям в любой соц. сети.
После чего кнопка «СКАЧАТЬ» станет доступной!
Кнопочки находятся чуть ниже. Спасибо!
Кнопки:
Скачать документ