Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Опорний кнспект.doc
Скачиваний:
1
Добавлен:
30.05.2020
Размер:
9.78 Mб
Скачать

4. Текстові гіперпосилання

Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами HTML-документа він має звернутися.

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

Для створення посилань застосовується елемент <A>|, званий елементом прив'язки, або, іншими словами, якірним елементом. Назва елементу <A>| походить від першої букви слова anshor| – якорь|, і мета його відобразити вміст посилання на екрані і вказати браузеру|, до якого ресурсу необхідно перейти при виклику посилання. Його значенням має бути адреса URL, на яку вказує посилання. Текст посилання розташовують м і ж тегами < А > і < / А >

Тег <A>| повинен виконувати просте завдання: відображати вміст на екрані і указувати браузеру|, до якого ресурсу необхідно перейти при клацанні на посиланні. Усередині тега| <A>| ставиться атрибут href|, за допомогою якого визначається цільовий ресурс, а усередині контейнера розміщується вміст посилання. Початкова закладка може бути у вигляді тексту, слова, пропозиції, малюнка, і обов'язково виділяється кольором і підкресленням.

Якщо веб-сторінка, на яку вказує посилання, розміщена на іншому веб-сайті, то значенням атрибута HREF має бути повна URL-адреса з назвою протоколу включно; такі посилання називають зовнішніми.

Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.

Гіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення я к о р я також використовують теги < А > і </А>, але замість атри­бута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.

Для створення посилання на встановлений якір потрібно у тегу <А> зазначити його ім'я в кінці адреси URL після імені докумен­та, відокремивши його символом #.

Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.

Посилання на мітку всередині поточного документа задають так:

<А HREF="#назва_мітки">Текст посилання</А>.

Якщо в атрибуті HREF задати адресу електронної пошти зі словом m a i l t o : перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу.

У прикладі, який наводиться нижче, розглянуто застосування гіперпосилань різного типу.

Приклад 1. HTML-документ, в якому використовуються гіперпосилання та якорі

<HTML>

<HEAD>

<TITLE>Посилання та якорі</TITLE>

</HEAD>

<BODY>

Нові версії стандартних програм операційної системи

та найважливіші драйвери

можна знайти на веб-сайті компанії

<А HREF="http://www.microsoft.com/">Microsoft</A>.

<P>A тепер можна перейти на

<А HREF="main.htm"> мою особисту сторінку</А>.

<Р>Про те, як зв'язатися з автором, розповідається

в <А HREF="#olenap"> кінці цієї сторінки</А>

<BR><BR>

Можна використати матеріали, що розміщені

<А href="text.doc"> в цьому текстовому документі.</А>

<BR><BR>

<А NAME="olenap"

HREF="mailto:olena@zirka.Iviv.ua">01ena@zirka.lviv.ua</A>

</BODY>

</HTML>

Такий вигляд матиме HTML-документ після його відтворення браузером (мал.1).

Мал. 1 Гіперпосилання

У цьому прикладі слово «Microsoft» міститься у тегу зовнішнього гіперпосилання, а текст «мою особисту сторінку» — у тегу внутрішнього посилання. Текст «кінці цієї сторінки» розміщений у тегу посилання на якір, а «в цьому текстовому документі» — у тегу гіперпосилання з атрибутом HREF, в якому задано зв'язок не з веб-сторінкою, а з текстовим документом, котрий збережений у тій самій папці, що й поточний HTML-документ. Текст «01ena@zirka.lviv.ua» вміщено у тег, що описує мітку я к о р я , а в атрибуті HREF зазначено адресу електронної пошти.

Якщо відвідувач веб-сторінки скористається зовнішнім гіперпосиланням Microsoft, то відкриється сторінка, що міститься за адресою: http://www.microsoft.com/. Після клацання гіперпосилання мою особисту сторінку відкриється веб-сторінка, записана у файлі main.htm, який міститься у тій самій папці, що й поточна сторінк а . Після к л а ц а н н я внутрішнього посилання в цьому текстовому до-кументі відкриється вікно з текстовим документом text.doc, що міститься у поточній папці. Якщо скористатися посиланням на якір кінці цієї сторінки, то зображення поточної веб-сторінки зміститься так, що текст мітки «01ena@zirka.lviv.ua», з якою зв'язаний якір, буде розміщений у видимій на екрані частині документа.

