Links og billeder er to af de mest almindelige ressourcer, du tilføjer til dine websider, så det er vigtigt at vide, hvordan du adresserer dem korrekt.
Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.
Hver hjemmeside skal referere til bestemte ressourcer, uanset om de er billeder, filer eller andre websider. Det er ekstremt vigtigt at beslutte, hvordan man linker til andre filer, for at sikre, at browsere finder dem korrekt.
Du kan linke til ressourcer ved at bruge enten en relativ eller absolut URL. Dette gælder både lokale filer på en computer og protokolbaserede URL'er, der tilgås via internettet.
Sådan bruger du en absolut URL-sti
En absolut URL indeholder hele stien til en bestemt filplacering. Eksempler på disse omfatter den fulde sti til filer på din computer:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Et andet eksempel inkluderer en fuld protokol-URL, som du kan bruge til at identificere en ressource, der skal sendes over internettet. Oftest starter disse med "https" eller "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Den absolutte URL indeholder alle de oplysninger, der kræves for at finde den fil eller ressource, du forsøger at få adgang til. Dette er påkrævet, hvis du linker til et eksternt websted.
- Byg en simpel hjemmeside i HTML ved at oprette en ny mappe og tilføje to nye filer kaldet index.html og styles.css.
- I index.html, tilføje noget HTML-kode for at oprette et grundlæggende websted:
<!DOCTYPE html>
<html lang="da">
<hoved>
<titel> Min hjemmeside </title>
<meta tegnsæt="UTF-8">
<metanavn="viewport" indhold="width=enhedsbredde, initial-skala=1">
<link rel="stilark" href="styles.css" />
</head>
<legeme>
<div klasse="beholder">
<h1> Min hjemmeside </h1>
<s> Velkommen til min hjemmeside. </s>
</div>
</body>
</html> - I styles.css, tilføje noget styling til websiden.
krop {
font-familie: Arial, Helvetica, sans-serif;
}.beholder {
display: flex;
flex-retning: kolonne;
align-items: center;
}.mb28 {
margin-bund: 28px;
} - I index.html, tilføje en tag inde i container div, og tilføj den absolutte URL til Googles hovedside ( https://www.google.com).
<a href="https://www.google.com" klasse="mb28">Google.com</en> - Du kan også få adgang til billeder online ved at bruge den fulde absolutte sti til den lagrede fil. Du kan også tage ekstra skridt for at sikre, at du har tilføjet responsive billeder til din HTML hjemmeside.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&pasform=afgrøde&w=3870&q=80" alt="Sødt fuglebillede" klasse="mb28" bredde ="900" højde="600"> - Klik på index.html fil for at åbne den i en browser og se billedet hentet fra dets eksterne placering.
- Fra rodmappen på dit websted skal du oprette en ny mappe til at gemme billeder, kaldet Billeder. Tilføj et nyt billede inde i mappen og giv det et navn, som f.eks CuteBird.jpg.
- Identificer den absolutte sti til den billedfil, du lige har tilføjet. Du kan gøre dette ved at finde det i navigationsstien til dit operativsystems filhåndteringsapp. Du skal også tilføje filnavnet til slutningen af stien. For eksempel "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- I index.html, udskift dit billedtag med et nyt billede, der bruger den absolutte sti, der peger til CuteBird.jpg fil gemt på din computer. Husk at tilføje file://-præfikset for at angive en lokal filsystemressource. På Unix og macOS kan du derefter tilføje den absolutte sti, du identificerede i det forrige trin. På Windows skal du erstatte skråstreg med fremadgående skråstreg og tilføje en ekstra skråstreg før drevbogstavet, for eksempel:
- Klik på index.html fil for at åbne den i en browser og se billedet, der er gemt på din computer.
Sådan bruger du en relativ URL-sti
En relativ URL gemmer kun en del af URL'en eller stien og er normalt i forhold til placeringen af den aktuelle fil eller sektion af et websted.
I ovenstående eksempel for at få adgang Logo.ico fra index.html ved at bruge en relativ URL, ville du bruge stien "Images/Icons/Logo.ico". Andre eksempler omfatter:
- Sider/Fugl1.html
- Billeder/CuteBird.jpg
- styles.css
Når du bruger den samme mappestruktur på en anden computer, vil hjemmesiden stadig kunne hente filen. Når du dirigerer over nettet, i stedet for at bruge hele linket som " https://example.com/about", du kan bruge relativ routing i stedet:
- /about
- /contact
- /projects/local-clients
Du kan bruge en relativ URL til at oprette links eller referencebilleder inde på din HTML-webside.
- Inde i roden af dit webstedsbibliotek skal du oprette en ny mappe kaldet sider.
- Inde i den nye Pages-mappe skal du oprette en ny fil kaldet Fugl1.html.
- Befolke Fugl1.html med HTML-kode for at oprette siden.
<!DOCTYPE html>
<html lang="da">
<hoved>
<titel> Fugl 1 </title>
<meta tegnsæt="UTF-8">
<metanavn="viewport" indhold="width=enhedsbredde, initial-skala=1">
<link rel="stilark" href="../styles.css" />
</head>
<legeme>
<div klasse="beholder">
<h1> Kaffe </h1>
<s> Kaffe er en sød fugl, der elsker at spille! </s>
</div>
</body>
</html> - Tilføj et billedtag inde i container-div, og brug en relativ URL til at linke til CuteBird.jpg billede.
<img src="../Images/CuteBird.jpg" alt="Sødt fuglebillede" klasse="mb28" bredde ="900" højde="700"> - I den index.html fil, skal du fjerne det eksisterende indhold inde i container div. Erstat den med en enkelt -en tag, der bruger et relativt link til at åbne Fugl1.html fil.
<div klasse="beholder">
<h1> Min hjemmeside </h1>
<s> Velkommen til min hjemmeside. </s>
<a href="Sider/Fugl1.html" klasse="mb28">Fugl 1: Kaffe</en>
</div> - Klik på index.html fil for at åbne den i en browser, og klik på det nye link for at navigere til Fugl1.html.
Nu kan du bestemme forskellen mellem absolutte og relative URL'er. Du kan nu være ekstra forsigtig for at sikre, at dine ressourcer altid hentes.
Du bør også altid sikre dig, at alle links, som dine brugere kan få adgang til, er sikre og sikre.