Webapplikasjoner (ITE1805) Lab 2

Bruk av stilark (CSS)

Benytt HTMLkit eller tilsvarende verktøy for redigering av HTML dokumenter og stilark.
Benytt alltid ulike nettlesere for å sjekke den koden du produserer. Dette dokumentet har flere alternative stilark definert, Firefox støtter dette, velg menyen Vis->Sidestil og prøv noen av de tilgjengelige stilene, for hver stil benyttes forskjellige stilark.

1. Bruk av eksterne stilark/CSS
   1. Legg formateringen i et eksternt stilark som du inkluderer i alle dokumentene dine. Opprett filen stilark.css, legg CSS formateringen i denne og bind disse til HTML dokumentene dine ved hjelp av LINK elementet som følger:
      <link rel="stylesheet" type="text/css" href="stilark.css" />
      Dette direktivet skal ligge i hodet på dokumentet.
   2. Legg inn formatering av et utvalg av de HTML elementene som du har benyttet i oppgave 1.
   3. Velg CSS egenskaper for elementene ved hjelp av HTMLkit's meny for dette.
   4. CSS dokumentasjon hos W3C ligger på adressen http://www.w3.org/TR/REC-CSS1, se kapittel 5.http://www.garshol.priv.no/download/text/css-intro.html er en norsk CSS intro. 
   5. Følgende egenskaper bør angis:
      • font-family, font-size, background, color, margin-left, margin-right. Benytt relative størrelser.
2. Opprett minst to dokumenter som har en hyperlenke til hverandre. Angi stilarket du har opprettet som stilark i begge dokumentene.
   1. Prøv deretter å gjøre endringer i stilarket uten å gjøre noe med HTML dokumentene og se hvordan dette påvirker visningen av dokumentene i en nettleser.
   2. Kopier inn en del tekst i dokumentet ditt og opprett 5 avsnitt som inneholder en del tekst. Avsnitt opprettes med <p> elementet. Angi en egen bakgrunn og skriftfarge for alle elementer av typen <p>.
   3. Ett av avsnittene skal ha en annen formgivning, gjør dette ved å benytte id egenskapen for dette avsnittet.
   4. Prøv ut posisjonering av elementene, opprett noen div blokker og posisjoner disse vhja. absolutt, float og fixed posisjonering, for eksempeler se nedenfor.
3. CSS validering
   • Benytt W3C sin CSS validator for validering av .css (stilark) filen din.
4. Eksempler:
   1. Eksempel på http://kark.hin.no/internett/css/css_bannertest1.html og http://kark.hin.no/internett/css/css_bannertest2.html.
   2. Studer CSS koden som ligger bak filene http://kark.hin.no/internett/css/jant1.html og http://kark.hin.no/internett/css/jant.html.
   3. Sjekk ut menyen i dokumentet http://kark.hin.no/internett/css/kryptering.html. Her benyttes a:hover, scale transformasjon og overgang "ease-out", studer dette i stilarket som benyttes.
5. Publisering:
   1. Publiser til ditt område på kark.uit.no - URL innleveres