‹Terug naar zoeken

P3 WEEK 5 PROJECT M3

M3 PROJECT
1 / 54
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

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

time-iconLesduur is: 90 min

Onderdelen in deze les

M3 PROJECT

Slide 1 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Tekstslide

Startklaar zitten.
Schrijf de basisstructuur voor een HTML pagina

Slide 3 - Open vraag

Deze slide heeft geen instructies

Lesdoel
Aan het einde van de les kunnen leerlingen eenvoudige CSS-regels toepassen om de stijl van HTML-elementen zoals <input> en <button> te veranderen, bijvoorbeeld door kleuren, randen en vormen aan te passen.

Slide 4 - Tekstslide

Deze slide heeft geen instructies

html tag input

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Een input tag style
Mini-opdracht
Zorg ervoor dat de button kleur rood heeft en de dat border-radius van button 5px is.

Zorg ook ervoor dat als je met de buis over de button gaat dat de kleur veranderd naar groen
1
2

Slide 6 - Tekstslide

Deze slide heeft geen instructies

De input in het midden krijgen

Slide 7 - Tekstslide

<!DOCTYPE html>
<html lang="nl">
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #f5f5f5;
        }
        .form-container {
            text-align: center;
        }
        input[type="text"] {
            display: block;
            margin: 0 auto 16px auto;
            border: 2px solid #2196F3; /* blauw */
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 16px;
            width: 250px;
            background-color: #E3F2FD; /* lichte blauw tint */
            color: #0D47A1; /* donkerblauwe tekst */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
        }
        input[type="text"]:focus {
            outline: none;
            border-color: #1976D2; /* donkerder blauw */
            box-shadow: 0 0 10px #64B5F6;
        }
        button {
            background-color: #2196F3; /* blauw */
            color: #FFFFFF;
            border: none;
            border-radius: 12px;
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        button:hover {
            background-color: #1976D2; /* donkerder blauw */
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Voorbeeld met gestylede input en blauwe knop (hex kleuren)</h2>
        <input type="text" placeholder="Voer je naam in">
        <button>Verstuur</button>
    </div>
</body>
</html>

inzoomen op een property
Wijzig wat dingen in padding en border

Slide 8 - Tekstslide

<!DOCTYPE html>
<html lang="nl">
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #f5f5f5;
        }
        .form-container {
            text-align: center;
        }
        input[type="text"] {
            display: block;
            margin: 0 auto 16px auto;
            border: 2px solid #2196F3; /* blauw */
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 16px;
            width: 250px;
            background-color: #E3F2FD; /* lichte blauw tint */
            color: #0D47A1; /* donkerblauwe tekst */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
        }
        input[type="text"]:focus {
            outline: none;
            border-color: #1976D2; /* donkerder blauw */
            box-shadow: 0 0 10px #64B5F6;
        }
        button {
            background-color: #2196F3; /* blauw */
            color: #FFFFFF;
            border: none;
            border-radius: 12px;
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        button:hover {
            background-color: #1976D2; /* donkerder blauw */
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Voorbeeld met gestylede input en blauwe knop (hex kleuren)</h2>
        <input type="text" placeholder="Voer je naam in">
        <button>Verstuur</button>
    </div>
</body>
</html>

Pas jouw loginpagina
Zorg dat jouw login in het midden van jouw scherm komt.

mag natuurlijk andere kleuren 
of anders stylen zoals jouw venster in het midden zit.

Je bent vrij zoekmachines te gebruiken

zoekwoorden: login midden van scherm. CSS en HTML code. Voorbeeld login midden CSS en HTML

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Ik kan nu css gebruiken om mijn loginpagina in het midden van mijn scherm te krijgen
Ja
Deels
Nee

Slide 10 - Poll

Deze slide heeft geen instructies

Plaats jouw code hier (css en html)

Slide 11 - Open vraag

Deze slide heeft geen instructies

Afsluiten
Volgende week mini presentatie houden.
Kies zelf welke html tag en css code jij aan ons wilt uitleggen
elke leerling 3 minuten.

Slide 12 - Tekstslide

Deze slide heeft geen instructies

M3 PROJECT

Slide 13 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 14 - Tekstslide

Startklaar zitten.
Voorkennis activeren 

Slide 15 - Tekstslide

Deze slide heeft geen instructies

Kolommen
Cel
Rijen

Slide 16 - Sleepvraag

Deze slide heeft geen instructies

Welke formule vermenigvuldigt twee getallen?
A
=A1 - B1
B
=A1 + B1
C
=A1 / B1
D
=A1 * B1

Slide 17 - Quizvraag

Deze slide heeft geen instructies

Hoe deel je in Excel?
A
=A1 + B1
B
=A1 - B1
C
=A1 / B1
D
=A1 * B1

Slide 18 - Quizvraag

Deze slide heeft geen instructies

Wat is de formule voor optellen in Excel?
A
=A1 * B1
B
=A1 / B1
C
=A1 - B1
D
=A1 + B1

Slide 19 - Quizvraag

Deze slide heeft geen instructies

Leerdoelen
Aan het einde van de les kun je in Excel een eenvoudige tabel opmaken door:

  • Het lettertype en de lettergrootte aan te passen via het lint 'Start'.
  • De tekst vet of cursief te maken.
  • De achtergrondkleur van cellen te veranderen.
  • Randen om de cellen te zetten.
  • De tekst in de cellen links, midden of rechts uit te lijnen.

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Het lint van excel
Het lint is de basis om veel dingen te doen met excel


Laten zien aan de klas

Slide 21 - Tekstslide

Deze slide heeft geen instructies

Het lint van excel
Gebruik de volgende opmaak voor jouw tabel aan producten:

Jouw gekozen kleur dien je ook te gebruiken voor jouw achtergrondkleur
in jouw excel

Slide 22 - Tekstslide

Deze slide heeft geen instructies

Ik kan nu de start lint van excel goed gebruiken
Ja
Deels
Nee

Slide 23 - Poll

Deze slide heeft geen instructies

Wat doet de knop 'Opmaak'?
A
Voegt opmerkingen toe
B
Wijzigt de celopmaak
C
Verwijdert rijen
D
Maakt een nieuwe werkmap

Slide 24 - Quizvraag

Deze slide heeft geen instructies

Welke knop vind je op het startlint?
A
Opslaan als sjabloon
B
Gegevens sorteren
C
Vetgedrukt tekst
D
Grafiek toevoegen

Slide 25 - Quizvraag

Deze slide heeft geen instructies

Afsluiting
  1. Vergeet niet in te leveren eind deze week!!!

Slide 26 - Tekstslide

Deze slide heeft geen instructies

Voor de volgende keer
  • Maak de tekening in Visual Paradigm af.
  • Maak een Word-bestand aan voor je portfolio in OneDrive.
  • Plak een screenshot van het gemaakte netwerk in je portfolio.

Volgende les Alles over IP-addresen en DNS!

Slide 27 - Tekstslide

Deze slide heeft geen instructies

Netwerken Protocollen

Slide 28 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 29 - Tekstslide

Startklaar zitten.
Voorkennis Activeren

Slide 30 - Tekstslide

Deze slide heeft geen instructies

Leerdoel (Netwerken)
  • Aan het einde van deze periode kunnen leerlingen uitleggen wat een protocol is, de functies en verschillen beschrijven tussen de protocollen IP, HTTP, HTTPS, TCP, UDP, SMTP en FTP, en eenvoudige voorbeelden geven van waar en hoe deze protocollen in het dagelijks leven worden toegepast.

Slide 31 - Tekstslide

Deze slide heeft geen instructies

subdoelen
  1. Leerlingen begrijpen wat een protocol is en waarom protocollen belangrijk zijn in computernetwerken.
  2. Leerlingen kunnen de basisfuncties van elk protocol (HTTP, HTTPS, TCP, UDP, SMTP, FTP) beschrijven.
  3. Leerlingen kunnen praktische voorbeelden geven van het gebruik van deze protocollen (bijv. HTTPS voor beveiligde websites, SMTP voor e-mail).
  4. Leerlingen herkennen de verschillen tussen transportprotocollen (TCP, UDP) en toepassingsprotocollen (HTTP, SMTP, FTP).

Slide 32 - Tekstslide

Deze slide heeft geen instructies

Lesdoel
Aan het einde van de les kunnen de leerlingen het verschil tussen HTTP en HTTPS uitleggen en de functies van de HTTP-methodes GET, POST, PUT en DELETE toelichten. Daarnaast kunnen zij elke methode minimaal één keer correct simuleren in een offline situatie.

Slide 33 - Tekstslide

Deze slide heeft geen instructies

Lesdoel
Aan het einde van de les kunnen leerlingen het verschil tussen HTTP en HTTPS uitleggen en de functies van de HTTP-methodes GET, POST, PUT en DELETE toelichten. Daarnaast kunnen zij elke methode minimaal één keer correct simuleren in een offline situatie.

Slide 34 - Tekstslide

Deze slide heeft geen instructies

Het HTTP en HTTPS protocol
Zijn afspraken hoe een computer met een website kan praten.

Voorbeeld:
Als je naar een website zoals www.leukespellen.nl gaat, zegt je computer:

"Hallo, website! Kun je me de pagina met spelletjes sturen?" Dit noemen wij een HTTP request

De website antwoordt dan met:
"Hier is de pagina die je wilde zien!" Dit noemen wij een HTTP response

Slide 35 - Tekstslide

Deze slide heeft geen instructies

Het verschil tussen HTTP en HTTPS
HTTP niet beveiligd HTTPS wel beveiligd. Het wordt versleuteld

HTTP   = Hypertext Transfer Protocol
HTTPS = Hypertext Transfer Protocol Secure

Hypertext =  de code van de website is meestal gemaakt met tekst

Transfer = het verplaatsen van die tekst

Protocol = afspraken/regels hoe dat gaat gebeuren

Slide 36 - Tekstslide

Deze slide heeft geen instructies

Wat is een voordeel van HTTPS?
A
Versleutelde gegevensoverdracht
B
Snellere laadtijd
C
Geen advertenties
D
Minder dataverbruik

Slide 37 - Quizvraag

Deze slide heeft geen instructies

Wat betekent de 's' in HTTPS?
A
Veilig
B
Standaard
C
Simpel
D
Snel

Slide 38 - Quizvraag

Deze slide heeft geen instructies

Waar staat de afkorting 'HTTP' voor?
A
Hipertekst Transfer Proces
B
Hypertext Transport Protocol
C
Hypermedia Transfer Protocol
D
Hypertext Transfer Protocol

Slide 39 - Quizvraag

Deze slide heeft geen instructies

Facebook
Op onze facebookpagina kunnen wij:

  1. Een bericht van een ander lezen
  2. Eigen bericht plaatsen
  3. Ons bericht aanpassen
  4. Ons bericht verwijderen
Bericht posten
Bericht verwijderen of aanpassen
Berichten ophalen

Slide 40 - Tekstslide

Deze slide heeft geen instructies

Facebook in termen van HTTP(S)-methode
HTTP(s) kent 4 methodes:
GET, POST, PUT en DELETE

Op onze facebookpagina kunnen wij:

  1. Een bericht van een ander lezen GET
  2. Eigen bericht plaatsen POST
  3. Ons bericht aanpassen PUT
  4. Ons bericht verwijderen DELETE

In groepjes ontdekken wat het doel is van elke methode?

Slide 41 - Tekstslide

Deze slide heeft geen instructies

HTTP(S)-methode (GET, POST, PUT, DELETE)
GET /api/posts HTTP/1.1
Host: www.facebook.com

response is:



POST /api/posts HTTP/1.1
Host: www.facebook.com

response is:




Slide 42 - Tekstslide

Deze slide heeft geen instructies

Opdracht maken
In teams staat de Opdracht Netwerk periode 2. Ga daarmee aan de slag met het document HTTP, TCP en UPD.


LET OP je maakt een eigen document, noem deze Portfolio Netwerk


Slide 43 - Tekstslide

Deze slide heeft geen instructies

Afsluiting
  1. Ik kan de begrippen router, modem, switch en server uitleggen en weet wat die doen.
  2. Ik kan het begrip netwerk uitleggen en enkele voorbeelden geven van netwerken.
  3. Ik kan het begrip ISP uitleggen en ik kan enkele voorbeelden geven.

Slide 44 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!
Tellie in zakkie

Slide 45 - Tekstslide

Startklaar zitten.
Voorkennis Activeren

Slide 46 - Tekstslide

Deze slide heeft geen instructies

Lesdoel
Aan het einde van de les kunnen leerlingen het verschil tussen HTTP en HTTPS uitleggen en de functies van de HTTP-methodes GET, POST, PUT en DELETE toelichten. Daarnaast kunnen zij elke methode minimaal één keer correct simuleren in een offline situatie.

Slide 47 - Tekstslide

Deze slide heeft geen instructies

Het HTTP en HTTPS protocol
Zijn afspraken hoe een computer met een website kan praten.

Voorbeeld:
Als je naar een website zoals www.leukespellen.nl gaat, zegt je computer:

"Hallo, website! Kun je me de pagina met spelletjes sturen?" Dit noemen wij een HTTP request

De website antwoordt dan met:
"Hier is de pagina die je wilde zien!" Dit noemen wij een HTTP response

Slide 48 - Tekstslide

Deze slide heeft geen instructies

Het verschil tussen HTTP en HTTPS
HTTP niet beveiligd HTTPS wel beveiligd. Het wordt versleuteld

HTTP   = Hypertext Transfer Protocol
HTTPS = Hypertext Transfer Protocol Secure

Hypertext =  de code van de website is meestal gemaakt met tekst

Transfer = het verplaatsen van die tekst

Protocol = afspraken/regels hoe dat gaat gebeuren

Slide 49 - Tekstslide

Deze slide heeft geen instructies

Facebook
Op onze facebookpagina kunnen wij:

  1. Een bericht van een ander lezen
  2. Eigen bericht plaatsen
  3. Ons bericht aanpassen
  4. Ons bericht verwijderen
Bericht posten
Bericht verwijderen of aanpassen
Berichten ophalen

Slide 50 - Tekstslide

Deze slide heeft geen instructies

Facebook in termen van HTTP(S)-methode
HTTP(s) kent 4 methodes:
GET, POST, PUT en DELETE

Op onze facebookpagina kunnen wij:

  1. Een bericht van een ander lezen GET
  2. Eigen bericht plaatsen POST
  3. Ons bericht aanpassen PUT
  4. Ons bericht verwijderen DELETE

In groepjes ontdekken wat het doel is van elke methode?

Slide 51 - Tekstslide

Deze slide heeft geen instructies

HTTP(S)-methode (GET, POST, PUT, DELETE)
GET /api/posts HTTP/1.1
Host: www.facebook.com

response is:



POST /api/posts HTTP/1.1
Host: www.facebook.com

response is:




Slide 52 - Tekstslide

Deze slide heeft geen instructies

Opdracht maken
In teams staat de Opdracht Netwerk periode 2. Ga daarmee aan de slag met het document HTTP, TCP en UPD.


LET OP je maakt een eigen document, noem deze Portfolio Netwerk


Slide 53 - Tekstslide

Deze slide heeft geen instructies

Afsluiting
  1. Ik kan de begrippen router, modem, switch en server uitleggen en weet wat die doen.
  2. Ik kan het begrip netwerk uitleggen en enkele voorbeelden geven van netwerken.
  3. Ik kan het begrip ISP uitleggen en ik kan enkele voorbeelden geven.

Slide 54 - Tekstslide

Deze slide heeft geen instructies

Meer lessen zoals deze

P3 WEEK 7 PROJECT M3

- Les met 55 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

Computerarchitectuur

- Les met 22 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

2e kw Dc4.4.8 Quizz Les 5

- Les met 16 slides
ICT MBOStudiejaar 2

ComTaal2

- Les met 12 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

Het TCP/IP- en Ethernet-model in netwerken

- Les met 12 slides

DGV Online vaardig H3 blz. 9 t/m 20

- Les met 21 slides
DGVMBOStudiejaar 2

Wk 5 Les 2 Een compleet netwerk

- Les met 25 slides
ICTMBOStudiejaar 1,4

HTML & CSS 0 - introductie

- Les met 19 slides
InformaticaWOStudiejaar 4,5