OWN - Web met Boer
Welkom bij de HTML Cursus, geschreven door BoerTijger. Elke week in de OWN ga ik jullie leren hoe de basis van een website is gebouwd. Dit zal ik doen door de scripttalen HTML, CSS en Javascript(jQuery). Ik hoop dat ik jullie kan boeien en dat jullie het een leerzame cursus gaan vinden.
Stap 1
Allereerst, we hebben iets nodig. Waar gaan wij ons code typen. Hoe gaan we ons code typen? Wij gaan gebruik maken van het gratis programma Notepad++. Dat is hier te downloaden.
Stap 2
Het programma, je hebt een heel mooi menubalk bovenin. Met handige knopjes. Maar waar dienen ze voor?
Deze drie zijn het belangrijkste. Met het knopje onder 1 kun je een nieuw blad openen. Met knopje 2 kun je een bestand openen en met knopje 3 sla je hem op. Wij beginnen dus met knop 1. Daar klik je op en dan krijg je een wit blad. De andere knoppen behandelen wij de volgende keer of wanneer ze nodig zijn.
En nu?
We kunnen eindelijk gaan beginnen. HTML, daar starten wij mee. Hyperlink Text Markup Language. Elke site gebruikt het en het is erg simpel te leren. HTML is eigenlijk een gebaseerde opmaaktaal wat in 1997 is bedacht door W3C en WHATWG. Lees hier meer over HTML. Vandaag behandelen wij de 4 belangrijkste dingen voor HTML.
Terug naar je wit blad. We beginnen met de volgende regel:
<!DOCTYPE html>
Het enige wat deze regel doet is checken welke HTML versie jij hebt. Meer doet hij niet, maar heeft wel elk html bestand nodig. Om vervolgens verder in ons blad te gaan gebruiken wij tags. Elke tag heeft een opening:
<html>
En een sluitingstag:
</html>
Deze twee tags geven aan dat wij in HTML aan het scripten zijn. Hierin gaan wij aangeven wat de head en de body is. Zie een pagina als een lichaam. Je lichaam heeft een hoofd en een buik (uitgezonderd armen/benen dan, en bij een normaal mens). Je hoofd die laadt alles. Dus als wij dingen hebben die ingeladen moeten gaan worden doen wij dit in de head. Dit behandelen wij later in deze cursus. Voorlopig gaan wij in op de body. De buik van je pagina. Daarin gaan wij de inhoud van je pagina zetten. Dus ga voor jezelf is nadenken, wat wil ik op mijn pagina? Het resulteert in de volgende code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Hierin komt de inhoud van je pagina -->
</body>
</html>
Zo is elke website opgebouwd. Tussen <!-- en --> staat commentaar. Dit is enkel voor de webdeveloper zelf. Dit wordt niet door jouw internetbrowser ingeladen.
Maar goed, nu heb je deze code. Wat doen wij met deze code? We hebben nu het witte blad met deze code erop. Nu gaan wij dus knop 3 indrukken. Dan sla je hem op met [naamvanjebestand].html Let hierin op dat je extensie .html gebruikt. Zo leest hij je bestanden als HTML.
Volgende keer!
In de volgende les gaan wij dieper in op de body en gaan wij langzaam naar simpele dingen in HTML. Hoe gaan wij bijvoorbeeld tekst op je website krijgen?
Hopelijk tot de volgende week!
7 reacties
Recommended Comments