Auteur: CHRBER | Alle Rijen | PDF | RTF

Programma ICT Academie

Overzicht | Detail | Lesvoorbereiding
Planning | Mesoplus | Leereenheid
ALA | OKV
Documentatie

Vak PROG, Auteur CHRBER, Niveau 4, Cohort 2024, Periode 1 | PDF

LesweekLeerdoelTheorieLesstofPraktijkOpdrachtEvaluatieMiddelenTijd
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

LesweekLeerdoelTheorieLesstofPraktijkOpdrachtEvaluatieMiddelenTijd
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