OWN #198 - HTML-cursus

(0 reviews)

https://gtagames.nl/blogs/entry/5117-own-198-html-cursus/

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.

Tekst veranderen

Nu gaan we een script schrijven waarmee je een tekst kan wijzigen door op een link te klikken. Dit kan je gebruiken als je bijvoorbeeld een quiz maakt. Let wel, dit script onthoudt niet het aantal juiste en verkeerde antwoorden.

1. <html>
2. <head>
3. <script type="text/javascript">
4. 	function verander() {
5. 		document.getElementsByTagName("p")[0].innerHTML="<i>Leuke nieuwe verfrissende tekst</i>"
6. 	}
7. </script>
8. </head>
9. <body>
10. <p><b>Dit is de eerste tekst</b></p>
11. <a href="#" onclick="verander()">Verander bovenstaande tekst</a>
12. </body>
13. </html>

Hieronder is te zien wat je ervoor en erna hebt:

Voor:

Na:

Dit is weer eens een keertje geen moeilijke code. Gewoon een korte simpele code zonder al te veel toestanden. We maken de function 'verander' aan, en geven aan dat deze de tekst moet wijzigen. Daarna komt er alleen nog maar HTML bij kijken, wat we inmiddels toch allemaal wel zullen kunnen.