1 of 100

Informatica programma regulier

Het vak

Informatica als keuzevak havo/vwo is in 1998 onstaan. Destijds was er een programma weerspiegelt de tijd waarin het world wide web nog maar mondjesmaat gebruikt werd en bedrijfsautomatisering de meest in het oog springende toepassing van computers was. In de huidige samenleving werken velen in the cloud met behulp van wearable devices die veel aspecten van hun leven real time monitoren via het internet of things. Die informatierevolutie vraagt het onderwijs om leerlingen en studenten digitaal geletterd te maken. Digitale geletterdheid betekent meer dan apps en programma’s bedienen: om kundig en verantwoordelijk mee te doen in de informatiemaatschappij is het onontbeerlijk de digitale wereld te begrijpen. Verder hoort bij toekomstgericht onderwijs dat leerlingen leren de kansen van de digitale wereld te benutten om innovatieve oplossingen te bedenken én te maken. Het vakgebied informatica levert daarvoor respectievelijk de concepten en methoden. Sinds 2018 is het gehele is er vanuit een vernieuwingscommissie Informatica een nieuw programma samengesteld. Het nieuwe pogramma bestaan uit een gmeenschappelijk kernprogramma en over aanvullende thema’s waaruit leerlingen kunnen kiezen. Het programma bestaat uit een schoolexamen.

Kernprogramma

Het kernprogramma wordt gegeven in het 4de jaar en is voor de Havo en het VWO precies het zelfde. Echter bij het VWO gaat wordt er meer gevraagd rondom denkvaardigheid en diepgang. In het 4de jaar krijg je 3 uur lesuren informatica. Voor het kernprogramma staan voor 200 slu [studielast uren]. Wat inhoud dat je naast je lesuren nog ongeveer 2 uur in de week bestaat aan thuiswerk.

keuzethema’s

Na het succesvol afronden van het kernprogramma worden de keuzethema’s gekozen. De keuzethemas zijn verdeelt in 2 groepen: resp. 1 en 2. De eis is dat je minimaal 1 keuzethema uit groep 2 hebt gekozen. Een keuzethema staat voor 60 slu [studielast uren] en je hebt een half lesjaar op een keuze thema af te ronden. Na het kernprogramma heb je 2 lesuur in de week.

Keuzethema’s - groep 1:

Algoritmiek, berekenbaarheid en logica
Databases
Cognitive computing
Programmeerparadigma’s
Computerarchitectuur
Netwerken
Physical computing
Security

Keuzethema’s - groep 2:

Usability
User experience
Maatschappelijke en individuele invloed van informatica
Computational science

Kernprogramma

Periode 1

In de eerste periode gaan we ons bezig houden met het bouwen van een website, netwerken en een klein beetje security.

Zie het kopje modules voor de stof

Planner Havo

Week #

Date

Subject

Work

17-8

HTML-CSS-0

Het Internet

Lesbrief 1, 2, 3

1: What is the Internet

24-8

HTML-CSS-0

Het Internet

Lesbrief 4, 5, 6

2: Wires, Cables & WiFi

31-8

HTML-CSS-1

Het Internet

Lesbrief 1, 2, 3

3: IP Adresses & DNS

7-9

HTML-CSS-1

Het Internet

Lesbrief 4, 5, 6

4: Packets, Routing & Reliability

14-9

HTML-CSS-1

Het Internet

Lesbrief 7, 8, 9

5: HTTP & HTML

21-9

HTML-CSS

Het Internet

Eindopdracht [PET1]

6: Encryption & Public Keys

28-9

HTML-CSS

Het Internet

Eindopdracht [PET1]

7: Cypersecurity & Crime

19-10

HTML-CSS

Het Internet

Eindopdracht[PET1]

Deadline PET1

8: How search works

26-10

Informatie

Les 1, 2, 3

2-11

Informatie

Les 4, 5, 6

9-11

uitloop

Planner VWO

Week #

Date

Subject

Work

17-8

HTML-CSS-0

Het Internet

Lesbrief 1, 2, 3, 4

1: What is the Internet?

24-8

HTML-CSS-0 / 1

Het Internet

Lesbrief 5, 6, 1, 2

2: Wires, Cabbles & WiFi

31-8

HTML-CSS-1

Het Internet

Lesbrief 3, 4, 5, 6

3: IP Addresses & DNS

7-9

HTML-CSS-1 / 2

Het Internet

Lesbrief 7, 8, 9, 1

4: Packets, Routing & Reliability

14-9

HTML-CSS-2

Het Internet

Lesbrief 2, 3

5: HTTP & HTML

21-9

HTML-CSS

Het Internet

Eindopdracht [PET1]

6: Encryption & Public Keys

28-9

HTML-CSS

Het Internet

Eindopdracht [PET1]

7: Cybersecurity & Crime

19-10

HTML-CSS

Het Internet

Eindopdracht[PET1]

Deadline PET1

8: How Search Works

26-10

informatie

les 1, 2, 3

2-11

Informatie

Les 4, 5, 6

9-11

uitloop

Periode 2

In de tweede periode gaan we ons bezig houden met programeren en algoritmes.

Zie het kopje modules voor de stof

Planner Havo

Week #

Date

Subject

Work

23-11

Python-0

Les 1

30-11

Python-0

Automaten

Les 2

Les 1

7-12

Python-0

Automaten

Les 2B

Les 2

14-12

Python-0

Automaten

Les 3

4-1

Python-0

Automaten

Les 4

11-1

Python-0

Automaten

Les 5

18-1

Python-Kunst

Algoritme

Les 1, 2

Les 1

25-1

Python-Kunst

Algoritme

PET2

Les 2

1-2

Python-Kunst

Algoritme

PET2

Les 3

8-2

Python-Kunst

Algoritme

PET2

Les 4

15-2

pyton-kunst

DL: PET2

Algoritme

PET2

Les 5

1-3

uitloop

Planner VWO

Week #

Date

Subject

Work

23-11

Python-0

Les 1, 2

30-11

Python-0

Automaten

Les 2b, 3

Les 1

7-12

Python-0

Automaten

les 4, 5

Les 2

14-12

Python-1

Automaten

Les 1, 2

Les 3

4-1

Python-1

Automaten

Les 2, 3

Les 4

11-1

Python-1

Automaten

Les 3 ,4

Les 5

18-1

Python-1

Algoritme

Les 4, 5

Les 1

25-1

Python-1

Algoritme

Les 5, 6, 7

Les 2

1-2

Python

Algoritme

PET2

Les 3

8-2

Python

Algoritme

PET2

Les 4

15-2

Python

DL: PET2

Algoritme

PET2

Les 5

1-3

uitloop

Periode 3

In de derde periode gaan we ons bezig houden met Databases

Zie het kopje modules voor de stof

Planner Havo

Week #

Date

Subject

Work

1: Inleiding

eigen omgeving omzetten

2: Selectie

Hele hoofdstuk

3: Functie

Alle opdrachten

4: Groeperen

Alle opdrachten

7: Tabellen muteren

8: Gegeven toevoegen

Alle opdrachten

9: Sleutel en Verwijzing

Alle opdrachten

Eindopdracht

Starten aan PET

Eindopdracht

Werken aan PET

Eindopdracht

Werken aan PET

DL: PET3

Oefenen voor de toets

Planner VWO

Week #

Date

Subject

Work

Database

1: Inleiding

2: Selectie..

Eigen Omgeving opzetten T/m Selectie & Sorteren

2: Selectie

3: Functie

Geheel afmaken

Alle opdrachten

4: Groeperen

Alle opdrachten

5: Joins

Alle opdrachten

6: SubQueries

Alle opdrachten

7: Tabellen muteren

8: Gegeven toevoegen

Alle opdrachten

9: Sleutel en Verwijzing

Eindopdracht

Alle opdrachten

Starten aan PET

Eindopdracht

Werken aan PET

Eindopdracht

Werken aan PET

DL: PET3

Oefenen voor de toets

Kern Programma

Het Internet

De module het Internet bestaat uit een 8-aantal filmpjes van ongeveer 5/6 minuten. De inhoud van de filmpjes is tevens het leerwerk voor de toets in de toetsweek. Per filmpje krijg je 2 (open) vragen.

1: What is the Internet?

2: Wires, Cables & Wifi

3: IP Addresses & DNS

4: Packets, Routing & Reliability

5: HTTP & HTML

6: Encryption & Public Keys

7: Cybersecurity & Crime

8: How Search Works

Informatie

Welkom in de Module informatica.

Presentaties

Les 1: Introductie in binaire getallen

Les 2: Hexadecimale getallen

Les 3: Logische operaties

Les 4: Digitalisereng van tekst

Les 5: Digitalisering van beeld

Les 6: Digitalisering van het geluid

Les 1: Introductie in Binaire Getallen

Digitale informatie

Een computer is een elektronisch apparaat en bestaat uit miljarden schakelaars die aan en uit kunnen staan. De schakelaars zijn dus 0 of 1. Allerlei soorten informatie moeten door 0-en en 1-en voorgesteld kunnen worden. Niet alleen getallen, maar ook tekst, geluid, plaatjes, enz. Dat betekent dat er afspraken zijn gemaakt op welke manier al die informatie wordt gecodeerd met 0-en en 1-en

De informatie eenheid van de computer is de bit (binary digit), het kleinst mogelijke stukje informatie. Een bit heeft de waarde 0 of 1. Met één enkele bit is het al mogelijk om informatie te coderen, bijvoorbeeld:

uit(0)

aan(1)

nee(0)

Ja(1)

False(0)

True(1)

Wit(0)

Zwart(1)

Opslaan van binaire informatie

Een bit wordt in de computer meestal weergegeven in het geheugen door een transistor die aan of uit staat of een condensator die geladen of ontladen is.

Wanneer data door een telefoondraad worden gezonden, worden hoge en lage tonen gebruikt voor nullen en enen. Op magnetische schijven, zoals een harde schijf, worden de bits weergegeven door de richting van het magnetische veld op de oppervlakte van de schijf, Noord-Zuid of Zuid-Noord.

Audio CD’s, CD-ROM’s en DVD’s bewaren bits optisch—het deel van het oppervlakte dat voor 1 bit staat reflecteert het licht of juist niet

Een bit alleen zegt niet zo veel, dus zijn bits meestal gegroepeerd in groepjes van 8 die de getallen 0 tot 255 kunnen weergeven. Een groep van 8 bits heet een byte. De snelheid van een computer wordt bepaald door het aantal bits dat het in een keer kan verwerken. Een 32-bit computer bijvoorbeeld, kan 32-bits in een handeling verwerken, terwijl een 16-bit computer de 32-bit getallen eerst in kleinere stukken moet delen wat het dus langzamer maakt. Uiteindelijk zijn het alleen bits en bytes die een computer gebruikt om tekst, getallen en alle andere informatie op te slaan en te verzenden.

Binaire getallen

De waarde van binaire getallen

Wij gebruiken het tientallig of decimale talstelsel omdat wij het handig vonden om met 10 vingers te rekenen. Een computer heeft niet zoveel 'vingers'. Zoals gezegd werkt hij slechts binair (met 0'en en 1'en). Een binair getal is een reeks van cijfers, waarbij elk cijfer gekozen kan worden uit de cijfers 0 en 1.

Zo is het getal 00110100 dus een binair getal dat bestaat uit 8 bits. Welke decimale waarde hoort bij dit getal?

Net zoals in decimale getallen elk cijfer een veelvoud is van een macht van 10 is in binaire getallen elk cijfer een veelvoud van een macht van 2. De waarde van het binaire getal 00110100 is dus te berekenen en wel als volgt:

Macht

dus

2 ^ 7

2 ^ 6

2 ^ 5

2 ^ 4

2 ^ 3

2 ^ 2

2 ^ 1

2 ^ 0

Het binaire getal 00110100 heeft dus de waarde 4 + 16 + 32 = 52.

Een eenvoudige manier om de waarde van een binair getal te berekenen is om de bijbehorende machten van 2 onder de bits te zetten:

128

Het grootste getal dat je met acht bits dus kunt maken is dus het getal: 11111111 = 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

Rekenen met binaire getallen Nu je kennis hebt gemaakt met binaire getallen wordt het tijd om ook binair te leren rekenen. We tellen de getallen 00110100 (52) en 01110111 (119) op. Het resultaat is 10101011 (171):

00110100
01110111
---------   +
10101011

1 + 1 = 0 omdat 1 (keer 8) + 1 (keer 8) samen 0 (keer 8) en 1 (keer 16) is

De regel “één onthouden” (als een optelling van twee cijfers de 2 overschrijdt) kan je dus ook hier toepassen !

Opdrachten

Maak van de volgende decimale getallen een binair getal:23 57 69 199
Maak van de volgende binaire getallen een decimaal getal: 01010101 00100100 11110111 00001000
Tel de volgende binaire getallen binair bij elkaar op 11001100 en 00110011 00101001 en 01110101
Wat is het grootste getal dat je kan maken met 16 bits ?
Vermenigvuldig 00110100 (52) met 2. Welk binair getal is de uitkomst ? Wat valt je op?

Les 2: Hexadecimale Getallen

De waarde van hexadecimale getallen

Een talstelsel dat wij bij het computergebruik ook tegenkomen is het hexadecimale talstelsel. Hierbij worden niet de bouwstenen “0 en 1” (binair) of “0 t/m 9” (decimaal) gebruikt maar de bouwstenen “0 t/m 9 en letters A t/m F”.

Een hexadecimaal getal is een reeks van cijfers, waarbij elk cijfer gekozen kan worden uit de cijfers 0 t/m 9 en letters A t/m F. Zo is het getal 2AF3 dus een hexadecimaal getal dat bestaat uit 4 cijfers. Welke decimale waarde hoort bij dit getal?

Net zoals in decimale getallen elk cijfer een veelvoud is van een macht van 10 is en in binaire getallen elk cijfer een veelvoud is van een macht van 2 is in hexadecimale getallen elk cijfer een veelvoud van een macht van 16. De waarde van het hexadecimale getal 2AF3 is dus te berekenen en wel als volgt:

Macht

dus

16 ^ 3 ( * 2 )

4096 * 2

16 ^ 2 ( * 10)

256 * 10

16 ^ 2 ( * 15)

16 * 15

16 ^ 0 ( * 3)

1 * 3

Het hexadecimale getal 2AF3 heeft dus de waarde 3 + 240 + 2560 + 8192 = 10995 Een eenvoudige manier om de waarde van een hexadecimaal getal te berekenen is om de bijbehorende machten van 16 onder de bits te zetten:

4096

256

3 x 1 + F x 16 + A x 256 + 2 x 4096 = 3 x 1 + 15 x 16 + 10 x 256 + 2 x 4096 = 10995

Van hexadecimaal naar binair en andersom

Hexadecimale getallen zijn pas echt handig omdat je ze heel gemakkelijk kunt omzetten naar binaire getallen en andersom. DIt komt omdat 1 hexadecimaal cijfer precies uit te drukken is met een getal van 4 binaire cijfers. Hieronder een tabel:

binair

hexadecimaal

0000

0001

0010

0011

0100

0101

0110

0111

1000

1001

1010

1011

1100

1101

1110

1111

Deze tabel kun je nu gebruiken om binaire getallen naar hexadecimale getallen om te zetten en andersom. Je maakt groepjes van 4 en kijkt naar de bijbehorende waarde in de tabel:

Voorbeeld: Zet het volgende binaire getal om naar naar hexadecimaal: 0101010101010101001010111

