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

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

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

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

Методические указания по выполнению задания:

1. В папке HTML создайте папку Lesson4, в ней мы будем сохранять все полученные в ходе нашего занятия web-страницы.

2. Гиперссылки являются основным достоинством Web-страниц. Они – ядро Всемирной паутины, то, без чего она так и осталась бы еще одним средством отображения документов. Именно гиперссылки создают уникальную интегрированность Сети.

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

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

Гипертекст выделяется цветом, чтобы его можно было отличить от обычного текста. Цвет выделения устанавливается удаленным пользователем в своем браузере, но мы имеем возможность явно указывать, какой цвет использовать для выделения гиперссылок (этот вопрос будет рассмотрен позже). При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа.

3. В HTML для перехода от одного фрагмента текста к другому применяется тэг <А> со своим закрывающим двойником </А>. <A HREF="[адрес перехода]">Выделенный фрагмент текста</A>

При этом открывающий тэг обладает атрибутом HREF, значение которого определяется URL (или адресом) того Интернет - ресурса, на который указывает создаваемая гиперссылка. В качестве значения URL может использоваться несколько типов аргументов. Самое простое – это задать имя другого HTML-документа, к которому нужно перейти.

Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

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

На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Для этого Вам придется, например, ввести в свой HTML-документ примерно такой фрагмент: <A HREF="http://www.mysite.com/content/about.htm">Мой сайт</A>. Этот URL указывает на файл с наименованием about.html, который распо­лагается в каталоге content, находящемся в файловом пространстве Web-сервера с доменным именем www.mysite.com. При этом передача пользовате­лю содержимого искомого файла будет проходить с использованием прото­кола HTTP.

4. Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов: <A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>.Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов FTP и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.

5. <A HREF="mailto:user@mail.box">Послать письмо</A>. Если пользователь совершит переход по такой ссылке, то одновременно с активизацией гиперссылки запустится почтовая программа, установленная пользователем в системе по умолчанию, которая автоматически открывает окно создания электронного письма с уже заданным адресом получателя. В строке To: («Куда») окна почтовой программы будет указано user@mail.box.

6. Создайте в Блокноте новый файл и наберите в нем текст HTML-документа:

7. Сохраните этот файл под именем page1.htm в папке Lesson4 и посмотрите его в окне браузера.

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

Откройте файл page2.htm из папки Lesson2 в браузере и измените размеры окна так, чтобы весь текст в нем не помещался (например, сделайте его размером в 1/4 от экрана монитора).

9. В данном документе имеется два раздела: «Физические стили» и «Логические стили». Допустим, что нам необходимо осуществить быстрый переход от начала документа к любому из разделов.

10. Для того чтобы в документе мы могли использовать локальные гиперссылки, необходимо сначала дать имена тем фрагментам документа, на которые они будут указывать, т.е. создать анкеры. Для этого в начало каждого фрагмента (или раздела) мы должны поместить тэг <A> с атрибутом NAME. При этом сама гиперссылка будет создаваться с использованием несколько измененного значения атрибута HREF.

В нашем примере необходимо создать такие два анкера:

<A NAME="Fizic">Физические стили</A>

<A NAME="Logic">Логические стили</A>

Слова «Физические стили» и «Логические стили» при этом никак не будут выделены в тексте документа, им просто будут заданы некоторые имена, на которые мы будем ссылаться, т.е. указывать в качестве значения атрибута HREF.

11. Откройте ифайл page2.htm из папки Lesson2в Блокноте. Найдите в нем два заголовка второго уровня и создайте анкеры:

<H2><A NAME="Fizic">Физические стили</A></H2>

<H2><A NAME="Logic">Логические стили</A></H2>

12. Затем в начале документа нужно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа, т.е. каждый пункт оглавления будет ссылкой на соответствующий раздел. При этом в качестве значения атрибута HREF будет использоваться имя того анкера, на который будет осуществляться переход при нажатии на данную ссылку, только со знаком решетки перед ним.

13. Вставьте после заголовка первого уровня, содержащего текст «Шрифтовое выделение фрагментов текста», оглавление:

<P><A HREF="#Fizic">Физические стили</A><BR>

<A HREF="#Logic">Логические стили</A></P>

14. Сохраните файл под тем же именем и посмотрите его в браузере. Проверьте, осуществляется ли переход по локальным гиперссылкам.

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

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

Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно.

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

16. Ссылкой может быть и изображение. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка. Измените созданный ранее HTML-документ page1.htm из папки Lesson4.

17. Теперь посмотрите в браузере, что у нас получилось. Картинка picture.gif стала ссылкой. Если вы заметили, то вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"

18. Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.). Принцип создания ссылки в этом случае будет точно таким же.

19. Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением, когда нажимаешь на маленькую картинку, то загружается большая картинка в том же или в новом окне. Как это делается? Делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg). В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне. Дело в том, что у тэга <a></a> есть параметр target,который указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера.

20. Скопируйте в папку Lesson4 файлы small.jpg и big.jpg (\\tserver\students\ВКТ\ИС\Технология работы с ПО\Файлы для работ).

21. Внесите следующие изменения в HTML-документ page1.htm из папки Lesson4.Сохраните HTML-документ под тем же именем и просмотрите в браузере.

Внеаудиторная самостоятельная работа:

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