Гіпертекстові посилання html
Створення гіперпосилань.
Цей приклад показує, як створювати посилання в документі 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>
Коментарі
Написати коментар
Вибір редакції:
Вам може сподобатись:
