www.ABC-Color.com
Онлайн розмальовки на різні теми
Довідка

Самовчитель HTML5

Створення веб сторінки.
Статті написані практично коротко, не відволікаючись на різні специфіки та історію.

Посилання в HTML

Посилання основний елемент серфінгу в інтернеті.

Синтаксис.

<A> </A> - тег вказує, що вміст є посилання.

Вмістом може бути різні об'єкти, в переважно це текст або зображення.

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

Щоб тег запрацював, як посилання, потрібно прописати атрибут, який вказує на тип посилання.

Посилання на зовнішній документ.

href - атрибут, який вказує адресу документа, для переходу за посиланням.

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

a href="URL"

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

Посилання в HTML abc-color.com/dovidka/html-link.shtml Посилання з цією інтернет сторінки на розділ довідки. abc-color.com/dovidka/index.shtml.

Навівши курсор миші на URL адресу у вікні пошуку або на посилання в інтернет сторінці, ви можете скопіювати, а потім вставити URL адресу. Для цього навівши курсор миші на посилання, натисніть клавіші "Ctrl" + "С" або клікнувши правою клавішею миші і в меню, клікніть на пункт "Копіювати". Що б вставити адресу клікніть на місце вставлення в вашому текстовому редакторі і натисніть клавіші "Ctrl" + "V" або клікнувши правою клавішею миші, клікніть на пункт в меню "Вставити".

Абсолютне посилання.

Використовують повний інтернет адресу файлу. Ця адреса називають URL файлу. Нам відомий він як адреса в всесвітній павутині www.
Він не залежить від місця розташування файлу на якому написане посилання.

Наведу приклади запису адреси сайту на якому ви перебуваєте.

A. Повний запис посилання.
<a href="http:⁄⁄abc-color.com/index.shtml">Мій сайт</a>
http:⁄⁄abc-color.com⁄index.html

Б. Файл "index" відкривається за замовчуванням, його можна не записувати в кінці посилання.
Рекомендується завжди в теках і підтеках, створювати файл з назвою "index", що-б при видаленні частини посилання, сайт все-одно відкрився.
<a href="http:⁄⁄abc-color.com⁄">Мій сайт</a>
http:⁄⁄abc-color.com⁄

В. Можна і без останньої косої рисочки
<a href="http:⁄⁄abc-color.com⁄">Мій сайт</a>
http:⁄⁄abc-color.com

Г. http - інформує, як текст інтернет сторінки потрібно надіслати до вас.
Можна не вказувати, браузер сам доставит потрібний протокол передачі веб сторінки.
<a href="⁄⁄abc-color.com">Мій сайт</a>
⁄⁄abc-color.com

Якщо файл знаходиться в папці на сайті, додаємо назву папки через косу риску.
<a href="http:⁄⁄abc-color.com/dovidka/html-link.shtml">Это адрес страницы на которой вы находитесь.</a>

Коли в адресі на початку стоїть одна рисочка, сервер автоматично додає адреса кореня сайту, тому варіант з однією рискою буде працювати тільки з файлів розташованих на комп'ютері.
<a href="http:⁄⁄abc-color.com">Мій сайт</a>
⁄www.abc-color.com

Відносне посилання.

Відносно файлу з посиланням.

Якщо ви пишіть вебсторінку на домашньому комп'ютері тоді краще використовуйте цей спосіб. При зміні місця на диску або диска всі посилання будуть працювати, якщо ви не порушите структури розташування файлів один від одного. Такі посилання будуть працювати, навіть якщо ви вирішите перемістіть свої файли з домашнього комп'ютера в інтернет (на холстінг, віддалений сервер)....

Щоб написати адресу посилання, потрібно вказати браузеру куди йти від файлу на якому прописано посилання:

Якщо посилаємося на об'єкт, в тій же теці на диску, що і файл з посиланням.

<a href="name-file.html">Следующая страница.</a>

Якщо посилатися на об'єкт, що знаходиться поруч у теці. (Папку для примера назовем папку "img" а файл картинку "image.png")

<a href="img/image.png">Смотрите картинку.</a>

