Jump to content

OWN

  • artikelen
    5186
  • reacties
    17587
  • bezichtigingen
    1579278

OWN - Web met Boer


OWN

851 bezichtigingen

j52uCEX.png

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?

o8sd2x.png

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!

MWfTSx9.png

7 reacties


Recommended Comments

Ah, eens iets uit mijn vakgebied. Nice. :)

Ik ga je wel wijzen op twee dingen die je nog moet toevoegen wil je helemaal "HTML5 compliant" zijn. Het eerste is het "lang" attribute in het html element:

<html lang="nl">

En het tweede is de charset meta tag, welke je tussen de head tags plaatst.

<meta charset="UTF-8">

Link to comment

Ah, eens iets uit mijn vakgebied. Nice. :)

Ik ga je wel wijzen op twee dingen die je nog moet toevoegen wil je helemaal "HTML5 compliant" zijn. Het eerste is het "lang" attribute in het html element:

<pre class='prettyprint'><html lang="nl"></pre>En het tweede is de charset meta tag, welke je tussen de head tags plaatst.

<pre class='prettyprint'><meta charset="UTF-8"></pre>

Ga ik toevoegen. Bedankt voor de tip!

Link to comment

Ik heb zelf het boek "HTML en CSS voor dummies" in de kast liggen, maar daar nooit iets mee gedaan. Wellicht dat dat met deze reeks verandert.

Met dat boek ben ik ook begonnen! Laten we hopen, het is een mooi en boeiend vak ;)

Link to comment
Gast
Reactie toevoegen...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...