Laten we beginnen met vast te stellen hoe een browser met tekst omgaat.
Maak een nieuwe webpagina en sla die op als page2.html
Typ het volgende tussen de body-tags:
He! Wat is hier aan de hand?? |
Sla de pagina op en bekijk het resultaat in de browser. Je zult ziendat de browser je tekst op één regel weergeeft. Hij neemt de regeleinden (= harde return = enter) van het kladblok niet over. Tenzij je hem anders vertelt, wordt tekst als een constante stroom tekens weergegeven.
Hoe krijg je nu je browser zover dat hij naar een volgende regel gaat? Dan moet je dat je browser laten weten met behulp van de break-tag (to break = afbreken). Als je het volgende intypt, dan verschijnt wel elk woord op de volgende regel:
He! Wat is hier aan de hand?? |
<br> wil simpelweg zeggen: begin op een nieuwe regel. Sla de pagina op en bekijk het resultaat. Elk woord staat nu op een eigen regel.
Je ziet dat de break-tag geen sluittag kent! Het is een van de uitzonderingen op de regel dat tags in paren voorkomen.
Typ nu eens in:
He! Wat is hier aan de hand?? |
Je ziet dat elk woord weer op een nieuwe regel terechtkomt. Maar door de dubbele break-tags wordt nu telkens ook een regel overgeslagen.
Naast de break-tag hebben we ook nog een paar paragraph-tags: <p> en </p>. Om te onderzoeken wat deze tags doen typen we in:
Dit lijkt sterk op het vorige blokje met de dubbele break-tags. Maar er is een verschil, want de paragraaf-tags kunnen meer. Je kunt daarmee de tekst tussen deze tags links of rechts uitlijnen of de tekst centreren met behulp van de optie align. Gebruik je deze optie niet dan wordt standaard links uitgelijnd.
Bijvoorbeeld:
He! Wat is hier aan de hand?? |
Het eerste woord staat nu links, het tweede in het midden, het derde rechts, het vierde weer links, het vijfde in het midden, het zesde rechts en het zevende woord staat tenslotte weer aan de linkerkant.
Het volgende voorbeeld geeft een blokje tekst dat gecentreerd is:
He! Wat is hier aan de hand?? He! Wat is hier aan de hand?? He! Wat is hier aan de hand?? He! Wat is hier aan de hand?? He! Wat is hier aan de hand?? He! Wat is hier aan de hand?? |
Om tekst te centreren is er nog een andere mogelijkheid. Je zet het stukje tekst dat je wilt centreren tussen center-tags. Het resultaat is hetzelfde als in het vorige voorbeeld. Een gecentreerd blokje tekst. Alleen wordt er hier voor en na de tekst geen regel overgeslagen.
Maak een nieuwe webpagina en typ tussen de body- tags:
Het is niet alles goud, wat er blinkt! |
Sla de pagina op en bekijk hem in je browser. De browser vertikt het om meer dan één spatie in te voegen. Je zult het in eerste instantie wel raar vinden dat het zo is, maar geloof me, het is beter zo. Het geeft je absolute heerschappij over het uiterlijk van je document.
Er is een handige code waarmee je de browser opdracht geeft om een spatie weer te geven: (nbsp = non breaking space = spatie, waarbij de zin niet afgebroken wordt) Probeer dit maar eens...
Het is niet alles goud, wat er blinkt! |
De spaties worden nu wel weergegeven!
Bij betekent de & dat hier een speciaal teken begint, de ; betekent het einde van dat speciale teken. De letters daar tussen in zijn een soort afkorting van waar het teken voor staat. Er zijn zes van die speciale tekens (eigenlijk veel meer maar dat zijn dan niet tevens HTML code tekens). Deze codes moeten altijd in kleine letters geschreven worden.
Je hoeft ze niet altijd te gebruiken. Gebruik ze alleen wanneer het typen van het echte teken de browser in verwarring brengt. Hoe weet je wanneer dat is? Ik kan zo geen vaste regel bedenken maar je komt er wel achter met een beetje oefenen en een paar miskleunen.
Over fouten en miskleunen gesproken. Fouten en miskleunen zijn een onvermijdelijk bijprodukt van het leren!
OK, genoeg gefilosofeerd.
Er zijn ook nog andere speciale tekens. Je zult ze waarschijnlijk bijna nooit gebruiken; ik wil alleen dat je weet dat ze er zijn.
<body>
Hallo, daar ben ik weer<br>
Ik hoop dat het goed gaat! </body> |
of: |
<body>
Hallo, daar ben
ik weer<br> Ik hoop dat het goed gaat! </body> |
of: |
<body>
Hallo, daar
ben ik weer<br> Ik hoop dat het goed gaat! </body> |
Hallo, daar ben ik weer Ik hoop dat het goed gaat! |
We kunnen ook de
f
o
n
t
g
r
o
o
t
t
e wijzigen.
Het is heel simpel! Maak een nieuwe webpagina en typ tussen de body-tags het volgende:
De letters worden steeds kleiner en kleiner en kleiner. |
Met de optie size kunnen we de grootte van de tekst wijzigen.
Voor de optie size kunnen de waarden 1 (kleinst) tot en met 7 (grootst) gekozen worden. Hieronder vind je een voorbeeld van de deze verschillende grootten.
heel klein | klein | normaal | extra medium | groot | heel groot | schreeuwend |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
OK, nu terug naar het leukere werk.
Als je het leuk vindt kun je ook de kleur van je tekst aanpassen. De font-tag kent namelijk niet alleen de optie size, maar ook de optie color. Bij de optie color moet je net als bij de optie bgcolor van de body-tag gevolgd worden door een kleurcode (zie kleurentabel) of een Engelse kleurnaam (zie kleurennamen). De standaardwaarde voor deze optie is zwart ofwel #000000 ofwel black.
De code hieronder geeft het resultaat dat er naast staat.
De kleuren van de regenboog |
De font-tag heeft nog een derde optie: face. Daarmee kun je het lettertype aanpassen. Het standaard lettertype is Times New Roman.
Voorbeelden van lettertypen zijn Arial, Courier New, Impact, Garamond en Comic Sans MS.
Bijvoorbeeld:
Dit is grappig |
MAAR PAS OP!!!!
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 webpagina staat, zal hij het als de standaard ingestelde font zien. Wees dus voorzichtig met het gebruik van lettertypen!
Ik heb een lijst gemaakt met lettertypen die je veilig op een Windowscomputer kunt gebruiken:browserveilige lettertypen.
Om te voorkomen dat je lezer een bepaald lettertype niet heeft kun je er meer dan één opgeven. Probeer dit maar eens uit...
De browser zoekt naar Century Gothic. Als hij die vindt gebruikt hij die. Zo niet dan zoekt hij naar Verdana. Als die ook niet gevonden wordt, zoekt hij naar Tahoma. Wordt die ook niet gevonden, dan gebruikt de browser Trebuchet MS. Tenslotte kan hij nog naar Arial zoeken. En als hij deze niet vindt dan gebruikt hij de standaardwaarde.
En nu alles tegelijk!!
Dit is grappig |
Voor alle duidelijkheid vertel ik nogmaals dat meerdere tags genest moeten worden:
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 het ene, dan het andere moet specificeren. Je kunt elke willekeurige volgorde gebruiken, zoals...
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...
Een heel handig lettertype is het monospaced font, of TeleType. Omdit lettertype te bekijken typ je het volgende in je kladblok:
Bij een monospaced font gebruikt elke letter dezelfde hoeveelheid horizontale ruimte. Dus een brede letter krijgt evenveel ruimte toegewezen als een smalle letter.
monospaced font |
iiiiiiiiii aaaaaaaaaa mmmmmmmmmm |
Hier gebruikt elke letter niet dezelfde hoeveelheid ruimte. Bij een normaal lettertype wordt er voor een smalle letter minder horizontale ruimte uitgetrokken dan voor een brede letter.
normaal lettertype |
iiiiiiiiii oooooooooo mmmmmmmmmm |
Het TeleType lettertype is handig in het volgende voorbeeld. Typ in je kladblok letterlijk over wat je in de afbeelding hiernaast ziet.
Aan de tt-tags kun je zien dat hier gebruik gemaakt wordt van het monspaced lettertype. Dat is nodig om alle letters mooi onder elkaar te kunnen krijgen.
Sla het bestand op en bekijk het in je browser. Je ziet dan niet dit wat je in je kladblok hebt getypt, .....
\|/ (@ @) +----oOO----(_)-----------+ | SJENG | | FOR | | PRESIDENT | +-----------------Ooo-----+ |__|__| || || ooO Ooo |
Dat komt omdat de browser elke groep spaties in je kladblok als één spatie opvat en regeleinden uit het kladblok negeert. Is er een methode om de browser te dwingen om met elke spatie en met regeleinden uit het kladblok rekening te houden? Je kunt de browser dwingen om rekening te houden met opmaak die al in de tekst gestopt is met behulp van de pre-tags (pre = preformatted = van tevoren opgemaakt).
Zet de pre-tags op de juiste plaats, zoals in de afbeelding van het kladblok hieronder. Het resutaat staat in de afbeelding ernaast.
Neem de pre-tags op in je code zoals in het kladblok hieronder is aangegeven. Ernaast zie je dan wat er in de browser wordt weergegeven.
\|/ (@ @) +----oOO----(_)-----------+ | SJENG | | FOR | | PRESIDENT | +-----------------Ooo-----+ |__|__| || || ooO Ooo |