Html-elementit

Isot elementit
tägi merkitys mistä tulee huom.
h1 kpääotsikko header 1
h2 alaotsikko header 2
h3 alaotsikon alaotsikko header 3
p tekstikappale paragraph
ul lista, jossa on palloja unordered list saa sisältää vail li-elementtejä
ol lista, jossa on numeroita ordered list saa käyttää vain li-elementtejä
li listan kohta list item saa sisältää mitä tahansa
div lohko ilman kummempaa merkitystä division saa sisältää mitä tahansa
img kuva image ei lopetustägiä
iframe elementti, jonka sisältö tulee muualta inline frame käyttäytyy kuin img

Yhteistä kaikille (paitsi img)

  • leveys oletusarvoisesti 100%
  • aiheuttaa rivinvaihdon ennen ja jälkeen

Yhteistä kaikille (myös img)

  • voi säätää marginaaleja eli tyhjää tilaa ylä- ja alapuolella
Pienet elementit
tägi merkitys mistä tulee huom.
a linkki anchor
b lihavoitua tekstiä bold nykyään taas sallittu
stong voimakkaasti korostettua tekstiä käytännössä sama kuin b
i kursivooitua tekstiä italic nykyään taas sallittu
em korostettua tekstiä emphasis käytännössä sama kuin i
u alleviivattua tekstiä underline ei yleensä kannata käyttää, koska näyttää linkiltä
small vähemmän tärkeää tekstiä, sivuhuomautus
span pätkä tekstiä ilman kummempaa merkitystä
img kuva image ei lopetustägiä
br rivinvaihto break row ei lopetustägiä

Yhteistä kaikille

  • tällaiset menevät aina vierekkäin, jos mahtuvat
Taulukot
tägi merkitys mistä tulee
table taulukko
caption taulukon nimi, "kuvateksti"
tr taulukon rivi table row
th taulukon otsikkosolu table header (cell)
td taulukon tavallinen solu table data
td colspan= "3"
Linkit
link minne johtaa linkki on
a href= "vihannekset/peruna.html" vihannekset kansiossa olevaan tiedostoon peruna.html suhteellinen
a href= "peruna.html" samassa kansiossa olevaan tiedostoon peruna.html suhteellinen
a href= "../vihannekset/peruna.html" ylemmässä kansiossa "vihannekset" olevaan tiedostoon peruna.html suhteellinen
a href= "https://medipjt.fi/etunimi.sukunimi/vihannekset/" kyseieen osoitteeseen world wide absoluttinen
Div-elementin kaltaiset
tägi merkitys mistä tulee huom!
header sivun yläosa voi sisältää logon, sivun pääotsikon ja linkkejä (nav)
nav linkit sivuston pääsivulle navigation voi olla headerin sisäpuolella tai ulkopuolella
main sivun varsinainen sisältö vaatii ylimääräistä css-säätöä, jotta toimii myös Internet Explorer -selaimessa
footer sivun loppu täällä on yleensä yhteistietoja ja tekijän nimi