Курс HTML з нуля / #8 - Створення посилань. Різні типи посилань у HTML

[0:00]Привіт. В цьому відео ми з вами навчимося створювати посилання, причому з різними типами, і все це ми навчимося робити в мові HTML. А перед початком я би хотів порекомендувати сайт itproger.com. На сайті ви знайдете код, домашні завдання, матеріали та багато іншої цікавої інформації. Посилання на цей урок буде в описі до цього відео. У мові HTML для створення посилань використовується спеціальний тег. Він називається як А. Його ми можемо відкрити, а також можемо закрити. Все, що буде всередині цього тегу, це і буде текст самого посилання. Ну, наприклад, давайте я тут напишу щось на кшталт Go to Google. Таке я зберігаю та оновлюю сторінку. Після цього ми помічаємо, що в нас відображується самий звичайний текст. Я не можу ні натиснути на цей текст, ну, не можу з ним зробити будь-які дії. Тобто це просто текст. Справа в тому, що сам по собі оцей тег А, він нічого із себе не представляє. Він буде щось нам давати лише, якщо я допишу такий атрибут, як href. Всередині цього атрибуту я можу прописати посилання, куди ми будемо переадресовувати користувача. І, наприклад, давайте я зараз скажу те, що я буду переадресовувати користувача по такому URL-адресу, як https google.com. Тобто це офіційна сторінка нашого сайту Google. Якщо я таке зараз оновлю, ми побачимо, що тепер в мене це вже посилання, є підкреслення, це вже якби якась, якісь активний текст. І головне, що якщо я натисну на цей текст, ми помітимо, що я переходжу на сторінку Google. Все відпрацьовує, як і потрібно. Також додатково ми можемо до цього посилання додати якісь ще певні атрибути. Ну, наприклад, давайте я додам ще title. Це, як ми вже знаємо, просто підказка при наведенні. Ну і тут я, наприклад, напишу Go Google, нехай в мене буде така підказка. Оновлюємо, наводжу мишкою, і ми помічаємо, що ось є ця підказка Go Google. Ну, тобто це просто плюс один атрибут додали. Також додатково я б хотів допишу сюди ще такий атрибут, як target. За рахунок target ми можемо вказати, яким саме чином в нас буде відкриватися оця, оце посилання. Я можу вказати тут значення, як self. І це буде поведінка за замовчуванням, тобто я натискаю і якби в цій самій вкладці в нас відкривається, ну, той веб-сайт, на який я, якби робив посилання. Тобто це поведінка за замовчуванням. Але також я можу тут прописати blank, і тепер, коли я буду натискати на це посилання, в мене в новій вкладці відкривається оце все посилання. Тобто за рахунок blank ми можемо просто відкривати посилання в новій вкладці. Ну, і по факту це головний принцип, яким чином ми можемо створювати посилання у мові HTML. Тобто ви можете створювати посилання за рахунок такого тегу, як А. Тут ви вказуєте в href будь-який веб-сайт, вказуєте підказку, ну, це за бажанням. Також вказуєте target, це також за бажанням, і далі у вас вже буде посилання на певний сайт. А тепер давайте спробуємо створити якийсь додатковий файл в нашому проекті і спробуємо створити посилання саме на цей додатковий файл. Як це можна зробити? Спершу, давайте дійсно створюємо новий файл. Тобто я тут в нашому проекті створюю файл. Назва цього файлу повинна бути якоюсь іншою. Це може бути будь-яка назва. Ну, я, наприклад, вказую, що цей файл нехай буде називатися як about.html. Такий файл я створюю. Далі я б хотів прописати відразу, можливо, всю основну структуру, тому я давайте скопіюю всю цю структуру з минулого файлу і просто тут я її пропишу. Також я, давайте, поміняю title. Тут буде написано: "Сторінка про нас". І тут в мене, нехай, нічого такого не буде виводитися. В мене тут, нехай, просто буде написано щось на кшталт h1, і тут буде написано, А тут нехай буде написано те саме, що і в title, тобто буде написано сторінка про нас. Отакий файл я просто зберігаю, і тепер я хочу зробити посилання саме на оцей мій додатковий файл. Це як буде, ну, як, як щось на кшталт іншої сторінки. Щоб мені зробити таке посилання, я тут відкриваю так само тег А. Тут я прописую href. І в якості значення я прописую просто назву того файлу, на який я хочу переходити. Тобто в мене в одній і тій самій папці є файл index, а також about, і тому, щоб перейти мені на файл about, я просто прописую назву цього файлу. Все. Додатково я тут давайте пропишу, ну, просто той самий текст: "Сторінка про нас". Таке я зберігаю, оновлюю. І от в нас є нова, нове посилання. Натискаю на це посилання, ми переходимо по такому URL-адресу, як about.html. Це дійсно інший файл, це сторінка про нас. Ну і все тут відображується коректно. Таким чином ви можете створювати ще посилання на інші файли, які є в вашому проекті. Ну і таких посилань тут може бути у вас безліч. Додатково тут ви, звісно, можете теж додати target та title, але я просто не хочу зараз це робити, тому ці атрибути я сюди не додавав. Окрім цього, ви ще можете створювати посилання, яке буде посилатися на певну частину вашої сторінки. Такі посилання називаються якорьними посиланнями. Давайте ми таке спробуємо зробити. Для початку десь внизу я створюю новий тег А і замість href я тут прописую такий атрибут, як name. І просто вказую назву для, якби, оцього тегу. Тут ви можете прописати якийсь текст, а можете навіть ніякого тексту тут і не прописувати. Це просто в нас буде якір, до якого ми, якби, будемо підтягуватися, ну, стосовно всієї цієї сторінки. Також я, напевно, давайте тут пропишу декілька тегів br, просто щоб в нас були переходи на нові, на нові рядки. Ну, і оновлю сторінку. Ось так це зараз все буде виглядати. Тобто в нас є два посилання, є переходи на нові рядки. Ну, а цей тег, він ніяк не відображується, адже ніякого тексту я тут не прописував, тому цей тег він не відображується. І от що я хочу зробити. Я хочу створити зараз посилання, при натисканні на яке я буду, якби, перекидуватися до оцього місця, там, де в нас прописан name bottom. Щоб мені створити таке посилання, я прописую тут А, href. Давайте трошки пізніше я пропишу цей href. Поки що напишу тут просто "Вниз", ось такий текст тут в мене буде написано. І тепер, щоб мені створити посилання саме на ось це місце, мені потрібно прописати знак решітки, і далі вказати ту назву, яка ось тут була прописана. Таким чином це буде посилання на частину нашого сайту. Давайте я таке зараз оновлю. Можливо, також я тут допишу декілька тегів br, щоб в нас були переходи на нові рядки. Ось так це буде виглядати. Тобто в нас є два посилання, є переходи на нові рядки. Ну і натискаємо просто "Вниз". І ми помічаємо, що наразі, давайте я навіть це трошечки збільшу. Наразі ми, якби, перекинулися до певної частини нашої сторінки. Це, якби, до самого низу ми перекинулися сторінки. А також в URL-адресі тут можна помітити, що ми саме перейшли по файлу index.html до частини, яка називається, як bottom. Якщо у вас це не спрацювало, то просто приблизьте трошечки сайт, щоб воно, ну, якби, було майже на на весь розмір, якби, вашого екрану. І тоді, якщо ви натиснете на "Вниз", то все повинно спрацювати, як ми і задумали. Тобто зараз ми створили якір до певної частини нашого веб-сайту. Ну, і, напевно, останній тип посилань, який ще потрібно розглянути, це посилання, яке вас буде вести на написання листа по певній електронній пошті. Щоб нам зробити таке посилання, ми, напевно, давайте його десь ось тут пропишемо. Ми повинні відкрити так само тег А. Тут я давайте пропишу щось на кшталт admin@itproger.com. Далі тут я прописую href, і якщо я тут просто пропишу в href оцю пошту, то, насправді, нічого спрацьовувати не буде. От навіть я можу натиснути, в нас нічого не спрацювало, бо, давайте зараз покажу, бо просто ми, якби, з вами перейшли по такому адресу, як admin@itproger.com. Тобто, ну, нічого не спрацювало, бо такої, такої сторінки тут в нас не існує і виникла помилка. Щоб нам саме перенаправляти користувача на відправку пошти по цій адресі, нам перед цією адресою потрібно прописати "mailto:" двокрапка, і далі вже вставляємо електронну пошту. Тепер кожен раз, коли ви будете натискати на цю пошту, у вас буде відкриватися або програма з поштою, або просто буде відкриватися можливість відправити сам цей лист. Ну, я зараз натискати не буду, щоб тут в мене всі ці програми не відкривалися, але ви можете протестувати. Тобто, в принципі, тут у мові HTML є ось такі різні типи для створення посилань. Перше посилання - це, коли ми посилаємося на якийсь інший веб-сайт, тут ми вказуємо URL-адресу цього сайту. Друге посилання - це, коли ми посилаємося на якийсь файл з нашого проекту. Також ми можемо створювати посилання на певне місце цього ж файлу. А також ми можемо робити посилання на певну пошту. Оце всі типи посилань, які тут існують. Ну що ж, на цьому в мене все. Сподіваюсь, відео вам сподобалося. Якщо так, то підписуйтесь на канал, а також вступайте в мою Telegram-групу. Всі посилання в описі до цього відео. Побачимося з вами в майбутньому. Бувайте.