Layout aanpassen

Leerdoel:

Na deze uitleg kun je een aantal stijlelementen toepassen op (gedeeltes van) je website.

Stijlelementen

Tot nu toe is je website opgebouwd uit standaard stijlelementen van HTML. Zo is de achtergrond van de website wit, is de kleur van de letters zwart en is het lettertype het standaard lettertype van de browser. Met HTML kun je heel veel stijlelementen naar eigen keuze aanpassen. In deze les beperken we ons tot de volgende stijlelementen:

Achtergrondkleur : background-color
Kleur van de letters : color
Lettertype : font-family
Plaats van de tekst : text-align

Een stijlelement pas je toe door in een openingselement, later zien we bij welke elementen dit kan, de gewenste stijlelementen op te nemen. We nemen nu als voorbeeld een paragraaf:

stijlelementen 1

Op de website ziet het er dan zo uit:

stijlelementen 2

Voor background-color (achtergrondkleur) en color (kleur letters) kun je een groot aantal kleuren kiezen. Op https://nl.wikipedia.org/wiki/Lijst_van_HTML-kleuren (of googelen op ‘lijst van HTML kleuren’) kun je de (Engelse) namen vinden van de kleuren.

Voor lettertype kun je kiezen uit de volgende lettertypes:

Times new Roman (font-family:’times new roman’)
Georgia (font-family: georgia)
Arial (font-family: arial)
Verdana (font-family: verdana)
Courier New (font-family: ‘courier new’)
Lucida Console (font-family: ‘lucida console’)

Let dus op dat je bij lettertypes die bestaan uit meerdere woorden ‘enkele aanhalingstekens’ gebruikt.

Voor text-align kun je kiezen uit de volgende opties:

Left : de tekst wordt dan links uitgelijnd;
Right : de tekst wordt dan rechts uitgelijnd;
Center : de tekst wordt dan gecentreerd.

Stijlelementen kun je toepassen op de gehele website of op delen van de website:

<body> : gehele website
<h…> : betreffende kop
<p> : betreffende paragraaf

Maar soms wil je ook stijlelementen toepassen op een gedeelte van een paragraaf of een gedeelte van een kop. Daarvoor kun je het <span> element gebruiken, zoals in onderstaand voorbeeld:

stijlelementen 3

Op de website ziet het er dan zo uit:

stijlelementen 4

Je kunt ook stijlelementen toepassen op meerdere onderdelen tegelijk, bijvoorbeeld op een kop en de bijbehorende paragraaf. Daarvoor gebruik je het <div> element, zoals in onderstaand voorbeeld:

stijlelementen 5

Op de website ziet het er dan zo uit:

stijlelementen 6

Opdracht 12:

Log in met je eigen gegevens op repl.it en open je project (in team IT College - Noordik).
Als de file index.html nog niet geopend is, kun je deze openen door de file aan de rechterkant aan te klikken.
Kies een gedeelte van je website waar je een stijlelement wilt toevoegen (achtergrondkleur, kleur letters, lettertype en/of plaats van de tekst).
Voeg het gewenste stijlelement toe.
Herhaal dit tot je voor 3 verschillende onderdelen van je website tenminste 2 stijlelementen hebt toegepast.
Sla de file op.
Bekijk het resultaat via een webbrowser.