HTML les 1

1 / 23
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

This lesson contains 23 slides, with interactive quiz and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

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

Slide 2 - Slide

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

Slide 3 - Slide

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

Slide 4 - Slide

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

Slide 5 - Slide

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.

Slide 6 - Slide

dit is de HTML  waaruit de webpagina is opgebouwd.

Slide 7 - Slide

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

Slide 8 - Slide

wat moet je website bevatten?
  • correcte code (zelf te controleren via online validator)
  • verklaarbare code dmv commentaar regels
  • links
  • video
  • tabel
  • lijstjes
  • opmaak (CSS)

Slide 9 - Slide

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

Slide 10 - Slide

HOE MAAK JE EEN WEBPAGINA?

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




Slide 11 - Slide

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!

Slide 12 - Slide

EEN CORRECT HTML-BESTAND

Slide 13 - Slide

3 hoofdelementen

Slide 14 - Slide

De hele website staat in het HTML-element

Slide 15 - Slide

In het html-element staan ALTIJD twee elementen

Slide 16 - Slide

De toevoeging voor Nederlandse taal

Slide 17 - Slide

het HEAD element

Slide 18 - Slide

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.

Slide 19 - Slide

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

Slide 20 - Slide

Wat doet HTML nou eigenlijk?
HTML zorgt voor de functionaliteiten op een webpagina. Ze bepaalt of iets een kop, tabel, link of kader is.

Slide 21 - Slide

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.

Slide 22 - Slide


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

Slide 23 - Poll