-
Ви вже вивчили багато
тегів 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"