Eerst onderverdelen in groepjes (rechts beginnen

1010

0101

0111

Zoek dan de juiste waarde erbij uit de tabel boven.

1010

0101

0111

Dus: AAAAF

Voorbeeld: zet het volgende hexadecimale getal om naar binair: BC57

1011

1100

0101

0111

Dus: 1011 1100 0101 0111

Opdrachten

Maak van het volgende hexadecimale getal een decimaal getal: C2B3
Maak van het volgende decimale getal een hexadecimaal getal: 7824
Wat is het grootste hexadecimale getal van 8 cijfers ?
Zet de volgende hexadecimale getallen om naar binair: A1B9F & AD0BE
Zet de volgende binaire getallen om naar hexadecimaal: 101010101111 & 111000110101011111

Les 3: Logische Operaties

Inleiding

Je hebt gezien dat een computer in het binair stelsel rekent. Je kunt je afvragen hoe dit gaat. In een computer wordt gebruik gemaakt van digitale schakelaars, waarin maar twee waarden kunnen voorkomen: de 0 en 1. Een digitale schakelaar kan zo de waarde van een bit vastleggen. Deze schakelaars heten transistoren en daarvan zitten er miljoenen op een chip.

Om de werking duidelijk te maken kun je kijken hoe je een lamp met behulp van gewone schakelaars aan en uit kunt zetten. Zowel de lamp als de schakelaars stellen een bit voor.

De AND-poort

In onderstaande plaatje zie je een schakeling met twee schakelaars en een lampje. Als de schakelaars in positie 0 staan, brandt de lamp niet. Alleen als de schakelaars A én B in positie 1 staan, gaat de lamp branden.

Kijk ook naar alle mogelijke varianten in wat ook wel een waarheidstabel wordt genoemd. Deze schakeling wordt een AND-poort genoemd. Een AND-poort wordt weergegeven met het symbool:

De OR-poort

In onderstaand plaatje zie je schakeling met twee schakelaars en een lampje. Als de schakelaars in positie 0 staan, brandt de lamp niet. Als alleen schakelaar A aan wordt gezet, gaat het lampje branden. Ook als alleen schakelaar B aan wordt gezet gaat het lampje branden. Ook als beide schakelaars aan staan, brandt het lampje.

Kijk ook naar alle mogelijke varianten in de tabel. Deze schakeling wordt een OR-poort genoemd. Een OR-poort wordt weergegeven met het symbool:

De XOR-poort

In onderstaand plaatje zie je schakeling met twee schakelaars en een lampje. Als beide schakelaars in positie 0 staat, brandt de lamp niet. Staan beide schakelaars in positie 1 dan brandt de lamp ook niet. De lamp brandt alleen als schakelaars in verschillende posities staan. Probeer maar. Kijk ook naar de getallen in de waarheidstabel.

Deze schakeling wordt een XOR-poort genoemd. Een XOR-poort wordt weergegeven met het symbool:

De NOT-poort

In onderstaand plaatje zie je schakeling met twee schakelaars en een lampje. Als de schakelaar in positie 0 staat, brandt de lamp. Staat de schakelaar in positie 1 dan brandt de lamp niet. De stand van de schakelaar is dus omgekeerd aan de toetstand van de lamp.

Kijk ook naar de getallen in de waarheidstabel. Deze schakeling wordt een NOT-poort of Inverter (keert de invoer om) genoemd. Een NOT-poort wordt weergegeven met het symbool:

Inverters In de tot nu toe behandelde poorten is alleen de NOT-poort een voorbeeld van een zogenaamde inverter. Een inverter keert de ingevoerde waarde telkens om. Bij de NOT- poort wordt de ingevoerde waarde 0 omgekeerd in de waarde 1. Een invoer van de waarde 1 levert als uitvoer de waarde 0 op. Je herkent een inverter aan het ronde open cirkeltje in het gebruikte symbool voor de poort. Voorbeelden van andere inverters zijn de NAND-poort, de NOR-poort en de NXOR-poort.

Leuke Video!

Opdrachten

[1] Kijk naar de waarheidstabel van de AND-poort. Wat moet er op de plekken: A, B, C en D worden ingevuld?

[2] Kijk naar de waarheidstabel van de NOR-poort. Wat moet er op de plaatsen A tot en met D komen?

[3] Beredeneer in welke situaties de LED niet gaat branden.

[4] Beredeneer in welke situaties de LED gaat branden. Vul daarvoor de lege plaatsen in de bijbehorende waarheidstabel in.

[5] Beredeneer in welke situaties de LED gaat branden.

Les 4: Digitalisering van tekst

In dit hoofdstuk wordt behandeld hoe leestekens kunnen worden voorgesteld door informatie die bestaat uit reeksen 0-en en 1-en, digitale informatie.

Inleiding

Telecommunicatie: al honderden jaren zijn mensen in staat om op afstand met elkaar te communiceren. Indianen gebruikten rooksignalen om boodschappen te verzenden en telegrafen gebruikten Morse-code om boodschappen te verzenden. Hoewel deze vormen van communicatie van elkaar verschillen zijn er ook duidelijke overeenkomsten. Bij elke vorm van communicatie worden karakters (letters, cijfers, leestekens) vertaald in een code. We noemen dit karaktercodering. De code wordt verzonden en door de ontvanger gedecodeerd.

De coderingstechniek heeft sinds de uitvinding van de telegrafie in de 19e eeuw niet stilgestaan. De Morse-code werd vervangen door meer geavanceerde codes. Niet alleen de coderingsmogelijkheden zijn verder ontwikkeld, ook de technische mogelijkheden zijn verder ontwikkeld.

Tegenwoordig communiceren we met het grootste gemak via digitale communicatiemiddelen. Denk alleen al aan de chatmogelijkheden van Whatsapp of aan SMS.

In deze les wordt beschreven hoe de codering van karakters zich vanaf de telegrafie heeft ontwikkeld tot de codering die nu wordt toegepast in computers, de ASCII-codering.

Telegrafie en de Morse-code

Samuel Morse (1791-1872), een Amerikaans kunstenaar, werd in 1832 professor beeldende kunsten aan de universiteit van New York. Zijn interesse voor elektriciteit leidde tot de ontwikkeling van een telegrafische verbinding tussen Washington en Baltimore (1844).

De werking van deze telegrafische verbinding is als volgt. Een apparaat produceert elektrische pulsen (stroompjes). Deze pulsen worden via een koperdraad naar de ontvanger verzonden. Bij de ontvanger worden de pulsen omgezet in korte en lange tikken op een strook papier.

Morse maakte gebruik van korte en lange pulsen en had letters, cijfers en leestekens als volgt gecodeerd (Morse code):

In deze tabel is een “.” een korte puls en een “-“ een lange puls. Bij het verzenden van de letter “A” moest de Morse verzendsleutel achtereenvolgens één keer kort en één keer lang worden ingedrukt.

De ontvanger krijgt de boodschap in de vorm van korte en lange tikken op een strook papier.

Opdracht Een bekende Morse boodschap is SOS (“Save Our Souls”): ... --- ... De eerste boodschap die Samuel Morse in 1844 verstuurde was:
What hath God wrought?
Vertaal deze Morse boodschap.

Morse had zijn codering zo slim mogelijk in elkaar gezet. Letters die vaak gebruikt worden, zoals de letter “E”, worden met weinig pulsen gecodeerd: “.”. Dat maakt de boodschappen zo kort mogelijk.

Merk op dat er geen codering is voor een spatie. Dat was ook niet nodig. Een spatie was bij telegrafie gewoon een korte pauze. De strook van de ontvanger wordt in deze pauzetijd doorgetrokken zodat vanzelf een tussenruimte tussen de karakters ontstaat.

Pas na de uitvinding van de radiogolf in 1888 door de Duitser Heinrich Hertz (1857-1894) en de toepassing daarvan bij radioverbindingen in 1894 door de Italiaan Guglielmo Marconi (1874-1937) kon de Morse code ook via radiogolven verzonden worden. Ook zonder koperdraadverbinding konden de pulsen worden verzonden en ontvangen en dan wel in de vorm van korte en lange pieptonen. Dat had grote gevolgen voor de bruikbaarheid van de Morse code. Je kent waarschijnlijk wel de beelden uit films over de Tweede Wereldoorlog waarin communicatie tussen schepen via telegrafische verbindingen verliep.

Zoals het zo vaak gaat in de techniek lopen mensen op een gegeven moment aan tegen beperkingen van een bepaalde techniek en gaan dan nadenken over mogelijke verbeteringen. Een beperking van de Morse code is dat verschillende leestekens gecodeerd worden met symbolen of pulsreeksen van verschillende lengtes. Dat maakt dat bij het telegraferen met Morse code de ontvanger altijd zijn berichten moet decoderen door of de strip met tikken te “lezen” of nauwlettend de binnenkomende pieptonen te beluisteren. Bij het decoderen is dus altijd menselijke deskundigheid vereist.

De ASCII-tabel

Rond 1940 startte de ontwikkeling van de computer. Twintig jaar later voorzag Bob Bemer, werkzaam bij IBM, dat de computer een rol zou gaan spelen in communicatie. Bemer inventariseerde 60 verschillende karaktercoderingen bij de verschillende computers die in de loop der tijd waren ontstaan, zette een groep mensen aan het werk om een universele code te ontwikkelen en publiceerde de onderzoeksresultaten.

Het resultaat is de ASCII code (American Standard Code for Information Interchange), voor het eerst erkend in 1963: https://www.asciitable.com

Deze basistabel bestaat uit 128 karakters. Aan de hand van de tabel kan elk karakter worden voorgesteld door een binaire code van 7 bits. Hoe werkt deze code?

Voorbeeld: De letter “a” is het 98e karakter in de tabel en heeft dus als bijbehorend nummer “97” (het eerste karakter is de “NUL” en heeft het bijbehorende nummer “0”). De ASCII code van de letter “a” is dus het binaire getal: 1100001.

In totaal kunnen er met 7 bits 27 = 128 codes worden gemaakt. Dat maakt de codering natuurlijk niet tot een wereldwijde standaard codering die in alle taalgebieden bruikbaar is.

Opdracht Geef de hexadecimale representatie van onderstaande ASCII-tekst: "Hallo Luuk!" Opdracht Bepaal welke ASCII-tekst hier hexadecimaal is weergegeven:

44 65 20 77 6F 72 74 65 6C 20 76 61 6E 20 32 38 39 20 69 73 20 69 73 20 31 37 2E

Opdracht Maak een bestand in notepad of een soortgelijke editor. Zet er een stukje tekst in. Open het bestand vervolgens met een hexdump programma. Op een mac of op linux zou je via de terminal het programma hexdump kunnen gebruiken. Je zou dit ook online kunnen doen. Zie: https://hexed.it/

Foutcontrole

Computers en randapparatuur werken over het algemeen met bytes, series van 8 bits. Als achtste bit van de ASCII code wordt traditioneel een pariteitsbit toegevoegd. Het doel van deze extra bit is om foutcontrole mogelijk te maken.

Als voorbeeld bekijken we de letter “E” = 69 = 1000101. Bij geen pariteit wordt standaard een “0” toegevoegd aan de ASCII code, zodat de “E” wordt gecodeerd als 10001010.

Bij oneven pariteit wordt gekeken naar het aantal enen in de code. Is dit aantal oneven, dan wordt een “0” toegevoegd om het aantal enen oneven te houden en is het aantal even, dan wordt een “1” toegevoegd om het aantal enen oneven te maken. De letter “E” wordt bij oneven pariteit dus gecodeerd als 10001010.

Bij even pariteit wordt gekeken naar het aantal enen in de code. Is dit aantal even, dan wordt een “0” toegevoegd om het aantal enen even te houden en is het aantal oneven, dan wordt een “1” toegevoegd om het aantal enen even te maken. De letter “E” wordt bij even pariteit dus gecodeerd als 10001011.

Opdracht: Codeer het woord "montessori" met even pariteit. Laat je buurman jou woord decoderen en kijk of het klopt.

Wanneer bij even pariteit toch een byte wordt ontvangen met een oneven aantal bits, dan weet de ontvangende partij dat er een fout is opgetreden.

Om aan te geven dat een boodschap goed is ontvangen kan door de ontvangende partij gebruik gemaakt worden van de code:

06 = 0000110 = ACK (ACKnowledge = bevestig)

en om aan te geven dat een boodschap niet goed is ontvangen kan gebruik gemaakt worden van de code:

21 = 0010101 = NAK (Negative AcKnowledge = ontkenning) Bij communicatie tussen computers dient altijd bekend te zijn op welke manier de gegevens (data) uitgewisseld worden. Zo een afspraak heet ook wel een protocol.

Unicode

Vanaf 1991 werd er gewerkt aan een universele karaktercodering waarbij alle karakters, die er op de wereld worden gebruikt, in één tabel zijn opgenomen. Deze code wordt ook wel Unicode genoemd. Vanaf 1991 (Unicode 1.0) is Unicode uitgebreid met allerlei alfabetten, tekens en symbolen.

De meest recente versie van Unicode is een 32-bits codering, hetgeen betekent dat er ruimte is voor 232 = 4294967296 verschillende karakters. Dat is ook wel nodig, want alleen al de Chinese taal kent duizenden karakters.

Les 5: Digitalisering van beeld

overnemen van wiki

Digitaal beeld

Een beeldscherm, digitale foto of beeldbestand bestaat uit een aantal beeldpunten. Elk beeldpunt (pixel = picture element) van je beeldscherm kan een aantal, bijvoorbeeld 256 verschillende kleuren aannemen. Deze instellingen bepalen de hoeveelheid informatie die nodig is om een beeld weer te geven. We kijken eerst naar het beeldscherm van de computer.

OPDRACHT Een voorbeeld. Stel dat je een oud beeldscherm hebt dat uit 800 x 600 pixels bestaat. Dat betekent dat je beeldscherm 800 pixels breed is en 600 hoog. We noemen dit ook wel de (scherm)resolutie. Voor elk pixel zijn 2 kleuren mogelijk: zwart en wit
Hoeveel bits zijn er nodig voor om aan elke pixel van het beeldscherm van 800 x 600 pixels een kleur te koppelen? En reken dit nu om naar mega bytes

Ook digitale foto’s of plaatjes bestaan uit een aantal pixels. We bekijken eerst een eenvoudige tekening.

OPDRACHT Download en installeer het programma Gimp. Zie: https://www.gimp.org/ Gimp is een open source alternatief voor Adobe Photoshop. Je kunt er dus mee tekenen. - Open Gimp en kies§ voor File -> New. - Maak het venster 400 x 300 pixels groot.
Teken een kruiwagen als in de figuur hieronder.

Sla de tekening achtereenvolgens op als: - kruiwagen1, bitmap (heb je ook verschillende opties voor) - kruiwagen2, een JPEG bestand - kruiwagen3, een GIF-bestand - kruiwagen4, een PNG-bestand
Onderzoek van elk bestand hoe groot het is geworden.

Bitmap bestanden

ls we de kruiwagen van de vorige opdracht opslaan krijgen we allereerst allerlei mogelijkheden om het plaatje als bitmap op te slaan. Een bitmap is een bestandsformaat voor plaatjes waarin elke pixel apart wordt opgeslagen. Bitmap bestanden krijgen de extensie “.bmp”.

Het plaatje van 400 x 300 pixels heeft in totaal 120 000 pixels.

monochrome bitmap Als de 120 000 pixels worden opgeslagen als monochrome (zwart-wit) bitmap is voor elk pixel slechts één bit nodig om de kleur te onthouden ( vb 0 = wit, 1 = zwart ). Er ontstaat een bitmap bestand van 120 000 bits = 15 000 bytes = 15 kB

16-kleuren bitmap Als de 120 000 pixels worden opgeslagen als 16 kleuren bitmap zijn voor elk pixel vier bits nodig om de kleur te onthouden ( vb 0 = wit, 1= …… , 15 = zwart ). Er ontstaat een bitmap bestand van 120 000 x 4 bits = 480 000 bits = 60 000 bytes = 60 kB

256-kleuren bitmap Als de 120 000 pixels worden opgeslagen als 256 kleuren bitmap zijn voor elk pixel acht bits nodig om de kleur te onthouden ( vb 0 = wit, 1= …… , 255 = zwart ). Er ontstaat een bitmap bestand van 120 000 x 8 bits = 960 000 bits = 120 000 bytes = 120 kB

24-bits bitmap Als de 120 000 pixels worden opgeslagen als 24 bits bitmap zijn voor elk pixel vierentwintig bits nodig om de kleur te onthouden. Er ontstaat een bitmap bestand van 120 000 x 24 bits = 2 880 000 bits = 360 000 bytes = 360 kB

In een bitmap bestand wordt kleurinformatie op een duidelijke manier opgeslagen maar niet op de slimst mogelijke manier. Je ziet dat een eenvoudig plaatje van een kruiwagen, opgeslagen als 24-bits bitmap, al 360 kB groot wordt.

OPDRACHT Zoek eens uit met wat voor resolutie jou smartphone foto's maakt. Hoe groot zou een foto zijn als je je foto's zou opslaan als 24 bits bitmap (bmp) bestand?

Vooral bij grotere bestanden, bijvoorbeeld bij een digitale foto van 5 miljoen pixels die in ware kleuren (16 miljoen kleuren) moet worden opgeslagen, is het belangrijk dat de kleurinformatie op een slimme manier wordt opgeslagen.

Door de kleurinformatie op een slimme manier en niet pixel voor pixel op te slaan kan de bestandsgrootte worden verkleind. Het verkleinen van bestanden door het gebruik van een slimme techniek noemen we compressie.

Run Length Encoding Een eenvoudige manier om data te comprimeren is de run length encoding. Run-length encoding, kortweg RLE, is het vervangen van herhalende patronen in data door het aantal herhalingen plus wat herhaald moest worden. Zie figuur hieronder:

Je ziet dat de figuren zich herhalen. Je zou deze informatie dus ook zo kunnen beschrijven en opslaan:

Nog een voorbeeld:

LET OP: Je begint eerst per rij met het aantal witte pixels. VAndaar dat je in rij 4 eerst 0 ziet.

OPDRACHT Teken de bijbehorende plaatjes

Drie bestandsformaten waarmee beeldbestanden (plaatjes, foto’s) verkleind kunnen worden zijn het JPEG-bestandsformaat,het GIF-bestandsformaat en PNG.

JPEG bestanden

JPEG (Joint Graphics Experts Group) is een bestandsformaat voor afbeeldingen met veel kleuren en weinig scherpe kleurovergangen. JPEG is een bestandsformaat dat dus erg geschikt is voor digitale foto’s. JPEG bestanden krijgen als extensie “.jpg”.

Hoe werkt JPEG-compressie?

Een digitale foto met echte kleuren (16,7 miljoen kleuren) heeft in principe voor iedere pixel 24 bits nodig om de kleur te onthouden.

JPEG verdeelt de foto in blokken van 8 bij 8 pixels en neemt het gemiddelde van de kleuren van deze 64 pixels. Het bewaart dit gemiddelde als de waarde voor de pixel linksboven in het blok. Daarvoor zijn 24 bits nodig.

Van de kleuren van de andere 63 pixels uit het blok wordt vervolgens het kleurverschil met de eerste pixel opgeslagen. Daarbij krijgen zoveel mogelijk pixels dezelfde kleur. Er hoeven voor de resterende 63 pixels niet meer zoveel bits gebruikt te worden, omdat het kleurverschil tussen een pixel in het blok en het gemiddelde niet zo groot is.

Is het kleurverschil tussen bij elkaar liggende pixels toch groot, dan zorgt de bovenstaande procedure ervoor dat de kleuren uitgesmeerd worden.

Detail van de toren rechtsboven waarop het uitsmeereffect te zien is. Bij JPEG-compressie gaat dus kleurinformatie verloren maar er wordt geheugen gewonnen.

GIF bestanden

GIF (Graphics Interchange Format) is een bestandsformaat voor afbeeldingen met weinig kleuren en scherpe kleurovergangen. GIF is een bestandsformaat dat dus erg geschikt is voor animatieafbeeldingen met vlakken van gelijke kleur, zoals bijvoorbeeld afbeeldingen van stripfiguren. GIF-bestanden krijgen als extensie “.gif”.

Hoe werkt GIF-compressie?

GIF-compressie wordt ook wel LZW-compressie genoemd naar de wiskundigen Lempel, Ziv en Welch, die de techniek verzonnen hebben. Bij GIF-compressie wordt een afbeelding gezien als een aantal horizontale lijnen van pixels. Vanaf linksboven wordt van de afbeelding steeds alleen de kleur en het aantal pixels dat die kleur moet krijgen opgeslagen.

De eerste twee lijnen van het eerste plaatje van de strip hierboven bestaan uit 100 groene pixels. Er hoeft voor die eerste lijnen dus slechts te worden opgeslagen “groen, 100”.

Bovendien is bij afbeeldingen, die geschikt zijn voor GIF-compressie, het aantal kleuren beperkt (vaak 256 kleuren) en hoeven er dus slechts 8 bits te worden gebruikt per kleur.

Colors: 256

File size: 6.00 KB

Colors: 128

File size: 5.24 KB

Colors: 64

File size: 4.48 KB

Colors: 16

File size: 2.11

PNG

Als alternatief voor GIF bestanden zijn sinds 1995 PNG (Portable Network Graphics) bestanden in het leven geroepen. In een PNG-bestand kan voor elke pixel niet alleen een rood-, groen- en blauwwaarde worden opgegeven, maar ook een transparantie (alpha-waarde). Het gevolg hiervan is dat elke pixel een bepaalde hoeveelheid transparantie kan hebben, bijvoorbeeld helemaal doorzichtig of gedeeltelijk doorzichtig met bijvoorbeeld wat donker rood eroverheen.

Vector-geörienteerd

Tekeningen worden meestal opgeslagen als bitmap: de kleur van elk pixel wordt opgeslagen.

Een tekening kan ook op een andere manier worden opgeslagen: vector-geörienteerd.

Als je bijvoorbeeld een cirkel tekent dan bewaart het programma in dit geval niet het bitpatroon, maar een reeks getallen die de tekening vastleggen : een getal voor het type tekening (een cirkel in dit geval), de straal, de lijndikte, de kleur van de lijn, de kleur van de vulling, en de coördinaten van het middelpunt.

Powerpoint werkt bijv. vector-geörienteerd.

Les 6: Digitalisering van geluid

Geluid bestaat uit golven. Dit geldt niet alleen voor tonen en muziek, maar ook voor gesproken taal. Hieronder zie je het golfpatroon van een paar woorden spraak, uitgesproken door een persoon en digitaal opgenomen.

Het geluidsfragment ziet er niet bepaald uit als een golf, maar eerder als een serie sprieten. Wanneer je een stukje van een duizendste seconde uitvergroot, wordt het golfpatroon duidelijker, als de rode lijn in het plaatje hieronder.

Geluid kan gedigitaliseerd worden door een groot aantal keren per seconde de hoogte van de golf (de amplitude) te meten. In het plaatje hieronder is dat weergegeven door de paarse balken. Om een goede digitale opname te krijgen, moet je dit duizenden keren per seconde doen. Dit heet sampling. Alle digitale geluidsformaten passen dit toe in een of andere vorm. Deze techniek voor het digitaliseren van geluid is niet uniek voor computers. Het wordt ook toegepast in muziek-CD's.

Zonder compressie is een minuut geluid een kleine 10MB. Daarom past er op een muziek-cd maar hooguit 80 minuten muziek.

Sample rate

Hoe vaak er snapshots worden genomen van de audio, drukken we uit in “Sample Rate”. Hoe hoger het aantal snapshots dat wordt genomen, hoe gedetailleerder het resultaat. In de wereld van digitale audio recording zijn/waren 44.1kHz en 48kHz de meest voorkomende Sample Rates. “Maar waar staat 44.1kHz nou precies voor?”, hoor ik je denken!

44.1kHz staat voor 44.100 “snapshots” die worden genomen per seconde. Bij 48kHz zijn dat dus 48.000 “snapshots” per seconde. Vandaag de dag kom je geluidskaarten tegen die recordings ondersteunen van maar liefst 96kHz of zelfs 192kHz. Dat zijn dus respectievelijk 96.000 en 192.000 “snapshots” per seconde.

Bit Depth

Waar Sample Rate verticale “snapshots” maakt, is Bit Depth gebaseerd op de resolutie(scherpte van de vertaling). Simpel gezegd; hoe hoger de Bit Depth van de “digitale vertaling”, hoe scherper het “vertaalde” resultaat is. Het resultaat is bij een hogere Bit Depth een mooie vloeiende golfvorm. Je kunt dus wel 44.100 “snapshots” maken met de Sample Rate, maar als de resolutie (Bit Depth) niet scherp genoeg is, is het resultaat nog steeds geen vloeiende golfvorm. Voor CD’s gebruik je 16Bit en voor DVD’s gebruik je 24Bit.

Sample rate en Bit depth

Je kunt het volgende onthouden om Sample Rate en Bit Depth uit elkaar te houden:

Sample Rate (kHz) geeft het aantal snapshots aan per seconde, en Bit Depth (bit) geeft aan hoe scherp (resolutie) deze snapshots uiteindelijk worden.

Opdracht
Stel dat je een muziekbestand hebt met 10 minuten muziek. De sample rate is 44.1 kHz en de bit depth is 24 bits. Hoe groot is het bestand dan (in megabytes)?

Compressie

Met compressie worden geluidsbestanden veel kleiner. Het bekendste gecomprimeerde geluidsformaat is MP3, wat staat voor MPEG-1 Layer 3, eigenlijk het geluidsspoor van een video-opname. In MP3 zie je dezelfde trucs als bij het comprimeren van beeld, zoals het slim opslaan van herhalingen. Ook de toonhoogte is beperkt, heel hoge tonen worden in MP3 niet opgenomen. De compressie is daardoor lossy, niet verliesloos.

Andere bekende geluidsformaten zijn wave (.wav) audio (.au) en midi. Verschillen tussen de formaten betreffen het aantal keren per seconde dat de hoogte van de golf gemeten wordt en de eventuele compressie die wordt toegepast.

Opdracht; Audacity

Zoek naar een mp3-bestand van je favoriete nummer.
Download en installeer Audacity op je laptop
Open Audacity en beluister enkele van de geluidsbestanden.
Je kunt een aantal geluidseffecten op geluiden toepassen. Deze staan in het menu 'Effect'. Je kunt ze gebruiken door eerst een deel van het geluid te selecteren en daarna het effect te kiezen. Een selectie maak je door de cursor linksboven te selecteren en daarna op de bekende manier een stuk geluid te selecteren.
Pas bijvoorbeeld een fade out toe op het laatste stuk van het geluidsbestand 'bubble'.
Converteer enkele van de geluidsbestanden van mp3 naar wav en naar aiff. Wat kun je zeggen over de omvang van deze bestanden?
Converteer een van de bestanden naar MP3, bitrate: 320 kbps Converteer vervolgens naar MP3, bitrate: 196 kbps Converteer daarna naar MP3, bitrate: 96 kbps
Welke bitrate vind je nog acceptabel klinken?

HTML-CSS

Welkom in de HTML-CSS modules! Werk hieronder de lesbrieven af volgens je planner.

HTML-CSS-0

Welkom in de HTML-CSS-0 module! Werk hieronder de lesbrieven af volgens je planner.

Les 1: HTML, de basis

Elke HTML-pagina begint met <!DOCTYPE html> Daarmee zeg je tegen je browser: Let op! Je krijgt nu HTML-code voor je kiezen. Daarna zie je een <html>-tag dat helemaal onderaan wordt afgesloten met</html>. Binnen de <html>-tag heb je een <head> en een <body> tag. In de <head>-tag kun je de titel van de pagina zetten in het de <body>-tag zet je eigenlijk alles wat je op de pagina wilt zien.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  
  </body>
</html>

Wil je tekst op je webpagina zetten, dan zet je dat dus in de body van je code. Dat betekent dus tussen <body> en de </body>

<body>
  Dit is een stukje tekst.
</body>

Je kunt ook de titel van je webpagina aanpassen. De titel is het stukje tekst dat je bovenaan je webbrowser te zien krijgt.

<head>
  <title>Welkom op mijn eerste pagina!</title>
</head>

Je kunt de inhoud van je body verder uitbreiden met allerlei leuke dingen. Laten we beginnen met het maken van een kopje. Hiervoor kunnen we de <h1>-tag gebruiken.

<body>
  <h1>Dit is een hoofdstuk</h1>
  Dit is een stukje tekst.
</body>

Naast de <h1> -tag heb je ook de <h2>, <h3>, <h4>, <h5> en <h6> tag. Hoe groter het getal, hoe kleiner de letter zullen zijn. Denk er wel om dat je de tags weer netjes aflsluit.

<body>
  <h3>Dit is een groot</h3>  
  <h2>Dit is nog groter</h2>
  <h1>Dit is het grootst</h1>
</body>

Je kunt ook alinea's aanmaken. Dat doe je met de <p>-tag.

<body>
  <h1>Hoofdstuk 1</h1>
  <p>Dit is een alinea</p>
</body>

Opdrachten

[1] Installeer Atom, maak een map en daarin je eerste webpagina. Noem het bestand index.html. Zie hier de installatie video

[2] Verander de titel van je website naar "Een pagina over mijzelf". Denk erom dat je deze tekst tussen <title> en </title> dus gaat aanpassen.

[3] Maak nu drie <H1>-tags aan op je pagina. Noem de eerste "Over mijzelf", de tweede "Hobbies" en de derde "Contact". Dit moet er zo uit komen te zien:

Over mijzelf Hobbies Contact

[4] Zet onder elke <h1>-tags een paragraaf waarin je iets zinnigs verteld over jezelf. Je hobbies en over je contactgegevens. Je hoeft niet zoveel te schrijven hoor. Een regel per kopje is meer dan genoeg. Zie hieronder een voorbeeld:

Over mijzelf
Ik ben jan en ben 12 jaar oud. Ik woon in Amsterdam

Hobbies
Ik zit op voetbal en houd van minecraf

CONTACT
Je kunt mij bereiken op jan@jan.nl

Belangrijk! Gebruik altijd je school e-mail adres of iets dergelijk. Zet niet je telefoonnummer of adres op internet.

Heb je het af? Cool! Je bent dan klaar met deze leskaart. Je kunt met de volgende leskaart aan de slag kan gaan. We gaan de pagina met de komende leskaarten opleuken met foto's, linkjes en nog veel meer!

Les 2: HTML, meer over body, plaatjes en links

Sommige woorden zijn belangrijker dan anderen in een tekst. Om dit aan te geven kun je ervoor kiezen om je tekst dikgedrukt te laten zien. Dit doe je met de <Strong>-tag rondom het woord of de woorden die je dikgedrukt wilt. Hiernaast zie je hier een voorbeeld van. Als je wilt dat je tekst op een nieuwe regel verder gaat, gebruik je de <br>-tag. Deze is een beetje raar omdat hij alleen maar een close-tag is.

<html>
    <h1>Over mij:</h1>
    <p>Hallo mijn naam is <strong>Laura.</strong><br>
     Ik hou heel erg van <strong>programmeren en gamen.</strong><br>
     Deze website is een voorbeeld voor de coderdojo. Hoe        
     cool is het om je eigen website te kunnen programmeren!    
     :)
    </p>
