OWN #194 - HTML-cursus

Artikel geplaatst door OWN 21 augustus 2010

502 bezichtigingen

https://gtagames.nl/blogs/entry/4965-own-194-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 HTML-cursus van OWN. In deze rubriek ga ik (Kloep) zaken vertellen die handig zijn 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 wat Javascript. 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 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.

Omrekentabel

Deze week gaan we een omrekentabel maken. Dit kun je natuurlijk met allerlei zaken doen. Je kunt alle soorten verschillende formules in je code plaatsen. Hieronder krijg je het voorbeeld te zien van een tabel die centimeters omrekent naar inches.

1. <table border="1" cellpadding="5" cellspacing="0">
2. 	<tr><td>Centimeter</td><td>Inch</td></tr>
3. 		<script type=""text/javascript">
4. 			for (centimeter = 1; centimeter <= 25; centimeter = centimeter + 1)
5. 		{
6. 		document.write("<tr><td>" + centimeter + "</td><td>" + ((centimeter) * 0.39) + "</td></tr>");
7. 		}
8. 		</script>
9. </table>

Onderstaand resultaat krijg je dan:

De code zul je redelijk snel doorhebben. Een aantal regels kennen we al. We weten nu inmiddels wel hoe je een tabel maakt. De eerste twee regels zijn dan dus al bekend. De derde regel hebben we ook al vaker gezien. Deze opent natuurlijk de javascript code.

Daarna komt het FOR-statement weer terug. Deze hebben we al eerder gezien in editie 190. Toen gebruikte we hem voor het tellen van hokjes, nu maken we er ook een rekensom mee.

Regel 4: Je ziet eerst dat we beginnen bij 1 en doorgaan tot 25. Daarna zie je dat we stappen van 1 nemen.

Regel 6: Hier gaan we weer naar document.write, die je ook al vaker hebt gezien. We beginnen dus gewoon met de tabel maken. In de eerste kolom krijg je de centimeters te zien. In de tweede kolom komt de rekensom. 1 Centimeter staat gelijk aan 0,39 inch. We nemen dus de waarde uit de eerste kolom (centimeter), en vermenigvuldigen deze met 0,39 (in de code wordt de , een .). Daarna is het slechts nog een kwestie van alles afsluiten.