Editie 192 - HTML-cursus
Deze rubriek is geschreven door Kloep!
In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.
Deze week bekijken we hoe je de tekstgrootte gemakkelijk kunt wijzigen.
Blokjes in je browser maken.
Deze week leren we om bovenstaande afbeelding te maken met een simpel scriptje. Zie onderstaande code:
<html>
<head>
<style type="text/css">
#test {
float:right;
border:solid 1 px #000000;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (tel = 1; tel <= 5000; tel++) {
document.write('<div id="test"> </div>')
}
</script>
</body>
</html>
Dit is de gehele pagina die je hierboven ziet. Het is natuurlijk ook mogelijk de code wat aan te passen indien je dit wilt. Daarom zal ik de belangrijkste aspecten uit de code uitleggen.
Als eerste begin ik met een korte uitleg over het for-statement. Dit statement is eigenlijk simpelweg een herhalingsopdracht. Hiermee kun je dus een opdracht geven (in dit geval de blokjes), en dit laten herhalen hoe vaak je maar wilt. Dit statement bestaat uit twee onderdelen:
-
Controle gedeelte; hier worden de herhalingen geregeld (in ons voorbeeld is dit (tel = 1; tel <= 5000; tel++))
- Een opdracht; wat moet er herhaald worden? (in ons voorbeeld is dit ('<div id="test"> </div>'))
In de opdracht zie je in HTML de verwijzing naar het ID "TEST" staan, welke je bovenaan in de code kan vinden.
Eerst zie je in de HEAD een code staan. Dit is een CSS, en zou je eventueel ook in een extern blad kunnen voegen. Voor deze tutorial leek het me handiger om alles in één document te plaatsen. In deze CSS staat het ID "TEST". Dit geeft aan waar de blokjes moeten beginnen, hoe dik ze moeten zijn en hoe groot ze moeten zijn. Dit gaat door middel van CSS codes die we allemaal al eerder hebben behandeld.
Daaronder staat de Javascript waar het allemaal om draait. Eigenlijk hoef je in deze code maar één waarde te wijzigen als je dat wilt. Dat is de "<= 5000". De 5000 hier staat voor het aantal vierkantjes wat wordt gemaakt. Dit kun je dus ook wijzigen naar 1, dan wordt er slechts 1 vakje gemaakt.
En dat was het dan alweer voor deze week. Hopelijk tot de volgende keer!
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.