HTML 5


Werkprocessen, leerdoelen, etc.


TRAINING HTML (totaal Periode 1 ongeveer 4 uurtjes video-instructies)

1. Introductie (totaal 31 min. videos)

  1. Wat is HTML (07:38)
  2. Mappenstructuur (05:48) Noem je map niet DIR maar REA
  3. TextWrangler (02:26) download TextWrangler
  4. HTML bewaren (02:16)
  5. HTML compleet maken (07:58)
  6. h1, h2, p, etc. (05:54)
Opdracht: Laat je mappenstructuur zien met daarin de index.html.

 

Meta-tags & valideren (totaal 11 min. videos)

  1. Charset (01:38)
  2. Keywords (01:30)
  3. Description (03:12)
  4. Author (01:41)
  5. HTML valideren (02:37) Check HTML!
Opdracht: Laat de meta-tags zien in je index.html (gebruik je eigen omschrijving en naam). Valideer je codes zodat ze foutloos zijn.
  1. filezilla (02:23)
  2. domein activeren + site uploaden (06:09)

Opdracht: Maak een map die heet: hoofdstuk1 (NIET KOFFERTJE!). Zet je werk online. De docent klikt op jouw link en ziet zo jouw opdracht: http://12345.hosts.ma-cloud.nl/hoofdstuk1


2. Plaatjes en links (totaal 30 min. videos)

  1. Commentaar in HTML (03:46)
  2. Enter werkt niet (02:40)
  3. Unordered list (02:09)
  4. Download (03:49) Plaatje   MP3   MP4
  5. Plaatjes (07:14)
  6. Submappen (04:18)
  7. Links maken (03:52)
  8. Link in nieuwe tab. !!!target=blank moet je onthouden, rest van codes niet op letten!!! (01:31)
  9. Email-link (01:29)
  10. Plaatje dat linkt

3.Bestanden IN je pagina i.p.v. linken (totaal 12 min. videos)

  1. Plaatje IN je pagina (05:14)
  2. Video en audio IN je pagina (02:36)
  3. Youtube embedded IN je pagina (03:48)
  4. Googlemaps embedded IN je pagina (01:15)
  5. Valideren 1. ALT ATTRIBUTE fout-melding. Bekijk dit filmpje!!! (02:29)
  6. Valideren 2 (01:20)
Opdracht: Laat je index.html zien met daarin je EIGEN plaatje, EIGEN mp3, Youtube-filmpje + GoogleMaps. Valideer je codes, zorg dat ze foutloos zijn (frameborder & src attribute in Googlemaps mag je laten zitten).

4. Mini-website (totaal 21 min. videos)

  1. Een home-pagina maken (04:00)
  2. Navigatie bouwen (03:32)
  3. Navigatie afronden (03:50)
  4. Alle pagina's maken + linken (04:51)
  5. Extra item toevoegen aan navigatie-menu (05:17)
Opdracht: Maak een mini-website (7 pagina’s) met op iedere pagina de naam van die pagina en de titel aangepast in de code. Op iedere pagina is iets anders te zien: 1.plaatje, 2.video, 3.audio, 4.youtube, 5. googlemaps, 6.email-link, 7.link naar Google geopend in tweede tab. Valideer alle pagina’s zodat ze foutloos zijn (frameborder & src attribute in Googlemaps mag je laten zitten). 

!!! Er zijn nog meer HTML5-codes, maar dat is voor nu niet zo belangrijk. Je gaat echter niet alles leren in deze filmpjes, dus zelf zoeken op internet hoort bij Webdesign !!!


5. CSS (totaal 48 min. videos)

  1. HTML-versies & W3C (05:53)
  2. CSS en style-tag (05:51)
  3. Achtergrond en kleur (03:24) link
  4. Achtergrond-afbeelding (06:00)
  5. H1 vormgeven (03:51)
  6. Volgorde van HTML en CSS (04:32)
  7. P vormgeven (02:51)
  8. Begin-kapitaal (04:34)
  9. P First-line (04:03)
  10. CSS valideren 1 (02:34)
  11. CSS valideren 2 (01:34)

Opdracht: Maak een index.html in het mapje hoofdstuk4 op de Ma-cloud, die er ANDERS uit ziet dan in de filmpjes. Dus, een ander plaatje, andere koppen, andere lettertypes, andere kleuren, andere begin-kapitaal, etc. Zorg er voor dat al je codes foutloos zijn!

Links stylen (totaal 12 min. videos)

  1. Links mooi maken (04:12)
  2. Hover (02:25)
  3. Knoppen maken (05:47)

Opdracht: Maak de resterende pagina’s (totaal 5) van je website met CSS. Zorg er voor dat je navigatie op alle pagina’s er hetzelfde uitziet. Iedere pagina laat m.b.v. een h1 de naam van de pagina zien. Iedere pagina heeft die naam ook in de titel staan. Iedere pagina heeft een ander achtergrondplaatje en op iedere pagina staat ook weer andere tekst. Kortom, je kan nu echte website maken die je zelf helemaal hebt vormgegeven. Alle linkjes moeten werken en alle codes zijn foutloos. 


