Presentaties
Sessie 1 : HTML basis
Sessie 2 : HTML met stijl

Opdracht 1 : HTML document maken

Voorbereiding :

Om te starten neem je de broncode van http://workshop.terbank-egenhoven.be/oefening.htm en voer volgende stappen uit.

Hoe kopieer ik de broncode van een webpagina lokaal op mijn PC?
1. Bekijk in de browser de paginabron van de webpagina
2. Selecteer alle HTML-code en kopieer
3. Start Kladblok op (toont een leeg document)
4. Plak de HTML-code in Kladblok
5. Kies in de menu Bestand->Opslaan als...
6. Selecteer de map, vb. Documenten, vul de bestandsnaam in, bv. mijndier.htm, kies 'Opslaan als' 'Alle bestanden' en 'Codering' 'UTF-8'
7. Klik op 'Opslaan'.

Ga naar het opgeslagen document in het bestandssysteem van je PC (verkenner) en open het in de browser.
Nu ben je klaar om de HTML pagina aan te passen.
Na elke aanpassing bewaar je de HTML en ververs je de pagina in de browser (met ), zodat je het resultaat ziet.

Stap 1 : in commentaar zetten

Zet de tekst Hello world! in commentaar met <!-- -->.

Stap 2 : toevoegen hoofding

Voeg de hoofding <h1>Mijn dier</h1> toe. 'Mijn dier' vervang je door de naam van je dier.

Stap 3 : tonen titel tabblad

Voeg <title>Workshop</title> toe in <head>. Deze verschijnt op het tabblad.

Stap 4 : toevoegen paragraaf

Voeg een paragraaf toe <p>Mijn dier is een ....</p>. Zet een eigenschap van je dier in vetjes met <b> </b>.

Stap 5 : toevoegen lijst

Voeg Uiterlijke kenmerken : toe met eronder een lijst met 3 kenmerken <ul> <li>kenmerk 1</li><li>kenmerk 2</li><li>kenmerk 3</li> </ul>.
Zet het voornaamste kenmerk cursief met <i> </i>.

Stap 6 : toevoegen afbeelding

Zoek op het web een afbeelding van je dier en kopieer de afbeelding lokaal, in dezelfde map als je HTML bestand.
Voeg in je pagina het element <img src="mijndier.jpg" alt="dier" title="mijn dier"/> toe en vervang mijndier.jpg door de naam van je afbeeldingsbestand. Indien de afbeelding te groot is, voeg je het attribuut width="466px" toe.

Stap 7 : tonen van lijn

Voeg een lijn <hr/> toe onderaan.

Stap 8 : toevoegen van link

Voeg onder de lijn de link toe <a href="http://vbs.terbank-egenhoven.be" target="_blank">Vrije Basisschool Terbank-Egenhoven</a>.

Het resultaat lijkt op:
Vrije Basisschool Terbank-Egenhoven | Workshop HTML © 2016 | Created by Els Quartier