HTML leren is niet zo moeilijk als je misschien denkt. De html-code hieronder kan de basis zijn voor elke nieuwe webpagina die je bouwt. Simpel? Inderdaad, dat is het ook:
<!DOCTYPE html> <html lang="nl"> <head> </head> <body> </body> </html>
Even een uitleg: Elk html-bestand begint met de zogenaamde doctype declaration. Die is bedoeld voor de browsers, zodat ze weten in welke html-versie je pagina is geschreven. De doctype-declaration voor pagina’s geschreven in HTML5 ziet er zo uit:
<!DOCTYPE html>
Direct onder de doctype declaration komt de openingstag van HTML. Een tag is een soort label waarmee je de verschillende onderdelen of elementen van een webpagina kunt markeren, zodat je straks het ene onderdeel van het andere kunt onderscheiden. Alle onderdelen van een webpagina zijn gelabeld met zo’n tag. De meeste onderdelen hebben een openings- en een sluittag. De sluittag ziet er net zo uit als de openingstag, alleen staat er nog een forward-slash in.
De html-openingstag is dus de eerste tag die je tegenkomt op een webpagina. De bijbehorende sluittag staat helemaal onderaan. Dat is altijd de laatste tag van een webpagina. Binnen de html-openings- en -sluittag komen alle andere onderdelen van je pagina te staan.
Aan de html begin-tag kun je nog wat extra informatie toevoegen als dat nodig is. In het voorbeeld hierboven is aan die tag de code toegevoegd waarmee de taal van de pagina wordt ingesteld. Omdat je waarschijnlijk in het Nederlands gaat schrijven, is in het voorbeeld de code lang="nl" toegevoegd aan de html-openingstag.
Alle webpagina’s hebben een head en een body. De head komt altijd vóór de body te staan. Tussen de beide head-tags staat informatie die voor de zoekmachines en de browsers is bestemd. Voor het grootste gedeelte is deze informatie niet zichtbaar voor je bezoekers. In de head staan vaak een title, een aantal meta-tags (voor de gebruikte karakterset en voor een description). Verder staat er meestal een link naar een stylesheet (met daarin regels voor de lay-out van je pagina), en soms nog een of meer links naar javascript-bestanden. In de head van de pagina die je nu bekijkt, staan onder andere de volgende regels:
<head> <title>HTML leren: dit zijn de basisbeginselen</title> <meta charset="utf-8"> <meta name="description" content="Om een website te ontwerpen, moet je in iedergeval wat HTML leren. En dat is niet zo moeilijk als je misschien denkt."> <link rel="stylesheet" href="css/stijl.css"type="text/css" media="screen"> </head>
De title vind je onder andere terug op het tabblad van de browser waarin je deze pagina aan het bekijken bent, utf-8 geeft aan dat de browsers de karakterset utf-8 moeten gebruiken om de pagina weer te geven, en in de description wordt een korte beschrijving van deze pagina gegeven, die zoekmachines vaak gebruiken in hun pagina met zoekresultaten. Door de link naar het stylesheet ten slotte, weet de browser in welk bestand de layout-regels voor deze pagina staan.
Daarnaast kan er nog veel meer in de head worden gezet. Het lijkt misschien wat ingewikkeld allemaal, maar ik heb een wat uitgebreidere uitleg over meta-tags geschreven, waar je wat meer voorbeelden ziet.
Direct na de head is het de beurt aan de body. Tussen de twee body-tags staat het gedeelte van je webpagina dat je bezoekers te zien krijgen. HTML5 heeft speciale tags voor de verschillende onderdelen van een website, zoals die van header (de ruimte bovenaan een webpagina, met daarin vaak de naam van het bedrijf en een logo), footer (de ruimte onderaan een website, waarin meestal een copyright-regel staat en een paar links die niet in het hoofdmenu thuishoren) en nav (navigation: het menu).
Hieronder staat de voorbeeldcode voor een webpagina met een header, nav (navigatiebalk of menu), een article (tekstvak), een aside (extra vak) en een footer. Het article en de aside zijn gegroepeerd in een div (division) met de naam artaside en de navigatiebalk is samengevoegd met de artaside in een div met de naam nav-aa.
<header></header> <div class="nav-aa"> <nav></nav> <div class="artaside"> <article></article> <aside></aside> </div> </div> <footer></footer>
Ik heb geprobeerd deze code wat duidelijker te maken met behulp van kleurtjes en inpspringingen, zodat je de structuur van de pagina beter ziet.
Omdat er meerdere div’s zijn, heeft elke div zijn eigen class gekregen, dit is om ze later van elkaar te kunnen onderscheiden. Want elk onderdeel moet straks natuurlijk zijn eigen lay-out krijgen. Met behulp van een class kan ik ze later gemakkelijk identificeren.
Binnen de verschillende elementen die je nu hebt, kun je allerlei andere onderdelen neerzetten. Koppen of subkoppen bijvoorbeeld (<h1></h1>, <h2></h2>, (de h staat voor heading,)), alinea’s (die komen tussen de tags <p> en </p>), afbeeldingen (<img> - een image is een van de weinige elementen zonder sluittag!), tabellen (<table></table>), formulieren (<form></form>), en audio- of videofragmenten. Klik hier voor een overzicht van de html-elementen die je op een webpagina kunt gebruiken.
Het zal natuurlijk even duren voordat je goed hebt leren omgaan met de belangrijkste html-elementen, maar hiermee heb je een begin en de rest zul je al doende leren. Op deze website staat heel veel uitleg over HTML, vaak met voorbeeld-html-code erbij. Zoek je iets over een bepaald onderwerp, kijk dan even in het artikelen-overzicht.
« Ga terug