</html>

Tot nu toe zijn we eigenlijk alleen maar bezig geweest met de tekst op onze website. Maar er zijn nog genoeg andere leuke dingen om op je website te zetten, bijvoorbeeld plaatjes! Voor plaatjes gebruik je de <img> -tag, maar je moet deze tag nog wat extra informatie meegeven over het plaatje wat je wilt gebruiken.

Voor een plaatje vanaf je eigen computer gebruik je <img src="LOCATIE PLAATJE">
Bijvoorbeeld <img src="Laura/Afbeeldingen/laura.jpg">

Je kunt ook een  plaatje van het internet gebruiken. Achter src=” zet je dan de website link naar het plaatje.
Bijv.: <img src="http://www.gscdn.org/library/cms/11/12611.JPG">

Het is ook leuk om op je website naar andere pagina’s of websites te kunnen verwijzen. Hiervoor heb je link’s nodig, dit doe je met de <a>-tag. Net als bij plaatjes heeft de <a>-tag meer informatie nodig. Net zoals je bij een plaatje een link moet zetten moet je dat hier ook doen. In plaats van src gebruik je href en daarachter zet je de link van de pagina waarnaar je wilt verwijzen. Zoals hiernaast te zien is. Bij de -tag hadden we niets tussen de open- en sluit-tag in gezet. Bij de <img>-link doen we dat wel. De tekst waarop je kunt klikken om naar de link te gaan zet je tussen deze tags.

<a href="http://www.google.nl">Klik hier om naar Google te gaan.</a>

Opdrachten

[1] Kijk eens terug naar de teksten die je hebt geschreven bij de vorige leskaart. Zijn daar woorden tussen die je belangrijker vindt dan de rest van de woorden? Maak deze dan dik gedrukt zodat ze goed opvallen. Probeer tenminste 3 dikgedrukte woorden op je pagina te hebben.

[2] Het is leuk om onder het kopje “over mij” een foto van jezelf toe te voegen. Als je die niet hebt kun je ook een leuk plaatje van iets anders zoeken op internet. Extra: Misschien vind je je plaatje wel wat te groot of te klein. Het formaat van het plaatje kun je aanpassen binnen de tag. Om te weten hoe je dit kunt doen kun je eens een kijkje nemen op de volgende website: https://www.w3schools.com/tags/tag_img.asp als je er niet uitkomt, vraag het dan gerust aan de begeleiders!

[3] Maak een kopje aan met “leuke linkjes” en daaronder een korte paragraaf met linkjes die je leuk vindt. Kijk terug op wat je bij leskaart 1 hebt geleerd als je niet meer zo goed weet hoe kopjes en paragrafen werken. Extra: Met de <a>-tag kun je nog meer dan alleen maar een link openen in het bestaande scherm. Je kunt bijvoorbeeld ook een nieuw tabblad openen waarin de pagina uit het linkje komt te staan. Om te weten hoe je dit moet doen kun je kijken naar de volgende website: https://www.w3schools.com/tags/att_a_target.asp

Ben je klaar? Tof! Je site ziet er nu al een stuk leuker uit dan eerst. Laat aan een van de begeleiders zien hoe je site eruit ziet.

Les 3: HTML, lijsten

Soms maken we gebruik van korte opsommingen of lijstjes. Bijvoorbeeld de volgende lijstjes: Dingen die ik leuk vind:

Gamen
Programmeren
Lego

Maar ook het volgende lijstje:

Top 3 favoriete films:

The Lion King
Toy Story
Bambi

Dit kunnen we ook in HTML doen! Hiernaast zie je de hele code, geen paniek als je hem nog niet helemaal begrijpt. We leggen hem hierna helemaal uit.

Dingen die ik leuk vind: <br>
<ul>
   <li>Gamen</li>
   <li>Programmeren</li>
   <li>Lego</li>
</ul>
<br>
Top 3 favoriete films: <br>
<ol>
   <li>The Lion King</li>
   <li>Toy Story</li>
   <li>Bambi</li>
