cursus 1: HTML voor beginners


Les 1


Inleiding


Dit ben ikHallo. Je hebt dus gekozen om de beginselen van HTML onder de knie te krijgen. Heel verstandig, want zonder die beginselen ben je nergens. Je zult zien dat het allemaal heel simpel is (Waar heb ik dat eerder gehoord?).
Laten we beginnen. Ten eerste: als je zo'n leuke HTML-editor hebt en van plan bent om die nu te gaan gebruiken ............
VERGEET HET MAAR!!!!
De slechtste manier om HTML te leren is zo'n editor gebruiken. (Natuurlijk zijn er wel een paar goeie maar daar heb je pas wat aan als je de beginselen onder de knie hebt, dus denk daar voorlopig maar niet aan.)
Wat is dan wel de beste manier om HTML te leren?
Kladblok!
Kladblok?
Ja, kladblok. OK, OK, je hebt zo'n fantastisch, ruimtevretend programma dat belooft dat het maken van een website net zo makkelijk is als op je kop krabben maar geloof mij nou maar: blijf er voorlopig vanaf.

Nu dit is afgehandeld kan ik je beloven dat je over 5 minuten al je eerste homepage kunt gaan maken. Dus... aan de slag!


De vorm van een webpagina


Begin met Kladblok op te starten. Dat doe je door op Start te drukken en vervolgens te kiezen voor Programma's, Bureau-accessoires en Kladblok.

In het kladblok typ je het volgende letterlijk in:

<html>
<head>
<title>

</title>
</head>
<body>

</body>
</html>

Elk van deze regeltjes noemen we een 'tag'. Een tag begint altijd met een kleiner-dan-teken (<) en eindigt met een groter-dan-teken (>).
De meeste tags komen in paren voor: een begin- en een eindtag. Om van een begintag een eindtag te maken zet je een schuine streep (/) het kleiner-dan-teken van de begintag.
Zie de tags als het praten met de browser, of nog beter, het geven van instructies aan de browser. Wat je de browser zojuist verteld hebt is: 'dit is de start van een webpagina' (de eerste tag: <html>) en 'dit is het einde van een webpagina' (de laatste tag: </html>).
Tussen de beide html-tags vind je nog drie paren tags. Allereerst het paar head-tags: <head> en </head>.
Elke webpagina heeft een setje head-tags nodig en die staan altijd tussen de html-tags:

<html>
<head>
</head>

</html>

Tussen de head-tags staan altijd een paar title-tags:

<html>
<head>
<title>

</title>

</head>
</html>

Tussen de twee title-tags moet de titel van je webpagina komen te staan. Er kunnen tussen de head-tags nog wel meer tags komen te staan, maar die zijn voor ons voorlopig niet van belang.

Na de head-tags volgen een paar body-tags. De inhoud van de webpagina komt tussen die body-tags te staan.

<html>
<head>
<title>

</title>
</head>
<body>

</body>

</html>

Gefeliciteerd! Je hebt nu een model gemaakt voor een webpagina. Hij is alleen nog leeg.
In principe wordt elke webpagina gemaakt volgens dit model! Dus als je weer een nieuwe webpagina gaat maken, begin je altijd met deze 'tags' in je kladblok te typen.


De titel, de inhoud en het opslaan


Verzin een titel voor je webpagina en typ die tussen de title-tags.
Verzin een zin die op je webpagina moet komen en typ die tussen de body-tags.
Bijvoorbeeld:

<html>
<head>
<title>
Mijn eerste website!
</title>
</head>
<body>
Dit is heel grappig
</body>
</html>

Nu kun je je werk opslaan, niet als tekstdocument maar als webpagina.
Klik in het Kladblok venster op Bestand en dan op Opslaan als.
Je krijgt nu het dialoogvenster te zien dat hier naast staat: Maak een nieuwe map aan door op dit symbool te klikken.
Geef de map de naam Webpages en dubbelklik erop om de map te openen.
In het vak waarvoor staat Bestandsnaam: typ je in page1.html
In het vak waarvoor staat Opslaan als type: klik je op het pijltje en selecteer je Alle bestanden (*.*). Klik op en je bent klaar.
Gefeliciteerd! Je bent nu de trotse bezitter van een volledig werkende webpagina.

