Websites met stijl

5. Het menu

Een overzichtelijke layout

Het maakt bij html niet uit hoe de tekst en code over de regels wordt verdeeld: of je de hele webpagina op één regel zet, of elk woord op een nieuwe regel, het maakt niet uit.

Je mag alleen niet afbreken in sleutelwoorden (zoals elementnamen, attribuutnamen e.d.).

De volgende regels voor een overzichtelijke layout zijn gebruikelijk:

• Bij een element zonder inhoud of met heel weinig inhoud komt alles op één regel.
• Bij een element met een grotere inhoud komen de begin-tag en eind-tag op aparte regels
  en de inhoud (alles tussen de begin- en de eindtag) springt in en wordt verdeeld over een aantal regels.
• Tussen de verschillende elementen komt (meestal) een lege regel.

Zie bv. figuur 1, 3 en 4.

Een article element toevoegen in main

Het element article (artikel) is volgens de definitie van html5 een samenhangende tekst die ook los van de website een eenheid vormt. Het element main van onze website bevat een article. Dat gaan we nu aanbrengen:

• Open het document index.html in de editor
• Zoek in het document de regel <main> </main> op.
• Wijzig deze regel in: <main> <article> </article> </main>
• Omdat main nu inhoud heeft, verdelen we dit stukje tekst als volgt over 3 regels: figuur 1 <main>
  <article> </article> </main>
• Sla het document op, maar sluit het niet af.

Een link

Een link is een stuk tekst of een plaatje waarop je kunt klikken. Met een klik ga je dan naar een andere webpagina.

Figuur 2 toont de basisvorm van een link.
In een browser ziet de link eruit als: polder. Als je (bij een echte link) op de link zou klikken spring je naar het bestand polder.html.

We bekijken figuur 2 wat nauwkeuriger:

• De tags <a> en </a> markeren het begin en einde van het element a (de link).
• De tekst tussen <a> en </a> is de linktekst die je ziet. Hier is dat polder.
  De link-tekst is standaard blauw en onderstreept en er verschijnt een handje als je met de muis naar de link wijst.
  (Standaard wil zeggen: als er in het stijlbad geen andere opmaak is geregeld.)
• Het attribuut href in de begin-tag geeft aan waarheen wordt gesprongen als je op de link klikt. Hier is dat naar polder.html.
• De waarde van een attribuut zetten we altijd tussen aanhalingstekens.

Het menu aanbrengen

• Zoek in het document index.html de regel met de tags <nav> en </nav>. Het menu komt tussen die tags.
  Zoals je in figuur 3 ziet bestaat het uit vier links, een naar elke pagina van de website. figuur 3
  <nav>
  <a href="index.html">home</a>
  <a href="polder.html">polder</a>
  <a href="duin.html">duinen</a>
  <a href="wad.html">wad</a>
  </nav>

  De pagina die in beeld komt als je een website opent wordt de startpagina genoemd. Vroeger gebruikte men daar ook in Nederland de engelse term homepage voor. In menu's heet de startpagina nog steeds vaak home.

• Tik figuur 3 over. De tags <nav> en </nav> tik je niet in. Dat heb je in hoofdstuk 4 al gedaan.
• Verbeter eventuele fouten en sla het gewijzigde document op (als steeds onder de naam index.html).
• Open het document in je browser.

  (Weet je niet hoe je een document op je eigen computer via je browser bekijkt? Kijk dan in de naslag bij Hoe je een lokale website opent in je browser.

  Als het goed is ziet het er ongeveer zo uit: home polder. duinen wad
• Probeer wat er gebeurt als je op de verschillende links klikt (niet hier, maar in je eigen document, gezien in de browser). Waarschijnlijk gebeurt het volgende:
• Klik je op home dan gebeurt er niets. Je springt immers van de startpagina naar de startpagina.
• Klik je op polder, duinen of wad dan krijg je een melding als 'bestand niet gevonden'. Dat is logisch, want je hebt de pagina's polder.html, duin.html en wad.html nog niet gemaakt.
  Als je die, in een volgend hoofdstuk, gemaakt hebt zal alles naar behoren werken en spring je naar de betreffende pagina.

Hiermee is het menu klaar.
Aan het einde van dit hoofdstuk vind je nog wat bijzonderheden over hyperlinks.

Controleren en opslaan

• Controleer of de startpagina er bij jou uitziet als figuur 4.
• Verbeter evetuele fouten en sla het verbeterde document opnieuw op.

Meer over hyperlinks

Target en title

Een uitgebreide versie van de hyperlink ziet er zó uit: figuur 5

• Als je het attribuut target="_blank" opneemt in de link opent deze in een nieuw venster.
• Met het attribuut title kan je een tooltip tonen, dat is een mededeling die verschijnt als je de link met de muis aanwijst (zonder te klikken). In het voorbeeld verschijnt er dan de mededeling opent in een nieuw venster
  Je kan het proberen op de link hierachter: polder. De link zelf werkt niet, maar de mededeling wordt getoond.

Het pad naar een bestand

De verwijzing naar het bestand polder.html in figuur 2 werkt in deze vorm alleen als het document polder.html in dezelfde map staat als het document met de link naar polder.html.

• Als dat niet zo is moet je het pad van het ene document naar het andere worden opgegeven. Staat het document polder.html bijvoorbeeld in de (sub-)map gegevens dan ziet het attribuut href er zo uit:
  href="gegevens/polder.html"
  
• Als een bestand waarin je met een link verwijst op een andere website staat moet je het hele webadres opgeven, bv.
  href="http://wwww.terschelling.nl/polder.html"
  Het gemakkelijkst gaat dat door in je browser naar de betreffende website toe te gaan en dan het webadres, dat in het adresvak staat, te kopiëren.

Meer over 'pad' vind je in de naslag bij Mappenstructuur, pad, URL.