Forberedelse
- Repeter evt. kapitel 5 og 6 kort
- Læs det lille kapitel 7
- Vi skal arbejde i Visual Studio Code
Formål
- Repetere HTML og CMS
- Repetere links, billeder o. lign
- Snakke om semantiske tags
Fælles gennemgang
Fra sidst
- Hvad karakteriserer fontend kode
- Hvor placerer vi CSS
- Giv et eksempel på, hvordan man skriver HTML
- Hvad er et “site”, “en hjemmeside” og en “side”
- Hvordan bygger vi en god struktur op. Forklar ud fra princippet om “separation of concerns”
- Hvad er en klasse, og hvad kan vi bruge det til
Lektien til denne gang
- Hvem er Google Prinsessen, hvad er SEO og hvorfor er SEO vigtigt
Øvelser
Inden du går i gang:
- Du kan altid få hjælp hos w3schools.com
- Du kan også få hjælp i mine videoer: Se videoer 4. HTML og CSS kode
- Du må godt arbejde sammen med en makker, men sitet skal laves i VIsual Studio Code
13.1 Lav et site for en restaurant
Du skal nu lave en hjemmeside for en restaurant. Vælg mellem disse temaer: En dyr restaurant med gourmet-mad a la Alchemist i København, en etnisk restaurant: Vietnamesisk, italiensk o.lign, en økologisk restaurant, en ølbar eller en burgerbar. Alternativt bestem selv et tema.
- Du skal lave en sitemappe
- Du skal have mindst 1 forside og 2 undersider
- Der skal være kontaktoplysninger på siden
- Du skal have farver på siderne
- Der skal være et billede på hver side + alt–atributten
- Man skal kunne navigere mellem alle siderne
- Du skal have mindst 1 video fra YouTube indsat
- Du skal lave SEO på 1 af siderne
- Sørg for at indsætte kode, der kan undgå problemer med æ, ø og å
- På en af siderne skal du lave en tabel med en oversigt over, hvornår du svarer på telefonopkald. Du skal gøre det i en tabel, som skal se sådan ud:
Ugedag | Åbningstider |
---|---|
Mandag | Lukket |
Tirsdag, onsdag og torsdag | 12:00 – 20:00 |
Fredag, lørdag og søndag | 12:00 – 21:00 |
- På kontaktsiden skal du have 3 links til relevante websider. Links’ne skal være i en liste
- Lav mindst 1 klasse i CSS
- Vis, at du kan style link
- Til sidst: Vis, at du kan lege med CSS. Det giver pluspoint at kunne bruge sin fantasi og hente kode ind fra nettet, også kode, som jeg ikke nødvendigvis har gennemgået