</ol>

Het is belangrijk om het verschil te zien tussen de beide lijstjes. Het ene lijstje heeft puntjes, dit noemen we een ongesorteerde lijst. Om een ongesorteerde lijst te maken gebruiken we de <ul>-tag. Vervolgens moet je voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ul>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
</ul>

Daarnaast zijn er lijsten die nummertjes vooraan hebben staan. Dit zijn gesorteerde lijsten, bijvoorbeeld om een top 3 aan te geven. Om een gesorteerde lijst te maken gebruiken we de <ol>-tag. Vervolgens moet je ook hierbij voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ol>
   <li>Nummer 1</li>
   <li>Nummer 2</li>
   <li>Nummer 3</li>
</ol>

Opdrachten

[1] In de website die je net hebt gemaakt vertel je al een paar dingen over jezelf. Je gaat hier nu ook een lijstje aan toevoegen. Kies een van kopjes die je eerder hebt gemaakt en voeg hier een ongesorteerd lijstje aan toe met minimaal 3 items. Je mag zelf kiezen bij welk kopje je dit lijstje zet.

[2] Nu ga je op je site ook een top 5 van je favoriete films, games of artiesten maken. Hiervoor maakt je eerst een nieuwe kopje aan zoals je hebt geleerd bij leskaart 1. Schrijf ook een korte introductieparagraaf over je top 5. Gebruik nu een gesorteerde lijst om je top 5 op je site te zetten. Een voorbeeldje zie je hiernaast: Je mag iets anders doen, als je maar gebruik maakt van een gesorteerde lijst.

[3] Vond je dit eigenlijk wel makkelijk en wil je wat ingewikkelds proberen? Dan hebben wij een uitdaging voor je! Kun je een lijst in een lijst maken? Tip: je hebt nu tags in tags nodig. Probeer maar eens wat en als je er niet uitkomt vraag het dan aan de begeleiders.

Les 4: HTML, tabellen

Je kunt ook tabellen maken met HTML. Zoals je weet bestaat een tabel uit rijen en kolommen. Een tabel maak je met de <table>-tag. Voor elke rij die je in de tabel wil, zet je een <tr>-tag tussen de <table>-tag. En per kolom zet je een <td>-tag in de . Vergeet de <tr> en <td>-tags niet af te sluiten.

<h1>Topscorers Nederlands elftal</h1>
  <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
  </table>

We gaan de tabel uitbreiden met nog een rij. Denk erom dat de nieuwe rij ook weer twee kolommen moet hebben.

 <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
    <tr>
      <td>Van Persie</td>
      <td>96</td>    
    </tr>
  </table>

Cool hé? Je mag natuurlijk meer rijen en kolommen maken, maar er is één belangrijke voorwaarde: Het aantal kolommen per rij moet voor iedere rij gelijk zijn!

Als we een tabel willen hebben met lijntjes, dan kunnen we in de table-tag een border opgeven van bijvoorbeeld 1 pixel.

table border="1px">
  ..
</table>

Probeer het uit in je 'eigen' site...

Meestal zet je in de eerste rij van je tabel de titel van een kolom. Die wil je dan ook dikgedrukt maken. Dat gaat automatisch als je in de eerste rij de <th>-tag gebruikt, i.p.v. de <td> -tag.

<table>
    <tr>
      <th>Naam</th>
      <th>Aantal doelpunten</th>    
    </tr>
</table>

Je mag naast tekst ook plaatjes of linkjes in een tabel zetten. Dat doe je door ze in de <td>-tag te plaatsen.

<tr>
  <td><a href="http://www.google.com">Google</a></td>    
  <td><img src="plaatje.jpg"></td>
</tr>

Opdrachten

[1] Maak een nieuwe alinea onderaan je webpagina. Zet er een kopje boven met de tekst Top 5 beste sporters.

[2] Maak nu een tabel met zes rijen en drie kolommen. Zet daarin jouw top 5 van de beste sporters.

[3] Pas de tabel nu zo aan, dat je kan klikken op de naam van de sporter. Als je er op klikt, dan kom je op een Wikipedia-pagina waar je wat meer informatie kan vinden over de desbetreffende speler.

[4] Maak nu een vierde kolom per rij. In deze vierde kolom zet je een kleine foto van de speler in de tabel. Je kunt met Google zoeken naar kleine foto's door de Zoekhulpmiddelen te gebruiken. Kies bij de grootte voor Gemiddeld (zie pijltje hieronder).

Je zou ook het formaat van een grote foto kunnen verkleinen. Daarvoor stel je of de breedte of de hoogte van een <img>-tag in. Dat ziet er dan bijvoorbeeld zo uit:

<img width="200px" src="jouwplaatje.jpg">

Les 5: CSS, background-color, color

Je hebt nu een HTML-pagina gemaakt. Deze ziet er alleen nog best wel kaal en saai uit. Daar gaan we verandering in brengen met CSS! Dat staat voor Cascading Style Sheets. Met CSS kun je het uiterlijk van je webpagina bepalen. Je kunt dus zeggen dat je 's een rode achtergrond moet hebben met groene tekst. Je kunt bijvoorbeeld je plaatjes een randje geven. Je kunt je tabellen inkleuren en nog veel en veel mee

We gaan nu de CSS style direct in een pagina verwerken om mee te oefenen.

Als je meerdere pagina's gaat maken in je website is het beter om de CSS in een apart bestand te zetten. Dit staat aan het einde van de lesbrief uitgelegd.

In je pagina zet je de CSS style tussen de <style> en <style> tags in de header van je html bestand:

<html>
  <head>
    <style>
      /* Hier komt je style terecht.*/
    </style>
  </head>

Zullen we eerst een achtergrondkleurtje instellen voor de pagina? Dan moeten we body selecteren. Tussen de { en de } komen alle stijlkenmerken van de body. Alles wat je voor de body wilt instellen zet je tussen die accolades. We gaan de achtergrondkleur instellen met background-color.

<html>
  <head>
    <style>
      body {
        background-color: red;
      }
    </style>
  </head>

En voor de kleur van de tekst gebruiken we color. Zet hem er maar bij! (Wel weer in de body en tussen de accolades zetten!)

body {
  background-color: red;
  color: green; /* Tekstkleur is groen*/
}

Kun je ook iets anders dan de body opmaken? Ja natuurlijk! Je kunt elke tag opmaken die je in je HTML hebt gezet! Dus <p>, <table>, <td>, <tr>, <img> . Denk er wel om dat ze dan OOK in je HTML moeten staan!

p {
  color: blue;
  background-color: yellow;
}

In totaal ziet het er dus zo uit:

<style>
  body {
    background-color: red;
    color: green; /* Tekstkleur is groen*/
  }

  p {
    color: blue;
    background-color: yellow;
  }
</style>

Maak je meerdere pagina's? Gebruik dan een extern stylesheet.

Maak een bestand in dezelfde map als index.html
Noem het: style.css
Zet daar alles wat tussen de <style>-tags staat in
Zet er een link naartoe in je HTML-pagina: <html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Sla beide bestand op en test het.

Opdrachten

[1] Bepaal een mooie kleur, achtergrondkleur en lettertype voor alle <h1>-tags op je pagina.

[2] Doe hetzelfde voor de body

[3] Kleur je tabel nu in door de <td> en de <tr>-tags een andere achtergrondkleur te geven.

[4] Je kunt je tabel ook een veel mooiere rand geven. Dat doe je natuurlijk ook in CSS. Lees op de volgende internetpagina hoe dat moet: https://www.w3schools.com/css/css_table.asp. Verras ons dan met een mooie rand voor je tabel.

[5] De CSS-code die we je in deze leskaart hebben geleerd is maar een kleine fractie van alle mogelijkheden die er zijn. Ga naar de w3schools-pagina waar je nog veel meer mogelijkheden kunt ontdekken om je pagina mee op te leuken. Klik op de volgende link: http://www.w3schools.com/css/default.asp

Les 6: HTML, iframes, Youtube of maps invoegen

Vaak wil je een deel van een andere pagina in jouw eigen pagina opnemen. Denk bijvoorbeeld aan een Youtube filmpje, of een interactieve Google maps kaart. Dit heet 'insluiten' of 'embedding'. Veel pagina's hebben hiervoor functies ingebouwd.

Zie de voorbeelden van youtube.

Je klikt eerst op 'Share' of 'Delen'. Daarna kies je 'Embed' of 'Insluiten'.

Je krijgt nu een schermpje waarin een stuk html-code staat die begint met:

<iframe … Zorg dat je de hele regel kopieert. Dus helemaal tot en met de afsluitende </iframe>-tag.

Dus bijvoorbeeld: <iframe width="560" height="315" src="https://www.youtube.com/embed/rYFjIx0OBAI" frameborder="0" allowfullscreen></iframe>

Zet de regel code in je pagina en je bent klaar!

Bij Google maps gaat het op soortgelijke manier.

Je zoekt een plek op waarvan je de interactieve kaart wilt hebben.

Dan klik je op 'Delen'. Kies vervolgens 'Kaart insluiten' en neem de regel code over die begint met <iframe …

De grootte kun je weer aanpassen door width en height te veranderen in de regel code.

Je kunt met het <iframe> element ook andere webpagina's invoegen. Let wel op want sommige pagina's laten dit niet toe.

Opdrachten

[1] Voeg een favoriete video in in je pagina met behulp van een iframe

[2] Voeg een interactieve kaart in in je pagina van de plek waar je school staat

[3] Probeer een andere pagina in te voegen. Kijk voor meer hulp: https://www.w3schools.com/tags/tag_iframe.asp

HTML-CSS-1

Welkom in de HTML-CSS-1 module! Werk hieronder de lesbrieven af volgens je planner.

Let op: Bij deze module zitten opdrachten die je moet gaan maken in repl.it. Maak een account aan en join deze classroom.

Les 1: CSS koppelen aan je HTML-pagina

Met Cascading Style Sheets (CSS) kun je de opmaak van je webpagina veranderen. Wij leren je een extern stylesheet te gebruiken.

Je gebruikt een apart bestand voor je CSS.

<html>
  <head>
    <title>Mijn pagina</title>
    <link rel="stylesheet" href="style/opmaak.css" type="text/css">
  </head>
...

Let duidelijk op de naam van je bestand en het valt je wellicht op dat deze in een andere folder zit dat je basis html bestand!

In je CSS-bestand maak je stijlregels.

Je selecteert welk HTML-element wilt wijzigen. Daarna tussen geef je tussen { en } aan wat je wilt veranderen. Dit doe je met eigenschap: waarde; tweetallen.

In je CSS bestand ziet het er uit

body {
  background-color: red;
}

Je kunt ieder HTML-element selecteren met de selector.

En je kunt meerdere eigenschappen tegelijk veranderen.

p {
  text-align: right;
}

h1 {
  text-align: center;
  color: green;
  background-color: lightblue;
}

Opdrachten

Maak een extern css bestand aan
1. Ga naar je HTML-CSS map
2. Maak een nieuwe map Style
3. Maak in de map sylte een nieuw bestand
4. Noem het bestaat: opmaak.css
Zet de regel met <link ...> in de <head> van je index.html bestand <head> <title>Mijn pagina</title> <link rel = "stylesheet" href="style/opmaak.css"> </head>
Zet de code hieronder in je opmaak.css. body { background-color: red; } Sla je bestanden op en kijk of het ewrkt in je browser! Als het goed is, is de achtergrondkleur van je webpagina nu rood.
Breid je css: 1. Voeg <h1>, <h2> en <p> elementen toe aan je index.html bestand 2. Zet de stijlregels zoals hieronder in je opmaak.css bestand. 3. Sla alles op en test of het werk body { background-color: green; } h1 { text-align: right; } h2 { text-align: center; } p { text-align: justify; }

Les 2: Fonts, lettergrootte en stijl

Er zijn drie soorten lettertypes die je gebruikt

Met schreef: sierlijke letters, mooi als kopje of als header. Dit lettertype lees op papier het lekkerst, niet op het scherm.
Zonder schreef: strakke letters, lezen het lekkerste op het scherm. Prima voor tekst.
Monospace: voor letters die allemaal even groot zijn, Een i neemt evenveel ruimte in als een m, dit is wel eens handig als je wat wilt uitlijnen of benadrukken.

Voorbeelden: Dit is schreef Dit is schreefloos Dit is monospace

h1 {
  /* Met schreef */
  font-family: Georgia;
} 

p {
  /* Zonder schreef */
  font-family: Verdana;
} 

h2 {
  /* Monospace */
  font-family: Courier;
}

Je kunt ook meerdere lettertypes in één keer instellen.

De browser probeert eerst Verdana te vinden. Als dat niet bestaat dan probeert hij Geneva te vinden enzovoort.

Niet op ieder besturingssysteem bestaan dezelfde lettertypes.

h3 {
  /* Dit is commentaar in CSS! */
  /* h3 krijgt een schreefloos lettertype */
  font-family: Verdana, Geneva, Arial, sans-serif;
}

Cascading Style Sheet betekent dat een stijl ook toegepast wordt op 'kinderelementen'.

Hiernaast zie je een <h1>-element in de <body> staan. <h1> is dan een kind van <body> en krijgt (erft) dezelfde stijl.

Het <p>-element erft ook de stijl van de <body>.

<body>
  <h1>Dit is een hoofdstuk</h1>
  <p>Met een mooie inhoud</p>
</body>

Je kunt <h1> een ander font geven door dat in je CSS aan te geven.

Het <h1>-element heeft een ander lettertype dan de <body>. Je ziet namelijk dat er een ander font is aangegeven. Het <p>-element heeft nog steeds hetzelfde lettertype als de <body>; Er is in de CSS geen ander lettertype gekozen.

body {
  font-family: Verdana, Geneva, Arial, sans-serif;
} 

h1 {
  text-align: center;
  font-family: Georgia, "Times new Roman", serif;
}

p {
  text-align: right;
}

Font-size (lettergrootte)

In CSS kun je groottes op verschillende manieren aangeven. Hiernaast zie je lettergrootte in pixels.

p {
  font-size: 12px; /* 12 pixels hoog*/
}

Font-style (italic, oblique)

Italic om tekst schuin te laten zien. Wil je niet meer schuin, gebruik je normal.

h1 {
  font-style: italic;
}

Font-variant (kleinkapitaal: small-caps)

Gebruik hoofdletters, maar dan klein weergegeven.

p {
  font-variant: small-caps;
}

Font-weight (bold, normal)

Dikgedrukte tekst, of juist niet dikgedrukt.

h1 {
  font-weight: normal;
}

Opdracht

[1] Ga verder met het bestand uit de vorige leskaart. Pas bovenstaande font-opties toe op elementen in je pagina. Probeer ze allemaal uit op verschillende HTML-elementen.

[2] Maak de opdracht op repl.it.

Les 3: Kleuren en achtergrondplaatje

Kleuren kun je op meerdere manieren aangeven

Er zijn ingebouwde kleuren zoals red, green, blue en veel meer Kijk voor meer kleurnamen hier: w3schools kleuren
Je kunt de RGB waarde van een kleur opgeven. (We leggen RGB zo uit).
- rgb(0, 51, 153)
- rgb(0%, 25%, 71%)
- #00AF32 of #A02 (dit is #AA0022)

body {
  color: darkblue;  /* color  verandert de tekstkleur*/
  background-color: lightgrey;
} 

p, h1, h2 { /* gebruik deze stijl voor p, h1 en h2 tegelijk*/
  color: rgb(0, 51, 153);
  background-color: #00FA32;
}

RGB staat voor Red Green Blue

Je geeft steeds aan hoeveel rood, groen en blauw je wilt. De kleur is dan de mix die jij aangeeft.

In #00AF32 zie je ook letters. Je gebruikt dan hexadecimale getallen. De volgorde daarvan is: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Als je goed telt zijn er dus 16 waardes mogelijk.

0 betekent niets van de kleur en F juist zo veel mogelijk.

rgb(0, 51, 200) Getallen van 0 t/m 255; 0 is niets, 255 maximaal Mix hier geen rood, beetje groen en veel blauw #00AF32 Gebruik twee karakters per kleur geen rood (00), veel groen (AF) en beetje blauw (32) Kijk voor meer kleurcodes op:

Je kunt als achtergrond ook een plaatje gebruiken op je website.Je gebruikt dan de eigenschap background-image.

body {
    background-image: url("plaatje.gif");
}

Standaard zal je plaatje niet één keer getoond worden; het plaatje wordt herhaald. Dus naast elkaar en daarna ook onder elkaar. Als je dat anders wilt kan dat!

Je kan het plaatje ook op een andere plek zetten met background-position Je kunt uitlijnen met bijvoorbeeld right / left en top

body {
  background-image: url("plaatje.gif");
  background-repeat: no-repeat;
  /* Eerst rechts links, dan boven beneden */
  background-position: right top;
}

Je kunt ook een positie in pixels of in procenten weergeven.

