Опублікувати статтю

Гіпертекстові посилання html

Гіпертекстові посилання html
Гіпертекстові посилання необхідні для з'єднання з іншими документами в Web. Для їх запису використовується тег <a>, який називають "якір" (аnchor).

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

Цей приклад показує, як створювати посилання в документі HTML.

<html>
<body>

<p>
<a href=”page1.htm”>
Цей текст </a> є посиланням на сторінку на
цьому Web- сайті.
</p>

<p>
<a href=”http://ehow.com.ua
/”>
Цей текст </a>є посиланням на сторінку
у Всесвітній Павутині.
</p>

</body>
</html>

Зображення в якості посилання

Цей приклад показує, як використовувати в якості посилання зображення.

<html>
<body>
<p>
Можна також використовувати як посилання зображення:

<a href=”http://ehow.com.ua
/”>
<img border=”0″ src=”logo.gif” width=”285″ height=”52″>
</a>

</p>

</body>
</html>

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

Якір ( аnchor ) дозволяє встановлювати зв’язок з будь-якими ресурсами у Всесвітній Мережі: іншу сторінку HTML, зображення, звуковий файл, відеокліп, і т.д.

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

<a href=”url”> текст посилання </a>

За допомогою атрибута href передається адреса документа, на який вказує посилання.

<a href=”http://ehow.com.ua
/”> Ласкаво просимо на сайт! </a>

Такий же синтаксис використовується для переходу у вкладену папку, наприклад в папку ” Допомога ” на сайті Все просто використовується код:

<a href=”http://ehow.com.ua
/help/”> Сторінка допомоги на сайті Все просто! </a>

Завжди додавайте завершальну косу риску до посилань на вкладені папки. Якщо посилання має наступний вигляд: href = “http://ehow.com.ua/help “, то буде створено два запити HTTP до сервера, так як сервер додасть косу риску до адреси і створить новий запит наступного виду:
href = “http://ehow.com.ua/help/”. При цьому виклику звернення зазвичай відбувається до сторінці index.htm всередині папки help або до іншого файлу – це залежить від налаштувань web-сервера.

За допомогою даного атрибута можна задавати посилання не тільки по протоколу HTTP, а й по інших:
http://… – Створює посилання на www – документ;
ftp://… – Створює посилання на ftp – сайт або розташований на ньому файл;
mailto:… – Запускає поштову програму -клієнт з заповненим полем імені одержувача. Якщо після адреси поставити знак питання, то можна вказати додаткові атрибути, розділені знаком ” & “;
news:.. – Створює посилання на конференцію сервера новин;
telnet://… – Створює посилання на telnet – сесію з віддаленою машиною;
wais://… – Створює посилання на WAIS – сервер;
gopher://… – Створює посилання на Gopher – сервер;

За допомогою атрибуту target можна визначити, де буде відкрито документ, на який вказує посилання. Як значення необхідно задати або ім’я одного з існуючих фреймів, або одне з наступних зарезервованих імен:

    _self – вказує, що визначений в параметрі href документ повинен відображатися в поточному фреймі;
    _parent – вказує, що документ повинен відображатися у фреймі – батьку поточного фрейма. Інакше кажучи, _parent посилається на вікно, що містить frameset, що включає поточний фрейм;
    _top – вказує, що документ повинен відображатися у вікні – батьку всієї поточної фреймовой структури;
    _blank – вказує, що документ повинен відображатися в новому вікні.

<html>
<body>
<a href=”http://ehow.com.ua/” target=”_blank”> Ласкаво просимо на сайт ! </a>

<a href=”http://ehow.com.ua/” target=”_parent”> Ласкаво просимо на сайт ! </a>

<a href=”http://ehow.com.ua/” target=”_top”> Ласкаво просимо на сайт ! </a>

<a href=”http://ehow.com.ua/” target=”_self”> Ласкаво просимо на сайт ! </a>

</body>
</html>

Для переходу всередині сторінки до конкретного розділу використовують атрибут name тега гіпертекстового посилання a, за допомогою якого створюється іменований якір.

<a name=”label”> посилання на іменований якір </a>

У даному прикладі всередині документа створюється своєрідна мітка, при цьому іменований якір ніяк не відображається у вікні браузера.

Для переходу на місце, яке зазначено іменованих якорем використовується знак # і ім’я якоря в кінці URL наступним чином:

<a href=”page1.html#label”> перехід на іменований якір </a>

Перехід всередині файлу ” page1.html ” на іменований якір виглядає наступним чином:

<a href=”#label”> перехід на іменований якір </a>

Якщо браузер не зможе знайти вказаний іменований якір на спричиненої сторінці, то перехід відбудеться на початок документа, при цьому повідомлення про помилку доступу не виникає.

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

Цей приклад показує, як відкрити посилання на іншу сторінку в новому вікні, щоб відвідувачеві не потрібно було залишати ваш Web -сайт.

<html>
<body>

<a href=”lastpage.htm” target=”_blank”> Остання сторінка </a>

<p>
Якщо задати атрибут target посилання як “_blank”,
то посилання буде відкрита в новому вікні.
</p>

</body>
</html>

Посилання в певне місце на тій же сторінці

Цей приклад показує, як використовувати посилання на іншу частину документа.

<html>
<body>

