Как да вмъкна хипервръзка в HTML? Създаване и използване на хипервръзки в HTML

Как да вмъкна хипервръзка в HTML? Създаване и използване на хипервръзки в HTML
Как да вмъкна хипервръзка в HTML? Създаване и използване на хипервръзки в HTML
05.03.2022

Хипертекстът е текст, който съдържа връзки към друг текст. Пример са авторските бележки върху сложни дефиниции или бележките под линия на преводачите в долната част на страницата на книгата, ако тя съдържа текст на чужд език. Интернет сайтовете са сложна система от хипертекстови преходи от една страница към друга, в самата страница, както и между ресурси, които не са свързани с една тема. Тази структура е практична, спестява много време, позволява на посетителя бързо да намери необходимата информация и да не се изгуби в голям брой преходи.

Вмъкване на хипервръзка

В HTML дескриптор (таг) се използва за вмъкване на хипервръзка. , който е поставен на правилното място. Обикновено се поставя сред текста, тъй като самата хипервръзка е текстова структура. Но връзките също са графични (икони, бутони, картинки); те ще бъдат обсъдени допълнително. Разположението им на уеб страница не се ограничава до текст, а зависи от дизайнерското решение на създателя на сайта.

начална страница на google

Това е пример за това как да вмъкнете хипервръзка в HTML документ, което се прави с помощта на тага . Посетителят на сайта ще види подчертан текст, различен от цвета на околния текст (цветът на HTML връзката може да бъде всякакъв), „Начална страница на Google“, щракването върху което ще го отведе до главната страница на търсачката на Google. Трябва да се отбележи, че текстът на хипервръзката трябва да съдържа информация за това къде ще бъде направен преходът. Този принцип трябва да се спазва и приема като правило!

Структура на етикета ...

Можете да видите, че етикетът - двойно: изисква се краен етикет.

href атрибуттаг, указва целта на връзката.

https://google.com/- стойност на атрибута A, съдържащ URL адреса на ресурса, до който да навигирате. Огражда се в двойни или единични кавички. Това зависи от структурата на влагане на таговете според правилата на HTML.

начална страница на google

цялата тази структура се нарича елементуеб документ.

Според правилата на HTML някои елементи могат да съдържат други елементи. Етикет не е изключение. Ако програмистът трябва да подчертае думата Google с удебелен шрифт, тогава това се прави с помощта на етикет според общите правила за форматиране на текст, като се спазва последователността на влагане на етикети. Уеб администраторът трябва да знае как да създаде хипервръзка в HTML без грешки или те няма да работят. Неработещите връзки се наричат ​​"счупени" връзки на компютърен жаргон.

Главна страница Google

Тук: елемент

Главна страница Google

съдържа вложен елемент

Google

Абсолютни хипервръзки

протокол://име на домейн/път на файл

Пример за адрес на често срещана в Америка търсачка: https://aol.com - абсолютен, тъй като съдържа името на домейна.com.

Абсолютните хипервръзки се използват за преминаване към страници на други сайтове или за достъп до ресурси, разположени на друг сървър. Преходът се извършва с помощта на интернет протоколи. Протоколите не са тема на тази статия, но тъй като те участват в създаването на хипервръзки, е необходимо поне накратко да ги споменем:

Има още няколко протокола за специални цели (gopher, telnet), които са доста редки, използването на които изисква специални познания по програмиране или системна администрация.

Относителни хипервръзки

При относително адресиране използването на хипервръзки в HTML служи за навигация в рамките на ресурса и не води отвъд него. Ако страницата е толкова голяма, че работи вертикална лента за превъртане, понякога много дълга, като например в речниците, тогава е много удобно и препоръчително да използвате относителни връзки за бързо преминаване към желаната буква.

Когато създава интернет речник, програмистът поставя азбуката в началото на страницата и ако не беше използването на връзки, потребителят би трябвало да превърта колелцето на мишката много дълго време, за да стигне до буквата „I ”.

Отидете на буквата I

Където у аНаречен котва,А Отидете на буквата I- дестинация на котва. За правилното показване на котви се препоръчва използването на латински букви и цифри, така че не трябва да пишете "I", въпреки че така ще бъде по-ясно.

Сега, за да преминете от азбуката в началото на страницата към буквата "I", трябва да закотвите котвата на мястото на HTML документа, където думите започват с буквата "I":

буква I

преди котвата има знак за паунд, без който преходът към буквата няма да работи.

Относително адресиране при създаване на сайт

Най-удобният и най-общоприет алгоритъм за създаване на уеб сайт от програмист:

Определено ще трябва да използвате връзки за свързване между елементи на сайта и ще бъде много удобно да знаете как да вмъкнете хипервръзка в HTML към друга страница на същия сайт. Ако файловете на сайта са в една и съща директория, на един и същи сървър, тогава няма нужда да използвате абсолютно адресиране. При прехвърляне на файловете на сайта към хостинга, връзката между обектите ще се запази, тъй като те също ще бъдат поставени в една и съща директория на хостинга.

Да приемем, че програмист е създал главната страница на сайта index.html, която има връзка към друга страница, page2.html, украсена с изображение img.png. Тогава относителният път до това изображение ще изглежда така:

снимка

Съвет: Когато изучавате тази тема, най-добре е да използвате прост текстов редактор, защото трябва да придобиете умение да пишете адреси за прескачане правилно и да се научите да разбирате кода на други хора. На този етап писмена хипервръзка в бележник ще бъде добър резултат без грешки,HTML не ги прощава и дава грешки.

Начини за следване на хипервръзки

