Uitleg HTML Kit Les 2

In de vorige uitleg heb ik de basis verteld van HTML. Als het goed is, weet je nu de basis elementen van een webpagina, hoe je teksten in paragrafen kunt indelen, hyperlinks kunt maken, en hoe je speciale tags kunt toevoegen zoals < h1 > en < br >.

Heb je de vorige uitleg niet gelezen dan kun je hier alsnog naar de pagina gaan.

Elementen voor tekstkenmerken

In deze les leg ik uit wat de verschillende tekstkenmerken zijn. Hoe kun je naast de verschillende koppen, ook andere lettertypes gebruiken. Ook laat ik de verschillen zien tussen bijvoorbeeld vet, onderstreept, doorgestreept en schuin zoals je kunt zien in onderstaande tabel.

image

Verschillende Letterfamilies

Letters zijn er in veel verschillende soorten en maten. Het is niet te weten welke lettertypes mensen op hun eigen computer gebruiken vandaar dat we de letterfamilies aangeven als alternatief.

Letter groottes kunnen aangegeven worden met een getal tussen 1 en 7. Het getal 1 is het kleinste formaat en getal 7 is het grootste formaat. Standaard is de lettergrootte ingesteld op "3".




Diverse Fonts apart gebruiken.

Er zijn drie verschillende fonts die je kunt gebruiken:

Voor het gemak kun je onderstaande codes kopieren en in HTML Kit plakken.

Door de dikgedrukte elementen aan te passen kun je de verschillende stijlen en formaten aanpassen.

1. Wil je alleen de lettergrootte aanpassen, gebruik je < Font size >:
< FONT size = "4" > Zo krijg je lettergrootte 4 < / FONT >
2. Wil je alleen de lettertypes of letterfamilie aanpassen, gebruik je < Font face >:
< FONT face = "Arial, helvetica, sans-serif" >Zo verander je het lettertype < / FONT >
3. Indien je alleen de kleur wilt aanpassen, gebruik je < Font color >:
< FONT color="#0000ff">Zo stel je de kleur van dit tekstdeel in op blauw.< / FONT >


Diverse Fonts combineren

Hieronder zie je een voorbeeld van drie font tags gecombineerd:


< FONT size ="4" face="Arial, helvetica, sans-serif" color ="#000000" >Test < / FONT >


Ik gebruik dus lettertype Arial als eerste keus, indien deze niet beschikbaar is, wordt het Helvetica en mocht die ook niet beschikbaar zijn, word alles geschreven in Sans-Serif.

De grootte heb ik ingesteld op lettergrootte 4 en de kleur is #000000, oftewel zwart.

Indien geen van de bovengenoemde lettertypes geinstalleerd is bij de gebruiker, zal de instelling terug gaan naar de Windows standaard, lettertype Times New Roman.




Voorbeelden in HTML Kit

In deze les heb ik uitgelegd hoe je verschillende fonts kan gebruiken in je webppagina en html code. Om te zien wat er gebeurd wanneer je de diverse stijlen gebruik, is het handig om het uit te proberen in HTML Kit.

Open HTML Kit en druk op create new file.

Neem onderstaande HTML code over en plak dit in HTML Kit en kijk wat er gebeurd.

< html >
< head >
< title >Voorbeeld< / title >
< / head>
< body >
< p >In de vorige les heb ik uitgelegd hoe je paragrafen maakt en andere html elementen kunt gebruiken.< / p >
< p >In onderstaand voorbeeld zie je hoe je de verschillende fonts kunt toepassen en hoe dit eruit zal zien in je browser< / p >
< p >< FONT size="7">Zo krijg je lettergrootte 7< / FONT> < br >
< FONT face="times new roman">Zo verander je het lettertype< / FONT>< br >
< FONT color="#0000ff" >Zo stel je de kleur van dit tekstdeel in op blauw.< / FONT>
< br >
< FONT size ="4" face="Arial, helvetica, sans-serif" color ="#000000">met deze code, kun je de verschillende stijlen combineren en heb je lettertype 4 in de kleur zwart< / FONT >< / p >
< / body>
< / html>

Wanneer je de code geplakt hebt, klik je op preview en dan zie je de verschillen tussen de stijlen.

image

Nu weet je hoe de diverse font stijlen toegepast kunnen worden in je teksten.

Om de juiste keuze te maken voor je eigen website, kun je het beste een van de html codes kopieren, en experimenteren met verschillende lettertypes, groottes en kleuren.

  • Home