De website begon heel simpel met een bestand genaamd "index.html" met daarin tags.
In HTML hebben alle elementen een begintag en de meeste hebben ook een sluittag.
Tags staan altijd tussen punthaken < en >.
Je kan dit zelf proberen met het programma kladblok, open dit programma in windows door rechts onder te zoeken op kladblok.
Open dit programma en plak dan de onderstaande code erin. Sla deze file op als index.html en open deze file dan met je browser, je ziet meteen of het is gelukt.
<html>
<body>
<h1> hoofdstuk 1 </h1>
<p> hoi, dit is je eerste website </p>
</body>
</html>
De styling van de website doen we in een file genaamd "style.css", de afkorting css staat voor Cascading Style Sheet.
Daarin kun je het uiterlijk van alle links, letters en nog veel meer in een keer veranderen.
We bepalen in deze file bijvoorbeeld hoe een titel eruit moet zien, dit doen we door de gewenste styling aan de tag te koppelen.
Deze tags gebruiken we dan weer in de "index.html" we hoeven dan geen styling meer te doen want dat is al geregeld in de "style.css" file.
Maak een nieuwe file, plan onderstaande code erin en noem dit nieuwe bestand "style.css".
body {
font-family: sans-serif;
background-color: rgb(207, 181, 181);
text-align:center;
}
h1 {
font-size: 3rem;
padding-top: 3rem;
}
Niet vergeten "style.css" te linken in je html pagina anders snapt je browser het niet.
Voeg deze link toe aan je "index.html", door deze te open met kladblok.
<link rel=stylesheet href=style.css>
Net als bij het lezen van een boek, kun je op internet de bladzijdes omslaan.
Veel Pagina's zijn met elkaar verbonden via (hyper)links.
Door te klikken op een link ga je naar een andere pagina.
Deze website heeft verschillende hoofdstukken en elk hoofdstuk is eigenlijk een html pagina.
Een voorbeeld van de hyperlink uit de inhoudsopgave.
<a href="hoofdstuk-1-geschiedenis.html">Hoofdstuk 1 - De geschiendenis van software ontwikkeling</a>
Je start met de ankertag <a. Met href voeg je de link naar je html pagina toe en tussen de > en < voeg je de naam van de link toe. Een afbeelding kan je op eenzelfde manier klikbaar maken. kijk maar wat er gebeurd bij hoofstuk 6 als je het spook klikt.
vorig hoofdstuk- Wat heb je nodig om een website te maken
volgend hoofdstuk- Een game maken
terug naar home