Kurs HTML5 & CSS3

Lær deg neste generasjon HTML og CSS. HTML5 er siste versjon av HTML. CSS3 er også siste versjon av CSS. Ingen av dem er ferdig utviklet, men det er mye innen begge vi kan ta i bruk i dag.

HTML5 blir utviklet for å ta sikte på en mer semantisk web, og introduserer nye elementer som vil gjøre det enklere for søkemotorer og skjermlesere å tolke sidene våre. I tillegg inkluderer HTML5 også heftige API'er for å tegne elementer, lagre data på brukerenes maskin, drag & drop, ++.

CSS3 har også fått mye nytt - som. f.eks. skygger, avrundede hjørner, fargeforløpninger (gradients), nye selektorer, ++.

Selv om hverken HTML5 eller CSS3 er ferdig utviklet, betyr ikke det at vi må vente med å ta det i bruk. Alle moderne nettlesere støtter det meste.

Kursinnhold HTML5 & CSS3:

• Introduksjon HTML5 & CSS3
  • Støtte i dagens nettlesere
• Nye HTML5-elementer
  • header
  • hgroup
  • footer
  • section
  • article
  • aside
  • nav
  • figure
  • figcaption
  • video
  • audio
  • mark
  • meter
  • progress
  • wbr
  • canvas
  • details
  • summary
  • datalist
  • time
• Nye HTML5-attributter
  • for meta
    • charset
  • for skjemafelt:
    • tel
    • search
    • url
    • email
    • datetime
    • date
    • month
    • week
    • time
    • datetime-local
    • number
    • range
    • color
    • autofocus
    • placeholder
    • required
    • autocomplete
    • min
    • max
    • multiple
    • pattern
    • step
    • list
    • form
  • For fieldset
    • disabled
  • For Form
    • novalidate
  • for nummererte lister
    • reversed
  • For Iframe
    • sandbox
    • seamless
    • srcdoc
  • Globale attributter
    • contenteditable
    • contextmenu
    • data-dinEgenVerdi
    • draggable
    • dropzone
    • spellcheck
  • Endrede betydninger av elementer som a, b, address, cite, dl, head, hr, i, label, menu, s, small, strong, u
  • Endrede betydninger av attributter som: value for li, target for a og area, type for script og style
• Nye CSS3-egenskaper
  • nye selektorer
    • E ~ F (general sibling)
    • Attributtselektorer
    • Pseudo-klasser
      • :enabled
      • :disabled
      • :checked
      • :indeterminate
      • :target
      • :default
      • :valid
      • :invalid
      • :in-range
      • :out-of-range
      • :required
      • :optional
      • :read-only
      • :read-write
    • Strukturelle pseudo-elementer
      • :root
      • :nth-child(n)
      • :nth-last-child(n)
      • :nth-of-type(n)
      • :last-of-type(n)
      • :first-child
      • :last-child
      • :first-of-type
      • :last-of-type
      • :only-child
      • :only-of-type
      • :empty
      • :not(exception)
  • Farger
    • RGBA
    • HSL og HSLA
    • Gjennomsiktighet
  • border-radius
  • border-image
  • box-shadow
  • text-shadow
  • box-sizing
  • resize
  • outline-offset
  • fargeforløpninger (gradients)
  • flere bakgrunnsbilder
  • background-size
  • transforms
    • translate
    • scale
    • rotate
    • skew
    • transform-origin
  • transitions
    • transition-property
    • transition-duration
    • transitition-timing-function
    • transition-delay
  • Animations
    • @keyframes
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-play-state
  • Web-fonter
    • @font-face
  • Kolonne-layout
    • column-count
    • column-gap
    • column-width
    • column-rule
    • column break
    • column-span
  • Media-queries