‹Return to search

HTML & CSS 01 - 1 tmt 2.3 - introductie

                      HTML & CSS
1 / 30
next
Slide 1: Slide
InformaticaWOStudiejaar 4,5

This lesson contains 30 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

                      HTML & CSS

Slide 1 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Leerdoelen:
Na deze les kun je:
  1. zeggen waar de afkorting HTML voor staat
  2. uitleggen wat HTML doet, waar het voor is
  3. een eenvoudig HTML bestand maken
  4. uitleggen welke 2 soorten tags HTML heeft
  5. voorbeelden van de soorten tags geven
  6. uitleggen wat !doctype HTML doet






Slide 3 - Slide

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions


Waar staat de afkorting HTML voor?
A
HyperText Markup Language
B
HyperText Management Language
C
Heavenly Taco Maker's Legacy
D
Hyperloop Terabyte Management Language

Slide 9 - Quiz

This item has no instructions


Wat is de standaard naam
van het homepage bestand?
A
index.html
B
start.html
C
home.html
D
begin.html

Slide 10 - Quiz

This item has no instructions


Welk van onderstaande programma's
is GEEN IDE?
A
VSC
B
Notepad++
C
Notepad
D
Microsoft Word

Slide 11 - Quiz

This item has no instructions

Opbouw HTML
Een HTML heeft een bepaalde opbouw
Er zijn 3 onderdelen:
  1. <html> : dit is de zgn. html-tag
  2. <head> : de head (deze tag is optioneel)
    (let op, header is een andere tag!)
  3. <body> : de body



Slide 12 - Slide

This item has no instructions

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 13 - Slide

This item has no instructions

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 14 - Slide

This item has no instructions

Opdracht #1
  1. Neem de code rechts over in
    je IDE (mag ook kladblok zijn)
  2. Sla het op als 00_index.htm
  3. Voer het bestand uit
    (open het in je browser)
  4. Wat gebeurt er, en waarom?
                               Je hebt 4 minuten!
timer
4:00

Slide 15 - Slide

This item has no instructions

Structuur HTML
HTML maakt gebruik van tags

Voorbeelden van tags zijn:



  • a
  • img
  • list
  • h1
  • html
  • head
  • body
  • p
  • h2
  • div
  • table
  • ...

Slide 16 - Slide

This item has no instructions

w3schools.com
W3Schools is een goede bron: https://www.w3schools.com/
voor HTML, CSS, Python, 
Java, SQL, C, C++, C#,
en nog veel meer

In de volgende opdracht maak je
kennis met w3schools en HTML


Slide 17 - Slide

This item has no instructions

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!




  • <p>
  • <title>
  • <div>
  • <br>
timer
4:00

Slide 18 - Slide

This item has no instructions

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 19 - Slide

This item has no instructions

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 20 - Slide

This item has no instructions

Tags HTML: unpaired 1/2
Een unpaired tag staat op zichzelf; het begint en eindigt met de enkele tag

Voorbeelden hiervan zijn onder andere:
  • <br>
  • <img>

Slide 21 - Slide

This item has no instructions

Tags HTML: unpaired 2/2
De unpaired tag <br> of <br/> wordt gebruikt om regeleindes (oftewel een break) aan te geven

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

Slide 22 - Slide

This item has no instructions

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

Slide 23 - Slide

This item has no instructions


Welke van onderstaande is een
UNPAIRED tag?
A
<html>
B
<head>
C
<img>
D
<p>

Slide 24 - Quiz

This item has no instructions

Opdracht #3
  1. Zoek op W3Schools wat <!DOCTYPE html> doet 

  2. Zoek op of de <!DOCTYPE html> volgens W3Schools een tag is en, zo niet, wat het dan wel is
timer
2:00

Slide 25 - Slide

This item has no instructions

<!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 26 - Slide

This item has no instructions



Wat is de huidige versie van HTML?
A
4
B
3
C
5
D
over 9000

Slide 27 - Quiz

This item has no instructions

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 - Slide

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
  1. Installeer
    VS Code https://code.visualstudio.com/
    of
    Notepad++ https://notepad-plus-plus.org/downloads/
  2. Maak een webpagina
    die er zo uitziet: 

Slide 29 - Slide

This item has no instructions

Exit ticket
https://forms.gle/7J97NiRs9nqWjk5V6

Slide 30 - Slide

This item has no instructions

More lessons like this

HWUD04-sj2122-03-HTML-document

- Lesson with 31 slides
Communication & multimedia designHBOStudiejaar 2

bkup 03-HTML-document

- Lesson with 37 slides
Communication & multimedia designHBOStudiejaar 2

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

- Lesson with 13 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4-6

WEEK 2 - INFORMATICA

- Lesson with 32 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 0 - introductie

- Lesson with 11 slides
InformaticaWOStudiejaar 4,5

HTML & CSS 0 - introductie

- Lesson with 19 slides
InformaticaWOStudiejaar 4,5

WEEK 2 - INFORMATICA

- Lesson with 31 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

03 - HTML - basis

- Lesson with 12 slides
ICTMBOStudiejaar 1-4