webdevh2.3

<!--opdracht 1: maak de opdracht conform de dia.
Breid de vorige opdracht uit en zorg er voor dat de URL's 
van de bestaande links worden geopend in een nieuw venster. -->

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

	<head>
	  <title>Opdracht 1</title>
	</head>

	<body>

		<h1 style="color:blue;">Webpagina</h1>
		
		<hr>
		
		<h2>HTML</h2>
		
		<p style="color:green;">HTML (<a href="https://nl.wikipedia.org/wiki/HyperText_Markup_Language" target="_blank">HyperText Markup Language</a>) is het fundament van een webpagina. Het geeft een pagina structuur d.m.v.
		kaders.
		<blockquote style="color:red; font-weight: bold; background: #ccc">HTML5 is de nieuwste versie van de HTML-standaard.</blockquote>
		</p>
		
		<h2>CSS</h2>
		
		<p style="color:green;">CSS (<a href="https://nl.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">Cascading Style Sheet</a>) is een onderdeel van HTML en verzorgt de opmaak.</p>
		
		<h2>JAVASCRIPT</h2>
		
		<p style="color:green;"><a href="https://nl.wikipedia.org/wiki/JavaScript" target="_blank">JAVASCRIPT</a> zorgt voor de interactie met de gebruiker.</p>

	</body>

</html>

Download hier het bestand.
<!--opdracht 2: maak de opdracht conform de dia.
Breid de vorige opdracht uit en voeg de bestaande afbeeldingen toe uit de huidige map.
Verplaats vervolgens de links naar deze afbeeldingen. -->

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

	<head>
	  <title>Opdracht 2</title>
	</head>

	<body>

		<h1 style="color:blue;">Webpagina</h1>
		
		<hr>
		
		<h2>HTML</h2>
		
		<a href="https://nl.wikipedia.org/wiki/HyperText_Markup_Language" target="_blank"><img src="html.jpg" alt="HTML" width="10%" height="10%"></a>
		
		<p style="color:green;">HTML (HyperText Markup Language) is het fundament van een webpagina. Het geeft een pagina structuur d.m.v.
		kaders.
		<blockquote style="color:red; font-weight: bold; background: #ccc">HTML5 is de nieuwste versie van de HTML-standaard.</blockquote>
		</p>
		
		<h2>CSS</h2>
		
		<a href="https://nl.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><img src="css.jpg" alt="CSS" width="10%" height="10%"></a>
		
		<p style="color:green;">CSS (Cascading Style Sheet) is een onderdeel van HTML en verzorgt de opmaak.</p>
		
		<h2>JAVASCRIPT</h2>
		
		<a href="https://nl.wikipedia.org/wiki/JavaScript" target="_blank"><img src="js.jpg" alt="JAVASCRIPT" width="10%" height="10%"></a>
		
		<p style="color:green;">JAVASCRIPT zorgt voor de interactie met de gebruiker.</p>

	</body>

</html>

Download hier het bestand.
<!--opdracht 3: maak de opdracht conform de dia.
Breid de vorige opdracht uit, verplaats de bestaande afbeeldingen naar de sub-map &#91;afbeeldingen&#93; en 
werk de links bij. -->

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

	<head>
	  <title>Opdracht 3</title>
	</head>

	<body>

		<h1 style="color:blue;">Webpagina</h1>
		
		<hr>
		
		<h2>HTML</h2>
		
		<a href="https://nl.wikipedia.org/wiki/HyperText_Markup_Language" target="_blank"><img src="afbeeldingen/html.jpg" alt="HTML" width="10%" height="10%"></a>
		
		<p style="color:green;">HTML (HyperText Markup Language) is het fundament van een webpagina. Het geeft een pagina structuur d.m.v.
		kaders.
		<blockquote style="color:red; font-weight: bold; background: #ccc">HTML5 is de nieuwste versie van de HTML-standaard.</blockquote>
		</p>
		
		<h2>CSS</h2>
		
		<a href="https://nl.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><img src="afbeeldingen/css.jpg" alt="CSS" width="10%" height="10%"></a>
		
		<p style="color:green;">CSS (Cascading Style Sheet) is een onderdeel van HTML en verzorgt de opmaak.</p>
		
		<h2>JAVASCRIPT</h2>
		
		<a href="https://nl.wikipedia.org/wiki/JavaScript" target="_blank"><img src="afbeeldingen/js.jpg" alt="JAVASCRIPT" width="10%" height="10%"></a>
		
		<p style="color:green;">JAVASCRIPT zorgt voor de interactie met de gebruiker.</p>

	</body>

</html>

Download hier het bestand.
<!--opdracht 4: maak de opdracht conform de dia.
Breid de vorige opdracht uit en voeg de zogenaamde anchor-links toe. -->

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

	<head>
	  <title>Opdracht 4</title>
	</head>

	<body>

		<h1 style="color:blue;">Webpagina</h1>
		
		<hr>
		
		<ul>
			<li>
				<a href = "#html">HTML</a>
			</li>
			<li>
				<a href = "#css">CSS</a>
			</li>
			<li>
				<a href = "#javascript">JAVASCRIPT</a>
			</li>
		</ul>
		
		<h2>HTML</h2>
		
		<a href="https://nl.wikipedia.org/wiki/HyperText_Markup_Language" target="_blank"><img src="afbeeldingen/html.jpg" alt="HTML" width="10%" height="10%"></a>
		
		<p style="color:green;" id="html">HTML (HyperText Markup Language) is het fundament van een webpagina. Het geeft een pagina structuur d.m.v.
		kaders.
		<blockquote style="color:red; font-weight: bold; background: #ccc">HTML5 is de nieuwste versie van de HTML-standaard.</blockquote>
		</p>
		
		<h2>CSS</h2>
		
		<a href="https://nl.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><img src="afbeeldingen/css.jpg" alt="CSS" width="10%" height="10%"></a>
		
		<p style="color:green;" id="css">CSS (Cascading Style Sheet) is een onderdeel van HTML en verzorgt de opmaak.</p>
		
		<h2>JAVASCRIPT</h2>
		
		<a href="https://nl.wikipedia.org/wiki/JavaScript" target="_blank"><img src="afbeeldingen/js.jpg" alt="JAVASCRIPT" width="10%" height="10%"></a>
		
		<p style="color:green;" id="javascript">JAVASCRIPT zorgt voor de interactie met de gebruiker.</p>

	</body>

</html>

Download hier het bestand.