LINKS

tussen []: optioneel, sterk aanbevolen voor wie wil verdergaan in web

gebruik pijltjestoetsen om te navigeren
dotted codepanels zijn editeerbaar

LINKS

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...
  • Belangrijkste delen van de URL met een voorbeeld:
  • protocol://subdomein.host/pad/bestandsnaam#anker?parameters
    https://personeel.odisee.be/dashboard/kalender/overzicht.aspx#events?weergave=week&lang=nl
  • Beschrijving van de delen:
    • protocol: transportwijze (http, https, mailto, tel...) (volledige lijst), bv. https
    • subdomein: deel van het domein, bv. personeel
    • host: domein waar het gehost is, bv. odisee.be
    • pad: locatie van de bron, bv. /dashboard/kalender/
    • bestandsnaam: naam van de bron, bv. overzicht.aspx
    • anker: naam van een locatie op de pagina (zie verder), bv. events
    • parameters: extra opties , bv. weergave=week&lang=nl

Soorten URL's (1)

  • Een absolute URL verwijst altijd naar dezelfde plaats, waar je website of pagina ook staat
  • bv. https://fonts.googleapis.com/css?family=Lato
  • gebruik voor externe resources
  • Een relatieve URL is een pad relatief t.o.v. de map van de huidige pagina
  • bv. https://domain.com/travels/index.html + img/photo1.jpg = https://domain.com/travels/img/photo1.jpg
    bv. https://domain.com/css + ../assets/logo.svg = https://domain.com/assets/logo.svg
  • gebruik voor lokale resources
  • Een root URL is een pad relatief t.o.v. de root van het domein
  • bv. https://domain.com/travels/index.html + /js/scripts.js = https://domain.com/js/scripts.js
    bv. https://domain.com/users/andy589/index.html + /js/scripts.js = https://domain.com/js/scripts.js
  • als je de site in een submap plaatst, zullen de root URL's niet meer kloppen
  • daarom kun je in deze cursus root URL's beter niet gebruiken

Soorten URL's (2)

  • Identificeer de URL's in dit voorbeeld: absoluut, relatief of root? 
    <!DOCTYPE html>
<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

Links in HTML

Hyperlink

  • Een hyperlink maak je met de <a> tag; de URL komt in het href attribuut. Het is een inline element, dus het mag in 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 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">mailto:johndoe@rock.com</a>
  • Andere media links (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

  • 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>
    uitgebreidere demo
Odisee logo