Як вставити гіперпосилання в HTML? Створення та використання гіперпосилань у HTML

Як вставити гіперпосилання в HTML? Створення та використання гіперпосилань у HTML

Гіпертекст - це текст, що містить посилання на інший текст. Прикладом можуть бути примітки автора на складні визначення або виноски перекладачів внизу сторінки книги, якщо в ній зустрічається текст іноземною мовою. Сайти Інтернету - це складна система гіпертекстових переходів з однієї сторінки на іншу, в межах самої сторінки, а також між незв 'язаними єдиною тематикою ресурсами. Така структура практична, економить багато часу, дозволяє відвідувачу швидко знайти необхідну інформацію і не розгубитися у великій кількості переходів.

Вставлення гіперпосилання

У HTML для вставки гіперпосилання використовується дескриптор (тег) < a >, який вставляється в потрібне місце. Зазвичай його мають у своєму розпорядженні серед тексту, оскільки гіперпосилання саме по собі є текстовою структурою. Але посилання бувають ще графічними (іконки, кнопки, картинки); про них буде розказано далі. Їхнє розташування на веб-сторінці не обмежується текстом, а залежить від дизайнерського рішення творця сайту.


<a href=«https://google.com/" > головна сторінка Google </a >

Це приклад того, як вставити гіперпосилання в документ HTML, що здійснюється за допомогою теґу < a >. Відвідувач сайту побачить підкреслений текст, відмінний від кольору навколишнього тексту (колір HTML-посилання може бути будь-яким), "головна сторінка Google", натиснувши на який, він потрапить на головну сторінку пошукової системи "Гугл". Слід зазначити, що текст гіперпосилання повинен містити інформацію про те, куди буде здійснено перехід. Цього принципу слід дотримуватися і прийняти за правило!

Структура теґу < a >... </a >

Можна помітити, що тег < a > - парний: потрібен тег, який слід закрити </a >.

href - атрибут теґу, вказує призначення посилання.

https://google.com/- значення атрибуту, що полягає в собі URL-адреса ресурсу, на який здійсниться перехід. Воно полягає в подвійні або одинарні лапки. Це залежить від структури вкладеності тегів за правилами HTML.

<a href=«https://google.com/" > головна сторінка Гугл </а >


вся ця конструкція називається елементом веб-документа.

За правилами HTML, одні елементи можуть містити інші елементи. Тег < a > не виключення. Якщо програмісту необхідно вибрати жирне слово Google, це робиться за допомогою тега < b > </b > за загальними правилами форматування тексту, дотримуючись послідовності вкладеності тегів. Веб-майстер повинен знати, як створити гіперпосилання в HTML без помилок, інакше вони не будуть працювати. Непрацюючі посилання на комп 'ютерному сленгу називають "битими".

<a href=«https://google.com/" > головна сторінка < b > Гугл </b > </a >

Тут: елемент

<a href=«https://google.com/" > головна сторінка < b > Гугл </b > </a >

містить вкладений елемент

< b > Гугл </b >


Тепер відвідувач сторінки побачить гіперпосилання з виділеним жирним текстом словом "Гугл".

Абсолютні гіперпосилання

Гіперпосилання, що використовують абсолютні URL-адреси сайтів, що містять імена доменів (.ru, .com, .org, .gov), називаються абсолютними і мають наступний синтаксис:

протокол://назва домену/шлях до файла

Приклад адреси поширеної в Америці пошуковика: https://aol.com - абсолютний, оскільки містить ім 'я домену .com.

Абсолютні гіперпосилання використовуються для переходів на сторінки інших сайтів або доступу до ресурсів, розташованих на іншому сервері. Перехід здійснюється за допомогою протоколів Інтернету. Протоколи - це не тема цієї статті, але оскільки вони беруть участь у створенні гіперпосилань, необхідно хоча б коротко про них згадати:


  • http і https - найбільш часто зустрічаються; за ними здійснюється перехід між інтернет-сторінками різних сайтів;
  • ftp - протокол для завантаження файлів на сервер або скачування користувачем з сайту;
  • mailto - поштовий протокол, за яким надсилається електронна пошта безпосередньо з сайту, не заходячи в особисту пошту.

Існують ще кілька протоколів особливого призначення (gopher, telnet), які зустрічаються досить рідко, використання яких потребує спеціальних знань у програмуванні або системному адмініструванні.

Відносні гіперпосилання

При відносній адресації використання гіперпосилань в HTML служить для переходів всередині ресурсу і не веде за його межі. Якщо сторінка настільки велика, що працює вертикальна смуга прокрутки, іноді дуже довга, як, наприклад, у словниках, то дуже зручно і доцільно використовувати відносні посилання для швидкого переходу до потрібної букви.

