Vak PROG,
Auteur CHRBER,
Niveau 4,
Cohort 2024,
Periode 1 | PDF
|
| Lesweek | Leerdoel | Theorie | Lesstof | Praktijk | Opdracht | Evaluatie | Middelen | Tijd |
| 1 | | Hoofdstuk 1 - Webtalen, browsers en editors; | • Een snelle terugblik
• Kennismaken met HTML en CSS
• Browsers
• HTML-editors
• Aanvullende hulpmiddelen
| Introductie HTML en CSS | | • Opdrachten succesvol afgerond
| BOEK: P. Doolaard (2019). HTML5 & CSS3, vijfde editie, ISBN: 978-94-6356-081-8.
APPARAAT: laptop met web-browser
• Little Web Hut: http://www.littlewebhut.com
| 2 |
| 2 | • markeren
• markeren
• markeren
| Hoofdstuk 2 - De basis van HTML5; | • Kenmerken van HTML-documenten
• Elementen, tags en tekst
• Attributen
• Nieuw in HTML5
• De basis van een HTML5-document
• Paginastructuur
• Document Object Model – HTML DOM
• De outline van een document
• Het contentmodel van HTML5
• Secties markeren – theorie
• Secties markeren – praktijk
• Weergave in oude browsers
| Je eerste HTML document | • Maak een HTML document waarin de volgende elementen voorkomen: <article>, <section>, <nav>, <aside>, <footer>, <address>, <main>, <div>
| • Opdrachten succesvol afgerond
| | 2 |
| 3 | • markeren
• markeren
• markeren
• groeperen
| Hoofdstuk 3 - Tekst markeren; | • Koppen markeren
• Tekst markeren
• Speciale betekenis aangeven
• Inhoud groeperen
• Speciale tekens in webpagina’s
| Opbouwen documentstructuur | • Maak een UTF-8 gecodeerd HTML document waarin de volgende elementen voorkomen: <p>, <br>, <pre>, <blockquote>, <ol>, <ul>, <li>, <figure> <figcaption>, <dl>, <dt>, <dd>, <hr>
| • Opdrachten succesvol afgerond
| | 2 |
| 3 | • markeren
• coderen
| Hoofdstuk 4 - Koppelingen maken; | • Verbindingen leggen met <a> (anchor)
• Klik hier voor richtlijnen
• Externe bestanden koppelen met <link>
| Coderen van hyperlinks | • Maak een HTML document waarin de volgende soorten links voorkomen: Stylesheet, favicon, HTML document, Prefetch
| • Opdrachten succesvol afgerond
| | 2 |
| 4 | • coderen
• coderen
| Hoofdstuk 5 - Beeld, geluid en andere externe inhoud; | • Begrippen: URL, Bitmaps (GIF, JPEG, PNG, WEBP), Vectorafbeelding, Responsive design, Video fomats (MP4, OGG, WEBM)
• Elementen: <img>, <map>, <area>, <picture>, <source>, <iframe>, <embed>, <object>, <video>, <track>, <audio>
• Attributen: src, alt, width, height, srcset, sizes
| Coderen van multimedia | • Maak een HTML document waarin de volgende content is gecodeerd: JPEG afbeelding, SVG afbeelding, MP4 video, inline frame met Vimeo of Google Maps content
| • Opdrachten succesvol afgerond
| INTERNET: html media.asp
| 2 |
| 4 | • markeren
• coderen
| Hoofdstuk 6 - Formulieren maken; | • Begrippen: Server/client, JavaScript, reguliere expressies, Kleur (RGB)
• Elementen: <form>, <input>, <label>, <button>, <select>, <datalist>, <option>, <textarea>
• Attributen: action, method, enctype, autocomplete, autofocus, name, type, required, selected
| Coderen van formulieren | • Maak een HTML-formulier waarmee bezoekers van een website boodschappen bij een on-line supermarkt kunnen doen.
| • Het formulier moet ten minste vijf verschillende <input> elementen bevatten.
| INTERNET: html forms.asp
| 2 |
| 5 | • coderen
| Hoofdstuk 7 - Tabellen maken; | • Begrippen: CSS, Kleur
• Elementen: <link>, <table>, <caption>, <tr>, <td>, <caption>, <thead>, <tfoot>, <tbody>
• Attributen: rel (relationship), colspan, rowspan, width, border, class
• Eigenschappen: width, margin, padding, border, background-color, line-height
| Coderen van tabellen | • Maak een HTML document waarin ten minste de volgende elementen voorkomen: <table>, <tr>, <td>
| • De tabel bevat een prijslijst van een bakker, met daarin de soorten brood en de prijzen.
| INTERNET: html tables.asp
| 2 |
| 6 | • coderen
| Hoofdstuk 8 - De basis van CSS; | • Begrippen: Cascading Style Sheets (CSS)
• Elementen: <div>, <table>
• Attributen:
• Eigenschappen: position, padding (voering), margin (afstand), width
| Coderen in CSS; | | • Opdrachten succesvol afgerond
| | 2 |
| 7 | • markeren
| Hoofdstuk 9 - Lay-out; | • Begrippen: Cascading Style Sheets (CSS), Box Model, Weergavemodel
| | | • Opdrachten succesvol afgerond
| | 2 |
| 8 | • markeren
| Hoofdstuk 10 - Lay-outs maken met CSS; | | | | • Opdrachten succesvol afgerond
| | 2 |
| 9 | • markeren
• coderen
• opleveren
| Project website ouderavond; | | | • Opleveren website ouderavond
| • De website moet ten minste de volgende onder werpen behandelen: organisatie van de opleiding, inhoud van de opleiding
| | 20 |
| 10 | • opleveren
| Project website ouderavond; | | | • Opleveren website ouderavond
| • Herkansing
| | 20 |
Vak PROG,
Auteur CHRBER,
Niveau 4,
Cohort 2024,
Periode 2 | PDF
|
| Lesweek | Leerdoel | Theorie | Lesstof | Praktijk | Opdracht | Evaluatie | Middelen | Tijd |
| 1 | • markeren
• coderen
| Hoofdstuk 11 - Kleur, randen en achtergronden; | • Kleurwaarden
• Kleur van tekst
• De achtergrond
• Kleurverlopen
• Afgeronde hoeken
• Randafbeelding
• Schaduw
| Coderen van visuele elementen | | • Oefeningen
| | 2 |
| 2 | • markeren
• ontwerpen
| Hoofdstuk 12 - Lay-outs maken; | • Media queries en responsive design
• Media queries: breekpunten in de lay-out
• Lay-out met positionering en floats
• Flexibele lay-out met flexbox
• Flexcontainers en flexitems
• Het assenstelsel van de flex-flow
• Flexitems schalen
• Flexitems uitlijnen
• Een lay-out maken met flexbox
• Verder ontdekken
| Ontwerpen van lay-outs | | • Oefeningen
| | 2 |