Oppgave webdesign VG1 MK uke 6-7
Mål:
Du skal lære grunnleggende HTML og CSS, det vil si at du skal kunne bruke de vanligste
HTML-taggene og kunne endre utseende på disse ved å bruke CSS.
Du skal kunne lage en enkel nettside med et enkelt design og en navigeringsmeny, og kunne
sette inn bilder og tekst på en forside og tre undersider.
Vite hvordan internettet fungerer, hvordan det oppstod og hvordan det har utviklet seg.
Lærestoff:
Læringssti på NDLA:
Internett og programmering
W3schools.com:
HTML5 Tutorial
CSS Tutorial
Case:
Du skal lage et nettsted til din egen mediebedrift. Du kan bruke egne eller andres bilder. Det
skal være bilde og tekst på alle sidene. Logo og tekst må du lage selv.
Oppgave 1:
Forklar disse HTML-taggene:
html, body, head, p, h1, img, a href, header, nav, ul, li, section, aside, footer, div id, div class
Oppgave 2:
Svar på spørsmålene om CSS:
1. Hva står CSS for?
2. Forklar og gi navn på alle delene i denne kommandoen: h1 {font-family: Arial,
Helvetica; color:#FFF; }
3. Forklar hva margin er, f. eks. som vist her: img {margin:0;}
4. Forklar hva padding er, f.eks. som vist her: nav {width: 98%: margin:0; padding:1%;}
5. Hva er tegnet man skriver i CSS foran navnet på en div id?
6. Hva er tegnet man skriver i CSS foran navnet på en div class?
7. Forklar disse forskjellige måtene å plassere en div på (CSS Position): static, relative,
absolute og fixed
8. Hva betyr denne kommandoen: div {float:left}
9. Forklar hva en opening og closing tag er og gi et eksempel.
10. Hvorfor bør alle filer som tilhører nettstedet ligge i samme mappe?
Oppgave 3
Forklar hvordan du linker en html-side med et stilark
Oppgave 4
Hvordan skrives en kommentar i et html-dokument? Og i et CSS-dokument?
Oppgave 5
Hva er file extension eller filtype i dette eksemplet: index.html
Oppgave 6
Hva må filen som er hovedsiden til nettstedet alltid hete?
Oppgave 7
Lag en forside til et nettsted med disse html-taggene inkludert:
header, nav, section, aside, footer
h1, h2, h3, h4, p, a href, img src,
Oppgave 8
Lag et stilark (style.css) som du kobler til forsiden. Lag style til alle html-taggene i oppgave 7
og velg, plassering, farge, fonter, størrelse etc.
Oppgave 9
Lag tre undersider, med samme oppsett som forsiden, og link alle sidene sammen i menyen.
Skriv egen tekst på alle undersidene. Sett inn egne eller andres bilder.
Oppgave 10
Lag en meny (nav) der du lager linker til «Hjem» og tre undersider
Innlevering
Du skal levere oppgave 1-6 i et Word-dokument i fronter.
Oppgave 7-10 blir til slutt et nettsted, og dette skal leveres som en zippet mappe i fronter.