Урок 4, часть II. Итоговая работа по теме "Теги тела документа". Гипертекстовые ссылки

Актуализация знаний

Вспомним первый урок, посвященный Всемирной паутине и принципам создания web-узла (см. презентацию к уроку, прикрепленную ниже).

ТИПЫ СЕТЕЙ

  1. Какие сети вы знаете?
  2. В чем основная разница между сервером и клиентским компьютером?
  3. Какие протоколы передачи данных вам известны?
  4. В какой сети используется протокол HTTP?

ВСЕМИРНАЯ ПАУТИНА

  1. Покажите на схеме несколько главных серверов.
  2. Подумайте, почему более верно говорить об Интернете как Всемирной паутине, а не Всемирной сети?

АДРЕС ДОКУМЕНТА

  1. Что такое адрес документа и для чего он нужен?
  2. Что такое URL?
  3. Что включает в себя формат URL-адреса?

Новый материал

ГИПЕРССЫЛКИ

Ссылки (или гиперссылки) позволяют щелчком кнопкой мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми или графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу.

Для создания ссылки используют парный тег <A>…</A> (от слова anchor – якорь) с обязательным параметром HREF. В нем после знака равенства необходимо указать адрес документа.

<A HREF="адрес_ссылки"> текст_ссылки </A>

«ТИПЫ» ГИПЕРССЫЛОК
Посмотрите на слайд.
Какие три типа ссылок следует выделить?

ФОРМЫ ГИПЕРССЫЛОК
Прочитайте текст на данном слайде.
Какие существуют формы задания гиперссылок?
В каких случаях применяют абсолютную ссылку? относительную ссылку?

СОЗДАНИЕ ПОДСКАЗКИ К ССЫЛКЕ
Для чего предназначен атрибут TITLE?
Является ли он обязательным?
Когда наиболее уместно использовать атрибут TITLE?

ЦВЕТА ССЫЛОК

С помощью HTML можно задавать цвет для всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Цвета всех ссылок на странице задаются в качестве параметров тега <BODY>. Эти параметры являются необязательными, и если они не указаны, то используются значения по умолчанию.

LINK – цвет не посещенных ссылок (по умолчанию – синий, #0000FF);
ALINK – цвет «активной» ссылки (по умолчанию – красный, #FF0000);
VLINK – цвет уже посещенных ссылок (по умолчанию – фиолетовый, #800080).

Задание

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

<BODY LINK=#FFCCOO LINK=#0000FF VLINK=#800080 ALINK=#FF0000>
	<A HREF=content.html> Содержание сайта </A>
</BODY>

Практическая часть

ИНСТРУКЦИОННАЯ КАРТА

  1. Откройте папку Hyperlink на диске D:/ .
  2. Создайте в ней файл index.html
  3. Откройте его для редактирования (блокнот, Bred3 или др.).
  4. Задайте ссылки и оформите документ.

Ссылки должны быть следующие:

  • Всемирная паутина структура и принципы - structure_www_1.html
  • Технологии Всемирной паутины - tehnologies_www_2.html
  • История Всемирной паутины - history_www_3.html
  • Что такое ссылка - reference_4.html
  • Гиперссылка и гипертекст - hyperlink_5.html
  • Философы о гиперссылках - philosophers_6.html

Оформите ссылки в виде списка. Озаглавьте этот список (например, "Всемирная паутина. Гиперссылки").

Подведение итогов

  1. Какую форму задания гиперссылки наиболее уместно применять к файлу, находящемуся на том же компьютере что и файл index?
  2. Будут ли работать относительные гиперссылки, если файл, содержащий их, переместить на другой компьютер? Почему?
  3. Как будут располагаться тексты гиперссылок, если их поместить в контейнер BODY, не применяя никаких других тегов разметки документа?

Домашнее задание (по желанию): создайте html-страничку, которая будет содержать гиперссылки на самые распространенные поисковики Интернета (Google - google.com, Yahoo! - yahoo.com) и Рунета (например, Яндекс - yandex.ru, Рамблер - rambler.ru). Красиво оформите страничку.