6. Div’s (totaal 38 min. videos)

  1. Div wrapper (04:54)
  2. wrapper centreren (05:32)
  3. Div header (04:04)
  4. sidebar_left & content (04:21)
  5. sidebar_right & footer (04:50)
  6. margin's & padding's (06:28) voorbeeld
  7. Opslaan voor Web + schaduw (08:16)

Opdracht: Laat je gecentreerde pagina zien, onderverdeeld in header, sidebars, content en footer. Jouw pagina is BIJNA fullscreen! Dus NIET de 600 x 500 pixels zoals in de filmpjes (gewoon proberen, je merkt vanzelf hoe groot dat is). Maak gebruik van margin’s zodat er ruimte zit tussen Content en de Sidebars. Gebruik totaal andere kleuren, lettertypes en achtergrondplaatje dan in de filmpjes. Zet een schaduw achter de wrapper. Valideer je document!


7. Extern Stylesheet (totaal 24 min. videos)

  1. Grootte website aanpassen (05:13)
  2. Extern stylesheet (05:23)
  3. Alle pagina's maken (06:31)
  4. Extra navigatie-item & verschillende achtergronden (07:12)

Opdracht: Laat je website zien. Alle html-pagina’s zijn gekoppeld aan 1 stylesheet. Alle 5 pagina’s hebben een andere achtergrond. Alle links werken. Alles ziet er anders uit dan het voorbeeld zoals in de filmpjes. Alle codes zijn gevalideerd.



!!! Eindopdracht Periode 2 Festival-site !!!

Iets online zetten – hoe moest dat ook al weer (zoals gedaan bij het koffertje)

  1. filezilla downloaden (02:23)
  2. domein activeren + site uploaden (06:09)

Adobe Brackets

  1. Brackets instructie-video
  2. Download Brackets
  3. Alle filmpjes van Gerhard

Andere code-editors: Notepad++ of Sublime


HTML Periode 3

8. Mooie vormen met CSS (totaal 6 min. videos)

  1. Hoe zit het ook al weer (01:42)
  2. Ronde vormen (02:28)
  3. Alle pagina's maken (01:47)

Opdracht: Maak de volgende pagina’s na: blokken cirkels vorm


9. ID & Class (totaal 31 min. videos)

  1. class 1 (03:24) HTML-document
  2. class 2 (03:50)
  3. class 3 (02:57)
  4. class 4 (03:28)
  5. class 5 (03:35)
  6. ID (01:46)
  7. Google Fonts (02:00)
  8. Active State (03:21)
  9. Externe CSS (01:46)
  10. Exporteer, Opslaan voor Web (04:29)
  11. Icoontjes, FB, Twitter, Youtube, etc. (02:19)

Opdracht: Zet een pagina online met daarin 3 verschillende soorten links en pas de Active State toe. Zet iets in een Google-font, maak je CSS extern en valideer je codes!


10. Formulier (totaal 30 min. videos)

  1. Hoe begin ik... Voornaam (03:59)
  2. Achternaam + telefoon (02:03)
  3. Bestand uploaden (01:34)
  4. Wachtwoord (00:40)
  5. Checkbox (02:15)
  6. Radio (01:15)
  7. Keuze-menu (02:46)
  8. Textarea (01:10)
  9. Velden groeperen (02:44)
  10. Versturen en wissen (03:48)
  11. HTML valideren (01:21)
  12. Vormgeven met CSS (04:52)

Opdracht: Maak dit formulier, kies je eigen vormgeving, valideer je codes!


11. Tabellen (totaal 19 min. videos)

  1. Tabel maken (03:10) HTML-document
  2. Meer table-data (01:59)
  3. Table-header (03:10)
  4. Cellen vormgeven (03:51)
  5. Class en Euro-teken (03:03)
  6. Nog meer classes (01:46)
  7. Border-collapse (01:52)

12. Linken binnen een pagina (totaal 12 min. videos)

  1. Linken naar een ID (03:07)
  2. Fixed navigation (03:37)
  3. Hoogte aanpassen (01:07)
  4. Flexibel ontwerp (03:54)

Opdracht: Maak een pagina met minimaal 4 interne links. Valideer je codes!


13. Diversen

  1. Span style (02:23)
  2. Een mooie footer
  3. Verticaal centreren
  4. Tekst-schaduw
  5. Div-schaduw
  6. Transformeren
  7. Verloop
  8. Afgeronde hoeken
  9. Transparant met RGBA
  10. Kolommen met CSS
  11. Reflectie met CSS
  12. @Font-face
  13. Video background
  14. Extra uitleg valideren_1 (03:17)
  15. Extra uitleg valideren_2 (04:59)
  16. Extra uitleg valideren_3 (04:44)
  17. Site écht online zetten (instructie uit 2008) (07:39)
  18. Sites die er handmatig uitzien
  19. 3 Divs’s in een wrapper, gecentreerd
  20. Verticaal centreren
  21. Creatief met Div’s!
  22. 3D-transformaties
  23. Een plaatje dat linkt
  24. Tekst in een sroll-venster
  25. Navigatie centreren (<ul> <il>)
  26. Labels uitlijnen
  27. Labels al ingevuld met hints
  28. Mouse-over afbeelding die linkt

Uitleg Container (Webshop-project)