Инфоурок Информатика Другие методич. материалыТема «Основы сайтостроения» Н. Угринович, 9 класс Урок №4. Работаем с тегом МАР.

Тема «Основы сайтостроения» Н. Угринович, 9 класс Урок №4. Работаем с тегом МАР.

Скачать материал

Тема «Основы сайтостроения» Н. Угринович, 9 класс

Урок №4. Работаем с тегом МАР.

Тег МАР (парный) позволяет работать с изображением как навигационной картой, так как  изображение визуально можно представить в виде  отдельных фрагментов - геометрических областей. На каждом фрагменте может срабатывать ссылка на другую страничку или происходить вызов событийного окна с соответствующим текстом.

В МАР – один параметр  name - имя карты латинскими буквами, например, karta1

В  Map обязательно вложен одиночный тег Area с параметрами, которые определяют геометрические области внутри карты и,  либо ссылки на другую страницу, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты), , либо вызов событийного окна.

Для того, чтобы связать размеченную карту с целым изображением,  надо в тег IMG записать  параметр usemap

<img src=7.jpg usemap="#karta1">

 

<map name=karta1>
<area ...>
<area ...>
...
<area ...>
</map>

Параметры теги AREA:

1)      Shape - определяет форму области (shape=rect - прямоугольник, shape=circle - круг shape=poly - многоугольник);

2)      Coords - определяет координаты  фрагмента карты.  Число координат и порядок их значений зависят от выбранной формы. Для прямоугольника - это координаты верхнего левого и правого нижнего углов (т.е. координаты диагонали). 
<
area shape="rect" coords="x1,y1,x2,y2">.
Для круга – координаты центра и радиус <
area shape="rect" coords="x,y,r">.
Как узнать координаты? Открыть изображение в графическом редакторе, например, в
Paint или ОО Draw, навести мышку на область и в строке состояния посмотреть координаты.

3)      Href -  указывает на внешнюю ссылку (на другую страницу).
<
area href=2.htm shape="rect" coords="8,13,21,55"> Ссылка на файл  2.htm,  работает на прямоугольной области, ограниченной указанными координатами

4)      onClick="alert('текст')" – ссылка на текст в событийном окне. Например, так
<
area href="#" shape="circle" coords="330,170,10" onClick="alert('текст, который появится в отдельном событийном  окне. Текст может быть большим по объему, но без кода клавиши Enter!!!!  ')" title="всплывающий на части изображения текст">

 

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

<!--используй (usemap) изображение (v1.jpg) как карту -- >

<img src=v1.jpg usemap="#karta1">

<!—имя карты любое лат буквами, например, karta1

<map name="karta1">

<! -- в области area указана форма shape в виде круга circle с координатами coords – центр круга 330, 170 и радиусом 10,  при клике onClick на которую в событийном окне alert появится текст, при  наведении мыши  на часть изображения появится всплывающий текст title -- >

<area href="#" shape="circle" coords="330,170,10" onClick="alert('текст, который появится в отдельном событийном  окне. Текст может быть большим по объему, но без кода клавиши Enter!!!!  ')" title="всплывающий на части изображения текст">

</map

Если использовать параметр href как ссылку на другую существующую страницу, например, href=1.htm, то параметр onClick не нужен

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Тема «Основы сайтостроения» Н. Угринович, 9 класс Урок №4. Работаем с тегом МАР."

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Психолог в социальной сфере

Получите профессию

Технолог-калькулятор общественного питания

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Краткое описание документа:

Урок №4 "Работаем с тегом МАР". 9 класс.

Урок с номером 4, естественно, проводится после того, как изучены основные понятия, такие как,  веб- страница, веб-сайт, структура веб- страницы, основные теги для форматирования текста, вставка изображений, гиперссылок.

Тег МАР (парный) позволяет работать с изображением как навигационной картой, так как  изображение визуально можно представить в виде  отдельных фрагментов - геометрических областей. На каждом фрагменте может срабатывать ссылка на другую страничку или происходить вызов событийного окна с соответствующим текстом.

Из практики знаю, что учащиеся с удовольствием создают навигационную карту на изображении, которое сами же и создают.

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 832 материала в базе

Скачать материал

Другие материалы

Презентация по информатике на тему "Элементы алгебры логики. Высказывания. Логические операции"
  • Учебник: «Информатика (базовый и углублённый уровни) (в 2 частях)», Поляков К.Ю., Еремин Е.А.
  • Тема: § 19. Логические операции
  • 06.10.2020
  • 357
  • 20
«Информатика (базовый и углублённый уровни) (в 2 частях)», Поляков К.Ю., Еремин Е.А.

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 05.01.2015 316
    • DOCX 34 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Осипова Светлана Леонидовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Осипова Светлана Леонидовна
    Осипова Светлана Леонидовна
    • На сайте: 8 лет и 8 месяцев
    • Подписчики: 0
    • Всего просмотров: 7957
    • Всего материалов: 7

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Няня

Няня

500/1000 ч.

Подать заявку О курсе

Курс повышения квалификации

Теоретические и методологические основы преподавания информатики с учётом требований ФГОС ООО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 150 человек из 49 регионов

Курс повышения квалификации

Компьютерная грамотность для пенсионеров

36 ч. — 180 ч.

от 1580 руб. от 940 руб.
Подать заявку О курсе

Курс профессиональной переподготовки

Теория и методика обучения информатике в начальной школе

Учитель информатики в начальной школе

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 95 человек из 33 регионов

Мини-курс

Робототехника в школе: конструирование и программирование

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 43 человека из 21 региона

Мини-курс

Toolbox классического проектного менеджмента

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Особенности психологической помощи детям

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 423 человека из 66 регионов