Tekstopmaak
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
1. Inleiding
2. Paragrafen
3. Hoofdingen
4. Horizontale lijnen
5. Tekst en afbeeldingen
6. Grootte, kleur en lettertype
7. Onderlijnen, vetgedrukt, cursief
1. Inleiding
In deze tutorial wil ik wat uitleg geven over de mogelijkheden om door gebruik
van zuivere HTML tekst en afbeeldingen te schikken op een pagina, en het lettertype,
de grootte en de kleur vast te leggen. Inderdaad, het is mogelijk om heel wat
uit deze tutorial met CSS te bereiken, en soms heeft CSS de voorkeur boven HTML,
maar deze tutorial laat toch zien wat de mogelijkheden zijn in HTML.
Een andere
manier is om tekst en afbeeldingen te schikken is gebruik maken van tabellen.
Dat wordt echter in een andere tutorial behandeld. Met deze tutorial leer je tekst
binnen een cel van een tabel op te maken.
 top
2. Paragrafen
Een paragraaf is een blok tekst die apart staat van de rest van de tekst. Paragrafen
worden in een browservenster van elkaar gescheiden door een witregel. Een paragraaf
wordt aangeduid door <P> en afgesloten met </P>.
Deze tag heeft alvast één attribuut, namelijk align. Met dit attribuut kan tekst
links of rechts uitgelijnd worden, of gecentreerd worden. Zonder het align-attribuut
wordt de tekst links uitgelijnd.
Voorbeeld:
<P ALIGN="left">De
tekst wordt links uitgelijnd</P> |
de tekst wordt links uitgelijnd |
Voorbeeld:
<P ALIGN="right">De
tekst wordt rechts uitgelijnd</P> |
de tekst wordt rechts uitgelijnd |
Voorbeeld:
<P ALIGN="center">De
tekst wordt gecentreerd</P> |
de tekst wordt gecentreerd |
Binnen een paragraaf kan je een nieuwe regel beginnen door gebruik te maken van
<BR>. De tekst na deze tag begint op een nieuwe regel,
maar nu zonder witruimte tussen te laten.
top
3. Hoofdingen
Een pagina wordt interessanter en gemakkelijker leesbaar als je een titel boven een paragraaf plaatst. Een hoofding maak je door de tekst tussen <H6> en </H6> te plaatsten. De H staat voor Header, en het getal (van 1 tot 6) erachter bepaalt de grootte van de letters: 1 is het grootst, 6 het kleinst.
Voorbeeld:
Hoofding 2
Voorbeeld:
Hoofding 4
top
4. Horizontale lijnen
Een andere manier om grote stukken tekst leesbaarder te maken is om horizontale lijnen te gebruiken. Een horizontale lijn wordt gemaakt door de tag <HR>. Pas op: deze tag wordt niet afgesloten!
<HR> heeft een aantal attributen: align, color, noshade, size en width.
<HR ALIGN
= "left"> |
de lijn is links uitgelijnd |
<HR ALIGN
= "right"> |
de lijn is rechts uitgelijnd |
<HR ALIGN
= "center"> |
de lijn is gecentreerd |
<HR COLOR
= "red"> |
de lijn is rood gekleurd. De namen van de kleuren of hun hexadecimale code kan gebruikt worden. |
<HR NOSHADE> |
de lijn wordt vlak weergegeven; standaard heeft de lijn een 3D effect. |
<HR SIZE
= "2"> |
de dikte van de lijn is 2 pixels. |
<HR WIDTH
= "50%"> |
de lengte van de lijn: kan weergegeven worden in pixels of in percent. |
Alle attributen van <HR> zijn "depreciated"; dat wil zeggen dat ze in de toekomst niet meer gebruikt mogen worden. Een alternatief is het gebruik van CSS om dezelfde effecten te bekomen.
top
5. Tekst en afbeeldingen
Pas echt leuk wordt het je afbeeldingen kan toevoegen aan je tekst. Er bestaan verschillende mogelijkheden om tekst en afbeeldingen met elkaar te combineren.
Een afbeelding wordt in een HTML-pagina geplaatst door middel van de <IMG>-tag. Het SRC-attribuut geeft de bron van de afbeelding aan. Let op: de <IMG>-tag wordt niet afgesloten!
voorbeeld:
<IMG SRC="afbeelding.jpg"> |
Tekst en afbeeldingen worden horizontaal of verticaal uitgelijnd door het ALIGN-attribuut te gebruiken in de <IMG>-tag.
Horizontale uitlijning:
<P><IMG
ALIGN="left">tekst</P> |
de afbeelding wordt links geplaatst en de tekst rechts. |
<P><IMG
ALIGN="right">tekst</P> |
de afbeelding wordt rechts geplaatst en de afbeelding links. |
Vertikale uitlijning:
<P><IMG
ALIGN="top">tekst</P> |
de tekst wordt op dezelfde hoogte als de bovenrand van de afbeelding geplaatst. |
<P><IMG
ALIGN="middle">tekst</P> |
de tekst wordt in het midden naast de afbeelding geplaatst. |
<P><IMG
ALIGN="bottom">tekst</P> |
de tekst wordt op dezelfde hoogte als de onderrand van de afbeelding geplaatst. |
Als je dit probeert zie je dat de tekst vlak tegen de afbeelding aankomt. Mooi
is anders. Gelukkig is er nog een attribuut van de <IMG>-tag dat ervoor
zorgt dat er een ruimte wordt gelaten links en rechts van de afbeelding: HSPACE.
De waarde geeft in pixels weer hoeveel ruimte links en rechts vrij moet blijven.
Voorbeeld:
<IMG SRC="afbeelding.gif"
HSPACE="10"> |
Hetzelfde bereik je met VSPACE voor de ruimte boven en onder de afbeelding.
Voorbeeld:
<IMG SRC="afbeelding.gif"
VSPACE="10"> |
top
6. Grootte, kleur en lettertype
Als je al het voorgaande hebt toegepast op je tekst, zal je nog steeds teleurgesteld zijn over het resultaat. Immers, je tekst wordt in je browser weergegeven met een standaard lettertype en grootte. Hoog tijd om daar verandering in te brengen.
Alles begint met de <FONT>-tag. Alle stukken tekst waarvan het lettertype, de grootte of de kleur aangepast moet worden, plaats je tussen <FONT> en </FONT>. De juiste attributen vind je hieronder.
Lettertype:
In principe kan je elk lettertype gebruiken die op je computer staat. Als een
bezoeker van je website echter het gekozen lettertype niet heeft, wordt de tekst
in het standaard lettertype weergegeven. Daarom is het best om telkens 3 lettertypes
te definiëren. Wordt de eerste niet herkend, wordt de 2de gebruikt; indien die
niet gekend is wordt het derde lettertype gekozen (serif of sans-serif). Deze
2 laatste lettertypes worden altijd gevonden.
Voorbeeld:
<FONT FACE="Arial,
Helvetica, sans-serif">tekst</FONT> |
Lettergrootte:
Er zijn 2 mogelijkheden om de lettergrootte aan te geven: absoluut of relatief.
Bij absolute lettergrootte kan je kiezen tussen een waarde van 1 tot 7. 1 geeft de kleinste letters, 7 de grootste.
Voorbeeld:
<FONT SIZE="4">tekst</FONT> |
Relatieve lettergroottes zijn altijd in relatie tot een referentie: net onder
de <BODY>-tag schrijf je <BASEFONT SIZE="3">, waarbij de
waarde kan gekozen worden tussen 1 en 7. Deze grootte is dan de basis waaraan
de lettergrootte van de tekst gerelateerd is. Het SIZE-attribuut van <FONT>
heeft een waarde van -6 tot +6.
Voorbeeld:
<FONT SIZE="+4">tekst</FONT>
<FONT SIZE="-3">tekst</FONT> |
Kleur:
De kleur van een stuk tekst kan op de volgende manier bepaald worden:
<FONT COLOR="red">tekst</FONT>
<FONT COLOR="#FF0000>tekst</FONT> |
De kleur kan aangegeven worden met de naam van de kleur, of als zijn hexadecimale code.
top
7. Onderlijnen, vetgedrukt, cursief
Als je tekst helemaal naar je zin is wat betreft opmaak, kan je bepaalde delen nog vet, cursief of onderlijnd weergeven.
Voorbeelden:
<B>Deze tekst is vet gedrukt</B> |
Deze tekst is vet gedrukt |
<I>Deze tekst is cursief gedrukt</I> |
Deze tekst is cursief gedrukt |
<U>Deze tekst is onderlijnd</U> |
Deze tekst is onderlijnd |
top
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
