Mijnenveger - Opdracht 1

Opdracht 1: De eerste schreden

Op de webpagina gebeurt nog niet zoveel. Dat komt omdat de benodigde opmaakcode en de JavaScript code nog niet worden gebruikt in je spel. De reden is dat deze code niet in index.html hebben gezet, maar dat de benodigde code in aparte bestanden staat waar ons spel nog niet bij kan. Dat gaan we veranderen.

Om de code in de aparte bestanden toe te voegen (include), moeten we een verwijzing opnemen naar die bestanden. De verwijzingen moeten in de <head> sectie komen in het bestand index.html.

Opdracht 1a: Pagina opmaak

De opmaak code (CSS) staat in het bestand mijnenveger.css

Zoek zelf uit welke instructie nodig is om dit stijlbestand op te nemen in het spel.

Probeer eerst zelf het antwoord te vinden en pas als het echt niet lukt, dan mag je bij Oplossing 1a spieken.

▶▶▶ Zoek Opdracht 1a in het bestand index.html en voeg de code op de juiste plaats toe. Hint: je hebt de tag <link> voor het opmaak (css) bestand

Oplossing 1a

<head>     <title>Mijnenveger</title>     <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <link rel="stylesheet" href="mijnenveger.css" type="text/css"> </head>

Merk op wat het effect van het toevoegen van de opmaak code is voor je webpagina (rechterdeel van het browser scherm).

Opdracht 1b: Spel logica

Het spel heeft JavaScript nodig om goed te kunnen werken. Om de benodigde code beschikbaar te maken moeten we, net als bij de opmaak, een verwijzing opnemen in de head sectie in index.html naar het bestand met de JavaScript code.

De benodigde JavaScript code halen we uit het bestand mijnenveger.js

Probeer eerst zelf het antwoord te vinden voordat je het antwoord controleert bij oplossing 1b.

▶▶▶ Zoek Opdracht 1b in het bestand index.html en voeg de code op de juiste plaats toe. Hint: je hebt de tag <script> nodig voor het JavaScript bestand

Oplossing 1b

<head>     <title>Mijnenveger</title>     <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <link rel="stylesheet" href="mijnenveger.css" type="text/css">     <script type="text/javascript" src="mijnenveger.js"></script> </head>

Opdracht 1c: My name is ...

Op de pagina willen we graag de naam van het spel Mijnenveger als kop in grootte 2 hebben. Onder de kopregel moet een horizontale lijn komen. Voeg de benodigde code hiervoor toe in het bestand index.html.

▶▶▶ Zoek Opdracht 1c in het bestand index.html en voeg de benodigde code op de juiste plaats toe.

Oplossing 1c

<h2>Mijnenveger</h2><hr> Deze code moet in de body van index.html komen.

Het resultaat moet eruit zien als in de afbeelding hieronder. Als dat het geval is, kun je verder met opdracht 2.

Mijnenveger - Voorbeeld