HTML en CSS leren: Links

Links

Toeristen vragen Marieke elke dag hetzelfde: welke smaken zijn er, en hoe geraak ik hier met de tram? Met links vinden ze het antwoord zelf.

Het a-element

Een link maak je met <a>, van "anchor" (anker). De tekst tussen de tags is waarop de bezoeker klikt.

Waar de link naartoe gaat, staat in het attribuut href: een extra stukje informatie in de openingstag. Een attribuut heeft een naam, een = en een waarde tussen aanhalingstekens: <a href="smaken.html">onze smaken</a>.

De bezoeker ziet het adres niet, alleen de onderlijnde tekst. Kies dus een tekst die zegt waar je terechtkomt, geen "klik hier".

index.html

1<main>2  <p>Benieuwd wat er vandaag in de vitrine ligt? Bekijk <a href="smaken.html">onze smaken</a>.</p>3</main>

ijssalon.example

Absoluut en relatief

Een absolute link is een volledig adres, met https:// ervoor: https://nl.wikipedia.org/wiki/Oostende. Die werkt van overal, ook naar een andere website.

Een relatieve link is een pad vanaf de pagina waar je bent: smaken.html is een bestand in dezelfde map. Ideaal voor je eigen site: verhuist de site naar een ander adres, dan blijven de links kloppen.

Vergeet je https:// bij een andere website, dan denkt de browser dat het een bestand van je eigen site is.

index.html

1<main>2  <h2>Ontdek</h2>3  <p><a href="smaken.html">Onze smaken</a></p>4  <p><a href="contact.html">Contact</a></p>5  <p><a href="https://nl.wikipedia.org/wiki/Oostende">Alles over Oostende</a></p>6</main>

ijssalon.example

Probeer het zelf

Maak van Onze smaken een link naar smaken.html op Mariekes eigen site, en van Alles over Oostende een link naar https://nl.wikipedia.org/wiki/Oostende.

1<main>2  <h2>Meer weten?</h2>3  <p>Onze smaken</p>4  <p>Alles over Oostende</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Het a-element

Een link maak je met <a>, van "anchor" (anker). De tekst tussen de tags is waarop de bezoeker klikt.

De bezoeker ziet het adres niet, alleen de onderlijnde tekst. Kies dus een tekst die zegt waar je terechtkomt, geen "klik hier".

index.html

1<main>2  <p>Benieuwd wat er vandaag in de vitrine ligt? Bekijk <a href="smaken.html">onze smaken</a>.</p>3</main>

ijssalon.example

Absoluut en relatief

Een absolute link is een volledig adres, met https:// ervoor: https://nl.wikipedia.org/wiki/Oostende. Die werkt van overal, ook naar een andere website.

Vergeet je https:// bij een andere website, dan denkt de browser dat het een bestand van je eigen site is.

index.html

1<main>2  <h2>Ontdek</h2>3  <p><a href="smaken.html">Onze smaken</a></p>4  <p><a href="contact.html">Contact</a></p>5  <p><a href="https://nl.wikipedia.org/wiki/Oostende">Alles over Oostende</a></p>6</main>

ijssalon.example

Probeer het zelf

Maak van Onze smaken een link naar smaken.html op Mariekes eigen site, en van Alles over Oostende een link naar https://nl.wikipedia.org/wiki/Oostende.

1<main>2  <h2>Meer weten?</h2>3  <p>Onze smaken</p>4  <p>Alles over Oostende</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example