Уеб сайтът е съвкупност от уеб страници. И тези страници трябва да бъдат свързани или свързани с нещо. И за да го направим, трябва да използваме таг, предоставен от HTML: aтагът.

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

В това ръководство ще ви покажа как да правите HTML хипервръзки, използвайки hrefатрибута на aмаркера.

• Какво е линк?
• Как да създам вътрешни връзки
• Преглеждайте страници на същото ниво
• Прегледайте страници, намиращи се в друга папка
• Преглеждайте от страница, намираща се в папка, до корена
• Как да създам външни връзки
• Как да създадете котва връзки
• Придвижвайте се на същата страница
• Навигирайте на друга страница
• Заключение

Какво е линк?

Връзката е кликващ текст, който ви позволява да преглеждате от една страница на друга или в различна част от същата страница.

При уеб разработката има няколко начина за създаване на връзки, но най-често срещаният е чрез използване на aмаркера и hrefатрибута. Това последно е мястото, където указваме адреса на местоназначението на връзката.

В aмаркер ни помага да се създаде три основни вида връзки: вътрешна връзка, външен линк, както и връзката котва. Въпреки това вече можем да се потопим в това как да създадем вътрешна връзка в следващия раздел.

Как да създам вътрешни връзки

Що се отнася до изграждането на уебсайт, има смисъл да има връзка между страниците. И докато тези връзки ни позволяват да навигираме от страница А до страница Б, тя се нарича вътрешна връзка (тъй като тя винаги е с едно и също име на домейн или на същия уебсайт). Така че, вътрешна връзка е връзка, която позволява навигиране до друга страница в уебсайт.

Сега, като се има предвид, че нашата папка е структурирана, както следва:

├── folder1 | └── page2.html ├── page1.html ├── index.html 

Тук имаме три случая на употреба и за всеки ще създадем пример.

Преглеждайте страници на същото ниво

• index.html

Browse to Page 1 

Както можете да видите, страницата page1.htmlе на същото ниво, следователно пътят на hrefатрибута е само името на страницата.

Прегледайте страници, намиращи се в друга папка

• page1.html

Browse to Page 2 

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

Страхотен! Нека сега да се потопим в последния случай на употреба.

Преглеждайте от страница, намираща се в папка, до корена

• page2.html

Browse to the Home Page 

Сега тук, за да навигираме до index.htmlстраницата, първо трябва да преминем едно ниво нагоре, преди да можем да прегледаме тази страница.

Вече разгледахме вътрешните връзки, така че нека продължим напред и да представим как да се придвижвате до външни връзки.

Как да създам външни връзки

Винаги е полезно да имате възможност да навигирате и до външни уебсайтове.

Browse to Google 

Както можете да видите тук, за да навигираме до Google, трябва да посочим URL адреса му към hrefатрибута.

За навигация от страница А до страница Б се използват външни и вътрешни връзки. Понякога обаче искаме да останем на една и съща страница и да отидем до определена част. И за да направим това, трябва да използваме нещо, наречено анкерна връзка, нека се потопим в него в следващия раздел.

Как да създадете котва връзки

Анкерната връзка е малко по-специфична: тя ни позволява да се придвижваме от точка А до точка Б, като същевременно оставаме на същата страница. Може да се използва и за преминаване към част от друга страница.

Придвижвайте се на същата страница

Go to the anchor 

В сравнение с останалите, този е малко по-различен. Всъщност е така, но все пак работи по същия начин.

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

Навигирайте на друга страница

Go to the anchor 

Това е почти същото като предишния пример, с изключение на това, че трябва да дефинираме страницата, в която искаме да разглеждаме, и да добавим котвата към нея.

Заключение

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

Благодаря за четенето.

Чувствайте се свободни да се свържете с мен!

ТВИТЪР БЛОГ БЮЛЕТИНГ GITHUB LINKEDIN CODEPEN DEV

Снимка от JJ Ying на Unsplash