 Меню сайту |
|
| Підручники |
|
| Форма входу |
|
| Статистика |
Онлайн всього: 1 Гостей: 1 Користувачів: 0 |
| Пошук |
|
|
| Вітаю Вас, Гість · RSS |
26.04.2024, 02:05 |
|
На головну » Підручники » Підручник HTML » Урок 8: Посилання - Підручник HTML
|
|
|
У цьому уроці ви навчитеся створювати посилання - переходи з однієї сторінки на іншу.
Що необхідно для створення посилання?
Для створення посилання ви використовуєте той же, що і завжди при кодуванні HTML: тег. Простий тег з одним елементом і одним атрибутом - і ви можете перейти куди завгодно. Ось приклад того, як може виглядати посилання на htmlbook.at.ua:
Приклад 1:
| <a href="http://htmlbook.at.ua/">Це посилання на htmlbook.at.ua</a> |
буде виглядати в браузері:
Елемент a позначає "якір / anchor". Атрибут href це скорочення від "hypertext reference / гіпертекстове посилання", вказує місце, на яке виконується перехід по даному посиланню - зазвичай це інтернет-адреса та / або ім'я файлу.
У прикладі атрибут href має значення "http://www.htmlbook.at.ua", яке є повною адресою htmlbook.at.ua і називається URL (Uniform Resource Locator / універсальний локатор ресурсу). Зверніть увагу, що "http://" завжди повинно входити до складу URLів. Слова "Це посилання на htmlbook.at.ua" це текст, який показується в браузері як посилання. Не забудьте закрити тег.
Як щодо посилань між моїми власними сторінками?
Якщо ви робите посилання між сторінками на одному web-сайті, то не треба вказувати повну адресу (URL) документа. Наприклад, якщо у вас дві сторінки (назвемо їх page1.htm і page2.htm), збережені в одній папці, ви можете зробити посилання з однієї сторінки на іншу, просто надрукувавши ім'я файлу на посиланні. Тобто посилання з page1.htm на page2.htm буде виглядати так:
Приклад 2:
| <a href="page2.htm">Клацніть для переходу на page 2</a> |
Якщо page 2 поміщена в підпапку "subfolder", посилання виглядає так:
Приклад 3:
| <a href="subfolder/page2.htm">Клацніть для переходу на page 2</a> |
У зворотний бік посилання зі сторінки page 2 (у папці subfolder) на page 1 буде такий:
Приклад 4:
| <a href="../page1.htm">Посилання на page 1</a> |
Поєднання "../" вказує на папку, розташовану на один рівень вище від даної позиції файлу, з якого робиться посилання. Слідуючи цій логіці, ви можете також вказати на два рівні вище "../../" або більше.
Розібралися? Альтернативно ви завжди можете вказати повну адресу файлу (URL).
А посилання всередині сторінки?
Ви можете також створювати посилання-переходи всередині самої сторінки - наприклад, зміст з посиланнями на глави. Все, що вам необхідно, - використовувати атрибут id і символ "#".
Використовуйте атрибут id для маркування елемента, на який ви хочете зробити перехід. Наприклад:
| <h1 id="heading1">heading 1</h1> |
Тепер можна створити посилання на цей елемент за допомогою знака "#" в атрибуті посилання. Знак "#" повідомляє браузеру, що це перехід на тій же самій сторінці. Після "#" повинен слідувати id тега, на який виконується перехід. Наприклад:
| <a href="#heading1">Посилання на heading 1</a> |
Все стане зрозуміліше на прикладі:
Приклад 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Посилання на heading 1</a></p>
<p><a href="#heading2">Посилання на heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
|
виглядає в браузері (клацніть по посиланнях):
(Примітка: атрибут id повинен починатися з літери)
Можу я перейти ще куди-небудь?
Ви можете також зробити посилання на e-mail адресу майже так само, як на посилання на документ:
Приклад 6:
| <a href="mailto:nobody@ahtmlbook.at.ua">Надіслати e-mail nobody на htmlbook.at.ua</a> |
буде в браузері:
Єдина відмінність в посиланнях на e-mail і на файл полягає в тому, що, замість адреси документа, ви записуєте mailto: з наступною адресою електронної пошти / e-mail. При клацанні по посиланню відкривається програма за замовчуванням для роботи з електронною поштою з адресою, уже записаною в рядку адреси. Зверніть увагу, що ця функція буде працювати тільки в тому випадку, якщо e-mail програма встановлена на вашому комп'ютері. Спробуйте!
Є ще які-небудь інші атрибути, які мені потрібно знати?
Для створення посилання ви обов'язково повинні використовувати атрибут href. Крім того, на посилання можна помістити title:
Приклад 7:
| <a href="http://htmlbook.at.ua/" title="Відвідуйте Htmlbook.at.ua і вивчайте HTML">Це посилання на htmlbook.at.ua</a> |
буде виглядати в браузері:
Атрибут title використовується для короткого опису посилання. Якщо ви - не клацаючи мишею - помістити її покажчик над посиланням, ви побачите, як з'явиться текст "Відвідуйте Htmlbook.at.ua і вивчайте HTML".
|
|
<< Урок 7: Атрибути
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
