Ссылки на объект в той же странице

Лабораторная работа №5 по HTML

Тема: Создание гиперссылок (ссылок).

Ссылки на отдельные документы

Ссылкой на другие документы (части странички) может быть текст (фраза, слово), а может быть и картинка.

<A HREF=”?”> текст (фраза или рисунок) для ссылки </A> -команда, которая задает ссылки на документы, вместо знака вопроса проставляется путь и полное название документа, куда мы будем перемещаться по ссылке (принципы прописывания пути здесь такие же как в случае с картинками).

Ссылки на объект в той же странице - student2.ru

Примеры:

<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.

 
  Ссылки на объект в той же странице - student2.ru

Ссылки на объект в той же странице.

<A NAME="?"></A> - атрибут NAME позволяет ставить закладки в документе, чтобы потом можно было строить ссылки именно на эти закладки, вместо знака вопрос задается название закладки.

<A HREF=”#?”>наименование ссылки на закладку</A>, вместо вопроса проставляется название закладки, определенное в NAME

 
  Ссылки на объект в той же странице - student2.ru

Например:

(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) Самостоятельно создайте произвольную закладку в центре документа и постройте ссылку на этот объект.

Ссылки на объект в той же странице - student2.ru

2. Ссылки на объект в той же странице - student2.ru Цвет ссылок.

в теле тега BODY
атрибут LINK – основной цвет ссылок

Наши рекомендации