<p><a href=”#part5″> Перехід на частину 5. </a></p>
<h1> Лекція 1 </h1>
<h2> Частина 1 </h2>
<p> Це перша частина… </p>
<h2> Частина 2 </h2>
<p> Це друга частина… </p>
<h2> Частина 3 </h2>
<p> Це третя частина… </p>
<h2> Частина 4 </h2>
<p> Це четверта частина… </p>
<h2> <a name=”part5″> Частина 5 </a></h2>
<p> Це п’ята частина… </p>
<h2> Частина 6 </h2>
<p> Це шоста частина… </p>
<h2> Частина 7 </h2>
<p> Це сьома частина… </p>
<h2> Частина 8 </h2>
<p> Це восьма частина… </p>
<h2> Частина 9 </h2>
<p> Це дев’ята частина… </p>
<h2> Частина 10 </h2>
<p> Це десята частина… </p>
</body>
</html>

Створення посилання mailto

Цей приклад показує, як з’єднатися з повідомленням mail (буде працювати тільки, якщо встановлена ​​служба mail).

<html>
<body>

<p>
Це посилання на поштові адреси:

< a
відправити запит </a>

</p>

<p> За допомогою цього посилання відправляється лист за адресою електронної пошти
[email protected], його копія на адресу [email protected] і прихована копія на адресу [email protected] Для коректної обробки заголовка листа необхідно прогалини замінювати на % 20. </p>

</body>
</html>

фрейми HTML

Фрейми використовуються для розбиття вікна браузера на кілька незалежних частин, кожна з яких представляє собою окремий HTML – документ. Найбільш часте застосування фреймів – це відділення меню від основного інформаційного наповнення. Хоча фрейми досить зручна річ, використання їх не рекомендується. Слід уважно стежити за тим, щоб теги, що формують фреймову структуру, розташовувалися поза тегів <body>, так як вони не відносяться до тіла документа.
Набір вертикальних фреймів

Цей приклад показує, як створити набір вертикальних фреймів з трьома різними документами.

<html>
<frameset cols=”50%,25%,25%”>
<frame src=”frame_1.htm”>
<frame src=”frame_2.htm”>
<frame src=”frame_3.htm”>
</ frameset >
</html>

 
Набір горизонтальних фреймів

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

<html>
<frameset rows=”25%,50%,25%”>
<frame src=”frame_1.htm”>
<frame src=”frame_2.htm”>
<frame src=”frame_3.htm”>
</ frameset >
</html>

Теги для роботи з фреймами

Тег <frameset> визначає, як розділити вікно на фрейми. Кожен frameset визначає набір рядків або стовпців. Значення rows/cols вказують величину області екрану, яку займатимуть кожен рядок/стовпчик. Атрибут framespacing – визначає відстань між фреймами в пікселах.

Тег <frameset> є контейнером для всіх інших тегів фреймів. Між початковим і кінцевим тегами крім елементів <frame> і <noframes> можуть перебувати інші елементи <frameset>. Тобто елемент <frameset> підтримує вкладені конструкції фреймів.

Тег <frame> визначає, який документ HTML помістити в кожен фрейм. Тег <frame> має атрибут noresize = “noresize”, який забороняє змінювати розмір фрейму користувачеві.

У прикладі нижче задана фреймова структура з двома стовпцями. Для першого шпальти задано 25 % ширини вікна браузера. Для другого фрейма задано 75 % ширини вікна браузера. У перший стовпець поміщається документ HTML “frame_1.htm “, а в другій стовпець поміщається документ HTML “frame_2.htm “:

<frameset cols=”25%,75%”>
<frame src=”frame_1.htm”>
<frame src=”frame_2.htm”>
</ frameset >

Необхідно враховувати, що браузер може не підтримувати фрейми, в цьому випадку слід використовувати тег <noframes>.

При використанні фреймів теги <body> </ body> не використовуються. Однак, якщо додати тег <noframes>, що містить деякий текст для браузерів, які не підтримують фрейми, необхідно буде помістити цей текст між тегами <body> </body>. наприклад,

<html>

<frameset cols=”25%,50%,25%”>
<frame src=”frame_1.htm”>
<frame src=”frame_2.htm”>
<frame src=”frame_3.htm”
<noframes>
<body> Ваш браузер не підтримує фрейми !</body>
</ noframes >
</ frameset >
</html>

Горизонтальні і вертикальні фрейми

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

<html>
<frameset rows=”50%,50%”>
<frame src=”frame_1.htm”>
<frameset cols=”25%,75%”>
<frame noresize=”noresize” src=”frame_2.htm”>
<frame src=”frame_3.htm”>
</ frameset >
</ frameset >
</html>

фрейм навігації

Цей приклад показує, як зробити фрейм навігації. Фрейм навігації містить список посилань, що вказують на другий фрейм.

<html>

<frameset cols=”120,*”>
<frame src=”menu.htm”>
<frame src=”frame_1.htm” name=”frame_1″>
</ frameset >

</html>

Файл з ім’ям “menu.htm ” містить посилання на інші документи HTML, які будуть завантажуватися в frame_1. Вихідний код для посилань:

<a href =”file_1.htm” target =”frame_1″> Файл 1 </a><br>
<a href =”file_2.htm” target =”frame_1″> Файл 2 </a><br>
<a href =”file_3.htm” target =”frame_1″> Файл 3 </a>

вбудований фрейм

Цей приклад показує, як створити вбудований фрейм (фрейм всередині сторінки HTML).

<html>
<body>

<iframe src=”menu.html”> </iframe>

<p> Деякі старі браузери не підтримують iframes. </p>
<p> У цьому випадку вбудований фрейм (iframe) нічого очікувати видно. </p>

</body>
</html>

Коментарі

Написати коментар



Схожі записи

Кращі статті розділу: