Отримання знань
дистанційна підтримка освіти школярів
Посилання. Внутрішні посилання
Ще одним новим для вас поняттям є гіперпосилання (рос. гиперссылка).
Книга містить декілька листків, так і ваша сторінка може складатися з декількох документів (наприклад, сторінки фотографій, друзів, про вас). Як у книзі є титульна сторінка, так одна зі сторінок має бути головною. Щоб побачити інформацію на наступній сторінці у книзі, треба її перегорнути, а на сайті при цьому використовується гіперпосилання. За допомогою гіперпосилань ми пов'язуємо декілька сторінок. Наприклад, з головної сторінки можна перейти до сторінки фотографій, з цієї сторінки можна перейти назад на головну або на сторінку друзів тощо.
Посиланням може бути текст (фраза або одне слово) або картинка.
<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с.