HTML & CSS 01 - 1 tmt 2.3 - introductie

HTML & CSS

1 / 30

Slide 1: Tekstslide

InformaticaWOStudiejaar 4,5

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

Lesduur is: 45 min

Onderdelen in deze les

HTML & CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 1, 2.1, 2.2, 2.3

https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen:

Na deze les kun je:

zeggen waar de afkorting HTML voor staat
uitleggen wat HTML doet, waar het voor is
een eenvoudig HTML bestand maken
uitleggen welke 2 soorten tags HTML heeft
voorbeelden van de soorten tags geven
uitleggen wat <!doctype HTML> doet

Slide 3 - Tekstslide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Wat is HTML?

HTML

HyperText Markup Language
1980 HTML ontwikkeld als opmaakcode voor documenten
1989 HTML omgezet naar hypertext voor het internet
werd al snel de wereldwijde standaard voor het internet voor websites
HTML versie 5 is de huidige versie

Slide 4 - Tekstslide

Deze slide heeft geen instructies

HTML en IDE

Een HTML bestand is een tekstbestand

Een HTML bestand heeft als bestandsextensie: .html of .htm

De homepage is meestal index.htm of index.html

Om HTML te schrijven kun je een Integrated Development Environment (IDE) gebruiken.

Vooral de syntax highlighting van een IDE is erg handig!

Slide 5 - Tekstslide

Deze slide heeft geen instructies

IDE: Visual Studio Code (VSC)

Visual Studio Code (VSC) is een voorbeeld van een IDE

https://code.visualstudio.com/download

VSC is gratis maar vraagt wel veel van je computer, gelukkig zijn er meer gratis alternatieven die minder veeleisend zijn... zoals kladblok! (notepad)

Slide 6 - Tekstslide

Deze slide heeft geen instructies

IDE: Notepad ++

Een minder veeleisend IDE programma is Notepad++
https://notepad-plus-plus.org/downloads/

Tip: stel in dat je via
CTRL-F5 het huidige bestand
kan "uitvoeren":
$(FULL_CURRENT_PATH)

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Bestandsextensie

Een bestandsextensie vertelt je OS met welk programma het bestand moet worden geopend

Een .htm en .html bestand moet worden geopend met je browser om de webpagina te zien, maar met je IDE om de code te kunnen aanpassen

Let op dat je via "opslaan als" het als .html opslaat!

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Waar staat de afkorting HTML voor?

HyperText Markup Language

HyperText Management Language

Heavenly Taco Maker's Legacy

Hyperloop Terabyte Management Language

Slide 9 - Quizvraag

Deze slide heeft geen instructies

Wat is de huidige versie van HTML?

over 9000

Slide 10 - Quizvraag

Deze slide heeft geen instructies

Wat is de standaard naam
van het homepage bestand?

index.html

start.html

home.html

begin.html

Slide 11 - Quizvraag

Deze slide heeft geen instructies

Welk van onderstaande programma's
is GEEN IDE?

VSC

Notepad++

Notepad

Microsoft Word

Slide 12 - Quizvraag

Deze slide heeft geen instructies

Opbouw HTML

Een HTML heeft een bepaalde opbouw

Er zijn 3 onderdelen:

<html> : dit is de zgn. html-tag
<head> : de head (deze tag is optioneel)
(let op, header is een andere tag!)
<body> : de body

Slide 13 - Tekstslide

Deze slide heeft geen instructies

HTML: <head>

De <head> tag is optioneel: je browser gaat niet piepen als je hem weglaat

In <head> staat onder andere:

de titel (die verschijnt in je tabblad en bookmarks)
de favicon (ook in je tabblad en bookmarks)
metadata over je website (handig voor zoekmachines)

Slide 14 - Tekstslide

Deze slide heeft geen instructies

HTML: <body>

<body> tag heeft informatie die te zien is op je website...

maar ook hier gaat je browser niet piepen als je hem weglaat (al wordt je website wel heel saai)

maarrr: er is maar 1 body tag!

sterker nog ook <html> kun je weglaten

Slide 15 - Tekstslide

Deze slide heeft geen instructies

Opdracht #1

Neem de code rechts over in
je IDE (mag ook kladblok zijn)
Sla het op als 00_index.htm
Voer het bestand uit
(open het in je browser)
Wat gebeurt er, en waarom?

Je hebt 4 minuten!

timer

4:00

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Structuur HTML

HTML maakt gebruik van tags

Voorbeelden van tags zijn:

a
img
list
h1

html
head
body
p

h2
div
table
...

Slide 17 - Tekstslide

Deze slide heeft geen instructies

