HTML>Tekstopmaak en <font>

Deze hele les gaat over tekst. Hoe moet je nou in de HTML tekst opmaken? Heel de les gaat dus over tekst opmaken. Dit neemt niet weg dat css(Cascading Style Sheets) in vele opzichten beter is dan htmlcodes voor tekst. Met CSS is het mogelijk mooie links te maken, voor hele pagina's dezelfde letters door één code, de scrollbalk een kleur geven en meer. Voor die lessen verwijs ik je door naar css, maar het is aan de ene kant aan te raden om deze les te volgen. Want om css te leren, heb je een htmlbasis nodig!

The Webmaster

ps. Kijk, voordat u de les doet, onderaan de pagina!


Headings;

Waarschijnlijk weet je al dat bij HTML de tekst in het element <body> komt. Laten we beginnen met een tag waar veel pagina's me beginnen. Namelijk de headings. De headings zijn de koppen van de pagina. Ik geef ff een voorbeeld:

Heading 1

Dit is de grootste. Het is heading 1! Er zijn in totaal 6 verschillende maten, namelijk;
-<h1>
-<h2> 
-<h3>
-<h4>
-<h5>
-<h6>

Eigenlijk heel simpel H=heading en het cijfer erbij geeft de grootte aan!!

Paragraven;

Veel problemen in de HTML onstaan door tekst. Je kan door middel van de <p> tag een mooie structuur aanbrengen in je pagina's! Goed om leren gaan met deze tag, zorgt voor een mooie structuur in je pagina's.
Een voorbeeld:

<p>Hier komt de tekst die je zelf wilt gebruiken
<p>Hier komt de tweede paragraaf

Er zijn twee belangrijke dingen te zien in dit voorbeeld:
-Er is geen eindtag nodig.
-Om een nieuwe paragraaf te beginnen gewoon een nieuwe <p>

Er zijn verschillende attributen die erg handig kunnen zijn bij de paragraaftag.
<P align="left">Deze paragraaf komt links van je pagina.
<P align="right">Deze rechts.
<P align="center">Deze paragraaf wordt in het midden gezet


Elementen;
Nu je paragraven kent en je dus in staat bent in je tekst structuur aan te brengen(wel zo handig), hebben we nog enkele elementen om extra structuur aan te brengen.
Ik heb ze voor je op een rijtje gezet:
Tag Wat doet het? Hoe gebruik je het? Voorbeeld Aanvullende attributen etc..
<center> Het zet je tekst in het midden. <center>de tekst die je in het midden wilt</center>

tekst

 
<br> Geef een regel wit. Hetzelfde effect als je in word bijvoorbeeld op enter drukt. <br> Deze tag zorgt dan voor een spatie tekst

tekst
 
<hr> Horizontal Rule. Geeft een horizontale lijn. <hr> Daar komt dan de lijn.
Centreren etc is mogelijk
.

 

Size en width.
Size is de hoogte van de lijn. width de breedte in procenten. bijv <hr size="4" width="10%">
Verder kan je met align aangeven waar de lijn moet komen.

Italic, bold, underline, typewriter en strike;

<i>. Met de <i> tag krijg je schuingedrukte tekst. Dat ziet er zo uit!
<b>. Met de <b> tag krijg je vetgedrukte tekst. Dat ziet er zo uit!
<u>. Met de <u> tag krijg je onderstreepte tekst. Dat ziet er zo uit!
<tt> Met de <tt> tag krijg je een typewritertekst. Dat ziet er zo uit!
<strike> Met de <strike> tag krijg je doorgestreepte tekst. Dat ziet er zo uit!

Al deze tags dienen afgesloten te worden met een eindtag. Dus <B>tekst</B>

<font>;
Dan is het nu tijd voor de hoofdtag. Met deze tag kan je aangeven dat iets veranderd gaat worden. Je begint met <font> en sluit af met </font>.

Met font kan je;
-Lettergroottes bepalen
-Kleur aan tekst toevoegen
-Lettertype aanpassen

lettergroottes;
De tag font heeft een attribuut, namelijk size. Een voorbeeld:

In de html;

<font size=7>Op deze manier krijg je lettergrootte 7</font>

resultaat;
Op deze manier krijg je lettergrootte 7

Je kan grootte van 1 t/m 7. Als je het vergelijkt met word/kladblok/wordpad staat 1 ongeveer gelijk aan 8pt. 7 staat weer gelijk aan 36 punten. 3 is de standaardmaat en is in vergelijking met word/kladblok/wordpad 12 punten.

letterkleur;
Met de tag font kan je ook kleur aan de letters geven. Zoals je weet geef je kleuren aan met kleurcodes(zie les 3). We gebruiken naast de tag <font> het attibuur color. Ik geef een voorbeeld;

In de html;

<font color="#0000FF"> Zo krijgen we een blauwe kleur.</font>

resultaat;

Zo krijgen we een blauwe kleur.  

Je kan inplaats van #0000ff ook blue invullen, maar dat is allemaal al uitgelegd in les 3.

lettertype;
Het is ook mogelijk om lettertypes in te stellen. Die lettertypes zoals arial en times new roman kunt u instellen als het lettertype van uw webpgina's. Natuurlijk moeten die lettertypes wel geinstalleerd staan op de computer van de bezoeker.
Je kan kiezen voor bijvoorbeeld alleen arial, maar je kan ook kiezen voor een mix. Bijvoorbeeld; arial, helvetica,sans-serif. Dat zijn de lettertypes die ik gebruik voor het webhulpje.
Naast de tag <font>, het attribuut face. Een voorbeeld

<font face="arial, helvetica,sans-serif"> Het lettertype wordt zo arial, zodra die niet ondersteund is krijg je helvetica en als laatste sans-serif.</font>

Resultaat; 

Het lettertype wordt zo arial, zodra die niet ondersteund is krijg je helvetica en als laatste sans-serif.


Door elkaar;
Je kan ze ook alledrie bij mekaar nemen. Bijvoorbeeld; Een tekst met als grootte 3, als lettertype verdana en als kleur rood.
Het voorbeeld;

<font size="3" face="Verdana" color="#FF0000">Een tekst met als grootte 3, als lettertype

verdana en als kleur rood.</font>

resultaat;

Een tekst met als grootte 3, als lettertype verdana en als kleur rood.

Kunnen??

1)Je kan nu gemakkelijk tekst ordenen. Dat kan met horizontale lijnen, gecentreerde tekst en veel meer. Als oefening kan je proberen om;
-Een htmlbestand te maken met daarin een lap tekst die je gaat ordenen.

2)Verder kan je nu ook met de tag <font> werken;
-In het bestand wat je bij 1) hebt gemaakt, kan je nu kleur toevoegen, lettertype en grootte.

Kennen??
-
Alle schuingedrukte tags

The Webmaster

Vorige les//--Terug naar 't webhulpje--\\Volgende les

Voor vragen kan je terecht in het forum!!


Copyright © 't webhulpje, Nederland
Alle rechten voorbehouden. Niets van deze elektronische uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen, of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever en/of de beheerder van deze website.