Урок №3. За пределами html-страницы.

Цели работы:
1.Знакомство с принципом работы гиперссылок.
2.Рассмотрение внешних и внутренних ссылок, ссылок на различные ресурсы сети Интернет.
3.Закрепление изученного материала на примерах.

Связывание.

Если HTML - язык разметки гипертекста, то что же такое этот самый гипертекст?
Гипертекст-текст с перекрестными ссылками. В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. Ссылка состоит из двух частей. Первая из них – это то, что вы видите на Web – странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес (Universal Resourse Label-универсальный ярлык ресурса)). При щелчке мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL - адресом. Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который осуществляется переход. Оба действия выполняются с помощью тэга-контейнера <a>. Этот тэг имеет единственный параметр href, значением которого является URL – адрес. В HTML переход от одного документа к другому задается по следующей схеме:
<a href="URL - адрес">Указатель ссылки</a>
В гиперссылке значением параметра href может являться URL – адрес различных ресурсов Internet . Самое простое — это задать имя другого HTML-документа, к которому нужно перейти.
Например: <a href="oglavl.htm">Перейти к оглавлению</a>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ oglavl.htm. Разберём простой пример (пример 3.1) связывания двух html – документов, сделанных вами на предыдущих работах. Откройте документ сделанный Вами на Уроке №1 (Пример 1.1 - "my.htm"), когда перед вами появится его содержание, щёлкните 1 раз правой кнопкой мыши по нему - в раскрывшемся списке выберите "просмотр в виде HTML" – появится HTML-код, в который Вы вставите гиперссылку. В данном примере она располагается перед тэгом </body> и имеет вид: <a href="xxx.htm">Дальше</a>

Пример 3.1. Организация гиперссылок.

После вставки ссылки закройте окно и сохраните изменения. Проверьте правильность выполнения, снова загрузив измененный документ – если всё правильно сделано слово Дальше отобразится синим цветом и станет подчёркнутым – теперь оно является гиперссылкой на документ "xxx.htm" из Урока №2 (пример 2.2). Имя файла на который ссылаетесь можно писать и без кавычек.

Задание 3.1: Аналогичные действия проделайте с примером 2.2, вставив перед </body> гиперссылку на первый документ ("my.htm") - <a href = "my.htm">Назад</a>. В результате Вы получите два связанных HTML-документа, если всё проделано правильно, то при нажатии на гиперссылку загрузится второй документ ("xxx.htm") и, наоборот, при нажатии в загруженном документе на слово Назад произойдёт переход на первую страницу ("my.htm").

Внутренние ссылки.

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на имеющиеся разделы. Для организации внутренней ссылки надо создать указатель, определяющий место расположения. Таким указателем является параметр name в тэге <a>. Например, Вам надо сослаться в Вашем большом документе на раздел "Теория"(theory). В HTML – коде перед этим разделом надо будет вставить следующую строку: <a name=theory></a> Содержимое тэга <a> отсутствует, так как нет необходимости как-то выделять текст. После того как место назначения определено, приступаем к созданию ссылки на него. Для задания внутренней ссылки перед указываемым именем ставится префикс #, говорящий о том, что это внутренняя ссылка <a href="#theory">Теория</a>.

"Прицельные" ссылки.

Часто бывает нужным задать переход не просто к другому документу, а к конкретному месту в нем. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку или анкер (якорь), подобно тому, как это делается для внутренних ссылок. Рассмотрим пример. Допустим, нам надо из нашего документа перейти к определенному разделу, например "Практика" в другом документе book.htm. Будем поступать так. В исходном документе внутри гиперссылки добавим анкер, например, PR, следующим образом: <a href=book.htm#PR>Практика</a>. В документе book.htm перед абзацем "Практика" ставим якорь: <a name=PR></a>. Все готово. Можете проверить на собственных страницах.

Ссылки на некоторые ресурсы Интернета.
Web-страница: http://sitename (Например, http://www.mysite.ru)
e-mail: mailto:address (Например, mailto:me@list.ru)
FTP: ftp://sitename (Например, ftp://ftp.mysite.ru)
Например, ссылка на почтовый ящик my@rambler.ru может иметь следующий вид: <a href="mailto:my@rambler.ru">Пишите</a>.

Задание 3.2: Создайте два HTML-документа на произвольную тему, свяжите их гиперссылками, как показано в примере 3.1. Один из документов должен содержать внутреннюю ссылку и "прицельную" ссылку на второй документ. Для проверки ее работы целесообразно ввести большой фрагмент текста, либо просто заполнить страничку каким – либо символом. Отметим, что внутренняя ссылка не покажет своего действия, если текст в Вашем документе не выходит за пределы видимости.

Для обращения к следующему занятию Вам необходимо пройти тест