HTML les 1

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

This lesson contains 25 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

καλό πρωί, είχε ωραίες διακοπές;

Slide 3 - 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 4 - Slide

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

Slide 5 - 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 6 - Slide

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.

Slide 7 - Slide

dit is de HTML  waaruit de webpagina is opgebouwd.

Slide 8 - Slide

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

Slide 9 - 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 10 - Slide

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

Slide 11 - Slide

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

Slide 12 - Slide

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.

Slide 13 - 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 14 - Slide

EEN CORRECT HTML-BESTAND

Slide 15 - Slide

3 hoofdelementen

Slide 16 - Slide

De hele website staat in het HTML-element

Slide 17 - Slide

In het html-element staan ALTIJD twee elementen

Slide 18 - Slide

De toevoeging voor Nederlandse taal

Slide 19 - Slide

het HEAD element

Slide 20 - 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 21 - 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 22 - 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 23 - 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 24 - Slide

wat heb je geleerd deze les?

Slide 25 - Mind map