Ссылки на объект в той же странице
Лабораторная работа №5 по HTML
Тема: Создание гиперссылок (ссылок).
Ссылки на отдельные документы
Ссылкой на другие документы (части странички) может быть текст (фраза, слово), а может быть и картинка.
<A HREF=”?”> текст (фраза или рисунок) для ссылки </A> -команда, которая задает ссылки на документы, вместо знака вопроса проставляется путь и полное название документа, куда мы будем перемещаться по ссылке (принципы прописывания пути здесь такие же как в случае с картинками).
Примеры:
<a href="prf.html">мои фотографии</a> - документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html
<a href="photos/prf.html">мои фотографии</a>- документ лежит в поддиректории /photos
<a href="http://www.homepage.ru/prf.html">мои фотографии</a> - ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ
<p><a href="http://www.homepage.ru/prf.html"><img src=”фото.jpg” width =60 height=52 border=4></a></p> - пример ссылки с рисунка (графическая ссылка)
ЗАДАНИЕ 1:
1. Создайте новый документ lab5.html в той же директории (папке), где находится документ lab4.html, созданный ранее.
2. Файл lab5.html будет содержать 3 картинки в ряд, размещенных по центру страницы, размером 130х60 и рамкой в 4 экранных пиксела.
3. Введите в конце документа lab4.html фразу "Хочешь посмотреть другие картинки?"
4. Создайте ссылку с этой фразы документа lab4.html на документ lab5.html по примеру:
<br><a href="lab5.html"> Хочешь посмотреть другие картинки? </a>
5. Посмотрите и проверьте действие вашей ссылки в браузере.
6. Самостоятельно, используя примеры выше, создать ссылку со всех рисунков файла lab5.html на файл lab4.html.
Ссылки на объект в той же странице.
<A NAME="?"></A> - атрибут NAME позволяет ставить закладки в документе, чтобы потом можно было строить ссылки именно на эти закладки, вместо знака вопрос задается название закладки.
<A HREF=”#?”>наименование ссылки на закладку</A>, вместо вопроса проставляется название закладки, определенное в NAME
Например:
(1) - <a name=”пылесосы”></a>
<A HREF="#пылесосы">переход на слово пылесосы в тексте</A>.
(2) - <a name=”top”></a> - ссылка на начало страницы
<a href=”#top”>Вернуться к началу документа </a>
(3) - <a href=”products.html#пылесосы”>Модели пылесосов</a> -
указание метки страницы, на которую направлена ссылка из другого файла или страницы
ЗАДАНИЕ 2:
1) Откройте файл index.htm.
2) Используя буфер создайте 4 копии основного текста от тега <body> до </body> (без заголовков).
3) Создайте 2 закладки <a name="top"></a> и <a name="bottom"></a> в начале и в конце документа соответственно
4) Занесите в текст документа гиперссылку «Вернуться к началу документа» и ссылку «Перейти в конец документа». В результате первой ссылки должно происходить перемещение в начало документа, а при выборе второй ссылки – в конец исходного документа (см. примеры выше).
5) Проверьте результаты в браузере.
6) Самостоятельно создайте произвольную закладку в центре документа и постройте ссылку на этот объект.
2. Цвет ссылок.
|