Standaard maakt repl.it 3 bestanden voor je aan. Hieronder bespreken we ze kort.
Bijna elke website begint met een index.html. Dit is de startpagina van een website. De extensie .html geeft aan dat de gebruikte code HTML is. De HTML pagina is uit een aantal delen opgebouwd. De eerste regel is de doctype.
<!doctype html>
Je hebt verschillende doctypes voor HTML. Dit is de meest recente doctype regel en zal de meest recente HTML tags ondersteunen.
Daarna volgt
<html> ... </html>
<html> is een openingstag. Hier start de html code. Onder aan je pagina staat </html>. Dit is de sluitingstag. Hier wordt je html pagina mee afgesloten. Vaak wordt aan de html-tag een taal attribuut meegegeven (een attribute is een een stukje extra informatie van html tag). Een voorbeeld van het gebruik van Engelse tekst op de pagina zou er zo uitzien
<html lang="en">
Binnen de html tag zien we twee verschillende tags (head
en body
). Deze moeten dan ook altijd aanwezig zijn.
<html lang="nl"> <head> ... </head> <body> ... </body> </html>
Alles wat binnen de <head> tag staat komt niet op de pagina. Maar vertelt iets over de pagina. Bijvoorbeeld de titel
<title>mijn homepage titel</title>
Deze titel zie je niet op je pagina, maar zie je boven in je browser balk.
Naast title worden vaan meta tags meegegeven, links gemaakt naar CSS bestanden en Javascript bestanden ingeladen. (al deze zaken zie je niet op je website!)
Alles wat in de <body> tag staat komt op je webpagina te staan. Dus deze gaan we straks vullen met HTML. Het is heel gebruikelijk dat dit heel veel regels code is. De head daarintegen is vaak kort en krachtig.
Omdat bijna elke pagina opmaak heeft wordt bijna altijd een CSS bestand ingeladen. Dit gebeurt dus in de head. Daarvoor wordt de volgende tag gebruikt.
<head> ... <link href="style.css" rel="stylesheet" type="text/css" /> </head>
Dit is een verwijzing naar het CSS bestand.
In style.css komt opmaak code te staan. Aan de extensie .css kan je zien dat de inhoud van dit bestand CSS code is. De opmaak van CSS code is heel strikt. Let op dubbele punten, punt komma's en haakjes. Als er een klein dingetje fout is, werkt je hele bestand vaak niet meer. En wordt er geen opmaak meer gebruikt.
Een voorbeeld van een CSS bestand om mee te starten zou het volgende kunnen zijn
html, body { margin: 0; height: 100%; width: 100%; }
Hierin wordt verteld dat de html en body tag van je webpagina geen rand krijgen en de maximale hoogte en breedte krijgen.
Let op start haakje {
en het afsluit haakje }
Elke eigenschap start met een eigenschap, daarna een :
dan de waarde en dan een ;
In dit script.js bestand kan je Javascript code plaatsen. In de head van je HTML bestand kan je deze code inladen. D.m.v:
<head> ... <link href="style.css" rel="stylesheet" type="text/css" /> <script src="script.js"></script> </head>
Meestal worden de script.js bestanden in de head ingeladen. In sommige gevallen gebeurt dat pas onderaan de pagina. Omdat Javascript een beetje buiten de cursus valt, zullen wij het alleen in de head
plaatsen (als we het gebruiken). LET OP dat is anders dan het start template van repl.it