Websites met stijl

7. Id en class, commentaar

In dit hoofdstuk

In dit hoofdstuk vind je alleen wat theorie. In het volgende hoofdstuk gaan we verder met de website.

Id en class: elementen met een naam

Je bent nu een behoorlijk eind op weg met de website over Terschelling. Over enkele hoofdstukken gaan we met de opmaak beginnen. Dan geven we in een stijlblad de opmaakeigenschappen van elementen als main, nav, aside, div aan.

We zouden bijvoorbeeld kunnen aangeven dat het element nav (het menu) een gele achtergrond krijgt
en het element aside (de zijbalk) een lichtgrijze achtergrond.
En misschien willen we de div die de elementen main en aside omsluit wel witte letters op een groene achtergrond geven.

Maar als er nou op een webpagina verschillende div-elementen zijn, of verschillende nav elementen, hoe kunnen we dan aangeven dat die ene een gele achtergrond moet hebben en die andere niet?

Daarvoor zijn twee attributen: id en class:

Het attribuut id

Dit attribuut is al aan de orde geweest in hoofdstuk 4.

Met id (afkorting van identity, identiteit) geef je een element een unieke naam.
Er mogen op dezelfde webpagina geen andere elementen zijn met die naam. voorbeeld 1 <nav id="menu1">...</nav> In voorbeeld 1 krijgt een element nav de naam menu1.

Het attribuut class

Dit attribuut is hetzelfde als id, met één uitzondering: de class-naam hoeft niet uniek te zijn, er mogen verschillende elementen met dezelfde class-naam op een pagina voorkomen.

voorbeeld 2 <div class="opmerking">...</div> In voorbeeld 2 krijgt een div element de class-naam opmerking

Het verschil tussen id en class

Zoals gezegd is het verschil tussen id en class dat een bepaalde id-naam maar 1 keer op een webpagina mag voorkomen, een class-naam meerdere keren.

Een korte notatie

In een stijlblad worden elementen van een bepaalde id of class als volgt aangeduid:

We zullen die notatie ook in de tekst gebruiken:

Commentaar

Alles tussen de 'tags' <!-- en --> wordt als commenaar beschouwd. De browser slaat het over.

Commentaar kan één regel beslaan, maar ook meerdere regels, zoveel als je wilt.

voorbeeld 4 <!-- Dit commentaar beslaat één regel.--> voorbeeld 5 <!-- Dit commentaar beslaat verschillende regels

In feite kan het zo lang zijn als je wilt.
Een paragraaf, een artikel, desnoods een hoofdstuk uit een boek.
-->

In de volgende gevallen is commentaar handig:

  1. Om een stuk html-code te verduidelijken.
    Dat is voor later (en voor anderen) als de website aangepast moet worden.
  2. Om tijdelijk een stuk van de website uit te schakelen, bijvoorbeeld omdat het niet goed werkt.

Samenvatting

Het attribuut id

Het attribuut class

Commentaar