Урок: Гиперссылки на Web-страницах
Цель:
Дидактическая: дать понятие форматирования текста Web-страницы и размещения гиперссылки.
Развивающая: развитие логического мышления школьников.
Воспитательная: воспитывать интерес к коммуникационным технологиям.
Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:
<А HREF=”Адрес”>Указатель ссылки</А>
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
<А HREF=”f ilename . htm”>Указатель ссылки</А>
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<А HREF=”http://www.server.ru/Web-сайт/ filename. htm”>Указатель ссылки</А>
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок “рука”. Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:
• к просмотру изображения в браузере:
<А HREF=”picture.jpg”>Изображение</A>
• к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
<А HREF=”sound.wav”>Звук</A>
• к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
<А HREF=”Apxив.ziр”>Скачать файл</А>
Практическая работа:
Панель навигации по сайту. Создадим папку сайта “Компьютер” и добавим в папку для сайта пустые страницы “Программы”, “Словарь”, “Комплектующие” и “Анкета”(это будут заголовки страниц). Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие “пустые” страницы должны иметь заголовки, но могут пока не иметь содержания: (шаблоны структуры веб-страниц для заполнения)
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<p align =”center”>
[<a href=”software.htm”>Программы</a>]
[<a href=”glossary.htm”>Словарь</a>]
[<a href=”hardware.htm”>Комплектующие</a>]
[<a href=”anketa.htm”>Aнкетa</a>]
Полный код главной страницы(index.html) имеет следующий вид:
<html>
<head>
<title>Основы компьютера</title>
</head>
<body>
<font color=”green”;font face=”monotype corsiva”>
<h1>На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на комплектующие.
</font>
<img src=”komp.png” align=”right”>
<br>
Терминологический словарь познакомит Вас с основными компьютерными терминами. Также вы можете заполнить анкету.</h1>
<p align =”center”>
[<a href=”software.htm”>Программы</a>]
[<a href=”glossary.htm”>Словарь</a>]
[<a href=”hardware.htm”>Комплектующие</a>]
[<a href=”anketa.htm”>Aнкетa</a>]
</p>
</body>
</html>
Изображение веб-страницы имеет следующий вид:
Файлы с именами software.htm, glossary.htm, hardware.htm и anketa.htm заполняются содержанием, которое выберет ученик для каждой страницы.
Страницу “Комплектующие” представить в виде таблицы.