Створення гіперпосилань
Гіперпосилання дуже важливі — саме вони роблять Інтернет мережею. У цій статті наведено синтаксис, необхідний для створення посилання, а також обговорюються кращі практики поводження з посиланнями.
| Попередні вимоги: |
Базове знання HTML, описане розділ «Початок роботи з HTML». Знайомство з форматуванням тексту, описане в розділі «Основи редагування тексту в HTML». |
|---|
| Завдання: |
Навчитися ефективно використовувати гіперпосилання та зв'язувати кілька файлів разом. |
|---|
Що таке гіперпосилання?
Гіперпосилання – одне з найцікавіших нововведень Інтернету. Вони були особливістю Мережі з самого початку, але саме вони перетворюють Інтернет на Інтернет. Вони дозволяють нам пов'язувати наші документи із будь-яким іншим документом (або ресурсом), з яким ми хочемо. З їх допомогою ми також можемо пов'язувати документи з їх конкретними частинами, і ми можемо зробити додатки доступними на простому веб-адресі (порівняйте це з локальними додатками, які мають бути встановлені, та іншими такими ж речами). Майже будь-який веб-контент може бути перетворений на посилання, так що коли ви клікаєте по ньому (або іншим чином активуєте), вона змушує веб-браузер перейти на іншу веб-адресу (URL).
Примітка: URL-адреса може вказувати на файли HTML, текстові файли, зображення, текстові документи, відео та аудіофайли та інше, що може жити в Інтернеті.Якщо веб-браузер не знає, як відображати або обробляти файл, він запитає вас, чи ви хочете відкрити файл (у цьому випадку обов'язок відкриття або обробки файлу передається у відповідний локальний додаток на пристрої) або завантажити файл (у цьому випадку ви можете спробувати розібратися з ним пізніше).
Наприклад, домашня сторінка BBC містить велику кількість посилань, які вказують не тільки на безліч новин, але й на різні області сайту (меню), сторінки входу / реєстрації (користувацькі інструменти) та багато іншого.
Анатомія посилання
Просте посилання створюється шляхом обгортання тексту (або іншого вмісту, дивіться Посилання-блоки), який ви хочете перетворити на посилання, елемент , і надання цьому елементу атрибуту href (який також відомий як гіпертекстове посилання, або мета), який міститиме веб-адресу, на яку ви хочете вказати посилання.
Це дало нам наступний результат:
Я створив посилання на домашню сторінку Mozilla.
Блокові посилання
Як згадувалося раніше майже будь-який контент може бути посиланням, навіть блоковий елемент. Якщо ви хочете перетворити заголовок на посилання, то оберніть його на елемент ( ):
MDN Web Docs
Документуємо веб-технології, включаючи CSS, HTML та JavaScript, з 2005 року.
Це перетворить заголовок на посилання:
Додаємо інформацію за допомогою атрибуту title
Іншим атрибутом посилань є title. Він може містити додаткову інформацію про посилання, наприклад опис сторінки або інші речі, про які слід знати користувачеві.
Результат описаного вище прикладу буде таким (опис з'явиться, якщо навести курсор на посилання):
Примітка: Опис з атрибута title відображається лише при наведенні курсору, отже люди, які покладаються на клавіатурні елементи керування для навігації по веб-сторінках, будуть мати труднощі з доступом до інформації, яку містить title. Якщо інформація заголовка дійсно важлива для зручності використання сторінки, то ви повинні подати її таким чином, який буде доступний всім користувачам, наприклад, помістивши її у звичайний текст.
Активне вивчення: створюємо власне посилання
Час вправи: ми хотіли б, щоб ви створили будь-який HTML-документ у текстовому редакторі на своєму комп'ютері (наш базовий приклад підійде.)
- Спробуйте додати до тіла HTML один або кілька абзаців або інші елементи, про які ви вже знаєте.
- Тепер перетворите деякі фрагменти документа на посилання.
- Додайте посиланням атрибут title.
Короткий посібник з URL-адрес та шляхів
Щоб повністю зрозуміти адреси посилань, вам потрібно зрозуміти кілька речей про URL-адресу та шляхи до файлів. Цей розділ дасть інформацію, необхідну для досягнення цієї мети.
URL-адреса (Uniform Resource Locator, або єдиний покажчик ресурсу, але так її ніхто не називає) - це просто рядок тексту, який визначає, де щось знаходиться в Інтернеті. Наприклад, домашня сторінка Mozilla знаходиться за адресою https://www.mozilla.org/ru/.
URL-адреси використовують шляхи для пошуку файлів. Шляхи вказують, де у файловій системі є файл, який вас цікавить. Давайте розглянемо простий приклад структури каталогів (дивіться каталог creating-hyperlinks.)
Корінь структури - каталог creating-hyperlinks. При роботі на локальному веб-сайті у вас буде один каталог, який містить весь сайт.У корені у нас є два файли - index.html і contacts.html. На цьому веб-сайті index.html був би нашою домашньою або лендинг-сторінкою (веб-сторінкою, яка є точкою входу для веб-сайту або певного розділу веб-сайту).
У корені є ще два каталоги - pdfs і projects. У кожного з них є один файл усередині - project-brief.pdf і index.html відповідно. Зверніть увагу на те, що ви можете досить успішно мати два файли index.html в одному проекті, поки вони знаходяться в різних місцях файлової системи. Багато веб-сайтів так роблять. Другий index.html, можливо, буде головною лендинг-сторінкою для пов'язаної з проектом інформації.
Той самий каталог: Якщо ви хочете підключити посилання всередині index.html (верхній рівень index.html ), що вказує на contacts.html , вам просто потрібно вказати ім'я файлу, на який ви хочете встановити посилання, так як він знаходиться в тому ж каталозі, що і поточний файл. Таким чином, URL-адреса, яку ви використовуєте - contacts.html :
Редактор Wix: Як зробити текстове гіперпосилання?
Надсилайте відвідувачів на потрібні сайти, розділи та сторінки, використовуючи текстові посилання. Ви можете створити клікабельну URL-адресу або додати гіперпосилання до існуючого фрагмента тексту.
Щоб розпочати посилання, опублікуйте свій сайт і натисніть на URL або елемент на мобільному пристрої або планшеті. Посилання не працюють у режимі редагування.
Створення клікабельних URL-адрес
Коли ви додаєте URL-адреси, відвідувачі вашого сайту точно знають, яку сторінку вони відкривають. Ви можете додавати URL-адреси, які ведуть на інші сторінки вашого сайту або на зовнішні сайти.
URL-адреса, яку ви вводите безпосередньо в текстове поле, автоматично стає клікабельною, вам не потрібно додавати посилання вручну.
В даний час клікабельними можуть бути лише URL-адреси англійською мовою.
Щоб створити клікабельну URL:
- Додати текст до сайту.
- Натисніть Редагувати текст.
- Введіть URL-адресу.
Не додавайте інший текст до текстового поля, це зробить URL-адресу неклікабельною
Додавання гіперпосилання до тексту
Крім створення URL-адреси, ви також можете додавати посилання до звичайного тексту. Ви можете вибрати, який фрагмент тексту додати посилання, і навіть налаштувати її колір.
Найбільш поширені текстові посилання можуть виглядати так: «Відвідайте наш магазин» або «Читати далі».
Щоб додати до тексту гіперпосилання:
- Натисніть текстове поле в редакторі.
- Натисніть значок посилання .
- Виберіть тип посилання та введіть відомості про посилання.
- Виберіть, чи відкриватиметься посилання в новому вікні або в поточному вікні.
- Натисніть Готово.
- (Необов'язково) Змініть колір тексту гіперпосилання:
- Натисніть Редагувати текст.
- Перейдіть до тексту посилання.
- Натисніть на іконку Колір .
- Виберіть колір на панелі кольорів.
Щоб видалити підкреслення гіперпосилання, перейдіть до тексту, до якого додано посилання і натисніть піктограму підкреслення .
Неможливо додати посилання до тексту, який займає більше 2 абзаців, якщо ви розділили ці абзаци за допомогою кнопки Enter. Щоб вирішити цю проблему, замість Enter можна використати Shift + Enter для створення міжрядкового інтервалу.
