Kopteksten toevoegen
Kopteksten worden veelal gebruikt om bepaalde teksten beter te benadrukken, bij voorbeeld als kop van een artikel in een blogbericht of als inleiding van een pagina of de titel van een hoofdstuk bij het opmaken van een inhoudsopgave
Door in de brontekst (ook broncode of bron genoemd) gebruik te maken van de openingscode <h1> en de sluitcode </h1> waartussen we tekst plaatsen, wordt deze tekst in de browser als een koptekst weergegeven
In HTML bestaan er 6 niveaus voor kopteksten
Al naar gelang het niveau dat in de begintag (ook openingstag genoemd) na h wordt toegevoegd, variërend tussen 1 en 6, wordt de koptekst groot, kleiner of klein weergegeven
De eindtag (ook sluitcode genoemd) heeft steeds dezelfde naam en het niveau als de begintag, maar wordt voorafgegaan van een slash.
Na een koptekst volgt altijd een witregel en begint de volgende tekst met een nieuwe regel
| Weergave van de kopteksten van groot naar klein, al naar gelang het niveau dat in de code aangebracht wordt. |
In de bron ziet de code er zo uit:
Bij de tag <h1>...</h1> wordt de grootste koptekst weergegeven.
Bij de tag <h6>...</h6> de kleinste koptekst |
Koptekst 1
|
<h1>Koptekst 1</h1> |
Koptekst 2
|
<h2>Koptekst 2</h2> |
Koptekst niveau 3
|
<h3>Koptekst niveau 3</h3> |
Koptekst niveau 4
|
<h4>Koptekst niveau 4</h4> |
Koptekst niveau 5
|
<h5>Koptekst niveau 5</h5> |
Koptekst niveau 6 is de kleinste
|
<h6>Koptekst niveau 6 is de kleinste</h6> |
Kopteksten centreren, rechts of links uitlijnen
met behulp van de attribuut:
align="center" align="left" of align="right"
Door in de openingstag <h1> of in de begintag van één van de andere niveaus, het attribuut align="center" toe te voegen, wordt een koptekst gecentreerd weergegeven. De sluittag laten we hierbij ongewijzigd
Dit is een gecentreerde kop van niveau 4
In de broncode ziet dit er zo uit.
<h4 align="center">Dit is een gecentreerde kop van niveau 4</h4>
-------------------------------
Wanneer in de openingstag het attribuut align="left" toegevoegd wordt, wordt de koptekst tegen de linkermarge geplaatst
Deze koptekst van niveau 4 is links uitgelijnd
<h4 align="left">Deze koptekst van niveau 4 is links uitgelijnd</h4>
Standaard staat, zonder toevoeging van het attribuut align="..." de tekst steeds tegen de linkermarge, zodat het attribuut align="left" eigenlijk gewoon kan worden weggelaten.
-------------------------------
Wordt in de begintag het attribuut align="right" opgenomen,
dan komt de tekst tegen de rechtermarge te staan.
Hier is de koptekst niveau 4 rechts uitgelijnd
<h4 align="right">Hier is de koptekst niveau 4 rechts uitgelijnd</h4>
Een andere en betere werkwijze om kopteksten uit te lijnen is gebruik maken van een inline stijl. Dit wordt meestal in blogberichten gedaan.
Inline stijlen nemen steeds voorrang op ingesloten stijlen. Een voorbeeld van ingesloten stijlen is bij de blogs van seniorennet en bloggen.be, via Instellingen > "Uitzicht (design) wijzigen blog" te vinden in de bron van de blog
Kopteksten centreren, rechts of links uitlijnen
door toepassing van een inline stijl
Bij gebruik van een inline stijl, wordt in de begintag <h1> of in één van de begintags van een ander niveau het attribuut style opgenomen
In de style tag style="..." wordt dan tussen de aanhalingstekens, op de plaats waar de puntjes staan, het element text-align: center aangebracht.
Voorbeeld:
Deze koptekst niveau 4 staat gecentreerd
<h4 style="text-align: center;">Deze koptekst niveau 4 staat gecentreerd</h4>
---------------------------------
Een koptekst rechts uitlijnen kan door in de begintag <h4> de stijltag style="..." toe te voegen,
waarin het element text-align: right; is opgenomen
Deze koptekst wordt rechts uitgelijnd
<h4 style="text-align: right;">Deze koptekst wordt rechts uitgelijnd</h4>
--------------------------------
Standaard, zonder opgave van enige uitlijning, staat een koptekst steeds tegen de linkermarge, maar het kan ook zo.
Deze koptekst wordt links uitgelijnd
<h4 style="text-align: left;">Deze koptekst wordt links uitgelijnd</h4>
Kopteksten een ander kleur geven
door toepassing van een inline stijl
Met behulp van de inline stijl style="..." welke we opnemen in de begintag <h1> kan ook een andere kleur aan de koptekst worden gegeven.
Op de plaats waar de puntjes tussen de aanhalingstekens in de stijl tag style="..." staan, wordt het style element color aangebracht, gevolgd door een dubbel punt(:) en een spatie. Na de spatie wordt dan de waarde opgegeven, hier is dat het nummer teken # gevolgd door de kleurcode (hexadecimale waarden: cijfers en letters) van de gewenste kleur en een punt komma om het style element af te sluiten.
Deze koptekst wordt blauw weergegeven
De code in de bron ziet er zo uit:
Zoals te zien is, wordt het style element color: van de waarde #0000FF gescheiden door een spatie.
<h4 style="color: #0000FF;">Deze koptekt wordt blauw weergegeven</h4>
----------------------------
In plaats van in de style tag (stijltag), tussen de aanhalingstekens het style element color: #hier_de_kleurcode; aan te brengen, kan na color: gevolgd door een spatie ook de engelse benaming van de kleur worden opgegeven en afgesloten door een punt komma.
Zie voorbeeld van een stijltag:
style="color: hier_engelse_benaming_kleur;"
Deze koptekst is rood
<h4 style="color: red;">Deze koptekst is rood</h4>
Kopteksten een ander kleur geven en
tegelijk centreren of links of rechts uitlijnen
door toepassing van een inline stijl
Een inline style kan verschillende stijlelementen bevatten
Stel dat we een koptekst een bepaalde kleur willen geven en deze tegelijk willen centreren of links of rechts uitlijnen
Wanneer we in de begincode, bij voorbeeld <h4> van een koptekst van niveau 4, het attribuut style="..." opnemen, dan kunnen we in de stijltag, tussen de aanhalingstekens, op de plaats waar de puntjes staan, meerdere stijlelementen aanbrengen, zoals o.a. het stijlelement color: #kleurcode; voor het bepalen van de gewenste kleur en het stijlelement text-align: center; om de kop te centreren of het stijlelement text-align: right; om de kop rechts uit te lijnen
Ieder stijlelement wordt van elkaar gescheiden door een punt komma (;) en een spatie
Dit is een gecentreerde groene tekst
In de bron ziet de code voor het weergeven van een groene gecentreerde koptekst van niveau 4 er zo uit
<h4 style="color: #008000; text-align: center;">Dit is een gecentreerde groene tekst</h4>
Deze koptekst wordt rechts uitgelijnd,
kleur chocolate
<h4 style="color: fuchsia; text-align: right;">Deze koptekst wordt rechts uitgelijnd,
<br />kleur chocolate</h4>
Deze koptekst wordt links uitgelijnd, kleur purple
<h4 style="color: purple; text-align: left;">Deze koptekst wordt links uitgelijnd, kleur fuchsia</h4>
Categorie:Kopteksten
|
