De oefeningen - Basics
Orientatieopdracht (10 min)
Ga op internet verschillenden websites bekijken en beantwoord de volgende vragen:
Wat valt je op als je de websites bekijkt? Zijn ze allemaal hetzelfde of wat is er anders, is dit logisch?
Welke soorten website zijn er?
Wat kun je op die websites doen?
Heeft elke website dezelfde doelgroep? Benoem de doelgroep(en).
Hallo HTML!
Een goede test om te kijken of een programmeertaal geschikt is, is kijken hoe lang het duurt voordat iemand, voor wie die taal nieuw is, de tekst "Hallo HTML!" op het scherm heeft gezet.
Wij gaan kijken of jij dat in 10 minuten voor elkaar krijgt.
Voer hiervoor opdracht 1 stap voor stap uit.
Opdracht 1
- Maak een nieuwe map met de naam: jouwachternaam _html
- Start het programma "Kladblok" op.
- Type de volgende tekst over:
- Sla deze tekst op, in de hiervoor bestemde map, onder de naam index.html, en let erop dat jij kiest voor "Opslaan als: alle bestanden".
Nog even een opmerking over bestandsnamen:
Het is gebruikelijk dat de "beginpagina" van een website "index.html" genoemd wordt.
Spaties in namen worden niet op prijs gesteld (meestal geven ze geen problemen, maar op onvoorspelbare momenten en manieren), en een consequent gebruik van hoofd- dan wel kleine letters is aan te raden.
- Open Windows Verkenner, selecteer dat bestand en dubbelklik erop.
De browser zal nu dit bestand laden, en jij ziet je allereerste site verschijnen
Is je de titel van je pagina al opgevallen? In de titelbalk van de browser is de term “Mijn Eerste Pagina in HTML” verschenen.
LET OP: Wat jij in de adresbalk ziet, hangt af van de map-structuur die jij aanhoudt.
Dat kan bij jou dus heel goed K:\ACHTERNAAM_HTML\index.html zijn.
LET OP: Wat jij in de adresbalk ziet, hangt af van de map-structuur die jij aanhoudt.
Dat kan bij jou dus heel goed K:\ACHTERNAAM_HTML\index.html zijn.
Laten we nog even gaan kijken naar de door jou getypte tekst. Wat heb je nu precies gedaan?
We zien diverse tags.
Een tag is een woord tussen haakjes <> .
De tag <HTML> staat aan het begin; dezelfde tag, maar dan voorzien van een slash (schuine streep) </HTML> staat aan het eind.
Wat gebeurt hier?
Aan de browser wordt verteld dat het tussenliggende gedeelte als HTML moet worden behandeld.
Eenzelfde begin- en eind toestand zien wij bij de tag <HEAD> en </HEAD> .
Dat geeft de header aan: het kop-gedeelte. Dit bevat dingen die niet op het "eigenlijke" scherm terecht komen.
Uitzondering daarop: wat er in het TITLE-gedeelte staat. Dat heb jij hier gebruikt.
Je ziet dat in de blauwe balk de tekst "Mijn Eerste Pagina in HTML" staat.
We kunnen een dergelijke tag in hoofdletters zowel als kleine letters opgeven, dat maakt voor het effect niet uit.
<BODY> en <body> worden op dezelfde manier opgevat.
Het is alleen duidelijker (in onze code) hoofdletters te gebruiken.
Om het coderen nog overzichtelijk te houden kun je witte regels en enters toepassen in je code. Maar…….enters en witte regels in jouw HTML-code hebben geen effect op de weergave in de browser. Regelmatig gebruik van witregels maakt de code beter leesbaar.
Het eigenlijke verhaal speelt zich af in het BODY-gedeelte, dus tussen de tags <BODY> en </BODY>.
Alles wat hier staat, wordt op het scherm weergegeven, voorzien van de opmaakcodes die wij in de komende hoofdstukken gaan leren.
Hier hebben wij geen verdere opmaakcodes gebruikt, dus wij zien gewoon de tekst "Hallo HTML!” op het scherm.
Tip:
Als jij geen resultaat ziet, heb jij misschien een typefout gemaakt.
1. Loop jouw tekst nog eens goed door.
2. Of misschien is dat "opslaan als" niet goed gegaan.
3. Check dat met rechtsklikken op de bestandsnaam, en dan op "eigenschappen" controleren. Als er in het volgende venstertje niet staat dat het een HTML-document is, moet je het even handmatig aanpassen. Kwestie van de extensie er achter tikken (LET OP: Dit kan niet op elke computer!!!).
Extra tip: sla je werk regelmatig op.
Bekijk dan de meest actuele versie (met de knop "Vernieuwen" in je browser).
Een enkele tikfout kan tot chaos leiden.
Als je plotseling iets onbegrijpelijks ziet, weet je dat het tussen "de vorige keer" en nu is ontstaan.is.
We zien diverse tags.
Een tag is een woord tussen haakjes <> .
De tag <HTML> staat aan het begin; dezelfde tag, maar dan voorzien van een slash (schuine streep) </HTML> staat aan het eind.
Wat gebeurt hier?
Aan de browser wordt verteld dat het tussenliggende gedeelte als HTML moet worden behandeld.
Eenzelfde begin- en eind toestand zien wij bij de tag <HEAD> en </HEAD> .
Dat geeft de header aan: het kop-gedeelte. Dit bevat dingen die niet op het "eigenlijke" scherm terecht komen.
Uitzondering daarop: wat er in het TITLE-gedeelte staat. Dat heb jij hier gebruikt.
Je ziet dat in de blauwe balk de tekst "Mijn Eerste Pagina in HTML" staat.
We kunnen een dergelijke tag in hoofdletters zowel als kleine letters opgeven, dat maakt voor het effect niet uit.
<BODY> en <body> worden op dezelfde manier opgevat.
Het is alleen duidelijker (in onze code) hoofdletters te gebruiken.
Om het coderen nog overzichtelijk te houden kun je witte regels en enters toepassen in je code. Maar…….enters en witte regels in jouw HTML-code hebben geen effect op de weergave in de browser. Regelmatig gebruik van witregels maakt de code beter leesbaar.
Het eigenlijke verhaal speelt zich af in het BODY-gedeelte, dus tussen de tags <BODY> en </BODY>.
Alles wat hier staat, wordt op het scherm weergegeven, voorzien van de opmaakcodes die wij in de komende hoofdstukken gaan leren.
Hier hebben wij geen verdere opmaakcodes gebruikt, dus wij zien gewoon de tekst "Hallo HTML!” op het scherm.
Tip:
Als jij geen resultaat ziet, heb jij misschien een typefout gemaakt.
1. Loop jouw tekst nog eens goed door.
2. Of misschien is dat "opslaan als" niet goed gegaan.
3. Check dat met rechtsklikken op de bestandsnaam, en dan op "eigenschappen" controleren. Als er in het volgende venstertje niet staat dat het een HTML-document is, moet je het even handmatig aanpassen. Kwestie van de extensie er achter tikken (LET OP: Dit kan niet op elke computer!!!).
Extra tip: sla je werk regelmatig op.
Bekijk dan de meest actuele versie (met de knop "Vernieuwen" in je browser).
Een enkele tikfout kan tot chaos leiden.
Als je plotseling iets onbegrijpelijks ziet, weet je dat het tussen "de vorige keer" en nu is ontstaan.is.