Webdesign (1: HTML) P2

Front End Developer
?
1 / 17
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 17 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

Front End Developer
?

Slide 1 - Diapositive

Een front end developer ontwikkelt de voorkant van een website of applicatie. Dus eigenlijk het gedeelte wat je als bezoeker direct ziet
Je kunt eigenlijk overal aan een website werken, bijvoorbeeld gewoon vanuit huis, maar ook in het park, zolang je maar internet en een laptop hebt.
Introductie Webdesign

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Wat is een website?
Een website bestaat uit pagina's met tekst en afbeeldingen die aan elkaar gelinkt zijn, zoals de website www.nu.nl

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Hoe bekijk je een website?

Een website kan je bekijken met behulp van een internetbrowser, zoals  
Google, Chrome, Safari, Firefox

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Oke, maar hoe werkt dat dan?

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

timer
0:30
In welke code schrijf
je een Webpagina?

Slide 6 - Carte mentale

Cet élément n'a pas d'instructions

De code
Hoe weet een internetbrowser nu precies hoe een website moet worden weergegeven?
 

Een webbrowser kan HTML-code omzetten naar een leesbare webpagina.

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

HTML?
HTML is de afkorting van HyperText Markup Language
Markup Language betekent 'opmaaktaal'.
Je kunt met HTML tekst opmaken en bijvoorbeeld afbeeldingen invoegen.
De nieuwste versie van HTML is versie 5.

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Waaruit is HTML opgebouwd?
timer
0:30
A
elementen
B
objecten
C
tags
D
tekst

Slide 9 - Quiz

Cet élément n'a pas d'instructions

Opbouw van HTML
Bij HTML wordt gebruik gemaakt van zogenaamde tags.


De tags geven aan wat voor soort informatie er moet worden weergegeven, zoals normale tekst, titel, paragraaf, afbeelding, opsomming, tabel, video, etc.

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Voorbeeld HTML-tag

<h1>Dit is een titel</h1>

De <h1> tag geeft aan dat de tekst die volgt als kop1 moet worden weergeveven. 

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Opbouw van een HTML pagina

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Weergave van een HTML pagina

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Pagina titel

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Aan de slag:
DIGIT: Computational Thinking H3. HTML 
* lezen / kijken hoofdstuk 3 (HTML) introductie
* maak vraag 1 & 4 van hoofdstuk 3.1
* maak vraag 5 t/m 8 van hoofdstuk 3.2



Slide 17 - Diapositive

Basis HTML voor webpagina maken
Teskt opmaken met tags
Achtergrondkleur opmaken
Titels maken
Lijsten maken
Afbeeldingen invoegen
Afbeelding als achtergrond gebruiken
Hyperlink naar andere website invoegen