1 intro html ja css koodiin
Terminologia:
- tagi, alkutägi, lopputägi
- atribuutti
- charset atribuutti : Merkistökoodaus
- heksadesimaalit
- RGB arvot
- css koodi
Dremanweaver:
- sivuston määrittely
- automaattinen koodi: html sivun perusrakenne
HTML Tägit:
- <!DOCTYPE HTML>
- dokumenttityyppi html5
- html
- dokumentti kokonaisuudessaan
- head
- sivun otsakeosa
- title
- ulkoinen otsikko
- meta
- metadata (esim merkiston koodaus: charset="utf-8")
- body
- dokumentin runko
- p
- tekstin kappale
- h1-h6
- tekstin otsikkotasot
- ul
- numeroimaton lista
- ol
- numeroitu lista
- li
- listan alkio
- div
- lohko
- style
- tyylisäännöstö
css tyylit:
- background-color (taustaväri)
- background
- color (tekstin väri)
- padding (reunuksen ja sisällön välinen täyte)
- margin (marginaali)
- width (leveys)
- font-family
- font-size (kirjain koko)
- css mittayksiköt: %, px, em
2 linkit, kuva html dokumentissa
Terminologia css tyylit:
- tyylisäännöt elementin sisällä ( Inline Styles )
- sivukohtaiset tyylit style tagissa (Embedded Styles)
- ulkoinen tyylitiedosto (External stylesheets )
- selektori esim H1
- ominaisuus esim. color
- arvo esim. #FF12CC
- deklaraatio: esim. color:blue
HTML Tägit:
- a
- linkki
- img
- kuva html dokumentissa
- blockquote
- pitkä lainaus, lohkolainaus
- br
- pakotettu rivinvaihto
- link
- linkkiviittaus
- <!-- -->
- html kommentti
- html entiteetit
- esim. kulmasulje > >
css tyylit:
- font-style ( korostustyyli )
- font-weight ( Määrittää kirjaisimen visuaalisen painavuuden )
- line-height (riviväli)
- text-indent (ensimäisen rivin sisennys)
3 linkkien ja tekstin tyylit
HTML Tägit:
- cite
- viittaus kirjaan tms. sen nimellä
- span
- tekstiä ryhmittävä elementti
- strong
- tekstin voimakas korostus
- em
- tekstin korostus
css:
- kontekstisidonnaiset selektorit esim. #tagline p
- ryhmäselektorit esim. h1, h2, h3
- text-decoration (alleviivaus yms.)
- text-transform
- letter-spacing (kirjainten välistys)
4-5 css laatikkomalli
Terminologia, yms:
- css laatikkomalli (box model)
- lohkoelementti (block level) esim: h1-h6, p, blockquote, div, ul, ol,table
- p tagin sisään ei voi laittaa muita lohkoelementtejä
- tekstielementti (inline) esim: a, em, strong, img
css linkkien tyylit / pseudovalitsimet/ reunaviivat:
- a:link (linkki, jossa ei ole vielä käyty)
- a:visited (linkki, jonka dokumentti on jo avattu)
- a:hover ( Elementin tila: Hiiri elementin päällä)
- a:active ( Elementin tila: elementti on aktivoitunut, esim. käyttäjä klikkaa elementtiä)
- border-width
- border-style
- border-color
- kompakti syntaksi: esim: border: 5px solid #8da7ac;
Css positiointi ja taitto
- background-color (taustaväri)
- padding (reunuksen ja sisällön välinen täyte)
- margin (marginaali)
- width (leveys)
- height (korkeus)
- float ("kellutus")
- border (reunaviiva)
- barelyfitz.com css positioning
6 kuvat web sivulla
Terminologia, yms:
- suhteelliset tiedostopolku viittaukset
- tiedostonimet: ei välilyöntejä
HTML Tägit:
- img
- "tekstielementti" (inline) kuva
css:
- background: url(taustakuva.jpg)
- css taustakuva asemoinnin arvoja
- no-repeat
- repeat-y
- repeat-x
- bottom right
- top left
- kuvan rivitys: float ominaisuudella
- elementin keskityskikka: margin: 0 auto;
7 table tagi ja css
HTML Tägit:
- table
- taulukko
- caption
- taulukon seloste
- tr
- taulukon (vaaka)rivi
- td
- taulukon datasolu
- th
- taulukon otsikkosolu
-
-
esimerkki dataa: http://tilastokeskus.fi/til/jvie/tau.html
esim: Internetin käyttö 2002 - 2010 (Excel)