Створення та використання гіперпосилань

Одним з найважливіших понять для HTML–документів є гіпертекстові посилання, що дозволяють користувачу здійснювати перехід від однієї Web–сторінки до іншої. Документ, який містить гіперпосилання, стає зв'язаним і структурованим, що дозволяє користувачу одержувати необхідну йому інформацію максимально швидко і зручно. Гіперпосилання можна використовувати також для переміщення на інші Internet­–ресурси, наприклад, графіку, відео– і аудіозображення, електронну пошту або на різні частини чи розділи одного і того ж документа.

Відповідно гіперпосилання поділяють на внутрішні та зовнішні. Внутрішні посиланя – це посилання в межах однієї Web-сторінки. Такі посилання використовують, щоб швидко переміщатися між її розділами. Зовнішні посилання ­– це посилання на інші Web-сторінки чи ресурси Internet.

Для організації посилання використовується вказівник посилання. Після клацання клавішею мишки на вказівнику, браузер завантажує документ чи Internet­–ресурс, на який вказує посилання, або здійснює перехід на певну частину або розділ того ж документа.

Посилання складається з двох частин. Перша з них – це те, що користувач бачить на Web–сторінці; вона називається вказівником посилання (anchor). Другою частиною посилання є URL–адреса Web–сторінки чи ресурсу Internet, що завантажиться при клацанні мишкою на вказівнику посилання.

Для організації посилань використовують парний тег < А >, який схематично записується таким чином:

<A HREF=URL–адреса> вказівник посилання </A>.

Наприклад,

<A HREF= “exemple.html”> перегляньте приклад </A>.

Вказівником посилання може бути слово, група слів або зображення. Відповідно вказівники бувають двох типів ­– текстові і графічні.

Текстові вказівники ­– це переважно слово або декілька слів, що під час перегляду браузером виділяються на екрані підкресленням. Колір текстового вказівника може регулюватися автором і налаштуваннями програми перегляду. Графічні посилання використовують в якості вказівника графічне зображення. За принципом дії графічні посилання нічим не відрізняються від текстових.

Вказати адресу посилання можна як абсолютну або як відносну. Відповідно розрізняють абсолютні та відносні посилання.

URL–адреса, що повністю визначає доменне ім’я сервера (IP–адресу), каталог і файл, називається абсолютною. Цей тип адресації найчастіше використовується при створенні гіперпосилань на інший Web–сервер.

Наприклад:

<A HREFF=“http://www.firma.com/ibm/computers.html”> Комп’ютери компанії IBM </A>

– створюється гіперпосилання на Web–сторінку, розміщену за адресою: http://www. firma.com/ibm/computers.html.

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

Так, щоб задати посилання на Web–сторінку, розміщену в одному каталозі з активною Web–сторінкою, можна задавати тільки назву файлу. Наприклад, за допомогою тега::

<A HREFF=“computers.html”> Комп’ютери виробництва IBM </A>

створюється гіперпосилання на файл computers.html, розташований в одному каталозі з активною Web–сторінкою.

Якщо файл знаходиться у вкладеному підкаталозі, то необхідно вказати шлях до файла від поточного каталогу. При цьому використовують символ “./”. Для позначення файлів, що розміщені на один рівень вище – символ “../”, а на два рівні “../../”.

Наприклад за допомогою тега:

<a href="ff./m4.htm"> Фірма Світоч </a>

створюється гіперпосилання на файл m4.htm, який знаходитися у вкладеному підкаталозі ff.

Якщо вказівником гіперпосилання є зображення, то тег < А > записуютьу вигляді:<A HREF=URL–адреса> <IMG SRC=”адреса файла­–зображення”> </A>.

Наприклад, за допомогою тега:

<A HREF=”computers.html ”> <IMG SRC=”small.gif ”> </A>

буде розміщено зображення (файл small.gif), що є гіперпосиланням на файл computers.html.

Кореневозалежні – це посилання, які застосовуються, якщо на одному Web–сервері розміщено декілька Web–сайтів. В цьому випадку шлях повинен містити маршрут: коренева папка сайту – інший файл. На початку шляху в кореневозалежних посиланнях ставлять символ “|”.

Наприклад, за допомогою тега:

<A HREFF=“|ibm/computers.html”> Комп’ютери виробництва IBM </A>.

задано шлях до файлу computers.html, що розміщений в папці ibm, яка міститься у кореневій папці сайту.

Інколи зручно зробити посилання на різні частини або розділи одного і того ж документа. Для цього спочатку необхідно за допомогою спеціального маркера (якоря) позначити місце, куди відбуватиметься перехід. Маркеру потрібно надати ім’я, яке починається символом “#”. Наприклад:

<A name=#маркер>.

Для переходу на позначене місце використовують гіперпосилання у вигляді:<A HREF= “#маркер ”> вказівник посилання </A>.

Наприклад, якщо необхідно зробити посилання на текст наступного розділу документу, необхідно:

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

<A name=#наступний>

- в межах біжучого розділу вставити гіперпосилання у вигляді:

<A HREF= “#наступний> наступний розділ </A>.

Проілюструємо технологію побудови Web–вітрини, що містить рекламу турис­­тичної фірми “Крокус”. Використовуючи команди мови HTML, створимо код го­лов­ної Web-сторінки сайту (файл Web_witryna.html), який може бути, наприклад таким:

<HTML>

<Title> Фірма Крокус </Title>

<Body Bgcolor=#00FF00>

<Font Face="Arial" size=5 color="navy">

<h1 align=center> Фірма Крокус організовує туристичні тури та екскурсії</h1>

<h2 align=center>адреса: м. Київ, вул. Паркова 35 </h2>

<h3 align=center>дата створення (15.07.2004 р.) </h3>

<P><P>

<img src="Im1.jpg"Height=400 width=360 HSPACE=70 VSPACE=50 style="float:left">

<p Align=lefn> <a href="c2.html">Тури по Україні</a>

<p Align=lef><a href="c1.html">Тури по Європі</a>

<p Align=left><a href="c3.html">Екзотичні тури</a>

<p Align=left><a href="c4.html">Екcкурсії містами Галичини</a>

<p Align=left><a href="c3.html">Екзотичні тури</a>

<p Align=left><a href="c4.html">Подорожі в Карпати</a>

</Font>

</Body>

</HTML>

 

Відображення Web-сторінки з таким кодом у браузері подано на рис.9.

Код файла с1.html, на який побудовано гіперпосилання у файлі Web_witryna.html, може бути, наприклад таким::

<HTML>

<Title> тури по Європі </Title>

<Body Bgcolor=#00FF00>

<Font Face="Arial" size=7 color="black">

<p Align=center>

<Table wiDth=90% border=3 HEIGHT= 70% bordercolor=navy >

<Tr><TH>№ п/п</TH><TH>назва країни</TH><TH>Вартість туру</TH><TH>тривалість туру</TH></Tr>

<Tr><Td align=center> 1</Td><Td align=center>Німеччина</Td><Td align=center>30000 грн.</Td><Td align=center>7 днів</Td></Tr>

<Tr><Td align=center> 2</Td><Td align=center>Франція</Td><Td align=center>20450 грн.</Td><Td align=center>6 днів</Td></Tr>

<Tr><Td align=center> 3</Td><Td align=center>Угорщина</Td><Td align=center>2800 грн.</Td><Td align=center>8 днів</Td></Tr>

</Table><P>

</Font>

</Body>

</HTML>

Відображення Web-сторінки з таким кодом подано на рис.10.

Рис.10.Файл с1 .html після відкриття у браузері

 

 

Лекція №6