website-productie

Les 4: Structuur en navigatie in HTML

Voor je begint aan deze les, zorg dat je zeker alle extensies geïnstalleerd hebt die hier beschreven staan:

Visual Code Extenstions

(dit is een herhaling van 3.4 uit LES 3)

Hyperlinks zijn heel belangrijk – ze maken van het web een Web. Deze les toont de vereiste syntaxis voor het maken van een koppeling en bespreekt de beste werkwijzen om met koppelingen te werken.

Vereisten: Basiskennis van HTML, zoals beschreven in Beginnen met HTML. Kennis over HTML-tekstopmaak, zoals beschreven in Grondbeginselen van HTML-tekst.
Doel: U leert hoe je een hyperlink op een doeltreffende manier aan uw inhoud kunt toevoegen en meerdere bestanden met elkaar kunt verbinden.

Hyperlinks zijn een van de meest opwindende vernieuwingen die het web ons biedt. Eigenlijk horen ze er al sinds het allereerste begin bij, maar zij zijn wat van het web een Web maakt - hiermee kunnen we onze documenten met andere documenten (of met een andere informatiebron) verbinden. Ook kunnen we specifieke onderdelen van documenten met elkaar verbinden, en we kunnen apps op een eenvoudig webadres beschikbaar maken (in tegenstelling tot ‘native’ apps, die op voorhand moeten worden geïnstalleerd). Bijna alle webinhoud kan in een koppeling worden omgezet, zodat wanneer hierop wordt geklikt (of deze op een andere manier wordt geactiveerd), de webbrowser naar een ander webadres zal gaan (URL.)

Noot: een URL wijst ook naar HTML-bestanden, tekstbestanden, afbeeldingen, tekstdocumenten, video- en audiobestanden en alles wat er op het web kan leven. Als de browser niet weet hoe deze het bestand moet weergeven of behandelen, zal worden gevraagd of je het bestand wilt openen of downloaden (in dat geval kun je er later uw ding mee doen). Als je wordt gevraagd het bestand te openen, wordt de verantwoordelijkheid voor die taak doorgegeven naar een geschikte systeemeigen app op het apparaat.

De startpagina van deze portfolio bijvoorbeeld bevat een aantal koppelingen die naar verschillende gebieden van de website gaan; Home, Portfolio, Resume, Contact…

Portfolio van Jasper Kindt

Anatomie van een koppeling

