LUENTO 1 perustägit
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
- ul
- numeroimaton lista
- li
- listan alkio
- a
- linkki
- div
- lohko
css tyylit: laatikkomalli:
- background-color (taustaväri)
- padding (reunuksen ja sisällön välinen täyte)
- margin (marginaali)
- width (leveys)
- border (reunaviiva)
LUENTO 2 tekstin rakenne ja ulkoasu
HTML Tägit:
- p
- tekstin kappale
- h1-h6
- tekstin otsikkotasot
- span
- tekstiä ryhmittävä elementti
- strong
- tekstin voimakas korostus
- em
- tekstin korostus
css tyylit: tekstin tyylit:
- color (tekstin väri)
- text-align (tekstin tasaus)
- text-decoration (alleviivaus yms.)
- text-indent (ensimäisen rivin sisennys)
- letter-spacing (kirjainten välistys)
- font-family ( kirjaisintyyppi)
- font-style ( korostustyyli )
- font-size (kirjain koko)
- font-weight ( Määrittää kirjaisimen visuaalisen painavuuden )
- line-height (riviväli)
LUENTO 3 kuvat ja linkit
HTML Tägit:
- img
- kuva html dokumentissa
- a
- linkki
css tyylit: taustakuva tyylit:
- background-image (taustakuva)
- background-repeat (taustakuvan toistuvuus)
pseudovalitsimet:
- a:link (linkki, jossa ei ole vielä käyty)
- a:visited (linkki, jonka dokumentti on jo avattu)
- E:hover ( Elementin tila: Hiiri elementin päällä)
- E:active ( Elementin tila: elementti on aktivoitunut, esim. käyttäjä klikkaa elementtiä)
Harjoitukset PDF
LUENTO 4 css taitto
HTML Tägit:
- div
- lohko
css:
- float (irroittaa elementin normaalista elementtijärjestyksestä)
- width (reveys)
- margin (marginaali)
- padding (täyte)
- border
- background
Css taitto harjoitus (pdf)
