tirsdag 18. mai 2010

Jeg skal lage en side i HTML 5 og så mye CSS 3 som overhodet mulig.


Følge med, for dette blir spennende! HTML 5 er veldig likt HTML4 og XHTML 1 og 1.1. Forskjellene ligger først og fremst i de nye taggene. Taggene gjør koden enda mer semantisk korrekt. Hvis man lager en meny så ligger den i en tag som er lagd for å inneholde en meny. En artikkel skal legges i en tag som heter article. Så enkelt er det! Her får du en kort beskrivelse av mange av de nye taggene.

Struktur

  • section: En del av en bok, en seksjon i et kapittel eller hva som helst annet som har sin egen overskrift i HTML 4
  • header: Toppbilde/logo på en side. Ikke det samme som head
  • footer: Dette er bunnen av en side der man legger e-post og copyright
  • nav: En samling linker som blir menyen på siden
  • article: En uavhengig enhet inni bloggen, magasinet, kompendiet, etc


Block semantiske elementer

  • aside: Sidemeny eller element som plasseres diverse steder
  • figure: Her kan man sette inn figurer med legend i tillegg


Inline semantiske elementer

  • m: Merket tekst. Jfr google-søk der alle søkeord blir merket.
  • time: Datoer og tidspunkt kan settes her. Semantisk perfekt.
  • meter: Målinger eller annet som kan tallsettes.
  • progress: Viser en framgang med verdier for nåværende og slutt.


Spennende nyheter

  • video: Sett inn video.
  • audio: Sett inn lyd.


Interaktivitet

  • details: Detaljer om et emne, ting, person som ikke nødvendigvis trenger å vises.
  • datagrid: Vise fra lotto-, fotballresultater, karakterer, etc. Man får mulighet gjennom DOM til å sortere, kollapse, utvide etc.
  • menu: Denne er til applikasjoner slik som google-docs. Man lager denne rundt en meny som utfører kommandoer med javascript.
  • command: En kommando som settes inni en meny.


Da vet vi hvordan den grunnleggende forskjellen er.


1: Flere elementer

2: Mer og enklere Web 2.0

Ingen kommentarer: