HTML & CSS Menu

Bij de vorige tutorial is uitgelegd hoe je de basis van een webpagina kan opzetten en hoe je hier tekst in kan plaatsen. In deze tutorial ga ik wat dieper in op de opmaak van de pagina. Voor dit gedeelte van de tutorial is het belangrijk dat je terug kan koppelen naar bestanden op je computer of laptop. Zelf maak ik altijd een nieuwe map aan waar ik alle bestanden voor 1 website neerzet. Mijn nieuwe HTML bestand geef ik de naam index.html en de afbeeldingen zet ik in een losse map.

AFBEELDINGEN TOEVOEGEN

Een website met alleen maar tekst is natuurlijk een beetje saai, dus moeten er ook afbeeldingen toegevoegd kunnen worden. In de vorige tutorial is al een beetje verklapt dat een afbeelding toegevoegd wordt met de <img> tag. Wel moet je laten weten waar de afbeelding vandaan moet komen. Dit doen we door in de tag te verwijzen naar de locatie van de afbeelding. Dit ziet er als volgt uit: <img src=“site1/afbeeldingen/afbeelding1.jpg”> De src verwijst hier voor de bron van de afbeelding. 

Ook zou je een alt tekst kunnen toevoegen aan deze tag. Die zorgt ervoor dat er een tekst getoond wordt als iemand de afbeelding niet kan openen. De alt tekst zet je in de tag zoals op het volgende voorbeeld: <img src=“site1/afbeeldingen/afbeelding1.jpg” alt=“dit is afbeelding 1”>. Een alt tekst is niet verplicht maar wordt wel aangeraden. 

Als laatste zou je ook een klasse aan je afbeelding kunnen toevoegen. Alle afbeeldingen in deze klasse kun je in je CSS bestand makkelijk tegelijkertijd bewerken. Als je bijvoorbeeld een afbeelding hebt als logo, kun je class=“logo” toevoegen. Dan krijg je dus: <img src=“site1/afbeeldingen/afbeelding1.jpg” alt=“dit is afbeelding 1” class=“logo”>. Een klasse kun je bij alle HTML tags toevoegen.



EEN LIJST MAKEN

Voor de mensen die jouw website willen bezoeken, is het belangrijk dat ze makkelijk kunnen navigeren op je pagina. Voordat je een menubalk kunt maken, moet je een lijst kunnen creëren. Een lijst kun je maken door de tags <ol> of <ul>. Het verschil tussen deze tags is dat <ol> de lijst nummers geeft en <ul> niet. De elementen die je binnen de lijst wil zetten geef je aan met de <li> tag. Binnen die tag kunnen we weer een link (<a>) of een paragraaf (<p>) plaatsen. Vergeet niet om alles af te sluiten met een </tag>.



NAVIGATIE

Om een menubalk te kunnen maken moet je een aantal dingen combineren en heb je CSS nodig om de opmaak te beheren. 

Voor de menubalk moeten we eerst in het bestand duidelijk maken dat het gaat om een navigatie. Dit doen we door de tag <nav> te gebruiken in het HTML bestand. Deze tag geven we de klasse ’navigation-bar’ zodat we de opmaak in CSS kunnen bewerken. 

Binnen de <nav> plaatsen we een lijst van de pagina’s die we willen tonen in het menu. Let erop dat je een link gebruikt i.p.v. een paragraaf, want anders kun je geen link leggen naar je andere pagina’s. Je kunt hiermee doorlinken naar de losse bestanden van je andere pagina’s.



CSS TOEVOEGEN

Je hebt nu een lijst maar die wil je natuurlijk wel naast elkaar kunnen plaatsten i.p.v. onder elkaar. Hiervoor maken we een nieuw CSS bestand aan. Deze noemen we style.css en slaan we op in de map voor onze website. In het HTML bestand plaats je een link binnen je <head> tag die verwijst naar je CSS bestand. Dit ziet er als volgt uit: <link rel=”stylesheet” href=”style.css”>. Hiermee zorg je ervoor dat de stijlen die je in je CSS bestand hebt geplaatst, terug komen in je HTML.

In je CSS bestand kun je vervolgens je menubalk de opmaak geven die je wilt. Denk bijvoorbeeld aan de grootte en de kleur.  Om te beginnen verwijzen we naar de klasse van je menu. In dit geval is dit ’navigation-bar’. Dit wordt opgeschreven als .navigation-bar{ }. Binnen de haakjes kunnen we nu de de stijl wijzigen. Eerst wil ik zorgen dat de menubalk de hele breedte van de pagina vult. Dit kun je doen door width: 100% te gebruiken. Ook wil ik zelf de hoogte bepalen, dit doe je op dezelfde manier als de breedte maar dan met: high: 30px. De px zijn een vaste waarde maar de 100% van de breedte veranderd als je schermgrootte veranderd. Als laatste wil ik natuurlijk zorgen dat ik een mooie achtergrondkleur heb. Dit doe je met het element: background-color. Daarachter kun je een kleurcode plaatsen van de kleur die je graag wilt gebruiken.Alle losse elementen moeten afgesloten worden met een ; dus krijg je het onderstaande…



Als je verder gaat zie je dat de lijst van pagina’s nog onder elkaar staat en niet netjes in de menubalk. Daarom moet je in je stijldocument aangeven dat je de pagina’s van de lijst in de balk wilt plaatsen. Elke pagina is aangegeven met <li> dus kun je in je CSS bestand gewoon li gebruiken. Voor deze li maak je gebruik van het display-element. Hierin kun je met ‘inline-block’ aangeven dat alle lijstelementen binnen je menubalk moeten staan.  Om wat ruimte te creëren tussen de lijstelementen, voegen we ook nog een padding-element toe . Met de padding kun je de ruimte tussen de paginaknoppen beheren (padding: 8px). 



HET MENU AFMAKEN

Het menu is nu bijna af. Om de bezoeker van je website duidelijk te maken dat je menu werkt, kun je de kleur veranderen als je met de muis over een link beweegt. Hiervoor kun je in het CSS bestand li a toevoegen. Dit slaat terug op de links in je lijst. binnen dit blok maak je opnieuw gebruik van een display-element: display: block. Hiermee kun je de tekst van je link in een blok zetten. Ook kun je de tekst een kleur geven door het color-element toe te voegen. 

Als laatste voeg je een nieuw blok toe met de naam li a:hover Dit betekend dat het alleen werkt op het moment dat je met de muis over het element beweegt. Hier voeg je dan een weer een achtergrondkleur aan toe met background-color: #FF0000. Nu heb je officieel een werkende menubalk in je pagina staan!



In de volgende tutorial ga ik uitleggen hoe je met verschillende columns de opmaak van je site kan verbeteren en hoe je de opmaak van je teksten in CSS gemakkelijk kan aanpassen.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *