HTML les 1

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

Leerdoelen

• Wat betekent HTML?
• Wat betekent CSS?
  
• Broncode
• Tags
• PO
• begin maken eigen website
  

Communicatie

Communicatie tussen mens en computer gaat met codeer- en programmeertalen.
Hoe een website eruit moet zien vertel je met een code die een webbrowser kan lezen.

                                                  Deze code heet HTML

Browsen

Browsen of surfen gaan niet zomaar.
Via een aantal schakels komt een pagina op je computer:

HTML

De taal van een webpagina is dus HTML
HTML 5 is de nieuwste versie van HTML code
HyperText Markup Language
In het Nederlands: Taal voor het opmaken van hypertext.
Hypertext is tekst met hyperlinks

broncode van een website

open je browser in chrome

ga naar de site www.nu.nl

klik met je rechtermuisknop ergens op een wit stukje en selecteer paginabron weergeven.

er opent nu een nieuw tabblad met heel veel code.

dit is de HTML  waaruit de webpagina is opgebouwd.

PO informatica

• Inleverdatum 18 december via magister
• haal je de deadline niet, dan punt aftrek per dag dat je te laat inlevert
  
• voornamelijk buiten de lessen aan werken
  
• hulpbronnen
• verslag met uitleg codegebruik
• zorg dat het een prettige site is voor een ander
  

wat moet je website bevatten?

• correcte code (zelf te controleren via online validator)
• verklaarbare code dmv commentaar regels
• links
• video
• tabel
• lijstjes
• opmaak (CSS)
  

notepad

• op je computer staat notepad standaard geinstaleerd
• open notepad
• maak hem vast, hem aan je taakbald

HOE MAAK JE EEN WEBPAGINA?

In een html-bestand met extensie .html of .htm.
Bijvoorbeeld: index.html.
Dit kan gewoon in Kladblok.

Structuur

Een HTML-bestand is opgebouwd uit elementen
Bijvoorbeeld: het title-element

Een element maak je met: de begintag en de eindtag
Er zijn ook elementen waar niets inhoeft, die hebben maar één tag!

EEN CORRECT HTML-BESTAND

3 hoofdelementen

De hele website staat in het HTML-element

In het html-element staan ALTIJD twee elementen

De toevoeging voor Nederlandse taal

het HEAD element

Nesten

Meta-elementen staan in het head-element
We noemen dit nesten.
bijvoorbeeld in de vorige slide waren er 2 elementen  genest in het head-element.

CSS

Cascading Style Sheets (afgekort tot CSS), stijlbladen, zijn een mogelijkheid om de vormgeving van webpagina's los te koppelen van hun feitelijke inhoud en centraal vast te leggen

Wat doet HTML nou eigenlijk?

HTML zorgt voor de functionaliteiten op een webpagina. Ze bepaalt of iets een kop, tabel, link of kader is.

Wat doet CSS?

De CSS bepaalt hoe kop, tabel, link en kader eruit zien.

Vergelijk het met mode.

HTML definieert dat iets een broek is.

CSS bepaalt of het een beige chino, een stonewashed dhoti of lycra tijgerlegging is.

Na deze les, 

wil ik...

de uitleg nog 1 keer horen

meer voorbeelden krijgen

meer oefeningen maken

de leerstof thuis nog even bekijken

overgaan naar nieuwe leerstof

nog meer te weten komen over de leerstof

niet meer te weten komen over de leerstof