We gaan onze eerste index.html pagina vorm geven. Maar hiervoor index.html helemaal leeg.
Daarna type je een ! direct gevolgd door een <tab> (toets links op je toetsen board) De volgende code zal voor je worden aangemaakt.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Geef je pagina een goede titel. (pas <title>Document</title> aan)
Als je je pagina bekijkt door op RUN te klikken (groene knop bovenaan). Dan zal je een lege pagina te zien krijgen.
Nu gaan we onze pagina wat inhoud geven.
We starten met een header. Hier hebben we zes keuzes h1, h2, h3, h4, h5 en h6. h1 is het grootst en h6 het kleinste. Let op de header is de enige tag met getallen er achter. Geen enkele andere tag heeft dat.
We gaan een header op onze pagina plaatsen. Let op binnen de body
-tag
... </head> <body> <h1>Mijn eerste website</h1> </body> </html>
Als je je pagina uitvoert krijg je de header "Mijn eerste website" groot in beeld. We gaan onze h1 wat opmaak geven. Dit doen we in CSS, er zijn drie manieren om dit te doen. Inline, style in pagina en extern CSS bestand.
Let op dat bij jou eindproject alleen CSS code in een extern CSS bestand wordt geaccepteerd. Dus de eerste twee opties vervallen. Toch is het handig om deze misschien wel even gezien te hebben, zodat als je het tegen komt en een voorbeeldje ziet het wel begrijpt.