Maak je eigen Homepage! Les 2

Maak je eigen Homepage!
Les 2

De 'body' van de pagina

Om de zaken wat overzichtelijker te houden schrijf ik vanaf nu alleen wat tussen de <BODY> tags staat. De <HTML>, <HEAD> & <TITLE> tags laat ik dus weg. Natuurlijk moeten ze wel in het document staan.

Dit is heel grappig

Type tussen de body-tags: Dit is heel grappig.
<BODY>
Dit is heel grappig
</BODY>
Wanneer je iets verandert in je document sla dit dan op en klik op de -knop van je browser.

De achtergrondkleur van de pagina

Het eerste wat we nu gaan leren is het veranderen van de achtergrondkleur. Het standaard wit is tenslotte niet de beste kleur om een homepage interessant te maken.

Dit is heel grappig

<BODY BGCOLOR="#FFFF00">
Dit is heel grappig
</BODY>
FFFF00 is computertaal voor geel. Als je hier met de muis klikt, zie je nog een aantal kleuren.
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.
Wanneer je een achtergrondkleur specificeert die niet één van deze kleuren is, dan zal Internet Explorer in de regel de kleur kiezen die daar het dichtst bij komt. Hoewel het op dit moment niet erg belangrijk is te weten hoe browsers met kleuren omgaan kan het toch zijn dat je er iets van wilt weten. Kijk dan even in de bijlage van deze cursus. Daar staat een korte uitleg in.

Een plaatje als achtergrond

In plaats van een kleur kun je ook een plaatje als achtergrond kiezen.

Dit is heel grappig

<BODY BACKGROUND="C:/HTML-cursus/cursus/afb/wolk.jpg">
Dit is heel grappig
</BODY>
De naam van de achtergrondafbeelding is wolk.jpg.
Je ziet een voorbeeld van deze afbeelding hiernaast. Het plaatje wordt net zo vaak naast elkaar en onder elkaar weergegeven totdat de hele achtergrond gevuld is. Het 'pad' naar de afbeelding is C:/HTML-cursus/cursus/afb/..... (dat is dus de plaats waar het plaatje te vinden is).
Het intypen van zo'n lang pad vraagt gewoon om fouten. Er is een slimmere methode: klik met de rechter muisknop op de achtergrondafbeelding en kies uit het snelmenu de optie Achtergrond (of Afbeelding) opslaan als.... Sla de afbeelding op als wolk.jpg in de map 'Webpages' bij je HTML-pagina. Je kunt dan het plaatje op je pagina zetten met behulp van de volgende (simpelere) regels:
<BODY BACKGROUND="wolk.jpg">
Dit is heel grappig
</BODY>
Je kunt ook een lang en smal plaatje gebruiken. Zoiets als dit...

Dit is heel grappig

De eigenlijke afbeelding (red.jpg) is een lijntje van 10 pixels hoog en 800 pixels breed, maar Internet Explorer herhaalt dit lijntje 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:
<BODY BACKGROUND="red.jpg">
Dit is heel grappig
</BODY>

Vet, cursief en onderstrepen

Laten we terug gaan naar het gewone witte scherm.
<BODY>
Dit is heel grappig
</BODY>

Dit is heel grappig

We kunnen tekst vet weergeven.
<BODY BGCOLOR="#FFFFFF">
Dit is heel grappig
</BODY>
We vertellen de browser het volgende: geef vanaf de tag alles vet weer en stop daarmee vanaf de tag.

Dit is heel grappig

Hetzelfde geldt voor cursief...
<BODY BGCOLOR="#FFFFFF">
Dit is heelgrappig
</BODY>
...en onderstrepen.
<BODY BGCOLOR="#FFFFFF">
Dit is heelgrappig
</BODY>

Combinaties van tags

Dit is heel grappig

Terug naar het gewone witte scherm.
<BODY>
Dit is heel grappig
</BODY>
Als je dat wilt kun je ook combinaties van tags gebruiken.
<BODY>
Dit is heel grappig
</BODY>
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.
Een voorbeeld:
<DIT><DAT></DIT></DAT> Overlappende tags.... FOUT
<DIT><DAT> </DAT></DIT> Geneste tags.... GOED

Voor elke letter evenveel ruimte!

Dit is heel grappig

Een heel handig lettertype is het monospaced font, of TeleType.
<BODY>
<TT>Dit is heel grappig<TT>
</BODY>
Elke letter gebruikt hier dezelfde hoeveelheid horizontale ruimte:

Monospaced font
iiiiiiiiii oooooooooo mmmmmmmmmm

Hier gebruikt elke letter niet dezelfde hoeveelheid ruimte:

Normaal lettertype
iiiiiiiiii
oooooooooo
mmmmmmmmmm

