Sådan oprettes HTML-hyperlinks ved hjælp af HREF-attributten på tags
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: a
tagget.
Dette tag definerer et hyperlink, der bruges til at linke fra en side til en anden. Og a
elementets vigtigste attribut er href
attributten, som angiver linkets destination.
I denne vejledning vil jeg vise dig, hvordan du opretter HTML-hyperlinks ved hjælp af href
attributten på a
tagget.
- 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 a
tagget og href
attributten. Denne sidste er hvor vi angiver linkets destinationsadresse.
Den a
tagget 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.html
på samme niveau, derfor er stien til href
attributten 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.html
siden, 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 href
attributten 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 href
er a
tagets 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