Lenker og bilder er to av de vanligste ressursene du legger til nettsidene dine, så det er nøkkelen å vite hvordan du adresserer dem riktig.
Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.
Hvert nettsted må referere til bestemte ressurser, enten de er bilder, filer eller andre nettsider. Å bestemme hvordan du skal koble til andre filer er ekstremt viktig for å sikre at nettlesere finner dem riktig.
Du kan koble til ressurser ved å bruke enten en relativ eller absolutt URL. Dette gjelder både lokale filer på en datamaskin og protokollbaserte URL-er som du får tilgang til over nettet.
Slik bruker du en absolutt URL-bane
En absolutt URL inneholder hele banen til en bestemt filplassering. Eksempler på disse inkluderer den fullstendige banen til filer på datamaskinen din:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Et annet eksempel inkluderer en fullstendig protokoll-URL, som du kan bruke til å identifisere en ressurs som skal sendes over internett. Vanligvis starter disse med "https" eller "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Den absolutte URL-en inneholder all informasjonen som kreves for å finne filen eller ressursen du prøver å få tilgang til. Dette er nødvendig hvis du linker til et eksternt nettsted.
- Bygg en enkel nettside i HTML ved å opprette en ny mappe og legge til to nye filer kalt index.html og styles.css.
- I index.html, legg til litt HTML-kode for å lage et grunnleggende nettsted:
<!DOCTYPE html>
<html lang="no">
<hode>
<tittel> Min nettside </title>
<metategnsett="UTF-8">
<metanavn="viewport" innhold="width=enhetsbredde, initial-skala=1">
<link rel="stilark" href="styles.css" />
</head>
<kropp>
<div klasse="container">
<h1> Min nettside </h1>
<s> Velkommen til nettstedet mitt. </s>
</div>
</body>
</html> - I styles.css, legg til litt styling på nettsiden.
kropp {
font-familie: Arial, Helvetica, sans-serif;
}.container {
display: flex;
flex-retning: kolonne;
align-items: center;
}.mb28 {
marg-bunn: 28px;
} - I index.html, legg til en tag i container-div, og legg til den absolutte URL-en til Googles hovedside ( https://www.google.com).
<a href="https://www.google.com" klasse="mb28">Google.com</en> - Du kan også få tilgang til bilder online ved å bruke den fullstendige absolutte banen til den lagrede filen. Du kan også ta ekstra skritt for å sikre at du har lagt til responsive bilder til HTML-en din nettside.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&passe=beskjære&w=3870&q=80" alt="Søt fuglebilde" klasse="mb28" bredde="900" høyde="600"> - Klikk på index.html fil for å åpne den i en nettleser og se bildet hentet fra den eksterne plasseringen.
- Fra rotmappen på nettstedet ditt oppretter du en ny mappe for å lagre bilder, kalt Bilder. Inne i mappen legger du til et nytt bilde og gir det et navn, for eksempel CuteBird.jpg.
- Identifiser den absolutte banen til bildefilen du nettopp har lagt til. Du kan gjøre dette ved å finne den i navigasjonsbanen til operativsystemets filbehandlingsapp. Du må også legge til filnavnet på slutten av banen. For eksempel "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- I index.html, bytt ut bildekoden med et nytt bilde som bruker den absolutte banen som peker til CuteBird.jpg fil som er lagret på datamaskinen din. Husk å legge til file://-prefikset for å indikere en lokal filsystemressurs. På Unix og macOS kan du deretter legge til den absolutte banen du identifiserte i forrige trinn. På Windows må du erstatte skråstreker bakover med skråstreker fremover og legge til en ekstra skråstrek før stasjonsbokstaven, for eksempel:
- Klikk på index.html fil for å åpne den i en nettleser og se bildet som er lagret på datamaskinen din.
Slik bruker du en relativ URL-bane
En relativ URL lagrer bare deler av URL-en eller banen, og er vanligvis i forhold til plasseringen til den gjeldende filen eller delen av et nettsted.
I eksemplet ovenfor, for å få tilgang Logo.ico fra index.html ved å bruke en relativ URL, vil du bruke banen "Images/Icons/Logo.ico". Andre eksempler inkluderer:
- Pages/Bird1.html
- Bilder/CuteBird.jpg
- styles.css
Når du bruker samme mappestruktur på en annen datamaskin, vil nettsiden fortsatt kunne hente filen. Når du ruter over nettet, i stedet for å bruke hele lenken som " https://example.com/about", du kan bruke relativ ruting i stedet:
- /about
- /contact
- /projects/local-clients
Du kan bruke en relativ URL for å lage koblinger eller referansebilder på HTML-nettsiden din.
- Opprett en ny mappe som heter i roten til nettstedets katalog Sider.
- Opprett en ny fil som heter i den nye Pages-mappen Fugl1.html.
- Fyll inn Fugl1.html med HTML-kode for å lage siden.
<!DOCTYPE html>
<html lang="no">
<hode>
<tittel> Fugl 1 </title>
<metategnsett="UTF-8">
<metanavn="viewport" innhold="width=enhetsbredde, initial-skala=1">
<link rel="stilark" href="../styles.css" />
</head>
<kropp>
<div klasse="container">
<h1> Kaffe </h1>
<s> Kaffe er en søt fugl som elsker å leke! </s>
</div>
</body>
</html> - Inne i container-div, legg til en bilde-tag, og bruk en relativ URL for å koble til CuteBird.jpg bilde.
<img src="../Images/CuteBird.jpg" alt="Søt fuglebilde" klasse="mb28" bredde="900" høyde="700"> - I index.html fil, fjern det eksisterende innholdet inne i container-div. Bytt den ut med en singel en -taggen som bruker en relativ lenke for å åpne Fugl1.html fil.
<div klasse="container">
<h1> Min nettside </h1>
<s> Velkommen til nettstedet mitt. </s>
<a href="Pages/Bird1.html" klasse="mb28">Fugl 1: Kaffe</en>
</div> - Klikk på index.html fil for å åpne den i en nettleser, og klikk på den nye lenken for å navigere til Fugl1.html.
Nå kan du bestemme forskjellen mellom absolutte og relative nettadresser. Du kan nå være ekstra forsiktig for å sikre at ressursene dine alltid blir hentet.
Du bør også alltid sørge for at alle lenker som brukerne har tilgang til er trygge og sikre.
