HTML bestaat uit niets anders dan platte tekst, gecombineerd met zogenaamde tags. Eén of meerdere van deze tags noemen we een element. En dat is waar dit artikel over gaat: het ontleden van een HTML-element. Omdat bijna alle elementen op dezelfde manier zijn opgebouwd, is dit eenvoudig leren: Eén keer opletten en je kan een groot aantal HTML-elementen gebruiken. Laten we van start gaan. Bovenaan dit artikel prijst een afbeelding van een hyperlink, het <a>-element. Aan de hand van de kleuren die in de getoonde afbeelding worden gebruikt gaan we deze ontleden.
- Het zwarte gedeelte is gewone tekst. Het staat tussen twee tags in, dus deze tekst wordt getransformeerd in datgene wat een tag doet (in dit geval aanklikbaar gemaakt).
- Het rode gedeelte zijn de tags, zoals altijd getoond in punthaken. Vooraan zien we een openingstag (de afsluitende punthaak zien we vlak voor de zwarte tekst), en achteraan zien we de sluittag.
- Het groene gedeelte is een attribuut. Een attribuut heeft bijna altijd een waarde, en dan wordt de naam van het attribuut gevolgd door een is-teken (=), en daarna twee dubbele aanhalingstekens.
- Tussen twee dubbele aanhalingstekens komt de waarde van een attribuut, in dit geval weergeven met de paarse kleur.
Een element hoeft niet altijd een attribuut te hebben, net zo goed als het mogelijk is meer dan één attribuut te hebben (zo heeft in de HTML-code voor dit artikel de afbeelding wel zes attributen!).
Nesten
Tot zover het eenvoudige gedeelte. Het hele concept van HTML is dat elementen in elkaar gebruikt worden, het zogenaamde nesten. Dit gaat eigenlijk bijna vanzelf, want als je inhoud aan het schrijven bent in een webpagina doe je dit al standaard tussen de begin- en eindtag van het <body>-element. Dat is echter op vrij grote schaal. Op iets kleinere schaal is bijvoorbeeld dit voorbeeld:
<b>Dikgedrukte tekst</b> <i>Cursieve tekst</i> <b><i>Dikgedrukte, cursieve tekst</i></b>
Hier combineren we direct twee elementen, namelijk <b> voor dikgedrukte tekst en <i> voor cursieve tekst. Wanneer we dit soort constructies doen, moet je wel opletten! Het is belangrijk dat je de elementen precies andersom sluit dan je opent. Begin je dus eerst met <b> en dan met <i>, dan moet eerst <i> worden afgesloten voordat je <b> kan afsluiten. Dit klinkt heel lastig, en vergelijk het daarom eens met Russische poppetjes. Je kan een klein poppetje niet compleet maken als deze zit opgesloten in een grote pop. Je moet ze daarom in de juiste volgorde in elkaar zetten. En zo werkt het ook bij HTML-elementen.
Nesten is een belangrijk concept binnen HTML. Je zal zien dat de effecten hiervan later ook terugkomen in het opmaken van webpagina’s met HTML. Voorbeelden hiervan zullen binnenkort op Webbish verschijnen.
No related posts.
