Links maken

Links worden met het anchor element <a>…</a> gemaakt. Lees pagina 76 en 77 van HTML & CSS. Daar wordt uitgelegd hoe het element is opgebouwd. Kijk goed waar de link wordt geopend en gesloten. Bestudeer vervolgens naar welke pagina wordt gelinkt en hoe dat gebeurt.

Keuzemenu maken

Op pagina 79 van het boek staat voorbeeldcode van een werkend keuzemenu. Lees de beschrijving bij dit voorbeeld aandachtig door.

Je gaat nu zelf een werkend menu maken in de de code van de vorige oefening: voorbeeld basiswebsite (broodje kaas). Open index.html en zoek het <nav> … </nav> element op. Haal de code die daar eventueel  al in staat weg, en pas deze als volgt aan:

<nav>
 <ul>
 <li><a href="broodje_worst.html">Broodje worst</a></li>
 <li><a href="glaasje_melk.html">Glaasje melk</a></li>
 </ul>
</nav>

In dit voorbeeld wordt gelinkt naar 2 pagina’s: broodje_worst.html en glaasje_melk.html. Opdracht: Maak nu zelf een link naar index.html

Vormgeving aanpassen

Als je de bovenstaande code hebt toegepast en de html met je browser bekijkt dan zie je de 3 links onder elkaar staan met een bullet ervoor. Als eerste ga je ervoor zorgen dat de linkjes naast elkaar komen te staan. Dat doe je in je css bestand: layout.css

voeg de volgende code toe aan je css:

li {
 display:inline;
}

Nu staan de menuitems wel naast elkaar maar ook erg dicht op elkaar. Dat is niet handig en ook niet mooi. We gebruiken nu de eigenschap margin om meer tussenruimte tussen de mengitems te maken.

li {
 display:inline;
 margin-left:10px;
 margin-right:10px;
}

Als het goed is zie je nu tussenruimte tussen de linkjes

Opdracht: Lees van hoofdstuk 13 van het boek pagina 306 en 307 goed door. Pas nu het CSS aan zodat de padding van de <a> elementen 5px wordt én geef de <a>..</a> elementen een achtergrondkleur.

Nieuwe pagina’s maken

De laatste stap van deze oefening is het aanmaken van de pagina’s glaasje_melk.html en broodje_worst.html. het is niet nodig om alle code weer opnieuw te schrijven: je kunt een copie maken van index.html en vervolgens de inhoud aanpassen.

Klik in dreamweaver op bestand > opslaan als en noem je bestand glaasje_melk. html Zie ook de afbeelding hieronder:

Naamloos-1

 

Herhaal deze stap en geef als naam broodje_worst.html

Pas nu de inhoud van de 2 nieuwe pagina’s  aan zodat je het verschil ziet.

Bekijk het resultaat in je browser en controleer of de linkjes werken. Laat de opdracht aftekenen door je docent en lever deze in via n@tschool als .zip bestand.