Editie 177 - HTML-cursus
Deze rubriek is geschreven door Kloep!
Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek gaan wij (VWO-er en Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar wat Javascript. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.
In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.
Welkom bij les nummer 20. We gaan nu verder met CSS. Vorige week waren we hier ook al mee bezig. Deze week gaan we er gewoon mee verder.
Hoofdletters en Kleinkapitaal
Het is in CSS erg gemakkelijk om wat met de hoofdletters te spelen. Zo kun je met TEXT-TRANSFORM bepalen of alle letters hoofdletters, of juist kleine letters moeten worden. Hier kun je drie verschillende waardes aangeven. CAPITALIZE, UPPERCASE en LOWERCASE. Zie hieronder wat welk resultaat geeft:
CSS:
h1 {
text-transform: capitalize;
}
h2 {
text-transform: uppercase;
}
h3 {
text-transform: lowercase;
}
HTML:
<h1>hier je tekst met capitalize!</h1><br /> <h2>hier je tekst met uppercase!</h2><br /> <h3>hier je tekst met lowercase!</h3>
Dit geeft onderstaand resultaat:
Bij CAPITALIZE zie je dat elk woord met een hoofdletter begint. De overige twee spreken voor zich, de ene heeft altijd hoofdletters en de ander nooit.
Tekst decoreren
Ook kun je je tekst simpel decoreren door middel van lijntjes. Je kunt er één onder zetten (UNDERLINE), doorheen (LINE-THROUGH) en boven (OVERLINE). Dit allemaal gaat met TEXT-DECORATION. Zie hieronder de codes en het voorbeeld:
CSS:
h1 {
text-decoration: underline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: overline;
}
HTML:
<h1>Hier je onderstreepte tekst!</h1><br /> <h2>Hier je doorgestreepte tekst!</h2><br /> <h3>Hier je tekst met een bovenstreep!</h3>
Hieronder zie je het voorbeeld:
Dan zijn we nu klaar met les nummer 20. Volgende week houden we ons ongeveer met lijsten bezig. Natuurlijk geheel met behulp van CSS, en niet enkel HTML (wat we al hebben gedaan).
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.