HTML Links

i denne tutorial lærer du, hvordan du opretter links til andre sider i HTML.

oprettelse af Links i HTML

et link eller hyperlink er en forbindelse fra en internetressource til en anden. Links giver brugerne mulighed for at flytte problemfrit fra en side til en anden, på enhver server overalt i verden.

et link har to ender, kaldet ankre. Linket starter ved kildeankeret og peger på destinationsankeret, som kan være en hvilken som helst internetressource, for eksempel et billede, et lyd-eller Videoklip, en PDF-fil, et HTML-dokument eller et element i selve dokumentet osv.

som standard vises links som følger i de fleste:

• et ikke-besøgt link er understreget og blåt.
• et besøgt link er understreget og lilla.
• et aktivt link er understreget og rødt.

du kan dog overskrive dette ved hjælp af CSS. Lær mere om styling links.

HTML Link syntaks

Links er angivet i HTML ved hjælp af <a> tagget.

et link eller hyperlink kan være et ord, en gruppe af ord eller et billede.

alt mellem tagget <a> og tagget </a> bliver den del af linket, som brugeren ser og klikker på. Her er nogle eksempler på linkene:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

attributten href angiver målet for linket. Dens værdi kan være en absolut eller relativ URL.

en absolut URL er den URL, der inkluderer alle dele af URL-formatet, såsom protokol, værtsnavn og sti for dokumentet, f.eks. https://www.google.com/, https://www.example.com/form.php osv. Mens relative URL ‘ er er side-relative stier, f.eks. contact.html, images/smiley.png osv. En relativ URL indeholder aldrig præfikset http:// eller https://.

Indstilling af mål for Links

attributten target fortæller, hvor det linkede dokument skal åbnes. Der er fire definerede mål, og hvert målnavn starter med et understregningstegn(_):

• _blank — åbner det sammenkædede dokument i et nyt vindue eller en ny fane.
• _parent — åbner det sammenkædede dokument i det overordnede vindue.
• _self — åbner det sammenkædede dokument i samme vindue eller fane som kildedokumentet. Dette er standard, derfor er det ikke nødvendigt at eksplicit angive denne værdi.
• _top — åbner det sammenkædede dokument i hele vinduet.

prøv følgende eksempel for at forstå, hvordan linkets mål grundlæggende fungerer:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

oprettelse af Bogmærkeankre

du kan også oprette bogmærkeankre for at give brugerne mulighed for at springe til et bestemt afsnit på en hjemmeside. Bogmærker er især nyttige, hvis du har en meget lang hjemmeside.

oprettelse af bogmærker er en totrinsproces: Tilføj først id attributten på det element, hvor du vil hoppe, og brug derefter den id attributværdi forud for hash-tegnet (#) som værdien af href attributten for <a> tagget, som vist i følgende eksempel:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

oprettelse af Hent Links

du kan også oprette filoverførselslinket på nøjagtig samme måde som at placere tekstlinks. Bare peg destinations-URL ‘ en til den fil, du vil være tilgængelig til hentning.

i det følgende eksempel har vi oprettet links til lynlås -, PDF-og JPG-filer.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>