Project Materialen - Les 1

Hoofdstuk materialen

1 / 21

Slide 1: Tekstslide

InformaticaMiddelbare schoolmavoLeerjaar 3

In deze les zitten 21 slides, met interactieve quizzen en tekstslides.

Lesduur is: 50 min

Onderdelen in deze les

Hoofdstuk materialen

Slide 1 - Tekstslide

Wat is een website?

Slide 2 - Woordweb

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 3 - Tekstslide

Slide 4 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

Wat is de begintag en wat is de eindtag?

Slide 8 - Open vraag

Wat is het geneste gedeelte?

Slide 9 - Open vraag

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 10 - Tekstslide

Klik vervolgens rechtboven op het blauwe icoontje.

Kies voor: 'new scrim'

Selecteer daarna HTML

Slide 11 - Tekstslide

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

Slide 12 - Tekstslide

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 13 - Tekstslide

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

Geef je project een duidelijke naam. (let op! Dit is ook de naam die ik binnen krijg!)

Slide 14 - Tekstslide

Voeg op de allereerste regel

<!Doctype html> toe.

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

Slide 15 - Tekstslide

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 16 - Tekstslide

Voeg ruimte tussen de head tags toe voor de title tag

<title> jouw titel </title>

Deze informatie is niet om te zien, maar voor de zoekmachine

Slide 17 - Tekstslide

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

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

Slide 18 - Tekstslide

Wat verder?

Begin met de opmaak van je website.
- Schrijf een tekst over wie je bent (minimaal 150 woorden)

- Maak kopjes en paragrafen
- Verander je achtergrond
- Maak letters groot, klein, gekleurd, dik, cursief en/of onderstreept
- Zoek andere fancy opmaakdingen (lettertype, lichtbalk, links, buttons)

Tip: met ctrl + U zie je vaak de bron van een webzite en kun je dingen kopieren

Slide 19 - Tekstslide

Check regelmatig hoe je website er uit ziet!

Slide 20 - Tekstslide

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 21 - Tekstslide