Youtube: HTML 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... 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">mailto: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>