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.
<BODY>
</BODY>
Type: Dit is heel grappig.
<BODY>
Dit is heel grappig....
Dit is heel grappig
</BODY>
De Netscape titelbalk die je in de tekst ziet staan
heb ik gemaakt met Corel Capture.
Het eerste wat we nu gaan leren is het veranderen van de achtergrondkleur. Het standaard grijs is tenslotte niet de beste kleur om een homepage interessant te maken.
<BODY BGCOLOR="#FFFFFF">
Dit is heel grappig
</BODY>
|
Dit is heel grappig.... |
FFFFFF is computertaal
voor wit. Hier zijn er nog een paar.
In 256 kleuren modus dithert Netscape alle afbeeldingen naar deze kleuren.
Wanneer je een achtergrondkleur specificeert die niet één van
deze kleuren is, dan zal Netscape 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.
In plaats van een kleur kun je ook een plaatje als achtergrond kiezen.
<BODY BACKGROUND="pics/swirlies.gif">
Dit is heel grappig
</BODY>
|
Dit
is de achtergrond afbeelding.
Je vindt
dit plaatje (swirlies.gif) in de map pics. Als je deze cursus online leest,
klik dan met de rechter muisknop op het plaatje en kies Save Image As...
Het zal duidelijk zijn dat de afbeelding meerdere keren naast elkaar wordt weergegeven.Als je een lang en smal plaatje gebruikt krijg je zoiets als dit...
<BODY BACKGROUND="pics/bluebar.gif">
Dit is heel grappig
</BODY>
|
De eigenlijke afbeelding is een lijntje van twee pixels breed maar Netscape herhaalt ze zovaak totdat het scherm volstaat.
Laten we terug gaan naar het gewone witte scherm.
<BODY BGCOLOR="#FFFFFF">
Dit is heel grappig
</BODY>
|
Dit is heel grappig.... |
We kunnen tekst vet weergeven.
<BODY BGCOLOR="#FFFFFF">
Dit is heel <B>grappig</B>
</BODY>
|
Dit is heel grappig... |
We vertellen de browser het volgende: geef vanaf de <B> tag alles vet weer en stop daarmee vanaf de </B> tag.
Hetzelfde geldt voor cursief...
<BODY BGCOLOR="#FFFFFF">
Dit is <I>heel</I><B> grappig</B>
</BODY>
|
Dit is heel grappig... |
<BODY BGCOLOR="#FFFFFF">
<U>Dit is </U><I>heel</I><B> grappig</B>
</BODY>
|
Dit is heel grappig.... |
Terug naar het gewone witte scherm.
<BODY BGCOLOR="#FFFFFF" >
Dit is heel grappig
</BODY>
|
Dit is heel grappig.... |
Als je dat wilt kun je ook combinaties van tags gebruiken.
<BODY BGCOLOR="#FFFFFF">
Dit is heel <I><B>grappig</B></I>
</BODY>
|
Dit is heel grappig.... |
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
Een heel handig lettertype is de mono-spaced font, of TeleType.
<BODY BGCOLOR="#FFFFFF">
<TT>Dit is heel grappig<TT>
</BODY>
|
Dit is heel grappig.... |
Elke letter gebruikt dezelfde hoeveelheid horizontale ruimte. Handig als je tekst netjes onder elkaar wilt plaatsen.
|
Dit is het monospaced type: |
iiiiiiiiii |
|
Dit is het reguliere type: |
iiiiiiiiii
|
We kunnen ook de f o n t g r o o t t e... wijzigen. Het is heel simpel!
Als eerste voegen we de <FONT> tags toe...
<BODY BGCOLOR="#FFFFFF">
Dit is heel <FONT>grappig</FONT
>
</BODY>
Dan specificeer je de GROOTTE.
<BODY BGCOLOR="#FFFFFF">
Dit is heel <FONT SIZE=6>grappig</FONT>
</BODY>
|
Dit is heel grappig.... |
Fonts zijn er in 7 groottes:
|
heel klein |
klein |
normaal |
medium |
groot |
heel groot |
schreeuwend |
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Laat ik even twee
dingen duidelijk maken. Ten eerste, 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.
Ten tweede 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.
Elke browser heeft zijn eigen standaard waarde voor font, -grootte en -kleur. Als je de standaardwaarde niet verandert hebt is dit in Netscape Times New Roman 12pt (12 punten is het equivalent van SIZE=3) kleur zwart. Met Netscape 3.0 of hoger kunnen we ook andere lettertypen specificeren. Zoals ARIAL en COMIC SANS. In deze cursus is bijna overal gebruik gemaakt van Verdana, grootte 2. Alleen de voorbeelden, zoals die hieronder, staan in een monospaced font.
<BODY BGCOLOR="#FFFFFF">
Dit is heel <FONT FACE="ARIAL">grappig</FONT>
</BODY>
|
Dit is heel grappig .... |
Het font wordt alleen weergegeven als dit geïnstalleerd is op de computer van degene die het document bekijkt. Dus... Als je een font opgeeft die niet op de computer van de lezer van je homepage staat, zal hij alleen de als standaardwaarde ingestelde fonts zien. Wees dus voorzichtig in het gebruik van fonts. Arial en Comic Sans MS worden veelgebruikt in Windows. Zo ook Impact!. Om te voorkomen dat je lezer een bepaald font niet heeft kun je er meer dan één opgeven. Probeer dit maar eens uit...
<FONT FACE="VERDANA, ARIAL, HELVETICA, SANS-SERIF">Joepieeee</FONT>.
Voor diegenen die niet meteen snappen wat ik bedoel: De browser zoekt naar VERDANA. Als hij die vindt gebruikt hij die. Zo niet dan zoekt hij naar ARIAL en vervolgens naar HELVETICA. Als die ook niet gevonden worden, zoekt hij naar SANS-SERIF. En als hij ook deze niet vindt, dan gebruikt hij de standaardwaarde.
Om te zien hoe diverse fonts weergegeven worden door je browser kun je de Font Viewer eens bekijken.
Ik denk dat we nu best iets over de syntaxis kunnen vertellen. Syntaxis is computerjargon voor spelling. 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. Helaas zijn Dreamweaver en in het op dit punt niet helemaal eens, zodat je hoofd- en kleine letters door elkaar ziet als je in mijn broncode kijkt. Je kunt dus ook <font> in plaats van <FONT> gebruiken. Je kunt zelfs <fOnT> gebruiken als je vindt dat het daardoor mooier wordt.
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 <FONT COLOR="#FF0000">grappig</FONT>
</BODY>
|
Dit is heel grappig .... |
We kunnen natuurlijk meer dan één ATTRIBUUT in een <TAG> gebruiken...
<BODY BGCOLOR="#FFFFFF" >
Dit is heel <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">grappig</FONT
>
</BODY>
|
Dit is heel grappig .... |
En nu alles tegelijk!!
<BODY BGCOLOR="#FFFFFF">
Dit is heel <U><I><B><FONT COLOR="#FF0000"
FACE="ARIAL" SIZE="7">grappig</FONT></B></I></U>
</BODY>
|
Dit is heel grappig |
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 vet wilt maken dat je eerst rood en dan vet 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>(Ik wist geen betere manier om dit duidelijk te maken, dus ik hoop dit voorbeeld voldoende is.)
Nog één detail en dan stoppen we met deze les. De browser heeft standaard waarden voor tekst kleur, link kleur, actieve link kleur en bezochte link kleur. De standaard waarden zijn...
|
Text is zwart |
Je kunt deze
kleuren veranderen als je dat nodig vindt (als je dat nodig vindt).
De wereld is gewend geraakt aan blauwe links, dus waarom zou je de wereld
in verwarring brengen? Doe het alleen als het voor de leesbaarheid en je site-layout
niet anders kan. Blauwe links op een blauwe achtergrond, zullen niet vaak
aangeklikt worden. Links die na het bezoeken niet van kleur veranderen, vind ik zelf hoogst irritant.
Je kunt dan, vooral op pagina's met veel links, niet zien waar je geweest bent.
Je kunt de standaard waarden voor het hele document opgeven in de <BODY>
tag.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000"
VLINK="#800000" ALINK="#008000">
Dit is heel grappig
</BODY>
|
Dit is heel grappig Ik weet dat we nog niet besproken hebben
hoe we links maken, dus dat truucje komt later aan bod. (Waarom
zouden we het ingewikkeld maken?). Ik zeg dit alleen maar om aan
te geven hoe je de kleuren kunt veranderen wanneer je wel
leert om links te maken. |
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 je tekst scheef zetten, je kunt er een lijntje onder trekken
en je kunt andere Fonts,
of
monospaced fonts gebruiken.
Je kunt zelfs een
r
o
l
l
e
r
c
o
a
s
t
e
r
maken!!
De code voor de rollecoaster staat hier als je het wilt bekijken.
| Inleiding | Les 1 | Les 2 | Les 3 | Les 4 | Les 5 | Les 6 | Index |