Створюючи інтернет-словник, програміст на початку сторінки має алфавіт, і якби не застосування посилань, то користувачеві довелося б дуже довго крутити колесо миші, щоб дістатися до букви "Я".

Для створення відносного посилання використовується атрибут name теґу < a >:

< a name = "ya" > Перейти до літери Я </а >


де ya називається якорем, а Перейти до букви Я - якорем призначення. Для правильного відображення якорів рекомендується використання латинських літер і цифр, тому не варто писати "Я", хоча так було б зрозуміліше.

Тепер, щоб здійснювався перехід від алфавіту на початку сторінки до букви "Я", потрібно зробити прив 'язку якоря в тому місці HTML-документа, в якому починаються слова на букву "Я":

< a href = "# ya" > літера Я </а >

перед якорем стоїть знак решітки, без якого перехід до букви не буде працювати.

Відносна адресація під час створення сайту

Зручний і найбільш загальноприйнятий алгоритм створення сайту програмістом:


  • створення теки в комп 'ютері і розташування її в місці швидкого доступу для зручності;
  • створення у цій теці головної сторінки сайту index.html;
  • створення другорядних веб-сторінок (index.html/page2);
  • створення теки і розміщення в ній графічних файлів;
  • створення теки і розміщення в ній інших об 'єктів (файли для скачування, наприклад);
  • наповнення сайту контентом;
  • розміщення файлів сайту на хостингу.

Обов 'язково доведеться використовувати посилання для зв' язку між елементами сайту, і дуже до речі буде знати, як вставити гіперпосилання в HTML на іншу сторінку цього ж сайту. Якщо файли сайту знаходяться в одній директорії, на одному сервері, то немає необхідності використовувати абсолютну адресацію. Під час передачі файлів сайту на хостинг зв 'язок між об' єктами збережеться, тому що вони на хостингу також розмістяться в одній директорії.

Припустимо, програміст створив головну сторінку сайту index.html, на якій є посилання на іншу сторінку page2.html, прикрашену картинкою img.png. Тоді відносний шлях до цієї картинки виглядатиме так:

< a href = "/page2.html/img.png "> картинка </a >

Порада: при вивченні цієї теми найкраще використовувати простий редактор тексту через те, що потрібно придбати зноровку в правильному написанні адрес переходу і щоб навчитися розбиратися в чужому коді. На цьому етапі буде хорошим результатом без помилок прописана гіперпосилання в блокноті, HTML їх не прощає і видає помилки.

Способи переходів за гіперпосиланнями

За замовчуванням нова сторінка відкривається в поточному вікні переглядача, коли користувач клікає за гіперпосиланням. Але веб-програміст може змінити типове значення і змусити відкриватися сторінку, наприклад, у новому вікні. Для цього існує атрибут target з визначеним своїм значенням. Найнаочніше це можна висловити таблицею.

Значення атрибута target

_blank

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

_self

відкриває сторінку у поточному вікні (типове значення)

_parent

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

_top

при використанні кадрів скасовує їх всі і відкриває сторінку в поточному вікні переглядача

Синтаксис застосування атрибута target:

<a href=«https://google.com/" target = "_ blank" > головна сторінка гугл </а >

Головна сторінка "Гугл" відкриється в новому вікні.

Примітка: для відкриття сторінок у новій вкладці не існує значень для цього атрибута, а вказується самим користувачем у налаштуваннях переглядача.

Колір гіперпосилань

Досвідчений користувач Інтернету з часом повинен був зауважити, що гіперпосилання відрізняються за кольором від навколишнього тексту, і зазвичай вони сині. Посилання, за якими він переходив і потім повернувся на колишню сторінку, стають бузковими. Використання гіперпосилань у HTML в нестандартній колірній гамі небагато, але виділяє сайт серед інших.

