Terwijl we ons een weg door het boek werken, bouwen we een website voor de Nanonauten. Telkens wanneer we de code van de website aanpassen, kun je zien hoe de site eruit ziet in je browser door op de links hieronder te klikken. Zoek gewoon even naar het juiste paginanummer. Je kunt de code van de website ook rechtstreeks van de pagina’s zelf kopiëren. Dat scheelt je weer typen. Hieronder leggen we uit hoe je dat doet in Google Chrome (zie de Downloads-pagina):

  • Open een pagina
  • Klik met je rechter muisknop op de pagina en selecteer ”Inspecteren’
  • Je beeldscherm wordt in tweeën gehakt. Links zie je de webpagina, rechts de code achter de pagina en extra informatie over die code.

  • Klik in de menubalk aan de rechterkant op de knop ‘Sources’.
  • Nu verschijnt het broncode-venster.

  • Om de HTML te kopiëren klik je op het bestand met de extensie ‘.htm’ of ‘.html’. De broncode verschijnt in het meest rechterscherm.
  • Om de CSS te kopiëren klik je op het pijltje naast de map ‘css’. Vervolgens klik je op het .css-bestand in de map.
  • Je kunt hier ook de HTML- of CSS-code veranderen of een stylsheet in- en uitschakelen. Speel wat met de code om te zien wat hij doet!

Voorbeeld-HTML en -CSS