Посилання


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


Логіка роботи посилання наступна:


Є тег, який каже браузеру, що тут буде посилання. Він помічається <a></a> (було в уроці про «атрибути»)


Є атрибут, який додає додаткову особливість конкретному тегу — власне посилання. Позначається  href=””


Тобто, якщо ми не додамо атрибут, браузер все одна буде вважати, що тут посилання. Просто воно не спрацює, бо немає куди послатися.


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


Посилання на інший сайт


Нам потрібен обов’язковий атрибут href=””, в лапки якого ми поставимо посилання на потрібний сайт.



Наприклад, додамо посилання на сайт IT Banda.


Пишемо:


<a href=”https://freelancer.itbanda.pro”>Сайт IT Banda</a>


Все спрацювало. Наприклад, візьміть посилання на свій улюблений ютуб-канал та додайте це у свій html-файл.


👉 Як це виглядає в коді?



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


Ви можете створювати безліч html-сторінок. Точно так само, як ми робили в уроці про структуру документа:


— заходите в теку, де у вас уже лежить index.html

— створюєте будь-який текстовий файл з розширенням html (назву пишіть латиницею, без пробілів — для зручності)

— вносимо туди структуру документа

— тепер ви зможете поставити на нього посилання


Наприклад, створимо текстовий файл: «page2.html» та поставимо на нього посилання в файлі «index.html»


Для цього скористаємося тегом <a></a> та його обов’язковим атрибутом href. Але замість посилання на сторонній сайт, впишемо шлях до нашої другої сторінки. Оскільки і index.html, і page2.html знаходяться в одній теці, то просто впишемо його назву. Виглядатиме це так:


<a href=”page2.html”>Перейти на другу сторінку</a>👉 Як це виглядає у коді?


А якщо помістити сторінку в іншу теку? Так теж можна.


В теці, де лежить index.html створимо ще теку і назвемо new, та вже в неї помістимо файл page3.html. Оскільки ми вписуємо шлях до потрібного нам файлу, то тепер посилання на ту ж сторінку зміниться.


Буде виглядати так:

<a href=”new/page3.html”>Перейти на другу сторінку</a>


Тобто, ми кажемо браузеру: «Спочатку відкрий теку new, а потім відкрий файл page3.html».👉 Як це виглядає у коді?



Покращити роботу посилань


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


За допомогою атрибуту target=”” ми можемо зробити так, щоб посилання відкривалося у іншій вкладці.


У цього атрибуту є декілька значень. Наприклад, якщо ми напишемо target=”_self” — тобто, посилання буде працювати за замовчуванням (тобто, посилання відкриватиметься у тій же самій вкладці). Але якщо ми напишемо target=”_blank” то сторінка відкриється у іншій вкладці.


Це працює для посилань на інші сайти, чи на інші сторінки одного й того ж сайту.


Навіщо target=”_self”, якщо і без нього все працює?


Бувають випадки, коли якесь посилання треба відкрити, як завжди, а решту — в новій вкладці. Якщо багато посилань на сторінці, легше поставити один метатег в <head>, щоб всі сторінки відкривалися у новій вкладці. І лише один раз, до одного посилання додати атрибут target=”_self”



Завдання


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


Тому пограйтеся самостійно, щоб вже відчути себе кодером.


Посилання, яке відкривається в іншій вкладці, виглядає так:


<a href=”new/page2.html” target=”_blank”>Перейти на другу сторінку</a>


А тепер — завдання.

1. Створіть ще html-файл у тій же теці, де лежить index.html

2. Поставте на нього посилання

3. В теці, де лежить index.html, створіть ще одну теку, додайте туди файл з розширенням html (не забудьте внести структуру документа)

4. Поставте посилання на файл у вложеній теці

5. Додайте до index.html посилання на будь-який сторонній сайт. Якщо ви виконали всі попередні завдання — це для вас раз плюнути 🙂 Це вже не перше ваше завдання. Якщо хочете поділитися досвідом, то підпишіться на нас та сміливо пишіть у директ.

+380 (73) 968-23-15

itbanda.pro@gmail.com

ФОП Грудій Григорій Іванович

Україна, м. Київ, Харківське шосе, 49, кв 75