По подразбиране се отваря нова страница в текущия прозорец на браузъра, когато потребителят кликне върху хипервръзка. Но уеб програмистът може да промени стойността по подразбиране и да принуди страницата да се отвори, например, в нов прозорец. Има атрибут за това. мишенас конкретно значение. Най-добре това може да се изрази в таблица.

Синтаксис за прилагане на атрибут мишена:

начална страница на google

Началната страница на Google ще се отвори в нов прозорец.

Забележка: за отваряне на страници в нов раздел няма стойности за този атрибут, но се задава от потребителя в настройките на браузъра.

Цвят на хипервръзката

Опитен интернет потребител трябва да е забелязал с времето, че хипервръзките се различават по цвят от околния текст и обикновено са сини. Връзките, които е последвал и след това се е върнал на предишната страница, стават лилави. Използването на хипервръзки в HTML в нестандартни цветове е малко, но прави сайта да се отличава от останалите.

Задайте цветовете на връзките в етикета използване на атрибути и техните стойности, в които HTML цветът се появява в системата rgb (#00FF00) или с директно указание на името на цвета („зелен“). Има три вида атрибути за връзки:

Пример за маркиране:

Ако приложите тези атрибути в таг , връзките в този уеб документ ще бъдат тъмносини, посетените връзки ще бъдат лилави, а активните връзки ще бъдат оранжево-червени.

Графични хипервръзки

Напредъкът и развитието на уеб дизайна задължава да знаете как да вмъкнете хипервръзка в HTML като изображение. Ясно е, че изображението трябва да съответства на съдържанието на целевата страница. Например, главната страница на сайт за лечебни растения може да бъде представена под формата на снимки на растения, като щракне върху които потребителят ще бъде пренасочен към страница, която описва лечебните свойства на растението.

Широко използван метод е замяната на статичните бутони ( ) до красиви графики, създадени от уеб дизайнер в графични редактори (GIMP, Photoshop).

За вмъкване на графики като хипервръзки към страници на сайта се използва същият синтаксис, но вместо текст се използва таг за вмъкване на изображение съгласно правилата на HTML:

Атрибутите за указване на алтернативен текст, ширина, височина и други се прилагат по същия начин.

Обаждания от сайта

Стандартът html5 разшири функционалността за използване на интернет и сега можете да провеждате разговори не само от телефона си, но и директно от сайта. Можете също да използвате хипервръзки в HTML документ за тази цел и те имат следния синтаксис:

...абонат...

Вместо думата „абонат“ се предписва контакт, който е разбираем за обаждащия се, както в телефонния указател. Можете да поставите и графичен файл (снимка на абоната).

За да се провеждат разговори от сайта е необходимо да има не само връзка към телефонния номер на абоната, но и инсталирана слушалка (микрофон, слушалки) на компютъра Програмата VoIP, скоростта на интернет трябва да надвишава 0,5 Mb/s. Плащането за разговори се извършва според потреблението на трафик. Следователно, ако интернетът е неограничен, тогава разговорите са безплатни.

Етика на хипервръзките

Когато поставя сайт в Интернет, уеб администраторът трябва да знае какви видове хипервръзки съществуват в HTML и не само да ги прилага правилно и професионално, но и да се придържа към следните разпоредби:

  • Хипервръзката трябва да е ясно видима, различна от околния текст. Потребителят трябва да знае, че това е хипервръзка.
  • За потребителя трябва да е ясно къде ще отиде, като щракне върху връзката. За да направите това, препоръчително е да използвате друг атрибут заглавие,който накратко описва преходната страница. Синтаксисът за прилагане на атрибут е:

Яндекс

  • Потребителят трябва да получи вярна информация за файла, който ще бъде изтеглен, когато щракне върху връзката.

След като стигне до грешната страница или изтегли грешен файл, потребителят в 99% от случаите веднага ще напусне сайта и никога няма да го посети в бъдеще.

Anti-Seo при създаване на хипервръзки

В допълнение към техническата страна на въпроса как да вмъкнете хипервръзка в HTML, трябва да се подчертае и моралният аспект. Има много сайтове, до които потребителите са блокирани от програми за сигурност (антивирусни) или дори от правителството. Това са сайтовете, създадени от нечестни уеб програмисти.

Един от триковете, към които прибягват, е вмъкването на „невидими“ хипервръзки в уеб страницата. Измамниците знаят как да създадат хипервръзка в HTML и да използват атрибути, за да премахнат подчертаването на връзката и да й присвоят цвета на околния текст, така че обикновеният потребител да не го вижда. А с помощта на други инструменти за уеб технологии (CSS, JavaScript, PHP) можете да програмирате тяхното поведение. Например събитието JavaScript OnMouseOver задейства действие върху елемент на уеб страница. Когато потребител плъзне върху невидима връзка, той се отвежда до рекламна страница на друг сайт. Или още по-лошо, когато има невидима връзка към файла и ненужен софтуер започва да се изтегля и инсталира на компютъра му. Обикновено това са вируси, които променят началната страница на браузъра, затрупват твърдия диск с маса програми и т.н.

Скоро такива сайтове ще бъдат включени в черния списък от бази данни с вируси, системи за сигурност и сред самите интернет потребители. Такива сайтове не издържат дълго и трябва да променят имената си, да мигрират безкрайно през интернет, да променят хост доставчиците. Това не допринася за популяризирането на сайта, към което неговият създател винаги се стреми, никога няма да го превърне в мегапортал, като например социалните мрежи. Освен всичко друго, подобни трикове предизвикват много негативни емоции у хората, засегнати от тези действия.