webdevh4.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>

    <style>
    	table {
    		width:100%;
    	}
        h1 {
            color: blue;
            font-weight: bold;
        }
        
        p {
            color: green;
        }
    </style>

</head>

<body>

    <h1>Menu</h1>

    <p>Maak een keuze:</p>

    <table>
        <tr>
            <td><a href="#">Home</a></td>
            <td><a href="klanten.html">Klanten</a></td>
            <td><a href="bestellingen.html">Bestellingen</a></td>
        </tr>
    </table>

    <h2>Home</h2>

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

    <h2>Klanten</h2>

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

    <h2>Bestellingen</h2>

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

</body>

</html>

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

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

	<head>
	  <title>Klanten</title>
	  
    <style>
    	table {
    		width:100%;
    	}
    	
    	td.opmaak1 {
    		background-color:yellow;
    		font-weight: bold;    	
    	}
    	
        h1 {
            color: blue;
            font-weight: bold;
        }
        
        p {
            color: green;
        }
    </style>
	  
	</head>

	<body>
	
		<h1>Menu</h1>

		<p>Maak een keuze:</p>
	
		<table>
			<tr>
				<td><a href="index.html">Home</a></td>
				<td><a href="#">Klanten</a></td>
				<td><a href="bestellingen.html">Bestellingen</a></td>
			</tr>
		</table>
		
		<br><br>
		
		<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>

	</body>

</html>

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

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

<head>
    <title>Bestellingen</title>

    <style>
        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;
        }
    </style>

</head>

<body>

    <h1>Menu</h1>

    <p>Maak een keuze:</p>

    <table>
        <tr>
            <td><a href="index.html">Home</a></td>
            <td><a href="klanten.html">Klanten</a></td>
            <td><a href="#">Bestellingen</a></td>
        </tr>
    </table>

    <br>
    <br>

    <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>

</body>

</html>

Download hier het bestand.