Hallo Wereld!

Een klassieke toets voor programmeertalen is: hoe lang duurt het voordat iemand voor wie die taal nieuw is de tekst "Hallo Wereld!" op het scherm heeft gezet.¹ Wij gaan eens kijken of u dat in 5 minuten voor elkaar krijgt.

Opdracht

Start Kladblok op.
Tik de volgende tekst over:
<HTML>
<HEAD>
<TITLE>
Mijn Eerste Poging
</TITLE>
</HEAD>
<BODY>
Hallo Wereld!
</BODY>
</HTML>
Sla deze tekst op, in de hiervoor bestemde directory, onder de naam index.htm, en let u erop dat u kiest voor "Opslaan als: alle bestanden". Doet u dat niet, dan wordt de extensie ".txt" gehanteerd, en de extensie ".htm" of ".html" is nu eenmaal verplicht voor HTML-bestanden. (Omtrent de naam: het is gebruikelijk dat de "beginpagina" van een website "index.htm" of "index.html" genoemd wordt. Namen als "default" en "home" komen ook voor. Als u in het echt aan de slag gaat, checkt u dan even of uw provider op dit punt nog wensen heeft.)
Nog even een opmerking over bestandsnamen: spaties in namen worden niet op prijs gesteld (meestal geven ze geen problemen, maar op onvoorspelbare momenten en manieren weer wel), en een consequent gebruik van hoofd- dan wel kleine letters is aan te raden. In een Windows-omgeving (zoals uw eigen pc) maakt het niets uit, maar in een Unix-omgeving (zoals bij uw procider waarschijnlijk het geval zal zijn) vormt dit het verschil tusse succes en "Error 404 - file not found". (Dat blijkt dus echt zo te zijn: een van mijn correspondenten heeft zich hier geruime tijd het hoofd over gebroken, voordat we bedachten dat dit er de oorzaak van zou kunnen zijn dat zijn site maar niet in de lucht kwam.) En verder wordt er nogal eens raar omgegaan met accenten, trema's en zo. Laat die bij bestandsnamen dus maar achterwege.
Open Windows Verkenner, selecteer dat bestand en dubbelklik erop. De browser zal nu dit bestand laden, en u ziet dat u Hallo hebt gezegd tegen de wereld. Verder ziet u dat in de titelbalk van de browser de term Mijn Eerste Poging is verschenen.

Dit zou u moeten zien:

(Waarschijnlijk ziet u een groter scherm, ik heb het hier verkleind tot de door u geproduceerde tekst. En wat u in de adresbalk ziet, hangt af van de directory-structuur die u aanhoudt. Dat kan bij u dus heel goed C:\cursus\index.html of iets dergelijks zijn.)
Laten we eens naar de gemaakte tekst kijken en zien wat nu wat heeft veroorzaakt. U ziet diverse tags. De tag "<HTML>" staat aan het begin; eenzelfde tag, maar dan voorzien van een slash (schuine streep) staat aan het eind. Wat er aan de hand is: de browser wordt hier verteld dat het tussenliggende gedeelte als HTML moet worden behandeld. Eenzelfde begin- en eind toestand ziet u 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 hebt u hier gebruikt. U ziet dat in de blauwe balk de kreet "Mijn Eerste Poging" staat.

(Voorlopig is het opgeven van die TITLE het enige wat u met de HEAD-sectie doet. In een véél later stadium komt u de HEAD-sectie weer tegen als we de META-tag behandelen, en als we Style Sheets en JavaScript bespreken. Maar laat dat voor het moment alstublieft zitten.)

U kunt zo'n 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 wat duidelijker (in uw code) als u zich aanwent, hoofdletters te gebruiken. Nog een punt: regelomhalen in uw HTML-code hebben geen effect op de weergave in de browser. Regelmatig gebruik van witregels maakt uw code wel 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 u zich in de komende hoofdstukken eigen gaat maken. Hier hebt u geen verdere opmaakcodes gebruikt, dus u ziet gewoon de kreet "Hallo Wereld!" op het scherm.

Als u geen bevredigend resultaat ziet, hebt u misschien een typefout gemaakt. Loopt u uw tekst nog eens goed door. Of misschien is dat "opslaan als" niet goed gegaan. 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 u het even handmatig aanpassen. Kwestie van de extensie er achter tikken.
Een tip: sla uw werk regelmatig op, en bekijk dan de meest actuele versie (met de knop "Vernieuwen" in uw browser). Een enkele tikfout kan tot chaos leiden². Als u plotseling iets onbegrijpelijks ziet, weet u dat het tussen "de vorige keer" en nu ontstaan is.

Leestekens

Nog even een opmerking over accenten, trema's, Umlaute en dergelijke. De Engelse taal werkt nauwelijks met dat soort dingen. HTML-documenten waar dit soort zaken in zitten willen nog wel eens haperen, als u een e-accent op de normale wijze tikt. In het naslag-gedeelte geef ik enige voorbeelden van hoe u dan correcte HTML-code maakt. Als u verwacht veel met dit probleem te maken te krijgen, is het misschien een idee om daar eens te kijken.

U kunt nu verder naar Koppen en alinea's.

¹ Volgens het verhaal is dit bedacht door Bjarne Stostrup, uitvinder van de wegens zijn complexiteit beruchte computertaal C++.
² Verzuchting in een computerblad: "Computers emotieloos? Drie dagen een puntkomma kwijt in Pascal, da's pas emotie!"