/* positie: 50% van de breedte en 40 pixels van boven */
background-position: 50% 40px;

Je plaatje niet laten meebewegen als je scrollt:

background-attachment: fixed;  /* zie: voorbeeld */

Opdrachten

[1] Geef de elementen in je pagina verschillende kleuren. Oefen met de drie verschillende manieren om kleuren aan te geven.

[2] Voeg een achtergrondplaatje toe aan je website. Kun je ervoor zorgen dat:

Het plaatje maar één keer getoond wordt,
Niet mee scrolt met de pagina,
Op een andere plek komt?

[3] Maak de opdracht in repl.it

Les 4: Boxmodel en borders

De elementen <p>, <h1>, <body>, <ul> zijn voorbeelden van block elementen. Er zijn ook inline elementen zoals <a>, <span> etc. Later leer je het verschil tussen inline en block elementen.

Je kunt deze blockelementen in je pagina zien als een doos (een box) met een inhoud erin.

Van buiten naar binnen zie het volgende:

margin (ruimte tussen de rand en het parent element)
border (de rand om het element)
padding (de ruimte tussen de inhoud en de rand)
de inhoud zelf

Bij blockelementen kun je de inhoud een hoogte en breedte geven. Voor één element is het boxmodel simpel genoeg. In een website heb je natuurlijk veel elementen die ook nog in elkaar zitten. Dus het kan behoorlijk complex worden! Ouder- en kindelementen (parent en child) horen bij elkaar. In de code hiernaast zie je:

<html> <- parent van <body> <head> <- child van <html> <body> <- parent van <ul>, child van <html> <ul> <- parent van <li>, child van <body> <li>

We beginnen met de randen (borders).

Een border heeft altijd 3 eigenschappen:

de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)

Je kunt ook ronde borders maken Je geeft dan de radius (straal) van de ronding op. Je doet dit voor iedere hoek apart en de volgorde is: linksboven, rechtsboven, rechtsonder, linksonder Je kunt ook in een keer alle hoeken gelijk maken.

Opdrachten

[1] Maak borders om een aantal elementen in je pagina.

[2] Experimenteer met verschillende borders! Met ronde hoeken, verschillende stijlen enzovoort.

Les 5: Margin, padding en development tools

Je website ziet er in je browser vaak niet meteen uit zoals je wilt.

Met behulp van de browser development tools kun je het boxmodel zien en welke CSS wordt gebruikt door de browser.

Je vindt de tools met:

Rechts klik op je pagina -> inpsecteren
Een sneltoets (F12 of CTRL-SHIFT-i)

In de vorige les heb je in het boxmodel gezien dat buiten de border de marge (margin) zit. Je kunt hiermee dus ruimte tussen bijvoorbeeld twee <p>-elementen maken.

Veel elementen krijgen standaard een marge van de browser (en dit verschilt per browser).

Als je in je hele pagina zonder marge wilt beginnen, dan zet je de code hiernaast bovenin je CSS bestand.

Margin hoeft niet aan elke kant hetzelfde te zijn. Je kunt margin-top, margin-bottom, margin-left of margin-right gebruiken om andere marges te krijgen. Of je geeft na margin vier waardes mee.

Je kunt margin ook in een percentage geven.

Dit is dan ten opzichte van het ouderelement (het element waar dit element in zit).

padding is de ruimte tussen de inhoud en de border (denk aan het boxmodel van vorige les)

Verder werkt padding hetzelfde als margin.

Je kunt dus padding per kant instellen met padding-top, padding-right enzovoort.

Ook kun je weer met px of % werken en in één regel padding instellen.

Opdrachten

[1] Zet bovenaan je .css bestand de volgende stijlregel:

[2] Stel nu de marges voor alle elementen in je pagina in zoals je het zou willen hebben!

[3] Stel nu ook padding in voor alle elementen in je pagina. Zorg dat het er mooi uit komt te zien!

[4] maak de opdracht in repl.it

Les 6: Elementen selecteren: classes en id's

Met classes kun je meerdere elementen selecteren uit je pagina. Zo kun je bijvoorbeeld sommige <p> elementen een andere kleur geven dan andere <p> elementen. Je doet dit door in de HTML-tag te zetten: class="naam"

Dit heet een attribute (eigenschap).

Vervolgens gebruik je in CSS de . (punt) om aan te geven dat je een class selecteert.

Je kunt dus p.rood gebruiken om alle paragrafen met class="rood" te selecteren. Je kunt ook .rood gebruiken om alle elementen met class="rood" te selecteren.

Met een id kun je één element uit je pagina selecteren. Als meerdere elementen hetzelfde id hebben, dan wordt alleen de eerste geselecteerd.

Je doet dit door in de HTML-tag te zetten: id="uitleg"

Vervolgens gebruik je in CSS de # om aan te geven dat je een class selecteert.

Je kunt nu ook beginnen met een #:

Opdrachten

[1] Maak een nieuwe html pagina en noem deze vragen.html. Neem de volgende code erin over:

[2] Voeg aan alle vragen (uit vragen.html) de class “vraag” toe en aan alle antwoorden de class “antwoord”. Voorbeeld:

[3] Selecteer de twee classes in je css.

Geef de vragen een achtergrondkleur en een letterkleur.
Geef de antwoorden dezelfde achtergrondkleur en een letterkleur!
Je kunt nu de antwoorden niet lezen tenzij je ze met de muis selecteert.

[4] De eerste paragraaf geeft uitleg over de vragen. Voeg daar een ID aan toe en geef het een mooie stijl met behulp van CSS.

Les 7: Pseudo-classes, (hyper)links en span-element

Naast classes bestaan er ook pseudo-classes in CSS. Met een pseudo-class kun je elementen selecteren in een bepaalde toestand. Bijvoorbeeld:

hover: De muis gaat over het element
active: Er wordt op het element geklikt

Voor (hyper)links <a> zijn er ook nog:

link: Er is nog niet op de link geklikt
visited: Er is wel op de link geklik

Je gebruikt de : (dubbele punt) voor pseudo-classes: element:pseudo-class

p:hover { /* Met muis over paragraaf? Verander lettergrootte.*/
  font-size: 30px;
}

p a:visited { 
  /* Is er op een link in een paragraaf geklikt? Kleur: blauw */
  color: blue;
}

a:link { 
  /* Links waar nog NIET op geklikt is hebben kleur geel*/
  color: yellow;
}

Je kunt ook een class en een pseudo-class gebruiken.

p.rood:hover { /* Met muis over paragraaf met class="rood"? 
                   Verander lettergrootte en kleur.*/
  font-size: 30px;
  color: black;
}

In HTML worden links standaard onderstreept. Je kunt dat ook uitzetten met de text-decoration eigenschap.

ul a { /* Alle links in een lijst niet onderstrepen*/
  text-decoration: none;
}

Soms wil je een stukje van een paragraaf een andere layout geven. Een manier om dit te doen is door een <span> element om je tekst te zetten. Met <span id="tekst"> kun je CSS bestand alleen dat stukje tekst selecteren.

<body>
  <h1>Dit is een header</h1>
  <p>Ik wil <span id="tekst">dit gedeelte</span> veranderen.</p>
</body>

In style.css:
#tekst { /* #tekst: selecteer alles in de span met id="tekst"*/
  font-size: 20px;
}

Opdrachten

[1] Oefen met pseudo-classes en span in je pagina.

[2] Maak de opdrachten op repl.it

Les 8: Tabellen opmaken

Een tabel maak je met de volgende elementen: <table> - Alles binnen <table> en </table> <th> - (Optioneel) kolomkop (tableheader) <tr> - Rij in de tabel (tablerow) <td> - Inhoud van de cel (tabledata)

Voorbeeld code met bijbehorende tabel:

Belangrijk: iedere rij heeft hier precies 2 cellen. Want er zijn 2 kolommen gemaakt.

Je kunt ook een cel maken die twee, drie of meer kolommen breed is. Je gebruikt dan:

<td colspan="2"> of <th colspan="2">

Je kunt ook een cel maken die twee, drie of meer rijen hoog is. Je gebruikt dan:

<td rowspan="3"> 

Je kunt de inhoud van tabellen opmaken zoals je zou verwachten. De randen van een tabel werken ook zoals met andere elementen. Als je overal randen wilt, zul je zowel <table>, <th> als <td> een border moeten geven.

Je ziet dat de randen eigenlijk dubbel getekend worden. Om de randen te laten samenvallen (collapse) gebruiken we de tabel-eigenschap: border-collapse: collapse;

Opdrachten

[1] Voeg een tabel toe aan je eigen pagina. De inhoud moet natuurlijk passen bij je eigen pagina.

[2] Zorg ervoor dat meerdere kolommen en / of rijen samengevoegd worden.

[3] Voeg borders toe en geef ze een mooie kleur.

Les 9: Lijsten opmaken (menu in je pagina)

In HTML kun je een lijst maken met <ul> (unordered / bolletjes) of <ol> (ordered / genummerd). Je gebruikt voor ieder item op de lijst <li></li>. Met CSS kun je het soort lijst veranderen dus je hoeft eigenlijk alleen <ul> te gebruiken.

We kunnen de hele lijst en de elementen apart stijlen:

Met de list-style kunnen we de soort lijst veranderen. Je geeft drie dingen mee.

position: opsomming binnen of buiten het kader (inside / outside)
type: rondje, vierkantje etc (disc, circle, square, decimal, upper-roman, lower-roman, upper-alpha, lower-alpha, none)
image: eventueel een plaatje als opsommingsteken

We gaan nu een menu maken met een lijst.

We gebruiken de eigenschap display: inline; om de <li></li> naast elkaar weer te geven. We gebruiken ook float: left; om te zorgen dat de elementen netjes links tegen elkaar aan komen te staan.

LET OP! We leggen hier niet verder uit wat float en inline precies doen. Dat komt in latere modules. Gebruik de eigenschappen verder nog niet in je pagina.

We voegen de code hieronder toe. Margin zorgt ervoor dat er geen ruimte naast het menu komt en overflow: hidden; zorgt ervoor dat de achtergrondkleur te zien is over de hele breedte. Wat we hierna gaan toevoegen zorgt voor mooier opgemaakte links in je menu. We willen namelijk:

een andere kleur
geen onderstreepte links

We zetten de kleur van links op wit en text-decoration: none; om de onderstreping weg te halen.

Merk op: Als je op een link geklikt hebt blijft de kleur nog steeds wit!

We halen nu eerst de rand weg. Verder willen we dat je

op het hele blokje van een link kunt klikken
meer ruimte om de link hebt

We gebruiken display: block; zodat je overal kunt klikken (niet alleen op tekst). Met padding zorgen we voor meer ruimte om de tekst. Als laatste willen we nog dat de kleuren veranderen als je er met je muis overheen gaat. Hiervoor gebruiken we: :hover.

Opdrachten

1] Maak zelf een mooi menu in je pagina

HTML-CSS-2

Les 1: Structuur van je Pagina

Je gaat in deze lesbrief een aantal dingen leren door een voorbeeldpagina maken. We gaan werken met HTML5 en CSS3 en we gaan eerst de structuur van je pagina neerzetten. Hou je vast :)

Als je een website ontwerpt (middels wireframes), dan is het eerste wat je doet je pagina in blokken verdelen. En dan heb je vaak de volgende blokken:

Er is vaak een header-blok. Dit is een kopregel die vaak bovenaan een webpagina staat. Hier staat vaak de titel van de site en een logo in.
Er is vaak een footer-blok. Vaak staat deze onderaan de pagina. Hier staat vaak in wie de site heeft gemaakt, met wat copyright informatie.
Er is vaak een navigatiebalk. Denk aan een knoppenbalk of een balk met linkjes. Je ziet ze vaak bovenaan de pagina of links op de pagina. Door op de knoppen of linkjes te klikken ga je naar andere pagina’s
De inhoud van je pagina. Deze inhoud gaan we straks nog eens onderverdelen.

Nog vóór HTML5 konden we deze blokken maken met <div>-tags. <div> is de afkorting voor division (=afscheiding, onderdeel, sectie). Een <div> kan zelf van alles bevatten. Zoals plaatjes, kopjes, tabellen, opsommingen, paragrafen etc. Een mogelijke indeling kan er dan als volgt uitzien:

Als je goed kijkt, dan zie je dat elke div van de andere div wordt onderscheiden middels classes en id's. Zo heb je <div id="header"> voor het kopje van de pagina. En <div id="footer"> voor de footer van de pagina. In de CSS kun je vervolgens de div's afzonderlijk opmaken. Met HTML5 echter, heb je speciale tags tot je beschikking voor dit soort standaard onderdelen:

De <div>-tag bestaat nog steeds en mag je gewoon gebruiken. Maar deze HTML5-tags maken het je wel makkelijker. Ook kunnen zoekmachines zoals Google makkelijker de inhoud van je pagina indexeren en doorzoeken!

Opdracht

Maak een nieuwe map aan op je harde schijf.

Maak vervolgens de volgende HTML-pagina. Noem hem index.html. Check uiteraard via de validator of deze aan de HTML5 standaard voldoet.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mijn nieuwe website</title>
  </head>

  <body>
    <header>
    Hier komt een plaatje met Logo
    </header>
    <nav>
    Hier komt de knoppenbalk
    </nav>
    <section>
    Hier komt de inhoud van de pagina
    </section>
    <footer>
    Hier komt een copyright en info over de maker
    </footer>
  </body>
</html>

Tip: zet die tags netjes onder elkaar zoals hierboven, je hebt dan overzicht over wat bij wat hoort en je vergeet niet zo gauw een tag af te sluiten. Tip2: Er is een wereld van een verschil tussen de <head> en de <heading>. De <head>-tag mag je nooit in de body gebruiken. De <heading>-tag mag alleen een titel en meta data bevatten. De <heading> is onderdeel van je pagina en staat in de body !

We gaan even het resultaat van deze mega vette site bekijken ☺ Test de pagina in een webbrowser en je ziet het volgende:

De elementen <header>, <footer>, <section> en <nav> zijn allemaal blokelementen. Deze blokken worden dan ook netjes onder elkaar gezet.

We kijken nu even puur naar de inhoud van een pagina. In ons geval dus de <section> tag. Een section is bedoeld voor het opsplitsen van de inhoud. In ons geval hebben we maar één section. In het geval van een krant kun je best verschillende katernen hebben. Denk bij een krantensite aan economie, politiek, sport, buitenland, binnenland enz. Meerde sections per pagina zijn dus best mogelijk. Wij houden het nog even simpel bij één sectie.

Een sectie bestaat uit verschillende artikelen. Denk bij een artikel net als in de krant als een zelfstandige eenheid.

Opdracht:

Pas de section tag aan, verwijder het woord inhoud en maak hierin ongeveer drie artikelen:

<section>
      <article>
        Hier komt het eerste artikel
      </article>
     
      <article>
        Hier komt het tweede artikel
      </article>
     
      <article>
        Hier komt het derde artikel
      </article>
    </section>

Test het in je browser. Het ziet er nog steeds niet uit. Klopt ook, we hebben nog niets aan de opmaak gedaan. Ook een article is een blokelement. Dus die worden netjes onder elkaar gezet.

Iedereen die de krant leest weet waar een artikel uit bestaat: een kopje en één of meerdere alinea’s dus uit <h1> of <h2> … enz en uit <p> Deze heb je al in les 1 gehad.

Opdracht

Vul iedere alinea met een kopje (kies bijvoorbeeld <h2> dan kan je straks <h1> gebruiken voor je titel) en alinea’s. Gebruik minstens 1 alinea, maar je mag ook meer alinea’s gebruiken. Uiteraard mag je deze kopiëren uit eerdere pagina’s en ga je dit niet opnieuw schrijven.

<article>
    <h2>Robot nieuws</h2>
    <p>
      Ons robot nieuws geeft u inzicht in de allerlaatste ontwikkelingen. Lees over robot ontwikkelingen, robotica en leuke nieuwe robots voor thuis. Er wordt steeds meer ontwikkeld op robotgebied en al sinds 2009 leest u het laatste en beste nieuws over robots hier.
    </p>
    <p>
      Robotica is een wetenschap die vooral gericht is op systeemintegratie. Een goed ontworpen robot zal zijn waarnemingen (die verkregen zijn met behulp van sensoren) op een goede manier kunnen vertalen naar handelingen die zijn actuatoren zullen uitvoeren.
    </p>
  </article>

  <article>
    <h2>Waar gaat het heen met robots?</h2>
    <p>
      De robot revolutie is begonnen, robots maaien ons gras en stofzuigen ons huis. Ze staan de chirurg bij in de operatiekamer en rijden rond op Mars. Ze vermaken onze kinderen en binnenkort zijn zelfs onze autos autonome robots. Lees hier het robotnieuws als je echt bij wilt blijven. Meld je aan voor onze nieuwsbrief!
    </p>
  </article>

Koppel een stylesheet

