Programmeren - HTML Les 1

Programmeren in HTML

1 / 23

Slide 1: Diapositive

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

Éléments de cette leçon

Programmeren in HTML

Slide 1 - Diapositive

Doel van de les

Je leert wat HTML is
Je ontwikkelt enkele basisvaardigheden in het schrijven in HTML

Slide 2 - Diapositive

Wat is een website?

Slide 3 - Carte mentale

Let op!

1. Website is geen HTML code. Een webpagina bevat wel HTML code

2. Een website is niet hetzelfde als een browser

3. Een website heeft niet altijd het internet nodig

Slide 4 - Diapositive

HTML

De taal van een webpagina is HTML
Hyper Text Markup Language

Een webbrowser leest de HTML taal en geeft deze weer als leesbare website

Slide 5 - Diapositive

HTML Element

Een HTML element heeft

een begin-tag
0 of meer sub-elementen, ook wel geneste elementen genoemd.
vaak een eind-tag.

Elk HTML element heeft een bepaalde betekenis.

Slide 6 - Diapositive

Voorbeeld HTML-tag

<h1>Dit is een titel</h1>

De <h1> geeft aan dat de tekst die volgt als kop1 moet worden weergeven

Slide 7 - Diapositive

Wat is de begintag en wat is de eindtag?

Slide 8 - Question ouverte

Wat is het geneste gedeelte?

Slide 9 - Question ouverte

Jouw website

Je gaat een website schrijven met HTML

Bedenk een goed onderwerp! Bijvoorbeeld
- Je huisdier
- Je favoriete sport
- Je hobby
- Een schoolproject?

Slide 10 - Diapositive

Aan de slag!

Maak een account aan op https://scrimba.com/

Gebruik het emailadres van school

Verzin een wachtwoord dat je ZEKER niet vergeet

Slide 11 - Diapositive

Klik vervolgens rechtboven op het blauwe icoontje.

Kies voor: 'new scrim'

Selecteer daarna HTML

Slide 12 - Diapositive

Als het goed is krijg je nu dit te zien. Dit is de HTML code.

Slide 13 - Diapositive

Wanneer je rechts op preview drukt, zie je hoe jouw website er tot dan toe uit ziet.
Is het veranderd, druk dan eerst op 'run' om het door te voeren

Slide 14 - Diapositive

Klik op untitled scrim links boven in en daar kun je de naam van dit project veranderen.

Geef je project een duidelijke naam.

Slide 15 - Diapositive

Voeg op de allereerste regel

<!Doctype html> toe.

Hiermee geef je voor de webbrowser aan dat je HTML 5 gebruikt

Slide 16 - Diapositive

Onder de eerste regel nog een regel toe. Zet hier de code <html lang="nl">. Dit vertelt de zoekmachine dat alles in het Nederlands gaat.

Let op dit zijn dubbele aanhalingstekens

Slide 17 - Diapositive

Voeg ruimte tussen de head tags toe voor de title tag

<title> jouw titel </title>

Wat tussen de head tags staat komt niet op je website, maar is voor de zoekmachine enz.

Slide 18 - Diapositive

Onder de title tag gaan we er nog één toevoegen.

Deze zorgt ervoor dat je site alle cijfers en letters aan kan.

Slide 19 - Diapositive

Tussen de tags van body komt de inhoud van je website.

Zet eens de tekst 'dit is een test' tussen de twee body tags en bekijk je website.

Zie je dat deze tekst zichtbaar wordt?

Slide 20 - Diapositive

Ga aan de slag om tekst te verzamelen voor je website

Slide 21 - Diapositive

Tags

Ga aan de slag om je tekst op te maken:

<h1> grote titel </h1>
<h2> kleinere titel </h2>
h gaat t/m h6!

<p> paragraaf </p>

<br> is een enter
<b> dikgedrukt </b>

Slide 22 - Diapositive

Links met HTML-codes

https://blanken5.home.xs4all.nl/webedit/tags.htm

http://www.bezoekme.nl/HTMLgeintjes.htm

https://tipentrucs.postach.io/link/7-cool-html-effects-that-anyone-can-add-to-their-website

https://www.codebrainer.com/blog/top-10-html-tags

https://handboek-html-css.nl/voorbeelden.html

Slide 23 - Diapositive