Opdracht

We gaan nu een kopietje maken van de webpagina die je bij Hoofdstuk 1 t/m 5 hebt gemaakt. Op die manier blijft de versie van het eind van H5 behouden (die heb je bij je docent ingeleverd als het goed is) en kunnen we verder werken met een kopie die je dan met css verder gaat aanpassen. In Replit gaat dat heel makkelijk door een "fork" (afsplitsing) van je project te maken.

Klik linksboven het menu open en klik op "My repls":

Je gaat nu naar een overzicht van al je Replit projecten. Zoek je "HTML opdrachten deel 1" project op in de lijst en klik op de 3 puntjes rechts ervan. Klik daar op "fork":

De editor opent nu weer met je project erin, maar je werkt nu verder onder een andere naam. Je originele project blijft behouden.

Klik nu bovenaan het scherm op de naam van je project en pas de naam aan in "HTML opdrachten deel 2":

Stap 1

Klik op "style.css" in de bestandenlijst aan de linkerkant en voeg deze code toe:

body { 
  background-color: red; 
}

Test je pagina. Als het goed is, is de achtergrondkleur van je webpagina nu rood.

Stap 2

We breiden het wat uit. Vervang je css code door de onderstaande:

body {
  background-color: chocolate
}

h1, h2 {
  color: darkslategrey
}

p {
  text-align: center;
}

Je ziet hier meteen een nieuwe truuk. De regel die begint met h1, h2 { voegt dezelfde css regels aan zowel de h1 als de h2 tags toe. Dat is handig en voorkomt dat je dingen dubbel hoeft te doen.