Открытый урок в 11 классе учителя информатики I категории Тихоновой Елены Борисовны
ТЕМА Создание гиперссылок
ЦЕЛЬ: сформировать представление о гипертекстовой разметке документов
ЗАДАЧИ:
Обучающие: дать представление о гипертекстовом документе, дать понятие о гиперссылке, обучить учащихся выполнять задания по образцу, закрепить имеющиеся знания об отображении изображения на веб-странице.
Развивающие: развить уверенность в своих силах, развить умение действовать самостоятельно.
Воспитывающие: формировать познавательную потребность, воспитать сообразительность, логичность, воспитать стремление к творчеству.
ОБОРУДОВАНИЕ: ПК – 9 шт., программа Блокнот, браузер Mozilla Firefox.
ХОД УРОКА
I Организационный момент (1-3 мин.) – проверка присутствующих, вопросы о готовности группы к занятию, постановка целей занятия, мотивация.
II Повторение полученных знаний на предыдущих уроках в форме фронтального письменного опроса. (8-10 мин.) Учащимся раздаются карточки с разноуровневыми заданиями.
Карточка №1 (повторение материала прошлого урока)
Фамилия_______________________________
Какой тег предназначен для отображения изображения на веб-странице?
_______________________________________________________________
Как задать цвет страницы?
_______________________________________________________________
В каком теге задается фоновое изображение?
_______________________________________________________________
Карточка №2 (для плохо справившимися с 1 карточкой)
Ответить на вопросы:
- Что такое HTML-документ?
- С помощью чего создается HTML-документ?
- Что такое браузер?
Карточка №3 (работа с хорошо успевающими учениками у доски)
Ответить на вопросы:
- Для чего предназначены теги и атрибуты в языке HTML?
- Что мы увидим при просмотре в браузере следующего HTML-документа
<html>
<head>
<title> Вопросы </title>
</head>
<body>
<h1> Вопрос 9 </h1>
<p> Что такое HTML? </p>
</body>
</html>
III Изложение нового материала.(5-6мин.)
1. Для того чтобы связать две странички между собой используют гиперссылки. Гиперссылка – это объект Web-страницы, содержащий информацию об адресе другой Web-страницы. Чтобы превратить обычный документ в гипертекстовый, в него нужно вставить гипертекстовые связи. В качестве объекта для гиперссылки можно использовать как текстовый фрагмент, так и рисунки, элементы управления. Для создания гиперссылки используют парный тег <A HREF=” имя файла “>…</A>. Изображение или участок текста, слово, с которым связаны гиперсвязи, называется якорем, линком или ссылкой.
Атрибут HREF определяет URL-адрес ссылки, на которую будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами.
Например, <A href=http://www.kniga.ru> Книги</A>
Если ссылка производится на документ, находящийся в той же папке, что и исходный документ, достаточно указать только имя файла:
<A href=”U2.html” >Устройство компьютера </A>
Якорем гиперссылки может быть не только текст, но и рисунок:
<A href=”new.html” ><IMG src=”ris.gif”></A>
Гиперссылки можно использовать для размещения звуковых или видео-файлов:
<A href=”Zvuk.wav”> Послушайте песенку (90К) </A>
Работая со звуковыми файлами, не забывайте, что фрагменты звука должны быть короткими.
Рассмотрим пример:
|
Stranitca_1.HTML |
Stranitca_2.HTML |
|
<html> <head> <title> Пример1 </title> </head> <body> <h1> Страница 1 </h1> <br> <A href=” Stranitca_2.HTML ” Страница 2 </A> </body> </html> |
<html> <head> <title> Пример1 </title> </head> <body> <h1> Страница 2 </h1> <br> <A href=” Stranitca_1.HTML ” Страница 1 </A> </body> </html> |
|
«Страница 2» является ссылкой, а <A href=” Stranitca_2.HTML ” Страница 2 </A> - тег, определяющий URL-адрес этой ссылки |
«Страница 1» является ссылкой, а <A href=” Stranitca_1.HTML ” Страница 2 </A> - тег, определяющий URL-адрес этой ссылки |
Ф И З К У Л Ь Т М И Н У Т К А (1 мин.)
IV Закрепление нового материала (19-26 мин.)
Чтобы у вас сформировалось представление о гипертекстовом документе, закрепилось понятие о гиперссылке, предлагаю вам проделать практические упражнения.
Задание для практической работы:
Создайте два HTML –документа, отличающихся цветом фона. Сохраните их под именами STR1.HTML и STR2.HTML соответственно. Создайте гиперссылки с первого документа на второй и обратно.
Дополнительные задания.
- Создайте три HTML-документа, отличающихся фоном и свяжите их гиперссылками по схеме
V Обобщение и систематизация (1-2 мин.)
Мы познакомились с понятием гиперссылки. Научились создавать в программе Блокнот гипертекстовые документы при помощи тега <A HREF=” имя файла “>…</A> и связывать их между собой. Как назвать связанные между собой гиперссылками веб-страницы? (Учащиеся самостоятельно дают определение понятия сайта)
И мы продолжили закреплять уже имеющиеся навыки по оформлению веб-страницы: изменять фон, вставлять изображения.
VI Подведение итогов занятия (2-3 мин.)
VII Домашнее задание (1 мин.): §3 (п.3.3)
