<!doctype html>
<html>
<!-- Gemaakt door dave Schaafsma -->
<head>


		<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
		<link href="stijlblad2.css" rel="stylesheet" type="text/css" />
		<title> Basiscursus html </title>
</head>
<body>
		<div id="wrapper">
		<header>
			<div id="logo"><h1>Logo bovenaan</h1></div>
			<div id="Menubalk">Menu balk
				<ul>
					<li>Menu 1</li>
					<li>Menu 2</li>
					<li>menu 3</li>
				</ul>
			
			
			<form class="rechts">
				<input type="text" name="tag" />
				<input type="submit" value="HTML 5 TAG zoeken" />
			</form>
			</div>
		</header>
		</div>


		
<div id="nav">


<nav class="dikkerand">
	<h2> Menu blok 1</h2>
	<p><a href="index.html">Een linkje</a></p>
	<p><a href="index.html">Een linkje</a></p>
	<p><a href="index.html">Een linkje</a></p>
	<p><a href="index.html">Een linkje</a></p>
	
</nav>
<nav class="dikkerand">
	<h2> Menu blok 2 </h2>
	<p><a href="index.html">Weer een linkje</a></p>
	<p><a href="index.html">Weer een linkje</a></p>
	<p><a href="index.html">Weer een linkje</a></p>
	<p><a href="index.html">Weer een linkje</a></p>	
</nav>
<nav class="dikkerand">
	<h2> Menu blok 3 </h2>
	<p><a href="index.html">Nog meer linkjes</a></p>
	<p><a href="index.html">Nog meer linkjes</a></p>
	<p><a href="index.html">Nog meer linkjes</a></p>
	<p><a href="index.html">Nog meer linkjes</a></p>
</nav>


</div>


<!-- hier begint de inhoud van de pagina -->


	<section>
	
		<article>
			<h2> dit is een artikel</h2>
			<p>The main vechile of klingon langauge institute is holqed, qaurterly linquistics language and culture.</p>
		</article>	
			
			
			
			
		<article>
			<aside>
				<p> Hier komt wat overige tekst die ik erin moest typen om het resultaat te zien </p>
				<p> Leuk om te weten hoe dat in zijn werking gaat. </p>
				<p> 50 pennys </p>
				<p> en 5 cent </p>
			</aside>
		</article>
		
		<article>
			<h2> Dit is artikel nummer 2</h2>
			<p> there is much controversy in relationship to font size specifications. </p>
		</article>
		
		<article>
			<h2> Dit is artikel nummer 3</h2>
			<p>The klingon language institue is nonprofit 501(c)3 corporation and star trek, and all relatedmars are copyrights
			and trademarks of paramount pictures. All rights reserverd. klingon language institute authorized user.</p>
		</article>
	<div class="clearright"></div>
	</section>
	
	<!--hier eindigt de inhoud van de webpagina -->
	
	<footer>
		Voetregel
	</footer>
	
</body>
</html>

body{
	font-family:arial;
	background:silver;
	font-size: 20px;
}
header{
	background:yellow;
}
#logo{
	background:purple;
	height:100px;
}
#menubalk{
	background:orange;
	float: left;
}
.rechts{
	float: right;
}
.mooi{
	background:white
	font-size:12px
}
#id{
	background:red;
	font-weight:bold;
}
aside{
	background:tomato;
	float:right;
	width:200px;
}


#nav{
	float:left;
}


nav{
	background:green;
	float:left;
	width:200px;
}
section{
	background:red;
	margin-left:200px;
}
article{
	background:white;
	clear:right;
}
footer{
	background:blue;
	clear:both;
}
.clearright{
	clear:right;
}


menubalk ul{
	list-style-type: none;
	display:inline;
	margin-left:0px;
	padding-left:0px;
}


#menubalk li{
	display:inline;
	margin-left:0px;
}
#menubalk{
	background:orange;
	height:30px;
}


#wrapper{
	margin:0px auto 0px auto;
	min-width:780px;
	max-width:1000px;
}


.dikkerand{
	border: 10px solid white;
	border-radius:30px 30px 30px 0px;
}