This document discusses media queries and responsive web design. Media queries allow styling to adapt to different device sizes and resolutions. CSS styles can be applied or removed depending on the width of the viewport to optimize the layout for different screen sizes from mobile to desktop.
This document discusses media queries and responsive web design. Media queries allow styling to adapt to different device sizes and resolutions. CSS styles can be applied or removed depending on the width of the viewport to optimize the layout for different screen sizes from mobile to desktop.
2. Navigatie
<a href>
De tag voor het maken van verwijzingen naar pagina’s of
delen van een webpagina.
<a href=“contact.html”target=“_self”title=“Contact”>Contact</a>
Het <a> element wordt gebruikt om de link naar de andere pagina te maken!
<a>
Het <href> element voor het bepalen naar welke pagina je linkt!
<href>
Het <target> element wordt gebruikt te bepalen waar de link geopend wordt!
<target>
Het <title> element wordt gebruikt om de link een title mee te geven !
<title>
De inhoud van de <a></a> tag is het label van de link !
<a>Contact</a>
3. Navigatie
Navigatie maken met list-items !
HTML
<ul id="nav">
<li><a href="#" target="_self" title="Home">Home</a></li>
<li><a href="#" target="_self" title="Portfolio">Portfolio</a></li>
<li><a href="#" target="_self" title="Diensten">Diensten</a></li>
<li><a href="#" target="_self" title="Over Marcel">Over Marcel</a></li>
<li><a href="#" target="_self" title="Contact">Contact</a></li>
</ul>
Css
ul { list-style-type:none;}
li { float: left;
padding-left: 5px;
}
7. De juiste code!
ul#nav { Alleen voor de <ul> tag voor het element
list-style:none; } met het ID nav.
#nav { position: absolute;
left: 300px;
width: 1700px;
height: 200px;}
#nav li { Alleen voor de <li> tag voor het element
float: left; met het ID nav.
padding: 10px 10px 10px 10px;}
#nav li a {
Hoe ziet het er
text-decoration: none;}
#nav li a:link {
text-decoration: none;
#nav li
color: #00F;}
a:visited { uit ??????
text-decoration: none;
color: #00F;;}
#nav li a:active {
text-decoration: none;
color: #00F;;}
#nav li a:hover {
background-color:#00F;
color:#FFF;}
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