Посилання в HTML

Ви вже вивчили багато
тегів HTML.

Але чи знаєте ви,
що насправді означає HTML?

HTML — це мова гіпертекстової розмітки.

Ми вже знаємо, що означає "мова розмітки".

Це спосіб структурувати сторінку,
використовуючи теги.

Але що означає гіпертекст?

Насправді, це слово було
винайдене ще до існування Інтернету,

у 1960-х роках, і означало "текст,
з'єднаний з іншим текстом,

до якого читач може зразу ж перейти".

Тім Бернерс-Лі розробив HTML

та інші складові Інтернету,
наприклад, HTTP,

як спосіб з'єднати один текст
з іншим,

що існує будь-де у світі.

Як ми з'єднуємо веб сторінки
з іншими веб-сторінками

в мові гіпертекстової розмітки?

Звичайно ж, за допомогою
гіперпосилання,

яке ми зараз зазвичай називаємо
просто "посилання".

Як ми створюємо посилання в HTML?

Саме зараз буде трохи дивно.

Ви, мабуть, думаєте, що ми
використаємо тег ("посилання")...

Але насправді цей тег використовується
для іншого виду посилань в HTML.

Замість нього, ми використаємо тег <а>,
де літера "а" означає "anchor" (укр. "якір").

Він кидає якір на посилання на
сторінці в певному місці

і з'єднує цей якір з
іншою веб-сторінкою.

Щоб створити посилання, ви знаєте,
що ми маємо створити тег,

але також ми маємо вибрати
текст посилання

і адресу, на яку переходитиме
це посилання.

Зробімо посилання на сторінку
з детальнішою інформацію про створення веб.

Текст посилання розміщується
між початковим та кінцевим тегами.

Тому я поставлю курсор тут і напишу:

"Прочитайте більше про історію створення HTML".

Тепер ми бачимо, що текст
має вигляд посилання.

Але поки що він нікуди не переходить.
Ми маємо додати адресу.

Ми насправді не хочемо, щоб адресу
було видно на сторінці,

але нам потрібно, щоб браузер знав, що це.

Тому ми вставимо адресу всередині
атрибута тега <а>.

Це атрибут "href".

Що означає "href"?

Я дам вам підказку:
ви часто бачили цю "h".

Вона означає "гіпер", "гіперпосилання"
("hyper-reference").

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

Ви помітили, що URL починається
з "http"?

Вгадайте, що тут означає "h"?
Гіпер!

HTML — це суцільні "гіпер".

URL визначає все, що потрібно знати
браузеру, щоб знайти сторінку:

Це протокол,

далі йде домен

і шлях, де розміщена сторінка
на сервері.

Оскільки в цьому випадку URL визначає
все, ми називаємо її "абсолютною URL".

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

Це говорить браузеру залишатись
на поточному домені

і всього лиш знайти інший шлях
на цьому домені.

Це називається "відносна URL".

Ми використовуємо їх постійно на сайті Khan Academy,
коли з'єднуємо певну інформацію.

Ви маєте використовувати абсолютні URL
на сторінках, які робите тут,

щоб уникнути небажаних наслідків.

Ми також можемо сказати браузеру,
де відкривати сторінку:

в цьому ж вікні,
чи в новому.

Щоб сказати браузеру відкрити
вікно в новому вікні,

ми додамо ще один атрибут,
"ціль" ("target").

target ="_blank"

Я хочу, щоб ви зараз зупинили відео
і спробували натиснути на посилання.

Вперед, я почекаю.
Клік-клік!

Що трапилось?

Ви, напевно, побачили попередження,

що це посилання надіслано
з користувацької сторінки.

І потім, якщо ви натиснули "ок",
посилання відкрилось.

Це тому що ми додали до посилань
на цих сторінках

дещо особливе.

Тому що ми не хочемо, щоб користувачі,
які думають, що всі посилання затверджені

Khan Academy, потім попадали на
страшні несподівані сайти.

Тому кожне посилання, яке ви тут зробите,
буде мати таке попередження,

і кожне посилання з'являтиметься
у новому вікні.

Це означає, що насправді я можу
видалити атрибут "ціль",

оскільки він встановлений
за замовчуванням.

Або я можу його залишити на випадок,

якщо я захочу одного дня
перенести цей код HTML з сайту Khan Academy

і бути впевненою, що посилання все одно
відкриватиметься в новому вікні.

Коли ви маєте використовувати атрибут "target"?

Загалом, якщо посилання переходить на
іншу сторінку на одному домені,

воно має відкритись в тому ж самому вікні.

А якщо воно переходить на сторінку на іншому
домені, воно має відкритись в новому вікні.

Гаразд, досить цих розмов,

краще я вам покажу щось важливіше
щодо посилань.

Ми можемо приєднувати не лише текст.

Ми можемо з'єднувати зображення
або текст із зображеннями.

Тут ми маємо фотографію Тіма Бернерса-Лі.

Я збираюсь її вирізати...

і вставити її всередину посилання.

Оу! Як мило.

Якщо я наведу мишкою на зображення,

Я побачу, що мій курсор перетворився
на стрілку,

і натиснувши на неї, я перейду на сторінку CERN (Європейська організація з ядерних досліджень).

Насправді ви можете зробити посиланням
всю вашу сторінку,

і вона стане великою, блакитною,
підкресленою кляксою.

Але, будь ласка, не робіть цього!
Робіть посилання з любов'ю, друзі.

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"