Создание ссылок в HTML-документе

Время

Деятельность учителя

Деятельность учащихся

Доска, экран, ком-р

1-2 минута

Приветствует учащихся, отмечает посещаемость, проверяет готовность к уроку.

Слушают учителя

3-4 минута

Рассказывает учащимся цель урока и план работы:

Цель урока – знакомство с тегами, предназначенными для организации ссылок в HTML-документе. Поэтому большую часть урока мы будем заниматься освоением нового материала, затем закрепим полученные знания практической работой.

Слушают учителя, задают вопросы по плану урока

Слайд № 1

5-38

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

Организация ссылок

Ссылка состоит из двух частей. Первая из них — это то, что вы видите на Web-странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL- адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом. Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов — текстовые и графические.

Текстовые указатели обычно представляют собой слово или несколько слов, выделенных на экране подчеркиванием. Цвет текстового указателя может регулироваться автором и установками программы просмотра.

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

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

Правила записи ссылок

Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который вы ссылаетесь. Оба действия выполняются при помощи тэга <А>.

Тэг <А> имеет единственный параметр HREF, значением которого является URL-адрес. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </А>.

Указание адреса может быть относительным или абсолютным. Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page, то относительный указатель /picture подразумевает адрес http://www.mysite.com/page/picture, т. е. подкаталог, расположенный на той же машине.

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

URL-адрес, полностью определяющий компьютер, каталог и файл, называется абсолютным. В отличие от относительных, абсолютные указатели могут ссылаться на файлы, расположенные на других компьютерах.

Внутренние и смешанные ссылки

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы. Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра NAME тэга <А>. При этом параметр HREF не используется, и браузер не выделяет содержимое тэга <А>. Например: <А NAME=chapter_5> </A>

После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре HREF адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.

<А HREF="#chapter_5">Глава 5</A>

Теперь, если пользователь щелкнет кнопкой мыши на словах "глава 5", браузер выведет соответствующую часть документа в окне просмотра. Ссылки на документы различных типов. Когда пользователь щелкает мышью на ссылке, указывающей на другую Web-страницу, она выводится непосредственно в окне браузера. Если же ссылка указывает на документ иного типа, программа просмотра принимает документ и затем решает, что с ним делать дальше. Следующими действиями браузера могут быть: Браузер знает этот тип документа и умеет с ним обращаться.

Рассмотрим случай создания внешней (обычной) ссылки, при обращении к которой загружаемый HTML-документ просматривается в браузере не сначала, а с отмеченной позиции.

Создание подобной ссылки отличается только заданием значение параметра HREF тега <А>, которое должно содержать в себе как имя открываемого HTML-документа, так и имя метки, к которой нужно осуществить переход.

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

Выполнение заданий по вариантам.

Задание 1:

Общее: Создать HTML-страницы, связанные между собой по предложенной схеме.

Вариант 1:

В ариант 2:

Задание 2 (внутренние ссылки): Создать HTML-документ, содержащий некоторый текст. Текст должен быть разбит на главы. В начале HTML-документа сделать содержание, позволяющее переходить к выбранной главе.

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

Слайд № 2.

Слайд № 3

Слайд № 4

Слайд № 5

Слайд № 6

Слайд № 7

Слайд № 8

39-40

Домашнее задание:

1. материал лекции;

2. разработать схему сайта по теме проекта, аналогичную схемам из задания 1.

Записывают домашнее задание

Домашнее задание записано на доске.