login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > HTML


Gegevens:
Geschreven door:
maestro
Moeilijkheidsgraad:
Gemakkelijk
Hits:
32746
Punten:
Aantal punten:
 (3)
Aantal stemmen:
16
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (2)
 



Tutorial:

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:

<H2>Hoofding 2</H2>

Hoofding 2


Voorbeeld:

<H4>Hoofding 4</H4>

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.




« Vorige tutorial : Inleiding Volgende tutorial : Tabellen »

© 2002-2023 Sitemasters.be - Regels - Laadtijd: 0.012s