kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

Разработка урока на тему "Вставка изображения в 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:[email protected]">

<IMG               SRC="mbox.gif'                  BORDER=0                ALT="[                почта                          ]"></А>Вебмастер.

</BODY> </HTML>

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

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

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

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

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

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

Просмотр содержимого документа
«Разработка урока на тему "Вставка изображения в HTML документ" »

Тема: Вставка изображения в документ 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

TITLEBce графическое: элемент-якорь, линия-разделитель, фон и содержимое HEAD

flBa вида обезьянН1

&

GIF обезьяна & JPEG обезьянаН2

P ALIGN=CENTER

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

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

Р ALIGN=CENTER

Р ALIGN=CENTER© 2001 А HREF="mailto:[email protected]"

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

BODY HTML

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

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

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

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

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

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

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

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

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

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

    2. Создаем файл определения карты ссылок. Данный файл (расширение 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-точка

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

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

    2. В HTML-документе указываем ссылку на тар-файл определения, а в качестве элемента-якоря задаем файл изображения карты ссылок. Например:

HREF="http://www.mysite.ru/cgi-bin/mapdef.map"IMG SRC="map.gif' ISMAPA Карты ссылок обрабатываемые клиентом

Начиная с HTML 3.2, появилась возможность создавать карты ссылок, обрабатываемых клиентом т.е. броузером. При этом файл описания хранится в документе и задается при помощи специальных тегов, следующего формата:

NAME="hmh карты ссылок"

области 1" COORDS="x,y..." HREF="URL"/NOHREF

="tnn области N" COORDS="x,y..." HREF="URL"/NOHREF

SRC="map.gif' USEMAP=#hmh карты ссылок

Типы областей изображения при этом аналогичны областям, приведенным в таблице выше. Пример определения карты ссылок: МАР

ORDS="0,0, 50,100"

NAME=mapl

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


Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 11 класс

Скачать
Разработка урока на тему "Вставка изображения в HTML документ"

Автор: Досымбекова Галина Владимировна

Дата: 03.07.2014

Номер свидетельства: 109325

Похожие файлы

object(ArrayObject)#852 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(75) "Методическая разработка открытого урока"
    ["seo_title"] => string(43) "metodicheskaia_razrabotka_otkrytogo_uroka_1"
    ["file_id"] => string(6) "510335"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1557900188"
  }
}


Получите в подарок сайт учителя

Видеоуроки для учителей

Курсы для учителей

Распродажа видеоуроков!
ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства