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

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

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

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

Начална страница на Google

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

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

Можете да видите този маркер - сдвоени: е необходим маркер за затваряне .

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

https://google.com/ - стойност на атрибута, който включва URL адреса на ресурса, към който ще се осъществи преходът. Състои се от двойни или единични котировки. Зависи от структурата на гнездяването на маркери според правилата на HTML.

начало google

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

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

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

Тук: елемент

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

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

Google

Сега посетителят на страницата ще види хипервръзка с подчертания текст, обозначен с думата "Google".

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

Използват се хипервръзки, използващи абсолютни URL адреси на сайтове, съдържащи имена на домейни (.ru, .com, .org, .gov) абсолютен и да имате следния синтаксис:

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

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

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

• HTTP и https - най-често срещаните са преходът между интернет страниците на различни сайтове;
• ftp - протокол за качване на файлове на сървъра или изтегляне от потребителя от сайта;
• mailto - mail, който изпраща електронна поща директно от сайта, без да влиза в личната ви поща.

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

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

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

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

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

Отидете на писмо Я

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

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

писмото I

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

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

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

• да създадете папка в компютъра и да го позиционирате в бързо достъпно място за удобство;
• създайте в тази папка главната страница на сайта index.html;
• създаване на вторични уеб страници (index.html / page2);
• създаване на папка и поставяне на графични файлове в нея;
• създаване на папка и поставяне на други обекти в нея (файлове за изтегляне, например);
• запълване на сайта със съдържание;
• поставяне на файловете на сайта на хостинга.

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

Например, програмистът създаде основната страница на сайта index.html, на която има връзка към друга страница page2.html, украсена с картинка img.jpg. След това относителният път към тази картина ще изглежда така:

снимка

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

Начини за навигация чрез хипервръзки

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

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

начало google

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

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

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

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

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

• връзка - настройва цвета на невидираната връзка;
• vlink - определя цвета на връзката, с която потребителят вече е превключил;
• alink - настройва цвета на връзката в момента на превключване към друга страница. Това се случва бързо, така че не винаги можете да хванете този ефект.

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

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

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

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

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

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

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

Обажда се от сайта

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

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

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

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

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

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

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

Yandex

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

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

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

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

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

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