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 firefox

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 15 december via magister
• haal je de deadline niet, dan puntaftrek 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 bureaublad staat een boompictogram snelkoppelingen
• dubbelklik dit en open de map notepad++
• sleep met je rechtermuisknop dit bestand naar je bureaublad en kopieer het bestand
• open notepad++
• druk op no
• druk op ignore

notepad++

• open je notepad++ vanaf je bureaublad
• ga naar syntaxis
• klik op H
• klik op HTML

HOE MAAK JE EEN WEBPAGINA?

In een html-bestand met extensie .html of .htm.
Bijvoorbeeld: index.html.
Dit kan gewoon in Kladblok.
Wij gaan werken in notepad++.

Een programma speciaal voor programmeren noemen we een workbench.

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.

wat heb je geleerd deze les?