Je kunt je pagina op de volgende manier in je browser openen:
Klik in de browser op Bestand en kies voor de optie Nieuw   Venster
Klik weer op Bestand, maar kies nu voor de optie Openen...
Druk op de knop
Zoek de map Webpages, die je net gemaakt hebt en selecteer het bestand
Druk op de knop .
Je kunt nu het resultaat van je inspanning zien!

Zoals je ziet is je homepage helaas nog een beetje leeg, maar de titel van je pagina staat in de bovenste balk van je browser en de verzonnen tekst staat op de pagina. Als je in de statusbalk onder in je venster kijkt, zul je zien dat er nu twee keer een browser geopend is. Door afwisselend op de beide browserknoppen te klikken kun je eenvoudig schakelen tussen de lessen en je eigen pagina!
Wil je bij je pagina weer het kladblok openen, dan klik je op Beeld en kies je voor de optie Bron. Het kladblok wordt dan automatisch geopend. Deze optie kun je ook goed gebruiken om op het Internet te kijken hoe een pagina van een ander in elkaar gezet is!

Dit is heel grappig
Het heeft natuurlijk weinig zin om telkens een afbeelding van de hele browser telaten zien. Het is alleen interessant om te laten zien wat er in het browservenster te zien is. In het vervolg zal ik in een kader naast de code laten zien wat er in het browservenster te zien zal zijn:


Vet, cursief en onderstrepen


Open met behulp van kladblok weer het bestand page1.html. Als het goed is heb je dan weer het volgende voor je (eventueel met een andere titel of tekst):

<html>
<head>
<title>
Mijn eerste website!
</title>
</head>
<body>
Dit is heel grappig </body>
</html>

Om de zaken wat overzichtelijker te houden schrijf ik vanaf nu alleen wat tussen de body-tags komt te staan. De html-, head- en title-tags laat ik dus weg. Natuurlijk moeten ze wel in het document staan.
We kunnen tekst vet weergeven. Daarvoor zetten we om het gedeelte van de tekst dat vet moet worden een paar b-tags (b = bold = vet)

Dit is heel grappig
<body>
Dit is heel <b>grappig</b>
</body>

We vertellen de browser het volgende: geef vanaf de <b>-tag alles vet weer en stop daarmee vanaf de </b>-tag.

Om tekst cursief (schuin) weer te geven gebruiken we i-tags (i = italic = cursief).

Dit is heel grappig
<body>
Dit is <i>heel</i> <b>grappig</b>
</body>

...en onderstrepen kan natuurlijk ook. Daarvoor gebruik je u-tags (u = underline = onderstrepen).

Dit is heelgrappig
<body>
<u>Dit is</u><i> heel</i><b>grappig</b>
</body>

Het resultaat kun je natuurlijk pas weer bekijken als de pagina hebt opgeslagen en eventueel op de knop hebt gedrukt.


Combinaties van tags


We beginnen weer met de kale tekst tussen de body-tags:

Dit is heel grappig
<body>
Dit is heel grappig
</body>

Als je dat wilt kun je ook combinaties van tags gebruiken.

Dit is heel grappig
<body>
Dit is heel <i><b><u>grappig</u></b></i>
</body>

Het resultaat is dat het woord grappig tegelijkertijd cursief, vet en onderstreept is. Dit is een voorbeeld van geneste tags. Als je combinaties van tags gebruikt (iets wat je regelmatig zult doen), dan moet je, om de browser niet in de war te brengen, deze tags 'nesten' in plaats van laten 'overlappen'.
Met nesten wordt bedoeld dat de tag die als eerste geopend werd, als laatste wordt gesloten en dat de tag die als laatste geopend werd als eerste wordt gesloten.
Een voorbeeld:

  <dit><dat></dit></dat>   overlappende tags.... FOUT
  <dit><dat></dat></dit>    geneste tags....         GOED

