CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.

Presentatie over: "CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de."— Transcript van de presentatie:

1 CSS & HTML Les 2 Navigatie

2 De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de link naar de andere pagina te maken! Het element voor het bepalen naar welke pagina je linkt! Het element wordt gebruikt te bepalen waar de link geopend wordt! Het element wordt gebruikt om de link een title mee te geven ! Contact De inhoud van de tag is het label van de link !

3 Navigatie maken met list-items ! HTML Home Portfolio Diensten Over Marcel Contact Navigatie Css ul { list-style-type:none;} li { float: left; padding-left: 5px; }

4 Stijlen van een lijst ! Navigatie Css ul { list-style-type:disc;}

5 Stijlen van een list-item ! Css li { float: left; padding-left: 5px; } Css li { float: left; padding-left: 5px; padding-bottom: 10px; padding-right: 10px; padding-top: 5px;

6 Stijlen van een list-item ! Css a:link, a:visited, a:link { text-decoration: none; color: #00F;} a:hover {text-transform:uppercase;} ul {list-style-type:none;} li { float: left; padding-left: 5px; padding-bottom: 10px; padding-right: 10px; padding-top: 5px;} Css a:link, a:visited, a:link { text-decoration: none; color: #00F;} a:hover { border:dashed; color:#F33; }

7 De juiste code! ul#nav { list-style:none;} #nav {position: absolute; left: 300px; width: 1700px; height: 200px;} #nav li { float: left; padding: 10px 10px 10px 10px;} #nav li a { text-decoration: none;} #nav li a:link { text-decoration: none; color: #00F;} #nav li a:visited { text-decoration: none; color: #00F;;} #nav li a:active { text-decoration: none; color: #00F;;} #nav li a:hover { background-color:#00F; color:#FFF;} Alleen voor de tag voor het element met het ID nav. Hoe ziet het er uit ??????

8 Opdracht 2 ! Voor opdracht 2 ga je de webpagina van opdracht 1 uitbreiden met de navigatie. De navigatie moet bestaan uit de volgende labels. Home | Portfolio | Diensten | Over | Contact Hoe je de navigatie gaat vormgeven is geheel aan jezelf. De opdracht moet voor het het begin van de volgende les opgeleverd worden. Upload de pagina’s naar je eigen webomgeving en stuur de link naar m.v.ginkel@rocleiden.nl

9 CSS & HTML