Международный конкурс

Для всех учеников 1-11 классов и дошкольников
Интересные задания по 16 предметам

Инфоурок › Информатика ›Другие методич. материалы›Тема «Основы сайтостроения» Н. Угринович, 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 не нужен

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

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

Как учитель может зарабатывать на Инфоуроке?

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

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

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

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

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

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

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

6 664 567 материалов в базе

Найти материалы

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

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

pptx

Презентация по информатике на тему "Элементы алгебры логики. Высказывания. Логические операции"

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

06.10.2020
363
20

«Информатика (базовый и углублённый уровни) (в 2 частях)», Поляков К.Ю., Еремин Е.А.

pptx

7 сынып "Үш өлшемді модель" тақырыбы бойынша презентациясы

06.10.2020
1655
68

docx

РАБОЧАЯ ПРОГРАММА ОП.03 "ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ"

06.10.2020
160
0

pptx

Презентация по информатике на тему "Электронные таблицы как средство обработки числовых данных. Решение задач в MS Excel с использованием условной функции"

06.10.2020
604
14

docx

Сборник лабораторных работ на тему "Табличный редактор"

06.10.2020
3319
22

rar

Конспект внеклассного мероприятия по информатике для учащихся 9-10 классов по теме "Системы счисления"

05.10.2020
192
2

docx

Рабочая программа по информатике 10 класс

Учебник: «Информатика (базовый уровень)», Угринович Н.Д.
Тема: Глава 1. Информационные технологии

05.10.2020
651
2

«Информатика (базовый уровень)», Угринович Н.Д.

docx

Эссе на тему: "Безопасность детей в сети Интернет"

05.10.2020
8576
88

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

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

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

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

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

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