Links | HTML cursus

Youtube: HTML links

https://www.youtube.com/watch?v=higQhwN0K_g

De URL

Delen van de URL

Een hyperlink (HTML link) wijst naar een URL (Uniform Resource Locator), waarbij resource "bron" betekent. Dit kan vanalles zijn: een andere webpagina, een afbeelding, een script, een geluidsbestand... Schematisceh opbouw:

protocol://subdomein.host/pad/bestandsnaam#anker?parameters

Voorbeeld:

https://personeel.odisee.be/dashboard/kalender/overzicht.aspx#events?weergave=week&lang=nl

Beschrijving van de delen:

Deel	Benaming	Omschrijving
`https://`	protocol	transportwijze (`https://`, `mailto:`, `tel:`, `file:///`...)
`personeel`	subdomein	subsectie van het domein
`odisee.be`	host	domein waar het gehost is
`dashboard/kalender`	pad	locatie van de bron
`overzicht.aspx`	bestandsnaam	naam van het bronbestand
`events`	anker	naam van een locatie op de pagina (zie verder)
`weergave=week&lang=nl`	parameters	extra opties

Soorten URL's

Soort	Voorbeeld	Omschrijving
absolute URL	`https://fonts.googleapis.com/css?family=Lato`	volledig pad; voor externe resources
relatieve URL	`img/logo.png` `../uploads/document.pdf`	relatief t.o.v. de map van de huidige pagina; voor interne resources
root URL	`/website/photos/photo03.jpg`	start met een '/'; relatief t.o.v. de root van het domein; in deze cursus zullen we het nooit gebruiken

Welke URL's in volgend fragment zijn absoluut, relatief, root?

<html lang="nl">
<head>
   <link rel="stylesheet" href="css/styles.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
   <script src="/js/lib/require/require.js"></script>
</head>
<body>
   <figure>
      <img src="img/pictures/landscape.jpg" alt="some landscape">
      <figcaption>credits: <a href="https://shutterstock.com">Shutterstock</a></figcaption>
   </figure>
   <p>Interesse? <a href="contact.html">Contacteer mij</a></p>
</body>  
</html>

Links in HTML

Hyperlink

Een hyperlink maak je met de <a> tag; de URL komt in het href attribuut. Het is een inline element, het mag dus middenin een zin staan:

Bezoek onze <a href="https://odisee.be">Odisee homepagina</a>

Let er op dat je een relevante tekst linkt. Vergelijk:

Heb je interesse in onze opleidingen? Breng ons dan een bezoekje! 
Klik <a href="https://odisee.be/info">hier</a> voor onze infodagen.

Heb je interesse in onze opleidingen? Breng ons dan een bezoekje! 
Bekijk <a href="https://odisee.be/info">onze infodagen</a>.

De tekst die je linkt is belangrijk voor blinden en indexering van je website door zoekmachines!

Title attribuut

Verduidelijk waarnaar de link verwijst met het title attribuut:


<a href="https://odisee.be" title="ga naar de website van be.brussels">
   <img src="img/03_links/logo_brussel.jpg" alt="Brussel logo">
</a>

altijd nuttig, zeker als de gelinkte afbeelding of tekst niet heel duidelijk is
browsers renderen de beschrijving als tooltip van de link

Aria-label attribuut

Voor blinden zijn gelinkte afbeeldingen en iconen niet "zichtbaar". Gebruik dan het aria-label attribuut om dit te verduidelijken:

<a href="" aria-label="bekijk de Youtube channel">
   <span class="fa-brands fa-youtube"></span>
</a>

ARIA: “Accessible Rich Internet Applications”
aria-* attributen helpen blinden rich applications te gebruiken en te interpreteren

Media links

Link naar een email adres met mailto:

Contacteer mij op <a href="mailto:johndoe@rock.com">johndoe@rock.com</a>

Andere media links als sms, telefoon, whatsapp... (de meeste mobile only):

Bel me op via <a href="tel:+32489223344">0489 22 33 44</a>
Stuur me <a href="sms:+6612345678?body=het te verzenden bericht">een sms</a>
Contacteer me via : <a href="https://wa.me/32489223344">WhatsApp</a> 
Chat via <a href="skype:+32489223344?call">Skype</a>

Ankers (interne links)

Een anker is een interne link, dus een link naar een ander deel binnen dezelfde pagina
Je hebt twee dingen nodig:

een anker waarnaar gelinkt kan worden: <a id="someId">...</a>
een link naar dit anker: <a href="#someId">...</a>:

...
<h2>Veelgestelde vragen</h2>
<ul>
   <li><a href="#qst1">wat zijn de leverkosten?</a></li> <!-- link naar anker qst1 -->
   <li><a href="#qst2">wat is de levertermijn?</a></li> <!-- link naar anker qst2 -->
   <li><a href="#qst3">kan ik mijn bestelling retourneren?</a></li> <!-- link naar anker qst3 -->
</ul>

<h3><a id="qst1">wat zijn de leverkosten?</a></h3> <!-- definitie anker qst1 -->
<p>
   De leverkosten hangen af van blablabla...
</p>
<h3><a id="qst1">wat is de levertermijn?</a></h3> <!-- definitie anker qst2 -->
<p>
   Wij garanderen levering blablabla...
</p>
<h3><a id="qst1">kan ik mijn bestelling retourneren?</a></h3> <!-- definitie anker qst3 -->
<p>
   Niet tevreden? Stuur dan...
</p>

03. HTML links