w3schools.com

W3Schools is een goede bron: https://www.w3schools.com/

voor HTML, CSS, Python,

Java, SQL, C, C++, C#,

en nog veel meer

De volgende opdracht leert je

over w3schools en HTML

Slide 18 - Tekstslide

Deze slide heeft geen instructies

Opdracht #2

Zoek uit van onderstaande tags wat ze doen

Gebruik hiervoor W3Schools.com/html

Gebruik elke tag in je bestand

van opdracht #1

Je hebt 4 minuten!

<title>
<div>

timer

4:00

Slide 19 - Tekstslide

Deze slide heeft geen instructies

Tags HTML

HTML gebruikt tags dus niet alleen voor de structuur, maar ook voor de opmaak

Er zijn twee soorten tags in HTML:

paired (dit zijn er heel veel)
unpaired (dit zijn er maar een paar)

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Tags HTML: paired

Een paired tag in HTML heeft een begin- en een eindtag

Alles wat daarbinnen zit, valt onder die tag, zoals:

|_____ erbinnen _____| |_ erbuiten _|

Tags kunnen ook genest worden; een tag binnen een tag:

|__________________ erbinnen ___________||_ erbuiten |

Slide 21 - Tekstslide

Deze slide heeft geen instructies

Tags HTML: unpaired 1/2

Een unpaired tag staat op zichzelf; het begint en eindigt met de enkele tag

Voorbeelden hiervan zijn onder andere:

<img>

Slide 22 - Tekstslide

Deze slide heeft geen instructies

Tags HTML: unpaired 2/2

De unpaired tag of wordt gebruikt om regeleindes (oftewel een break) aan te geven

Een tag wordt als enter/return/break door je browser geïnterpreteerd, dit zag je bij de eerste opdracht:

Slide 23 - Tekstslide

Deze slide heeft geen instructies

Opmaak?

de Enters (lege regels door op enter te drukken) zijn niet te zien in je browser als je geen toevoegt:

Slide 24 - Tekstslide

Deze slide heeft geen instructies

Welke van onderstaande is een
UNPAIRED tag?

<html>

<head>

<img>

Slide 25 - Quizvraag

Deze slide heeft geen instructies

Opdracht #3

Zoek op W3Schools wat <!DOCTYPE html> doet
Zoek op of de <!DOCTYPE html> volgens W3Schools een tag is en, zo niet, wat het dan wel is
Zet bovenstaande in een e-mail naar jklos@stmichaelcollege.nl
de eerste persoon die bovenstaande goed doet krijgt een èchte SMC pen!

Slide 26 - Tekstslide

Deze slide heeft geen instructies

<!doctype HTML>

<!DOCTYPE html> is een zgn. declaratie

Het laat de browser weten welke versie HTML het betreft

Als deze declaratie niet wordt gebruikt, dan past de browser een zgn. quirks mode toe

De quirks mode heeft tot gevolg dat de website de layout gebruikt zoals dat door heeeeeeeel oude browsers zou worden begrepen... niet optimaal!

Slide 27 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen

Je kunt nu:

zeggen waar de afkorting HTML voor staat
uitleggen wat HTML doet, waar het voor is
een eenvoudig HTML bestand maken
uitleggen welke 2 soorten tags HTML heeft
voorbeelden van de soorten tags geven
uitleggen wat <!doctype HTML> doet

Slide 28 - Tekstslide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Bonus Opdracht

Installeer
VS Code https://code.visualstudio.com/
of
Notepad++ https://notepad-plus-plus.org/downloads/
Maak een webpagina
die er zo uitziet:

Slide 29 - Tekstslide

Deze slide heeft geen instructies

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6

Slide 30 - Tekstslide

Deze slide heeft geen instructies

HTML & CSS 01 - 1 tmt 2.3 - introductie

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Quizvraag

Slide 10 - Quizvraag

Slide 11 - Quizvraag

Slide 12 - Quizvraag

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Slide 20 - Tekstslide

Slide 21 - Tekstslide

Slide 22 - Tekstslide

Slide 23 - Tekstslide

Slide 24 - Tekstslide

Slide 25 - Quizvraag

Slide 26 - Tekstslide

Slide 27 - Tekstslide

Slide 28 - Tekstslide

Slide 29 - Tekstslide

Slide 30 - Tekstslide

Meer lessen zoals deze

HWUD04-sj2122-03-HTML-document

bkup 03-HTML-document

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

WEEK 2 - INFORMATICA

HTML & CSS 0 - introductie

WEEK 2 - INFORMATICA

03 - HTML - basis

04 - HTML - head body