Zelf een webpagina maken met HTML-code
Zelf een webpagina maken met HTML-code Stappenplan: 1. 2. 3. 4. 5. 6. 7. 8.
De broncode maken met Kladblok Het resultaat bekijken met Internet Explorer Een tweede webpagina maken en beide pagina’s linken De webpagina’s uitbreiden met nog meer HTML Opsommingen toevoegen Plaatjes toevoegen Tabellen maken Attributen aan de code toevoegen
Benodigde spullen: Laptop, met je eigen map op de server in beeld De programma’s Kladblok en Internet Explorer (of een andere webbrowser) Het programma Acrobat Reader om deze tekst te kunnen lezen De link http://www.leonardoschoolgouda.nl/ict, om deze tekst te kunnen downloaden
Leonardoschool Gouda
Pagina 1
Zelf een webpagina maken met HTML-code
Stap 1: De broncode maken met Kladblok Eerst gaan we een leeg bestand aanmaken dat we vervolgens gaan openen met het programma Kladblok. In het lege bestand gaan we de HTML-code typen die nodig is voor een webpagina. Voer de volgende acties uit: Ga naar de map met je eigen naam in de map van je eigen klas, op de server van Leonardo Klik met je rechter muisknop op een lege plek van je map Kies de optie: Nieuw > Tekstbestand Op de plek waar je geklikt hebt, verschijnt een wit icoontje in de vorm van een leeg document en het heeft de naam Nieuw Tekstbestand.txt Wijzig deze naam in webpagina1.html (let goed op de spelling) en klik op Enter Er verschijnt een melding op het scherm met de vraag of je zeker weet dat je de naam wilt aanpassen omdat het bestand anders misschien niet meer leesbaar is:
Klik op Ja
e met een gouden cirkel er omheen Klik met je rechter muisknop op de blauwe e Het icoontje is veranderd in een blauwe
Kies de optie: Openen met > Kladblok
Leonardoschool Gouda
Pagina 2
Zelf een webpagina maken met HTML-code Het programma Kladblok start op en toont een leeg document
Type nu de volgende regels nauwkeurig over:
Mijn eerste webpagina De titel van de tekst
Dit is de tekst onder de titel
Let op: o Je mag hoofdletters of kleine letters gebruiken o Je mag meer of minder witte regels er tussen houden o Vergeet niet de / in het eindcommando Sla dit bestand op door de toetsencombinatie ctrl-S of door de menuoptie Bestand > Opslaan. Laat het programma Kladblok gewoon open
Het resultaat is een bestand in je map met de naam webpagina1.html. Daarin staat de minimale HTML-code voor je eerste webpagina
Leonardoschool Gouda
Pagina 3
Zelf een webpagina maken met HTML-code
Stap 2: Het resultaat bekijken met Internet Explorer Als het bestand van Kladblok klaar is, kunnen we het openen met Internet Explorer om te zien hoe de webpagina er uit ziet. Voer de volgende acties uit: Dubbelklik met je muis op het bestand webpagina1.html dat in je map staat Internet Explorer start op en toont je jouw eigen, eerste webpagina. Dat ziet er ongeveer als volgt uit (het kan per computer een beetje anders zijn):
Vergelijk eens de tekst in Internet Explorer met de tekst in Kladblok Vragen: o Waar zie je de tekst terugkomen die tussen
en staat? o Wat is het verschil tussen de tekst die tussen
…
staat en de tekst die tussen
…
staat?
Het resultaat is een webpagina in Internet Explorer. Deze toont de tekst die je eerder in Kladblok met HTML-code hebt gemaakt.
Leonardoschool Gouda
Pagina 4
Zelf een webpagina maken met HTML-code
Stap 3: Een tweede webpagina maken en beide pagina’s linken Als je eerste webpagina klaar is, kan je een tweede webpagina maken. Beide pagina’s gaan naar elkaar verwijzen door middel van een hyperlink. Voer de volgende acties uit: Ga terug naar stap 1 en maak op precies dezelfde manier een tweede bestand aan. Maar doe de volgende dingen net iets anders: o noem dit bestand webpagina2.html, o verzin een andere titel (tussen
en ) o gebruik geen
en
, maar
en
o verzin een andere tekst tussen de
en
o verzin een andere tekst tussen de
en
Het resultaat is een tweede bestand in je map met de naam webpagina2.html. Daarin staat de minimale HTML-code voor je tweede webpagina
Ga terug naar stap 2 en bekijk je nieuwe webpagina in Internet Explorer
Het resultaat is een webpagina in Internet Explorer. Deze toont de tekst die je eerder in Kladblok met HTML-code hebt gemaakt.
Pas nu met Kladblok de tekst in webpagina1.html op de volgende wijze aan (let op de vetgedrukte zin):
Mijn eerste webpagina De titel van de tekst
Dit is de tekst onder de titel
Klik hier om naar de andere pagina te gaan
Leonardoschool Gouda
Pagina 5
Zelf een webpagina maken met HTML-code
Sla met de toetscombinatie ctrl-S het bestand webpagina1.html op Voeg nu met Kladblok deze zin ook toe aan webpagina2.html, maar type nu tussen de aanhalingstekens “webpagina1.html” (dus nu met cijfer 1 in plaats van 2 er in) Sla met de toetscombinatie ctrl-S het bestand webpagina2.html op Dubbelklik met je muis op het bestand webpagina1.html dat op je bureaublad staat Internet Explorer start op en toont je jouw eigen, eerste webpagina. Dat ziet er ongeveer als volgt uit (het kan per computer een beetje anders zijn):
Vergelijk eens de tekst in Internet Explorer met de tekst in Kladblok Vragen: o Hoe kan je de link naar de andere pagina herkennen? o Wat gebeurt er als je op de link klikt?
De resultaten zijn twee webpagina’s in Internet Explorer. Ze zijn naar elkaar gelinkt door de HTML-code die je hebt ingevoerd.
Leonardoschool Gouda
Pagina 6
Zelf een webpagina maken met HTML-code
Stap 4: De webpagina uitbreiden met nog meer HTML Door het bestand weer te openen met Kladblok kunnen we nog meer HTML-codes invoeren en het resultaat bekijken via Internet Explorer. Er zijn nog veel meer HTML-code die je kan gebruiken. Zet ze maar in het ‘body-gedeelte’ van je webpagina, sla je bestand op en bekijk het resultaat in Internet Explorer. Titels Titels kan je maken met de volgende HTML-commando’s:
…
…
…
…
…
…
De titel boven in je browser maak je met
… Gewone tekst Voor gewone tekst hoef je geen HTML-commando’s te gebruiken, maar het is beter van wel: Een paragraaf of alinea maak je met
…
Een nieuwe regel maak je met
(let op het streepje er achter!) Dikgedrukte tekst maak je met
… of <em> … Schuingedrukte tekst maak je met
… Links Een link maak je met extra commando’s in het eerste
commando: Een gewone link maak je met … (vul op de plek van de schuine tekst de naam in van de webpagina waar je naar toe wilt linken, bijvoorbeeld http://www.leonardoschoolgouda.nl) Een link die een nieuw browserscherm opent, maak je met
… Een mailadres in je link maak je met
e-mail van de school
Leonardoschool Gouda
Pagina 7
Zelf een webpagina maken met HTML-code
Stap 5: Een opsomming toevoegen Soms wil je een opsomming of een lijstje in je verhaal opnemen, waarin je een aantal opties met een punt ervoor wilt laten zien. Een opsomming maak je met verschillende commando’s: Een opsomming met puntjes ervoor (zoals in deze regel) maak je met
en alle regels ertussen met
... 1. Een opsomming met getallen ervoor (zoals in deze regel) maak je met
...
en alle regels ertussen met
... Bijvoorbeeld:
Opsomming met puntjes:
- De eerste regel met een punt
- De tweede regel
- De laatste regel met een punt ervoor
Opsomming met cijfers:
- De eerste regel met een 1 ervoor
- De tweede regel met een cijfer
- De laatste regel, nu met een 3 ervoor
Neem bovenstaande code over in je webpagina1.html, sla deze op en bekijk het resultaat. De snelste manier om de bovenstaande code over te nemen is door deze te selecteren met je muis en te kopieren met ctrl-C. Daarna kan je deze plakken met ctrl-V in je Kladblok. Let op dat je de dubbele aanhalingstekens wel vervangt door die op je toetsenbord. Vraag: o Maakt de volgorde van de regels iets uit als je puntjes gebruikt? En maakt de volgorde iets uit wanneer je cijfers gebruikt?1
Het resultaat is een tweetal opsommingen, één met puntjes en één met cijfers .
1
is de afkorting van unordered list, ofwel een niet-geordende lijst. is de afkorting van ordered list, ofwel een geordende lijst, dus een met cijfers die een volgorde aangeven.
Leonardoschool Gouda
Pagina 8
Zelf een webpagina maken met HTML-code
Stap 6: Een plaatje toevoegen Een plaatje kan je heel eenvoudig of meer complex maken met verschillende commando’s. Niet alle onderdelen van dit plaatjescommando zijn verplicht, je hoeft ze alleen te gebruiken als je ze nodig vindt. Zorg eerst dat er een plaatje in de folder staat waarin ook webpagina1.html staat. In dit voorbeeld heeft het plaatje de bestandsnaam foto.jpg: Ga op je computer op zoek naar een plaatje dat je in je webpagina wilt tonen. Je kunt ook een plaatje van het internet afhalen. Maak een kopie van het plaatje op je computer en zet die kopie in dezelfde map als waar je webpagina1.html en webpagina2.html staan. Of, als je een plaatje van het internet haalt, sla dit dan op in de map van webpagina1.html. In de volgende regel gaan we er van uit dat jouw plaatje de bestandsnaam foto.jpg heeft, maar je mag ook een andere naam gebruiken (maar houd het eenvoudig). Open webpagina1.html en voeg de volgende tekst toe boven de regel met
Sla je webpagina1.html op via Kladblok en bekijk het resultaat in de browser.
