Länkar och bilder är två av de vanligaste resurserna du lägger till på dina webbsidor, så det är viktigt att veta hur man adresserar dem korrekt.
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.
Varje webbplats måste referera till vissa resurser, oavsett om de är bilder, filer eller andra webbsidor. Att bestämma hur man länkar till andra filer är extremt viktigt för att säkerställa att webbläsare hittar dem korrekt.
Du kan länka till resurser med antingen en relativ eller absolut URL. Detta gäller både lokala filer på en dator och protokollbaserade webbadresser som nås över webben.
Hur man använder en absolut URL-sökväg
En absolut URL innehåller hela sökvägen till en viss filplats. Exempel på dessa inkluderar den fullständiga sökvägen till filer på din dator:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Ett annat exempel inkluderar en fullständig protokoll-URL, som du kan använda för att identifiera en resurs att skicka över internet. Vanligtvis börjar dessa med "https" eller "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Den absoluta URL: en innehåller all information som krävs för att hitta filen eller resursen du försöker komma åt. Detta krävs om du länkar till en extern webbplats.
- Bygg en enkel webbplats i HTML genom att skapa en ny mapp och lägga till två nya filer som kallas index.html och styles.css.
- I index.html, lägg till lite HTML-kod för att skapa en grundläggande webbplats:
<!DOCTYPE html>
<html lang="sv">
<huvud>
<titel> Min webbsida </title>
<meta teckenuppsättning="UTF-8">
<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1">
<länk rel="stilmall" href="styles.css" />
</head>
<kropp>
<div klass="behållare">
<h1> Min webbsida </h1>
<sid> Välkommen till min hemsida. </s>
</div>
</body>
</html> - I styles.css, lägg till lite stil på webbsidan.
kropp {
teckensnittsfamilj: Arial, Helvetica, sans-serif;
}.behållare {
display: flex;
flex-riktning: kolumn;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - I index.html, lägg till en tagga inuti container div och lägg till den absoluta webbadressen till Googles huvudsajt ( https://www.google.com).
<a href="https://www.google.com" klass="mb28">Google.com</a> - Du kan också komma åt bilder online med den fullständiga absoluta sökvägen till den lagrade filen. Du kan också vidta extra steg för att säkerställa att du har lagt till responsiva bilder till din HTML webbsida.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&passform=skörd&w=3870&q=80" alt="Söt fågelfoto" klass="mb28" bredd="900" höjd="600"> - Klicka på index.html fil för att öppna den i en webbläsare och visa bilden hämtad från dess externa plats.
- Från rotmappen på din webbplats, skapa en ny mapp för att lagra bilder, kallad Bilder. Inuti mappen, lägg till en ny bild och ge den ett namn, t.ex CuteBird.jpg.
- Identifiera den absoluta sökvägen till bildfilen du just har lagt till. Du kan göra detta genom att hitta den i navigeringsvägen till ditt operativsystems filhanterarapp. Du måste också lägga till filnamnet i slutet av sökvägen. Till exempel "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- I index.html, ersätt din bildtagg med en ny bild som använder den absoluta sökvägen som pekar till CuteBird.jpg fil som är lagrad på din dator. Kom ihåg att lägga till prefixet file:// för att indikera en lokal filsystemresurs. På Unix och macOS kan du sedan lägga till den absoluta sökvägen du identifierade i föregående steg. I Windows måste du ersätta bakåtstreck med snedstreck och lägga till ett extra snedstreck före enhetsbokstaven, till exempel:
- Klicka på index.html fil för att öppna den i en webbläsare och visa bilden som är lagrad på din dator.
Hur man använder en relativ URL-sökväg
En relativ URL lagrar bara en del av URL: en eller sökvägen och är vanligtvis relativt platsen för den aktuella filen eller avsnittet på en webbplats.
I exemplet ovan, för att komma åt Logo.ico från index.html med en relativ URL, skulle du använda sökvägen "Images/Icons/Logo.ico". Andra exempel inkluderar:
- Sidor/Fågel1.html
- Bilder/CuteBird.jpg
- styles.css
När du använder samma mappstruktur på en annan dator kommer webbplatsen fortfarande att kunna hämta filen. När du dirigerar över webben, istället för att använda hela länken som " https://example.com/about", du kan använda relativ routing istället:
- /about
- /contact
- /projects/local-clients
Du kan använda en relativ URL för att skapa länkar eller referensbilder på din HTML-webbsida.
- Skapa en ny mapp som heter i roten på din webbplatskatalog Sidor.
- Skapa en ny fil med namnet i den nya Pages-mappen Fågel1.html.
- Befolka Fågel1.html med HTML-kod för att skapa sidan.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<titel> Fågel 1 </title>
<meta teckenuppsättning="UTF-8">
<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1">
<länk rel="stilmall" href="../styles.css" />
</head>
<kropp>
<div klass="behållare">
<h1> Kaffe </h1>
<sid> Kaffe är en söt fågel som älskar att leka! </s>
</div>
</body>
</html> - Inuti container div, lägg till en bildtagg och använd en relativ URL för att länka till CuteBird.jpg bild.
<img src="../Images/CuteBird.jpg" alt="Söt fågelfoto" klass="mb28" bredd="900" höjd="700"> - I den index.html fil, ta bort det befintliga innehållet inuti container div. Byt ut den mot en singel a taggen som använder en relativ länk för att öppna Fågel1.html fil.
<div klass="behållare">
<h1> Min webbsida </h1>
<sid> Välkommen till min hemsida. </s>
<a href="Sidor/Fågel1.html" klass="mb28">Fågel 1: Kaffe</a>
</div> - Klicka på index.html fil för att öppna den i en webbläsare och klicka på den nya länken för att navigera till Fågel1.html.
Nu kan du bestämma skillnaden mellan absoluta och relativa webbadresser. Du kan nu vara extra försiktig för att säkerställa att dina resurser alltid hämtas.
Du bör också alltid se till att alla länkar som dina användare kan komma åt är säkra och säkra.
