Vak PROG,
Auteur CHRBER,
Niveau 4,
Cohort 2024,
Periode 1 | PDF
|
| Lesweek | Theorie | Praktijk | Evaluatie |
| 1 | Hoofdstuk 1 - Webtalen, browsers en editors
• Een snelle terugblik
• Kennismaken met HTML en CSS
• Browsers
• HTML-editors
• Aanvullende hulpmiddelen
| Introductie HTML en CSS
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
| • Opdrachten succesvol afgerond
|
| 2 | 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
|
| 3 | 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
|
| 3 | 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
|
| 4 | 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
INTERNET: html media.asp
| • Opdrachten succesvol afgerond
|
| 4 | 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.
INTERNET: html forms.asp
| • Het formulier moet ten minste vijf verschillende <input> elementen bevatten.
|
| 5 | 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>
INTERNET: html tables.asp
| • De tabel bevat een prijslijst van een bakker, met daarin de soorten brood en de prijzen.
|
| 6 | 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
|
| 7 | Hoofdstuk 9 - Lay-out
• Begrippen: Cascading Style Sheets (CSS), Box Model, Weergavemodel
| | • Opdrachten succesvol afgerond
|
| 8 | Hoofdstuk 10 - Lay-outs maken met CSS
| | • Opdrachten succesvol afgerond
|
| 9 | Project website ouderavond
| • Opleveren website ouderavond
| • De website moet ten minste de volgende onder werpen behandelen: organisatie van de opleiding, inhoud van de opleiding
|
| 10 | Project website ouderavond
| • Opleveren website ouderavond
| • Herkansing
|
Vak PROG,
Auteur CHRBER,
Niveau 4,
Cohort 2024,
Periode 2 | PDF
|
| Lesweek | Theorie | Praktijk | Evaluatie |
| 1 | Hoofdstuk 11 - Kleur, randen en achtergronden
• Kleurwaarden
• Kleur van tekst
• De achtergrond
• Kleurverlopen
• Afgeronde hoeken
• Randafbeelding
• Schaduw
| Coderen van visuele elementen
| • Oefeningen
|
| 2 | 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
|
|