webdevh6.1

<!-- oefening 1 -->

<!DOCTYPE html>
<html lang="nl">

<head>
    <meta name="description" content="Koop hier al uw producten online!">
    <meta name="keywords" content="Product 1, Product 2">
    <meta name="author" content="PTH">
    <title>Webwinkel</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

	<div id="kop">
		<h1>Webwinkel</h1>
	</div>

	<div id="menu">
		<ul>
			<li>
				<a class="active" href="#">Home</a>
			</li>
			<li>
				<a href="klanten.html">Klanten</a>
			</li>
			<li>
				<a href="bestellingen.html">Bestellingen</a>
			</li>
		</ul>
	</div>

	<div id="inhoud">

		<h2>Home</h2>

		<p>Druk op de linker link om weer terug te keren naar deze pagina.</p>

		<h2>Klanten</h2>

		<p>Druk op de linker link om naar het overzicht van de klanten te gaan.</p>

		<h2>Bestellingen</h2>

		<p>Druk op de linker link om naar het overzicht van de bestellingen te gaan.</p>

	</div>

	<div id="voet">
		Copyright 2019
	</div>

</body>

</html>

Download hier het bestand.
<!-- oefening 2 -->

<!DOCTYPE html>
<html lang="nl">

	<head>
		<title>Klanten</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		</head>

		<body>

			<div id="kop">
				<h1>Webwinkel</h1>
			</div>

			<div id="menu">
				<ul>
					<li>
						<a href="index.html">Home</a>
					</li>
					<li>
						<a class="active" href="#">Klanten</a>
					</li>
					<li>
						<a href="bestellingen.html">Bestellingen</a>
					</li>
				</ul>
			</div>

			<div id="inhoud">

				<table border="1">
					<tr>
						<td class="opmaak1" width="25%">Klantnummer</td>
						<td class="opmaak1" width="25%">Naam</td>
						<td class="opmaak1" >Woonplaats</td>
					</tr>
					<tr>
						<td>k1</td>
						<td>Floris</td>
						<td>Rotterdam</td>
					</tr>
					<tr>
						<td>k2</td>
						<td>Gert Jan</td>
						<td>Utrecht</td>
					</tr>
					<tr>
						<td>k3</td>
						<td>Marinda</td>
						<td>Den Haag</td>
					</tr>
					<tr>
						<td>k4</td>
						<td>Sjon</td>
						<td>Amsterdam</td>
					</tr>
				</table>

			</div>

			<div id="voet">
				Copyright 2019
			</div>

		</body>

	</html>
	

Download hier het bestand.
<!-- oefening 3 -->

<!DOCTYPE html>
<html lang="nl">

	<head>
		<title>Bestellingen</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		</head>

		<body>

			<div id="kop">
				<h1>Webwinkel</h1>
			</div>

			<div id="menu">
				<ul>
					<li>
						<a href="index.html">Home</a>
					</li>
					<li>
						<a href="klanten.html">Klanten</a>
					</li>
					<li>
						<a class="active" href="#">Bestellingen</a>
					</li>
				</ul>
			</div>

			<div id="inhoud">

				<table border="1">
					<tr>
						<td class="opmaak2" colspan="3">Overzicht</td>
					</tr>
					<tr>
						<td class="opmaak1" width="25%">Bestelnummer</td>
						<td class="opmaak1" width="25%">Datum</td>
						<td class="opmaak1">Klantnummer</td>
					</tr>
					<tr>
						<td>b1</td>
						<td>16-4-2010</td>
						<td>k1</td>
					</tr>
					<tr>
						<td>b2</td>
						<td>25-10-2014</td>
						<td>k1</td>
					</tr>
					<tr>
						<td>b3</td>
						<td>25-6-2011</td>
						<td>k3</td>
					</tr>
					<tr>
						<td>b4</td>
						<td>17-11-2011</td>
						<td>k4</td>
					</tr>
				</table>

			</div>

			<div id="voet">
				Copyright 2019
			</div>

		</body>

	</html>

Download hier het bestand.
 table {
	width: 100%;
}

td.opmaak1 {
	background-color: yellow;
	font-weight: bold;
}

td.opmaak2 {
	font-weight: bold; 
	text-align:center; 
	background-color:cyan;
}

h1 {
	color: blue;
	font-weight: bold;
}

p {
	color: green;
}

* {
  box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
} 

html, body {
  height: 100%;
}

#kop {
  background-color: #666;
  padding: 10px;
  text-align: center;
  font-size: 35px;
  color: white;
}

#menu {
  float: left;
  background: #ccc;
  padding: 20px;
  width: 20%;
  height: 50%;
}

#menu ul {
  list-style-type: none;
  padding: 0;
}

#inhoud {
  float: left;
  padding: 20px;
  background-color: #f1f1f1;
  width: 80%;
  height: 50%;
}

#voet {
  color: white;
  background-color: #666;
  text-align: center;
}

Download hier het bestand.