Cursus HTML - deel 2: tekst en zijn opmaak

Trefwoorden: HTML, cursus, websites

1. inleiding


In dit artikel wordt beknopt besproken hoe je tekst op de website plaats. Nu kan het website bouwen echt beginnen.
Niet alles zal hier uitgebreid aangeduid worden, maar het is een goed begin.;)

Vergeet niet van de tags juist af te sluiten (zie vorig artikel).

2. tekst invoegen en enkele makkelijke tags


2.1. De eerste tekst
Tekst invoegen in een HTML-document gaat eigenlijk zeer makkelijk. Typ hem gewoon tussen de body-tags.
CODE - de eerste tekst
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title>Welkom op mijn website!!!</title>
  6. </head>
  7.  
  8. <body>
  9. Dit is tekst op mijn website en deze zal verschijnen in mijn browser.
  10. </body>
  11.  
  12. </html>
  13.  

Als je de pagina nu bekijkt in de browser zie je nog niet veel spectaculairs. Je ziet de tekst in het zwart met een standaard lettertype.
Daar zal straks verandering in komen.

2.2. Enkele makkelijke tags

Enkele makkelijke tags, maar die veel gebruikt worden zijn de volgende.
CODE - makkelijke tags
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title>Welkom op mijn website!!!</title>
  6. </head>
  7.  
  8. <body>
  9. <b>Dit is vette tekst</b>
  10. <i>Dit is cursieve tekst</i>
  11. <u>deze tekst wordt onderlijnd</u>
  12. </body>
  13.  
  14. </html>
  15.  

De letters ken je vast en zeker bekend voor, namelijk in "MS word" worden deze ook gebruikt.
Nog enkele te onthouden tags zijn deze
CODE
  1.  
  2. <br />
  3. <hr />
  4.  

<br /> verspringt een regel lager
<hr /> plaats een lijn in de browser.

Deze tags zijn handig om verschillen tussen 2 alinea's aan te duiden.

3. positionering en verdere opmaak van de tekst


3.1. postitionering

Wil je de tekst in de browser positioneren. Bijvoorbeeld de titel in het midden plaatsen? Dan gebruik je de paragraph-tag met wat extra uitleg.
CODE - makkelijke tags
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title>Welkom op mijn website!!!</title>
  6. </head>
  7.  
  8. <body>
  9. <p>Deze tekst wordt standaard uitgelijnd</p>
  10. <p align="center">deze tekst wordt in het midden uitgelijnd.</p>
  11. </body>
  12.  
  13. </html>
  14.  

Bij de tweede p-tag is align="center" toegevoegd. De tekst wordt nu in het midden gecentreerd. Op dezelfde manier kan je ook links uitlijnen met align="left" en rechts met align="right".

3.2. verdere opmaak

Willen we verdere opmaak aan de tekst toevoegen zoals kleur, grootte en lettertype, dan kunnen we de font-tag gebruiken.
CODE - makkelijke tags
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title>Welkom op mijn website!!!</title>
  6. </head>
  7.  
  8. <body>
  9. <font size="10">deze tekst is 10 punten groot</font>
  10. <font color="red">deze tekst staat in het rood</font>
  11. <font color="#FF0000">deze tekst staat ook in het rood</font>
  12. <font face="Arial">deze tekst staat in het lettertype arial</font>
  13.  
  14. <font size ="10" color="#FF0000" face="Arial">deze tekst staat in het lettertype arial</font>
  15. </body>
  16.  
  17. </html>
  18.  

Hier zie je hoe je de code kan opmaken. Je kan de verschillende tags ook gaan combineren om een rode tekst van 10 punten groot in het lettertype arial te krijgen. Zoals je kan zien in de laatste font-tag.

4. Opmerkingen


Het is best een gewoonte te maken van de p-tag te gebruiken voor lange stukken tekst. Deze duidt namelijk vanzelf in de browser het verschil tussen de alinea's aan omdat hij automatisch een witregel plaatst.
Stel: Je wil de tekst over de hele website een andere kleur geven. Dan wordt dit zeer moeilijk aangezien je alle font-tags moet gaan veranderen.
Daarom bestaat de taal CSS, het is best deze te leren nadat je deze cursus HTML uit hebt. Hiermee kan aan alle tags een opmaak gegeven worden, en dit verhoogt aanzienlijk de productiviteit omdat je veel werk uitspaart.

5. geziene tags in dit artikel


<b>: plaats vette tekst
<u>: plaats onderstreepte tekst
<i>: plaatst cursieve tekst
<br />: plaatst een witregel (deze tag hoeft niet afgesloten te worden)
<hr />: plaatst een horizontale lijn (deze tag hoeft niet afgesloten te worden)
<p>: paragraaf tekst
<font>: tekst die opmaak gegeven wordt met volgende items:
-size: grootte van de tekst
-color: kleur van de tekst
-face: lettertype.

6. slot


Zo, dit was het artikel over de tekst en zijn opmaak.
In het volgend deel van de Cursus HTML op Multidesk.be gaan we in op verdere opmaak van de website (de achtergrond, ...)
En we leren hyperlinks maken. De sleutel van een website om de verschillende pagina's te kunnen bezoeken.

Klik hier om deel 3 titels, kleur en achtergrondopmaak te lezen.Dit artikel werd geschreven door Simon op maandag 27 november 2006 om 21:31 en werd sindsdien 6746 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door Suriv op maandag 27 november 2006 om 22:04:15.
Suriv's avatar
Multiviteit: 7607
Moderator
Mag ik het eerwaarde publiek erop wijzen dat de font-tag al verouderd is? Je gebruikt hiervoor tegenwoordig de span-tag, met style font-family:xxx.
Bericht geplaatst door k_a_lf op maandag 27 november 2006 om 22:17:11.
k_a_lf's avatar
Multiviteit: 2650
INFØMAN
k_a_lf says BWAAAAAP!
nog wel een detail: twee of meer opeenvolgende <p>tags zal wel geïnterpreteerd worden worden als een enkele <p> het moet dan worden vervangen door <p>&amp;amp;nbsp;
dus <p><p><p> wordt:
<p>&amp;amp;nbsp;
<p>&amp;amp;nbsp;
<p>&amp;amp;nbsp;
Er zijn heel wat mensen, die veel weten en weinig begrijpen.
Bericht geplaatst door Simon op dinsdag 28 november 2006 om 18:43:11.
Simon's avatar
Multiviteit: 3742
Een p-tag kan niet alleen voorkomen.
Moet altijd afgesloten zijn hé.

font-tag in inderdaad verouderd, maar ik vermeld het even omdat CSS komt als de basis van HTML gekend is, dan kan inderdaad de span-tag gebruikt worden.
  • Pagina
  • 1 van 1