Modul 07. Frontend kode

Øvelser.

7.1 Miniprojekt: Et feriesite

Ærø er det perfekte sted for en cykeltur, en romantisk gåtur eller hygge. Dvs. købstadsidyl, fred, ro og afslapning. Men det appelerer nok ikke så meget til unge, som det gør til børnefamilier og folk på +50 år. Jeg har lavet et site om Ærø. Her er mit site: https://codeprojects.org/projects/weblab/EjL_n_mRsCWqi-MsQc81sBQ73dhOOtc06BBKRm-V818/. Brug 5 minutter på at studere det sammen med naboen. Hvad kan det, hvad gør det?

Lav et site om et feriested, som du gerne vil besøge som turist. Alternativt lav et site om fanside for en popstjerne, sportsklub, mode, biler eller lignende. Du må stjæle kode fra andre lige så tosset, du vil, bare du kan gøre rede for koden. Her er kravene:

  • Snak gerne med naboen, men opgaven er individuel
  • Sitet skal have mindst 3 sider
  • Alle 3 skal have en <h1> overskrift
  • Navigationen/menuen skal være en unordered list med link, og den skal ligge lige under overskriften
  • Man skal kunne navigere mellem alle sider fra alle sider
  • Der skal være et link ud af huset. Lige som jeg linkede til færgeselskaberne på mit Ærø-site
  • Der skal være kommentarer
  • Du skal have koden <meta charset=”UTF-8″> med
  • Der skal være billeder på alle sider
  • Indsæt link under kontakt, så der er link til email og telefon
  • Du skal have indsat en passende video på en af siderne
  • NYT: Du skal have en tabel på mindst 1 af siderne
  • Du skal have indsat en Youtube video på en af siderne

Bonusopgaver

  • Lav flere sider
  • Prøv ideer med HTML fra w3schools.com af, store som små ideer. F.eks. kan du lave fed tekst mv.
  • Lav et google map og indsæt det som en iframe

Lidt kodeinspiration

Det første link er “internt”. Dvs. at det linker til en fil, der ligger på samme website. Nr. 2 link linker “ud af huset” til Danmarks Radio. Derfor får den attributten target =”_blank” på. Det gør, at den åbner i et faneblad for sig.

<a href="index.html">Forside</a>
Link til <a href="www.dr.dk" target="_blank">Danmarks Radio</a>

Der findes andre slags link. Det øverste link åbner et mailprogram som f.eks. Outlook, hvis du har et mailprogram installeret. Det nederste vil forsøge at ringe til nummeret, hvis du kikker på det på en mobiltelefon. Begge dele er brugervenligt.

<a href="mailto:info@min-organisation.dk">info@min-organisation.dk</a>
<a href="tel:+4511223344">+45 11 22 33 44</a>

Nedenfor har jeg indsat koden. Prøv selv, gerne på mobilen.

7.2 CSS mv.

Styl din hjemmeside. Hvis du er i tvivl om, hvordan du løser opgaven, så brug w3schools!

  • Du skal have et centralt stylesheet, som du styler ud fra.
  • Start med at style skriften, baggrunden og lignende “almindeligheder”
  • Lav overskriften til en vandret menu
  • Styl baggrunden på overskriften, så det ser pænt ud
  • Styl link, så de får en anden farve end de er “født” med.

Bonusopgaver

  • Brug <div> tags til at opbygge siden

For de virkeligt avancerede:

  • Lav animationer
  • Brug Bootstrap

Forberedelse. Mest til underviseren