In de bovenstaande code staan twee artikelen afgebeeld. In het eerste artikel heb ik één kop met twee paragrafen in het tweede artikel heb ik een kop met maar één paragraaf.

Tip: doe jezelf (en anderen) een plezier en zet de en netjes onder elkaar. Je ziet dan of je vergeten bent iets af te sluiten. De headers zet ik wel op één regel.

Het resultaat ziet er nog steeds niet uit, maar het begint in ieder geval wel op een webpagina te lijken:

Vergeet niet te checken of je pagina nog steeds aan de HTML5 standaard voldoet !

We gaan nu de webpagina opmaken.

Opdracht

Koppel je pagina aan een stylesheet. Maak eerst een nieuwe stylesheet aan: ik noem de mijne opmaak.css zet deze weer in het mapje style en koppel deze aan je html pagina.

 <head>
    <meta charset="utf-8">
    <title>hoofdpagina</title>
    <link rel="stylesheet" href="style/opmaak.css">
  </head>

Margin en padding op 0px

Dit hebben we al verschillende keren gedaan. De eerste rule die ik er altijd inzet is: alle standaard margin en padding eruit. Die gaan we straks zelf opgeven. Sommige browsers hebben standaard wel een margin en/of padding andere weer niet. Hier hebben we geen zin in. * betekent alles. Dus zet als eerste rule in opmaak.css

* {
  margin: 0px;
  padding: 0px;
}

Voor de body (dat is de hele pagina) zet ik alvast een standaard lettertype erin. In mijn voorbeeld heb ik ook voor een achtergrond gekozen. Een klein plaatje laat ik van links naar rechts en van boven naar beneden herhalen:

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  background: grey url('../images/blokje.jpg') repeat;
}

Ik heb dit plaatje gebruikt als achtergrond maar je bent natuurlijk vrij om je eigen pagina achtergrond te kiezen. Een kleur als achtergrond is ook prima.

Opdracht

We gaan eens kijken naar de header. Ik heb een header plaatje gevonden van 150pixels hoog en 960 pixels breed. Je zou zelf ook een plaatje kunnen maken in een programma zoals Photoshop.

Deze ga ik als achtergrond gebruiken voor mijn header. Ik ga mijn site ook nog een titel geven.

Vervang de tekst tussen de <header> en </header> door een titel. Ik gebruik hiervoor de h1

<header>
  <h1>De toekomst van robotica</h1>
</header>

In de stylesheet gaan we de header stylen. We gebruiken hiervoor de header en de header h1. Een voorbeeld staat hieronder. Je ziet dat ik expliciet de lengte en de hoogte opgeef met width en height.

header {
  background: url('../images/headermetlogo.png');
  width: 960px;
  height: 150px;
}

header h1 {
  font-size: 300%;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
  text-align: right;
  text-shadow: 5px 5px 7px #000000;
}

De laatste optie text-shadow hebben we nog niet gehad. Deze is toch wel leuk, je kunt hiermee een schaduw bij je tekst krijgen. Eerste twee opties (beide 5px ) zijn het aantal pixels naar rechts en naar beneden van de schaduw. De derde optie (7px) is een maat voor hoe vaag of hoe scherp de schaduw moet worden. Hoe groter dit getal hoe vager de schaduw. De laatste optie is de kleur van de schaduw. (#000000 = zwart). Ik speel gewoon wat met deze getallen. Resultaat:

Het begint een beetje op een website te lijken.

Opdracht

We gaan nu een navigatiebalk maken. Hoe je dit moet doen heb je met de module HTMLCSS-1 geleerd. Ook heb je geleerd hoe je de knoppen naast elkaar kunt krijgen. Uiteraard doen we dit door een lijst te maken met linkjes.

Vervang de tekst tussen <nav> en </nav> door een lijstje met linkjes. In mijn voorbeeld laat ik de linkjes even naar een niet bestaande pagina verwijzen href=”#”. We hebben immers nog niet zoveel pagina’s. Alleen de homepage index.html (zie onderstaande code)

<nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="#">Industrie</a></li>
        <li><a href="#">Ruimtevaart</a></li>
        <li><a href="#">Geneeskunde</a></li>
      </ul>
    </nav>

We gaan maar weer stylen. Hieronder zie je een voorbeeld. Het is wat standaard kleurtjes en achtergrondjes werk. Er is één belangrijke optie: display : inline-block; hierdoor staan de knoppen naast elkaar. Uiteraard hoef je de kleurtjes en de randen niet over te nemen. Leef je uit en maak je eigen knoppen!

ul {
  background: #080808;
  padding: 10px;
}

ul li {
  background: #787878;
  padding: 5px;
  border: solid 2px white;
  display: inline-block;
}

ul li a {
  color: white;
  text-decoration: none;
}

ul li a:hover {
  color: #C0C0C0;
}

Resultaat:

Opdracht

We gaan nu iets moois maken van de artikelen. Je hebt dit met de HTML-CSS-1 module al een beetje gehad. We kunnen de volgende rules gebruiken in de stylesheet: section, article, article h2 en article p

In onderstaand voorbeeld heb ik alleen nog maar section en article gebruikt

section {
  padding: 5px;
  margin: 5px;
  border: double 4px black;
}

section article {
  border: 3px solid black;
  border-radius: 0px 20px 20px 20px;
  margin: 5px 10px 5px 10px;
  padding: 10px;
  background: white;
}

Het resultaat is toch wel aardig:

De tekst en de koppen gaan we ook nog opmaken. Dit mag je zelf uitzoeken. Hier zijn we in de vorige module uitvoerig mee bezig geweest. Je hebt in ieder geval nodig:

article h2 {
 
}

article p {
 
}

Tip: je had ook mogen gebruiken: section article h2 en section article p Maar omdat ik maar 1 sectie had vond ik dat wat overdreven.

Opdracht

De footer staat onderaan de pagina. We houden het even simpel: vervang alles tussen <footer> en </footer> door een copyright tekst. © is het © teken want het copyright teken hoorde niet bij de utf-8 tekenset. Ik heb hier een h3 gebuikt, maar iets anders is ook goed.

<footer>
  <h3>Made with &hearts; by Coderclass</h3>
</footer>

Uiteraard heb je weer een footer en een footer h3 nodig om de boel te stijlen. Een voorbeeld zie je hieronder. Van de footer heb ik niet overdreven veel werk gemaakt.

footer {
  background: #F0F0F0;
}

footer h3 {
  text-align: center;
  font-weight: normal;
  font-size: 90%;
}

We zijn bijna klaar met onze pagina we hebben echter nog 1 ding wat niet zo netjes is. Het zou mooi zijn als de site netjes in het midden stond en was uitgelijnd. Nu is het rommelig. Hier zie je de site op een breedbeeld scherm.

Om dit probleem op te lossen zetten we alle blokelementen in een nieuw element. Een div-element. Dit element wordt alleen maar gebruikt om de opmaak mooier te maken. Het heeft dus geen structuur functie zoals article of nav. Zoals aan het begin van de lesbrief al is verteld bestonden de tags article, nav, section en footer voor HTML5 niet. Toen werd alles opgelost met de div tag. Je gaf toen een id mee in de div.

Voorbeeld:

<header> </header> was bijvoorbeeld <div id=”header”> </div><footer> </footer> was bijvoorbeeld <div id=”footer”> </div> <nav> </nav> was bijvoorbeeld <div id=”navigator”> </div>

De div tag is er in HTML5 nog steeds. Alleen we gebruiken het puur voor de opmaak. Niet meer voor de structuur. Een div is dus hetzelfde als <article>, <footer> of <section> behalve dan dat we hem puur voor de opmaak gebruiken !

We gaan de hele pagina in een div tag zetten die we id=”wrapper” meegeven. Dus voeg direct na de body tag in:

En onderaan de pagina net voordat de body tag sluit:

Tip: als ik veel div tags gebruik, moet ik die allemaal afsluiten met </div> ik zet dan wat commentaar bij de </div> bij welke div deze hoorde. Ik vergeet dan niet zo snel een div af te sluiten.

Nu gaan we de wrapper stijlen. Nogmaals ik wil met de wrapper alleen maar de pagina mooi in het midden zetten. Uiteraard wil ik alles net zo breed hebben als de header: deze was 960 pixels. Dus:

wrapper {
  margin: 0 auto 0 auto;
  width: 960px;
}

Kijk even of je het snapt: de marges boven en onder zijn 0. Links en rechts zijn de marges automatisch. Met andere woorden de browsers maakt de pagina 960 pixels breed en zet hem netjes in het midden omdat de linker en rechtermarge automatisch worden berekend.

Resultaat:

Les 2: position in CSS

In deze lesbrief behandelen we een aantal belangrijke technieken dat je nodig hebt voor het maken van een website.

Positionering in CSS

Je kunt op vier verschillende manieren de positie van een HTML-element op een pagina bepalen:

position: static
position: absolute
position: relative
position: fixed
position: sticky -> een combinatie van relative en fixed

Static

Positioneren met static, daar hoef je niets speciaal voor te doen. Alle elementen zijn namelijk standaard static gepositioneerd. Static betekent dat het element op de plek terecht komt in de volgorde zoals jij dat hebt aangegeven in de HTML. Men zegt wel: according to the normal flow of the page. Hieronder is dat ook te zien. De <p> komt na de <img> En de <img> komt na de <h1>.

Relative

Met relative kun je je element ten opzichte van zijn normale positie, naar links, rechts, boven en/of beneden plaatsen. Je geeft op de verticale as met top of bottom een afstand op. En op de horizontale as met left of right.

Absolute

Met absolute kun je eigenlijk hetzelfde doen, maar dan ten opzichte van de bovenkant van de pagina. Je haalt het element zelfs helemaal uit de flow, waardoor de <p> ook naar boven opschuift. Zie hieronder.

Fixed

Fixed lijkt weer heel erg op absolute. Maar er is een groot verschil: Als je iets met fixed positioneert, dan blijft het daar. Zelfs als je naar beneden gaat scrollen!

Opdracht

Maak een pagina waarmee je wat speelt met alle positioneringsopties. Misschien dat je het menu van de pagina die je in de vorige lesbrief had gemaakt fixed kunt maken?

Verschillende lagen en z-index

Als je een element met absolute, relative of fixed gaat positioneren, dan kan het zo zijn dat meerdere elementen bovenop elkaar worden geplaatst. Maar hoe zorg je ervoor dat de ene laag op of onder de andere laag terechtkomt? Dit regelen we met een ander CSS-property genaamd z-index. Voor de z-index kun je een getal opgeven. Hoe lager het getal, hoe meer hij naar achteren wordt geplaatst. Je kunt zelfs negatieve getallen opgeven! Zie het onderstaande voorbeeld met kaarten en hun bijbehorende z-index.

Je hoeft de lagen overigens niet per se van 1 tot 5 te nummeren (in stapjes van 1). Je mag ook sprongen maken. Als je maar weet dat de lagen van klein naar groot worden opgestapeld. Zie bijvoorbeeld het volgende plaatje:

Opdracht

Maak het volgende plaatje na. Hij bestaat uit 5 div'jes.

Floating

Vaak als je een stuk tekst voor op je website schrijft, dan wil je daar plaatjes bij. En dat ziet er dan standaard zo uit:

Terwijl je eigenlijk het plaatje met de tekst zou willen omringen, zie je hierboven dat er veel witruimte is. Je browser beschouwt het plaatje als een letter en zet hem in de zin. Ook als je het plaatje uit de <p> haalt, dan behoud je de witruimte. Dit gaat we nu oplossen met floating.

Door het plaatje float: left of float: right mee te geven krijg je het volgende effect:

Floating kan ook erg handig zijn als je een layout structuur voor je webpagina wilt maken waarbij je blokelementen naast elkaar wilt zetten. Neem als voorbeeld de volgende twee layouts:

LAYOUT 1

<header>

<nav>

<section>

<footer>

LAYOUT 2

<header>

<nav>

<section>

<aside>

<footer>

De vraag is: Hoe maak je dit soort layouts? Je ziet in de eerste layout <nav> en <section> naast elkaar en in de tweede layout komt daar zelfs een <aside>-element bij. Ook dit doe je met floating. Hoe dat werkt wordt in de volgende video uitgelegd:

Opdracht

Maak een van de bovenstre twee layouts met behulpd van floating.

Kleurentheorie

Web-design is een vak apart en de theorie over kleurgebruik is daarin een belangrijk onderdeel. Het internet staat vol met websites die niet aantrekkelijk zijn vanwege hun lay-out. Neem nou eens de volgende oerlelijke websites: http://www.waterequipment.com.au/ of http://www.pennyjuice.com/htmlversion/whoispj.htm

Inderdaad! Ouch!!! … het doet zeer aan je ogen ;)

De theorie over kleuren is een van de belangrijkste onderwerpen voor web designers. Een website waarbij kleurgebruik goed wordt toegepast ziet er natuurlijk beter uit. Maar kleuren kunnen ook een psychologisch effect hebben. Met de verkeerde kleuren kun je het verkeerde gevoel bij je bezoekers achterlaten. Dan vinden ze je ineens onbetrouwbaar of nemen ze je niet serieus.

Design is een onderwerp waar we nu maar heel kort bij stil zullen staan. We kunnen je al wel verklappen dat hier ook modules en badges voor zullen komen. Voor nu moet je het doen met dit kleine hoofdstukje ....

Een handige tool om je te helpen bij de keuze van een harmonieus kleurenpalet voor je website is het kleurenwiel. Het kleurenwiel helpt je de relaties die kleuren met elkaar hebben te visualiseren. De meest gebruikte versie van het kleurenwiel is gebaseerd op het wiel dat Sir Isaac Newton heeft ontdekt. Zijn kleurenwiel gebruikt drie primaire kleuren: rood, geel en blauw. Wanneer je die kleuren met elkaar mixt krijg je een volledig kleurenwiel.

Kleurenwiel van Newton: Hoe meer naar binnen, hoe meer wit aan de kleur is toegevoegd. Hoe meer naar buiten, hoe meer zwart is toegevoegd. De echte kleuren bevinden zich in de middelste concentrische cirkel van het wiel.

In het creëren van een aangenaam kleurenpalet zit een beetje wetenschap. Daar gaat we het hieronder over hebben.

Verschillende kleurenschema's

Monochromatisch: Wanneer je variaties van dezelfde kleur gebruikt kan dat een prachtig effect geven, maar je bent bijna verplicht diverse accenten van wit en zwart toe te voegen. Kies daarom een kleur die je de mogelijkheid geeft genoeg contrast toe te voegen.

Analoog: Wanneer je kleuren selecteert die elkaar raken in het kleurenwiel krijg je een harmonieus kleurenschema. Net zoals monochromatische kleuren kunnen zij een warm of een koel gevoel geven, afhankelijk van hun plaats in het kleurenwiel.

Complementair: Kleuren van tegenovergestelde eindes van het kleurenwiel geven het meeste contrast. Als je de verleiding kan weerstaan van meer kleuren toe te voegen, beperk je dan tot twee kleuren om een krachtige look te creëren. Maar gebruik ze wijs, zodat ze niet vloeken.

Split Complementair: Deze variatie van het complementaire schema gebruikt twee kleuren aan beide zijden van een direct complementaire kleur. Deze kleuren hebben een hoog visueel contrast maar met minder spanning dan puur complementaire kleuren.

Triadisch: Drie kleuren gelijkwaardig gespreid over het kleurenwiel creëren een levendige visuele interesse. Sommige paletten zijn stevig, terwijl andere meer verfijnd zijn. Je kan wijzigingen aanbrengen door een lichtere tint of wat schaduw aan één van de drie kleuren toe te voegen in plaats van bij de echte kleur te blijven.

Tetradisch: Dit is een populair schema omdat het sterk visueel contrast biedt terwijl het toch harmonieus blijft. Het gebruikt twee paren van complementaire kleuren. Het is moeilijk dit schema harmonisch te maken wanneer je telkens evenveel licht of schaduw gebruikt, dus een beetje creativiteit is vereist. Gebruik een dominante kleur voor je design en gebruik de anderen om de hoofdkleur te ondersteunen.

Op http://www.paletton.com kun je op een vrij eenvoudige manier kleurenpaletten genereren met behulp van het kleurenwiel. Zie het plaatje hieronder voor een beschrijving van de belangrijkste onderdelen van deze website.

Opdracht

Genereer met de website http://paletton.com/ per techniek een aangenaam kleurenpalet. Het is aan te raden om met het knopje EXAMPLES (rechts onderin) te kijken naar een voorbeeld website met het kleurenpalet dat je hebt gegenereerd.

Les 3: Inline vs Block elementen

Zoals je weet worden alle HTML-elementen als een box gerenderd in je browser. Deze boxen kun je opmaken volgens het box-model. Er zijn twee van dit soort boxen:

inline elementen
block elementen

