Информационный сайт учителя Информатики и Экономики

Щёголевой А.П.

В помощь учителям, ученикам и деловым людям

Гиперссылки на Web-страницах

Автор Anna Опубликовано: 21 - апреля - 2020

Цель:
Дидактическая: дать понятие форматирования текста 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 заполняются содержанием, которое выберет ученик для каждой страницы.
Страницу «Комплектующие» представить в виде таблицы.

Изучить основные понятия таблицы в html, которые представлены в лекции «Таблицы в html»
Смотреть полный пример практической работы «Разработка web-сайта»

Поделиться ссылкой с друзьями:

Написать комментарий