Editie 156 - HTML-cursus

Artikel geplaatst door OWN 17 oktober 2009

464 bezichtigingen

https://gtagames.nl/blogs/entry/3997-editie-156-html-cursus/

Volgers 0

Hoeveel procent heb je GTA Vice City uitgespeelt?
91 leden hebben gestemd

1. Hoeveel procent heb je GTA Vice City uitgespeelt?
- 10%
  
  5
- 20%
  
  6
- 30%
  
  1
- 40%
  
  2
- 50%
  
  11
- 60%
  
  6
- 70%
  
  4
- 80%
  
  7
- 90%
  
  40
- 100%
  
  0

This poll is closed to new votes

Deze rubriek is geschreven door Kloep!

Hallo, en welkom bij de nieuwste rubriek van OWN. In deze rubriek ga ik de allereerste basis vertellen die handig is om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar PHP in combinatie met MySQL. Later zullen we ook steeds meer Javascript bereiken. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

In deze rubriek maak ik gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

Elementen, attributen en waarden

Om te beginnen, zal ik jullie de opbouw van een HTML-code uitleggen. Deze bestaat uit maximaal drie delen. Hierbij denken we aan elementen, attributen en waarden. Elementen zijn een soort labels die de verschillende delen van een pagina indentificeren en structureren. Elementen kunnen leeg zijn, maar hebben meestal een tekst. Als het een tekst heeft, bestaat het uit zowel een begin-, als een eindtag. In het voorbeeld hiernaast is en leeg element te zien op regel 10. Voor de "img" staat een "<". Dit betekent dat de tag is geopend. Hij sluit weer bij de "/", die weer wordt gevolgd door een ">". Alle tags staan tussen de "<" en de ">". Een leeg element is te herkennen aan dat er maar één keer een "<" en één keer een ">" in voor komt, wat duidelijk is te zien op regel 10. Op regel 12 is een element te zien met een tekst. Deze kun je herkennen aan dat er twee maal een "<" en twee maal een ">" inzit. Een element kan regelmatig één of meerdere attributen bevatten. In het voorbeeld hiernaast op regel 10 is dit de "src". Dit is echter niet de enige attribuut die "img" kan bevatten. Hierbij kun je nog denken aan bijvoorbeeld "width" en "height", die de breedte en hoogte in pixels aan kunnen geven. Elk attribuut bevat een waarde. De waarde geeft aan waar het over gaat en wat er moet gebeuren. Op regel 10 is de waarde bijvoorbeeld "test.jpg". Op regel 12 is dit dus "test.html". Denk eraan dat een waarde altijd tussen aanhalingstekens geplaatst moet worden.

Ouders en kinderen

HTML moet je eigenlijk als een hele grote familie zien. Je hebt ouders en kinderen. Als een element een ander element bevat, wordt het beschouwd als de ouder van het ingesloten element. In het voorbeeld hiernaast zal het allemaal wat duidelijker worden. Hierin zien wij drie elementen: de "p", de "b" en de "i". De "p"zorgt voor een paragraaf, de "b" zorgt voor een dikgedrukte tekst en de "i" zorgt voor een schuine tekst. Zoals in het voorbeeld te zien is, is het "p" element de hoogste van het stel. Dit maakt "p" de ouder van "b", die daar recht onder staat. Dus met een beetje logisch nadenken, kom je er al achter dat "b" dan het kind is van "p". "i" is in dit geval het kind van "b". Dit maakt "b" dan natuurlijk de ouder van "i". "i" Is echter geen kind van "p", en er bestaat hier niet zoiets als een kleinkind. In dit geval noem je het gewoon een afstammeling.

Tekstinhoud

De tekst zelf is het belangrijkste onderdeel van een hele website. Echter moet je er altijd wel op letten wat je typt, want HTML kan het zomaar omzetten naar een webpagina. Zo moet je natuurlijk niet zomaar tags uit gaan werken, want deze worden per definitie uitgewerkt en omgezet. Zo ook meer dan één spatie of enters worden weggelaten. Er is natuurlijk wel een mogelijkheid om met enters te werken. Hiervor gebruik je dan het element "br". Dit staat voor break, wat er voor zorgt dat je op de volgende regel doorgaat. Als je "br" gebruikt, ga je automatisch op de volgende regel verder. Gebruik je op die volgende regel in het begin nogmaals een "br" element, zorg je ervoor dat je een witregel krijgt.

Dit is echter niet alles waarbij je op moet letten als je een tekst typt. Het "&" teken wordt regelmatig gebruikt in HTML. Om dit teken toch op je scherm te krijgen, moet je "&amp" typen.

Absoluut en relatief

En toen kwamen we alweer aan bij het allerlaatste onderdeel van les 1. We gaan het hierin hebben over absolute en relatieve URL's. De beste manier om dit zo goed mogelijk in kaart te brengen, is denk ik een tabel erbij maken, dus bij deze:

Geen zorgen, ik zal de tabel ook nog even toelichten. In de eerste kolom zie je de naam van het bestand. In de tweede kolom het volledige pad waarin het bestand staat (de absolute URL). In de derder kolom staat welk pad je moet volgen vanuit de homepage, in de geval index.html (de relatieve URL). De relatieve URL moet alles zien vanuit de map waarin de homepage instaat, in dit geval is dat dus de map: "online". Om naar "logo.png" te komen vanuit de map "online", moet je dus eerst naar "images" en dan "logo.png" opzoeken. Bij info.html zit dat anders, hier zit de map "beta" namelijk niet in "online". Vandaar dat de relatieve url eerst moet beginnen met twee puntjes, die er voor zorgen dat je één map omhoog gaat. Hopelijk is het zo allemaal wat duidelijker.

Dat was dan les 1. Ik hoop dat jullie hebben genoten. Ik hoop ook dat ik alles zo duidelijk heb uitgelegd. Mochten er toch nog onduidelijkheden zijn, kun je altijd bij mij aankloppen op MSN of via PB. Volgende keer zullen we ons bezig gaan houden met hoe je nu precies een webpagina opbouwd. Hopelijk tot de volgende keer!