‹Revenir à la recherche

HTML & CSS 01 - 1 tmt 2.3 - introductie

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

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

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

                      HTML & CSS

Slide 1 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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

Cet élément n'a pas d'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

Cet élément n'a pas d'instructions


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

Slide 11 - Quiz

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions


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

Slide 24 - Quiz

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions



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

Slide 27 - Quiz

Cet élément n'a pas d'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 - Diapositive

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

Cet élément n'a pas d'instructions

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

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

HWUD04-sj2122-03-HTML-document

- Leçon avec 31 diapositives
Communication & multimedia designHBOStudiejaar 2

bkup 03-HTML-document

- Leçon avec 37 diapositives
Communication & multimedia designHBOStudiejaar 2

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

- Leçon avec 13 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4-6

WEEK 2 - INFORMATICA

- Leçon avec 32 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 0 - introductie

- Leçon avec 11 diapositives
InformaticaWOStudiejaar 4,5

WEEK 2 - INFORMATICA

- Leçon avec 31 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 0 - introductie

- Leçon avec 19 diapositives
InformaticaWOStudiejaar 4,5

03 - HTML - basis

- Leçon avec 12 diapositives
ICTMBOStudiejaar 1-4