Les 1: 1e pagina, HTML, fouten, nette code

Ieder webpagina of web app, die geopend wordt vanuit een browser, is geschreven in HTML:

HyperText Markup Language

In deze taal kun je een webbrowser vertellen wat er moet gebeuren:

Een titel
Tekst
Afbeeldingen

1 / 11

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4-6

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

Lesduur is: 30 min

Onderdelen in deze les

Ieder webpagina of web app, die geopend wordt vanuit een browser, is geschreven in HTML:

HyperText Markup Language

In deze taal kun je een webbrowser vertellen wat er moet gebeuren:

Een titel
Tekst
Afbeeldingen

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Niet alleen wat er moet gebeuren is belangrijk, ook hoe het eruit ziet.

Daar wordt tegenwoordig een andere taal voor gebruikt, om de code enigszins overzichtelijk te houden én om bv elke pagina van je site dezelfde 'look' te geven:

CSS: Cascading Style Sheet

Slide 2 - Tekstslide

Stylesheet: De opmaak (=style) staat in een apart bestand, dit noem je stylesheet

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Welke webpagina bezoek je vaak? Wat kun je hiermee doen? Hoe ziet de pagina eruit?

Slide 4 - Open vraag

Inzicht ontwikkelen in verschil wat een webapp doet en hoe het eruit ziet.

Wat vind je van de website van school? Denk aan duidelijkheid, gemak van zoeken, kleuren, knoppen.....

Slide 5 - Open vraag

Deze slide heeft geen instructies

Veel apps zijn niet alleen in HTML en CSS geschreven, maar in meerdere programmeertalen.

Met HTML wordt bepaald WAT er op de webpagina komt.

Met CSS wordt bepaald HOE dit eruit ziet. Dus kleuren, grootte van afbeeldingen, etc.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Je 1e webpagina:

In HTML, wat je zelf intikt!
Je gebruikt hiervoor de GitHub Editor
Ik laat een pagina zien, je tikt hem over, runt hem en kijkt hoe hij eruit komt te zien.
Je zult zien dat er precies gebeurt, wat je hebt gecodeerd!

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Waarom moet je zelf de HTML-code intikken?

Slide 8 - Open vraag

Deze slide heeft geen instructies

<!DOCTYPE html>

<head>

<title>Het eerste begin</title>

</head>

<body>

Hier komt mijn eerste tekst

</body>

</html>

Slide 9 - Tekstslide

Dit ziet er helemaal niet fijn uit, in Notepad++ kan dat veel duidelijker.

Slide 10 - Tekstslide

Via Syntaxis kleuren aanzetten

Je ziet verschillende elementen

Gebruik <> en </>

Commentaar!

Zelf een titel verzinnen en wat tekst.

Afbeelding toevoegen: Opzoeken op w3schools hoe dat moet

Runnen: Eerst opslaan als .html-bestand, dan runnen. Dit kan niet vanuit Notepad++, dus vanuit de download-map

Dan uploaden naar classroom

Slide 11 - Tekstslide

Fouten:

<html>: begintag is eindtag geworden

eind van commentaar is weggevallen

<titel> moet <title> zijn

</body> is weg

Les 1: 1e pagina, HTML, fouten, nette code

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Open vraag

Slide 5 - Open vraag

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Open vraag

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Meer lessen zoals deze

Ouderavond Parijs

Teams

Uitleg: The Underground

Bijt niet in de phishinghaak!

Proefles Schrijven: Bronnen en bronvermelding (2F)

Herhaling onderdelen / toetsing

LessonUP 7 juli vaardigheidstraining module A Pro33-College

A3 – DigiD activeren en app installeren