Een eenvoudige koppeling wordt gemaakt door de tekst (of andere inhoud, zie Koppelingen op blokniveau) die je in een koppeling wilt omzetten binnen een <a>-element op te nemen, en dat element een [href](https://developer.mozilla.org/nl/docs/Web/HTML/Element/a#attr-href)-attribuut te geven (ook bekend als een Hypertext Reference of target) dat het webadres zal bevatten waarnaar je de koppeling wilt laten wijzen.

<p>Ik ben een koppeling naar
<a href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken.
</p>

Dit geeft het volgende resultaat:

Ik ben een koppeling naar de Mozilla-startpagina aan het maken.

Ondersteunende informatie toevoegen met het title-attribuut

Een andere attribuut dat je mogelijk aan uw koppelingen wilt toevoegen is title; dit is bedoeld voor extra nuttige informatie over de koppeling, zoals het type informatie dat de pagina bevat, of zaken waarvan je zich bewust moet zijn. Voorbeeld:

<p>Ik ben een koppeling naar
<a href="https://www.mozilla.org/nl/"
   title="De beste plek om meer informatie over Mozilla’s
          missie te vinden en hoe je daaraan kunt bijdragen">de Mozilla-startpagina</a> 
aan het maken.</p>

De code hierboven zorgt ervoor dat de title als een tooltip verschijnt als je de muisaanwijzer boven een koppeling houdt:

Ik ben een koppeling naar de Mozilla-startpagina aan het maken.

Noot: een hyperlink-titel zal alleen verschijnen als je de muis erboven houdt. Dit betekent dat mensen die een toetsenbord gebruiken om in een webpagina te navigeren moeite zullen hebben om de informatie in de tooltip te lezen. Als de informatie van een titel echt nodig is om de pagina te kunnen gebruiken, zou je die moeten aabieden op een manier die voor alle gebruikers toegankelijk is. U kunt de informatie bijvoorbeeld in de normale tekst van de webpagina zetten.

Actief leren: uw eigen voorbeeldkoppeling maken

Hebben we al gedaan in Les 3

oefening

Koppelingen op blokniveau

We hebben al vermeld dat je ongeveer alle inhoud in een hyperlink kunt omzetten, zelfs elementen op blokniveau. Als je een afbeelding in een koppeling zou willen omzetten, kon je die afbeelding gewoon tussen <a></a>-labels zeten.

<a href="https://www.mozilla.org/nl/">
  <img src="mozilla-image.png" alt="mozilla-logo dat naar de mozilla-startpagina verwijst">
</a>

Noot: in een latere les zul je nog veel meer over het gebruik van afbeeldingen op het web ontdekken.

4.2 Een snelle uitleg over URL’s en paden

Om het doel van een hyperlink volledig te begrijpen, moet je URL’s en bestandspaden begrijpen. Deze sectie verschaf je de informatie die je daarvoor nodig hebt.

Een URL, of Uniform Resource Locator, is gewoon een string (tekst) die bepaalt waar iets op het web kan worden gevonden. Mozilla’s Nederlandstalige startpagina bijvoorbeeld bevindt zich op https://www.mozilla.org/nl/.

URL’s gebruiken paden om bestanden te vinden. Paden tonen ons waar een bestand zich in een bestandssysteem bevindt. Laten we een eenvoudig voorbeeld van een mapstructuur bekijken (zie de map creating-hyperlinks.)

Een eenvoudige mapstructuur. De bovenliggende map heet creating-hyperlinks en bevat twee bestanden met de naam index.html en contacts.html, en twee mappen met de naam projects en pdfs, die respectievelijk een bestand index.html en een bestand project-brief.pdf bevatten

Je kan het project hier downloaden

In onderstaande video leg ik uit hoe je het project kan extracten / openen op je computer:

De hoofdmap van deze mapstructuur heet creating-hyperlinks. Als je op uw lokale computer aan een website werkt, zul je een map hebben waarbinnen de volledige website zich bevindt. In de hoofdmap hebben we een bestand index.html en een contacts.html. Op een echte website zou index.html onze startpagina of landingspagina zijn (een webpagina die als het startpunt voor een website of een bepaalde sectie van een website dient).

In onze hoofdmap zitten ook twee andere mappen – pdfs en projects. In elk van hen steekt één bestand – respectievelijk een PDF-bestand (project-brief.pdf) en een index.html-bestand. Twee index.html-bestanden kunnnen dus heel goed in één project bestaan, zolang ze op verschillende locaties in het bestandsysteem zijn opgeslagen. Bij veel websites is dit het geval. De tweede index.html is misschien de landingspagina voor projectgerelateerde informatie. (Tussen haakjes: een landingspagina is een pagina op uw website die specifiek is ingericht voor bezoekers die op die pagina binnenkomen (landen). De bezoeker kan op uw pagina landen via een zoekopdracht of bijvoorbeeld een online- of offlinecampagne die hem of haar naar die specfieke pagina stuurt.)

Hier leg ik uit hoe je een submap kan linken:

Noot: zo nodig kun je meerdere instanties van deze eigenschappen in complexe URL’s combineren, bijvoorbeeld ../../../complex/pad/naar/mijn/bestand.html.

Documentfragmenten

Het is mogelijk om naar een specifiek deel van een HTML-document te verwijzen. Dit specifieke deel noemen we een documentfragment. Om dit te doen heb je een [id](https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes#attr-id)-attribuut nodig. U moet het toekennen aan het element waarnaar je uw hyperlink wilt laten wijzen. Het is meestal zinvol om er een geschikte kop voor te gebruiken. Die kop zal er ongeveer zo uitzien:

<h2 id="E-mailadres">E-mailadres</h2>

Om dan naar dat specifieke id te verwijzen, voeg je de inhoud van het id aan het einde van de URL toe, voorafgegaan door een hekje (#). Voorbeeld:

<p>Wil je ons een brief schrijven? Gebruik dan ons <a href="contacts.html#e-mailadres">e-mailadres</a>.</p>

U kunt het documentfragment zelfs aan een ander deel van hetzelfde document koppelen:

<p>Het<a href="#e-mailadres">e-mailadres van ons bedrijf</a> vind je onderaan de pagina.</p>

Absolute versus relatieve URL’s

Twee termen die je op het web zult tegenkomen zijn absolute URL en relatieve URL:

Een absolute URL wijst naar de absolute locatie op het web. Die locatie houdt ook het protocol en de domain name in. Stel bijvoorbeeld dat een pagina index.html wordt geüpload naar een map die projects heet. Als die zich in de hoofdmap (root in het Engels) van een webserver bevindt en het domein van de website is http://www.example.com, zou je de pagina op http://www.example.com/projects/index.html kunnen vinden. (Of zelfs alleen http://www.example.com/projects/, want de meeste webservers zoeken naar een landingspagina zoals index.html die ze kunnen laden als deze niet in de URL wordt vermeld.)

Een absolute URL zal altijd naar dezelfde locatie wijzen, waar deze ook wordt gebruikt.

Een relatieve URL wijst naar een locatie die relatief is ten opzichte van het bestand vanwaar je verwijst. De koppeling ziet eruit zoals de URL’s die we in de vorige sectie hebben bekeken. Als je bijvoorbeeld een koppeling van ons voorbeeld http://www.example.com/projects/index.html naar een PDF-bestand in dezelfde map wilt maken, zou de URL alleen uit de bestandsnaam bestaan – bv. project-brief.pdf – extra informatie is dan niet nodig. Als de PDF beschikbaar was in de submap binnen projects met de naam pdfs, zou de relatieve koppeling pdfs/project-brief.pdf zijn (de equivalente absolute URL zou er dan zo uitzien: http://www.example.com/projects/pdfs/project-brief.pdf).

Een relatieve URL kan naar verschillende plekken wijzen, afhankelijk van de locatie van het bestand waarin de koppeling wordt vermeld zich bevindt. Als we bijvoorbeeld ons bestand index.html uit de map projects zouden halen en dit in de hoofdmap van de website zouden plaatsen (het hoogste niveau, geen submappen), zou pdfs/project-brief.pdf nu naar http://www.example.com/pdfs/project-brief.pdf wijzen en niet naar http://www.example.com/projects/pdfs/project-brief.pdf.

4.3 Optimale methoden voor het werken met koppelingen

Er bestaan een aantal ‘beste werkwijzen’ die je kunt volgen als je een hyperlink maakt. Die werkwijzen gaan we hieronder bekijken.

Verwoord uw koppelingen duidelijk

Het is makkelijk om een paar koppelingen op uw pagina te plaatsen, maar dat is niet genoeg. We moeten onze hyperlinks toegankelijk maken voor alle lezers, ongeacht hun huidige context en hulpmiddelen van hun voorkeur. Voorbeeld:

We bekijken een specifiek voorbeeld:

Goede koppelingstekst: Download Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

Slechte koppelingstekst: Klik hier om Firefox te downloaden

<p><a href="https://firefox.com/">
  Klik hier
</a>
om Firefox te downloaden</p>

Andere tips:

Gebruik relatieve koppelingen waar mogelijk

Als je de beschrijving hierboven leest, denk je misschien dat het een goed idee is om altijd absolute koppelingen te gebruiken. Ze kunnen niet defact raken als een pagina van plaats verandert, en relatieve koppelingen zullen dat wel doen. Niettemin is het beter een relatieve koppeling te gebruiken waar dat mogelijk is als je naar locaties op dezelfde website verwijst (Als je naar een andere website verwijst, zul je een absolute koppeling nodig hebben):

Koppelingen naar browservreemde bronnen – gebruik duidelijke wegwijzers

Als je hyperlinks schrijft naar een bron die men downloadt (zoals een PDF- of Word-document), streamt (zoals video of audio) of die een ander potentieel onverwacht effect heeft (een pop-upvenster opent of een Flash-film laadt), voeg dan duidelijke bewoording toe om elke verwarring te vermijden. Het kan zeer bijvoorbeeld zeer vervelend worden:

Laten we een paar voorbeelden bekijken en wat voor tekst we in dit soort gevallen kunnen gebruiken:

<p><a href="http://www.example.com/large-report.pdf">
  Het omzetrapport downloaden(PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  De video bekijken (stream opent in apart tabblad, HD-kwaliteit)
</a></p>

<p><a href="http://www.example.com/car-game">
  Het autospel spelen (vereist Flash-software)
</a></p>

Gebruik het download-attribuut als je naar een download verwijst

Als je een koppeling naar een bron schrijft die beter kan worden gedownload dan deze in de browser te openen, kun je het download-attribuut gebruiken en de koppeling een standaard bestandsnaam geven om de download mee op te slaan. Hier is een voorbeeld met een downloadkoppeling naar de Windows-versie van Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=nl"
   download="firefox-39-installer.exe">
  Download Firefox 39 voor Windows
</a>

4.4 OPDRACHT: een navigatiemenu maken

Voor deze oefening willen we dat je een paar pagina’s naar elkaar laat verwijzen met een navigatiemenu. Zo kun je een website maken die uit meerdere pagina’s bestaat. Dit is een gebruikelijke manier – dezelfde paginastructuur wordt op elke pagina herhaald, inclusief het navigatiemenu. Als je dus op de koppelingen klikt, heb je de indruk dat je op dezelfde plek blijft en dat er verschillende inhoud wordt getoond.

U hebt lokale kopieën van de volgende vier pagina’s nodig, alle vier in dezelfde map (zie ook de map navigation-menu-start voor een volledige lijst):

Download hier de zip file van de 4 bovenstaande bestanden om te beginnen aan de oefening.

Wat je moet doen:

  1. Voeg een ongeordende lijst toe op de aangegeven plek op één pagina, die de namen bevat van de pagina’s waarnaar wordt verwezen. Een navigatiemenu is gewoonlijk niet meer dan een lijst met koppelingen, dus semantisch gezien is dit in orde.
  2. Zet alle paginanamen om naar een hyperlink naar die pagina.
  3. Kopieer het navigatiemenu naar de drie andere pagina’s.
  4. Op elke pagina verwijder je de koppeling naar zichzelf – dat is alleen maar verwarrend en zinloos, en het ontbreken van een koppeling is een goede visuele herinnering aan de pagina waarop je zich nu bevindt.

Het voltooide voorbeeld zou er ongeveer zo moeten uitzien:

Een voorbeeld van een eenvoudig HTML-navigatiemenu, met startmenu, afbeeldingen, projecten en sociale menu-items

Noot: als je vastloopt, of er niet zeker van bent dat je het allemaal juist hebt, kun je de map navigation-menu-marked-up bekijken om het juiste antwoord te zien.

4.5 E-mailkoppelingen

Het is mogelijk om koppelingen of knoppen te maken die een nieuwe e-mailbericht openen, als erop wordt geklikt. Dit is mogelijk door het gebruik van het <a>-element en het URL-schema mailto:.

In de meest eenvoudige en gebruikelijke vorm duidt een ‘mailto:-koppeling’ gewoon het e-mailadres van de bedoelde ontvanger aan. Voorbeeld:

<a href="mailto:nowhere@mozilla.org">E-mail nergens naartoe verzenden</a>

Het resultaat is een koppeling die er zo uitziet: E-mail nergens naartoe verzenden.

In feite is het e-mailadres zelfs optioneel. Als je het weglaat (dat wil zeggen, uw [href](https://developer.mozilla.org/nl/docs/Web/HTML/Element/a#attr-href) is gewoon “mailto:”), zal een nieuw venster voor uitgaande e-mail worden geopend door het e-mailprogramma van de gebruiker waarin nog geen bestemmingsadres is ingevuld. Dit is vaak nuttig voor het ‘Delen’ van koppelingen waarop gebruikers kunnen klikken om een e-mailbericht naar een zelfgekozen e-mailadres te sturen.

Details toevoegen

Behalve het e-mailadres kun je nog andere informatie toevoegen. In feite kunnen alle kopregels van een standaardmail worden toegevoegd aan de mailto-URL die je opgeeft. De meest gebruikelijke zijn ‘subject’ (onderwerp), ‘cc’, en ‘body’ (body is de inhoud, body is geen echt headerveld, maar je kunt er een korte inhoud van het nieuwe e-mailbericht mee opgeven). Elk veld en de waarde ervan wordt als zoekterm opgegeven.

Hier is een voorbeeld met cc, bcc, subject en body:

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  E-mail verzenden met cc, bcc, subject en body
</a>

Noot: de waarden van elk veld moeten URL-gecodeerd zijn, d.w.z. met niet-afdrukbare tekens (onzichtbare tekens zoals tabs, enters en pagina-einden) en spaties ‘percent-escaped’). Let ook op het gebruik van het vraagteken (?) om de hoofd-URL van de ingevoerde waarden te scheiden, en de ampersand (&) om de velden in de mailto:-URL van elkaar te scheiden. Dit is standaard URL-zoeknotatie. U kunt de De GET-methode lezen als je meer over URL-querynotatie wilt weten.)

Dit zijn enkele voorbeelden van mailto-URL’s:

4.6 Hoe de theorie toepassen in Visual Code

Hoe een nieuw html bestand te maken

Hoe een project extracten op je computer

Hoe intellisense gebruiken in Visual Studio Code