De komende lessen ga je je meer verdiepen in HTML5. Je zal merken dat de structuur van een HTML5-document er anders uitziet dan de oudere HTML4. Waar je voor de navigatie in de oude stijl <div id=”nav”></div> gebruikt, zal je bijvoorbeeld bij HTML5 <nav></nav> gebruiken voor de navigatie. Beide manieren worden veel gebruikt online en kennis van beide manieren is dus belangrijk.
We gaan een kleine recepten-website opzetten in HTML5. Je mag deze website vormgeven zoals je zelf wilt. De website komt in je container te staan. Voor deze les heb je vier uur op school en vier uur thuis nodig.
Opdracht
- Maak een mini-website van vier pagina’s in HTML5:
- Pagina 1: (index.html) voorgerecht
- Pagina 2: hoofdgerecht
- Pagina 3: nagerecht
- Pagina 4: contact
- Gebruik de aangeleverde tekst met recepten. Kies hieruit één voorgerecht, één hoofdgerecht en één nagerecht.
- Op elke recept-pagina komt een plaatje dat te maken heeft met het gerecht. Je zoekt dat plaatje op internet (denk aan het formaat en de proporties, je mag in Photoshop een uitsnede maken).
- Op elke recept-pagina komt een advertentie van Smulweb.
- Pagina 4 (contact) bevat een emaillink naar je eigen MA mail met als onderwerp: kom je bij mij eten? Plaats in deze pagina ook een Google-maps naar jouw huisadres en een link naar http://www.smulweb.nl/recepten welke opent in een nieuw tabblad.
- Elke pagina bevat een navigatie menu in een ongeordende lijst.
Benodigdheden
Voor deze opdracht gebruiken we het lesmateriaal op Lynda.com. Je kunt hier veel informatie vinden over HTML 5. Let op: de filmpjes zijn Engels gesproken.
- Log eerst in op Lynda.com. Ga dan naar de les “HTML5: Structure, Syntax and Semantics” (door James Williamson).
TIP: Inloggen op Lynda.com
Surf naar www.lynda.com. Klik rechtsboven op “Sign In”. In de volgende pagina klik je op “Sign in with your organization portal”. Daarna vul je in: “www.ma-web.nl” en klik op Continue. Klik op “Log in met je schoolaccount” en selecteer “Mediacollege Amsterdam”. Klik op Verder. Vul in de volgende pagina je (Ma) inloggegevens in. Hierna wordt je verder geleid naar Lynda.com en ben je ingelogd.
Bekijk/gebruik de volgende hoofdstukken:
- Introduction
- Hoofdstuk 1: HTML5 and Semantics
- Hoofdstuk 2: Document Structure
- Structuring HTML5 documents (belangrijk)
- Defining HTML5 documents (belangrijk)
- Hoofdstuk 3: Grouping content with HTML5
- Working with figure and figcaption (belangrijk)
- Grouping content with asides. (belangrijk)
- Voor alle Front-end codes gebruik je www.w3schools.com.
Specifiek over HTML5 www.w3schools.com/html/ - Aangeleverde tekst: Recepten
- Slide: HTML5
- Slide: Container opzetten
- Video: FileZilla installeren
- Video: Je werk uploaden (belangrijk)
- Video’s over het gebruik van CSS: Hoofdstuk 5 en 7 op deze pagina
- [printfriendly]
Inleveren
Website
- Inleverdatum: 15 december
- Bestandstype: online website
- Locatie: in je 2e jaar container onder de naam “Taste 4U”
Beoordelingscriteria
Structuur
- Alle pagina’s hebben een unieke en relevante title
- Alle pagina’s hebben een unieke en relevante h1.
- De menu items staan in een ongeordende lijst.
- Er is op de juiste manier gebruik gemaakt van de HTML5-tags: <header>, <nav>, <main>, <article>, <section>, <aside><figure>
- Alle links werken.
Content
- Advertentie van Smulweb is aanwezig binnen de juiste HTML5 tag.
- Alle plaatjes zijn relevant, in proportie, gecomprimeerd en hebben een juiste naam.
- Alle (opmaak)tags zijn toegepast zoals aangegeven in de aangeleverde tekst.
- In de contactpagina staat een emaillink naar jouw ma-mail met een onderwerp.
- In de contactpagina staat een Google-maps van jouw huisadres.
- In de contactpagina staat een link naar Smulweb, welke opent in een nieuw tabblad.
Organisatie
- Alle pagina’s en bestanden hebben een relevante naam in onderkast zonder spaties.
- Alle bestanden zitten in de juiste map en hebben de juiste extensies.
- Alle pagina’s zijn foutloos (HTML-validatie).
- De website staat in jouw 2e jaar container.