Opmerking:
Dit lijkt me een goed moment om het over een ander goede gewoonte te hebben. HTML is niet hoofdlettergevoelig (op een hele enkele uitzondering na). Dat betekent dat het voor een browser niet uitmaakt of je voor een tag intypt <body> of <BODY> of zelfs <BoDy>.
Voor de browser maakt het dus niets uit of je hoofdletters of kleine letters gebruikt. Het wordt in webontwerpkringen tegenwoordig als 'good practice' beschouwd om voor de tags kleine letters te gebruiken!


De achtergrondkleur van de webpagina


We gaan nu leren is hoe je de achtergronkleur kunt veranderen. Het standaard wit is tenslotte niet de beste kleur om een homepage interessant te maken.
We maken de achtergrond geel. De kleurcode voor geel is #FFFF00. We typen daarom in de body-tag: bgcolor = #FFFF00 (bgcolor = backgroundcolor = achtergrondkleur):

Dit is heel grappig
<body bgcolor="#FFFF00">
Dit is heel grappig.
</body>

Voor elke kleur bestaat een code. Als je hier met de muis klikt, zie je nog een aantal kleuren met de bijbehorende codes.
Je browser kan niet alleen omgaan met kleurcodes, hij spreekt ook Engels. In plaats van <body bgcolor = "#FFFF00"> had je ook <body bgcolor = "yellow"> kunnen typen.
Als je hier met de muis klikt, zie je een tabel met alle mogelijke (Engelse) kleurnamen die je kunt gebruiken. Je vindt daar ook wat informatie hoe de browser met kleuren omgaat.


Een plaatje als achtergrond


In plaats van een kleur kun je ook een plaatje als achtergrond kiezen. We gaan hier het plaatje van de wolk hieronder als achtergrondafbeelding van je webpagina gebruiken.

De naam van de achtergrondafbeelding is wolk.gif.

Om deze afbeelding te kunnen gebruiken moet je hem opslaan in dezelfde map als waar je webpagina's staan. Klik daarvoor met je rechter muisknop op de afbeelding en kies uit het snelmenu de optie Afbeelding opslaan als.... Sla de afbeelding op als wolk.gif in de map Webpages bij je HTML-pagina.
Nu kun je het plaatje op je pagina zetten met behulp van de volgende (simpelere) regels:

Dit is heel grappig
<body background="wolk.gif">
Dit is heel grappig.
</body>

Sla je pagina op en bekijk hem in de browser. Je ziet hiernaast hoe je pagina er ongeveer uit zou moeten zien. Het achtergronplaatje wordt net zo vaak naast elkaar en onder elkaar weergegeven totdat de hele achtergrond gevuld is. Het kan zijn dat je browser nog steed de oude pagina weergeeft. Klik dan op de knop (vernieuwen) van je browser.

Je kunt ook een lang en smal plaatje gebruiken. Zoiets als dit...


De naam van dit plaatje is red.jpg. Deze afbeelding (red.jpg) is een lijntje van 10 pixels hoog en 1000 pixels breed, maar als je dit lijntje als achtergrond gebruikt, dan herhaalt je browser het net zovaak totdat het hele scherm ermee gevuld is.
Klik met je rechtermuisknop op deze afbeelding en sla hem op in je map Webpages onder de naam red.jpg. Met behulp van de volgende regels kun je dit plaatje dan als achtergrond-afbeelding gebruiken:

Dit is heel grappig
<body background="red.jpg">
Dit is heel grappig
</body>

Je moet je pagina natuurlijk wel opslaan voordat je hem kunt bekijken! Geeft je browser de nieuwe pagina niet weer, klik dan weer op .


einde les 1
naar les 2