Гиперссылки.

Гиперссылки.

Тема урока: Гиперссылки.

Цели урока:  

Ø  Ввести понятие web-сайта, гиперссылки;

Ø  Научить создавать гиперссылки.

Тип урока: повторение, изучение нового материала, закрепление пройденного.

Вид урока: повторение, лекция, практикум.

Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.

Методы обучения:

Ø  словесные: рассказ, объяснение;

Ø  наглядные: методы иллюстрации.

Конспект урока.

Повторение

1.      Какой тэг отвечает за создание бегущей строки?

2.      Атрибут, определяющий время между прорисовками строки.

3.      Какой атрибут отвечает за число пробегов строки?

4.      Атрибут behavior, его назначение и существующие параметры.

5.      Атрибут direction, его назначение и существующие параметры.

Теоретическая часть

Введем понятие web-сайта. Говоря просто, web-сайт - это совокупность связанных между собой страниц, объединенных общей идеей. Связать страницы между собой позволяют гиперссылки.

Гиперссылка - это активный элемент страницы, позволяющий ссылаться (указывать) на другие html страницы и прочие ресурсы в сети. При щелчке на гиперссылке в браузер загружается указанный ресурс. В окне web – браузера гиперссылки обычно выделены синим цветом  и подчеркиванием.

Пример. Сайт www.ramler.ru является не более чем порталом, его основная функция – предоставление ссылок на другие  web- сайты, в том числе их поиск.

Можно выделить несколько видов гиперссылок.

□       Внутренние гиперссылки связывают документы внутри одного и того же узла.

□       Внешние гиперссылки связывают Web-страницу с документами, не при­надлежащими данному Web-узлу.

□       Гиперссылка может указывать на почтовый адрес.

□       Гиперссылка может указывать на метки (якоря), которые позволяют по­сетителю переходить в определенные места документа.

Каждая HTML-страница имеет свой уникальный адрес в Интернете, кото­рый называется универсальным указателем ресурса (Uniform Resource Locator, URL). Когда создается локальная (внутренняя) гиперссылка, совсем не обязательно указывать полный URL документа. Вместо этого можно ука­зать относительный путь от данной страницы или от корневой папки Web-узла. Далее представлены примеры трех типов гиперссылок, используемых при связывании документов.

1)        Абсолютный путь:

http://www.dodbar.nn.ru/rus/index.html

Абсолютный путь задается полным URL документа, на который устанавли­вается гиперссылка. Такой тип гиперссылок обычно используется для свя­зывания документов, расположенных на разных Web-узлах. Основное не­удобство абсолютного пути заключается в том, что при переносе файлов на другой сервер в Интернете требуется менять все гиперссылки.

2)       Путь относительно просматриваемого документа:

rus/index.html

Путь относительно документа наиболее распространен при создании гипер­ссылок. Обычно они используются для связывания документов, располо­женных в одном и том же Web-узле, когда структура проекта уже устоялась и в ближайшее время меняться не будет. В пути относительно документа обычно задается только та часть URL, которая отличается у двух связывае­мых документов, например, если два документа находятся в одной папке, то достаточно указать название документа, на который указывает гиперссылка. Даже если файлы расположены в разных папках, к примеру, один — во вложенной папке основной папки, то следует сначала указать имя вложен­ной папки, а затем прямой слэш и имя документа.

3)      Путь относительно корневой папки Web-узла:

/support/www.dodbar.nn.ru/rus/index.html

Путь относительно корневой папки представляет собой полный путь отно­сительно корневой папки Web-узла. Главное его отличие от пути относительно документа состоит в способе задания — он начинается с прямого слеша. Обычно путь относительно корневой папки используется в тех слу­чаях, когда HTML-документы необходимо часто переносить из одной папки в другую. При этом, если в гиперссылках на сопутствующие файлы и файлы графики указан путь относительно корневой папки, он не будет зависеть от местоположения самого документа. Конечно, при перемещении целой пап­ки все гиперссылки, указывающие на файлы внутри этой папки, должны быть изменены.

<А>  </а>

Один из самых важных элементов языка, обеспечивающий создание гипер­ссылок. Чаще всего используется следующий шаблон:

Произвольный текст  <А href="адрес ссылки">Текст для щелчка </а>

    Или такой:

<А href="адрес ссылки"> <IMG src="ссылка на рисунок> </а>

Первый шаблон используется в том случае, когда гиперссылка встречается в
тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или метку внутри текущей страницы. Текст, расположенный ;'    внутри элемента а, представляет собой видимую часть гиперссылки. Пользователь должен щелкнуть по ней, чтобы осуществить переход на следующий документ. Браузер выделяет этот фрагмент цветом, а после использования  гиперссылки  меняет цвет,  чтобы  подсказать пользователю,  какие             ссылки были посещены.

Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки.

Внутри тэга <body> используются атрибуты, определяющие цвет гиперссылок:

□       link — задает цвет ссылок на всей Web-странице;

□       vlink — задает цвет посещенных ссылок;

□       alink — задает цвет активных ссылок (цвет появляется при нажатии мыши).

Пример

<BODY link="0000FF" vlink="CC0066" alink="FF0000">

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

<А href="mailto:vebmaster@mail.ги>Иванов Алексей</а>

Практическая работа.

1.      Связать все ранее созданные страницы (Кодирование.html ,   Виды Омска.html,  Списки.html,  Оригами.html) в единый Web-сайт, путем создания гиперссылок.

2. Главная страница должна иметь примерный вид:

Домашняя работа: к следующему уроку подготовить иллюстративный и текстовый материал для проекта.

Примерные темы проекта:

·        История вычислительной техники;

·        История цифр;

·        История алфавита (русского, латинского и т.п.);

·        Системы счисления;

·        Решение логических задач;

·        Мой любимый урок;

·        Мое хобби.

Скачано с www.znanio.ru