Якщо посилатися на об'єкт, що знаходиться поруч у теці на глибині декількох тек.

<a href="img/My/summer/image.jpeg">Моя летняя фотография.</a>

Якщо посилатися на об'єкт, що знаходиться в теці на кілька рівнів ввише.

<a href=".../.../index.html">Главная страница</a>
Відносно кореня сайту.

Використовують для файлів що знаходяться на сервері. Щоб кожен раз не писати корінь сайту, пропускаємо його і посилання починається з косою лінії. При скачуванні файлу з інтернету, сервер додає до першої косій лінії в посиланні, адресу кореня сайту і посилання стають абсолютними.

<a href="">Мій сайт</a>
Мій сайт

<a href="⁄index.shtml">Мій сайт</a>
Мой сайт

<a href="⁄dovidka">Довідка</a>
Довідка

<a href="⁄dovidka/sayt.shtml">Про сайт</a>
Про сайт

Посилання на внутрішній вміст сторінки. Якір.

id - Ідентифікатор наддають елементу унікальне ім'я, для наділення його певними властивостями.

Якір - це закладка всередині сторінки, яку можна вказати, як мету для посилання.

Приклад коду:

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Списки</title>
<p>Це зміст вашої сторінки. Клацніть по посиланню в меню і сторінка буде на місце де стоїть текст розділу. В інших варіантах може бути зображення, музика, відео і т.д.</p>
<figure>
<ul>
<li><a href="#r1">Синтаксис.</a></li>
</ul>
<figure>
<ul>
<li><a href="#r2">Посилання на зовнішній документ.</a></li>
</ul>
<figure>
<ul>
<li><a href="#r3">Абсолютне посилання.</a></li>
<li><a href="#r4">Відносне посилання.</a></li>
</ul>
</figure>
<ul>
<li><a href="#r5">Посилання на внутрішній вміст сторінки. Якір.</a></li>
<li><a href="#r6">Вміст посилання.</a></li>
</ul>
</figure>
</figure>
...
<a id="r1"></a>
<h2>Синтаксис.</h2>
...
<a id="r2"></a>
<h3>Посилання на зовнішній документ.</h3>
...
<a id="r3"></a>
<h4>Абсолютне посилання.</h4>
...
<a id="r4"></a>
<h4>Відносне посилання.</h4>
...
<a id="r5"></a>
<h3>Посилання на внутрішній вміст сторінки. Якір.</h3>
...
<a id="r6"></a>
<h3>Вміст посилання.</h3>
...

Приклад:

Це зміст вашої сторінки. Клацніть по посиланню в меню і сторінка буде на місце де стоїть текст розділу. В інших варіантах може бути зображення, музика, відео і т.д.

Вміст посилання.

До посилання можна додати спливаючу підказку.

<a href="⁄spravka"title="Зміст всіх розділів довідки">Довідка</a>
Довідка

Посилання file: ///D:/... Коротка інформація на тему, розміщена в розділі довідка. Зміст всіх розділів довідки

Пошуковим роботам можна пояснити, зміст посилання за допомогою різних атрибутів. Їх є безліч, і у кожної пошукової системи свої улюбленці. Розглянемо найбільш поширені і всіма підтримувані.

<a href="URL" rel="Ім'я атрибута">Текст посилання</a>

rel="nofollow" - Комерційна посилання. Враховуючи цей атрибут, просимо пошукач не пов'язувати нашу інтернет сторінку і весь сайт, з цим посиланням. А так-само не піднімати рейтинг сайту на який посилається це посилання. Часто атрибут ставлять на посилання в коментарях відвідувачів сайту, що-б зменшити спам в посиланнях і не втратити рейтинг сторінки.

rel="author" - використовується для посилання на сторінку з інформацією про автора. Наприклад: його сторінка в соціальній мережі, контактні дані або Email адрес.

rel="license" - посилається на авторськими права, згідно з якими надається поточні зміст документа.

Посилання може бути зображення.
Для цього вставляємо адресу зображення або його код замість тексту. Як вставити картинку розглянемо в наступному розділі.