Et websted er en samling af websider. Og disse sider skal være forbundet eller forbundet med noget. Og for at gøre det skal vi bruge et tag leveret af HTML: atagget.

Dette tag definerer et hyperlink, der bruges til at linke fra en side til en anden. Og aelementets vigtigste attribut er hrefattributten, som angiver linkets destination.

I denne vejledning vil jeg vise dig, hvordan du opretter HTML-hyperlinks ved hjælp af hrefattributten på atagget.

• Hvad er et link?
• Sådan oprettes interne links
• Gennemse sider på samme niveau
• Gennemse sider, der findes i en anden mappe
• Gennemse fra en side i en mappe til roden
• Sådan oprettes eksterne links
• Sådan oprettes ankerlink
• Naviger på samme side
• Naviger på en anden side
• Konklusion

Hvad er et link?

Et link er klikbar tekst, der giver dig mulighed for at gennemse fra en side til en anden eller til en anden del af den samme side.

I webudvikling er der flere måder at oprette links på, men den mest almindelige er ved hjælp af atagget og hrefattributten. Denne sidste er hvor vi angiver linkets destinationsadresse.

Den atagget hjælper os med at skabe tre vigtigste typer links: et internt link, et eksternt link, og et anker link. Når det er sagt, kan vi nu dykke ned i, hvordan man opretter et internt link i det næste afsnit.

Sådan oprettes interne links

Når det kommer til at opbygge et websted, er det fornuftigt at have en forbindelse mellem sider. Og så længe disse links tillader os at navigere fra side A til side B, kaldes det et internt link (da det altid er i samme domænenavn eller på samme websted). Så et internt link er et link, der gør det muligt at navigere til en anden side på et websted.

Nu i betragtning af vores mappe er struktureret som følger:

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

Her har vi tre brugssager, og for hver opretter vi et eksempel.

Gennemse sider på samme niveau

• index.html

Browse to Page 1 

Som du kan se, er siden page1.htmlpå samme niveau, derfor er stien til hrefattributten bare navnet på siden.

Gennemse sider, der findes i en anden mappe

• page1.html

Browse to Page 2 

Her har vi en anden brugssag, da den side, vi vil besøge, nu ikke er på samme niveau. Og for at være i stand til at navigere til denne side, skal vi specificere den komplette sti til filen inklusive mappen.

Store! Lad os nu dykke ned i den sidste brugssag.

Gennemse fra en side i en mappe til roden

• page2.html

Browse to the Home Page 

Nu, her for at navigere til index.htmlsiden, skal vi først gå et niveau op, før vi kan søge på den side.

Vi har nu dækket interne links, så lad os gå videre og introducere, hvordan vi navigerer til eksterne links.

Sådan oprettes eksterne links

Det er altid nyttigt at have evnen til at navigere til eksterne websteder også.

Browse to Google 

Som du kan se her, skal vi angive dens URL til hrefattributten for at navigere til Google .

Eksterne og interne links bruges til at navigere fra side A til side B. Imidlertid vil vi nogle gange være på den samme side og navigere til en bestemt del. Og for at gøre det er vi nødt til at bruge noget, der kaldes ankerlink, lad os dykke ned i det i næste afsnit.

Sådan oprettes ankerlink

Et ankerlink er lidt mere specifikt: det giver os mulighed for at navigere fra punkt A til punkt B, mens vi forbliver på samme side. Det kan også bruges til at gå til en del på en anden side.

Naviger på samme side

Go to the anchor 

Sammenlignet med de andre er denne lidt anderledes. Det er det faktisk, men det fungerer stadig på samme måde.

Her, i stedet for et sidelink, har vi en henvisning til et element. Når vi klikker på linket, vil det lede efter et element med samme navn uden hashtag ( about). Hvis det finder det id, gennemser det til den del.

Naviger på en anden side

Go to the anchor 

Dette er stort set det samme som det foregående eksempel, bortset fra at vi er nødt til at definere den side, hvor vi vil gennemse, og tilføje ankeret til det.

Konklusion

Det hrefer atagets vigtigste egenskab . Det giver os mulighed for at navigere mellem sider eller bare en bestemt del af en side. Forhåbentlig hjælper denne guide dig med at opbygge et websted med masser af links.

Tak for læsningen.

Du er velkommen til at nå ud til mig!

TWITTER BLOG NYHEDSBREV GITHUB LINKEDIN CODEPEN DEV

Foto af JJ Ying på Unsplash