HTML хипервръзки (линкове)

Тук ще научите за основния тип връзка, хипервръзката, наричана също ( jump link ) и  как да я създадавате. Хипервръзка ( или връзка ) е дума, група от думи, или HTML изображение, върху което може да кликнете за да прескочите към друга страница/документ. По принцип ( jump link ) е просто връзка между различни обекти. Обикновено това е връзка между стартова тема и целева тема, но тя може да бъде и връзка към PDF, може да бъде и връзка към външна уеб страница, понеже е много гъвкава. Как се прави връзка – чрез <a> тага се дефинира HTML хипервръзка. A хипервръзка (или връзка) е дума, група от думи, или изображение, върху което може да кликнете за да прескочите към друга страница/документ. Когато преместите курсора върху хипервръзката, той ще се превърне в малка ръчичка (pointer). Най-важният атрибут на <a> елементa е href атрибутa. Той дефинира адреса на връзката. По подразбиране (ако няма промени чрез CSS), връзките изглеждат по еднакъв начин във всички браузъри:

• Една непосещавана връзка е подчертана в синьо
• Посещавана връзка е подчертана в лилаво
• Активните линкове са подчертани в червено

Синтаксис на HTML Връзките

HTML кодът за връзка не е труден. Той изглежда така както е в примера по-долу.

Атрибутът href определя адреса към който води линка.

горния код ще изглежда по този следния начин в страницата: Посетете W3Schools.bg Когато потребителя кликне върху тази връзка, ще бъде изпратен в началната страница на W3Schools.bg. Насоки: В “ Link текста „не е нужно да е само текст. Вътре може да не слагате текст, а символ или дори картинка, която да играе ролята на хипервръзка. Без предна наклонена черта на адресите на подпапките може да генерирате две заявки към сървъра. Много уеб сървъри автоматично добавят наклонена черта в лентата на адреса и след това създават нова заявка.

HTML Цветове на Линковете

По подразбиране връзката ще се покаже по този начин (във всички браузъри):

• Непосещавана връзка е подчертана и синя
• Посетената връзка е подчертана и лилава
• Активната връзка е подчертана и червена

HTML връзки – Атрибута ‘target’

Атрибута target определя къде да бъде отворена новата страница. В примерът по-долу, новата страница ще се отвори в нов прозорец или в нов раздел в браузъра: В целевата атрибут определя къде да се отвори свързания документ. Целевият атрибут може да има една от следните стойности:

• <a>_blank – Отваря свързания документ в нов прозорец или раздел
• <a>_self – Отваря свързания документ в същия прозорец / раздел, в който е щракнат (това е по подразбиране)
• <a>_parent – Отваря свързания документ в основната рамка
• <a>_top – Отваря свързания документ в цялото тяло на прозореца
• <a>framename – Отваря свързания документ в име на рамка

Този пример ще отвори свързания документ в нов прозорец/таб на браузъра:

Ако уеб страницата ви е заключена в рамка, можете да използвате target=“_ top“, за да излезете от рамката:

HTML връзки – Изображение като връзка

Обикновено изображенията се използват като връзки:

Забележка : border:0; се добавя, за да предотврати извеждането на IE9 (по-рано) извън границата на изображението (когато изображението е връзка).

HTML връзки – Създаване на отметка

HTML отметките се използват, за да позволят на читателите да прескачат определени части на уеб страница. Маркерите могат да бъдат полезни, ако вашата уеб страница е много дълга. За да направите маркер, трябва първо да създадете маркера и след това да добавите връзка към него. Когато кликне върху връзката, страницата ще се превърти до мястото с маркера.

Първо създайте маркер с идентификационния атрибут:

След това добавете връзка към отметката („Премини на глава 4“) от една и съща страница:

Или добавете връзка към отметката („Премини на глава 4“) от друга страница:

HTML Връзки – атрибута ID

Атрибутът id може да се използва за създаване на показалец вътре в HTML документa. Показалеца(Bookmarks) не се показва по никакъв специален начин. Той е невидими за читателя. Използва се най-често, за да е по-лесно достъпен със CSS. Пример за хипервръзка с id атрибут:

Създаване на връзка към „Полезни съвети“ вътре в същия документ. Така използвайки id-то, хипервръзката ще ни прати конкретно към тази част от страницата:

Или, да създадете връзка към „Полезни съвети“ в друга страница:

Обобщение на Главата

• Използвайте елемента <a>, за да дефинирате връзка
• Използвайте атрибута href , за да определите адреса на връзката
• Използвайте целевия атрибут, за да определите къде да се отваря свързаният документ
• Използвайте елемента <img> (вътре в <a>), за да използвате изображението като връзка
• Използвайте идентификационния атрибут (id = “ value „), за да дефинирате маркерите в дадена страница
• Използвайте атрибута href (href = „# value „), за да се свържете с маркера