Отримання знань

дистанційна підтримка освіти школярів


Посилання. Внутрішні посилання

Ще одним новим для вас поняттям є гіперпосилання (рос. гиперссылка).

Книга містить декілька листків, так і ваша сторінка може складатися з декількох документів (наприклад, сторінки фотографій, друзів, про вас). Як у книзі є титульна сторінка, так одна зі сторінок має бути головною. Щоб побачити інформацію на наступній сторінці у книзі, треба її перегорнути, а на сайті при цьому використовується гіперпосилання. За допомогою гіперпосилань ми пов'язуємо декілька сторінок. Наприклад, з головної сторінки можна перейти до сторінки фотографій, з цієї сторінки можна перейти назад на головну або на сторінку друзів тощо.

 

Посиланням може бути текст (фраза або одне слово) або картинка.

<a href="адреса переходу">виділений фрагмент текста</a>

Як параметр [адреса переходу] може використовуватися декілька типів аргументів. Найпростіше - це задати ім'я іншого HTML-документа, до якого потрібно перейти. Наприклад:

<a href="p2.html">Name</A>

Такий фрагмент HTML-тексту приведе до появи в документі виділеного фрагмента Name, при натисненні на який в поточне вікно буде завантажений документ p2.html.

 

Посиланням може бути і картинка. Принцип той самий, що і у випадку з текстом, тільки у тезі <a></a> ставиться не текст, а картинка:

<a href="p2.html"><img src="r1.bmp"></a>

 

Завдання 4. Додайти у першу сторінку р1.html гіперпосилання. Перевірте роботу у браузері. Зробіть кругові посилання (з р1.html   до р2.html, з р2.html до р3.html, з р3.html до р1.html).

Завдання 5. Намалюйте простий малюнок у Paint. Збережіть у папці html. Перевірте малюнок у якості гіперпосилання на сторінці p1.html.

 

 !    Зазвичай посилання набувають синього кольору. Але і це можна змінити. Для встановлення кольору використовуються атрибути тегу body:  для посилання (link), пройденого посилання (vlink), активного посилання (alink) :
<body   link="колір"  vlink="колір"  alink="колір">

Наприклад:
<body  link="red"  vlink="blue"  alink="white">

 

 

Внутрішні посилання

Іноді виникає така ситуація, коли потрібно зробити посилання не на інший документ, а всередині того ж документа - закладку, або її ще називають якорем. Наприклад, на сторінці розмішені вірші, а зверху сторінки є посилання на кожен з них. Така навігація дуже зручна. Створюється вона за допомогою атрибуту name (ім'я закладки) тега A:

Цей спосіб дуже схожий на використання закладок у книжках, щоб швидко перейти до необхідної інформації.

<a href="#virsh1">Посилання на перший вірш</a><br>

<a href="#virsh2">Посилання на другий вірш</a><br>

<a href="#virsh3">Посилання на третій вірш</a><br><br>

<h3><a name="virsh1">Вірш перший</a></h3>

<pre>

... тра-ля-ля 1...

</pre>

<br><br><br><br><br><br><br><br><br><br><br><br>

<h3><a name="virsh2">Вірш другий</a></h3>

<pre>

... тра-ля-ля 2...

</pre>

<br><br><br><br><br><br><br><br><br><br><br><br> 

<h3><a name="virsh3">Вірш третій</a></h3>

<pre>

... тра-ля-ля 3...

</pre>

<br><br><br><br><br><br><br><br><br><br><br><br> 

Цей приклад містить три закладки virsh1, virsh2, virsh3. Це зроблено так:

<a name="virsh1">Вірш перший</a>

Тоді у тезі a для переходу на цей вірш треба вказати ім'я закладки (або так звану внутрішню адреса переходу):

<a href="#virsh1">Посилання на перший вірш</a>

Адреса починається знаком #, а далі йде ім'я  закладки - virsh1.

 

Так само ми можемо посилатися на закладку іншого документа, тоді посилання буде виглядати так ім'я документа#ім'я закладки:


<a href="avtor.html#virsh1">Посилання на перший вірш іншого документа</a>

 

! 

 Якщо ви, наприклад, напишете ім'я закладки малими літерами virsh1, а, посилаючись, вкажете ім'я великими літерами VIRSH1, то браузер вважатиме їх двома різними іменами.

 

Завдання 6. Перевірте роботу внутрішніх посилань на сторінці p1.html.

 

 

Використані джерела інформації:

1. Алленова Н. HTML - первые шаги // http://postroika.ru.

2. Браун М., Хоникатт Дж. Использование HTML 4, 4-е издание. Специальное издание: Пер. с англ. - М.; СПб.; К.: Издательский дом «Вильямс», 1999. - 784с.


В системі: гості - (1); користувачі - (0)