Водночас текст «Оlena@zirka.lviv.ua» є гіперпосиланням, скориставшись яким, користувач зможе надіслати листа за допомогою настроєної на своєму комп'ютері електронної пошти за вказаною в атрибуті HREF адресою — olena@zirka.lvlv.ua.

Розглянемо ще один приклад створення текстових гіперпосилань. Припустимо, що у певній папці збережено два HTML-документи, які описують два напрями роботи фірми, — 1.html та 2.html. Створимо веб-сторінку з переліком гіперпосилань, кожне з яких ілюструватиме один із напрямів роботи фірми:

<HTML>

<TITLE>Моя фірма</TITLE>

<BODY>

<Н1><А HREF="l.html">Наша продукція</А></Н1>

<Н1><А HREF="2.html">Наші замовники</А></Н1>

</BODY>

</HTML>

У цьому прикладі теги гіперпосилань містяться в тегах заголовків першого рівня. Тексти гіперпосилань будуть розташовані в окремих рядках і оформлені як заголовки першого рівня.

За умовчанням текстові гіперпосилання виділені синім кольором і підкреслені, а якщо ними вже скористалися, то темно-червоним. Для зміни цих кольорів додамо відповідні атрибути до тегу <BODY>:

<BODY LINK=magenta ALINK=yellow>.

Це означає, що після першого завантаження веб-сторінки всі гіперпосилання будуть фіолетового кольору, а якщо відвідувач скористається одним із них, то колір його тексту стане жовтим (мал. 2). Це зручно, коли на веб-сторінці є багато посилань, і відвідувач бажає по черзі переглянути їх: тоді надання іншого кольору відвіданим гіперпосиланням дає змогу систематизувати такий перегляд.

Мал. 2

Я к щ о додати до тегу < B O D Y > атрибут BGCOLOR=cyan, то колір тла веб-сторінки зміниться на світло-бірюзовий.

Колір посилання залежить від того, в якому стані знаходиться посилання:

  • невідвідане| посилання (link|)- це посилання на сторінку, про відвідини якої в браузере| немає відомостей, іншими словами це колір посилання в яку ще не заходили;

  • відвідане посилання (vlink|) - це посилання на сторінку, відомості, про відвідини якої є в браузере|.

  • активне посилання (alink|) - це посилання, на якому клацають мишею у нинішній момент.

Колір вживаних посилань задається за допомогою атрибутів link|, vlink|, alink|.

Наприклад:

<body| bgcolor="#FFFFFF|" text="black|" link="#FF0000|" alink="#00FF00|" vlink="#0000FF|">

Колір посилань можна задавати в символьному еквіваленті, шістнадцятиричному коді або форматі колірної моделі RGB|.

text-decoration="none|"

В даному прикладі колір заданий в шістнадцятиричному коді (від 00 до FF| з приставкою # (читається "дієз")).

Звернете увагу на те, що посилання за умовчанням окрім відмітного кольору, ще і підкреслюються. Проте деякі дизайнери відміняють підкреслення, чим самим ставлять в скрутне положення клієнтів. Відвідувачі сайтів звикли до того, що посилання підкреслюються і можуть зрозуміти, в цьому випадку, де посилання, а де просто виділене слово для того, щоб на нього звернули увагу. Приклад непідкресленого посилання, але з використанням задания цвета посилання.

Завдання кольору посилань за допомогою каскадних таблиць стилів розберемо нижче.

Проста програма створення посилання виглядає так:

< а href| =”адрес ссылки”>комплексні| з’єднання</ а >

Вміст посилання це виділене слова “комплексні з'єднання”. У тексті це слово відрізнятиметься від інших кольором, тому елементи посилань краще всього розміщувати, не перериваючи тексту документа пропусками і перенесеннями рядків. Текст повинен бути коротким і змістовним.

Задавати посилання можна:

• за абсолютною адресою;

• по відносному;

• по внутрішньому.