Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук


Вітаю Вас, Гість · RSS 20.08.2017, 00:17
На головну » Підручники » Підручник HTML » Урок 8: Посилання - Підручник HTML
Урок 8: Посилання

У цьому уроці ви навчитеся створювати посилання - переходи з однієї сторінки на іншу.

Що необхідно для створення посилання?

Для створення посилання ви використовуєте той же, що і завжди при кодуванні HTML: тег. Простий тег з одним елементом і одним атрибутом - і ви можете перейти куди завгодно. Ось приклад того, як може виглядати посилання на htmlbook.at.ua:

Приклад 1:

<a href="http://htmlbook.at.ua/">Це посилання на htmlbook.at.ua</a>

буде виглядати в браузері:

Це посилання на htmlbook.at.ua

Елемент 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>

виглядає в браузері (клацніть по посиланнях):

Посилання на heading 1

Посилання на heading 2

heading 1

Text text text text

heading 2

Text text text text


(Примітка: атрибут id повинен починатися з літери)

Можу я перейти ще куди-небудь?

Ви можете також зробити посилання на e-mail адресу майже так само, як на посилання на документ:

Приклад 6:

<a href="mailto:nobody@ahtmlbook.at.ua">Надіслати e-mail nobody на htmlbook.at.ua</a>

буде в браузері:

Надіслати e-mail nobody на htmlbook.at.ua

Єдина відмінність в посиланнях на 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>

буде виглядати в браузері:

Це посилання на htmlbook.at.ua

Атрибут title використовується для короткого опису посилання. Якщо ви - не клацаючи мишею - помістити її покажчик над посиланням, ви побачите, як з'явиться текст "Відвідуйте Htmlbook.at.ua і вивчайте HTML".
<< Урок 7: Атрибути
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]