Посилання
В минулому урокі ми розглянули, як додавати картинки до сайту. Ми ще детально це розберемо, але по такому ж принципу створюються посилання.
Логіка роботи посилання наступна:
Є тег, який каже браузеру, що тут буде посилання. Він помічається <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 посилання на будь-який сторонній сайт. Якщо ви виконали всі попередні завдання — це для вас раз плюнути 🙂 Це вже не перше ваше завдання. Якщо хочете поділитися досвідом, то підпишіться на нас та сміливо пишіть у директ.