Grote en kleine letters

Dit is heel grappig

We kunnen ook de f o n t g r o o t t e... wijzigen.
Het is heel simpel!
<BODY>
Dit is heel

grappig
</BODY>
Fonts zijn er in 7 groottes:

heel klein	klein	normaal	extra medium	groot	heel groot	schreeuwend
1	2	3	4	5	6	7

Laat ik even twee dingen duidelijk maken.

Een <TAG> vertelt de browser dat hij iets moet doen. Een optie die in de <TAG> staat vertelt de browser hoe hij het moet doen.
De standaard waarde. Zoals je waarschijnlijk weet is de standaard waarde de waarde die de browser aanneemt als je niets anders specificeert. Een goed voorbeeld is de fontgrootte. De standaard waarde is 3. Als je in je HTML document niets anders opgeeft zie je in je browser fontgrootte 3.

Een ander type letters

Elke browser heeft zijn eigen standaard waarde voor het fonttype, de fontgrootte en de fontkleur. Als je de standaardwaarde niet verandert hebt is het type Times New Roman, de grootte 12pt (12 punten is het equivalent van SIZE=3) en de kleur zwart. Met Internet Explorer kunnen we ook andere lettertypen specificeren. Zoals ARIAL en COMIC SANS.

Dit is heel grappig

<BODY>
Dit is heel grappig
</BODY>
Het font wordt alleen weergegeven als het geïnstalleerd is op de computer van degene die het document bekijkt.
Dus... Als je een lettertype opgeeft dat niet op de computer van de lezer van je homepage staat, zal hij de als standaardwaarde ingestelde fonts zien. Wees dus voorzichtig in het gebruik van fonts.

Arial, Comic Sans MS en Impact worden veelgebruikt in Windows. Om te voorkomen dat je lezer een bepaald lettertype niet heeft kun je er meer dan één opgeven. Probeer dit maar eens uit...
Joepieeee.
Voor diegenen die niet meteen snappen wat ik bedoel: De browser zoekt naar ARIAL. Als hij die vindt gebruikt hij die. Zo niet dan zoekt hij naar HELVETICA. Als die ook niet gevonden wordt, zoekt hij naar LUCIDA SANS. En als hij deze niet vindt dan gebruikt hij de standaardwaarde.
Ik denk dat we nu best iets over de syntaxis kunnen vertellen. Misschien heb je gemerkt dat dat ik hier en daar aanhalingstekens gebruik. Die zijn heel belangrijk. Je kunt een homepage totaal overhoop gooien omdat je één enkel aanhalingstekentje vergeet, of een spatie, of een groter-dan-tekentje. Op een dag zijn we misschien verlost van dit soort priegelwerk maar voorlopig zullen we secuur moeten werken. Een ander aspect is mijn gebruik van HOOFDLETTERS voor het opgeven van de codes. Dit is gewoon een persoonlijke voorkeur. De tags zijn beter van de rest te onderscheiden wanneer je hoofdletters gebruikt. Je kunt evengoed in plaats van gebruiken. Je kunt zelfs gebruiken als je vindt dat het daardoor mooier wordt.

Een andere kleur letters

Dit is heel grappig

OK, nu terug naar het leukere werk.
Als je het leuk vindt kun je ook de kleur van je fonts aanpassen.
<BODY BGCOLOR="#FFFFFF">
Dit is heel grappig
</BODY>

En nu alles tegelijk!!

Dit is heel grappig

<BODY>
Dit is heel grappig
</BODY>

Voor alle duidelijkheid vertel ik nogmaals dat meerdere tags genest moeten worden:
<TAG3> <TAG2> <TAG1> Joepieee! </TAG1> </TAG2> </TAG3>
Het maakt niet uit welke tag je eerst zet. Het is dus niet zo dat wanneer je iets rood en met wilt maken dat je eerst het ene, dan het andere moet specificeren. Je kunt elke willekeurige volgorde gebruiken, zoals...
<TAG2> <TAG1> <TAG3> Joepieee! </TAG3> </TAG1> </TAG2>
De snelste manier om je browser over de rooie te helpen, om van jezelf maar niet te spreken is het laten overlappen van de tags...
<TAG3> <TAG2> <TAG1> Hooha! </TAG3> </TAG1> </TAG2>

Einde les 2

Zo! Nu weet je zo ongeveer alles over het manipuleren van tekst in je document.. Je kunt nu grote rode letters of kleine vette letters maken. Je kunt andere Fonts, of monospaced fonts gebruiken.
Je kunt zelfs een r ol l e rc o a st e r maken!!
De code voor de rollecoaster staat hier als je het wilt bekijken.

Intro Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Index