Конспект урока "Вставка гиперссылки в WEB-страницу"
1
Тема урока: «Вставка гиперссылки в WEB-страницу»
Цель: сформировать у учащихся умение создавать и использовать гиперссылки в своих
Web-страницах.
Задачи урока:
образовательная – ввести понятие гиперссылки; познакомить учащихся с основными
видами гиперссылок; научить создавать гиперссылки
развивающая – закрепить на практике умение создавать различные гиперссылки;
развивать логическое мышление, устойчивый интерес к предмету, навыки
самостоятельной работы;
воспитательная - воспитывать чувство ответственности, аккуратности, трудолюбия,
воспитание устойчивой мотивации к учебной деятельности; коммуникативные навыки,
навыки взаимооценки и самооценки.
Тип урока: урок изучения и закрепления нового материала.
Вид урока: комбинированный урок.
Метод обучения: смешанный (самостоятельная работа, изучение новой темы,
демонстрация, практическая работа).
Возраст учащихся: 11 класс.
Оборудование: тетради, мультимедиа-проектор, компьютеры, раздаточный материал.
Этап урока
Время
1. Организационный момент
1 мин.
2.Повторение пройденного (Взаимооценка)
10 мин
3. Проверка дом задания
3 мин
4. Проблемная ситуация
3 мин
5. Сообщение темы и цели
3 мин
6. Объяснение нового материала с
практической работой на ПК
10мин
7. Практическая работа
7 мин.
8. Домашнее задание
1 мин.
9. Подведение итогов
2 мин
2
Ход урока
№
Деятельность учителя
Деятельность
учащихся
Приме
чание
1
Организационный момент.
Здравствуйте ребята! Садитесь! Назовите
отсутствующих.
Ученики садятся
2
Повторение пройденного (Взаимооценка)
Мы продолжаем изучение темы создание Web-сайтов
с использованием языка разметки гипертекстовых
документов HTML, Давайте проверим ваши знания по
данной теме полученные ранее. На столах у вас лежат
чистые листочки, подпишите их и внимание на доску.
В самостоятельной работе будет 5 заданий, вопросы
не пишем, сразу ответы. (1-5 слайды презентации).
Взаимопроверка. Первый ряд и второй ряд
меняются листочками. На доске учитель показывает
вопросы с правильными ответами. (8-14 слайды
презентации).
Поднимите руку у кого 5 «+», молодцы поставьте
этим ребятам оценку «пять», у кого 4 «+», поднимите
руку - те получают оценку «4», 3 правильных ответа –
оценка «3» и т.д. Ребята у кого возникли вопросы, кто
не согласен? Тогда сдаем листочки, я посмотрю, где
нужно подкорректирую и выставлю оценки в журнал.
Выполняют на
листочках задания
Обмениваются
листочками, проверяют
ответы друг друга,
карандашом ставят «+»
или «-»
Поднимают руки
3
Проверка дом задания
Ребята давайте проверим домашнее задание.
К доске пойдет …
Спасибо за демонстрацию домашнего задания,
остальные домашние работы я проверю и оценю
после небольшой доработки
1 ученик демонстрирует
выполненное домашнее
задание (7 страниц не
связанных между собой)
4
Проблемная ситуация
Удобно ли демонстрировать странички в домашней
работе и почему?
Что можно сделать, чтобы было удобно.
Как вы думаете, чем мы будем заниматься сегодня на
уроке?
Для чего нужны ссылки?
Что может быть ссылкой (текст или картинка)?
Как ссылки выделяются на странице
А какие ссылки бывают?
Нет, каждую страницу
нужно отдельно
открывать и закрывать
Нужно сделать
гиперссылки
Создавать ссылки
Отвечают
5
Сообщение темы и цели.
Давайте подведем итог
«Вставка гиперссылки в WEB-страницу» (15 слайд)
У вас на партах лежат карточки с вопросами, вы
сегодня на урозаписываете в эти карточки, а дома
вклеите карточки в рабочую тетрадь. Понятно
(Слайд 16)
• Что такое гиперссылка?
Записывают тему урока в
тетрадь
3
• Какие бывают виды гиперссылок?
• Как задаются гиперссылки в НТМL?
• Научиться создавать гиперссылки на практике
6
Изучение нового материала.
Ребята попробуйте дать ответ на первый вопрос
(Это связь между частями текста в большом тексте)
Слово Гиперссылка состоит из двух частей Гипер -
большой, ссылка – ссылаемся на что-либо (картинку,
текст, другой документ).
Какие бывают виды гиперссылок?
На что можно сделать ссылку?
После ответов демонстрируется слайд 18
- Какие бывают типы гиперссылок?
Абсолютная ссылка - содержит полный адрес -
адрес URL (Единый указатель ресурсов) сервера в
Интернет и полный путь.
Такая ссылка позволяет другим посетителям
копировать страницу к себе на компьютер (не весь
сайт!), открыть у себя страницу, щелкнув по ссылке
пройти полное подключение через Интернет и
попасть на адресуемую страницу.
Чаще всего мы говорим «адрес сайта» - это и есть
абсолютная ссылка
- Ещё?
Относительная ссылка - указывает размещение
адресуемого файла относительно исходной страницы,
откуда исходит ссылка.
Относительная ссылка применяется при
формировании своего сайта и позволяет перенести
Записывают в карточку
(17 слайд)
Слово Гиперссылка
состоит из двух частей
Гипер - большой, ссылка
– ссылаемся на что-либо
(картинку, текст, другой
документ).
Отвечают устно
ссылку можно сделать:
• на другой адрес в
Интернет,
• на другой файл на
своем сайте (сервере),
• на другое помеченное
место на читаемой
странице,
• на адрес электронной
почты E-mail
(учащиеся записывают в
карточку)
Смотрят слайд 19
Слайд 20
Относительные
гиперссылки
4
свой сайт на любой компьютер.
Какой тип гиперссылки нужно использовать в
домашней работе.
- Для того, чтобы создать гиперссылку нам необходим
элемент, отмечающий в документе ссылку. Граница
действия элемента определена парным тэгом,
который называется «Анкор» (от слова Anchor -
буквально "якорь")
Тэг <A>…</A>
Тэг <A> применяют с параметрами HREF или
NAME, которые уточняют ссылку.
Гиперссылка, связывающая две странички
Для создания такой гиперссылки, используется запись
<A HREF="адрес куда"> Слова откуда </A>
Рассмотрим примеры:
Ссылка на картинку:
<A HREF="img/oz2.jpg">Картинка </A>.
Картинка является ссылкой
<A HREF="1.html"><img src=”img/2.jpg”> </A>.
на другие WEB-страницы и сайты.
<A HREF= "http://www.ronets.hut.ru">здесь </A>.
на адрес электронной почты.
<A HREF="mailto:[email protected]">я</A>.
Второй вид ссылок - гиперссылки на различные
участки или разделы одного и того же документа,
используя специальных скрытый маркер для этих
разделов. Это позволяет быстро переходить от раздела
к разделу внутри документа, не используя
скроллирование экрана. Как только вы щелкнете на
ссылке, браузер переместит вас на указанный раздел
документа, а строка, в которой стоит маркер данного
раздела (обычно, первая строка раздела или заголовок
раздела) будет размещена на первой строке окна
браузера (если данная строка не присутствует уже на
экране браузера).
Для создания ссылок, указывающих на метки,
которые, позволяют посетителю переходить в
определенные места документа используется записи:
<A NAME="маркер"> Текст </A>, и
<A HREF="# маркер"> Слова откуда </A>
где вводится символ # означающий внутреннюю
ссылку к другому тексту той же страницы, который
помечен тэгом А с параметром NAME как закладка
Символы "#x1" сообщает браузеру, что необходимо
Слайд 21
Слайд 22
Ученики записывают в
карточку
Смотрят примеры
Слайд 23
Слайд 24
Ученики записывают в
карточку
Внимательно смотрят и
помогают учителю
• Например:
<p><b>
Список разделов
</b></p>
<a href="#x1">Раздел
1</a><br>
<a href="#x2">Раздел
2</a><br>
<a
name="x1"></a>Раздел1<
/p>
<p>Текст раздела 1</p>
<p><a
5
найти в данном HTML-документе маркер с именем
"x1".
Когда пользователь щелкнет мышью на строке
"Раздел 1", браузер перейдет сразу к разделу 1.
Учитель показывает, как сделать ссылку,
связывающую две странички
name="x2"></a>Раздел
2</p>
<p>Текст раздела 2 </p>
4
Гимнастика для глаз
1.Крепко зажмурить глаза (считать до 3), открыть их и
посмотреть вдаль (считать до 5). Повторить 4-5 раз.
2.В среднем темпе проделать 3-4 круговых
движения глазами в правую сторону, столько же в
левую сторону. Расслабив глазные мышцы,
посмотреть вдаль на счет 1-6. Повторить 1-2 раза.
Практическая работа.
Чтобы закрепить то, что мы сейчас изучили, вы
сейчас занимаете свои места за компьютером и
будете делать гиперссылки, связывающие страницы
вашего Web-сайта.
Через 7 минут
Кто 4 и больше. Молодцы
… Покажите
Садимся за парты.
Ученики садятся за
компьютеры и
выполняют задание.
5
Домашнее задание (написано на карточке)
Дома доделать гиперссылки, связывающие все
страницы вашего Web-сайта (кто не успел) и сделать
1 гиперссылку на различные участки или разделы
одного и того же документа
Д/з
Слайд 25
6
Подведение итогов.
Ребята, оцените пожалуйста свои знания по
сегодняшней теме. Для этого на второй карточке
выберите один из вариантов ответа.
Я всё знаю, могу объяснить
Я всё знаю, понял, но не уверен
Всё знаю, но не объясню
У меня остались вопросы
Собираю карточки. По вашим ответам я вижу, что
большинство из Вас всё поняли и могут объяснить, но
у некоторых ребят ещё остались вопросы, поэтому
дома нужно ещё раз повторить теоретический
материал и закрепить выполнением домашней
практической работой
Спасибо за урок до свидания!
Выбирают вариант
ответа
Информатика - еще материалы к урокам:
- Стандартная часть кодировочной таблицы ASCII
- Годовая контрольная работа по информатике 7 класс
- Презентация "Защита интеллектуальной собственности и авторского права"
- Перспективы развития информационно-коммуникационных технологий
- Подготовка к ЕГЭ "Представление числовой информации"
- Подготовка к ЕГЭ "Логика и моделирование"