Opslagslinks, lister og billeder

  • 5 minutter

Ordet "hypertekst" betyder, at du kan få vist mere end blot tekst på en webside. HTML giver mulighed for at oprette links til andre ressourcer og føje billeder til en side.

Links (eller blot links) gør det muligt for en bruger at navigere til andre ting. Dette kan være en anden side på dit websted, et helt separat websted eller endda en e-mail-adresse. Et af de vigtigste mål for HTML var at tillade, at disse "pointers" føjes til en side for nem adgang. Dette gøres via links.

Det mærke, der bruges til at oprette et link, er a, hvilket er en forkortelse for anker. Indholdet mellem koden åbn og luk a bliver hypertekst, der gør det muligt for en bruger at få adgang til ressourcen.

Den ressource, der refereres til, angives ved hjælp af en attribut kaldet href (eller hypertekstreference). Attributter tilføjes i startkoden og er typisk et navn, der er parret med en værdi (kaldet nøgleværdipar) med værdien i anførselstegn.

<a href="some url">clickable text</a>

Nøgleværdipar bruges i formularer. Hvis du udfylder en formular, bliver du muligvis bedt om at angive dit fornavn og efternavn separat. Formularen har et navn fornavn og et tomt mellemrum og et andet navn Efternavn og et tomt mellemrum. Etiketterne er som nøgler i HTML-attributter, og det, du placerer i det tomme område, er værdien. I HTML-attributter joinforbindes nøglen og værdien med et lighedstegn for at vise, at de hører sammen.

Ressourceindikatorer

Der er mange typer ressourcer, som et link kan pege på. Mange gange links peger på andre websider eller websteder. Men et link kan også pege på en mailadresse, en fil (f.eks. et PDF-dokument), en video eller et billede.

Hvis du vil oprette et link til et eksternt websted, skal du bruge webstedets fulde adresse. Hvis du f.eks. vil oprette et link til Microsofts dokumentationswebsted, kan du bruge:

<a href="/">Microsoft Technical Documentation</a>

Det er muligt at linke til en mailadresse. Denne type link åbner automatisk brugerens mailklient og udfylder feltet Til med den adresse, der er angivet efter mailto: direktivet.

<a href="mailto:someone@example.com">Email us!</a>

Hvis du placerer et link på den HTML-side, du opretter, kan du se, at teksten mellem (ikke inde) start- og slutmærket bliver blå. Du vil også bemærke, at adressen er skjult. Endelig kan du se, at ordet nu kan vælges. Det vil altså være, at du vælger det ord, der skal sendes til ressourcen.

Den tekst, der vises som linket, kaldes linktekst. Brug af god linktekst er en nøgle til at sikre, at din side er tilgængelig for alle brugere. Udtryk som "klik her" er forstyrrende for skærmlæsere og andre ikke-browserværktøjer, der bruges til at navigere på internettet. Som bedste praksis skal du altid bruge linktekst, der kort beskriver den ressource, der refereres til. Du kan få mere at vide om at sikre tilgængelighed ved at udforske modulet Tilgængelighedslæring.

Billeder

Koden img bruges til at vise billeder på en side. I modsætning til de fleste andre elementer har img ingen slutkode. Attributten src bruges til at pege på placeringen af det billede, der skal vises på siden, og alt beskriver billedets indhold for ting som søgemaskiner og skærmlæsere.

Vigtig

Selvom attributterne height og width kan bruges til at angive billedets visningshøjde og bredde, ændrer de ikke selve billedfilens størrelse. Den bedste praksis er at gøre billedfilen til de dimensioner, du bruger på siden.

<img src="headshot.png" alt="Picture of an employee.">

Opretter lister

Du skal ofte vise en liste over oplysninger på en side. Når du opretter dit CV, skal du angive tidligere roller eller kvalifikationer. HTML indeholder to forskellige typer lister, sorteret og ikke-sorteret.

Hvis du vil oprette en liste, skal du først beslutte, hvilken type liste du vil oprette. En sorteret liste sorteres med tal (standarden) eller bogstaver og bruger ol til sorterede lister. En usorteret liste bruger punkttegn og identificeres med ul for usorterede lister. Elementerne er angivet med li for listeelementet.

Ikke-sorteret liste

Følgende opretter en usorteret liste:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Listen blev oprettet:

  • Første element
  • Andet element
  • Tredje element

Sorteret liste

Følgende opretter en sorteret liste:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Listen blev oprettet:

  1. Første element
  2. Andet element
  3. Tredje element