Занятие №15 Лабораторная работа № 12
по дисциплине «Web-проектирование».
для специальности
2 – 40 01 01 «Программное обеспечение информационных технологий».
Инструкционно-технологическая карта
Тема: Создание гиперссылок на web-странице.
Цель работы: Сформировать умения использования изображения на HTML-странице. Сформировать умения создавать ссылки, используя графические изображения. Обучить объединять HTML-страницы в сайт.
Время на выполнение работы: 2 часа
Этапы работы:
Ознакомиться с теоретическими сведениями.
Выполнить задания, предложенные преподавателем.
Ответить на контрольные вопросы.
I. Краткие теоретические сведения Ссылка - тег a
Ссылка - одно из важнейших понятий для html-документов
Тег-контейнер <a></a>. А за то, куда направить пользователя по щелчку - его атрибут - href. Рассмотрим подробнее:
<html>
<head>
<title>Ссылки в html</title>
</head>
<body>
Посетите
<a href="http://www.yandex.ru">
поисковую систему Яндекс
</a>
</body>
</html>
Результат:
Посетите поисковую систему Яндекс
Абсолютная и относительная адресация
Существуют два способа задания URL-адреса: абсолютный и относительный.
Рассмотрим на примере. Пусть у нас есть сайт с зарегистрированным доменом - mysite.ru. Все страницы сайта у нас хранятся на сервере в двух папках public и private. При этом в папке public содержатся файлы index.html и articles.html, а в папке private - price.html и cinema.html. Т.е. наш сайт имеет следующую структуру:
При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. В нашем примере абсолютный адрес страницы index.html следующий:
<a href="http://www.mysite.ru/public/index.html">
А страницы cinema.html:
<a href="http://www.mysite.ru/private/cinema.html">
При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Например, если мы хотим разместить ссылку со страницы index.html (исходный файл) на страницу articles.html, то, учитывая, что обе страницы лежат в одном каталоге (т.е имеют один уровень), она будет выглядеть следующим образом:
<a href="articles.html">
Если же мы захотим сделать ссылку со страницы index.html на страницу price.html, то, учитывая, что страницы лежат в разных каталогах, она будет выглядеть следующим образом:
<a href="../private/price.html">
Две точки вначале означают подняться в иерархии папок на уровень выше.
Все ссылки на внешние источники имеют абсолютный адрес. Внутренние ссылки (в пределах сайта) можно задавать любым способом. Какой способ задания адреса выбрать решать вам. У каждого есть свои плюсы и минусы. Если, используя абсолютную адресацию, вы решите поменять домен, то вам придется переделывать все ссылки на вашем сайте. При относительной адресации этого делать не придется, при условии сохранения структуры папок.
Ссылки в новом окне
Вы знаете, что при щелчке по ссылки, документы могут открываться как в текущем окне, так и в новом. Этим процессом можно управлять. По умолчанию ссылки загружаются в то же окно, но если указать параметр target="_blank", то ссылка загрузится в новое окно.
<html>
<head>
<title>Ссылки в новом окне</title>
</head>
<body>
Посетите
<a href="http://www.yandex.ru" target="_blank">
поисковую систему Яндекс
</a>
</body>
</html>
Использование якорей
Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Например, если вы щелкните по ссылке, то окажитесь в начале страницы.
Для таких переходов следует создать пустую ссылку с параметром name там, куда следует перейти. И ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти. На примере будет понятнее:
<html>
<head>
<title>Ссылки в html</title>
</head>
<body>
<p><a name="top"></a>
первый абзац, в котором стоит пустая ссылка - якорь
</p>
<p>второй абзац</p>
<p>третий абзац</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>
В результате, щелкнув по ссылке "Наверх", вы попадете в начало первого абзаца. Чтобы результат был виден, сделайте тексты второго и третьего абзацев длинными.
Подсказки
У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в качестве подсказки, если подвести курсор мыши к ссылке.
Пример ссылки со всеми ее параметрами:
<html>
<head>
<title>Ссылки в html</title>
</head>
<body>
Посетите
<a href="http://www.yandex.ru"
target="_blank"
title="переход на Яндекс">
поисковую систему Яндекс
</a>
</body>
</html>