Voorbeelden van inline elementen zijn: <b>, <em>, <span>, <img>, <strong>. Ze zitten in de regel tekst en hun box is zo hoog en breed als de inhoud van de tekst. Block elementen daarentegen beginnen altijd op een nieuwe regel. Voorbeelden van block-elementen zijn: <div>, <h1>, <p>, <table>, <ul> enz. Standaard nemen ze de gehele breedte van hun parent (bijvoorbeeld de <body>) in beslag. Je kunt in tegenstelling tot de inline elementen de breedte en hoogte van een block-element wel instellen met height en width. Hier een voorbeeld:

HTML

<body>
  <h1>Parkieten</h1>
  <p>
    Voeding is ronduit één van de belangrijkste kennispunten waar je het     één en ander van moet weten als je <em>grasparkietjes</em> houdt.         <span id="nadruk">Goede</span> voeding zorgt voor een langer leven en     een beter leven voor je vogeltje.
  <p>
</body>

CSS

h1, p {
  background-color: grey;
}

em, #nadruk {
  background-color: red;
  font-weight: bold;
}

RESULTAAT

Zoals je ziet is element <em> en <span> met id #nadruk inline elementen. Ze zijn zo breed en hoog als de hoeveelheid tekst en zitten middenin de regel. De elementen <p> en <h1> zijn block-elementen. Ze nemen de gehele breedte in beslag van hun parent (in dit geval <body>) en beginnen op een nieuwe regel.

Opdracht

Ga na dat je de hoogte en breedte van een inline element niet kan veranderen, terwijl je dat met een block element wel kan doen. Doe dat in het volgende stuk code wat voor jou al is geschreven: https://codepen.io/h-akkas/pen/mMrZRV?editors=1100

Display

Nu is het zo dat je block elementen soms toch als inline elementen wilt behandelen en inline elementen als block element. Hoe doe je dat? Daar is het CSS-attribuut display voor bedacht! Als je voor een <p> element display: inline instelt, dan wordt de <p> als een inline element behandeld. Als je voor een <em> element display: block instelt, dan wordt het <em> element als een block element behandeld.

Opdracht

Bekijk de volgende pagina en de code:

Zoals je ziet hebben we alleen block elementen op deze pagina. Maak van de h1 en de vier div-elementen een inline element met display: inline. Wat gebeurt er? Gebruik deze link: https://codepen.io/h-akkas/pen/YxGoZX?editors=1100

Zoals je hierboven hebt gezien veranderen er twee dingen:

Alle height en width instellingen worden genegeerd. De elementen worden zo hoog en breed als de inhoud van de tekst.
Alles komt op een regel te staan, omdat het inline elementen zijn geworden.

Zo kun je ook inline elementen als block elementen beschouwen met display: block. Bekijk eens het volgende voorbeeld.

Ik heb hier drie linkjes naast elkaar. Zoals je weet is een <a>-tag een inline element. Wil ik van de linkjes een verticaal menu maken met vakjes die even breed zijn, dan moet ik er block elementen van maken.

Opdracht

Maak van de linkjes hierboven een verticaal menu met even brede vakjes. Je kunt de code via de volgende link raadplegen: https://codepen.io/h-akkas/pen/mMObdz?editors=1100

Als je je goed herinnert hebben we in lesbrief 1 ook display: inline-block gebruikt voor het menu. Waar is dat dan goed voor? Nou, met display: inline-block willen we een element op een lijn zetten (inline), maar dan ook als een block behandelen. Dus ook voorzien van een hoogte en een breedte. Hartstikke handig als je een horizontaal menu wilt maken. Zie ook het plaatje hieronder voor de verschillen:

In dit plaatje gaan we ervan uit dat alle elementen divjes zijn. Merk op dat inline-block dus zowel de elementen naast elkaar zet, maar waar ook een hoogte en een breedte voor kan worden opgegeven!

Pseudo classes en pseudo elementen

Als het goed is heb je al eerder kennisgemaakt met pseudo classes in HTML. Linkjes hebben namelijk vier verschillende toestanden:

Toestand link

Betekenis

link

als de link nog niet is bezocht

visited

als de link al bezocht is

hover

als je met je muis over de link scrolt

active

als je op de link klikt

Je kunt voor elk van deze toestanden een opmaak opgeven. Dit doe je met pseudo classes.

De code voor een pseudo class is als volgt:

<selector>:<pseudoclass> { }

Voorbeeld:

a:link {
  color: yellow;
  background-color: red;
}

a:visited {
  color: green;
  font-size: 26px;
}

a:hover {
  background-color: purple;
  color: yellow;
}

a:active {
  font-weight: bold;
}

Zoals hierboven te zien is zou je ervoor kunnen kiezen om voor elke toestand van het linkje opmaak aan te geven met pseudo classes. Maar dat hoeft natuurlijk niet. De bovenstaande code kun je via de volgende link in actie zien: https://codepen.io/h-akkas/pen/GvNRBr?editors=1100

Je kunt deze pseudo classes ook op andere HTML-elementen toepassen. Stel dat je een <div> een kleur wilt geven als je er met je muis overheen gaat, dan kan dat gewoon.

Opdracht

Maak een <div> die een andere kleur krijgt als er met je muis overheen gaat.

Nu is het aantal pseudo classes niet beperkt tot vier. Er zijn tientallen pseudo classes die je kunt gebruiken om dingen te doen die je anders met JavaScript had moeten programmeren. Stel dat je een tabel hebt en je wilt alle even rijen een kleur geven en alle oneven rijen een andere kleur. Dan zou je de pseudo class nth-child() kunnen gebruiken. Zie de onderstaande code:

tr:nth-child(even) { /* alle even rijen */
  background-color: #915151;
}

tr:nth-child(odd) { /* alle oneven rijen */
  background-color: #B97777;
}

Zie de code in actie: https://codepen.io/h-akkas/pen/dzOyrM?editors=1100

In plaats van even of odd kun je ook gewoon een getal tussen haakjes zetten. Wel met een n erachter. Dus bijvoorbeeld nth-child(4n). Zo kun je iets bijzonders doen met exact de zoveelste rij.

Opdracht

Op de volgende pagina kun je een lijst met alle pseudo classes vinden: https://www.w3schools.com/css/css_pseudo_classes.asp Maak een webpagina waarin je minstens twee pseudo classes gebruikt voor een nuttige toepassing. Welke je wilt gebruiken, mag je zelf weten.

Web-fonts

Hiervoor heb je geleerd om lettertypen op te geven met de font-family property. Je hebt ook geleerd dat je niet zomaar alle lettertypen kunt gebruiken aangezien de lettertype ook aanwezig moet zijn op het systeem van de bezoeker van je website. Zo niet, dan zal je website er niet zo mooi uitzien. Om dit te voorkomen heb je geleerd om meerdere lettertypen op te geven: beginnen met een web-safe font en vervolgens een paar generieke fallback fonts voor als de eerst opgegeven lettertype toch niet beschikbaar is.

font-family: Verdana, Geneva, sans-serif

font-family: "Times New Roman", Times, serif

Nu is er ook de mogelijkheid om met web-fonts te werken. Dat houdt in dat je website altijd de ingestelde lettertype downloadt voor als het niet beschikbaar is bij de bezoeker. Waar kun je die fonts dan downloaden en hoe kom je eraan?

Nou, er zijn websites die allerlei mooie fonts aanbieden die je zo als web-font kan instellen voor je website. Sommige van deze websites vragen hier geld om, maar sommige ook niet. Een van de webfoundry websites die honderden fonts gratis beschikbaar stelt is Google Fonts. Hier een pagina dat gebruik maakt van Google Fonts:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Een mooie font op je website</div>
  </body>
</html>

Zie hem hier in actie: https://codepen.io/h-akkas/pen/zdoGpP?editors=1100

Hoe gaat dat dan in zijn werk?

Ga naar de Google Fonts website (https://fonts.google.com/)
Kies een lettertype uit en druk op het rode plusje (er verschijnt een zwart-wit kadertje aan de onderkant van de pagina
Klik op dat kadertje met de tekst (1 family selected).
Dan kun je twee dingen doen. Of je kopieert de <link>-tag naar je HTML-bestand of je drukt op @IMPORT en kopieert de @import regel in je CSS. Ik zou kiezen voor het laatste aangezien je dat maar 1 keer hoeft te doen.
Ten slotte kun je de lettertype gewoon gebruiken op je website.

Opdracht

Kies een leuke web-font en gebruik hem op een pagina.

Eindopdracht [PET1]

Je hebt basisinformatie gekregen over hoe je een website ontwikkelt.

De inhoud van de website gaat over de politieke partij die je nu aan opgerichten bent bij Maatschappijleer. Je maakt de site alleen.

Je levert de site in door het te hosten op github - zie uitleg onder kopje horsten. De url van je site kun je inleveren bij opdrachten in magister.

De eisen van de website en beoordelingschema staan onder de beoordeling. Lees die eerst goed door voordat je begint.

Succes!

Publiceren op Github pages

Met GitHub pages kan elke gebruiker een website hosten. Dit gaan we gebruiken om jouw portfolio online te zetten. Het stappenplan is als volgt:

Maak eerst een account aan op GitHub, hier een uitleg video:

Maak een nieuwe GitHub repository met als naam username.github.io waarbij username vervangen moet worden door jouw gebruikersnaam op GitHub. Denk erom: als je dit niet goed doet, zal je website niet werken!

Ga vervolgens naar de map waar je je bestanden wilt bewaren en voer het volgende commando in:

~ $ git clone https://github.com/username/username.github.io

Ga naar de map username.github.io en voeg een index.html bestand toe

cd username.github.io ~$ echo "Hello World" > index.html

Add, commit en push naar GitHub

~$ git add . ~$ git commit -m "Initial commit" ~$ git push -u origin master

Je bent klaar. Surf nu naar https://username.github.io en kijk of het werkt!

Beoordeling

Je website wordt op de volgende punten beoordeeld:

Onderdeel

Havo

Vwo

minimaal 4 pagina's

0.7

0.5

uniforme lay-out voor alle paginas

0.7

0.5

achtergrondafbeelding

0.7

0.5

tekst is netjes opgemaakt met gebruik van h1, h2, p tags

0.7

0.5

style wordt bijgehouden in extern css bestand

0.7

0.5

minimaal 2 afbeeldingen

0.7

0.5

menu om naar andere paginas te gaan (in css)

link naar een bestaande website

0.7

0.5

link / webformulier voor het sturen van email

0.7

0.5

een geneste lijst

0.7

0.5

een tabel

0.7

0.5

goed gebruik van box model

0.7

0.5

Bonus

maak je website responsive

gebruik JavaScript/JQuery

geavanceerd CSS gebruik van verschillende selectors

Als je een onderdeel voldoende in je website hebt, krijg je de correspondeerde punten.

Python

Welkom in de Python modules! Werk hieronder de lesbrieven af volgens je planner.

start

Python-0

Deze module is een handige eerste stap als je wilt leren programmeren. Je gaat namelijk een turtle programmeren om allerlei leuke figuurtjes te tekenen. Je gaat leren hoe je tekeningen maakt, loops programmeert, functies maakt etc. Deze module bestaat uit een aantal lesbrieven die je moet doorwerken.

Lesmatriaal Het lesmateriaal bestaat uit lesbrieven waarin uitleg staat, maar ook een aantal opdrachten. De opdrachten maak je gewoon voor jezelf. De opdrachten met een ster maak je in een online klas. Je kunt je voor deze klas aanmelden via de volgende

Maak de lesbrieven en lever de opdrachten in volgens de planner.

Spiekbrief

Natuurlijk hoef je niet alle commando's en functies van een programmeertaal uit je hoofd te leren. Je kunt lekker gebruik maken van een cheatsheet (= spiekbrief). Wij hebben voor jou een handige spiekbrief gemaakt. Hier is hij:

Untitled

Les 1: Je eerste tekening

Introductie programmeren in Python

Je leert in deze module hoe je moet programmeren in de programmeertaal Python. We leggen eerst kort uit wat een programma is en gaan daarna lekker aan de slag.

Een commando is een opdracht (instructie) die een computer kan begrijpen en kan uitvoeren. In feite kan een computer alleen maar eenvoudige opdrachten begrijpen. Deze kleine, eenvoudige instructies kunnen dan gecombineerd worden om ingewikkeldere en complexere taken uit te voeren. Zo'n verzameling van commando's wordt ook wel een computerprogramma genoemd. Het schrijven van een computerprogramma is niet eenvoudig. Sommige programma's bestaan wel uit meer dan een miljoen regels opdrachten. Wij gaan echter beginnen met vrij eenvoudige programma's waarin het de bedoeling is om een turtle te laten bewegen zodat hij bepaalde figuren en patronen kan tekenen.

Je eerste programma

Ons eerste programma ziet er als volgt uit:

Je kunt het hier zien werken: (druk linksboven op de 'play' knop)

Opdracht 1

Als je wilt tekenen met turtle, dan moet je dat op de allereerste regel van je programma aangeven. Dit doe je door de regel import turtle op te schrijven. De turtle kijkt altijd in het begin naar rechts.

En met de opdracht turtle.backward(100), gaat de turtle 100 stappen achteruit.

Draaien

Opdracht 2

Opdracht 3

Maak een nieuwe repl aan en maak het figuur.

Opdracht 4

Tip voor draaien

Let er wel op dat de draairichting altijd vanuit de huidige positie van de turtle wordt bepaald. In het onderstaande plaatje kijkt de turtle eerst naar beneden. Als je dan turtle.right(90) uitvoert dan draait de turtle dus 90 graden naar rechts toe!

Om het draaien duidelijk te maken hieronder nog een programma dat je in Python kan uitvoeren:

Opdracht 5

Maak voor de figuren hieronder een programma waarbij de turtle dat figuurtje tekent. De afmetingen mag je zelf bepalen.

Opdracht 6

Maak ook vier programma's waarmee je de volgende figuren kan tekenen.

Opdracht 7

Schrijf een programma waarmee je het onderstaande kan tekenen:

Je kunt het bovenstaande figuurtje tekenen door slechts gebruik te maken van de functie turtle.forward en turtle.right. Zorg ervoor dat je hetzelfde figuurtje maakt, maar dan alleen door uitsluitend gebruik te maken van deze twee functies.

Opdracht 8 - Mooie vorm

Bever wil het onderstaande plaatje gaan tekenen. Kun jij hem helpen?

Opdracht 9 - Huis

Teken nu een huis met de turtle. Je huis zou er zo uit kunnen zien (de lengte van de zijden mag je zelf bepalen):

of als je wat enthousiaster bent:

Les 2: Herhalen

Als je een vierkant wilt gaan tekenen met zijden van 100 pixels, dan zou je het volgende programma kunnen uitvoeren:

Merk op dat de twee commando's turtle.forward(100) en turtle.right(90) vier keer worden herhaald! Zou het niet veel beter zijn als je de computer kort en krachtig kan aangeven dat hij die twee commando's vier keer moet uitvoeren? Dat kan! En hiervoor maak je gebruik van de herhaalinstructie (wordt ook een loop genoemd). Het bovenstaande programma kan dus ook als volgt worden geschreven:

De for-opdracht zorgt ervoor dat de twee opdrachten eronder vier keer worden uitgevoerd. Als er for i in range (14) zou staan bijvoorbeeld, dan zouden die twee opdrachten 14 keer worden herhaald. Let wel op dat je eerst een tab plaatst voor de opdrachten die herhaald moeten worden. Dit noem je inspringen. Hetgeen dat herhaald moet worden, dient dus te worden ingesprongen. Als je dat niet doet, dan krijg je een foutmelding.

Opdracht 1

Voer het onderstaande programma uit en bekijk het resultaat. Kun jij het programma korter schrijven door gebruik te maken van een loop?

Opdracht 2

Gebruik een loop om een vierkant te tekenen waarvan de zijden 200 pixels lang zijn.

Opdracht 3

Voer het onderstaande programma uit en bekijk het resultaat. Kun jij het programma korter schrijven door gebruik te maken van een loop?

Moeilijkere patronen

We gaan nu verder met nog meer uitleg. We zijn geïnteresseerd om het volgende figuurtje te tekenen door gebruik te maken van een loop:

Het eerste dat je doet is bepalen welk patroon steeds terugkeert. Dat moet je immers herhalen! Je zou bijvoorbeeld het volgende stukje als het te herhalen patroon kunnen aanmerken:

Uitgaande van de situatie dat je naar boven kijkt, zou je dit gedeelte als volgt kunnen maken:

Nadat we de bovenstaande regels hebben uitgevoerd kijkt de turtle naar rechts. Zie maar in het onderstaande plaatje:

Het enige dat we moeten doen is ervoor zorgen dat de turtle weer naar boven kijkt. Voor de rest moet je het patroon steeds herhalen, zodat je uiteindelijk het gewenste plaatje krijgt. De turtle naar boven laten kijken doen we uiteraard met de opdracht turtle.left(90).

We krijgen dan het volgende gewenste resultaat:

Als we dezelfde code dan nog eens herhalen, dan krijgen we het volgende plaatje:

Nu zien we dus dat het idee werkt en kunnen we, zoals in het onderstaande programma ook te zien is, het patroon 5 keer herhalen.

Veel van de onderstaande opgaven kunnen met dezelfde aanpak opgelost worden. Denk eraan om eerst het repetitieve patroon te ontdekken. Schrijf dan een programma dat dat patroon tekent. Denk vervolgens na over de heroriëntatie van de turtle zodat het patroon ook voor de tweede keer getekend kan worden. Schrijf dan een loop zodat je de hele tekening met een kort-en-krachtig programma kan gaan maken.

Opdracht 4

Schrijf een programma dat de onderstaande trap tekent. Ga volgens de bovenstaande aanpak te werk.

Opdracht 5

a] Teken:

b] De bovenstaande ster heeft 8 stralen met een lengte van 150 pixels. Kun je ook een ster maken met 16 stralen met een lengte van 100 pixels?

