Tällä sivulla listaillaan luennoilla käydyt asiasisällöt
LUENTO 1 intro html ja css koodiin
Moniste
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
LUENTO 2 linkit, kuva html dokumentissa
Moniste
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)
LUENTO 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)
LUENTO 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;
LUENTO 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;
LUENTO 8 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)
LUENTO 10 css positiointi ja taitto
Css
- background-color (taustaväri)
- padding (reunuksen ja sisällön välinen täyte)
- margin (marginaali)
- width (leveys)
- height (korkeus)
- float ("kellutus")
- border (reunaviiva)
KOE 30.04.12
Kokeen ohjeet:
- Koetilanteessa hiljaisuus (ei turhaa puhetta).
- Koeaika 1030-1530 (ruokatauko alkaa 12:00)
- Apuna saa käyttää kaikkea mitä internetistä löytyy, kurssin aikana jaettuja monisteita ja Y-asemalta löytyviä kurssilla tehtyjä esimerkkejä.
- Koe on myös harjoitus. Jos et pääse eteenpäin niin tentaattorilta saa kysyä vinkkejä.
Koetehtävä:
laadi linkissä:
http://juy.fi/kurssit/web/verkkopalvelu/koe3004/
näkyvän sivun mukainen html ja css koodaus
linkki löytyy myös näin:
juy.fi > Koulutus / workshops > html/css > Kokeet linkki päivän 30.4. kohdalla
(huom jos IE sanoo: Javascript required ja näyttää alhaalla kuvaketta:
Paina nappia ”Salli estetty sisältö”
tehtävän aloitustiedostot löytyvät Y asemalta:
Y:\Käpylä\AV-Viestinta_2\11D\verkkopalvelu\koe3004
- kopioi kansio nimeltään koe3004 itsellesi
- Nimeä tiedosto htmlkoe3004.html uudelleen nimellä omasukunimi_htmlkoe3004.html kirjoita myös nimesi title elementtiin
- laadi html/css koodit
- palauta koko paketti html, css ja kuva tiedostot juurikansioineen zipattuna sähköpostiin jukka.ylitalo@edu.hel.fi
vinkit aluksi:
Muista validaattorit:
http://jigsaw.w3.org/css-validator/
Dreamweaverin html validointi: File >Validate > Validate Current document