HTML Opmaak

HTML Stijlen (styles)

  • Er wordt gebruik gemaakt van Cascading Style Sheets (CSS), om de stijl van HTML-elementen te bepalen.

HTML vormgeven met CSS

  • Voor een betere vormgeving aan stijl elementen werd CSS geïntroduceerd samen met
    HTML 4.
  • CSS kan toegevoegd worden aan HTML op de volgende wijze:
    • in aparte style sheet bestanden (CSS bestanden)
    • via het <style> element in de head sectie van uw document
    • via het style attribuut van één enkel HTML element

Het HTML style attribuut

  • Het gebruik van het style attribuut in HTML elementen is tijdrovend en niet erg praktisch.
  • De beste manier om CSS toe te voegen aan een HTML document, is het gebruik van een apart CSS bestand.
  • In dit deel echter gaan we gebruik maken van het HTML style attribuut om de voorbeelden te vereenvoudigen.

    Zo wordt het ook makkelijker om snel de voorbeelden te bewerken en het zelf te proberen.

naar boven 

HTML stijl - achtergrond kleur

  • De background-color eigenschap bepaalt de achtergrondkleur van een element:
  • plaats volgende code in uw editor
<html>

<body
style="background-color : grey ;">
<h1
style="background-color : green ;">Dit is koptekst op groene achtergrond</h1>
<p
style="background-color : red ;">Dit is tekst op rode achtergrond</p>
</body>

</html>
  • Opslaan als... bvb. style_background-color.htm
  • Open deze in uw browser
  • Sluit de CSS eigenschap steeds af met een ; (punt-komma) !
  • Het vroegere -bgcolor- attribuut werkt enkel in het body element.
    De background-color eigenschap maakt van het "oude" -bgcolor- een verouderd attribuut !

naar boven 

HTML stijl - lettertype, kleur en grootte

  • Met font-family, color en font-size worden de eigenschappen van het lettertype, de kleur en de grootte bepaald.
  • plaats volgende code in uw editor
<html>

<body>
<h1
style="font-family : Arial ;">Dit is koptekst lettertype "Arial"</h1>
<p
style="font-family :Cooper ; color :Green ; font-size :20px ;">
Dit is een tekst in lettertype "Cooper", groene kleur en 20px hoog.</p>
</body>

</html>
  • Opslaan als... bvb. style_font-family.htm
  • Open deze in uw browser
  • Sluit elke CSS eigenschap steeds af met een ; (punt-komma) !
  • De font-family, de color en font-size eigenschappen maken de "oude" <font> tag achterhaald !

naar boven 

HTML stijl - tekstuitlijning

  • De text-align eigenschap geeft de horizontale uitlijning van tekst in een element.
  • plaats volgende code in uw editor
<html>

<body>
<h1
style="text-align :center ;">Deze koptekst staat in het center</h1>
<p
style="text-align :right ;">Deze tekst staat rechts op de pagina.</p>
</body>

</html>
  • Opslaan als... bvb. style_text-align.htm
  • Open deze in uw browser
  • Sluit elke CSS eigenschap steeds af met een ; (punt-komma) !
  • Vergeet de dubbelle aanhalingstekens niet!
naar boven naar boven naar style
naar boven naar het style element