Les 5: Loops & Range()

In één van de vorige lessen hadden we kennisgemaakt met de loops (herhalingen). Het gebruik van loops zorgde ervoor dat we met minder code hetzelfde konden bereiken. Een eenvoudige loop waarmee je een vierkant maakt ziet er als volgt uit:

for i in range(4):
  turtle.forward(100)
  turtle.right(90)

Nu weten we dat door deze loop de opdrachten forward en right vier keer worden herhaald. Maar eigenlijk heb ik nooit uitgelegd wat die i betekent. En wat doet range eigenlijk? Daar gaan we in deze les iets dieper op in. Let dus goed op ;)

De loopcounter

Allereerst is het belangrijk om te weten dat we i.p.v. i ook een andere naam hadden kunnen kiezen. De meeste programmeurs gebruiken vaak een letter zoals j,k,x, maar ook het woordje count. De gouden regel blijft "een gepaste naam dat overeenkomt met de bedoeling ervan".

Deze i wordt ook wel de loopcounter of de teller genoemd. Tijdens het herhalen wordt hiermee bijgehouden bij welke herhaling de computer is! De eerste keer dat de loop herhaalt, is i gelijk aan het getal 0. De tweede keer wordt hij 1. De derde keer wordt hij 2 en de vierde keer wordt hij gelijk aan 3. En dan houdt de loop op. Wat kun je hier nu mee? Nou, een hele hoop! Laten we eerst een eenvoudig voorbeeld nemen:

for i in range(10):
  turtle.dot(1)
  turtle.penup()
  turtle.forward(10)
  turtle.pendown()

Dit programma tekent 10 stippen achter elkaar. De dikte van elke stip is 1 pixel. Nadat hij een pixel heeft getekend, schuift de turtle 10 pixels op. En dat wordt 10 keer herhaald. Probeer dit eens in jou repl.it...

Bij elke herhaling gebeurt nu hetzelfde. Maar stel dat je na elke herhaling de stip 1 pixel groter wilt maken. Hoe doe je dat dan?

Omdat de i na elke herhaling eentje groter wordt kunnen we dat goed gebruiken. We vervangen de 1 van turtle.dot(1) met i. Dat ziet er dan als volgt uit:

for i in range(10):
  turtle.dot(i)
  turtle.penup()
  turtle.forward(10)
  turtle.pendown()

Je kunt ook een andere naam gebruiken voor i:

for dikte in range(10):
  turtle.dot(dikte)
  turtle.penup()
  turtle.forward(10)
  turtle.pendown()

Opdracht 1

Wat verandert er als je in het bovenstaande voorbeeld ook forward(10) vervangt door turtle.forward(i)?

En wat als je de i vervangt door i * 2?

Opdracht 2

Hoeronder zie je een spiraal die uit 400 strepen bestaat. Het allereerste streepje is 0 pixels lang. Vervolgens wordt een 90º hoek naar rechts gemaakt. Daarna een streepje van 1 pixel lang. Dan weer een 90º hoek naar rechts. Daarna een streepje van 2 pixels lang, et cetera.

De vraag is om een functie tekenspiraal() te schrijven die dit plaatje maakt.

Opdracht 3:

Verander de functie tekenspiraal() nu zodanig, dat je bij de aanroep kan aangeven uit hoeveel streepjes hij moet bestaan. Dus tekenspiraal(20) zou dan een piepklein spiraaltje tekenen.

Opdracht 4:

De spiraal heeft 50 stippen. De eerste stip heeft dikte 0 en er komt steeds 1 bij. Kun je ook kleuren toevoegen?

Range

Range is eigenlijk een functie die een lijst van getallen maakt. Zo maakt range(4) de lijst [0,1,2,3]. En range(10) de lijst [0,1,2,3,4,5,6,7,8,9]. Zoals je nu wel weet wordt tijdens elke herhaling de loop counter gelijkgesteld aan het volgende getal in de lijst die range maakt. We hebben nu lijsten waarbij de getallen steeds met 0 beginnen en vervolgens met 1 toenemen. Maar stel dat je het volgende lijstje wilt hebben: [10,15,20,25]. Hoe doe je dat dan? Dat doe je als volgt:

for dikte in range(10,30,5):
	turtle.dot(dikte)
	turtle.penup()
	turtle.forward(dikte*2)
	turtle.pendown()

Uitleg: range heeft dus in dit geval drie parameters. De eerste bevat de beginwaarde. We willen dus niet meer dat de lijst begint met 0 maar met 10. De tweede bevat de eindwaarde. De lijst wordt dus gevuld tot het getal 30 (niet tot en met!!). En als derde parameter geef je de stapgrootte mee. Die is standaard 1, maar nu hebben we hem ingesteld met 5. De lijst ziet er dan als volgt uit:

[10,15,20,25]

Opgave 5:

Schrijf een programma waarmee je het volgende figuurtje natekent:

Opgave 6:

Maak nu een programma waarmee de turtle het figuurtje kan tekenen. Het kleinste vierkantje heeft zijden van 20 pixels. Het grootste vierkantje zijden van 95 pixels.

Opgave 7:

Maak nu een programma waarmee je de volgende spiraal kan maken.

Het eerste streepje is 10 pixels lang. De stappen zijn 5 pixels lang. De laatste streep is 195 pixels lang.

Opgave 8:

Teken nu drie huizen naast elkaar. De eerste heeft zijden van 50 pixels. De laatste heeft zijden van 100 pixels. Doe dit met een loop!

Opgave 9:

Maak nu het volgende figuur na. Belangrijk om te weten: Je begint met een driehoek, vervolgens teken je een vierhoek, en dan een vijfhoek, en dan een zeshoek. En je gaat door totdat je een negenhoek hebt. De zijden van alle figuren zijn 50 pixels lang.

Python-1

In deze module ga je leren hoe je programma's kan schrijven waarbij je de gebruiker ook vragen kunt stellen en afhankelijk van het antwoord je programma iets laat doen. Dit noemen we ook wel interactieve programma's.

Les matriaal:

Het lesmateriaal bestaat uit lesbrieven waarin uitleg staat, maar ook een aantal opdrachten. De opdrachten maak je gewoon voor jezelf. De opdrachten met een ster maak je in een online klas.

Voor de lessen 1 t/m 3 is hier de classroom.

Voor de lessen 4 t/m 7 is hier de classroom.

Enjoy!

Les 1: Print & variabelen

De print functie

Met Python is het mogelijk om tekst en getallen op het scherm te tonen. Dat doe je met de functie print(). Deze functie "print" gewoon de informatie die je wilt op het scherm.

print ("Dit komt dus op het scherm terecht.")
print ("We gaan nu een paar sommetjes doen:")
print (230-21)
print (78-2+6)
print (78-2*6)

Zoals je ziet kun je ook berekeningen tussen de haakjes van de print()-functie zetten. Let er wel op dat de voorrangsregels van de wiskunde ook gelden voor programmeertalen: de * en de / gaan dus vóór de + en de -.

Er bestaat iets als een string. Een string is een rij van tekens (karakters). Een teken is een letter (zoals ‘a’, ‘B’), nummer (‘0’, ‘2’), symbool (‘#’, ‘^’, ‘}’), enz. en kan gebruikt worden om allerlei soorten informatie in op te slaan. Vaak is dit dus gewoon een stukje tekst wat iemand op het scherm wil printen.

'string' betekent in het Engels touw of draad. Het is dus eentouw met karakters er aan.

Opgave 1:

Schrijf een programma dat met de print() functie “Hello, world” op het scherm zet via trinket.

Opgave 2:

Schrijf een programma dat met de print() functie de volgende boodschap op het scherm zet:

Welkom bij mijn geweldige programma! We gaan allemaal toffe dingen laten zien.

Dit doen we met behulp van de print()-functie. ^_^

Variabelen

Vaak wil je in je programma tijdelijk gegevens bewaren. Dit doe je met variabelen. Een variabele kun je zien als een emmer met een label erop. Je kunt er iets in zetten en je kunt er iets uithalen. Hieronder zie je een stukje code met ernaast een plaatje waarop te zien is wat er gebeurt:

a = 20
b = 15
c = "hallo"

Je kun nu doen:
print(c)

of:
print(a+b)

Je ziet dus dat er nu drie emmers zijn. Elke emmer heeft een naam/label en een inhoud. In het begin zijn alle emmers leeg. Maar na de drie regels van hierboven verandert de zaak:

In de emmer met als naam a komt namelijk het getal 20 te staan.
In emmer b komt 15 te staan.
En in c komt de tekst "hallo" te staan.

We kunnen nu ook een vierde emmer genaamd d in het leven roepen. In die variabele kunnen we het verschil (min) tussen a en b berekenen en bewaren. Dat gaat zo:

a = 20
b = 15
c = "hallo"

d = a - b
# d is 20 - 15 is 5
print(d)
# dit zal 5 uitprinten

We halen dus het getal 20 uit emmer A en we halen het getal 15 uit emmer b. Het verschil wordt vervolgens berekend en het antwoord komt in emmer d te staan.

Uiteindelijk zouden we ook de inhoud van de variabelen op het scherm kunnen tonen. Dat doen we natuurlijk met de functie print. Dit gaat zo:

print (a)
print (b)
print (c)
print (d)

Opdracht 3

Schrijf een programma waarbij je de volgende berekeningen doet in Python:

8483937 - 523455 23.22342 * 34309483 218739345 + 3498348

Stop de antwoorden in drie verschillende variabelen. Tel de drie antwoorden bij elkaar op en print het uiteindelijke antwoord.

Namen van variabelen

De naamgeving van een variabele kan je altijd zelf bepalen. Dus als je berekeningen wilt doen met je favoriete getal, kan je deze in een variabele stoppen met als naam bijvoorbeeld favoriete_getal. Dit is handig omdat je dan makkelijk kan bijhouden wat er in de variabelen zit. Noem je variabelen dus altijd op een logische manier! Kijk maar naar het volgende voorbeeld:

favoriete_getal = 7
print (favoriete_getal + 1)
print (favoriete_getal)
print (favoriete_getal * 2)
favoriete_getal = 4 + 5
print (favoriete_getal)
print ("favoriete_getal")

Zoals je kan zien zijn de eerste drie antwoorden van het programma (dit worden ook wel outputs genoemd) gewoon een wiskundesom die de inhoud van onze variabelen gebruikt. Daarna wordt er een verandering gemaakt in de variabele favoriete_getal. Er wordt een andere waarde aan de variabele gegeven, namelijk 4 + 5, dus 9. Je kan na het toewijzen van de waarde van een variabelen deze dus altijd ook nog later veranderen.

Bij de laatste output zien we een beetje een instinkertje. Namelijk doordat er " " om favoriete_getal stonden, wordt deze gezien als wat? Ja! Een string! Het is dus heel erg belangrijk om in je achterhoofd te houden of je iets wilt printen als een string of als een variabele. Als je de " " namelijk vergeet, gaat het programma zoeken naar een variabele met die naam. En als er dus geen variabele toegewezen is kan je hierdoor een foutmelding (oftewel een error) krijgen.

Strings aan elkaar plakken (concatenation)

Bij de vorige opdrachten heb je steeds een aparte string geprint op het scherm. Nu bestaat er ook iets als string concatenation, waarin je twee strings samen kan voegen. Concatenation is een Engels woord voor “aaneenschakeling”, en in python is dit ontzettend makkelijk: Je plakt twee string aan elkaar vast met een +! Probeer maar:

leerling_naam = "Joop"
print ("Hallo, dit is deel een!" + " En dit is deel twee!")
print ("Jouw naam is " + leerling_naam)

kledingstuk = "broek"
print("Wat heb je een mooie " + kledingstuk + " aan.")

Deze code kan je natuurlijk ook weer zelf proberen in je eigen omgeving!

Opgave 4

Schrijf steeds een programma waarin je de gegeven variabele op de goede plek in de string gebruikt zoals in het voorbeeld.

naam = Lotte <naam> heeft pannenkoeken gegeten! naam = Kees De kat van <naam> heeft een muis gevangen. naam = Bas tijd = nacht De parkiet van <naam> heeft hem de hele <tijd> wakker gehouden.

Opgave 5

Print bij deze opdracht de komende drie woorden in alle volgordes die er maar zijn dus bijvoorbeeld: ‘Niezen Kikkers Blij’ of 'Knikkers Niezen Blij'. Hint, er zijn 6 verschillende volgordes.

speelgoed = "knikkers" gevoel = "blij" werkwoord = "niezen" print(speelgoed + gevoel + werkwoord) # Ga Verder

Opdracht 6:

Schrijf je eigen kleine verhaaltje.

Gebruik een variabele voor de naam van de hoofdpersoon zodat je makkelijk de hoofdpersoon kunt wijzigen.

Voorbeeldverhaal: Henk is een blije jongen. Hij gaat op de fiets naar school. Als Henk op school is gaat hij vrolijk naar de les. Einde!

Code die hier bij hoort: naam = "Henk" print(naam + " is een blije jongen.") # denk aan de extra spatie! print("Hij gaat op de fiets naar school.") print("Als " + naam + " op school is gaat hij vrolijk naar de les.") print("Einde!")

Foutmeldingen (errors)

Een ‘error’ is een foutmelding. Op errors gaan we later dieper in, maar voor nu is het handig om te weten dat je bij bijvoorbeeld de volgende code:

getel = 4 print (getal + 1)

iets kan krijgen als:

Traceback (most recent call last): File "<stdin>", line 2, in <module>NameError: name 'getal' is not defined

Als je kijkt naar line 2 (regel 2) dan wordt daar een variabele met de naam getal gebruikt, terwijl deze dus niet bestaat of geen waarde toegewezen heeft gekregen. Je ziet dat er een spelfout is gemaakt in regel 1. Er staat getel in plaats van getal. Als je dat verandert verdwijnt de foutmelding.

Veel voorkomende fouten

Een error kun je bijvoorbeeld krijgen als:

je de " " om een string ergens vergeten bent,
je variabelenaam verkeerd hebt gespeld
je variabele nog niet een waarde hebt gegeven

Het kan ook zijn dat je de toewijzing andersom doet, zoals: 4 = x

Dan krijg je een error die eruit ziet als: Traceback (most recent call last):

In line 1 of the code you submitted: 4 = x ^ SyntaxError: can't assign to literal

Deze foutmelding houdt dan dus in dat je altijd eerst je variabelenaam moet noemen, en dan pas de inhoud ervan moet geven. In de geval verbeter je het dus door er van te maken: x = 4

In de toekomst gaan we dieper in op errors en hoe je problemen kunt oplossen. Maar het is handig dat je hier alvast wat over hebt gelezen, in het geval dat je straks wat schrijft en opeens een error krijgt. Ze zien er altijd heel ingewikkeld uit, maar als je hier eenmaal handig in wordt valt het best mee! Neem gewoon rustig je tijd, en bekijk wat er staat en neem je code dan nog even door.

Opgave 8

Run de volgende codes, en los de errors op:

kosten_lolly = 30
kosten_appel = 60
kosten_banaan = 100

geld_op_zak = 230

geld_over = geld_op_zak - kosten_appel - kosten_banaan - kosten_lolly

print geld_over

katten = 4
honden = 8
dolfijnen = 2
cavias = 3
chinchillas = 1

aantal_dieren = katten + honden + dolfijnen + cavias + hamsters + chinchillas

print (aantal_dieren)

# Hoe vaak moet nicky heen en weer lopen om drinken voor haarzelf en al haar
# vriendinnen te halen als zij maar drie flesjes per keer mee kan nemen?

1 = nicky
14 = vriendinnen
nicky + vriendinnen = totaal_hoeveelheid_mensen

3 = flessen_per_keer

totaal_hoeveelheid_mensen / flessen_per_keer = hoeveel_keer_lopen

print (hoeveel_keer_lopen)

peren = "appels"
appels = "peren"
wie_de = "Je moet geen "
kaatst_kan_hem = " met "
terug_verwachten = " vergelijken."

print (wie_de + peren + kaatst_kan_hem + appels  terug_verwachten)

Algoritme

Databases

Untitled

2: Selectie, voorwaarden en sorteren