HTML

WEB ESSENTIALS

Links, images, paden & favicons

Links

<a> tag

Element om een link plaatsen naar een andere pagina of website

  • Komt van het woord anchor of anker
  • Tweeledige tag
  • Heeft een href-attribuut en eventueel een target-attribuut
<a href="page.html">Link tekst</a>

href attribuut

Een link heeft altijd een href attribuut nodig. Hierin plaats je de locatie waarnaar je wil linken.

href attribuut

Je kan naar verschillende dingen linken:

  • Een andere pagina van dezelfde website
  • Een ander deel op dezelfde webpagina
  • Een externe website
  • Een e-mail adres (mailto:)
  • Een telefoonnummer (tel:)
<a href="page.html">Link tekst</a>
<a href="#target">Link tekst</a>
<a href="https://www.arteveldehogeschool.be">Link text</a>
<a href="mailto:hello@arteveldehs.be">hello@arteveldehs.be</a>
<a href="tel:+123456789">+123456789</a>

href : hypertext reference

target attribuut

Bepaalt hoe een link door je browser behandelt wordt

  • _self: opent de link in het huidige venster (standaard)
  • _blank: opent de link in een nieuw venster of tab
<a href="page.html" target="_blank">Link tekst</a>

Afbeeldingen

<img> tag

Element om een afbeelding weer te geven op je website

  • Enkelvoudige tag
  • Heeft een src-attribuut en een alt-attribuut
<img src="photo.jpg" alt="a sleepy cat"/>

src attribuut

Hier geef je mee welke afbeelding ingeladen moet worden

  • Afkorting voor "source"
  • Je schrijft een pad naar de afbeelding
<img src="photo.jpg" alt="a sleepy cat"/>

alt attribuut

Hier geef je een korte omschrijving mee van de afbeelding, dit wordt gebruikt bij:

  • Screen readers
  • Als de afbeelding niet geladen kan worden
  • Als extra informatie voor zoekrobots
  • Als je extra context wil geven voor AI training data
<img src="photo.jpg" alt="a sleepy cat"/>

Bestandsformaten

Er bestaan heel wat bestandsformaten voor afbeeldingen, welke gebruik je nu best?​

Pixel-based

  • WEBP: Transparantie + animatie
  • JPEG: Grote foto's
  • PNG: hogere kwaliteit + transparantie
  • GIF: Animatie

Bestandsformaten

Er bestaan heel wat bestandsformaten voor afbeeldingen, welke gebruik je nu best?​

Vector-based

  • SVG:  Voor logo's, iconen en eenvoudige illustraties

Bestandsgrootte

Let erop dat de bestandsgrootte van je afbeeldingen
zo klein mogelijk is

  • Wanneer je een website bezoekt, moeten de afbeeldingen eerst ingeladen worden
  • Hoe groter de afbeelding, hoe langer dit duurt
  • Grote afbeeldingen zorgen dus voor trage websites

💡

Compress je afbeeldingen om de bestandsgrootte te verkleinen

Download imageOptim voor Mac of Pinga GUI voor Windows

Rechtenvrije foto's

De meeste foto's die je via Google vindt, hebben auteursrechten en mag je dus niet zomaar gebruiken.

Gratis, rechtenvrije foto's:

Gratis, rechtenvrije vector iconen:

Paden

Paden

Gebruik je om te verwijzen naar een extern bestand, bv:

  • Een andere webpagina
  • Een afbeelding
  • Een stylesheet of Javascript bestand (zien we later)
<!-- Een link -->
<a href="page.html">Link naar een andere HTML pagina</a>

<!--  Een afbeelding -->
<img src="image.jpg">

<!--  Een stylesheet -->
<link href="main.css">

<!--  Een javascript bestand -->
<script src="script.js"></script>

Absoluut pad vs Relatief pad

Er zijn drie manieren om een pad te schrijven

  • Absoluut pad: vertrekt vanuit een url of het laagste niveau (root) van je folder
  • Relatief pad: vertrekt vanuit je huidige locate

  • Root-relatieve paden of expliciete relatieve paden

Absoluut pad

Bevat een volledig webadres en URL naar een bestand of pagina

  • Begint altijd met een protocol (https://, http://, file://)
  • Werkt altijd, onafhankelijk van waar het HTML-bestand vanwaar je linkt zich bevindt.
<!-- Absoluut pad naar een andere pagina -->
<a href="https://www.arteveldehogeschool.be/nl">Artevelde</a>

<!-- Absoluut pad naar een afbeelding -->
<img src="https://ahscdn.be/themes/custom/calibr8_easytheme/logo.svg">

Relatief pad

Verwijzen naar bestanden ten opzichte van de locatie van het huidige HTML-bestand.

  • Je vertrekt van het bestand waar je je bevindt
  • Je navigeert door de mappenstructuur met tekens

Relatief pad

Je navigeert doorheen de mappen met de volgende tekens:

  • Geen teken = huidige map
  • ../ = één map omhoog
  • ../../ = twee mappen omhoog

 

Relatief pad

website/
├── index.html
├── contact.html
├── images/
│   ├── logo.png
│   └── foto.jpg
├── css/
│   └── style.css
└── blog/
    ├── artikel.html
    └── images/
        └── banner.jpg
<a href="contact.html">Contact</a>
<a href="blog/artikel.html">Artikel</a>

<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/style.css">
<a href="../index.html">Terug naar home</a>
<a href="../contact.html">Contact</a>

<img src="../images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">
<link rel="stylesheet" href="../css/style.css">

Mappenstructuur

vanuit index.html

vanuit blog/artikel.html

Root-Relatief pad

Je navigeert vanuit de root-folder (hoofdmap) van je site

  • Een "/"aan het begin van je pad- verwijst naar de root van je site
  • Het is onafhankelijk van waar het huidige HTML-bestand zich bevindt
<a href="/link.html">Ga naar link pagina</a>

Welk pad gebruiken?

Wij gebruiken voorlopig enkel relatieve paden

  • Flexibel bij het verplaatsen van hele website
  • Werken offline zonder internetverbinding

Favicons

Favicons

Een favicon is dat kleine icoontje dat je ziet in:

  • Het tabblad van je browser
  • Je bladwijzers/favorieten
  • Soms ook bij snelkoppelingen op je telefoon

 

Favicons

Dit icoontje linken we in de <head> van onze html-structuur met een link element

<head>
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
</head>

Favicons

We hebben verschillende icoontjes nodig met verschillende afmetingen, die moeten we allemaal inladen

<head>
  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
  <link rel="manifest" href="favicons/site.webmanifest">
  <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
</head>

Favicons

De verschillende icoontjes en de bijhorende code kunnen we generen met een Favicon Generator

<head>
  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
  <link rel="manifest" href="favicons/site.webmanifest">
  <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
</head>

☝️

Kijk je paden naar de icons altijd goed na

▶️

Tutorial op LinkedIn Learning