Застосування гіперпосилань

Гіперпосилання – це один з найважливіших елементів HTML. З його допомогою користувачі мають змогу здійснювати переходи з одного місця документу до іншого, а також між сторінками Web-сайту та між документами різних Web-сайтів.

Гіперпосилання в HTML задається елементом А у вигляді пари тегів <A> і </A>між якими поміщається гіперпосилання зазвичай у вигляді тексту чи рисунка. Назва елемента походить від початкової літери англійського слова Anchor – якір.

Всередині тега <A> обов’язково застосовується атрибут href, з допомогою якого вказується текст назви посилання або рисунок. Наприклад:

<A href=”rest.html”> Довідник </A>.

На Web-сторінці це посилання буде подане у вигляді тексту. Посилання робиться на файл rest.html, розміщений в тій же папці, що й сам вихідний документ.

Якщо посилання робиться на Інтернет, слід вказати адресу URL. Наприклад:

<A href=”http://www.Samsung.com> Продукція фірми Samsung </A>.

Гіперпосилання – ключовий момент гіпертексту (тексту, що володіє властивістю навігації. Могутність гіперпосилання полягає в тому, що ним може бути слово, заголовок, рисунок, елемент таблиці тощо. Користування гіперпосиланнями просте: потрібно клацнути мишею на нім, і комп’ютер автоматично виконає пошук і завантаження потрібного ресурсу.

Допустімо, що сайт, в межах якого необхідно здійснювати навігацію, складається з 5 сторінок: Index.htm, Zmict.htm, Vstup.htm, Teoryja.htm, Practica.htm, Tests.htm. На сайті є головна сторінка Index.htm, на якій поміщено зміст Web-сайту. Елементи змісту дозволяють здійснювати переходи до відповідних Web-сторінок, тобто вони мають бути гіперпосиланнями. Тоді можливий варіант HTML-документа зі змістом Web-сайту, що утримує гіперпосилання, може бути поданий у такому вигляді:

<DL>

<DT> <STRONG> Зміст </STRONG><DD>

<A href=”Vstup.html”> Вступ </A> <BR>

<A href=”Teoryja.html”> Теорія </A> <BR>

<A href=”Practica.html”> Практика </A> <BR>

<A href=”Tests.html”> Тести </A> <BR>

</DL>

В цьому скрипті застосовані елементи визначення. Браузер відобразить даний документ так, як подано на рис. 9.2.

Рис. 9.2. Вікно броузера зі змістом сайту

Із рисунка видно, що текст, поданий між тегами елемента А став візуальним представленням гіперпосилання в документі.

Лінії, зображення, впроваджені об’єкти

Лінія – горизонтальна лінія в вікні броузера. Вона прикрашає естетичний вигляд Web-сторінки. Для вставки лінійки в HTML-документ застосовується HTML-елемент HR. Він задається як одинарний тег <HR> і має наступні атрибути:

alighn – вирівнювання лінії в вікні броузера (приймає значення left, right, center);

noshade – лінія має відображатись плоскою (без тіні);

size – числове значення товщини лінії;

width – числове значення, яке задає довжину лінії.

Приклад:

<HR>

Лінія різної товщини

<HR> size=4>

<HR> size=10>

Плоска лінія

<HR noshade size=10>

Лінія з різними вирівнюваннями

<HR width=”50%” align=left>

<HR width=”50%”>

<HR width=”50%” align=right>.

Якщо цей скрипт включити в HTML-документ, то браузер відобразить різні варіанти лінії.

Вставка зображення. Вставка зображення значно підсилює його зміст. Для вставки зображення в HTML-документ використовується елемент IMG, у вигляді одинарного тега<IMG>. Хоч всередині тега можуть бути різні атрибути, основним є атрибут src, котрий посилається на URL-зображення.

Якщо потрібно розмістити на Web-сторінці картинку з якогось файла то її слід виділити і подати як окремий файл (наприклад, “Photo.gif”) в папці для рисунків (краще в тій, що і файл HTML-документа). Після цього в документ потрібно ввести тег даного файла. HTML-скрипт документа може бути таким:

<H2> Моя фотографія </H2>

<IMG border="1" src="Photo.gif" height=100 width=75 alt="Тут має бути зображення">.

Відповідне зображення наведено на рис. 9.3.

Рис. 9.3. Документ з фотографією

За умовчанням зображення вирівнюється по лівому краю. Його розміри будуть такими ж, як в оригіналі. Щоб змінити розміри зображення в документі, використовують атрибути width (ширина) і height (висота) всередині тега <IMG>. Розміри подаються в пікселях. Проте їх можна задати і в %. Наприклад так:

<IMG src="Photo.jpg" width=”30”>

<IMG src="Photo.jpg" height=”70” width=”133”>.

Якщо броузер з будь-яких причин не показує зображення, то бажано про це повідомити в скрипті з допомогою атрибута alt – наприклад в такий спосіб:

<IMG src="Photo.jpg" height=200 width=150 alt="Тут має бути зображення">.

В наведеному випадку броузер повідомить текстом ="Тут має бути зображення".

Застосування графічних зображень для гіперпосилань. Графічне зображення в HTML-документі може бути використане, як гіперпосилання до інших HTML-документів. Щоб реалізувати таку можливість, необхідно в якірний тег HTML-документа додати елемент IMG, наприклад так:

<A href=”http://www.rambler.com”>

<IMG src=”Картинка1.jpg” width=”100” height=”30”>

</A>.

Рисунок “Картинка1” буде поміщено на Web-сторінку. Якщо тепер клацнути мишею на зображенні рисунка, то буде завантажена пошукова система rambler.

Компоновка зображення на Web-сторінці. Зображення, котрі вставляються в HTML-документ, за умовчанням вирівнюються по лівому краю сторінки. Але досить часто виникає необхідність розмістити зображення справа або в центі. Щоб вирівняти зображення по правому краю, потрібно в тег <IMG> записати атрибут align=”right”, а для вирівнювання по центру align=”center”. Наприклад так:

<IMG src=”Приклад1.jpg” align=”right”>,

<IMG src=”Приклад1.jpg” align=”center>.

За умовчанням текст обтікає зображення, прилягаючи до нього. Щоб зробити прогалину між зображенням і текстом, застосовують атрибут hspace (який задає ширину незайманого поля зліва і справа), а також атрибут vspace (котрий задає ширину вільного поля зверху і знизу). Наприклад, запис:

<IMG src=”Приклад1.jpg” align=”left” vspace=”50” hspace=”35”>

означає, що зверху і знизу від картинки браузер виділить вільні поля розміром 50 пікселів, а зліва і справа – по 35 пікселів.