Здрастуйте, шановні читачі блогу . Сьогодні я хочу детальніше поговорити про те, що таке гіперпосилання в мові Html, як можна розміщувати їх в тексті на сайті, як зробити посиланням картинку, як правильно використовувати тег «A» та його атрибути «Href» і «Target blank» (відкрити в новому вікні).
Взагалі, гіперпосилання є ключовим елементом мови гіпертекстової розмітки. Крім того, посилання зараз є одним з трьох основних чинників, що впливають на успішне просування сайту. Правильне їх застосування і розуміння того, наприклад, як впливає атрибут rel зі значенням nofollow на їх облік пошуковими системами, може суттєво вплинути на відвідуваність вашого ресурсу.
Що таке гіперпосилання та якір (anchor)
Отже, ми з вами вже встигли познайомилися з застарілими і не рекомендованими для повсякденного використання тегами Font, Pre і Blockquote. Продовжимо подальше знайомство.
Для того, щоб зробити гіперпосилання в Html коді, нам теж знадобиться використовувати тег A. Для нього можна буде використовувати різні атрибути, що задають, наприклад, URL адресу мети переміщення по цьому посиланню (href) або ж розпорядчий відкривати її в новому вікні (target=_blank). Але давайте поговоримо про все по порядку.
Як ми вже згадали трохи вище, гіперпосилання є ключовим елементом мови Html і вони дозволяють посилатися як на внутрішні сторінки свого сайту, так і на інші ресурси інтернету. Скажу банальність — перехід за посиланням здійснюється за допомогою клацання миші по ній (а ви як думали?).
Крім того, що вони можуть підрозділятися на внутрішні або зовнішні, вони ще можуть бути службовими і використовуватися виключно для потреб браузера, за допомогою якого будуть відкриватися сторінки вашого сайту.
У цьому випадку вони не будуть видні на сторінці, т. к. прописуються в області Head вихідного коду документа, вміст якої на сторінці не відображається (про структуру коду мови гіпертекстової розмітки я згадував у статті про директиви коментарів і Доктайп).
Службові гіперпосилання створюються не за допомогою тега «A» (як звичайні), а з допомогою тега «Link». Завдань, що ними виконуються, досить багато, наприклад, з допомогою них до Html-документа підключаються зовнішні файли з таблиць каскадних стилів CSS або, наприклад, підключається іконка Фавикон.
Але сьогодні розглядати те, як можна їх створювати, ми не будемо (до них ще дійде час), а зупинимося докладно на видимих посиланнях, які можна створити всередині області Body і, відповідно, вони будуть відображатися на web-сторінці.
Але, тим не менш, у всіх гіперпосилань (видимих і службових) є одне спільне — всі вони мають в своєму складі обов’язковий атрибут Href. У ньому, як його значення, прописується певне місце в документі (якщо воно було заздалегідь позначено якорем) або ж адресу самого документа в інтернеті (на Href прописується URL адресу або, іншими словами, шлях до сторінки або будь-якого іншого файлу).
Гіперпосилання є елементами навігації, які покликані вас переносити на інші документи в мережі, або здійснювати переміщення по вмісту вже переглядається вами web-сторінки за допомогою заздалегідь зроблених в тілі документа міток, які називаються ще Html якорями (anchor).
Тут може виникнути деяка плутанина, т. к. в SEO під словом «анкор» розуміють текст посилання, але в мові Html під «anchor» мають на увазі саме якір (переклад слова anchor) або ж мітку в тексті, на яку потім можна буде послатися.
Навіщо в Html використовуються якір (anchor)? Це досить зручно при створенні навігації по досить довгій web-сторінці. Напевно, ви зустрічали в мережі, коли на відкритій вами сторінці відразу під заголовком наведені назви розділів статті, опублікованій на цій сторінці.
Таким чином читач зможе відразу перейти до того місця на сторінці, де знаходиться цікава йому інформація, а не морочитися з прокруткою тексту і візуальним пошуком потрібного місця. Зручно і підвищує юзабіліті сайту.
Як створюються якоря і хеш посилання
Отже, наша задача в цьому випадку буде полягати у встановленні в потрібних місцях сторінки (документа) якорів, які в загальному випадку будуть виглядати так:
Тобто для того, щоб зробити anchor, потрібно в порожній тег гіперпосилання «А» прописати єдиний атрибут «Name», значення якого використовувати унікальну мітку, яка не повинна містити пропусків і в якої можна використовувати символи латиниці, цифри, дефіс і підкреслення (у повній аналогії з правилами, за якими можна створювати Урли — [0-9],[a-z],[A-Z],[_],[-]).
При цьому, якір не буде видно на самій сторінці, т. к. всередині елементів «A» ми не прописали ніякого тексту. Однак, створені таким ось чином anchor будуть забруднювати Html-код, і тому зараз набагато частіше ніж якоря використовують інший спосіб створення мітки.
В цьому випадку не потрібно створювати порожній тег «А», а можна використовувати будь-який з уже наявних в потрібному місці тексту елемент. Наприклад, це можуть бути теги заголовків H1-H6 або абзаців P.
Тобто для створення аналога якоря достатньо прописати до будь-якого тегу універсальний атрибут ID (його можна буде використовувати для всіх тегів, і на його основі, до речі, працюють селектори Id в коді CSS), наприклад, так:
Текст заголовка
Так, тепер замість створення потрібної кількості anchor, забруднюючих код і були на даний момент не валідними (не рекомендованими консорціумом W3C, який і розробляє Html), ми просто додає Id.
Нам потрібно буде зрозуміти, як зробити посилання на який-небудь з цих якорів (не важливо яким чином створених).
Виявляється, що для цього потрібно буде, як звичайно, всередині гіперпосилання «А» вставити обов’язковий атрибут Href, але значення якого буде формуватися з імені потрібної мітки (якоря) з передують його знаком решітки «#», яка ще має назву хеш (звідси, до речі, і ростуть ноги у часто використовуваного назви: хеш посилання):
перебере на місце сторінки, позначеної якорем
Зверніть увагу, що при переході на таке гіперпосилання, відкриття нового документу не відбудеться. Браузер прокрутить вже відкриту сторінку до такого стану, щоб місце в тексті, куди ви вставили anchor, зайняло позицію в самому верху екрана. Логічно було б припустити, що значення всіх міток (якорів) на одній сторінці повинно бути унікальним для уникнення непорозумінь для браузера.
Якщо ви робите якір з допомогою атрибута ID зручно розташованому для цього тегу, то потрібно враховувати, що крім обмеження за типом використовуваних символів ([0-9],[a-z],[A-Z],[_],[-]), значення ID обов’язково має починатися з символу латинської букви.
Потім можуть розташовуватися всі допустимі символи в будь-якій кількості, але першим символом мітки якоря в значенні атрибуту ID обов’язково повинна бути буква (латинська, природно). В іншому випадку такий якір, вставлені в Html-код, працювати не буде (в більшості браузерів).
Якщо ви не пропишіть після символу решітки «#» ніякого назви мітки якоря (href=»#»), то така гіперпосилання прокрутить сторінку до початку. Саме так можна буде створити найпростішу кнопку «Вгору», зробивши посилання з картинки (поговоримо про це трохи нижче) і вставивши її в шаблоні свого сайту, наприклад, так:
Href — обов’язковий атрибут тега будь-гіперпосилання
Тепер давайте перейдемо від навігації усередині документа (за допомогою якорів) до навігації зовнішньої, тобто нам потрібно буде зробити посилання на інші документи нашого чи іншого сайту. Тепер Href нам потрібно прописувати вже не мітки якорів, а шлях до відкриття файлу (сторінка за своїм задумом є файлом, подгружаемым в браузер для подальшого відображення).
Тут далі мова повинна піти про абсолютних і відносних посиланнях, але я про них вже більш ніж докладно писав у згаданому матеріалі, тому повторюватися, напевно, не має сенсу. Але знати, як можна вказати шлях до файлу Href зробленої вами гіперпосилання потрібно обов’язково. Тому не застосуйте ознайомитися з наведеним матеріалом.
Однак, нагадаю, при створенні Урлов краще використовувати тільки наступні символи: ([0-9],[a-z],[A-Z],[_],[-]) і не використовувати пробіли. Якщо ми розглядаємо вміст атрибута Href для абсолютних посилань, то схематично це можна представити так:
Якщо відкинути те, що ви рідко будете використовувати, то можна уявити все те ж саме в дещо спрощеному вигляді:
протокол(зазвичай http://доменное_ім’я (наприклад, )/путь_до_файла (web-сторінки)
Крім простого протоколу http на просторах інтернету ви можете зустріти посилання з протоколом https, який відрізняється тим, що в ньому застосовується шифрування. Останній застосовується на сайтах, де є необхідність захистити канал обміну даними між сервером і браузером клієнта. Наприклад, він використовується на сервісах електронних грошей Веб Мані.
В інтернеті ви можете зустріти різні варіанти вмісту Href, наприклад, такий:
https:///videokursy
Або такий (з розширенням файлу):
https:///seo/kak-raskrutit-sajt.html
Суті це не змінює, а от якщо в кінці вмісту атрибута Href всередині гіперпосилання стоятиме слеш, то це означає, що звернення йде вже не до файлу, а до папки, в якій буде шукатися відповідний індексний об’єкт (докладніше про це читайте у статті url адресами згаданої вище).
Точно таким же чином можна зробити посилання для скачування файлу:
Завантажити що-то за посиланням
Як бачите, дана гіперпосилання нічим не відрізняється від звичайної, просто браузер розуміє, що файл з розширенням .zip йому потрібно саме скачати, а не намагатися відкрити для перегляду, як, наприклад, файли документа з розширенням html. Хоча, ви все це можете налаштувати суто індивідуально у своєму браузері під свої особисті потреби.
Створити посилання для скачування файлу по протоколу Ftp (тут можете почитати що таке Ftp) можна за аналогією, замінивши тільки тип пропхала в самому початку вмісту атрибута Href:
Можна ще, наприклад, створити гіперпосилання псевдопротоколом Mailto (поштова), додавши до Href відповідний Url:
При переході за посиланням у вас на комп’ютері з’явиться використовувана вами за замовчуванням поштова програма (в браузері можна налаштувати, щоб лінки з mailto в Href відкривалися в Gmail, в поштовому сервісі Яндекса і ін) і з’явиться діалог створення нового листа, в якому в полі «Кому» буде вставлений наведений у Href поштову адресу.
Насправді, можна зробити досить складні поштові посилання, за допомогою яких будуть заповнюватися і інші поля в діалозі відправки листа, але це використовується досить рідко.
Та й взагалі, вебмастера останнім часом практично перестали використовувати гіперпосилання з mailto в Href з-за того, що їх парсят спамери з усіма витікаючими наслідками. Краще створити на сайті простеньку форму зворотного зв’язку, хоча у мене як і раніше все представлено в класичному вигляді на сторінку з контактами. Треба б поміняти на дозвіллі (або не треба… подумаю).
Як відкрити посилання в новому вікні (target blank)
При створенні посилань в Html коді перед нами часто постає питання — у якому вікні браузера відкривати той документ, на який вона веде? За замовчуванням він буде відкриватися у вже наявному вікні, перекриваючи собою ту сторінку, з якої була проставлена дана гіперпосилання.
Особисто я великий прихильник атрибута Target зі значенням blank, який дозволяє відкривати сторінку в новому вікні, залишаючи відкритою і той документ, де була проставлена дана посилання. Не знаю, як це впливає на юзабіліті мого блогу, але мені цей варіант подобається більше і я його використовую практично в усіх випадках.
В пошуковиках мені теж подобається налаштовувати відкривання посилання в новому вікні, щоб видача завжди була під рукою і завжди можна було б в неї повернутися. Для цих цілей, як вже згадав, Html використовується спеціальний атрибут Target, який за замовчуванням має значення Self:
Відкриє документ у цьому ж вікні
Хоча, звичайно ж, target=»_self» в тезі «A» ніхто не прописує, бо це значення використовується за замовчуванням, а от якщо потрібно відкрити сторінку в новому вікні, то потрібно буде прописати target=»_blank»:
Прописаний атрибут target=»_blank»
Зверніть увагу, що значення атрибута Target пишуться зі знаком підкреслення спочатку (_blank), бо так обумовлено в валидаторе Wc3, що містить нори мови гіпертекстової розмітки. Що примітно, в Html передбачена можливість змінити варіант відкриття посилання прийнятий за замовчуванням.
Наприклад, якщо ви захочете, щоб всі гіперпосилання вашого сайту відкривалися в новому вікні, то потрібно буде області Head, використовуваного вами шаблону, прописати тег Base з атрибутом target=»_blank»:
що там ще
І тепер, якщо якусь з посилань ви захочете відкрити в цьому ж вікні, то в її тег «A» вам вже потрібно буде додати target=»_self», бо за замовчуванням зараз у вас тепер використовується _blank. О, як.
До речі, елемент Base я використовував описаним вище способом, але і укладав у нього область коду з кількома гіперпосиланнями, які потрібно було відкрити в новому вікні. Тобто я використовував ще і закриваючий тег Base всередині області Body, і все працювало. Хоча такий код, звісно ж, виходить не валідним.
Колір гіперпосилань при наведенні і переході — як їх поміняти
У мові Html було так задумано, щоб вам легко було орієнтуватися в тому, яку заслання він вже відкривав, а яка ще залишилася недоторканою.
Для цієї мети використовується колір, який буде змінюватися в тому випадку, коли користувач клацне по гіперпосиланню і підвішений на неї документ успішно відкриється. Повернувшись назад на вихідну сторінку користувач виявить, що відвідана їм посилання поміняла колір. Такий фокус вміють проробляти всі браузери.
За замовчуванням, в чистому Html (без використання властивостей CSS) посилання виділяються підкресленням і можуть мати три варіанти кольору:
В Html 4.01 ці кольори посилань прийняті за замовчуванням, але їх можна змінити за допомогою спеціальних атрибутів, які прописуються в тег Body, який ви зможете знайти в одному з файлів використовуваного вами шаблон. Для зміни всіх трьох кольорів використовуються, відповідно, три атрибута:
Пам’ятаєте, я вже писав про те, як задаються кольори в коді. У відповідності з цим згадані атрибути можуть виглядати так:
Природно, що тут мався на увазі варіант чистого Html, коли з яких-небудь причин не зручно або не можливо використовувати стильове оформлення, в іншому випадку всі ці кольори можна буде легко встановити і змінити з допомогою CSS властивості Color.
Як зробити картинку посиланням — два способу
Ну, тут все зовсім просто. Т. к. тег вставки картинки (img) є рядковим елементом, то за великим рахунком будь-яке зображення можна вважати просто буквою, хіба що тільки більшого розміру.
Вам достатньо буде замість тексту посилання (анкора) вставити тег img, в результаті чого вся область картинки на сторінці стане клікабельним, і якщо клацнути по ній мишею відбудеться перехід по вказаній в коді гіперпосилання. Наприклад так:
У випадку чистого Html навколо картинки, яку ви зробили посиланням, у вас з’явиться рамочка шириною в три пікселя. Причому колір цієї рамочки буде повністю відповідати кольорам посилань прийнятим для вашого сайту (про них ми говорили трохи вище по тексту).
Щоб видалити додавання рамки до зображення, яку ви зробили гіперпосиланням, вам потрібно додати атрибут Border зі значенням нуль в тег Img:
Це дуже простий спосіб зробити картинку посиланням, але є і більш складний варіант, званий картою зображень. В цьому випадку, завдяки використанню досить-таки великого числа Html тегів і атрибутів, можна зробити з однієї картинки цілу карту посилань з активними областями (клікабельними і мають різні форми — прямокутник, коло, багатокутник).
Наприклад, ви можете розмістити велику фото у себе на сторінці і зробити так, щоб при клацанні по різних його частинах відкривалися б різні сторінки з різних гіперпосиланнями. Насправді, описувати карту зображень досить довго, та і навряд чи хто-то в сучасній верстці сайтів буде її використовувати, тому я цього робити не буду, бо «шкурка вичинки не варта».
Удачі вам! До зустрічей на сторінках блогу
