HTML & CSS: Introductie HTML

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

Domein A2: HTML & CSS
Introductie HTML

Leerdoelen

Na deze les kun je vertellen

• Wat het World Wide Web is
• Wat HTML is en waaruit een simpele website bestaat
• Wat HTML-elementen en -attributen zijn
• Hoe je een paragraaf-element (<p>) gebruikt

Na deze les kun je 

• Zelf een simpele website maken

Wat heb je nodig om een ​​
eigen website te beginnen?

Nodig voor een eigen website

• Een plek om je webbestanden te hosten
• Een domeinnaam die mensen naar jouw ruimte leidt
• Een manier om informatie om te zetten in webtalen (HTML, CS, Javascript)

Voorbeeld van HTML

HTML

• De taal van een webpagina is HTML
  
• HTML5 is de nieuwste versie van HTML-code
  
• HyperText Markup Language
  
• In het Nederlands: “Taal voor het opmaken van hypertext”
  
• Hypertext = een tekst met hyperlinks
  

Onderdelen webpagina

Een simpele webpagina bestaat uit vier onderdelen

• Tekst
  
• Beetje opmaak
  
• Plaatjes
  
• Hyperlinks
  

Wat voor type taal is HTML?

1. programmeertaal
2. opmaaktaal
3. block-based taal
4. scripttaal

Structuur webpagina

Een HTML-bestand is opgebouwd uit elementen

Bijvoorbeeld: het p-element

Een element maak je met:

• Een begintag
• De inhoud
• Een eindtag

Gebruik het juiste HTML-element
om een paragraaf met de tekst
"Hello world!" toe te voegen

Een correct HTML-bestand

Hoofdelementen

Een HTML-bestand heeft drie hoofdelementen
Dat zijn: 

• html
• head
• body

Hoofdelementen (2)

De hele website staat in het html-element

Hoofdelementen (3)

In het html-element staan ALTIJD twee elementen

Paragrafen (<p>)

Een paragraaf begint altijd op een nieuwe regel en is meestal een blok tekst

• Witruimte wordt genegeerd
  
  
• Gebruik <br> om op een nieuwe regel
   te beginnen

• <br> heeft geen
  eindtag (lege tag) 

Attributen

HTML-elementen kunnen attributen bevatten 

Bijvoorbeeld het src-element

behorend bij een image (img)

• Attributen bieden aanvullende informatie over elementen
  
• Attributen worden altijd gespecificeerd in de starttag
  
• Attributen komen meestal in naam/waarde-paren zoals: naam="waarde"

Opdracht 1

1. Ga naar w3schools.com -> HTML -> HTML attributes 
2. Zoek uit hoe je met attributen een plaatje hoogte en breedte geeft
3. Druk op: Try it yourself en maak het plaatje 500 pixels breed en 100 pixels hoog
4. Extra uitdaging: zoek een ander plaatje op het internet en link hiernaar toe
5. Sla het plaatje op in je downloads

Voeg het eindresultaat hier toe.

codepen.io

Opdracht 2

1. Ga naar codepen.io en maak een account aan (dit kan met Google) 
   
2. Gebruik de HTML-editor voor dit eerste project
3. Maak een website met een welkomstekst en hieronder een plaatje 
4. Extra uitdaging: Probeer uit te vinden hoe je een stuk tekst of het plaatje kunt laten linken naar een andere website. 
5. Tip 1: Je kunt hiervoor de p-, a- en img-elementen gebruiken
6. Tip 2: Gebruik w3schools als je niet meer precies weet hoe je dit kunt doen

Kun je nu een simpele website maken met een tekst en een plaatje?

😒🙁😐🙂😃