Веб-розробка з нуля: Посилання

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

Базові поняття про посилання

Давайте створимо файл links.html з стандартною структурою html5. Для того, щоб створити посилання потрібно знати, на що посилатись: на інший сайт, свій сайт, документ, fpt-сервер, емейл, etc.

Давайте створимо посилання на цей сайт, просто вставимо в елемент body адресу сайту - developblog.com.ua. Якщо відкриєте в браузері, то побачите, що текст не перетворився в посилання. Це тому, що сам html не вміє перетворювати адреси сайтів в посилання. Для явного вказання лінку існує елемент <a>. Давайте глянемо на його мінімальну структуру:

<a href="http://developblog.com.ua">Блог про вебдев</a>

Тепер в браузері ви побачите, що текст "Блог про вебдев" перетворився в гіперпосилання на http://developblog.com.ua. Як бачите все дуже просто. Тепер давайте створимо посиланя на файл, що розташований, наприклад в тій самій папці, що і файл. Якщо там вже є якийсь файл, то вкажіть його назву з роширенням в атрибуті href, або створіть звичайний чи html файл і вкажіть його назву. Тепер код виглядатиме так:

<a href="http://developblog.com.ua">Блог</a>
<a href="images.html">html images</a>
<!--Додамо для прикладу ще декілька-->
<a href="http://google.ua">Ґуґл</a>
<a href="http://yandex.ua">Яndex</a>

Я забув сказати, що текст між <!-- і -->, є коментарем і не відображається в браузері.

Переноси рядків

Подивіться, як відобразиться цей код в браузері. Ви мабуть очікували, що всі посилання будуть на одній лінії. Справа в тому, що елемент <a> є лінійним, на відміну від <p>. І всі посилання будуть розташовані на одній лінії поки не дойдуть до краю вікна браузера, а коли вони не будуть вміщатись, то переноситимуться на нову стрічку. Щоб це перевірити просто зменшуйте ширину вікна браузера. Для явного переносу тексту на нову стрічку існує html тег - <br>. Давайте змінимо попередній код:

<a href="http://developblog.com.ua">Блог</a><br>
<a href="images.html">html images</a><br>
<a href="http://google.ua">Ґуґл</a><br>
<a href="http://yandex.ua">Яndex</a><br>

Тепер кожне посилання на новій стрічці.

Я розумію, що вам почав подобатись цей тег, але пам'ятайте, що ним не потрібно зловживати. Тобто писати 10-20 таких елементів підряд, для того щоб зробити відступи між блоками не варто. Для цього існують таблиці стилів.

Правильна розмітка списків посилань

Якщо ви маєте вставити список посилань, наприклад меню сайту, то логічно було б використати не впорядкований список. Наприклад так:

<ul>
	<li><a href="http://developblog.com.ua">Блог</a></li>
	<li><a href="images.html">html images</a></li>
	<li><a href="http://google.ua">Ґуґл</a></li>
	<li><a href="http://yandex.ua">Яndex</a></li>
</ul>

Такий формат дозволяє легко зверстати маже будь-яке меню без додаткової розмітки, завдяки CSS стилям для елементів <li> та <a>.

Заглиблюємось. Додаткові атрибути для посилань

Тепер давайте розлянемо ще три атрибути для гіперпосилань.

title атрибут посилань

Дозволяє встановлювати інформацію, яка буде показана у вигляді підказки при наведенні на елемент. Для елементів: abbr та acronym атрибут є обов'язковим. А з тегами: base, head, html, meta, param, script, style, та title використовувати заборонено. Синтаксис:

<tag title="Текст, який буде показано при наведенні">...</tag>

target атрибут посилань

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

<a target="_blank|_self|_parent|_top|framename">

Оскільки в новому html5 фрейми не пдтримуються, то значення _parent, _top і %framename% не будемо розглядати. Значення _self стоїть по-замовчуваню і означає, що сторінка відкриється у тому ж вікні/вкладці. _blank означає, що сторінка відкриється в новому вікні/вкладці.

rel атрибут посилань

Він вказує відношення між сторінкою, яка містить посилання та сторінкою в атрибуті href. Браузери майже не підтримують цей атрибут, але дуже часто на сайтах (на цьому також) можна зустріти таке використання:

<a href="..." rel="nofollow">...</a>

Прочитати про інші значення атрибуту можна тут.

Homework

Так, знову. Все, що вам потрібно то це потренуватись, створювати посилання. Можете зробити міні-сайт на 3 сторінки:

• Головна сторінка - index.html
• Контакти - contacts.html
• Про сайт - about.html

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