HTML en CSS - Inspecteren en uitproberen

  • Je kan de chrome devtools gebruiken om de code van een website te lezen
  • Je kan de chrome devtools gebruiken om de html en css van een website aan te passen
1 / 12
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

Cette leçon contient 12 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

  • Je kan de chrome devtools gebruiken om de code van een website te lezen
  • Je kan de chrome devtools gebruiken om de html en css van een website aan te passen

Slide 1 - Diapositive

Wat weet je nog van de vorige les?

Slide 2 - Question ouverte

Afkijken
Pedagogisch didactisch gezien moet ik zeggen dat ik jullie leer code te lezen en te interpreteren. Maar eigenlijk laat ik jullie zien hoe je moet afkijken ;)

Slide 3 - Diapositive

Elke website bestaat uit html.. 
..en css

Slide 4 - Diapositive

Chrome devtools
Het paneel aan de rechterkant heet Chrome Devtools. Dat is een hele handige tool waarme je kan zien hoe de browser de code van je website heeft ontvangen. Dat kan je gebruiken voor je eigen website maar je kan het ook gebruiken om te kijken hoe dingen op andere websites gemaakt zijn.

Het leuke is, dat je er de websites waar je naar kijkt direct mee kan aanpassen. Dat wordt dan wel niet opgeslagen maar je kan er grappig plaatjes mee maken.

En is het ook erg handig als je een beetje aan het spelen bent vormgeving. B.v. met kleuren of afmetingen

Slide 5 - Diapositive

Het merendeel van jullie kan helaas alleen in Guest mode de devtools gebruiken dus we gaan eerst even met z'n allen in Guest modes. In de screenshot zie je waar je dat kan vinden.
Chrome Guest Mode

Slide 6 - Diapositive

Chrome devtools
Ga naar de website van de nos. Klik met je rechtermuis ergens op de pagina. B.v. één van de plaatjes op de homepage. Selecteer Inspect

Slide 7 - Diapositive

Chrome devtools
Als we nou een beetje door al die code heen proberen te prikken zien we in die code het kopje dat we ook op de homepage zien.

We zien daar dat de tekst netjes in een <h2> zit. En we kunnen zelf zien welk lettertype er gebruikt is en hoe groot het is.

Maar veel leuker is dat we dit allemaal kunnen aanpassen. Als je op de tekst in de html klikt kan je deze gewoon aanpassen.

Als je op de font-family klikt kan je deze aanpassen.

Slide 8 - Diapositive


DEMO

Slide 9 - Diapositive

Opdracht
Pas de homepage van nos.nl of nu.nl zo aan dat het vol staat met grappige of rare nieuwsberichten. Maak een screenshot en lever deze in in classroom 

Pas in ieder geval aan:

* De titel van een bericht
* Het lettertype van iets
* De achtergrondkleur van iets

Slide 10 - Diapositive

"Huiswerk"
  • Verder met css tutorials
  • Klaar? Doen dan flexbox froggy
  • Ook klaar? Begin dan aan je PO

Slide 11 - Diapositive

Wat kon er beter aan deze les?

Slide 12 - Question ouverte