Editie 176 - 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 19. We gaan nu verder met CSS. Vorige week waren we hier ook al mee bezig. Deze week gaan we er gewoon mee verder.
Spatiëring regelen
Wat is nu weer Spatiëring? Dat dacht ik ook toen ik het eerst zag. Het is de ruimte tussen woorden en/of letters vergroten en/of verkleinen. Voor de ruimte tussen woorden gebruik je WORD-SPACING, voor letters gebruik je LETTER-SPACING. Hieronder een voorbeeld:
CSS:
h1 {
color: blue;
font-style: bold;
}
h2 {
color: blue;
font-style: bold;
letter-spacing: 6px;
}
HTML:
<h1>Deze tekst staat normaal</h1> <h2>Deze tekst staat verder uit elkaar</h2>
Bovenstaand geeft dus het volgende resultaat:
Inspringingen toevoegen
Inspringingen in je tekst zijn ook erg gemakkelijk toe te voegen met CSS. Hiervoor gebruik je de CSS regel TEXT-INDENT. Zie hieronder het voorbeeld:
CSS:
h1 {
color: blue;
font-style: bold;
}
p {
text-indent: 30px;
}
HTML:
<h1>Hier is je titel</h1> <p>Hier heb je de pagina.</p>
Onderstaand resultaat krijg je dan:
Tekst uitlijnen
Ook het uitlijnen van je tekst kan erg gemakkelijk met CSS gedaan worden. Dit doe je met TEXT-ALIGN. Zie hieronder:
CSS:
h1 {
color: blue;
font-style: bold;
}
p {
text-align: right;
}
h2 {
text-align: left;
}
HTML:
<h1>Hier is je titel</h1> <p>Hier heb je de pagina rechts.</p> <h2>En hier links.</h2>
Onderstaand resultaat krijg je dan:
Hij is wel wat verkleind, zodat hij wat beter op de pagina past.
Dan zijn we nu klaar met les nummer 19. Volgende week houden we ons ongeveer met hetzelfde bezig. Elke week breiden we de kennis weer iets uit.
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.