7. Navigatie toevoegen

Wanneer u een website maakt zal deze waarschijnlijk niet bestaan uit één pagina. In een later hoofdstuk gaan we daarom een aantal pagina's toevoegen. Om vervolgens op een van die andere pagina's terecht te komen hebben we behoefte aan een navigatiemenu. En dat is wat we in de volgende oefening gaan maken.

7.1 Een lijst opstellen

HTML heeft de mogelijkheid om een opsommingslijst te maken net als in Microsoft Word. Neem de onderstaande code over als u ook een navigatiemenu wilt maken.

Zoals u in de bovenstaande code kunt zien is er een lijst gemaakt bestaande uit vier items. Deze lijst begint met de ul-open-tag en eindigt met de ul-sluit-tag. Deze ul staat voor "unordered list" (ofwel een niet genummerde lijst). In deze ul-container zitten li-open- en li-sluit tags. Li staat in dit geval voor "list-item". Wanneer u het resultaat in de browser bekijkt ziet u een opsommingslijst bovenaan de pagina. Van deze lijst gaan we het navigatiemenu maken.

7.2 Ankers toevoegen aan het navigatiemenu

Om de menulijst ook daadwerkelijk te laten functioneren is het toevoegen van ankers noodzakelijk. Binnen de li-container plaatsen we een a-container zodat alle items in de lijst klikbaar worden. Zie de onderstaande afbeelding voor de code.

Omdat we nog geen andere pagina's hebben zal het menu nog niet werken, dat gaan we in hoofdstuk 10 oplossen.