Links en afbeeldingen zijn twee van de meest voorkomende bronnen die u aan uw webpagina's toevoegt, dus het is belangrijk om te weten hoe u ze correct moet adresseren.
Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.
Elke website moet verwijzen naar bepaalde bronnen, of het nu gaat om afbeeldingen, bestanden of andere webpagina's. Beslissen hoe u naar andere bestanden wilt linken, is uiterst belangrijk om ervoor te zorgen dat browsers ze correct lokaliseren.
U kunt naar bronnen linken met behulp van een relatieve of absolute URL. Dit geldt zowel voor lokale bestanden op een computer als voor protocolgebaseerde URL's die via internet toegankelijk zijn.
Een absoluut URL-pad gebruiken
Een absolute URL bevat het volledige pad naar een bepaalde bestandslocatie. Voorbeelden hiervan zijn het volledige pad naar bestanden op uw computer:
- bestand:///C:/Users/Sharl/Desktop/test.html
- bestand:///C:/Users/John/Documents/Work/Q4Summary.docx
- bestand:///C:/Users/Mark/Documents/Music/Recording.mp3
Een ander voorbeeld bevat een volledige protocol-URL, die u kunt gebruiken om een bron te identificeren die u via internet wilt verzenden. Meestal beginnen deze met "https" of "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
De absolute URL bevat alle informatie die nodig is om het bestand of de bron te lokaliseren die u probeert te openen. Dit is vereist als u naar een externe site linkt.
- Bouw een eenvoudige website in HTML door een nieuwe map te maken en twee nieuwe bestanden toe te voegen genaamd index.html En stijlen.css.
- In index.html, voeg wat HTML-code toe om een eenvoudige website te maken:
<!DOCTYPE html>
<html lang="nl">
<hoofd>
<titel> Mijn website </title>
<meta tekenset="UTF-8">
<metanaam="uitkijk postje" inhoud="breedte=apparaatbreedte, beginschaal=1">
<link rel="stijlblad" href="stijlen.css" />
</head>
<lichaam>
<div klasse="container">
<h1> Mijn website </h1>
<P> Welkom op mijn website. </P>
</div>
</body>
</html> - In stijlen.css, voeg wat styling toe aan de webpagina.
lichaam {
font-familie: Arial, Helvetica, schreefloos;
}.container {
weergeven: flex;
flex-richting: kolom;
items uitlijnen: centreren;
}.mb28 {
marge-onder: 28px;
} - In index.html, voeg een toe tag in de container div en voeg de absolute URL toe aan de hoofdsite van Google ( https://www.google.com).
<een href="https://www.google.com" klasse="mb28">Google.nl</A> - U kunt ook online toegang krijgen tot afbeeldingen met behulp van het volledige absolute pad naar het opgeslagen bestand. Je kunt ook extra stappen ondernemen om ervoor te zorgen dat je hebt toegevoegd responsieve afbeeldingen naar uw HTML webpagina.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formaat&passen=bijsnijden&w=3870&q=80" alt="Leuke vogelfoto" klasse="mb28" breedte="900" hoogte="600"> - Klik op de index.html bestand om het in een browser te openen en de afbeelding te bekijken die is opgehaald van de externe locatie.
- Maak vanuit de hoofdmap van uw website een nieuwe map om afbeeldingen op te slaan, genaamd Afbeeldingen. Voeg in de map een nieuwe afbeelding toe en geef deze een naam, zoals CuteBird.jpg.
- Identificeer het absolute pad naar het afbeeldingsbestand dat u zojuist hebt toegevoegd. U kunt dit doen door het te vinden in het navigatiepad van de app voor bestandsbeheer van uw besturingssysteem. U moet ook de bestandsnaam toevoegen aan het einde van het pad. Bijvoorbeeld: "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- In index.html, vervangt u uw afbeeldingstag door een nieuwe afbeelding die het absolute pad gebruikt dat naar de CuteBird.jpg bestand dat op uw computer is opgeslagen. Vergeet niet om het voorvoegsel file:// toe te voegen om een lokale bestandssysteembron aan te geven. Op Unix en macOS kunt u vervolgens het absolute pad toevoegen dat u in de vorige stap hebt geïdentificeerd. In Windows moet u backslashes vervangen door schuine strepen naar voren en een extra schuine streep naar voren toevoegen voor de stationsletter, bijvoorbeeld:
- Klik op de index.html bestand om het in een browser te openen en de afbeelding te bekijken die op uw computer is opgeslagen.
Een relatief URL-pad gebruiken
Een relatieve URL slaat slechts een deel van de URL of het pad op en is meestal relatief ten opzichte van de locatie van het huidige bestand of gedeelte van een website.
In het bovenstaande voorbeeld om toegang te krijgen Logo.ico van index.html Als u een relatieve URL gebruikt, gebruikt u het pad "Images/Icons/Logo.ico". Andere voorbeelden zijn:
- Pagina's/Bird1.html
- Afbeeldingen/CuteBird.jpg
- stijlen.css
Wanneer u dezelfde mappenstructuur op een andere computer gebruikt, kan de website het bestand alsnog ophalen. Bij routering via internet, in plaats van de volledige link te gebruiken, zoals " https://example.com/about", u kunt in plaats daarvan relatieve routering gebruiken:
- /about
- /contact
- /projects/local-clients
U kunt een relatieve URL gebruiken om koppelingen of referentieafbeeldingen binnen uw HTML-webpagina te maken.
- Maak in de hoofdmap van uw websitemap een nieuwe map met de naam Pagina's.
- Maak in de nieuwe Pages-map een nieuw bestand met de naam Vogel1.html.
- Bevolken Vogel1.html met HTML-code om de pagina te maken.
<!DOCTYPE html>
<html lang="nl">
<hoofd>
<titel> Vogel 1 </title>
<meta tekenset="UTF-8">
<metanaam="uitkijk postje" inhoud="breedte=apparaatbreedte, beginschaal=1">
<link rel="stijlblad" href="../stijlen.css" />
</head>
<lichaam>
<div klasse="container">
<h1> Koffie </h1>
<P> Coffee is een lieve vogel die dol is op gamen! </P>
</div>
</body>
</html> - Voeg binnen de container-div een afbeeldingstag toe en gebruik een relatieve URL om naar de CuteBird.jpg afbeelding.
<img src="../Afbeeldingen/CuteBird.jpg" alt="Leuke vogelfoto" klasse="mb28" breedte="900" hoogte="700"> - In de index.html bestand, verwijder de bestaande inhoud in de container div. Vervang het door een enkele A tag die een relatieve link gebruikt om het Vogel1.html bestand.
<div klasse="container">
<h1> Mijn website </h1>
<P> Welkom op mijn website. </P>
<een href="Pagina's/Bird1.html" klasse="mb28">Vogel 1: Koffie</A>
</div> - Klik op de index.html bestand om het in een browser te openen en klik op de nieuwe link om naar toe te navigeren Vogel1.html.
Nu kunt u het verschil bepalen tussen absolute en relatieve URL's. U kunt nu extra voorzichtig zijn om ervoor te zorgen dat uw bronnen altijd worden opgehaald.
U moet er ook altijd voor zorgen dat alle links waartoe uw gebruikers toegang hebben, veilig zijn.