Вказує кольори посилань у теґі < body > за допомогою атрибутів та їхніх значень, у яких використовується колір HTML у системі rgb (# 00FF00) або з прямим зазначенням назви кольору ("green"). Існує три види атрибутів для посилань:

  • link - визначає колір несвідуваного посилання;
  • vlink - визначає колір посилання, за яким користувач вже переходив;
  • alink - визначає колір посилання у момент переходу на іншу сторінку. Це відбувається швидко, тому не завжди можна вловити цей ефект.

Приклад розмітки:

<body link=«#330099» alink=«#FF0000» vlink=«#990066»>

Якщо застосувати ці атрибути в тегу < body >, посилання цього веб-документа будуть темно-синіми, відвідані - лілового, а активні - оранжево-червоного кольору.

Графічні гіперпосилання

Прогрес і розвиток веб-дизайну зобов 'язують знати, як вставити гіперпосилання в HTML як зображення. Зрозуміло, що картинка повинна відповідати вмісту сторінки призначення. Наприклад, головна сторінка сайту про лікарські рослини може бути представлена у вигляді фотографій рослин, клікнувши по яких, користувач перейде на сторінку, на якій описуються лікарські властивості рослини.

Широко застосовується спосіб заміни статичних кнопок (< input type = "button" >) на красиві графічні, створені веб-дизайнером у редакторах графіки (GIMP, Photoshop).

Для вставлення графіки в якості гіперпосилань на сторінки сайту використовується той же синтаксис, тільки замість тексту використовується тег вставки зображення за правилами HTML:

< a href = "page2.html" > < img src = "/images/img1 "alt =" мати-і-мачуха "width =" 50 "height =" 46 "> </a >

До тегу < img > точно так само застосовуються атрибути завдання альтернативного тексту, ширини, висоти та інші.

Дзвінки з сайту

Стандарт html5 розширив функціональні можливості використання Інтернету, і тепер здійснювати дзвінки можна не тільки з телефону, але безпосередньо з сайту. Для цієї мети також можна використовувати гіперпосилання в HTML-документі, і вони мають такий синтаксис:

<a href="/"tel:+ 79xxxxxxxx "" >... абонент... </a >

Замість слова "абонент" прописується зрозумілий контакту, як у телефонній книзі. Також можна розмістити графічний файл (фотографію абонента).

Щоб дзвінки здійснювалися з сайту, необхідна наявність не тільки посилання на номер телефону абонента, але і гарнітури (мікрофон, навушники), встановленої на комп 'ютері VoIP-програма, швидкість інтернету повинна перевищувати 0,5 Мб/сек. Оплата за дзвінки здійснюється витратою трафіку. Тому, якщо Інтернет безлімітний, то дзвінки безкоштовні.

Етика створення гіперпосилань

Розміщуючи сайт в Інтернеті, веб-майстер повинен знати, які види гіперпосилань існують в HTML, і не тільки правильно, професійно їх застосовувати, а й дотримуватися наступних положень:

  • Гіперпосилання має бути добре видно, відрізнятися від навколишнього її тексту. Користувач повинен знати, що це - гіперпосилання.
  • Користувачеві має бути зрозуміло, куди він потрапить, натиснувши на посилання. Для цього доцільно використовувати ще атрибут title, який лаконічно описує сторінку переходу. Синтаксис застосування атрибуту такий:

<a href=«http://yandex.ru/" title = "російський інтернет-портал" > Yandex </a >

  • Користувач повинен отримати правдиву інформацію про файл, який буде скачан при переході за посиланням.

Потрапивши не на очікувану сторінку або завантаживши не той файл, користувач у 99% випадків одразу ж покине сайт і в майбутньому ніколи на нього не зайде.

Анти-Seo при створенні гіперпосилань

Крім технічної сторони питання про те, як вставити гіперпосилання в HTML, слід висвітлити ще й моральний аспект. Існує багато сайтів, доступ до яких користувачам блокується програмами безпеки (антивірусом) або навіть державою. Це ті сайти, які були створені нечистими на руку веб-програмістами.

Одна з хитрощів, до якої вони вдаються, - це вставка "невидимих" гіперпосилань на веб-сторінку. Шахраї знають, як створити гіперпосилання в HTML, а за допомогою атрибутів прибрати підкреслювання посилання і призначити їй колір навколишнього тексту з тим, щоб пересічний користувач не побачив її. А за допомогою інших інструментів веб-технологій (CSS, JavaScript, PHP) можна запрограмувати їхню поведінку. Наприклад, подія OnMouseOver мови JavaScript активує дію елемента веб-сторінки. Коли користувач проводить курсором за невидимим посиланням, він потрапляє на рекламну сторінку іншого сайту. Або ще гірше, коли присутні невидиме посилання на файл і на його комп 'ютер починає скачуватися і встановлюватися непотрібне програмне забезпечення. Зазвичай це віруси, які змінюють домашню сторінку браузера, захаращують жорсткий диск масою програм та інше.

Скоро такі сайти потрапляють в "чорний список" вірусних баз, систем безпеки і серед самих користувачів Інтернет. Такі сайти довго не живуть, і їм доводиться змінювати свої назви, нескінченно мігрувати по Інтернету, змінюючи хост-провайдерів. Це не сприяє розкрутці сайту, до чого завжди прагне його творець, ніколи не зробить його мегапорталом, таким як, наприклад, соцмережі. Крім іншого, такі хитрощі викликають багато негативних емоцій у постраждалих від цих дій людей.