Terug naar www.aaappp.nl/informatica

Fundament Programmeren: HTML5 en webdesign HTML5+CSS3

Met deze cursus leer je websites bouwen met de nieuwste technieken: HTM5 en CSS3.

Tip: indien je ook thuis wilt werken, kan je Dreamweaver downloaden en gratis een maand gebruiken.

Extra uitleg en aanvullende informatie

Selecteer Fundament Programmeren en vervolgens HTML5 en webdesign.
Bestudeer hoofdstuk 1-6 en maak de opdrachten H2 1+2, H3 1+2+3, H4 1, H5 1+2 en H6 1+2.
Webpagina maken In de cursus gebruiken ze HTML-kit. Die software is op school niet geïnstalleerd.
Daarom moet je op school Windows Notepad (= Kladblok) of Dreamweaver gebruiken.
Dreamweaver is de meest geavanceerde software om websites te bouwen.
Het voordeel van Kladblok is dat je heel simpel kan beginnen.
Dreamweaver is vooral handig als je al wat meer over HTML5 en CSS3 weet.
Begin daarom met Kladblok. Daarna kan je overstappen op Dreamweaver voor het echte werk.
Hier staat een beetje uitleg over Dreamweaver en vooral hoe je met Kladblok je eerste webpagina's kunt maken.
De bestanden van je website sla je op in een map. Om ook thuis te kunnen werken aan je website of om je complete website in te leveren op de ELO van Magister of om een backup te maken, is het handig om een gecomprimeerde map te maken in een ZIP-bestand. Dat ZIP-bestand kan je namelijk gemakkelijk kopiëren en opsturen.
HTML5 en style Webpagina's zijn HTML-bestanden. Met HTML5 specificeer je de structuur van een webpagina. Met CSS3 specificeer je de opmaak van een webpagina.
De webpagina's: No style, Inline style, Embedded style en External style demonstreren de samenhang tussen HTML en CSS.
Absoluut perfecte websites In het kader van een opdracht over ontwerprichtlijnen in H7 van de cursus, maken de leerlingen van 4Hin1, 4Vin2 en 4Vin2 een lijst van absoluut perfecte websites.
HTML5 CSS3 voorbeeld Voorbeeld webpagina van R. Koortens met HTML5 en CSS stijlblad - startpagina en 2 vervolgpagina's.
In het voorbeeld werken niet alle links. Alleen de links met "(vervolg)" en "(index)" doen het. Je moet even zoeken.
Als je in een internet browser het window met het voorbeeld kleiner maakt, zie je de kleur van de buitenrand veranderen van grijs (PC-scherm) via geel (tablet-scherm) naar rood (telefoon-scherm). En op de vervolgpagina met de aside gaat ook de aside ergens anders naartoe. Dit is een voorbeeld van responsive webdesign.
Download html5_leerlingen.zip Dit is het ZIP-bestand met de gecomprimeerde map die hoort bij de voorbeeld webpagina van R. Koortens.
Pak het ZIP-bestand uit en gebruik de mappenstructuur en de pas de bestanden aan voor je eigen webpagina.
In de cursus staat veel informatie over HTML5 en CSS3. Met Dreamweaver kan je allerlei dingen opzoeken. Verder kan je alles over HTML5 en CSS3 vinden op het internet. Professionele webdesigners zoeken ook gewoon op het internet met Google.
Als je met Google naar informatie over HTML5 en CSS3 zoekt, kom je vaak hier terecht, want hier staat letterlijk alle informatie over HTML5 en CSS3.
Controleer of je webpagina's en CSS-bestanden voldoen aan de HTML5 en CSS3 standaarden.
W3C CSS Validation Gebruik de optie Valideer via het uploaden van een bestand om de CSS3 van je webpagina's te valideren.
Zie H4.4 CSS code valideren van de cursus.
W3C Markup Validation Gebruik de optie Validate by File Upload om de HTML5 van je webpagina te valideren. Doe dit voor al je webpagina's.
Zie H1.6 van de cursus bij Je pagina valideren.
De resultaten van de HTML5 webdesign cursus 2016/2017
What are the main HTML and CSS components every 2016 modern page should have?
Why do big websites use such weird CSS?
What are the things one needs to know to develop a full fledged website like Facebook or Quora?
CodePen is a playground for the front end web
YouTube op je webpagina  
Versies Deze website is voortdurend in ontwikkeling en hoort nog lang niet tot de categorie van absoluut perfecte websites. In het kader van aanschouwelijk onderwijs over websites bouwen, is het mogelijk om alle oudere versies van deze website terug te zien sinds 31 augustus 2016.
p.van.diepen@sanctamaria.nl Indien je suggesties hebt om deze website te verbeteren, verzoek ik je om een e-mail met de verbeteringen te sturen naar je docent.