Практическое занятие № 20

ТЕМА: Создание гиперссылок.

ЦЕЛЬ: Сформировать умения создавать гиперссылки для перехода со страницы на страницу веб-сайта.  

 

1. Последовательность выполнения практического занятия.

1.1. Внеаудиторная подготовка

а. повторить технику безопасности при работе на ПК.

б. повторить материал предыдущего занятия или изучить материал учебной  литературы: Информатика: учебное пособие для 11 класса, с. 18…30.

1.2. Работа на учебном занятии

а. Выполнить практические задания.

б. Убрать рабочее место.

в. Оформить отчёт.

2. Методические указания

 

Теоретические сведения для выполнения Заданий 1-2.

Создание гиперссылок.

Переходы со страницы на страницу веб-сайта выполняются с помощью гиперссылок. За организацию ссылок на языке HTML отвечает  тег <a> с обязательным атрибутом href, значением которого является адрес (URL) ресурса.

Например, HTML–код текстовой гиперссылки на страницу «Графика», которая сохранена в файле graf.htm  в той же папке, что и исходная страница, имеет вид:

<a  href=”graf. htm”>Графика</a>,

 

т.е. адресом ресурса является имя файла.

 

http://gatk.by/dotd/inform/pz26/pz26.files/image004.jpgОбычно близкие по тематике страницы сайта сохраняют в соответствующих папках. Пусть, например, на диске D: в папке  kino хранят главную страницу  mail.htm, во вложенной папке dramy – страницу фильма drama2.htm, а в папке  multy – страницы   karlson.htm и ну погоди.htm. 

 

 

 

 

В этом случае при создании гиперссылок необходимо указывать пути к файлам. Возможны два варианта:

·     записать полный путь от корня диска к искомой странице;

·                   указать относительный адрес (путь от исходной страницы к искомой). Например, ссылка со страницы mail.htmна страницу   karlson.htm будет такой:

 

<a  href=”multy/ karlson. htm” >Карлсон   </a>,

Ссылка со страницы drama2.htm (папка dramy) на страницу karlson.htm (папка multy) будет иметь вид:

<a  href = “. ./ multy/ karlson. htm”> Карлсон</a>,

Символы . . / ( две точки и слеш) обозначают возврат в папку kino из вложенной папки dramy.

При переносе папки kino со всеми вложениями в другое место, в том числе на другой диск или компьютер, относительные адреса не изменяются!

Гиперссылкой может служить не только текст, но и рисунок. Для создания гиперссылки между парой тегов <a href>. . .</a> нужно вставить тег, указывающий на файл изображения, например:

<a href=”graf. htm”><img src=”ris. gif ”></a>.

Возможно совместное использование текста и графики в одной ссылке, например:

<a href=”graf. htm” ><img src=”ris. jpg”>Графика</a>.

По умолчанию вызванная гиперссылкой страница открывается в том же окне, что и исходная, замещая её. Назад можно вернуться с помощью соответствующей кнопки на панели инструментов браузера. Для просмотра вызванной страницы в новом окне необходимо указать атрибут  target=”_blank”, например:

<a href=”graf. htm  target =”_blank”>Графика</a>.

Гиперссылка может указывать не только на веб-страницу, но и на любой раз­мещенный в сети по известному адресу информационный ресурс: рисунок, текст, презентацию, аудиовидеофрагмент. Конечно, на компьютере пользователя должно быть установлено соответствующее программное обеспечение для его отображения.

Пусть, например, реферат по астрономии luna.doc размещен в папке astro на сайте www.referaty.by. Гиперссылка для его просмотра или скачивания может быть задана тегами:

 href="www.referaty.by/astro/luna.dос">Луна</а>.

Еще раз подчеркнём, что расставлять гиперссылки следует только после со­здания ресурсов, на которые они указывают, и размещения их файлов в заданных папках.

Задание 1. Создайте главную страницу веб-сайта «Мой колледж». Разместите на ней гиперссылки на страницы «Учёба», «Спорт», «Отдых» (открывают­ся в том же окне), а также на рисунок карты (открывается в новом окне). Папка с рисунками, фотографиями находится на диске Z: в каталоге Веб-конструирование.

http://gatk.by/dotd/inform/pz26/pz26.files/image005.jpg

 

Методика выполнения Задания 1.

- все файлы для сайта должны быть размещены в одной папке, имя которой можно задать, например, Мой сайт;

- скопируете в эту папку Мой сайт фай­лы для всего сайта со всеми используемыми рисунками из каталога Веб-конструирование на диске Z;

- наберите текст программы на языке HTML на вкладке Текст;

- в программе красным цветом выделены те элементы, которые вы можете изменять самостоятельно, например, если не нравится фон сайта, предложенный в задании и размещенный в файле fon1, то его можно заменить на другой fon2 илиfon3, а также на любой другой рисунок;

 

<html>

<head> <title>Главная</title></head>

 <body background="fon1.jpg">

<h3 align="center"><font size="+7" color="blue">МОЙ КОЛЛЕДЖ</h3>

 <font size="+5" color="red"><i>СОДЕРЖАНИЕ</і><br>

<a href="urok.htm">Учеба</а><br>

<a href="sport.htm">Спорт</а><br>

<a href="kultura.htm">Отдых</а><br>

  <i>Ссылка на карту</і>

<a href="karta.jpg" target="_blank">

<img src="karta.jpg" width="100" height="130"></a>

 </body>

</html>

- перейдите на вкладку HTML и просмотрите результат;

- это главная страница вашего сайта, сохраните её под именем index.htm в ту же папку с именем Мой сайт;

 

Задание 2.  Создайте веб-страницы «Учёба», «Спорт», «Отдых» для организации гиперссылок с главной страницы веб-сайта.

 

Методика выполнения Задания 2.

- наберите текст программы на языке HTML на вкладке Текст;

- в программе красным цветом выделены те элементы, которые вы можете изменять самостоятельно;

 

<html>

<head> <title>УЧЕБА</title></head>

  <body bgcolor="gold">

    <h3 align="center"><font size="+5" color="blue">УЧЁБА</h3>

     <img src="urok1.jpg" width="450" height="400"></a>

     <img src="urok2.jpg" width="450" height="400"></a>

  </body>

</html>

 

- перейдите на вкладку HTML и просмотрите результат;

- это страница вашего сайта, которая должна будет открываться при щелчке по гиперссылке Учёба на главной странице вашего сайта, сохраните её под именем urok.htm в ту же папку с именем Мой сайт;

- аналогичным образом создайте ещё две страницы для гиперссылок Спорт и Отдых, которые сохраните под именамиsport.htm и kultura.htm в ту же папку с именем Мой сайт;

- проверьте работоспособность гиперссылок.

 

Самостоятельная работа

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

 

3. Содержание отчета

а. Титульный лист

б. Цель работы

в. Дидактическое и методическое обеспечение

г. Последовательность выполнения работы по заданиям с описанием основных этапов осуществляемых действий

д. Заключение в виде анализа полученных результатов и выводов

 

 Контрольные вопросы

1. С помощью какого тега создается гиперссылка?

2. Как в качестве гиперссылки использовать изображение?