JWT 2013

1 Taustaa

1.1 Internet ja World wide web (www)

Termejä Internet (-verkko) ja World Wide Web (-verkko) käytetään usein toistensa synonyymeemeinä, mutta tarkkaan ottaen ne ovat kaksi erillistä (tosin keskenään hyvin läheisesti yhteydessä olevaa) asiaa.

Internet on maailmanlaajuinen, palvelinkoneiden ympärille muodostettujen verkkojen yhteenliittymä, "verkkojen verkko". Se tarjoaa infrastruktuurin World wide web:ille (lyhyemmin www, web, tai arkisemmin vain verkko, netti. Palvelimet ja selaimet WWW on keino siirtää informaatiota internetin yli laitteelta toiselle.

Kaksi (palvelinkoneen välityksellä) internetiin liitettyä laitetta voivat lähettää toisilleen erikseen sovittua säännöstöä, ns. protokollaa noudattavia viestejä.

Verkon käyttäjän kannalta www voidaan jakaa yksinkertaisesti kolmenlaisiin toiminnallisiin osiin:

Palvelimet ovat verkkoon kytkettyjä tietokoneita, jotka tuottavat verkkopalveluja suorittamalla www-palvelinohjelmaa (http daemon) ja siihen liitettyjä muita palvelujen tuottamisessa tarvittavia prosesseja, kuten esim. tietokantajärjestelmiä.

Käyttäjien tietokoneet ovat asiakastietokoneita, jotka suorittavat em. palveluja käyttävää asiakasohjelmaa. WWW:n tapauksessa kyseinen asiakasohjelma on www-selain, joka on verkon välityksellä yhteydessä palvelimiin. Selaimen tehtävänä on toimia palvelun käyttöliittymänä. Staattisten www-sivujen selailuakin voidaan pitää yksinkertaisena verkkopalveluna.

Tiedonsiirron toteuttava verkko on joukko toisiinsa yhdistettyjä palvelimia, joiden kautta voidaan siirtää tietoa palvelimesta X palvelimeen Y. Näiden kahden palvelimen välissä voi olla periaatteessa rajaton määrä välittäviä verkon aktiivilaitteita eli reitittimiä.

1.2 Selaimen ja palvelimen yhteistyö

Kuva selaimen ja palvelimen yhteistyöstä Selaimen ja palvelimen yhteistyö perustuu pyyntöjen (request) ja vastausten (response) vaihtamiseen. Selain lähettää pyyntöjä, joihin palvelin vastaa. Selain on siis toiminnassa aktiivinen, alullepaneva osapuoli. Palvelimen tehtäväksi jää reagoida selaimen toimintaan. Palvelimen vastaukset voivat olla tekstidokumentteja tai jotain muuta binäärimuotoista dataa.

Tiedonsiirron määrittäviä protokollia on Internetissä (Internet Protokolla, IP) käytettävissä useita, mutta WWW käyttää erityisesti HTTP- (Hypertext Transfer Protocol) eli hypertekstin siirtoprotokollaa. HTTP-protokolla, jolla selaimelta lähtevät pyynnöt ja sille takaisin välitettävät vastaukset siirretään, on toteutettu OSI-mallin sovelluskerroksessa. OSI-mallin avulla on toteutettu muitakin protokollia, kuten esim. FTP-tiedostonsiirtoprotokolla tai pääteyhteyksiin tarkoitettu telnet-protokolla. Pyyntöjen ja vastausten sisältö voidaan esittää monessa muodossa kuten rakenteisena dokumenttina HTML- tai XML-kielellä, erilaisissa äänen, kuvan tai liikkuvan kuvan esitysmuodoissa tai yksinkertaisesti vaikkapa paljaana tekstinä.

Tällä kurssilla käsitellään oheisen kuvan vasenta puolta - asiakaskoneen selaimessa toteutettavissa olevia tekniikoita.

Tällä kurssilla tehdään ensin katsaus historiaan. WWWW ei unohda, vanhaa materiaalia tulee aina olemaan saatavilla, joten on tärkeätä saada hiukan perspekstiiviä ja ymmärtää miten www-sivuja on ajan saatossa tuotettu. Tämän yleiskatsauksen jälkeen lähdetään liikkeelle perusteista, käsitellään staattisten www-sivujen tuottamista HTML- ja CCS- tekniikoilla. Jo näiden tekniikoiden ajantasaisilla versioilla (HTML5 ja CSS3) on aiempaa helpompaa tuottaa dynaamisia verkkosivuja, mutta kurssin lopuksi luodaan katsaus myös selainpuolen, tulkittavilla ohjelmoitikielillä tapahtuvaan, ohjelmointiin (Javascript). Palvelinpuolen ohjelmointia (PHP, Phyton, Java, ... ) ei tällä kurssilla käsitellä.

1.3 HTML-dokumentti selaimessa

HTML-dokumentit tallennetaan palvelimelle rakenteisina dokumentteina. Rakenteisella dokumentilla (structured document) tarkoitetaan jollakin sovitulla merkkauskielellä (markup language) esitettyä dokumenttia. Dokumentti esitetään kielelle ominaisten elementtien muodossa. Elementit muodostavat dokumentissa hierarkisen rakenteen ja niillä kullakin on oma merkityksensä.

Www-sivujen merkkauskieli on aina ollut HTML. HTML kehitettiin alunperin kuvaamaan tieteellisten dokumenttien rakennetta, mutta sen käyttö laajeni ja vuosien mittaan sitä on käytetty kuvaamaan monenlaisia dokumentteja, merkittävimmäksi sovellusalueeksi vakiintui www.

1.4 Terminologiaa: HTML5, HTML, GML, XML, XHTML, DOM... !?

Rakenteisten dokumenttien periaate on, että dokumentissa kuvataan esitettävän dokumentin rakenne, mutta ei ulkomuotoa. Perusperiaate on sama kuin tyylejä oikeaoppisesti soveltavassa tekstinkäsittelyssä. Dokumenttiin kirjoitetaan vain sisältö, ja tieto siitä mikä on kunkin dokumentin osan rooli koko dokumentin rakenteessa. Tarvittava muotoilu voidaan toteuttaa kussakin tilanteessa tarkoituksenmukaisella tavalla.

SGML on vanha (ensimmäinen määrittely 1980) yleiskäyttöinen merkkauskieli, jonka ilmaisuja ei ole kiinnitetty. Se ei varsinaisesti ole kieli, vaan tapa luoda kuhunkin tarkoitukseen soveltuva kieli valitsemalla siinä käytetyt ilmaisut ja määrittelemällä niiden merkitykset tarkoituksenmukaisella tavalla. Siinä käytetyt ilmaisut on määritelty formaalisti ja täsmällisesti dokumenttityypin määrittelydokumentissa (document type definition, DTD). Myös tämä määrittely on kirjoitettu SGML-kielen rakenteita käyttäen.

HTML on yksi SGML-kielen sovellus. HTML-kielessä ilmaisujen merkitys on kuvattiin erikseen luonnollisella kielellä. Viimeisin HTML-kielestä julkaistu versio on HTML5.

1.4.1 HTML5

Alla näet esimerkin yksinkertaisesta HTML5-dokumentista. Se koostuu hierarkisesti järjestetyistä elementeistä, jotka määrittävät dokumentin rakenteen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>Ensimmäinen kokeilu</title>
  </head>

  <body>
    <h1>Www-sivun luominen</h1>
    <p>	
      Harjoitellaan tällä sivulla ensin, mitkä ovat HTML-dokumenttiin  
      vaadittavat osat minimissään.
    </p>
    <p> 
      Html-dokumentti sisältää aina head- ja body-elementit, edellisessä 
      kuvataan dokumenttiin liittyviä yleisempiä asioita ja jälkimmäiseen
      kirjoitetaan sivun varsinainen sisältö. Tämän dokumentin 
      head-elementtissä on määritelty dokumentin tallennuksessa  
      käytettävä merkistökoodaus (meta charset ...) ja dokumentin nimi 
      (title). Body-elementissä on annettu yksi ensimmäisen tason 
      otsikko (h1) ja kaksi kappaletta (p).
    </p>
  </body>

</html>

Selaimessa (www-sivuna) dokumentti näyttää tältä.

Selaimen tehtävänä on esittää rakenteinen dokumentti käyttäjälle ymmärrettävässä ja havainnollisessa muodossa. HTML5-määrittely määrittelee paitsi HTML5-kielen, myös entistä tarkemmin sen, miten selainten tulee esittää erilaiset kielen tuntemat elementit käyttäjälle.

Palvelimen ja selaimen välillä käytetään yleisimmin HTML-kielisiä rakenteisia dokumentteja. Varsinkin 2000-luvun ensimmäisen vuosikymmenen aikana kehitettiin paljon erilaisia XML-pohjaisia sovelluksia. Miten XML sitten eroaa HTML:stä?

1.4.2 XML/XHTML

HTML:ää ei alunperin suunniteltu niin monimuotoiseen käyttöön mihin sitä www-sivujen kuvauskielenä alettiin soveltaa. Voimakkaasta ja aktiivisesta kehittämisestä huolimatta uusien versioiden määrittelyt eivät pysyneet takaamaan dokumenttien yksiselitteistä jäsentämistä ja tulkintaa. Www-sivustojen perustavanlaatuisena ongelmana oli, että eri selainvalmistajille alkoi vähitellen kehittyä omat tulkintansa HTML-kielestä. Www-sivustojen kehittäjät joutuivat joko

  1. käyttämään vain niitä HTML-elementtejä, jotka testasivat toimiviksi kaikissa selaimissa,
  2. määrittämään, että sivusto toimii vain tiety(i)llä selaimilla tai
  3. kirjoittamaan sivustostaan useampia versioita eri selaimille.

Muun muassa näistä syistä W3C:ssä nähtiin tarpeelliseksi kehittää HTML:lle paremmin verkkosovelluksiin sopiva korvaaja. Näin syntyi XML (Extensible Markup Lanaguage), meta-kieli, jonka avulla voidaan määritellä merkkauskieliä. HTML ei kuitenkaan ollut uuden XML-kielen mukainen. Sitä ei voitu pitää XML:n sovelluksena, koska se ei täyttänyt yksinkertaistettuja rakenteellisia vaatimuksia. Siksi tarvittiin uusi versio HTML:stä. Se sai nimekseen XHTML. XHTML:n kehitys kuitenkin lopetettiin ja XHTML2.0 jää (ainakin näillä näkymin) kielen viimeiseksi määrittelyksi.

1.4.3 XHTML vs HTML

XHTML 1.0 on lähestulkoon identtinen HTML 4.1 -version kanssa. XHTML on itse asiassa vain tiukemmin ja puhtaammin kirjoitettua HTML:ää. XHTML dokumentit ovat valideja HTML-dokumentteja, mutta toiseen suuntaan näin ei välttämättä näin ole.

Tärkeimmät XHTML:n ja HTML:n väliset erot:

  1. Elementtien päättäminen (properly closed elements)
    XHTML elmentit tulee aina päättää, ts. alkutunnistetta <tag> tulee aina vastata lopputunniste <tag> esim.
      XHTML - VÄÄRIN
    <ul>
      <li>Mehu</li>
      <li>Kuumat juomat
        <ul>
          <li>Kahvi</li>
          <li>Tee</li>
        </ul>
      <li>Maito</li>
    </ul>
    
    
     
      XHTML - OIKEIN
    <ul>
      <li>Mehu</li>
      <li>Kuumat juomat
        <ul>
          <li>Kahvi</li>
          <li>Tee</li>
        </ul>
      </li>
      <li>Maito</li>
    </ul>
    
    HTML-jäsentäjät tekevät näissä tilanteissa oletuksia, esim. tilanteessa yllä, aloitettaessa uusi listan alkio <li> Maito.. jäsentäjä todennäköisesti olettaa edellisen päättämättä jääneen listan alkion päättyneen, joten tulos näyttää ihan oikealta.
    Huom! Myös "tyhjät elementit" tulee päättää, esim. <br />
  2. Elementtihierarkian eheys (properly nested elements)
    XHTML elmentit tulee olla hierarkisesti sisennettyinä, ts. viimeksi avattu elementti tulee sulkea ennenkuin sitä edeltävä elementti suljetaan, esim.
     XHTML - VÄÄRIN
    <p>
      Pentti Haanpään klassikossa 
      <cite>Noitaympyrä kuvataan  
      nälkäisen miehen hysteeristä  
      hiihtoa kuutamoyössä   
      hirmupakkasessa läpi Kairanmaan 
      korpien.
    <p><cite>
     XHTML - OIKEIN
    <p>
      Pentti Haanpään klassikossa 
      <cite>Noitaympyrä</cite>
      kuvataan nälkäisen miehen 
      hysteeristä hiihtoa kuutamoyössä 
      hirmupakkasessa läpi Kairanmaan 
      korpien.
     </p>
    Yllä olevasta tilanteessa HTML-jäsentäjät todennäköisesti selviävät menemättä virheeseen, pidentäen <cite> elementin vaikutuksen kappaleen loppuun asti.
  3. HTML alku- ja lopputunnisteet ja attribuutit pienin kirjaimin (lowercase tags and attributes)
    Elementtien alku- ja lopputunnisteet (tags) kuten myös attribuutit tulee kirjoittaa pienin kirjaimin, ts. XHTML:ssä <HEAD> on väärin, ja <head> oikein.
  4. Attribuutien tarkempi esitys (Quoted attribute values)
    HTML sallii boolean tyyppisille attribuuteille "arvottomat attribuutit", kuten esimerkiksi
    checked
    XHTML:ssä kaikilla atribuuteilla on oltava arvo ja sen tulee olla lainausmerkeissä, ts. XHTMLssä edellinen olisi väärin, sen sijaan tulisi merkitä:
    checked="checked"
    Jos arvoon sisältyy lainausmerkki, arvo suljetaan heittomerkkeihin, esim.
    name='Jussi "Juice" Leskinen'.

1.5 Www-merkkauskielten historia

Seuraavassa käydään vielä läpi pääpiirteet www-sivujen tekemiseen käytettyjen tekniikoiden historiasta kronologisessa järjestyksessä. [Lähde: W3C: HTML5, background]

HTML 1.0 - HTML 2.0 (1990-1995)
Tim Berners-Lee julkaisi ensimmäisen suunnitelman World Wide Webin toteuttamiseksi. Ensimmäisten viiden vuoden aikana HTML:n kehityksestä olivat pääasiallisessa vastuussa CERN ja IETF. Tuona aikana HTML-merkkauskielestä julkaistiin useita korjailtuja ja tarkistettuja versioita.
HTML3.0 - HTML4 (1995-1998)
Vuoden 1994 lopulla vastuu HTML-kielen ylläpitämisestä ja kehittämisestä siirtyi Tim Berners-Leen perustamalle W3C:lle (World Wide Web Consortium). W3C kehittää ja julkaisee www-tekniikoihin liittyviä standardeja "recommendations".
XHTML, DOM Level 1-3 (1998-2004)
XHTML-version julkaisemisen jälkeen W3C päätti lopettaa HTML:n kehityksen, ja aloittaa sen sijasta XML-pohjaisen XHTML kielen kehittämisen. Aluksi HTML4 toteutettiin XHTML:llä vuonna 2000 (XHTML1.0), jonka jälkeen W3C ryhtyi kehittämään uutta HTML:n ja XHTML1.0 kanssa yhteensopimatonta XHTML2.0-kieltä.
   Samaan aikaan osa selaintoimittajista kehitti ja julkaisi HTML:ään pohjautuvia tekniikoita DOM Level 1, DOM Level 2 Core ja DOM Level 2 HTML, mutta tämä kehitystyö hiipui vähitellen. 2004 julkaistiin vielä joitain osia DOM Level 3:sta.
XForms 1.0, WHATWG (2003-)
W3C julkaisi 2003 XML-pohjaisen lomakkeiden kuvailukielen, XFormsin. Samaan aikaan kiinnostus HTML:n jatkokehittämiseen heräsi jälleen. Oivallettiin että kehitysprojekteissa tuotettiin lähinnä uusia www-tekniikoita (kuten esim. RSS, Atom), ne eivät korvanneet yhä laajassa käytössä ollutta HTML:ää.
   Mozilla ja Opera tekivät 2004 W3C työkokouksessa yhteistyöehdotuksen HTML:n jatkokehittämiseksi, mutta ehdotus tuli torjutuksi, koska W3C strategia oli kehittää uutta XHTML versiota.
   Pian aloitteen torjutuksi tulemisenjälkeen Mozilla, Opera ja Apple perustivat WHATWG-yhteisön (Web Hypertext Application Technology Working Group) HTML:n jatkokehittämiseksi. WHATWG:si nimetyn merkkauskielen perusperiaatteiksi sovittiin, että uuden merkkauskielen (1) tulee olla taaksepäin yhteensopiva HTML:n, XHTML:n ja DOM 2 Level -tekniikoiden kanssa, (2) toteutusten ja spesifikaatioiden tulee vastata toisiaan jopa siinä tapauksessa, että se tarkoittaisi spesisikaation muuttamista ja että (3) spesifikaatioiden tulee olla niin yksityskohtaiset että sillä voidaan taata selainten yhteentoimivuus.
HTML5 (2006-)
Vuonna 2006 W3C ilmaisi halukkuutensa liittyä WHATWG-yhteisöön kehittämään HTML5-kieltä ja 2007 W3C perusti siihen tarkoitukseen työryhmän. XHTML 2.0 kehitystyö lopetettiin. HTML kehitys ei vielä ole tuottanut vahvistettua W3C spesifikaatiota, mutta W3C joulukuussa julkaisema "HTML5 Candidate Recommendation" on WHATWG-yhteisön laajan pohjatyön ansiosta vakaa ja selainten uudet versiot totettavat varsin hyvin kielen uudetkin piirteet. Se, ja lisäksi takuu taaksepäin yhteensopivuudesta tekee HTML5 käyttämisestä houkuttelevaa ja turvallista.

1.6 Hyvät HTML5-käytänteet

Kuten ohjelmointikielen kirjoittamisessa yleensäkin, myös HTML-kielisten dokumenttien kirjoittamiseen liittyy paljon hyviä käytänteitä, jotka tekevät ohjelmakoodista luettavamman, ylläpidettävämmän ja niiden noudattaminen ehkäisee virheitä usein jo ohjelmaa alunperin kirjoitettaessa. Vaikka HTML5:ssä taaksepäin yhteensopivuuden nimissä XHTML-syntaksi ei olekaan välttämätöntä, ovat edellä esitellyt XHTML-käytänteet (ainakin kohdat 1-3: elementtien päättäminen, elementtihierarkian eheys ja alku- ja lopputunniseteiden kirjoittaminen pienellä) suositeltavia myös HTML-kielessä.

Näiden lisäksi, on luonnollisestikin suositeltavaa

HTML-tulkit selaimissa ovat kovin anteeksiantavaisia. Vaikka koodi olisi virheellistä tulkit toipuvat niistä parhaansa mukaan, ja tuottavat sivun virheistä huolimatta. Tästä syystä sivulle saattaakin helposti jäädä virheitä, jotka tulevatkin esille vasta jossain myöhemmässä selainversiossa tai toisissa selaimissa. Riskin pienentämiseksi dokumentit pitääkin aina muistaa validoida, vaikka sivu näyttäisikin siltä miltä haluat sen näyttävän.

1.7 DOM

Kohdan 1.4.1 HTMl-dokumentti DOM-puuna Selaimen tehtävänä on esittää rakenteinen dokumentti käyttäjälle ymmärrettävässä ja havainnollisessa muodossa. HTML5-määrittely määrittelee paitsi HTML5-kielen, myös entistä tarkemmin sen, miten selainten tulee esittää erilaiset kielen tuntemat elementit käyttäjälle.

HTML5-määrittelydokumentin mukaisesti ohjelmoidut selainten HTML-tulkit tunnistavat dokumentissa määritellyt elementit, ja jäsentävät dokumentin DOM-puuksi (DOM = Document Object Model). DOM-puu on HTML-dokumenttiin kirjoitetuista elementeistä koostuva solmujen (Node) hierarkia, jonka juurisolmu on aina HTML5-dokumentim ensimmäinen elementti, DOCTYPE html. Oheinen kuva esittää HTML-dokumentin (kohdassa 1.5.1) jäsennyksen DOM-puuksi. Puun hierarkiassa ylemmän tason elementti, josta on yhteys seuraavan tason elementtiin on alemman tason äiti. Oheisessa esimerkissä <html> elementillä on kaksi lasta, <head> ja <body>. Elementin <h1> äiti on <body> ja sillä on kaksi <p>-elementtisisarusta.

Kuvan jäsennys on yksinkertaistus esimerkkinä annetusta koodista, koska todellisuudessa puussa on esimerkiksi paljon enemmän tekstielementtejä, koska esim. myös näkymättömät merkit dokumentissa (välilyönnit ja rivinpalautukset) esitetään DOM-puun elementteinä.

Dokumentin ymmärtäminen HTML-elementeistä koostuvana puuna on oleellista varsinkin siinä vaiheessa, kun lähdetään tekemään dynaamisia www-sivuja. Puurakenteen ymmärtäminen auttaa kuitenkin ymmärtämään myös staattisten HTML-sivujen rakentamista. Erityisesti määritettäessä www-sivun ulkoasua CSS-sääntöjä käyttäen, dokumenin ajatteleminen puurakenteena auttaa ymmärtämään ominaisuuksien perintää. CSS-sääntöjen käyttäen? Mikä ne sitten ovat?

1.8 CSS:n perusperiaate

CSS (Cascading Style Sheet) on kieli, jonka avulla määritellään www-sivun ulkoasu. Selaimilla on määriteltynä oletustyylit eri elementtien näyttämiseen www-sivulla, mutta näitä oletustyylejä voi muuttaa omilla CSS säännöillä. HTML sivuun liitetyillä omilla CSS-säännöilläsi voit esimerkiksi määritellä sivulla käytettävät kirjasimet, värit ja elementtien asettelun.

Kun esimerkiksi kohdan 1.4.1 esimerkissä määriteltiin, että sivulla on 1-tason otsikko: <h1>Www-sivun luominen</h1> otsikko näytettiin (kirjasin, koko, väri, ym.) selaimen 1-tason otsikolle antamalla oletustyylillä. Näitä otsikon <h1> ja kappaleiden <p> oletustyylejä voisimme muokata seuraavilla CSS-säännöillä.

h1 {
   font-family: helvetica, arial rounded, sans-serif;
   color: red;
}
p {
   background-color: lightgreen;
   font-size: large;
}

Yllä olevat säännöt muuttavat otsikossa käytetyn kirjasintyypin punaiseksi, päätteettömäksi San Serif -fontiksi, kappaleiden tekstin isommaksi ja kappaleiden taustan vaalean vihreäksi: sivu, kun siihen on sovellettu yo. css-sääntöjä

Yllä esitetyt koodipätkät olivat esimerkkejä tulevasta; sekä HTML-kieleltä että CCS-säännöiltä vaadittava syntaksi tullaan käsittelemään myöhemmin tarkemmin.


2 HTML:n ja CSS:n yhteispeli

HTML-merkkauskielen avulla luodaan sivun sisältö ja määritellään sen rakenne. Sivun ulkonäkö määritellään erillisellä tyylitiedostolla (css). Tyylisääntöjä voi kirjoittaa myös HTML-dokumentin sisään, mutta suositeltavampi ja selkeämpi tapa on kirjoittaa tyylisäännöt omaan tiedostoonsa.

Seuraavissa luvuissa (3-4) käydään läpi HTML-merkkauskieltä ja CSS-sääntöjä syntakseineen tarkemmalla tasolla. Katsotaan kuitenkin tässä luvussa ensin läpi yksinkertainen esimerkki siitä, miten HTML ja CSS "pelaavat yhteen" muotoillun www-sivun tuottamisessa.

2.1 Www-sivu selaimen oletusmuotoiluilla

Alla näet esimerkin yksinkertaisesta HTML5 -dokumentista. Kuten HTML-dokumentit yleisemminkin, se koostuu hierarkisesti järjestetyistä elementeistä, jotka määrittävät dokumentin rakenteen.

<!DOCTYPE HTML> 
<html lang="fi">
<!-- - - - - - - - - - - - - - - - - - - - - - otsikko-osa -->
<head>
  <meta charset = "UTF-8" />
  <title>hTML:n ja CSS:n yhteispeli</title>
</head>

<!-- - - - - - - - - - - - - - - - - - - - - - - runko-osa -->
<body>
  <nav>
  <!-- lista, tehdään tästä tyylien avulla menu --------- -->
    <ul class="navipalkki">
      <li><a href="index.html">Etusivu</a></li>
      <li><a href="sivu2.html">Toinen sivu</a></li>
      <li><a href="sivu 3.html">Kolmas sivu</a></li>
      <li><a href="yhteystiedot.html">Yhteystiedot</a></li>
    </ul>
  </nav>

  <!-- Sivun varsinainen sisältö - - - - - - - - - - - -  -->
  <h1>HTML+CSS kokeilu</h1>
  <p>
    Tämä on ensimmäinen kokeiluni siitä miten 
    HTML ja CSS toimivat yhdessä. Aluksi kirjoitetaan
    HTML-dokumenttiin vain sivun sisältö ja sen rakenne.
    Määritellään ulkomuotoon liittyvät seikat sitten
    erikseen CSS-säännöillä.
  </p>

  <img src="img/w3c.png" />
  <h2>Kuvat www-sivulla</h2>
  <p>
    Otetaan tähän mukaan yksi kuvakin, jotta nähdään 
    samantien, miten kuvien liittäminen sivulle tapahtuu.	
  </p>

  <h2>Linkit www-sivulla</h2>
  <p>
    Navigointiosassa on linkkejäkin, vaikka ne eivät 
    nyt johda mihinkään kun noita vastaavia sivuja 
    ei ole luotu.
  </p>

  <!-- On hyvien tapojen mukaista liittää mukaan 
          allekirjoitus ja päiväys - - - - - - - - - - - -  -->
  <footer>
     Aulikki Hyrskykari, luotu 10.3.2012 
    (viimeksi muokattu 7.3.2013) 
  </footer>
</body>
</html>

Dokumentti löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-a.html

Kommentit. Dokumenttiin kannattaa lisätä kommentteja, erityisesti jaottelemaan dokumentin osia toisistaan, jotta haluttu kohta dokumentista on helpompi löytää. Kommentti alkaa merkeillä: <-- ja loppuu merkkeihin: -->. Kommentin sisällä ei saa olla kahta tavuviivamerkkiä peräkkäin.

Dokumenttityyppi. Dokumentin ensimmäinen elementti <!DOCTYPE html> määrittää, että kyseessä on HTML5 -dokumentti, ja sen alla on määritelty, että dokumentin kieli on suomi. Dokumentin juurielementin, <html>-elementin attribuutti lang="fi" kertoo, että dokumentin kieli on suomi. Vaikka kielen ilmoittaminen ei olekaan pakollista, se on suositeltavaa koska erilaiset www-palvelut (esim. hakukoneet, saavutettavuuteen liittyvät apuvälineet) saattavat hyötyä tiedosta.

Dokumentti (<html>-elementti) jakaantuu kahteen osaan: otsikko-osaan (<html>-elementti) ja runko-osaan (<body>-elementti).

Otsikko-osassa <meta charset="UTF-8" />-elementti määrittää dokumentin tallentamisessa käytetyn merkistökoodauksen. ja <title>-elementti määrittää dokumentin nimen. Nimi tulee selaimessa näkyviin sivun (tai välilehden) nimenä.

Runko-ossa on jo edellisen luvun ensimmäisestä esimerkistä tutut kappale <p>-elementti, ja ensimmäisen tason otsikko, <h1>-elementti. Näiden lisäksi tässä esimerkissä on kakkostason otsikkoelementtejä <h2> ja kuvaelementti <img>. Kuvaelementin attribuutti src määrittää hakemistopolun kuvan noutamiseksi.

Lista. Elementin <ul> avulla määritellään lista. Sille on määritelty luokka-attribuutti class="navipalkki", jonka avulla voimme kohdistaa sille CSS-sääntöjä. Haluamme muotoilla listan navigointipainikkeeksi, ja haluamme kohdistaa muotoilun, ei kaikille, vaan vain juuri navipalkki-tyyppisille listoille. <a>-elementin avulla määritellään linkki, <href="osoite">. HTML5 korostaa sisällön semantiikan merkitsemistä. Listaa tullaan käyttämään sivulla navigointiin, joten se on suljettu <nav>-elementiksi. Se on yksi HTML5:n uusista, dokumentin semanttista rakennetta merkkaavista elementeistä.

Alaviite. Myös <footer>-elementti on yksi uusista HTML5-elementeistä. Esimerkiksi alaviitteen voisi tietysti tehdä <p>-elementilläkin, mutta <footer>-elementti tarjoaa sivua mahdollisesti lukeville muille www-sovelluksille tarkempaa tietoa elementin roolista.

Dokumentti näkyy selaimen oletustyyleillä, ilman erityisiä tyylimuotoiluja, seuraavalta.

Sivu muotoiltuna CSS-säännöillä

Kun teemme dokumentille CSS-tyylitiedoston, saadaan dokumentti näyttämään, esimerkiksi seuraavalta.

Sivu muotoiltuna CSS-säännöillä

Katsotaan seuraavassa askelettain, millä CCS-säännöillä tämä muotoilu saadaan aikaan.

2.2 Tekstin ja taustan värit

CSS-säännöt on suositeltavaa kirjoittaa omaan CSS-tiedostoonsa ja HTML-dokumentin <head> osaan tulee kirjoittaa elementti, joka kertoo mikä CSS-tiedosto dokumenttiin liitetään.

Annetaan tyylitiedostolle nimi 02-01-html-plus-css-a.css (hieman pitkä, mutta kuvaava; kertoo missä luvussa, monesko esimerkki ja mikä versio esimerkistä). Tallennetaan tämä tyylititiedosto alihakemistoon css (alihakemisto viittaavasta html-dokumentista katsottuna).

Tällöin kirjoitamme html-dokumentin alkuun <head> osaan, rivin:
<link rel="stylesheet" type="text/css" href="css/demotyylit.css" />. Se kertoo selaimen HTML-tulkille, mistä tyylimäärittelyt löytyvät.

CSS-säännöt, joilla määritellään tekstin väriksi sinipunainen ja taustaväriksi vaalea punainen, ovat seuraavanlaiset:

@charset "UTF-8";
/* LISÄTÄÄN TEKSTILLE JA SIVUN TAUSTALLE VÄRIT */
body {    
  color: #ba55d3;
  background-color: #ffefd5;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-b.html. Tyylitiedoston alussa on hyvä määritellä merkistökoodaus @charset "UTF-8"; siltä varalta että esim. kommenteissa käyttää skandinaavisia tai joitain muita erikoismerkkejä.

2.3 Kuvan sijoittelu

Kuvan paikka elementtivirrassa (document flow) on ensimmäisen kappaleen jälkeen ja ennen otsikkoa Kuvat www-sivulla. Koska kuva on noiden molempien dokumenttien ulkopuolella, se varaa www-sivulta oman rivinsä. Jos se olisi kappaleen tai otsikon sisällä, sitä käsiteltäisiin kuten yhtä merkkiä elementtivirrassa, silloin se kuitenkin suurentaisi tekstin rivivälin oman korkeutensa mukaiseksi.

Kelluttamalla elementtejä voi siirtää horisontaalisessa suunnassa sivun reunaan (vasemmalle tai oikealle). Jos määrittelemme, että kuva asetetaan "kellumaan vasemmalle", kuva siirtyy dokumentin vasempaan reunaan ja sen lisäksi muu dokumentin sisältö kuvan jälkeen kiertää kuvan ympäri. Tässä tapauksessa tämä tekstin kiertyminen kuvan ympärille on säännön ainoa vaikutus, koska kuva oli jo valmiiksi sivun vasemmassa reunassa.

Jotta kuvan ympärille kiertyvä teksti ei olisi ihan kiinni kuvassa, määritellään sille marginaali - yhden kirjasinkorkeuden levyinen marginaali 1em.

/* MÄÄRITELLÄÄN, KUVA "KELLUVAKSI" VASEMPAAN REUNAAN */
img {
  float:left;			
  margin: 1em;			
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-c.html

2.4 Kirjasimet

Sivulla käytettävät kirjasimet (tai paremminkin kirjasinperheet, koska jokainen kirjasin sisältää useampia leikkausia kirjasimesta) voi määritellä elementtikohtaisesti. Määritellään, että dokumentissa käytettävä kirjasinperhe on Georgia. Otsikoissa haluamme kuitenkin käyttää Geneva-kirjasinperhettä.

Koskaan ei voi olla ihan varma osaako selain käyttää määriteltyä kirjasinta, joten alla on annettu useampia vaihtoehtoja. Viimeiseksi kannattaa määritellä ns. geneerinen kirjasinperhe, joka näyttää jonkun saatavilla olevan samantyyppisen kirjasimen (serif, san-serif) mikäli mikään annetuista ei ollut saatavilla.

Huomaa, että Times New Roman on suljettu lainausmerkkeihin, koska nimeen kuuluu välilyöntimerkkejä.

/* RUNGOSSA KÄYTETÄÄN SERIF ja OTSKOISSA SAN-SERIF -KIRJASINTA */
body {    
  font-family: Georgia,"Times New Roman", Times, serif;		
}
h1, h2 {
  font-family: Geneva,Helvetica,Arial,SunSans-Regular,sans-serif;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-d.html

2.5 Listan asemointi navigointipalkiksi

Dokumentin alussa on neljä riviä sisältävä lista, joka toimii sellaisenaankin navigointilistana (vaikka linkit eivät tässä toimikaan, koska vastaavia sivuja ei ole olemassa).

Haluamme tehdä siitä hiukan enemmän verkkosivuilta yleisesti löytyviä navigointipalkkeja muistuttavan. Tästä syystä kiinnitetään lista sivun vasempaan yläkulmaan. Absoluuttinen sijoitus ottaa elementin pois elementtivirrasta ja asettaa sen määrättyyn kohtaan sivulla.

/* LISTALLE ABSOLUUTTINEN SIJOITUS SIVUN VASEMPAAN REUNAAN */
ul.navipalkki {
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em;
}

Kun elementti otetaan pois elementtivirrasta, se piirtyy määrättyyn kohtaan riippumatta siitä onko siinä kohdassa jotain muutakin sivun sisältöä.

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-e.html

2.6 Päällekkäisyyden korjaaminen

Koska navigointipalkki on kiinnitetty absoluuttisella sijoituksella sivun vasempaan reunaan, lisätään rungolle sääntö, joka jättää kaikkien elementtien vasempaan reunaan tyhjää tilaa 11 kirjasinkorkeuden verran.

/* SIIRRETÄÄN KAIKKIA ELEMENTTEJÄ OIKEALLE */
body {    
  padding-left: 11em;
  font-family: Georgia, "Times New Roman", Times, serif;
	.
	.
	.

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-f.html

2.7 Navigointipalkin sijainnin korjailua

Selaimilla on listalle omat oletusmuotoilunsa, kuten esimerkiksi listan rivien eteen piirrettävä alkumerkki (•) ja sen ympärille jätettävät tyhjä tila. Pyydetään, että listan riveillä ei ole alkumerkkiä, ja että sen ympärille ei jätetä automaattisesti tilaa.

ul.navipalkki {
  list-style-type: none;
  padding: 0;
  margin: 0;
      .
      .
      .

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-g.html

2.8 Navigointipainikkeiden muokkaus

Muokataan listan rivit enemmän navigointipainikkeiden näköisiksi määrittämällä listarivin tausta valkoiseksi (bacground-color), jätettämällä ylä- ja alapuolelle tilaa (margin), suurentamalla elementin varaamaa aluetta hiukan (padding) ja piirretään elementin oikeanpuoleinen reunaviiva värillisenä ja vahvennettuna näkyviin (border-right).

ul.navipalkki li {
  background-color: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid #c71585;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-h.html

2.9 Linkkien muotoilu

Tekstien alleviivaukset navigointipainikkeissa näyttävät hassuilta. Alleviivaus johtuu siitä, että selaimet alleviivaavat linkeiksi määritellyt sanat automaattisesti. Poistetaan alleviivaus linkeistä ja määriteltään niiden kirjasin paremmin sivulle sopivaksi.

ul.navipalkki a {
  font-family: Geneva, Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-weight:bold;
  color: #c71585;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-i.html

2.10 Alaviitteen muotoilu

Muotoillaan vielä <footer>-elementti hiukan selkeämmin alaviitteenomaisemmaksi. Annetaan sille päätteetön, muuta tekstiä pienempi kirjasin, piirretään ohut pisteviiva sen yläpuolelle, ei kuitenkaan ihan kiinni piirrettyyn pisteviivaan.

footer {
  font-family: sans-serif;
  font-size: 0.8em;
  border-top: thin dotted;
  padding-top: 1em;
  text-align: right;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-j.html



3 HTML5

Ensimmäisessä luvussa selviteltiin eri www-sivun merkkauskielisukupolvien kehitystä. Seuraavassa käsitellään uusinta, lähes standardoitua, HTML-versiota HTML5. Kieli käydään läpi tarkalla tasolla ja samalla esitetään esimerkkejä HTML5-kielen käytöstä www-sivun kuvaamisessa.

3.1 Dokumentin rakenne

Dokumentin rakenne Minimaalisen HTML5 -dokumentin rakenne on seuraavanlainen

jossa <html>-elementti koostuu edelleen

Aiemmissa HTML-kielen versioissa dokumenttityypin määrittelyt olivat monimutkaisempia; niissä vaadittiin public identifier ja mahdollisesti myös system-identifier -osat joiden avulla viitattiin kielen DTD (Document Type Definition) esittelyihin. Esimerkiksi version HTML 4.01 strict (HTML 4.01:n xml-versio) vaatimat dokumenttityypin määrittely oli:
html4.01 dokumenttityyppimäärittely

Nykyisin HTML5 -dokumentin dokumenttityypin määrittely on yksinkertaisesti <!DOCTYPE html5> Määrittely aktivoi selaimen tulkitsemaan dokumentin standardimoodissa (activating browser modes) ja saa vanhemmat selaimetkin, jotka eivät tunne HTML5 -versiota, tulkitsemaan dokumentin HTML 4-dokumenttina (eräs HTML5:n suunnittelun peruslähtökohdista oli taaksepäin yhteensopivuus).

Dokumenttityypin määrittelyn jälkeen dokumentti sisältää yhden HTML-elementin, joka alkaa tunnuksella ("tägillä", tag) <html> ja loppuu tunnukseen </html>. Alkutunnukseen on mahdollista liittää lisämääreitä (näistä tarkemmin myöhemmin), tässä esimerkiksi lang, joka kertoo millä kielellä dokumentti on kirjoitettu. Esimerkissä dokumentin kieleksi on määritelty suomi (fi), muut käytettävissä olevat standardoidut kielitunnukset voi käydä katsomassa IANA:n language-subtag dokumentissa (tai hiukan selkeämmässä muodossa w3school-sivuilta).

HTML5 -dokumentti koostuu siis elementtien hierarkiasta, joista juuri-elementti <head> sisältää kaikki muut dokumentin elementit. Katsotaan aluksi, millaista syntaksia HTML5-elementit noudattavat.

3.2 HTML-elementin syntaksi

HTML-elementin kuva

Alkutunnuksen sisällä elementille voidaan määritellä yksi tai useampia attribuutti="arvo" -paria, esimerkiksi:

<p lang="en">
   A paragraph in English.
</p>

tai

<a href="http://palvelin/tiedostopolku/tiedosto" 
   target="_blank">Tämä on linkki</a>

3.2.1 Alku- ja lopputunnukset (tags)

Alku- ja lopputunnukset, "tägit", koteloivat HTML-elementin. Alkutunnuksen aloittavan kulmasulun "<" ja tag-nimen välissä ei saa olla väliöntejä, siis esim. < p> määrittelyä ei tunnistettaisi kappaleen aluksi. Vastaavasti lopputunnuksessa kulmasulun, kauttaviivan ja tägi-nimen välissä ei saa olla välilyöntejä. Kaikilla elementeillä on alkutunnus ja ei-tyhjillä (non-void) elementeillä tulee aina olla lopputunnus.

3.2.2 Elementin sisältö

Elementti voi sisältää tekstiä, elementtejä tai kommentteja: ne muodostavat elementin sisällön (content). Attribuutit ja niiden arvot eivät ole elementin sisältöä.

Teksti ja merkkitieto

Välilyönti- ja sarkainmerkkejä, sekä rivin- sivun- ja osanvaihtomerkkejä kutsutaan yhteisesti tyhjätilamerkeiksi ns. white space -merkeiksi. Kun sivua tuotetaan, peräkkäiset white space -merkit luhistetaan yhdeksi välilyönniksi ja rivin loppuun osuva white space tuottaa rivinvaihdon. HTML-dokumenttiin kirjoitetussa tekstissä ei saa olla white spaces -merkkejä lukuunottamatta muita kontrollimerkkejä.

pienempi-kuin merkki HTML-entiteettinä Jos jokin tarvittava erikoismerkki ei löydy käytetetystä merkistökoodauksesta, merkin voi aina tuottaa käyttäen ns. HTML-entiteettejä (entity) (ks. W3C: Named character referencestai Tutorialspoint: HTML5 - Entities Reference). HTML entiteetti alkaa '&'-merkillä ja päättyy ';'-merkkiin. Niiden väeliin kirjoitetaan joko erikoismerkille annetu nimi tai sen numerokoodi heksadesimaalilukuna. Kun lukua edeltää #-merkki, luku tulkitaan heksadesimaaliluvuksi. Jos esimerkiksi halutaan sivulla näkyväksi "pienempi kuin"-merkki, sen joutuu tuottamaan joko entiteettinä &lt;- tai &#60;. Jos tekstiin kirjoittaisi merkin < sellaisenaan, se ei tulisi näkyviin, koska se tulkittaisiin HTML-elementin alkumerkiksi. Samaten esimerkiksi ä- ja ö-kirjaimet saa tuotettua käytetystä merkistökoodauksesta riippumatta aina käyttäen HTML-entiteettiä &auml; ja &ouml; (tai &#228; ja &#246;). Jos halutaan kirjoittaa välilyöntimerkki, jota ei saa korvata rivinvaihtomerkillä käytetään entiteettiä &nbsp; (non-breaking space).

Elementtien luokittelu

HTML4-versioissa elementit luokiteltiin lohkotason ja rivitason elementteihin (block- ja inline-elementit). Lohkotason elementille on luonteenomaista, että se näytetään "omalla rivillään", ts. se alkaa sivun vasemmasta reunasta ja sen jälkeen seuraava elementti myös alkaa sivun vasemmasta reunasta. Kappale on tyypillinen lohkotason elementti, se erotetaan ympäristöstään rivinvaihdoin. Rivitason elementti taas on elementti, joka voi sisältyä kappaleeseen, kuten esim. <strong>-elementti, jonka avulla merkitään jokin tekstin osa kappaleen sisällä tärkeäksi.

HTML5:ssä elementeille voi edelleen antaa ns. display-piirteet inline / block (tästä tarkemmin CSS:n yhteydessä), mutta elementtejä ei enää jaeta lohkotason ja rivitason elementteihin. HTML5 luokittelee elementit phrasing- ja flow-elementeiksi.

Kuva: Phrasing-elementit ovat myös flow-elementtejä Phrasing elementit

Dokumentin tekstisisällössä määritelly "kappleensisäiset" muotoiluelementit luokitellaan phrasing-sisällöksi. Phrasing-elementit vastaavat siis vanhoja rivitason elementtejä.

Flow elementit

Lähes kaikki muut elementit, mukaanlukien phrasing-elementit ovat flow-sisältöä.

Elementtiluokittelua käytetään kuvaamaan millaista sisältöä eri elementit voivat saada (sisältömalli). Yllä esitellyt phrasing- ja flow-elementtiluokat riittävät suurimpaan osaan tilanteista, mutta itseasiassa elelmenttien luokittelu on hieman hienojakoisempi, sisältäen myös elementtiluokat heading, sectioning, embedded, interactive ja metadata (ks. tarvittaessa myös sanallinen selitys W3C HTML5-standandista).

Sisältömalli

Kullekin elementille määritelty sisältömalli (content-model) kuvaa millaista sisältöä elementti voi saada. Useimmat ei-tyhjät HTML-elementit, jotka eivät vaadi sisällökseen jotain määrättyä lapsi-elementtiä, voivat saada joko vain phrasing-sisältöä tai sitten väljemmin flow-sisältöä. Joidenkin elementtin sisältömallissa saatetaan käyttää myös edellä mainittuja ykstityikohtaisempia elementtiluokkia.

Esimerkiksi kappale-elementti <p> voi saada sisällökseen vain phrasing-sisältöä. Siten saattaa aluksi tuntua yllättävältä, että www-sivun rakenne ei salli listojen esittelyä (listat ovat flow-elementtejä) kappaleiden sisällä; listat tulee kirjoittaa kappaleiden väliin. Yleisemmin voi panna merkille, että elementit, jotka voivat saada flow-sisältöä, eivät ole sallittua phrasing-sisältöä.

Dokumentin runko-elementti <body> on esimerkki elementistä, joka voi saada sisällökseen flow-sisältöä. Flow-sisältö on sallivampaa kuin phrasing-sisältö. Esimerkiksi osa-, otsikko-, ja alaviite-elementit (<section>, <h1>.. <h6>, <footer>), teksti-sisältö ja myös ne elementit joita voidaan käyttää phrasing-sisältönä, ovat sallittua flow sisältöä.

Ensi-silmäyksellä samalta näyttävillä elementeillä saattaa olla erilaiset sisältömallit. Esimerkiksi <dl>-elementillä on kaksi lasta, <dt> ja <sd>. Jälkimmäisen sisältö voi olla mitä tahansa flow-sisältöä, mutta ensimmäisen sisältö voi olla vain phrasing-sisältöä. Näin ollen <dl>-listan <dt>-elementti ei voi saada sisällökseen flow-sisältöisiä elementtejä (kuten esim <footer> tai <hr>).

3.2.3 Elementin attribuutit

Attribuutit ovat nimi="arvo" -pareja.

Yhtäsuuruusmerkin molemmin puolin saa olla välilyönti, tai se voi puuttua. Boolean tyyppiselle attribuutille ei HTML5-syntaksin mukaan tarvitse antaa arvoa. Pelkkä attribuutin esittäminen vastaa silloin attribuutin "true"-arvoa (vrt. tyhjät attribuutit).

Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa omassa kontekstissaan. HML5:ssä on joukko attribuutteja, jotka voidaan osoittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan globaaleiksi attribuuteiksi.

3.3 Globaalit attribuutit

accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang spellcheck, style, tabindex, title, translate.

Yllä luetellut attribuutit ovat HTML5-merkkauskielessä ns. globaaleja attribuutteja. Kielen kaikki elementit voivat saada mitä tahansa näistä attibuuteista ja sen lisäksi kunkin elementin määrittelyn yhteydessä määritellään erikseen mitä muita attribuutteja elementti voi saada.

Joidenkin globaalien attribuuttien merkitys (esim title-attribuutti)saattaa olla eri elementeille määriteltynä hiukan erilainen.

3.4 Dokumentin otsikko

HTML-dokumentissa voi olla vain yksi otsikko-osa. Otsikko-osassa, ts. dokumentin <head> elementissä määritellään yleisiä dokumentiin liittyviä tietoja, se voi sisältää seuraavia elementtejä: <base> <link> <meta> <script> <style> <title>

3.5 Dokumentin runko

Dokumentin sisältö kirjoitetaan <body>-elementin sisään, dokumentin runko-osaan.

Dokumenttia luotaessa tulisi aina varautua siihen, että dokumenttia saatetaan sen elinaikana katsella hyvinkin erilaisissa olosuhteissa. Paitsi, että laitteen näytön koko voi vaihdella pienestä taskulaitteesta todella isoon paneelinäyttöön, dokumenttia "renderöivän" (kuvantavan, tuottavan) selaimen haasteet saattavat olla paljon monimuotoisemmat. Renderöinti voi esimerkiksi olla visuaalisen tuotoksen sijasta vaikkapa auditiivista (ruudunlukija) tai kosketukseen perustuvaa (braille-näytöt). Sivut saattavat elää todella pitkään, emmekä koskaan tiedä millaisia laitteita tulevaisuus tuo tullessaan. Sivun semanttisen sisällön tunnistaminen auttaa tekemään kuhunkin ympäristöön huomattavasti osuvamman ja selkeämmän tukinnan.

HTML5:n korostama periaate on, että elementit dokumentin rungossa välittävät dokumentin osien semanttisen roolin (merkityksen). HTML-koodissa ei oteta kantaa siihen miten sisältö renderöidään selaimen ikkunassa, tai jonkun muun laitteen näytöllä. Selaimen on tärkeätä tietää mikä renderöitävän tekstin merkitys dokumentissa on, ruudunlukija saattaa esimerkiksi lukea otsikot hitaammin tai erisävyisellä äänellä kuin muu teksti. Edellisen lisäksi, selaimet voivat käyttää semanttista merkkausta apunaan luodessaan selaustoimintoja, ruudunlukijan voi pyytää lukemaan vain otsikot, hyppäämään yhteystietoihin, menemään suoraan alaviitteeseen, jne.

Vielä näidenkin lisäksi, erilaiset verkossa toimivat ohjelmistot saattavat käyttää semanttista merkkausta hyväkseen. Hakukoneet, esimerkiksi, voivat tarjota merkkausta hyväkseen käyttäen sivustosta selkeän, sivuston rakennetta kuvaavan pikalinkkikokoelman. W3C määrittelee selainten ja muiden www-sivuja ohjelmallisesti käsittelevien ohjelmistojen tekijöille tarkasti miten tällainen yhteenveto (outline) luodaan (http://www.w3.org/TR/html5/sections.html#outline)

Käsitellään seuraavassa ensin elementit, joiden avulla kuvataan (1) dokumentin yleistä rakennetta, ja sen jälkeen käydään läpi elementit, joiden avulla kuvataan dokumentin (2) sisällön ryhmittelyä lohkotasolla ja (3) tekstin sisällä tapahtuvaa tekstinosien semanttista merkkausta.

3.5.1 Rakenteen määrittelyä

<address> <h1>..<h6> <hgroup> <header> <section> <article> <aside> <footer> <nav>

esimerkki dokumentin rakenteesta Kieleen on tullut useita uusia elementtejä, joiden avulla dokumentin rakennetta voidaan selkeyttää. Yllä esitellyistä yhdeksästä elementistä peräti seitsemän on HTML5:een esiteltyjä uusia, vain kaksi ensimmäistä ovat vanhoja (<<h1>..<h6> otsikkoelementit on laskettu yhdeksi elementiksi). Alla katsotaan kahta näistä uusista elementeistä (<section> ja <hgroup>) hiukan tarkemmin.

Eritasoiset otsikot olivat aiemmin ainoa tapa jäsentää dokumentin rakennetta. Jos esimerkiksi halutaan oheisen kuvan mukainen rakenne käyttäen vanhoja (edelleen käytössä olevia) elementtejä, se tapahtuisi seuraavasti.

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8" />
  <title>Dokumentin rakenteen määrittely</title>
</head>

<body>
  <h1>1 Otsikko</h1>
  <p> Lorem... </p>
  <h1>2 Otsikko</h1>
  <p> Lorem... </p>
  <h2>2.1 Otsikko</h2>
  <p> Lorem... </p>
  <h3>2.1.1 Otsikko</h3>
  <p> Lorem... </p>
  <h3>2.1.2 Otsikko</h3>
  <p> Lorem... </p>
  <h2>2.2 Otsikko</h2>
  <p> Lorem... </p>
  <h3>2.2.1 Otsikko</h3>
  <p> Lorem... </p>
</body>

Dokumentti löytyy esimerkkisivuilta nimellä 03-01-a-dokumentin-rakenne.html

Tässä ratkaisussa dokumentin sisältöä otsikoiden alla ei kuvata lainkaan hierarkisena rakenteena, selain joutuu päättelemään rakenteen vain otsikoiden tasojen perusteella. HTML5 -dokumentissa sisällön hierarkisen rakenteen voi kuvata eksplisiitisesti section-elementtien avulla.

<section>-elementin käyttö

Edellisen esimerkin rakenne esitettäisiin section-elementtien avulla seuraavasti

esimerkki dokumentin rakenteesta

Dokumentti löytyy esimerkkisivuilta nimellä 03-01-b-dokumentin-rakenne.html

Html5:n periaatteiden mukaista on, että kukin osa (section-elementti, mutta aivan vastaavasti myös alla esiteltävät article-, aside- ja nav-elementit) aloittaa oman otsikkohierarkiansa h1-tasolta kuten yllä tehtiin. Vaatimus taaksepäin yhteensopivuudesta takaa kuitenkin sen, että vaikka käytettäisiinkin sectio-elementtejä, voi otsikkotasot esittää myös hierarkiatasoa kuvaavassa muodossaan. Seuraava koodi tuottaa siis todennäköisesti saman tuloksen kuin edellinenkin.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Dokumentin rakenteen määrittely</title>
</head>

<body>
  <h1>1 Otsikko</h1>
  <p> Lorem... </p>
  <h1>2 Otsikko</h1>
  <p> Lorem... </p>
  <section>
     <h2> 2.1 Otsikko</h2>
     <p> Lorem... </p>
     <section>
          <h3>2.1.1 Otsikko</h3>
          <p> Lorem... </p>
     </section>
     <section>
          <h3>2.1.2 Otsikko</h3>
          <p> Lorem... </p>
     </section>
  </section>
  <section>
     <h2>2.2 Otsikko</h2>
     <p> Lorem... </p>
     <section>
        <h3>2.2.1 Otsikko</h3>
        <p> Lorem... </p>
     </section>
  </section>
</body>

Dokumentti löytyy esimerkkisivuilta nimellä 03-01-c-dokumentin-rakenne.html.

Tämä viimeinen versio on se, mitä tällä hetkellä suositellaan, koska ruudunlukijat eivät ainakaan toistaiseksi osaa jäsentää otsikkotasoja dokumentin osien sisältä, vaan turvautuvat suoraan käytettyyn <h1>..<h6>-elementtiin (ks. esim. Bruce Lawson: Headings in HTML5 and accessibility, http://brucelawson.co.uk./2009/headings-in-html-5-and-accessibility/ ja HTML5 Doctor: The section element, http://html5doctor.com/the-section-element/).

Itse asiassa tämä viimeinen tapa yksinkertaistaa myös otsikoiden muotoilua, koska eri tasoiset otsikoi voi edelleen muotoilla suoraan määrittämättä sen tasoa section-hierarkiassa (tämä selkeytyy myöhemmin, kun käydään läpi CSS-sääntöjä) Dokumentin rakenne saattaa aluksi tuntua monimutkaiselta, mutta se on HTML5-versiossa yksikäsitteisesti määritelty. Epäselvältä tuntuvissa tapauksissa Geoffrey Sneddonin HTML5 Outliner (http://gsnedders.html5.org/outliner/) on yksinkertainen ja kätevä työkalu, jolla voit tarkistaa miten dokumenttisi rakenne tulkitaan HTML5 spesifikaatioiden mukaisesti.

<hgroup>-elementin käyttö

Koska dokumentin semanttisessa jäsentelyssä nojataan vahvasti <hn>-elementteihin, seuraavanlainen koodi ei ole suositeltavaa:

  <body>
      <h1>Pääotsikko</h1>
      <h2>Tarkentava aliotsikko</h2>
      ...

Tässä <h2>-otsikko ei aloita uutta alilukua, vaan se itse asiassa muodostaa otsikon luvulle yhdessä <h1>-otsikon kanssa. Tällaisessa tilanteessa tulisi käyttää <hgroup>-elementtiä:

  <body>
      <hgroup>
        <h1>Pääotsikko</h1>
        <h2>Tarkentava aliotsikko</h2>
      </hgroup>
      ...

3.5.2 Sisällön ryhmittelyä (lohkotaso)

<p> <hr> <br> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div>

Yllä esiteltyjä elementtejä käytetään dokumentin sisällön erilaiseen ryhmittelyyn, kuten jakamiseen kappaleiksi, temaattisiin osiin, listoihin tai muihin jollain tavalla oman kokonaisuutensa muodostaviin osiin. Nämä elementit esitetään oletusarvoisesti omana lohkonaan, ts. ne erotetaan muusta sisällöstä rivinvaihdoin.

3.4.3 Tekstitason semanttisia elementtejä

<a> <em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> <span>

Vanhemmissa HTML versioissa oli mahdollista määrittää sivulle tuotettavaan tekstiin muotoilukomentoja vähän samaan tapaan kuin tekstinkäsittelyohjelmassa (esimerkiksi lihavoida <b>-elementtiä käyttäen). HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä. Tekstinosia, sanaryhmiä, sanoja tai ehkä joskus vain yksittäisiä merkkejä voidaan edelleenkin merkata, mutta merkkaus on aina semanttinen. Merkittävään tekstinosaan siis liittyy aina jokin semanttinen arvo, ts. jokin merkitys.

Tarkastellaanpa esimerkiksi <strong>- ja <em>-elementtejä, jotka molemmat tarkoittavat jonkinlaista tekstinosan korostusta. Vaikka ne useimmissa selaimissa saavatkin aikaan lihavoinnin tai kursivoinnin, niitä ei pitäisi käyttää ajatellen näiden muotoilujen aikaansaamista.

Elementin <strong> sisään kapseloidaan sellainen tekstinosa, joka on erityisen tärkeää. Se, miten tärkeä tekstinosa eri ympäristöissä (graafisesti, tai esim. äänenä) vaihtelee asiakasohjelmasta riippuen.

<em>-elementin sisälle suljetaan tekstinosa jota halutaan painottaa. Kyse on silloin enemmänkin kielellisestä painotuksesta, ei niinkään tekstinosan tärkeydestä. Esimerkiksi lauseiden Ensi kesänä menen Ruotsiin töihin tai Ensi kesänä menen Ruotsiin töihin merkitys on erilainen. Tällöin tulisi käyttää <em>-elementtiä painotuksen ilmaisemiseen, ei <strong>-elementtiä, koska painotettu sana ei ole varsinaisesti tärkeä vaikka sitä painotetaankin. Vastaava logiikka pätee muihinkin tässä osassa esiteltyihin elementteihin.

Merkattaessa tekstinosia käyttäen tässä esitettyjä elementtejä, tulee ajatella tekstinosan merkitystä, ei sen esityksellistä muotoa.

3.6 Linkit

WWW-sivulla jonnekin toisaalle (sivun sisällä, sivuston sisällä, muilla palvelimella sijaitseville sivuille) viittavat hyperlinkit esitetään <a>-elementin avulla.

3.6.1 Linkki mihin?

Siirtymiskohde määrätään href attribuutin avulla:
href = "merkkijono"

Attribuutin arvona oleva merkkijono voi olla jokin uri (Uniform Resource Locator)-osoite. Merkkijonon alussa annetaan skeema, joka voi olla jokin seuraavista: http, https, ftp, mailto, ldap, file, news, gopher tai telnet.

Esimerkiksi HTML-koodi
<a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a>
tuottaisi tekstin "aisakaspalvelu@yritys.fi" joka olisi samalla linkki, jonka aktivointi aukaisi koneen oletussähköpostiohjelman, ja loisi (riippuu tietysti sähköpostiohjelmasta, tekeekö tämä oletustoiminnan) uuden viestin, jonka to-osoitekentässä olisi valmiiksi "aisakaspalvelu@yritys.fi".

Jos attribuutin arvona on url-osoite tai hakemistopolku, se kertoo mistä osoitteesta selaimeen haetaan sivun sisältö.

Osoite voi olla absoluuttinen url-osoite mille tahansa internet sivulle, sivuston sisäinen suhteellinen osoite tai id-attribuutin avulla esitelty sivun sisäinen tunnus (sivun sisäinen "ankkuri"). Elementin tunnuksen käytön voi yhdistää kahteen edelliseen osoitteen käyttötapaan lisäämällä osoitteeseen "#id".

Absoluutinen osoite, siirtyminen mille tahansa sivulle

url-osoitteen avulla voidaan paikallistaa osoite mille tahansa sivulle internetissä. Osoite muodostuu

Esimerkkejä:
http://dev.w3.org:80/html5/markup/datatypes.html
http://www.sis.uta.fi/~jwt/13/sisalto.html
http://www.sis.uta.fi/~jwt/13/sisalto.html#luku_3-6-1
http://www.sanakirja.org/

Viimeisen esimerkin osoitteesta puuttuu tiedoston nimi. Tällöin palvelin näyttää

Suhteellinen osoite, siirtyminen sivuston sisällä

Suhteellinen osoite, jonka avulla tehdään siirtyminen toiseen dokumenttiin samalla palvelimella (suhteellinen osoite). Suhteellisessa osoitteessa ei määritellä protokollaa eikä palvelinta. Se tulkitaan siinä hakemistossa, jossa linkin sisältämä sivu on. Suhteellinen osoite on siis hakemistopolku ja viitattavan dokumenttin nimi. Hakemistopolku tulkitaan siitä dokumentista lähtien, jossa viittaus tapahtuu. Hakemistopolussa käytetään hakemistojen (kansioiden) nimiä ja ylöspäin hakemistorakenteessa päästään pseudohakemistonimen .. avulla. Tarvittaessa näitä merkintöjä voi olla useampia peräkkäin.

Esimerkkejä:
<a href="harj/index.html">
<a href="kuvat/taulu.jpg">
<a href="../index.html">

Yllä olevista ensimmäinen linkki viittaa samalla tasolla olevassa toisessa, harj hakemistossa olevaan index.html dokumenttiin, ts. tästä hakemistosta yksi ylöspäin, kansio harj, dokumentti index.html. Toinen linkki viittaa alihakemistossa (kansiossa) kuvat olevaan taulu.jpg dokumenttiin. Viimeinen linkki viittaa kaksi hakemistotasoa ylempänä olevan kansion index.html dokumenttiin (dokumentin nimen voisi jättää pois, koska se on joka tapauksessa oletus: <a href="../"> ).

Siirtyminen sivun sisällä

<a href="#kohta">

Siirtyminen johonkin ennalta määrättyyn kohtaan sivun sisällä. Kohta dokumentissa (johon halutaan siirtyä) merkitään id attributin avulla, esim. <h1 id="kohta">Otsikkoteksti</h1>

3.6.2 Muut <a> elementin attribuutit

target, hreflang, media, rel, type

Linkin kohteen määrittelevän href-attribuutin lisäksi <a>-lementti voi saada yllä luetellut attribuutit. Niiden avulla määritellään mihin linkin kohteena oleva sivu aukaistaan, millä kielellä linkin kohteena oleva sivu on kirjoitettu, millaisella laitteella linkin kohteena oleva sivu suunniteltu esitettäväksi, mikä on "tämän" dokumentin ja linkin kohteena olevan dokumentin keskinäinen suhde ja millainen dokumentti linkin määrittämässä osoitteessa sijaitsee.

3.6.3 Esimerkki

Esimerkkidokumentissa on sivun sisäisiä, sivuston sisäisiä sekä linkkejä muille sivuille, osa aukeaa samaan selainikkunaan, osa aukaisee uuden välilehden.

3.7 Taulukot verkkosivulla

Taulukoiden tarkoitus on jäsentää taulukkomaista tietoa riveihin ja sarakkeisiin. Niitä alettiin kuitenkin käyttää täysin tästä ajatuksesta poiketen sivun osien asemointiin. Tämä on nykyisen, eri medioita tukevan sivun toteutusperiaatteiden vastaista. Taulukon solujen oletetaan sisältävän taulukkoitua tietoa; kuvittele esimerkiksi miten sivunlukija tulkitsee sivua, jossa taulukkoelementtiä on käytetty pelkästään sivun visuaalisen rakenteen toteutukseen. Taulukoiden käyttö tuleekin rajoittaa nimenomaan taulukoidun tiedon esittämiseen ja sivun ulkoasun määritykset, sivun eri osien asemointi tehdään CSS:n keinoin.

3.7.1 Taulukon perusrakenne

<table> <tr> <td> <th>

Taulukot määritellään <table> elementin avulla. Taulukkoelementin sisällä esitellään taulukon rivit <tr> ja kullakin rivillä esitellään riville kuuluvat solut <td>. Näiden lisäksi taulukkoon voi määritellä sarake- ja riviotsikot <th>.

Aiemmissa HTML-versioissa oli monia attribuutteja, joiden avulla saattoi muokata taulukon ulkoasua. HTML5:ssä border-attribuutti on ainoa taulukon ulkoasua määrittelevä attribuutti. Sen avulla voi määritellä piirretäänko taulukolle kehys näkyviin (ja minkä paksuisella viivalla se piirretään, esim. <table border=3>). Jos attribuutti puuttuu, taulukkoon ei piiretä kehysviivaa. Muuten taulukon ulkoasu määritellään CSS-tyylisääntöjen avulla.

Esimerkki perustaulukosta
Esimerkki rivi- ja sarakeotsikoidusta taulukosta

3.7.2 Solujen sulautus

<colspan> <rowspan>

Taulukossa tulee usein tarve sulauttaa kaksi tai useampia soluja joko rivillä (horisontaalisesti)tai sarakkeella (vertikaalisesti) yhteen. Se tapahtuu rowspan ja colspan -attribuuttien avulla.

Esimerkiksi <td colspan=3> sulauttaa solulle tämän ja seuraavat kaksi saraketta (ts. horisontaalisesti 3 saraketta) ja <td rowspan="2"> sulauttaa solulle tämän ja seuraavat kaksi riviä (ts. vertikaalisesti 2 riviä).

Esimerkki solujen sulautuksesta

3.7.3 Talukon sarakkeiden muotoilu

<colgroup> <col>

Taulukon määrittely tehdään riveittäin <tr>-elementin avulla. Taulukon riveille on siten helppo kohdistaa CSS-muotoilusääntöjä. Taulukon alussa voi tarvittaessa määritellä myös taulukon sarakkeet <col>-elementin avulla, ja sitoa sarakkeita yhteen <colgroup>-elementtiä käyttäen. Tämä helpottaa sarakkeiden muotoilua, ts. tyylisääntöjen kohdistamista taulukossa vertikaalisessa suunnassa.

Esimerkki sarakkeiden muotoilusta - colgroup
Esimerkki sarakkeiden muotoilusta - col
Esimerkki sarakkeiden muotoilu + solujen sulautus

3.7.4 Esteetön (saavutettava, accessible) taulukko

<caption> <thead> <tbody> <tfoot>

Taulukko on mahdollista määritellä aiemmin esitellyillä elementeillä, mutta jälleen kerran palataan siihen, miten erilaiset sivutulkit pystyvät hyödyntämään kirjotettua koodia. Taulukon esittelijän onkin suositeltavaa määritellä taulukkonsa kertoen, mikä on taulukon otsikko (<caption>), mitkä ovat sarakeotsikoita (<thead>), mikä taulukon osa sisältää taulukon varsinaiset sisältösolut (<tbody>) onko taulukossa lopuksi jonkinlainen yhteenvetorivi <tfooter>.

Esimerkki: Esteetön taulukko

3.8 Kuvat verkkosivulla

Kuvat ovat tärkeitä sivuston keventäjinä, ilmeen luojina ja usein myös informaatiota sisältävinä elementteinä. Kuvia käytettäessä tulee muistaa olla tarkkana kuvien oikeuksien kanssa.

Voit tuoda sivulle vain itse ottamaasi kuvan, tai kuvan, jonka käyttöoikeudet eksplisiittisesti sallivat sen käyttämisen sillä tavalla ja siinä yhteydessä, jossa aiot kuvaa käyttää. Creative Commons -lisenssoinnin kautta on saatavissa eri tavoin vapaita tai rajoitetusti käytettävissä olevia kuvia. Googlen kuvahaun voi myös rajoittaa niin että haet vain vapaasti käytettävissä olevia kuvia (tarkennettu haku, kohta: Käyttöoikeudet). Vaikka kuva olisikin vapaasti käytettävissä olisi käyttämästään kuvan yhteyteen jollain tavoin hyvä liittää mainita kuvan tekijästä, jos se vaan on löydettävissä.

Seuraavassa käydään läpi perustiedot tuomisesta verkkosivuille <img>-elementin avulla. Luodaan kuitenkin ensin lyhyt katsaus siihen, millaisia kuvia sivulle voidaan tuoda, ja mistä kuvia saadaan tai miten niitä itse luodaan.

Joissain tilanteissa on tarpeen piirtää tai luoda kuvia "lennossa", kuten esimerkiksi jossain grafiikkaa sisältävässä nettipelissä. Se on entistä helpompaa uuden <canvas>-elementin ansiosta. canvas on nimensä mukaisesti taustakangas kuvalle, itse kuva luodaan tai tuodaan taustakankaalle kuten javascriptillä tai jollain muulla skriptikielellä, joten emme käsittele sitä tässä yhteydessä.

3.8.1 Kuvaformaateista

Digitaalinen kuva voidaan luoda joko vektorigraafisena tai bittikartta- eli rasterigrafiikkakuvana. Kun kuva tuodaan <img>-elementin avulla, vektorigraafisena luotu kuvakin muunnetaan useimmiten bittikarttakuvaksi (rasterikuvaksi, yleisimmät jpeg-, gif- ja png-formaatit), vaikka elementin avulla on mahdollista tuoda vektorigraafisiakin kuvia (svg-piirrokset tai yksisivuiset pdf-tiedostot).

Vektorigrafiikkakuvat piirretään käyttäen geometrisia olioita (viivoja, suorakaiteita, ellipsejä, Bezier-käyriä, jne.). Vektrorigrafiikan iso etu on sen skaalautuvuus: se säilyy terävänä kaikissa kooissa laadun kärsimättä. Vektorigrafiikkaa käytetään esim. kirjasinten toteutuksessa, ja esim. logojen ja julisteiden suunnittelussa. Näitä kuvia voi luoda vektorigrafiikkaa tukevilla piirto-ohjelmilla (esim. Freehand, Illustrator).

Valokuvat ovat aina bittikarttakuvia (rasterigrafiikkakuvia). Bittikarttakuvat koostuvat pisteistä, kuvapikseleistä. Yksi kuvapikseli voi saada arvokseen jonkun värin. Kuvan värisyvyys (kuinka monta väriä kuvassa on käytettävissä) vaikuttaa suoraan kuvan kokoon. Jos värisyvyys on 8 bittiä, se tarkoittaa, että kunkin kuvapikselin esittämiseen varataan 8 bittiä, joten kullakin kuvapikselillä voi olla 28=256 toisistaan poikkeavaa väriä. Jos värisyvyys on 24 bittiä, puhutaan täysvärikuvista, yksi kuvapikseli voi tällöin saada yhden 224=16,7 miljoonasta värisävystä, ja kuvakoko kasvaa kolminkertaiseksi.

Yksinkertaisin tapa tallentaa kuva on tallentaa jokainen kuvapikseli erikseen; tämä tiivistämätön tallennusformaatti on BMP-formaatti. Kuvan tallentaminen täysvärisenä bittikarttakuvana vie paljon tilaa joten kuvatiedostojen pienentämiseksi on käytössä erilaisia kuvaa tiivistäviä tallennusformaatteja. Yleisimmät tiivistävät tallennusformaatit ovat JPG, GIF ja PNG. Kuvatiedoston koko on tärkeä (ja mobiililaitteiden vuoksi sellaisena säilyykin) kriteerinä verkkosivuille viedyissä kuvissa. Järkevää on käyttää sitä formaattia, jolla kuvatiedoston koko on pienin ja kuvan laatu tarkoitukseen riittävä.

JPG-kuvaformaatti (Joint Photographic Expert Group)

JPG on hyvä tallennusmuoto valokuville, joissa on paljon eri värisävyjä. Formaatti pakkaa kuvan pienemmäksi säilyttäen kuvan värit, mutta se poistaa kuvasta muuta tietoa (kuvan tarkkuutta). Pakkaus tehdään tallentamalla kuva kuvankäsittelyohjelmassa alkuperäisestä formaatista JPG-formaattiin. Jos JPG-pakkauksen tekee alkuperäisestä kuvasta vain kerran, eivät pakkauksesta aiheutuvat muutokset ole kuvassa silmin havaittavissa. Saman kuvan toistuvaa JPG-pakkausta tulee kuitenkin välttää, jokainen pakkaus vähentää kuvan tarkkuutta. Pakatessaan voi pakkaussuhteen määrätä itse sen mukaan kuinka pieneksi kuvatiedosto on halutaan saada. Luonnollisestikin pakkaussuhteen suuruus ja kuvan tarkkuus ovat käänteisesti verrannollisia.

GIF-kuvaformaatti (Graphics Interchange Format)

GIF-kuvien tyyppillinen käyttötilanne on piirrokset, logot tai muut sellaiset kuvat, joissa on laajoja samanvärisiä kuvapintoja. GIF-kuvina tälläisten kuvien koko saadaan hyvin pieneksi, koska kuvien värisyvyys pienennetään 8 bittiin: GIF-kuvissa on käytössä vain 256 väriä. Muuten alkuperäinen kuvainformaatio (tarkkuus) säilyy. Paitsi kuvan tiivistäminen, GIF-formattin alkuperäisenä ajatuksena oli, että GIF-kuvissa voitiin käyttää "turvallisten webbivärien" 256 värin väripalettia, joiden näkyminen näytöillä olisi aina taattu. Laitteistokehityksen myötä tämä aspekti on menettänyt merkityksensä.

Yksi syy käyttää GIF-kuvia on ollut tarve saada kuva läpinäkyväksi. GIF-formaatti on tukenut tätä alusta asti, kuvassa jokin väri (taustaväri) voidaan määritellä läpinäkyväksi, joka antaa monipuolisempia mahdollisuuksia sen käyttöön verkkosivulla. GIF kuvien avulla voi myös tehdä animoituja kuvia, jossa kuvaan tallennetaan useampia kuvia ja niita toistetaan luupissa peräkkäin, tosin niiden käyttö sivustoilla on suurimmaksi osaksi jäänyt pois (ne häiritsevät toistuessaan loputtomasti, nykyisin löytyy hienovaraisempiakin tapoja toteuttaa liikettä).

PNG-kuvaformaatti (Portable Network Graphics)

W3C:n kehittämä PNG on enenevässä määrin syrjäyttänyt GIF-kuvien käytön. PNG-kuvaformaatti luotiin patenttioikeuksien rajatun GIF-formaatin korvaajaksi (avoin tiedostomuoto). Se tarjoaakin samat ominaisuudet kuin GIF (animoituja kuvia lukuunottamatta) mutta se on pakkausteholtaan parempi, sen tuki läpinäkyville kuville monipuolisempi ja se pystyy tarvittaessa tukemaan myös värisyyvyydeltään rikkaampia kuvia (PNG-8, PNG-24 ja jopa PNG-48).

PNG-kuvia voikin käyttää melkein kaikissa tilanteissa. Monivärisissä valokuvissa JPG-pakkaus kuitenkin toimii paremmin kuin PNG. Pienissä kuvissa JPG-pakkaus ei ole kovin tehokas, koska pakkausinformaation suhteellinen osuus kuvakoosta on iso. Myös tilanteissa, joisa on tärkeää, että sivut toimivat myös vanhoilla selaimilla (esim. IE 4) on tarpeen välttää PNG-kuvien käyttöä.

Yhteenveto

Image Formats: What's the Difference Between JPG, GIF, PNG? on hyvä yhteenvetoartikkeli kuvaformaattien käytöstä verkkosivuilla. Lyhyesti voitaneen todeta, että PNG-kuvia voi käyttää muuten, paitsi isohkoissa, paljon pieniä väripintoja sisältävissä valokuvissa, jolloin JPG-kuvat toimivat paremmin, tai tilanteissa, jossa sivujen toimita vanhoilla selaimilla ovat syystä tai toisesta olennaista.

3.8.2 Kuvan koko, resoluutio ja läpinäkyvyys

Bittikarttakuvan koko (dimensiot) mitataan pikseleissä. Ajatellaanpa esimerkkinä "3 megapik­selin" kameraa. Se ottaa kuvia, jotka ovat 2048 pikselin levyisiä ja 1536 pikselin korkuisia. Kun kuva tulostetaan paperille, kuvan fyysinen koko riippuu tulostuksessa käytetystä painojäljestä. Paperille, siedettävällä painojäljellä 256 ppi (pixels per inch), tulostettuna 3M kuvan koko olisi noin 20 x 15 cm.

Kuvaa ei kuitenkaan voisi näyttää sellaisenaan verkkosivulla. W3schoolin selaininformaatiosivulta voi tarkistaa minkä kokoisia näyttöjä verkossa liikkuvilla käyttäjillä on. Resoluutio 1024x768 on tällä hetkellä se "kynnyskoko" — lähes kaikilla w3school-sivustolla kävijöillä on sen kokoinen tai sitä suurempi näyttö. Kuvamme koko on siis huomattavasti sitä suurempi, lisäksi on kuitenkin hyvä huomioida, että tilasto on w3school sivustolla käyneistä, ja tuolla sivuilla tuskin käydään paljon pieninäyttöisiltä mobiililaitteilta. Näyttöjen tarkkuus vaihtelee välillä 72 - 100 ppi. Jos ajatellaan esimerkkivalokuvamme fyysistä kokoa näytöllä, se olisi näin ollen noin 75 x 54 cm. Siis aivan liian suuri näytöllä esitettäväksi. On siis järkevää käydä pienentämässä se jossain kuvankäsittelyohjelmassa ennen sivulle tuontia.

Termillä resoluutio voidaan tarkoittaa kahta asiaa: kuvan kokoa (esittämiseen käytettävää kuvapikselien lukumäärää, esim. 640 x 480) tai esitystarkkuutta (pikselien lukumäärää tietyllä pinta-alamitalla, esim. 72 ppi, joka on tyypillinen näytön resoluutio). Paperille tulostettuna kuvapikselien määrän kasvu voi lisätä kuvan tarkkuutta tai kuvan kokoa, mutta näytöllä pikselien määrän lisäys tarkoittaa aina kuvan fyysisen koon kasvua.

Läpinäkyvien kuvien avulla on mahdollista luoda monimutkaisempia asetteluja, joissa kuvan ääriviivan ei tarvitse olla suorakulmio, tai kuvia on helpompi sijoitella osittain päällekkäin. GIF ja PNG tukevat läpinäkyvyyttä (kuvankäsittelyohjemissa voi määritellä läpinäkyvät alueet); JPG ei sitä tue. GIF kuvissa voi yhden 256:sta väristä määritellä läpinäkyväksi, ts. yksi pikseli voi olla läpinäkyvä, tai sillä on väri. PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä. PNG kuvien avulla on helpompi saada pehmeästi häpyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä.

3.8.3 Kuvankäsittelyohjelmat

Kuvankäsittelyn perusperiaatteet ovat samat riippumatta käyttämästäsi ohjelmasta. Adoben Photoshop ja sen hiukan halvempi serkku Fireworks ovat suosituimmat kuvankäsittelyohjelmat. Photoshop on monipuolinen, kallis ja raskas ohjelma – Fireworks hinnaltaa noin kolmanneksen edellisestä, ketterämpi ja erityisesti suunniteltu verkkokäyttöön tulevien kuvien luontiin ja muokkaukseen
Alex J. Wendpap: Which is best for web design.

Nämä molemmat ovat kuitenkin melko hintavia, varsinkin jos ottaa huomioon, että monet halvat tai jopa täysin ilmaiset kuvankäsittelyohjelmat ovat kehittyneet erittäin monipuolisiksi ja käytettävyydeltäänkin hyviksi työkaluiksi. Edullisia vaihtoehtoja:

Myös online editorit ovat kehittymässä ja kehittyneetkin varteenotettaviksi vaihtoehdoiksi, kuten esim.

3.8.4 Kuvan tuonti verkkosivulle

Kuva sisällytetään HTML5-dokumenttiin <img>-elementin avulla.

Elementti on tyhjä, perusmuodossaan se näyttää seuraavalta

 <img src="kuvan verkko-osoite" alt="seliteteksti" />

Attribuutin src verkko-osoite kertoo mistä kuva sivulle noudetaan. Se voi olla samalla tavalla suhteellinen tai absoluuttinen kuin linkin verkko-osoitekin. Seliteteksti alt="seliteteksti" on HTML5:ssä pakollinen. Se näytetään, jos jostain syystä kuvaa (esim. tekstipohjaisissa tai audioselaimissa) ei voida näyttää. Ruudunlukijat tukeutuvat selitetekstiin kuvan sisällön kuvaamiseksi.

Kuvasta voi myös tehdä linkin asettamalla sen <a> sisään:

 <a href="#osa-2">
  <img src="../img/ff-arrow.png"  alt="Seuraava osa">
 <a>

Kuva on hyvä luoda suoraan sen kokoiseksi jona sen aikoo näyttää sivulla. Kuvan koon pikseleissä voi kertoa <a>-elementissä height ja width attribuuttien avulla, esimerkiksi:

 <img src="kuva.png" width="200" height="165" alt="Sanallinen selitys" />

Kuvan koko (dimensiot) kannattaa aina kertoa html-koodissa height ja width attribuuttien avulla. Jos selain tietää kuva-alueen koon etukäteen, kuvan latautuminen sivulle ei hidasta muun sisällön tuontia, eikä aiheuta tilanteita, joissa teksti ehtii latautumaan johonkin kohtaan ja sitä joudutaankin asettelemaan uudelleen kun kuva latautuu omalle kohdalleen, esim.

<img src="img/www.gif" width="300" height="248" alt="Palvelimet ja selaimet" />

Kuvan koon voi käydä tarkistamassa jossain kuvankäsittelyohjelmassa. Yksinkertaisin tapa koon tarkistamiseen on viedä kuva sivulle ensin ilman dimensioiden kertomista, ja sen jälkeen käyttää selainta kuvan dimensioiden tarkastamiseen (hiiren kakkospainikkeen kautta aukeavasta pudotusvalikosta: View image info / Näytä kuvan tiedot tms.). Selain antaa dimension lisäksi muutkin kuvan perustiedot, kuten esimerkiksi kuvan sijaintiosoitteen, koon, sille määritellyn selitetekstin.

Vaikka kuva kannattaakin pyrkiä näyttämään aina omassa koossaan (kuvan laadun säilymisen ja latautumisen nopeuden takia), height ja width attribuuttien avulla voi kuvan myös skaalata sivulle sopivaan kokoon. Tämä on kätevää ainakin siinä tapauksessa että samaa kuvaa käytetään sivustolla eri kokoisena eri kohdissa. Jos antaa kuvalle vain leveyden tai korkeuden, toinen ulottuvuus määräytyy aina oikeassa suhteessa, eikä vaaraa kuvan venymisestä tai litistymisestä ole. Toisaalta, kuten edellä todettiin, kuvalle kannattaisi aina määrätä molemmat dimensiot, jotta selain tietää kuva-alueen koon etukäteen, kuvan latautuminen sivulle ei hidasta muun sisällön tuontia. Silloin pitää kuitenkin itse huolta siitä, että annetut kuvan dimensiot eivät vääristä kuvaa.

3.8.5 Kuvakartat

Kuvaan voidaan "piilottaa kartta", joka määrittelee kuvan sisällä alueita, joihin liitetään erikseen linkkiominaisuus. Kartta toteutetaan erillisen <map>-elementin ja sen sisältämien <area>-elementtien avulla.

Kuvalle annetaan usemap-attribuutti, joka viittaa kuvaan liitettyyn karttaan. Karttaelementille määritellään vastaava tunniste name-attribuutin avulla.

<img src="img/pinnin-aula.jpg" alt="Pinnin aula" usemap="#kello-ja-kasvi" />
<map name="kello-ja-kasvi">
    <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
    <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="Viherkasvi" />
</map>

Jokainen kartan area-elementti määrittelee kuvan sisällä alueen, johon se liittyy. Alue määritellään area-elementin attribuuttien avulla. Alla tarkennusta area-elementin attribuuttien käyttöön.

3.9 Videot ja äänitiedostot verkkosivuilla

Ennen HTML5-versiota, ainoa tapa lisätä audio- ja videotiedostoja verkkosivulle oli käyttää kolmansien osapuolien tarjoamia lisäosasia, ns. plugin-ohjelmia, kuten Adoben Flash-player tai Applen Quicktime. Niiden käytössä on ongelmansa; lisäosan tulee olla asennettuna koneelle ja lisäksi usein koodi, joka yhdellä selaimella toimii esimerkiksi Flash-videon upottamiseksi sivulle, ei välttämättä toimikaan toisella selaimella.

HTML5 tekee videoiden ja äänitiedostojen käytön helpoksi, se tukee tiettyjä video- ja ääniformaatteja natiivisti, ts. suoraan selaimessa. Alunperin käytön piti olla nykyistäkin helmpompaa: HTML5 määrittelyssä oli aluksi vain kaksi media formaattia, yksi videolle ja yksi äänelle. Tarkoitus oli, että kaikkien HTML5-yhteensopivien selainten tulisi tukea näitä formaatteja. Apple ja Nokia eivät kuitenkaan suostuneet käyttämään valittua formaattia, joten HTML5:een jouduttiin lopulta ottamaan mukaan muitakin mediaformaatteja.

3.9.1 Videon tuonti verkkosivuille

HTML5-dokumentissa voidaan näyttää palvelimelle, tai johonkin Internettiin tallennettua videota. Videon tuominen HTML5:llä kirjoitetulle verkkosivulle tapahtuu lähes yhtä helposti kuin kuvan tuominen sivulle. Videon lisäämiseen käytetään <video>-elementtiä.

Yksinkertainen esimerkki:

<video src="media/pelikaani.webm">
  ...
</video>

Ks. esimerkki, yllä olevalla yksinkertaisella määrityksellä sivulle tuotu video.

Elementin src-attribuutin avulla siis kerrotaan (vastaavasti kuin kuville) mistä video noudetaan. Yllä olevalla yksinkertaisella videon esittelyllä ei kuitenkaan esimerkiksi määritellä videonsoittoalueen kokoa, tai määritellä miten video käynnistetään. Videon esittämistä voidaan säädellä elementin muiden attribuuttien avulla. Ne ovat seuraavat: height, width, poster, preload, autoplay, controls, muted, loop ja mediagroup.

Attributtien  height  ja  width  avulla voidaan määritellä videosoittoalueen koko. Videota ei voi venyttää, jos annettu leveys/korkeus suhde ei ole sama kuin videossa, video sovitetaan annetun kokoiseen suorakaiteeseen jolloin joko leveydessä tai korkeudessa jää tyhjää tilaa. Voit antaa myös vain toisen mitoista, mutta kuten kuvien yhteydessä, suositeltavaa on antaa molemmat mitat.

Videolle voi antaa aloituskuvan  poster -attribuutin avulla ja  preload -attribuutin avulla selaimelle voi antaa videon noutamiseen liittyviä ohjeita. Jos esimerkiksi oletetaan, että on epätodennäköistä että käyttäjä katsoo videota ja voidaan olettaa, että yhteysnopeus on rajoitettu, voidaan pyytää että video noudetaan selaimeen vasta jos käyttäjä sitä todella pyytää.

Totuusarvoisten  autoplay ,  controls ,  muted  ja  loop -attribuuttien avulla voi määritellä äynnistyykö video automaattisesti, näytetäänkö videolle ohjauspaneeli, soitetaanko videon ääni ja toistuuko video kunnes käyttäjä sen ehkä pysäyttää ja  mediagroup  -attribuutin avulla voi sekä muodostaa videoista ryhmiä.

Seuraavassa esimerkissä on määritelty videonsoittoalueen koko, määritelty videolle aloituskuva, ja määritelty siihen näytettäväksi ohjauspaneeli, jonka avulla käyttäjä voi kontrolloida videon soitamista:

<video src="media/pelikaani.webm" width="500" height="281" controls 
       poster="img/pelikaani.jpg"> 
  ...
</video>

Ks. Esimerkki (koon määritys, aloituskuva, ohjauspaneeli)

3.9.2 HTML5 videoformaateista

Periaatteessa videoiden näyttäminen onkin näin helppoa, mutta kuten alussa todettiin, selainten tukemien eri esitysformaattien takia asia hieman monimutkaistuu. Macin (ja Safarin) käyttäjät huomasivat sen jo edellisten esimerkkien kohdalla. He eivät nähneet videota ensimmäisessä esimerkissä.

HTML5 tukee kolmea videoformaattia (video codec): Ogg Theora, MP4 ja WebM. Alla olevasta taulukosta näet kunkin näistä selaintuen:

Videoformaatti Tiedostopääte Selainten tuki
Ogg Theora.ogg, .ogvFirefox 3.5+, Chrome5+, Opera 10.5+
MP4 (h.264) .mp4, .m4v Safari 3+, Chrome5+, iOS, Android 2+ (tosin Chrome on ilmiottanut aikovansa lopettaa tuen tulevissa versioissaan (Chrome19-?))
WebM .webm Firefox 4+, Chrome6+, Opera 11+, IE 9+, Android 2.3+

Ensinnäkin, yllä olevasta taulukosta näemme, että Safari ei tue WebM-formaattia; itse asiassa videot joutuu aina antamaan sivulla ainakin kahdessa eri formaatissa, jotta voi vakuuttua että se toimii kaikissa selaimissa. Toinen alkuperäistä ajatusta vesittävä seikka on, että Apple ja Microsoft vaativat (ainakin toistaiseksi) että koneelle on asennettu Quicktime (Apple) ja Windows Media Player (MS) jotta Safari (ja myös Chrome, koska molemmat ovat WebKit pohjaisia selaimia) ja IE9 toimisivat.

Useamman videoformaatin antaminen <video>-elementille tapahtuu elementin sisään kirjoitetun <source>-elementin avulla. Tällöin tulee src="url" attribuutti jättää itse <video>-elementistä pois (muuten se syrjäyttää <source>-elementtien vaikutukset). Periaate on, että selain etenee <source>-elementtien listaa ja poistuu <video> elementistä heti kun sen jälkeen kun on pystynyt tunnistamaan jonkun tarjotuista videotiedostoista. Edellisen esimerkin video saatiin siis toimimaan Safarillakin seuraavasti:

<video>
  <source src="img/pelikaani.webm" type="video/webm">
  <source src="img/pelikaani.mp4" type="video/mp4">
  <p>Selaimesi ei pysty näyttämään videota, pahoittelen.</p>	
</video>

<source> elementillä voi olla src attribuutin lisäksi attribuutit type ja media, joista ensimmäinen vaaditaan videon MIME tyypin määrittelemiseksi (video/ogg, video/mp4, video/webm) ja jälkimmäisessä voidaan antaa tietoa siitä millaisille laitteille video on optimoitu näytettäväksi.

Videoiden formaattimuunnoksiin on saatavissa useita video konverttori -ohjelmia, esim.

3.9.3 Tekstityksen lisääminen videoon

<track>-elementin avulla voidaan videoon liittää tekstitys. Attribuutti  src  vaaditaan annettavaksi; se kertoo mistä ajastettu tekstiraita noudetaan. Elementin muut mahdolliset attribuutit ovat: kind, srclang, label ja default.

Attribuutti  kind  määrittää millaista tietoa tekstiraita sisältää. Attribuutti  srclang  määrittää sen millä kielellä tekstiraita on kirjoitettu,  label  katsojalle näytettävän tekstiraidan otsikon ja  default  määrittää, että tekstiraita näytetään oletuksena, elleivät käyttäjän määritykset edellytä käytettäväksi jotain toista raitaa.

Ajastetun tekstitysraidan luominen jätetään tämän esityksen aihepiirin ulkopuolelle.

3.9.4 Videon tuonti YouTubesta

Kuten kuvienkin kohdalla, sinulla tulee luonnollisestikin olla oikeudet käyttää sivulle upottamaasi videota. YouTube-videoita voit käyttää vapaasti, jos upotat ne suoraan YouTubesta omalle sivullesi. Upottaminen tapahtuu HTML5:ssä <iFrame>-elementin avulla (<frame>-elementtiä ei HTML5:ssä enää ole, mutta <iFrame>-elementti kyllä). Saat sen tehtyä yksinkertaisesti kopioimalla videon yhteydestä löytämäsi upota/embed-koodi omalle sivullesi. Alle on juuri tällä tavalla tuotu YouTube video, joka opastaa upotuksen tekemisen yksityiskohtaisesti.

3.9.5 Äänitiedostot

Äänen soittaminen palvelimelta (tai jonnekin url-osoitteen osoittamaan paikkaan) tallennetusta äänitiedostosta verkkosivulla tapahtuu analogisesti videon esittämisen kanssa, <audio>-elementin avulla.

Elementin attribuutit ovat vastaavat kuin edellä kuvatussa <video>-elementissä. Erona on luonnollisestikin se, että visuaaliseen esittämiseen liittyvät attribuutit puuttuvat, joten äänen soittamista voidaan kontrolloida attribuuteilla  src ,  preload ,  autoplay ,  controls ,  muted ,  loop  ja  mediagroup .

Esimerkki

<audio autoplay="autoplay" loop="loop">
  <source src="audio/ella.wav" type="audio/wav">
  <source src="audio/ella.mp3" type="audio/mp3">
  <a href="audio/ella.mp3">Download the audio</a> 
 </audio>

Ks. Esimerkki (yllä olevalla määrityksellä sivulle tuotu äänitiedosto)

3.9.6 Äänitiedostoformaatit

HTML5 tukee viittä äänentallennusformaattia (audio codec): Ogg Vorbis, MP3, WAV, AAC ja MP4. Alla olevasta taulukossa kunkin formaatin selaintuki:

Äänitiedostoformaatti Selainten tuki
Ogg (Ogg Vorbis).oggFirefox 3.5+, Chrome5+, Opera 10.5+
MP3 (MPEG-1/MPEG-2 Audio Layer III) .mp3 Safari 5+, Chrome6+, iOS, IE9+
WAV(Audio for Windows) .wav Firefox 3.6+, Safari 5+, Chrome8+, Opera 10.5+, IE 9+
AAC (Advanced Audio Coding) .aac Safari 3+, IE9+, iOS 3+, Android 2+
MP4 (MPEG-4 Part 14) .mp4 Safari 3+, Chrome5+, iOS 3+, Android 2+

Ks. Esimerkki (2 ohjauspaneelin avulla kontrolloitavissa olevaa äänitiedostoa)

3.10 Lomakkeet verkkosivulla

Tähän asti on käsitelty miten WWW-sivuja käytetään tiedon välittämiseen käyttäjälle. Lomakkeiden avulla voidaan saada tietoa toiseen suuntaan, käyttäjältä sivun julkaisijalle. Lomakkeet ovat keskeinen osa vuorovaikutteisten verkkopalvelujen toteuttamisessa. Tällaisia palveluja ovat esimerkiksi

Lomakkeet koostuvat kahdesta osasta: (1) WWW-sivulla näkyvästä, HTML:n ja CSS:n avulla määritellystä lomakkeesta ja (2) lomakkeelle annettujen tietojen käsittelyn tekevästä ohjelmasta ("lomakkeenkäsittelijä", tallennettuna palvelimelle).

Ohessa on esimerkki erilaisista kentistä joita verkkolomakkeeseen voi määritellä. Lomakkeen muotoilua ei ole erikseen määritelty, ts. se näkyy selaimen oletusmuotoilulla, mutta voit jälleen CSS tyylisääntöjen avulla muotoilla lomakkeen ulkonäön haluamaksesi.

Lomakkeet on koettu HTML:ssä hankaliksi, koska niiden muotoilu ja käsittely vaatii muita sivuelementtejä enemmän sekä CSS että Javascript-koodausta. HTML5:ssä tämä on pyritty ottamaan huomioon, ja se sisältääkin huomattavan määrän uusia elementtejä ja attribuutteja lomakkeen käsittelyä varten. Oheisen esimerkkilomakkeen ominaisuudet ovat kaikki jo aiemmissa HTML-versioissa määriteltyjä ominaisuuksia.

Vaikka kaikki selaimet eivät vielä tuekaan näitä uusia määrityksiä, tässä tulee apuun jälleen HTML-tulkkien tapa jättää tunnistamattomat elementit tai attribuutit käsittelemättä. Niiden käyttö ei siis aiheuta virhettä: uudet ominaisuudet jäävät yksinkertaisesti vain huomiotta, ja tulevat käyttöön sitä mukaan kun uudet selainversiot osaavat niitä tulkita. Toki sivun totetuttajan tulee olla tietoinen siitä miten sivulla käytetyt elementit käyttäytyvät niissä selaimissa joita halutaan tukea, ja toteuttaa kriittiselle toiminnallisuudelle varmistukset, esim. Javascriptillä. Wufoo (http://wufoo.com/html5/) on työkalu, jonka avulla voi tarkistaa miten eri selaimet ja selainversiot tukevat HTML5:een lomakkeen esittelyä ja käsittelyä varten lisättyjä uusia ominaisuuksia.

Lomake esitellään verkkosivulla <form>-elementin avulla.

Karkealla tasolla lomakkeen määrittely näyttää seuraavalta:

<form {lomake-elementin attribuutit}> 
  {elementit lomakkeen sisällä - määräävät lomakkeen sisällön}
  {elementti, joka lähettää lomakkeen  käsittelyyn (input type="submit")} 
</form>

3.10.1 Lomake-elementti

Lomake määritellään <form>-elementin avulla. Lomakkeeseen määritellään kentät elementin sisään kirjoitettavia input-elementtejä käyttäen. Katsotaan kuitenkin ensin mitä attribuutteja lomake voi saada, ja mitä lomakkeen ominaisuuksia niiden avulla voidaan määriellä.

Mahdolliset attribuutit ovat  accept-charset   action   autocomplete   enctype   method   name   novalidate   target 

Attribuuttien accept-charset ja enctype avulla voidaan määritellä lomakkeelta lähetettävien tietojen merkistökoodaukseen liittyviä ominaisuuksia. Lomakkeenkäsittelijä, ts. ohjelma joka ottaa vastaan ja käsittelee lomakkeelle syötetyt tiedot, nimetään action-attribuutin avulla, ja method-attribuutti määrittelee miten tiedot lomakkeenkäsittelijälle välitetään. Attribuutin name avulla annetaan lomakkeelle tunnistetieto ja target määrittää sen, mihin avataan lomakkeenkäsittelijän palauttama HTML-dokumentti.

Uuden autocomplete-attribuutin avulla voidaan määritellä ehdotetaanko käyttäjälle kentän sisältöä aiemmin kenttään syötettyjen sisältöjen perusteella. Toinen uusi attribuutti ja novalidate määrittelee, että kentän syötetietoja ei haluta tarkastettavan automaattisesti (HTML5:ssä kenttiin syötettyjä tietoja tarkistetaan automaattisesti).

3.10.2 Attribuutti id vs. name atribuutti

Lomakkeen kenttien esittelyissä saattavat globaalin id-attribuutin ja lomakkeen name-attribuutin roolit joskus vaikuttaa sekavilta. Jokaiselle lomakkeen syötekentälle on määriteltävä name-attribuutti, jonka avulla verkkosovellus palvelimella tunnistaa miltä elementiltä syötetieto on peräisin. Myös id-attribuutti on lähes aina välttämätön, sitä käytetään verkkosivun sisällä kenttään viittamiseksi. Näiden ei välttämättä tarvitse olla samat, vaikka turhien sekaannusten estämiseksi onkin yleinen käytäntö antaa niille samat arvot.

3.10.3 Lomakkeen sisältö - elementit lomakkeen sisällä

Lomake-elementin sisälle kirjoitettavat elementit määrittävät lomakkeen kentät. Tärkein lomakkeen sisällön määrittelevistä elementeistä on yleiskäyttöinen <input>-elementti, jonka avulla voidaan esitellä suurin osa lomakkeen syötekentistä.

<input>-elementti

Tärkein lomakkeen sisällön määrittelevistä elementeistä on <input>-elementti, jonka avulla voi esitellä useita erilaisia syötekenttiä. Elementti on tyhjä elementti, esimerkiksi

 <input type="text" />

määrittelee kentän, johon käyttäjä voi syöttää yhden tekstirivin.

Se, millaista tietoa ja miten se kentän avulla lähetetään, määritellään elementin  type -attribuutin avulla. Kunkin syötetyypin toteutukseen liittyy oma toteutuksensa käyttöliittymäkomponenttitasolla. Esimerkiksi checkbox-tyyppinen elementti

 <input type="checkbox" />

toteuttaa valinnan annetuista vaihtoehdoista valintaruutu-käyttöliittymäkomponentin (vrt. esimerkkilomakkeen kysymys Oletko kiinnostunut) avulla. Mahdolliset syötetyypit ovat: text|password|checkbox|radio|button|submit|reset|file|hidden|image|datetime|datetime-local|date|month|time|week|number|range|email|url|search|tel|color">

Katsotaan seuraavassa mitä kukin syötetyyppi tarkoittaa ja miten niitä oli esimerkkilomakkeessa käytetty.

Kenttiin syötettyjen tietojen oikeellisuustarkistukset tehdään yleensä Javascriptin avulla.

Uusien, HTML5:een lisättyjen input elementtien tarkoituksena on vähentää erikseen kirjoitettavien Javascript-ohjelmien tarvetta, ja tehdä kenttiin syötettyjen arvojen tarkistus automaattisesti. Esimerkiksi sähköpostiosoitetta odottava lomake-kenttä odottaa käyttäjältä syötettä, joka voidaan tulkita sähköpostiosoitteeksi, ja antaa ilmoituksen jos näin ei ole.

Selainten tuki näille uusille syötetyypeille vaihtelee vielä paljon. Tämän tarkistamiseksi kannattaa tukeutua Wufoo-sivustoon: Browser Support for New HTML5 Input Types. Uudet syötetyypit ovat:

type-attribuutin lisäksi <input>-elementti voi saada joukon attribuutteja, joiden avulla voidaan säädellä erilaisia kenttään ja siihen syötettävään tietoon liittyviä ominaisuuksia: accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, value, width

Attribuutin value-arvo on kentän arvo (normaalisti juuri se arvo, joka välitetään elementin arvona lomakkeen käsittelijälle).

Suurin osa lomakkeen kentistä määritellään edellä käsitellyn <input>-elementin avulla, mutta rakenteeltaan monimutkaisemmille on on omat elementtinsä. Samaten kenttien ryhmittelyyn ja selkeyttämiseen on käytettävissä muutama elementti.

<fieldset> <legend> <label> -elementit

Lomakkeen kenttien ryhmittely tapahtuu <fieldset>- ja <legend>-elementtien avulla. Edellisen avulla luodaan lomakkeelle kenttäryhmiä loogisesti yhteenkuuluvista syötekentistä, ja jälkimmäisellä annetaan nimi tällaiselle ryhmälle. Edellisessä esimerkissä tälläisia kenttärymiä oli kuusi kappaletta; kunkin kenttäryhmän yläreunaan annettu nimi tai muunlainen seliteteksti oli annettu <legend>-elementin avulla. <label>-elementin avulla kentälle voidaan antaa lomakkeella kenttään liitettävä nimiö.

<textarea> <button> -elementit

Elementin <textarea> avulla voi määritellä useamman tekstirivin syötekenttiä, elementin attributtien avulla tekstikentälle voi määritellä mm. kentän leveyden ja korkeuden, antaa sille automaattisesti fokus lomakkeen latauduttua, tai antaa kenttään valmiiksi alkuarvo (placeholder) jonka käyttäjä voi halutessaan korvata toisella arvolla. Esimerkkilomakkeen viestikenttä oli toteutettu <textarea>-elementin avulla.

  <label for="msg">Viesti: </label>	
  <textarea id="msg" rows="10" cols="40" name="msg">

Tavanomaisen painikkeen voi toteuttaa <input>-elementin avulla, mutta jos haluaa määritellä epätyypillisempiä painikkeita, esimerkiksi tekstiä tai kuvia painikkeeksi, sen saa aikaan <button>-elementin avulla.

<select> <option> <optgroup> -elementit

Valintalista-elementtien (<select> ja <option>) avulla voidaan esitellä valintalista (pudotuslistana), kuten esimerkkilomakkeen jälkimmäisessä iän kysymiskentässä tehtiin:

<fieldset>
   <legend>Tai näin: ikäsi [select]</legend>
  
   <label for="age">Ikäsi: </label>
   <select id="age" name="age">
      <option>valitse</option>
      <option>alle 20</option>
      <option>20-39</option>
      <option>40-59</option>
      <option>yli 60</option>
   </select>
</fieldset>

Vaihtoehtoja voi ryhmitellä käyttäen <optgroup> elementtiä, esimerkiksi seuraavasti.

<form action="kasittelija.php"> 
   <select id="kirja" name="on-lukenut" multiple="multiple"> 
      <optgroup label="Sofi Oksanen"> 
         <option>Puhdistus</option> 
         <option>Kun kyyhkyset katosivat</option> 
     </optgroup> 
     <optgroup label="Arto Paasilinna"> 
     	<option>Aatemi ja Eeva</option> 
     	<option>Jäniksen vuosi</option> 
     	<option>Kylmät hermot, kuuma veri</option> 
     </optgroup> 
   </select> 
 <form>

Loput viisi lomake-elementtiä ovat HTML5-kieleen mukaan otettuja uusia elementtejä.

<datalist> <keygen> <output> -elementit

Uuden HTML5-elementin <datalist> avulla voi etukäteen määritellä vaihtoehtoja joita selain ehdottaa automaattisiksi täydennyksiksi käyttäjän kirjoittaessa syötettä tekstikenttään.

Elementin <keygen>

Lomakkeella saattaa olla numeraalisia arvoja sisältäviä kenttiä, joita halutaan käyttää laskutoimituksissa joiden tulokset edelleen halutaan näyttää lomakkeella. Tälläinen tilanne voisi olla esimerkiksi verkkokaupan ostoskoriin tuotujen kenttien arvojen yhteenlasku lopullisen laskun esittämiseksi. Tällaisessa tilanteesssa voitaisiin käyttää <output> elementtiä tiedon viemiseksi haluttuun kenttään.

<progress> <meter> -elementit

<progress>-elementin avulla voi piirtää horisontaalisen palkin, jonka täyttöasteen avulla voi ilmaista tehtävän etenemistä. <meter>-elementtin avulla tuodaan sivulle samantapainen komponentti, mutta sen avulla voi esittää suhteellisia arvoja. Sen avulla voi havainnollistaa esimerkiksi levytilan täyttymistä tai yleisemmin tiettyjen rajojen sisällä olevaa arvoa, osittain täytetyn palkin avulla.

3.10.4 Lomakkeen käsittely

Verkkosivujen lomakkeelle syötetyt tiedot lähetetään palvelimelle, jossa tiedot vastaanottaa ja käsittelee lomakkeen  action  attribuutissa määritelty CGI-ohjelma.

CGI-ohjelmat eivät ole sidottuja mihinkään tiettyyn ohjelmointikieleen, CGI on rajapinta (Common Gateway Interface) lomakkeen ja palvelimella tiedot vastaanottavan ohjelman välillä. CGI-ohjelma on siis WWW-palvelimella suoritettava ohjelma, joka saa selaimelta (yleisimmin HTML-lomakkeilta) tietoja CGI-rajapinnan välityksellä. CGI-ohjelma toteutetaan usein tulkattavilla, ns. skriptikielillä, esimerkiksi Perlillä, Phythonilla tai PHP:lla. CGI-ohjelmat voidaan myös kirjoittaa erilliseen käännettävillä kielillä kuten esim C#, Java tai C++ tai erityisesti verkkosovellusten laatimiseen räätälöityjen ohjelmointiympäristöjen avulla, kuten ASP.NET tai J2EE.

CGI-ohjelmat siis suoritetaan palvelimella, ne ovat ns. palvelinpuolen ohjelmia. Vaikka skriptikielillä kirjoitettua ohjelmakoodia voidaan kirjoittaa HTML-koodin sekaan CSS-tyylisääntöjen tapaan, sekin suoritetaan palvelimella. Palvelimella tulee siis olla käytettävissä ko. kielen tulkki. Tästä syystä ne voivat käyttää ja päivittää palvelimella olevia tietokantoja ja tiedostoja. Tyypillisesti CGI ohjelma tuottaa HTML-dokumentin, ts. palautesivun, joka lähetetään palvelimelta selaimelle, käyttäjälle näytettäväksi.

Tietojen lähettäminen lomakkeelta lomakkeenkäsittelijälle voi tapahtua kahdelle vaihtoehtoisella tavalla, lomakkeen method attribuutin arvoksi voidaan antaa joko get tai post.

get-metodi
<form action="cgi-ohjelman-url" method="get">
Mikäli lähetystavaksi valitaan "get" selain liittää lomakkeen tiedot suoraan kohteena olevan verkkosovelluksen osoitteeseen ja lähettää pyynnön verkkosovelluksen omaavalle www-palvelimelle. Tällöin kaikki lomakkeen tiedot näkyvät suoraan verkko-osoitteessa ?-merkin perässä. Muuttujat on eroteltu toisistaan &-merkillä.

Useimmiten tätä metodia käytetään pienissä lomakkeissa, joiden kautta lähetetään vain pari muuttujaa, ja joita ei ole tarpeen peittää käyttäjältä (tai muilta koneen lähettyvillä olevilta). Useimmat web-hakukoneet käyttävät lomakkeissaan get-metodia. Se mahdollistaa esimerkiksi kyselyn tallentamisen ja edelleen lähettämisen toisille asiasta kiinnostuneille tai tietojen lähettämisen lomakkeenkäsittelijälle myös kokonaan ilman verkkolomaketta, koska palvelinohjelma saa kaikki tietonsa suoraan verkko-osoitteensa perässä.

post-metodi
<form action="cgi-ohjelman-url" method="post">
Käytettäessä post-metodia lomakkeen tietoja ei liitetä suoraan verkkosovelluksen osoitteen perään, vaan ne lähetetään HTTP-kutsun mukana omassa kentässään. Tämän metodin käyttö on suositeltavaa, kun verkkosovellukselle lähetetään suuri määrä tietoa tai tiedon piilottaminen käyttäjältä tai tietokoneen ympärillä olevilta silmäpareilta on tarpeen.

On kuitenkin huomattava, että myös post-metodilla tiedot lähetetään verkkosovellukselle täysin salaamattomina - kolmas osapuoli voi helposti lukea kaikki lomakkeella lähetettävät tiedot, mukaanlukien salasanat. Tällaisia arkaluonteisia tietoja lähetettäessä tulisikin varmistua siitä, että asiakassovellus (web-selain) keskustelee www-palvelimen kanssa esim. SSL-salatulla HTTPS-protokolla.

Ks. Lähetetään people-palvelimella olevalle lomakkeenkäsittelijälle. Ohjelma on php:lla kirjoitettu peilaa.php-ohjelma, joka lähettää kenttien arvot takaisin selaimelle.

Voit halutessasi kopioida ohjelman itsellesi tästä: peilaa.txt
Toinen lomakkeenkäsittelijä, joka lähettää kenttien arvot sähköpostiin: spostina.txt

Jos haluat käyttää näitä omasta kotihakemistostasi, korvaa tiedoston nimestä .txt pääte päätteellä .php anna tiedostolle suoritusoikeudet kaikille. Jälkimmäisessä ohjlemassa sinun täytyy käydä laittamassa ohjelmaan oma sähköpostiosoitteesi sähköpostin lähetysosoitteeksi.


Attribuuttien määrittelyt

accept
syntaksi: <input accept="audio/*|video/*|image/*|MIME_type" />
Määrittää minkä tyyppisiä tiedostoja, tiedoston latauskomponentin avulla hyväksytään ladattavaksi palvelimelle (ääntä, videota tai kuvia). Toimii vain tiedoston latauskomponentin yhteydessä. Arvolla MIME_type ladattavaksi hyväksytään mikä tahansa validi MIME media tyyppi
esimerkki:
  <input type="file" accept="audio/*" />
<input type="file" accept="audio/*" />
[W3C] [W3C non-normative] [MDN] [W3School]
accept_charset
syntaksi: <form accept-charset="merkistökoodaus">
Määrittää merkistökoodauksen, jota palvelin lomakkeelta odottaa - jos tämä jätetään antamatta oletuskoodaus sama kuin mitä HTML-dokumentissa on käytetty
esimerkki:
  <form accept-charset="ISO-8859-1">
[W3C] [W3C non-normative] [MDN] [W3School]

Merkintä anytag tarkoittaa minkä tahansa elementin alkutunnusta.

accesskey
syntaksi: <anytag accesskey="x">
Määrittää yhden tai useampia näppäimistö-oikoteitä (x) elementin aktivoimiseksi (esim. aktivoi linkin, tai vie fokuksen elementtiin). Selaimissa oikotie toimii yleensä näppäinkomennolla alt+shift+x tai alt+x.
esimerkki:
  <nav id="nav_yla">
    <a accesskey="i" href="index.html">Info</a>
    <a accesskey="k" href="sisalto.html">Kurssisisältö</a>
    <a accesskey="e" href="esimerkit.html">Esimerkit</a>
    <a accesskey="h" href="harj/index.html">Harjoitukset</a>
    <a accesskey="t" href="ht-tentti.html">Htyö/tentti</a>
    <a accesskey="m" href="muuta.html">Muuta</a>
  </nav>
[W3C] [W3C non-normative] [MDN] [W3School]
action
syntaksi: <form action = "url-osoite">
Määrittää sen ohjelman (CGI-ohjelma, PHP-ohjelma, ...) url-osoitteen (absoluuttinen tai suhteellinen osoite), jolle käyttäjän lomakkeelle kirjoittamat tiedot lähetetään käsiteltäväksi.
esimerkki:
  <form action="mailaa.pl">
[W3C] [W3C non-normative] [MDN] [W3School]
alt
syntaksi: <img|area|input alt="seliteteksti kuvalle">
HTML5:ssä pakollinen seliteteksti <img>-elementin avulla määritellylle kuvalle. Selitetekstiä käytetään tilanteissa, joissa kuvaa ei näy graafisena elementtinä (esimerkiksi tekstipohjaisissa tai audioselaimissa tai normaalistikin, jos linkki on rikki). Jos kuvan rooli sivulla on pelkästään dekoratiivinen, attribuutin arvona saa olla tyhjä merkkijono.
<area>-elementin yhteydessä alt-seliteteksti on pakollinen aina jos kuvakartan hyperlinkki attribuutti
<input>-elementin yhteydessä alt-seliteteksti on käytössä vain image-tyyppisen käyttöliittymäkomponentin yhteydessä, jolloin se on pakollinen, merkkijono ei silloin saa olla tyhjä.  href , jossa annetaan kuvasta aukeava hyperlinkki, on läsnä. Selitetekstinä annetaan vaihtoehtoinen esitys alueelle, jos kuvaa ei voida esittää.
esimerkki:
  <img src="img/utalogo.gif" alt="Yliopiston logo" />
  <area shape="rect" coords="0,0,82,126" href="info.html" alt="Info" />
  <input type="image" src="painike.gif" alt="kuvateksti"  />
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
autocomplete
syntaksi: <form|input autocomplete = "on|off">
<form>: Määrittää ehdotetaanko syötekentän arvoksi automaattisesti aiemmin syötettyjä arvoja.
<input>: Määrittää, käytetäänko syötekenttää kirjoitettaessa automaattitäydennystä, jolloin syötekentän arvoa pyritään arvaamaan etukäteen aiemmin samannimiseen kenttään syötettyjen arvojen perusteella. Käytössä syötetyyppien text, search, url, tel, email, password, datepickers, range, ja color yhteydessä
esimerkki:
  <form autocomplete="on">
  <input type="text" name="cvv-numero" autocomplete="off" />
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
autofocus
syntaksi: <input autofocus[="autofocus"] />
Määrittää että komponentti aktivoidaan sivun latauduttua (ts. tälle kentälle/painikkeelle annetaan fokus aluksi).
esimerkki:
  <input type="text" name="etunimi" autofocus>
[W3C] [W3C non-normative] [MDN] [W3School]
autoplay
syntaksi: <video|audio autoplay[="autoplay"]>
Määrittää käynnistyykö video|audio automaattisesti.
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
challenge
syntaksi: <keygen challenge="merkkijono" />
Lisävarmistukseksi määritetty merkkijono tiedonsiirron salauksen verifioimiseksi. Merkkijono pakataan ja lähetetään lomaketietojen mukana.
esimerkki:
<keygen name="avain" challenge="1234567890" />
[W3C] [W3C non-normative] [MDN] [W3School]
checked
syntaksi: <input checked[="checked"] />
Käytössä syötetyyppien radio ja checkbox yhteydessä; asettaa niissä kyseisen vaihtoehdon (esi)valituksi.
esimerkki:
  <input type="radio" value="20-39" name="ika" checked="checked" />
[W3C] [W3C non-normative] [MDN] [W3School]
class
syntaksi: <anytag class="luokan-nimi">
Määrää elementin kuuluvaksi tiettyyn luokkaan. Elementtiin voidaan tyylisäännöissä viitata tämän luokkanimen avulla.
esimerkki:
<code class="htmlcode">koodirivejä</code>
[W3C] [W3C non-normative] [MDN] [W3School]
cols, rows
syntaksi: <textarea rows="ei-negatiivinen luku" cols="ei-negatiivinen luku">
Kentän leveys (cols) ja korkeus (rows) merkkeinä ja riveinä. Jos jäteään määrittelemättä, oletus on 20 merkkiä ja 3 riviä.
esimerkki:
  <textarea rows="10" cols="50" />
[W3C] [W3C non-normative] [MDN] [W3School]
colspan
syntaksi: <td colspan="ei-negatiivinen-luku">
sulauttaa pyydetyn määrän sarakkeita yhteen (luku 0 sulauttaa loput rivin solut yhteen)
esimerkki:
<table border="10">
	<tr>
		<th>Sarakeotsikko 1 </th>
		<th>Sarakeotsikko 2</th>
		<th>Sarakeotsikko 3</th>
	</tr>
	<tr>
		<td>Rivi 1, solu 1 </td>
		<td colspan="2">Rivi 1, solut 2 ja 3 (colspan="2")</td>
	</tr>
	<tr>
		<td>Rivi2, solu 1</td>
		<td>Rivi 2, solu 2</td>
		<td>Rivi 2, solu 3</td>
	</tr>
	<tr>
		<td>Rivi 3, solu 2</td>
		<td>Rivi 3, solu 3</td>
		<td>Rivi 3, solu 3</td>
	</tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]
contenteditable
syntaksi: <anytag contenteditable="true"|""|"false">
Määrää voiko elementin sisältöä muokata. Arvot "true" ja tyhjä merkkijono asettavat elementin editoitavissa olevaksi. Jos attribuuttia ei määritellä elementille lainkaan, elementti perii editoitavuuden äidiltään.
esimerkki:
  <p  contenteditable>
    Tätä tekstiä pystyisi nyt sivulla muokkaamaan.
  </p>
[W3C] [W3C non-normative] [MDN] [W3School]
contextmenu
syntaksi: <anytag contextmenu="menu-id">
Liittää elementille konteksisensitiivisen ponnahdusvalikon, joka esitellään erikseen tunnuksella "menu-id". Valikko aukaistaan hiiren kakkospainikkeen kautta, selaintuki tälle attribuutille kuitenkin toistaiseksi (2013) heikkoa.
[W3C] [W3C non-normative] [MDN] [W3School]
controls
syntaksi: <video|audio controls[="controls"]>
Määrittää näytetäänkö videolle (äänitiedostolle) ohjauspaneeli.
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
coords
syntaksi: <area coords="x1,y1,x2,y2"|"x,y,r"|"x1,y1,x2,y2,..,xn,yn">
Rajaa kuvasta alueen luettelemalla joko suorakaiteen, ympyrän tai monikulmion määrittelevät koordinaatit.
esimerkki:
<area shape="circle" coords="205,18,13" href="pallo.html" alt="txt">
<area shape="rect" coords="64,67,100,100" href="nk.html" alt="txt">
<area shape="poly" coords="54,201,24,194,11,183" href="mk.html" alt="txt">
[W3C] [W3C non-normative] [MDN] [W3School]
default
syntaksi: <track defaul[="default"]>
Jos määriteltynä, tekstiraita näytetään oletuksena, jollei käyttäjän omat määritykset edellytä jonkin toisen raidan näyttämistä näyttämistä.
esimerkki:
  <video width="320" height="240" controls>
    <source src="filmi.mp4" type="video/mp4">
    <source src="filmi.ogg" type="video/ogg">
    <track src="subtitles_fi.vtt" kind="subtitles" srclang="fi" 
           label="Finnish" default>
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" 
           label="English">
</video> >
[W3C] [W3C non-normative] [MDN] [W3School]
dir
syntaksi: <anytag dir="ltr"|"rtl"|"auto">
Määrittää tekstin kirjoitussuunnan (left-to-right, right-to-left tai jätetään ohjelmallisesti määriteltäväksi).
[W3C] [W3C non-normative] [MDN] [W3School]
dirname
syntaksi: <textarea dirname="kentta-id">
Attribuutti välittää kentän nimen, josta saadaan tekstin lukusuunta (ltr, rtt). Attribuutin puuttuessa, oletuksena länsimainen "ltr".
esimerkki:
  <textarea name="syote" dirname="lukusuunta">
[W3C] [W3C non-normative] [MDN] [W3School]
disabled
syntaksi: <input disabled[="disabled"] />
Asettaa komponentin passiiviseen tilaan, jolloin käyttäjä ei pääse muokkaamaan sen sisältöa tai napsauttamaan sitä hiirellä. Passivoidun komponentin nimi/arvo -paria ei välitetä palvelimelle.
esimerkki:
  <input type="radio" name="osa-2" disabled="disabled" />
[W3C] [W3C non-normative] [MDN] [W3School]
draggable
syntaksi: <anytag draggable="true"|"false"|"auto">
Määrittää voiko elementtiä raahata vai ei (itse raahauksen toteuttamien vaatii javascriptin kirjoittamista). Attribuutin oletusarvo auto jättää attribuutin arvon selaimen päätettäväksi.
esimerkki:
  <label draggable="true">Siirrä tämä</label>

Huomaa, että attribuutti ei ole boolean-arvoinen, joten edellistä esimerkkiä EI voi antaa muodossa: <label draggable>Siirrä tämä</label>.

[W3C] [W3C non-normative] [MDN] [w3school]
dropzone
syntaksi: <anytag dropzone="copy"|"move"|"link">
Määrittää miten raahattavaa kohdetta käsitellään jos se raahatessa tiputetaan elementin päälle, selaintuki tälle attribuutille kuitenkin toistaiseksi (2013) heikkoa.
[W3C] [W3C non-normative] [MDN] [w3school]
enctype
syntaksi: <form enctype = "application/x-www-form-urlencoded | multipart/form-data | text/plain">
Määrittää miten lomakkeille kirjoitettua tietoa muunnetaan ennenkuin se lähetetään palvelinohjelmalle syötteeksi. Oletuksena oleva application/x-www-form-urlencoded varmistaa välilyöntien ja erikoismerkkien siirtymisen koodauksesta riippumatta; edelliset muutetaan +-merkeiksi ja jälkimmäiset muutetaan ascii hex -arvoiksi. Arvo multipart/form-data ei tee muunnoksia, ja sitä tulee käyttää jos lomakkeessa on tiedoston lataus -painike.
esimerkki:
  <form enctype="text/plain">
[W3C] [W3C non-normative] [MDN] [W3School]
for
syntaksi: <label for="kentta-id" />
Yhdistää <label>-elementin avulla annetun nimiön kenttään, jonka id on kentta-id
esimerkki:
  <label for="enimi">Etunimi: </label>
  <input type="text" id="enimi" />
ks. <label>-elementin esittely yllä
[W3C] [W3C non-normative] [MDN] [W3School]
form
syntaksi: <input|label form="tunnus" />
Vaikka määriteltävä komponentti ei olisikaan <form>-elementin sisällä, sen voi liittää kuuluvaksi tiettyyn lomakkeeseen, antamalla form-attribuutille sen lomakkeen tunnus, johon komponentti halutaan liittää. Näin komponentin arvo välitetään palvelimelle lomakkeen mukana vaikka se sijaitsisikin sivulla visuaalisesti lomakkeen muista komponenteista erillään.
esimerkki:
  <input form="lomake-id" />
  <label form="form_id">
[W3C] [W3C non-normative] [MDN] [W3School]
formaction
syntaksi: <input formaction="lomakkeenkäsittelijä-url"/>
Normaalisti lomakkeenkäsittelyohjelma nimetään lomake-elementin action-attribuutin avulla. Jos lomakkeen tiedolle halutaan vaihtoehtoisia käsittelyohjelmia, tämän attribuutin avulla voi painikkeelle määritellä muitakin lomakkeenkäsittelijöitä kuin elementin esittelyssä annettu. Voidaan käyttää syötetyyppien submit ja image yhteydessä
esimerkki:
input type="submit" formaction="toinen.php" value="Optio-2" />XXX 
[W3C] [W3C non-normative] [MDN] [W3School]
formenctype
syntaksi: <input formenctype ="application/x-www-form-urlencoded | multipart/form-data | text/plain" />
Määrittää kentästä palvelimelle lähetettävän tiedon koodauksen (käytettäessä post-metodia). Voidaan käyttää syötetyyppien submit ja image yhteydessä.
esimerkki:
  <input  type="submit" formenctype="text/plain" value="Tallenna"/>
[W3C] [W3C non-normative] [MDN] [W3School]
formmethod
syntaksi: <input formmethod="get|post" />
Normaalisti tietojen lähetystapa nimetään lomake-elementin method-attribuutin avulla. Tämän attribuutin avulla voi painikkeelle määritellä lähetystavan, joka syrjäyttää lomakkeelle annetun lähetystavan. Voidaan käyttää syötetyyppien submit ja image yhteydessä
esimerkki:
  <input formmethod="post" />
[W3C] [W3C non-normative] [MDN] [W3School]
formnovalidate
syntaksi: <input formnovalidate[="formnovalidate"] />
Ehkäisee lomakkeen lähetyspainikkeessa lomakkeen kenttien automaattisen tarkistuksen palvelimelle lähetettäessä.
esimerkki:
  <input type="submit" formnovalidate="formnovalidate" value="Lähetä" />
[W3C] [W3C non-normative] [MDN] [W3School]
formtarget
syntaksi: <input formtarget="iframe-nimi|_blank|_self|_parent|_top />
Ohjaa lomakkeen käsittelystä tuotetun palautteen nimettyyn kehykseen (iframe), uuteen välilehteen (_blank), nykyiseen ikkunaan (_self), äiti-elementin ikkunaan (_parent), tai elementtirakenteen ylimmän elementin ikkunaan (_top).
esimerkki:
  <input  formtarget="_top" />
[W3C] [W3C non-normative] [MDN] [W3School]
hidden
syntaksi: <anytag hidden>
Elementti halutaan pitää (ainakin toistaiseksi) näkymättömissä.
esimerkki:
  <p hidden>Tämä teksti ei tule näkyviin</p>
[W3C] [W3C non-normative] [MDN] [w3school]
height
syntaksi: <img|video|input height="ei-negatiivinen luku">
<img>: <video>: Määrittelee elementin korkeuden pikseleissä.
<input>: Voidaan käyttää syötetyypin submit yhteydessä: määrää kuvan avulla muodostetun syötekomponentin korkeuden pikseleissä.
esimerkki:
  <img src="logo.gif" alt="Yrityksen logo" height="42">
  <video width="320" height="240" controls>
    <source src="malli.mp4" type="video/mp4">
    <source src="malli.ogg" type="video/ogg">
    Selaimesi ei pysty näyttämään videota, pahoittelemme.
  </video>
  <input type="image" src="laheta.gif" alt="Lähetä" width="36" height="18">
  <input type="image" height="20" />
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
href
syntaksi: <a href="url">
Määrittää url-osoitteen, jonka hyperlinkki aukaisee,
esimerkki:
<a href="http://www.merriam-webster.com/">Merriam Webster</a> -sanakirjan
avulla voit harjoitella myös englannin kielen ääntämystä.
[W3C] [W3C non-normative] [MDN] [W3School]
hreflang
syntaksi: <a hreflang="language-subtag">
Hyperlinkin osoittaman dokumentin kieli.
esimerkki:
<a href="http://www.sis.uta.fi/~jwt/13/sisalto.html" hreflang="fi">HTML5-kurssi</a>
[W3C] [W3C non-normative] [MDN] [W3School]
id
syntaksi: <anytag id="merkkijono">
Antaa elementille yksikäsitteisen tunnuksen.
esimerkki:
  <h1 id="osa-contact">Yhteystiedot</h1>
[W3C] [W3C non-normative] [MDN] [w3school]
keytype
syntaksi: <keygen keytype="rsa|dsa|ec" />
Määrää käytetttävän salausalgoritmin.
esimerkki: esim.
<form action="kasittelija.php" method="get">
    Pankkitilin numero: <input type="text" name="tilinro">
    Salaus: <keygen name="salaus" keytype="rsa">
    <input type="submit">
</form>
[W3C] [W3C non-normative] [MDN] [W3School]
kind
syntaksi: <track kind ="subtitles"|"captions"|"descriptions"|"chapters"|"metadata">
Määrittää millaista tietoa tekstiraita sisältää.
Jos kind ="subtitles" elementti tuo tekstiraidan, joka on tarkoitettuna tyypilliseen tilanteiseen, jossa katsoja ei täysin ymmärrä ääniraitaa (kuten vieraskielinen video) tai jostain muusta syystä ääniraita ei ole täysin katsojan saatavilla.
Jos ääniraita on täysin kuulumattomissa, attribuutin arvo kind="captions" kertoo, että tekstiraita sisältää paitsi litteroitua puhetta, myös muuta tietoa videon(/audion) äänimaailmasta (kuten esim. kuuroille tarkoitettu tekstiraita).
Jos taas visuaalinen komponentti ei ole käytettävissä, attribuutin arvo kind ="descriptions" määrittää, että tekstiraidassa selitetään videon sisältöä (esim. näkövammaisia ajatellen).
Attribuutin arvo kind="chapters" kuvaa, että track-elementti liittää media-tiedostoon väliotsikoita. kind="metadata" on varattu skriptipätkien käyttöön
[W3C] [W3C non-normative] [MDN] [W3School]
label
syntaksi: <track label="ei-negatiivinen luku">
Antaa tekstiraidalle otsikon, jota voidaan käyttää erilaisissa luetteloissa tai tekstiraidasta annettavassa informaatiossa.
esimerkki:
<track kind="subtitles" src="txt.fi.vtt" srclang="fi" label="suomeksi" />
[W3C] [W3C non-normative] [MDN] [W3School]
lang
syntaksi: <anytag lang="language-subtag">
Kuvaa elementin kirjoittamisessa käytetyn kielen. Tunnisteiden standardoinnista vastaa IANA (Internet Assigned Numbers Authority). Lista käytössä olevista tunnisteista löytyy osoitteesta: http://www.iana.org/assignments/language-subtag-registry.
esimerkki:
  <p  lang="de">
    Dieser Absatz ist in deutscher Sprache verfasst.
  </p>
[W3C] [W3C non-normative] [MDN] [w3school]
list
syntaksi: <input list="datalist-id" />
Liittää syötekentän <datalist>-elementtiin, jossa on lueteltu kenttään mahdollisesti syötettäviä arvoja. Näitä arvoja käytetään kun automaattinen täydentäminen ehdottaa kentälle arvoksi. Jos syötetyyppi on hidden, checkbox, radio, file tai button, attribuutti jätetään huomiotta.
esimerkki:
<input list="kulkuvaline" name="tyomatka">
<datalist id="kulkuvaline">
  <option value="oma auto">
  <option value="bussi">
  <option value="juna">
  <option value="mopedi/moottoripyörä">
  <option value="jalan">
</datalist> />
[W3C] [MDN] [W3School]
loop
syntaksi: <video|audio loop[="loop"]>
Määrittää toistuuko video (äänitiedosto) kunnes käyttäjä sen ehkä pysäyttää.
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
manifest
syntaksi: <html manifest="tiedostonimi.appcache" />
Mahdollistaa sivuston tallentamisen välimuistiin (application cache), joka nopeuttaa sivuston käyttöä ja mahdollistaa sivuston käytön offline-tilassa. Annetuun tiedostoon kirjoitetaan tekstimuodossa ne resurssit, jotka tulisi tuoda välimuistiin, jotta sivustoa voi käyttää ilman verkkoyhteyttä. Tiedostopäättenä tiedostolle suositellaan käytettäväksi päätettä appcache. esimerkki: <html manifest="sivusto.appcache" />
[W3C] [W3C non-normative] [MDN] [W3School]
max
syntaksi: <input max="number|date" />
Kentän suurin mahdollinen arvo (numeerinen arvo tai aika). Sen tulee olla suurempi kuin elementille määritelty min-arvo.
esimerkki:
  <input type="date" name="luokka" min="1" max="3" />
[W3C] [W3C non-normative] [MDN] [W3School]
maxlength
syntaksi: <input maxlength="luku" />
Määrittää elementin pituuden merkeissä; syötekentässä määrää kuinka monta merkkiä syötekenttään maksimissaan otetaan vastaan.
esimerkki:
  <input type="text" name="etunimi" maxlength="15" />
[W3C] [W3C non-normative] [MDN] [W3School]
media
syntaksi: <a media="arvo">
Kertoo millä laitteella dokumentti on suunniteltu esitettäväksi (ts. mille laitteelle optimoitu). Attribuutin arvo voi olla jokin mediakyselyn antama mediatyyppi (media query) yhdistettynä esitysympäristöä tarkentaviin mediapiirteisiin (media features). Mediatyyppivaihtoehtoja ovat tällä hetkellä all, aural, braille, handheld, projection, print, screen, tty ja tv, mutta valikoima laajennee laitteistojen kehittyessä. min-width on esimerkki mediapiirteistä (media features)
esimerkki:
<a href="url" media="screen and (min-width: 320px)">linkki</a>
[W3C] [W3C non-normative] [MDN] [W3School]
mediagroup
syntaksi: <video|audio mediagroup="merkkijono">
Attribuutin avulla voi sekä muodostaa videoista (äänitiedostoista) ryhmiä että kysyä mihin ryhmään video kuuluu.
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
method
syntaksi: <form method = "get|post">
Lomakkeen tiedot voi lähettää verkkosovellukselle kahdella eri tavalla, get- tai post-metodia käyttäen.
esimerkki:
  <form method="post">
[W3C] [W3C non-normative] [MDN] [W3School]
min
syntaksi: <input min="number|date" />
Elementin pienin mahdollinen arvo (numeerinen arvo tai aika). Sen tulee olla pienempi kuin elementille mahdollisesti määritelty max-arvo.
esimerkki:
  <input type="date" name="saika" min="1900-01-01" />
[W3C] [W3C non-normative] [MDN] [W3School]
multiple
syntaksi: <input multiple="multiple" />
Käytettäessä email- ja file-typpisten syötekomponenttien yhteydessä antaa mahdollisuuden valita useamman tiedoston kerralla, tai antaa syötteeksi useammman pilkulla toisistaan erotetun sähköpostiosoitteen kerralla. Käytettäessä <select-elementissä, jolloin listakomponentista tulee monivalinnan salliva lista (muuten select-lista toteutetaan yleensä pudotusvalikkona).
esimerkki:
  <input type="email" multiple="multiple" />
[W3C] [W3C non-normative] [MDN] [W3School]
muted
syntaksi: <video|audio muted[="muted"]>
Määrittää soitetaanko videon (äänitiedoston) ääni.
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
name
<map>: Antaa kuvakartalle nimen, jonka avulla se ydistetään siihen kuvaan, jolle halutaan määritellä aktiivisia alueita.
syntaksi: <map|form|input name="nimi">
<form>: Antaa lomakkeelle nimen, jota ohjelmat käyttävät tunnistetietona lomakeen avulla lähetettyihin tietoihin viitattaessa. Nimen tulee olla yksikäsitteinen (lomakkeiden kesken)
<input>: Antaa komponentille nimen, jota käytetään tunnistetietona kun elementin arvo lähetetään lomakkeenkäsittelijälle
esimerkki:
<img usemap="#kartta-1" src = ...
<map name="kartta-1">
  <area shape=rect coords=25,25,75,75 href="osoite">
</map>
  <form name="asiakastiedot">
  <input type="text" name="etunimi" />
[W3C] [W3C non-normative] [MDN] [W3School] (<map>)
[W3C] [W3C non-normative] [MDN] [W3School] (<form>)
[W3C] [W3C non-normative] [MDN] [W3School] (<input>)
novalidate
syntaksi: <form novalidate="novalidate">
Määrittää, että lomakkeelle annetuille tiedoille ei tehdä automaattista tarkistusta ennen lähetystä.
esimerkki:
  <form novalidate>
[W3C] [W3C non-normative] [MDN] [W3School]
pattern
syntaksi: <input pattern="säännöllinen lauseke" />
Mahdollistaa hyväksyttävän arvon määrittelemisen säännöllisten lausekkeiden avulla. Alla oleva esimerkki vaatii, että kenttään tuotekoodi vaaditaan syöte, joka alkaa numerolla ja sitä seuraa kolme kirjainta.
esimerkki:
  <input type="text" name="tuotekoodi" pattern="[0-9][A-Z]{3}" />
[W3C] [W3C non-normative] [MDN] [W3School]
placeholder
syntaksi: <input placeholder="vihje"/>
Kenttään voi antaa vihjeeksi alku-arvon, joka esimerkiksi kehottaa antamaan syötteen tietyssä muodossa.
esimerkki:
  <input type="text" name="sostunnus" placeholder="000000-000X" />
[W3C] [W3C non-normative] [MDN] [W3School]
poster
syntaksi: <video poster="url">
Aloituskuvan osoite, jos halutaan että videon paikalla ennen sen käynnistämistä on aloituskuva. Aloituskuva venyy määriteltyyn videon leveyteen ja korkeuteen, ellei sen mittasuhteet valmiiksi ole samat.
esimerkki:
<video width="500" height="281" poster="img/pelikaani.jpg"> 
  <source src="media/pelikaani.webm" type="video/webm">
  . . .
</video>
[W3C] [W3C non-normative] [MDN] [W3School]
preload
syntaksi: <video|audio preload="none"|"metadata|"auto"|"">
Voidaan esittää selaimelle pyyntö, että videota (äänitiedostoa) ei ladata palvelimelta, ennenkuin se käynnistetään, tai että vain sen metatiedot (koko, tyyppi, pituus, jne.) tuodaan selaimeen, tai että latauksesta huolehtiminen jätetään selaimen päätettäväksi. Ei ole takuita, että selain kaikissa tilanteissa noudattaa annettua pyyntöä. Tyhjällä merkkijonolla attribuutin sisältönä on sama vaikutus kuin arvolla auto.
esimerkki:
<video width="500" height="281" preload="metadata"> 
  <source src="media/pelikaani.webm" type="video/webm">
  . . .
</video>
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
readonly
syntaksi: <input readonly[="readonly"] />
Asettaa kentän passiiviseen tilaan, sen arvoa ei pääse muokkaamaan.
esimerkki:
  <input  type="text" value="osa.3" readonly/>
[W3C] [W3C non-normative] [MDN] [W3School]
rel
syntaksi: <a rel= "void"|"alternate"|"author"|"bookmark"|"help"|"license"| "next"|"nofollow"|"noreferrer"|"prefetch"|"prev"|"search"|"tag">
Kuvaa tämän (viittaavan) dokumentin ja linkitetyn dokumentin (href) keskinäisen suhteen.
void suhdetta ei ole määritelty
alternate linkki vaihtoehtoiseen versioon dokumentista (esim. käännös)
author linkki dokumentin kirjoittajaan
bookmark kirjanmerkkinä käytettävä pysyvä osoite
help linkki ohjedokumenttiin
license linkki dokumentin copyright-tietoihin
next linkki seuraavaan dokumenttiin lineaarisesti etenevässä sivustossa
nofollow linkki sivulle, jota kirjoittaja ei ole itse määrittänyt (esim. maksetut linkit). Hakukoneet voivat jättää linkin seuraamatta.
noreferrer estää viittaajan tietojen välittämisen linkin viittaamalle sivulle
prefetch viitatun sivun noutaminen etukäteen välimuistiin olisi hyödyllistä, koska käyttäjä tulee todenäköisesti tarvitsemaan sitä
prev linkki edelliseen dokumenttiin lineaarisesti etenevässä sivustossa
search linkki sivun hakutyökaluun
stylesheet linkki sivun tyylitiedostoon
tag linkki tämän dokumentin avainsanaan (annetussa osoitteessa on määrittely tms. informaatiota ko. avainsanasta)
esimerkki:
  <a href="osoite" rel="next">Seuraava luku</a>
[W3C] [W3C non-normative] [MDN] [W3School]
required
syntaksi: <input required[="required"] />
Pakollisti täytettävä kenttä: kenttään on annettava arvo ennen kuin lomakkeen voi lähettää käsittelyyn.
esimerkki:
  <input type="text" name="puhno" required="required"/>
[W3C] [W3C non-normative] [MDN] [W3School]
rows
syntaksi: <textarea [cols="ei-negatiivinen luku"} [rows="ei-negatiivinen luku"]>
Kentän korkeus (rows) ja merkkeinä ja leveys (cols) riveinä. Jos jäteään määrittelemättä, oletus on 20 merkkiä ja 3 riviä.
esimerkki:
  <textarea rows="10" cols="50" />
[W3C] [W3C non-normative] [MDN] [W3School]
rowspan
syntaksi: <td rowspan="ei-negatiivinen-luku">
sulauttaa pyydetyn määrän sarakkeita yhteen (luku 0 sulauttaa loput rivin solut yhteen)
esimerkki:
<table border="10">
	<tr>
		<th>Sarakeotsikko 1 </th>
		<th>Sarakeotsikko 2</th>
		<th>Sarakeotsikko 3</th>
	</tr>
	<tr>
		<td>Rivi 1, solu 1 </td>
		<td>Rivi 1, solu 2</td>
		<td>Rivi 1, solu 3</td>
	</tr>
	<tr>
		<td rowspan="2">Rivi 2 ja 3, solu 1 <br />(rowspan="2")</td>
		<td>Rivi 3, solu 2</td>
		<td>Rivi 3, solu 3</td>
	</tr>
	<tr>
		<td>Rivi 3, solu 2</td>
		<td>Rivi 3, solu 3</td>
	</tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]
shape
syntaksi: <area shape="rect"|"circle"|"poly"|"default">
Kertoo määriteltävän kuvakartan alueen muodon, joka voi olla suorakaide, ympyrä, monikulmio tai, jos attribuutin arvo on "default", alue on koko kuva.
esimerkki:
  <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
[W3C] [W3C non-normative] [MDN] [W3School]
size
syntaksi: <input size="positiivinen luku" />
Kenttään näkyviin mahtuvien merkkien lukumäärä. Käytettävissä syötekomponenttien text, search, tel, url, email ja password yhteydessä.
esimerkki:
  <input type="text" name="snimi" maxlength="25" size="12" />
[W3C] [W3C non-normative] [MDN] [W3School]
spellcheck
syntaksi: <anytag spellcheck[="true"|""|false"]>
Määrää suoritetaanko elementin tekstisisällölle automaattinen oikeinkirjoitustarkistus. Selaintuki tälle attribuutille kuitenkin toistaiseksi (2013) heikkoa.
esimerkki:
<input type="text" name="paivitettava-kuvaus" spellcheck="true" />
[W3C] [W3C non-normative] [MDN] [w3school]
src
syntaksi: <img|input src="url-osoite" />
<img> Kertoo osoitteen, josta kuva noudetaan.
<input> Käytettävissä vain image-syötekomponentilla.
esimerkki:
  <img  src="img/kuvat.gif" alt="kuvan selitys" />
  <input  type="image" src="img/tallenna.gif" alt="tallenna" />
[W3C] [W3C non-normative] [MDN] [W3School]
srclang
syntaksi: <track srclang="language-subtag">
Määrittää tekstiraidan kielen.
esimerkki:
<video src="esimerkki.ogv">
   <track kind="captions" src="sampleCaptions.srt" srclang="en">
   <track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
   <track kind="chapters" src="sampleChapters.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_fi.srt" srclang="fi">
</video>
[W3C] [W3C non-normative] [MDN] [W3School]
step
syntaksi: <input step="luku" />
Käytetään rajoittamaan hyväksyttäviä syötekentän arvoja, sekä luku-arvojen rajoittamiseen että ajan painoarvon määrittämiseen. Käytettävissä attribuuttien number, range, date, datetime, datetime-local, month, time ja week yhtyedessä.
esimerkki:
  <input type="number" step="5" />
[W3C] [W3C non-normative] [MDN] [W3School]
style
syntaksi: <anytag style="[CSS-sääntö;]*">
Attribuutin avulla voi elementin sisään kirjoittaa CSS-sääntöjä, jotka koskevat vain tätä elementtiä. Tämä kuitenkin rikkoo hyvää kooodaustapaa: HTML-dokumentti tulisi pitää erillään sen muotoiluun liittyvistä css-säännöistä. Muotoilusäännöt tulisi esittää erillisessä CSS-tiedostossa, niitä ei pitäisi löytyä *.html-dokumentista, eikä varsinkaan dokumentin runko-osasta. Joissain tilanteissa – esimerkiksi tilapäisesti kokeiltaessa CSS-sääntöjen toimintaa – tämä on kuitenkin näppärä mahdollisuus.
esimerkki:
  <h1 style="background-color:yellow; text-align:right">
    Tämä otsikko on oikealla
  </h1>
[W3C] [W3C non-normative] [MDN] [w3school]
tabindex
syntaksi: <anytab tabindex="luku">
Määrittää, että elementti voi saada fokuksen, ja sen avulla voi määrittää missä järjestyksessä elementit (esimerkiksi linkit tai lomakkeen kentät) saavat fokuksen kun niitä käydään näppäimistöltä sarkainselauksella läpi. Sarkaimella käydään elementit läpi lähtien tabindex-arvosta 1. Samalla tabindex-arvolla olevat elementit käydään läpi esiintymisjärjestyksessä. Negatiivinen tabindex-arvo tarkoittaa, että elementti voi saada fokuksen, mutta se ei ole mukana sarkainselaussekvenssissä. Jos tabindex-arvoksi annetaa 0, halutaan, että elementti voi saada fokuksen ja että se voidaan aktivoida sarkainselauksella, mutta selausjärjestys jätetään selaimen toteutettavaksi.
esimerkki:
  <p>
    Sivun <a href="kohde1.html" tabindex="2">linkkien</a> 
    selausjärjestyksen voi halutessaan määrätä itse. Esimerkiksi 
    nyt tähän <a href="kohde2.html" tabindex="1">linkkiin</a> 
    tullaan ensin.
  </p>
[W3C] [W3C non-normative] [MDN] [w3school]
target
syntaksi: <a| target="_blank"|"_self"|"_parent"|"_top">
<a>: Määrittelee missä linkin osoittama sisältö avataan.
<form>: Määrittää missä lomakkeen aktivioman cgi-ohjelman palauttama HTML-dokumentti näytetään (uudessa välilehdessä, samassa ikkunassa, vanhempielementin kehyksessä, dokumentin runko-elementissä.)

Attribuutille annettavien arvojen merkitykset ovat seuraavat:
_blank: uuteen selaimeen tai välilehteen, esimerkki:
Aukaise <a href="osoite" target="_blank">linkki</a> uuteen välilehteen.
<form target ="_blank">
  ... lomakkeen määritykset
</form>
_self: samaan selaimen osaan jossa linkki itse sijaitsee, esimerkki:
Aukaise <a href="osoite" target="_self">linkki</a> tähän samaan ikkunaan.
<form target ="_self">
  ... lomakkeen määritykset
</form>
_parent: samaan selaimen osaan missä äiti-elementti sijaitsee, esimerkki:
Aukaise <a href="osoite" target="_parent">linkki</a> äitielementtiin.
<form target ="_parent">
  ... lomakkeen määritykset
</form>
_top: jos linkki iframe:n sisällä, ylimmälle tasolle, esimerkki:
Aukaise <a href="osoite" target="_top">linkki</a> koko ikkunaan.
<form target ="_top">
  ... lomakkeen määritykset
</form>
[W3C] [W3C non-normative] [MDN] [W3School] (<a>)
[W3C] [W3C non-normative] [MDN] [W3School] (<form>)
title
syntaksi: <anytag title="merkkijono">
Liittää elementtiin tooltip-tyyppistä lisäinformaatiota. Tulee yleensä näkyviin hiiren kursorin viivähtäessä elementin päällä (mouse-over). Kannattaa pitää mielessä, että kaikissa käyttötilanteissa ei ole hiiren kursoria (tabletit, puhelimet), joten tämän attribuutin välittämään tieto ei saa olla sivun käytön kannalta olennaista tietoa. <link>- ja <style>-elementeille annettuna title-attribuutin merkitys on erityinen.
esimerkki:
  <p  title="Tähän kappaleeseen liittyvä huomautus ">
    Huomautukset voivat olla vain rivin mittaisia, koska
    merkkijonoon ei voi sisällyttää rivinvaihtoja.
  </p>
[W3C] [W3C non-normative] [MDN] [w3school]
translate
syntaksi: <anytag translate="yes"|"no">
Määrittää, käännetäänkö elementin attribuutit ja niiden sisältö, sekä elementin tekstiä sisältävien lasten kieli kun sivusta tehdään lokasoitu versio.
[W3C] [W3C non-normative]
type
Attribuutti on määritelty <a>, <input> ja <button>-elementeille:
syntaksi (1): <a type="mime-tyyppi">
Kertoo linkattavan dokumentin esitysmuodon, ns. MIME-tyypin. Tällä hetkellä tieto on tiedotuksenomainen, mutta tulevaisuudessa sitä saatetaan käyttää eri tavoin; selain saattaisi esimerkiksi lisätä pienen kaiutinikonin linkkiin, jonka mime-tyyppin on audio/wav. MIME-tyypit on esitelty IANAn sivuilla.

syntaksi (2): <input type="text|password|checkbox|radio|button|submit|reset|file|hidden|image|datetime|datetime-local|date|month|time|week|number|range|email|url|search|tel|color">
Määrittää <input>-elementin yhteydessä, millainen syötekomponentti lomakkeelle luodaan.

syntaksi (2): <button type="submit|reset|button">
Määrittää <button>-elementillä painikkeen tyypin. Jos painikkeen tyyppi on submit, sen napsautus lähettää lomakkeen tiedot käsittelyyn. Jos arvo on reset, painikkeen napsautus poistaa käyttäjän tekemät komponenttien muokkaukset ja palauttaa lomakkeen alkuarvot.

esimerkki:
.. asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa..
  <input type="button" />
  <button type="button">
	<img src="" alt="Painike">
  </button>
[W3C] [W3C non-normative] [MDN] [W3School] (<a>)
[W3C] [W3C non-normative] [MDN] [W3School] (<input>)
[W3C] [W3C non-normative] [MDN] [W3School] (<button>)
value
syntaksi: <input value="merkkijono">
Kentästä oletuksena lähetettävä arvo, ellei käyttäjä muokkaa arvoa ennen lähetystä. Kun attribuuttia käytetään syötekomponenttien button, reset ja submit yhtyedessä, merkitys on erilainen. Niille value-attribuutin arvo kuvaa painikkeeseen kirjoitettavan tekstin. Visuaalisilla progress ja meter-elementeillä value-arvo määrää palkkiin piirrettävän täyttöasteen. esimerkki:
  <input type="submit" value="Lähetä">
[W3C] [W3C non-normative] [MDN] [W3School]
width
syntaksi: <img|video|input width="ei-negatiivinen luku">
Määrittelee elementin (kuva, video, input-elementti) leveyden pikseleissä. <input>-elementillä voidaan käyttää syötetyypin submit yhteydessä (kuvan avulla muodostetun syötekomponentin leveys pikseleissä).
esimerkki:
  <img src="logo.gif" alt="Yrityksen logo" width="42">
  <video width="320" height="240" controls>
    <source src="malli.mp4" type="video/mp4">
    <source src="malli.ogg" type="video/ogg">
    Selaimesi ei pysty näyttämään videota, pahoittelemme.
  </video>
  <input type="image" widtht="50" />
  <input type="image" src="laheta.gif" alt="Lähetä" width="36" height="18">
[W3C] [W3C non-normative] [MDN] [W3School] (<img>)
[W3C] [W3C non-normative] [MDN] [W3School] (<video>)
[W3C] [W3C non-normative] [MDN] [W3School] (<input>)attr_ATRTAG
wrap
syntaksi: <textarea wrap="hard|soft"">
Jos arvo on "hard", kentästä lähetettävä teksti lähetetään pätkittyinä (newline-merkkien avulla) riveiksi. Jos arvo on "soft" newline-merkkejä ei lisätä.
esimerkki:
  <textarea name="osoite" wrap="hard">
[W3C] [W3C non-normative] [MDN] [W3School]

Elementtien määrittelyt

<a> Hyperlinkki (linkeistä tarkemmin kohdassa 3.6)
sallittu sisältö sama kuin äidillään (transparent)
sallitut attribuutit  globaalit attribuutit   href   target   hreflang   rel   media   type 
sallittu äiti-elementti elementti, joka voi saada flow- tai phrasing-sisältöä
esimerkki:
<p>
  Sivujen tekijän on hyvä tietää mitä selaimia nykyisin käytetään.   
  Eräs selkeä tilasto selainten niin nykyisestä kuin menneestäkin   
  käytöstä löytyy <a href=
  "http://www.w3schools.com/browsers/browsers_stats.asp">W3schoolin 
  sivuilta</a>
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<abbr> Merkkaa lyhenteen tai akronyymin. Jos elementillä on title-attribuutti, sen tulee sisältää lyhenteen selitys.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
   Internet tarjoaa infrastruktuurin 
   <abbr title="World Wide Web">WWW</abbr>:lle.
[W3C] [W3C non-normative] [MDN] [W3School]


<address> Sisältää yhteystiedot; jos elementin äiti on body-elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot.
sallittu sisältö flow-sisältöä, joka ei ole heading- tai sectioning-sisältöä, lisäksi ei <header>-, <footer>- eikä <address>-elementtiä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti Elementti, joka voi saada flow-sisältöa
esimerkki:
 <address>
    &copy;Aulikki Hyrskykari<br />
    Informaatiotieteiden yksikkö, Tietojenkäsittelytieteet<br />
    Tampereen yliopisto<br />
    email: aulikki.hyrskykari(at)uta.fi
  </address>
[W3C] [W3C non-normative] [MDN] [W3School]


<area> Kuvakartan alueiden määrittely; käytetään yhdessä <map>-elementin kanssa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   alt   coords   shape   href   hreflang   target   rel   media   type 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<img src="img/pinnin-aula.jpg" alt="Pinnin aula" usemap="#kello-ja-kasvi" />
<map name="kello-ja-kasvi">
    <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
    <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="Viherkasvi" />
</map>
[W3C] [W3C non-normative] [MDN] [W3School]


<article> Osa dokumenttia, joka muodostaa oman kokonaisuutensa; sellainen osa, jonka voisi ajatella itsenäisesti julkaistavaksi. Tälläinen voisi olla esimerkiksi lehtiartikkeli tai blogi.
sallittu sisältö flow-sisältöä, jota saattaa edeltää yksi tai useampia <style>-elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä, ei kuitenkaan <address>-elementti
esimerkki:
  <article>
    <h2>Kakkosluvun otsikko</h2>
    <p>
      Tämän otsikon alle kirjoitettu teksti muodostaa selkeästi oman 
       kokonaisuutensa, että sen voisi vaikka "ripata" jonnekin muualle.
    </p>
  </article>
[W3C] [W3C non-normative] [MDN] [W3School]


<aside> Sivulla omaan lokeroonsa kirjoitettua sisältö. Usein tälläisia oheissisältöjä ovat "hyvä-tietää" tai "taustafaktoja"-tyyppiset sivuhuomautuslokerot ("tangentially related" informaatiota).
sallittu sisältö flow-sisältö, jota voi edeltää yksi tai useampia <style>-elementtenä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <aside>
    <h1>FAKTA-BOKSI</h1>
    <p>
       Tiesitkö, että ...
    </p>
  </aside>
[W3C] [W3C non-normative] [MDN] [W3School]


<audio> Soittaa äänitiedoston.
sallittu sisältö Läpinäkyvä, ts. äidiltä peritty sisältömalli, kuitenkin niin, että elementin sisältö rakentuu seuraavasti. Sisältönä tulee olla
(1) joko  src -attribuutti tai yksi tai useampia <source>-elementtejä,
(2) jota seuraa nolla tai useampia <track>-elementtejä, sekä mahdollisesti flow tai phrasing-sisältöä (ei kuitenkaan sisäkkäistä <video>-elementtiä tai <audio>-elementtiä).
sallitut attribuutit  globaalit attribuutit   src   preload   autoplay   controls   muted   loop   mediagroup 
sallittu äiti-elementti mikä tahansa elementti, jolle joko phrasing- tai flow-sisältö on sallittua
[W3C] [W3C non-normative] [MDN] [W3School]


<b> Merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on lihavoitu teksti. Testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia; tällainen tekstinosa voisi olla esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Eurooppaministeri <b>Alexander Stubbin</b> mukaan kyproslaisten on 
itse löydettävä ratkaisu, joka täyttää EU:n, Euroopan keskuspankin ja 
Kansainvälisen valuuttarahaston IMF:n ehdot lainapaketin saamiseksi.
[W3C] [W3C non-normative] [MDN] [W3School]


<base> Oletuspolku dokumentissa viitatuille linkeille. Dokumentissa saa olla vain yksi <base>-elementti.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit ,  href ,  target 
sallittu äiti-elementti <head>
esimerkki:
  <base href="http://www.sis.uta.fi/~jwt/13/" />
[W3C] [W3C non-normative] [MDN] [W3School]


<bdi> Merkataan tekstinosa, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia). Suunnan voi määrätä dir-attribuutilla. Normaalisti attribuutin oletusasrvo on ltr, siitä poiketen tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   dir 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Pääsiäinen arabiaksi on <bdi>لفصح</bdi> ja pääsiäisloma
<bdi>عيد الفصح</bdi>.
[W3C] [W3C non-normative] [MDN] [W3School]


<bdo> Muuttaa (käyttäen  dir -attribuuttia) tekstin oletuskirjoitussuunnan halutuksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   dir 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Uskotko, että "eno Kimmo, pese se pommikone" on
panlindromi? Kokeillaan. Kirjoitettuna oikealta vasemmalle se on:
<bdo dir="rtl">eno&nbsp;Kimmo,&nbsp;pese&nbsp;se&nbsp;pommikone</bdo>
[W3C] [W3C non-normative] [MDN] [W3School]


<blockquote> Muusta lähteestä lainattu tekstisisältö.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit   cite 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <blockquote cite=
   "http://www.w3.org/TR/html5/grouping-content.html#attr-blockquote-cite">
    If the cite attribute is present, it must be a valid URL potentially 
    surrounded by spaces.
  </blockquote>
[W3C] [W3C non-normative] [MDN] [W3School]


<body> Elementti on dokumentin runko-osa; se sisältää www-sivulle sisältöä tuottavat elementit.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <html>-elementti


<br> Edustaa rivinvaihtoa.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing sisältöä
esimerkki:
  <p>
    Tästä tulostuu selaimessa <br /> kaksi riviä.
  </p>
[W3C] [W3C non-normative] [MDN] [W3School]


<button> Elementti erilaisten painikkeenomaisesti toimivien komponenttien toteutukseen.
sallittu sisältö Phrasing-sisältöä.
sallitut attribuutit globaalit attribuutit, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
  <button name="kentan-id">Nimesi: </button>
[W3C] [W3C non-normative] [MDN] [W3School]


<caption> Merkkaa tekstinosan taulukon (äiti-elementtinsä) otsikoksi. <caption>-elementin tulee olla äitinsä ensimmäinen lapsi (ts. ennen talukon muita elementtejä).
sallittu sisältö flow-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table>
esimerkki:
<p>Seuraavalla talukolla on otsikko</p>
<table>
  <caption>Taulukon otsikko</caption>
  <tr>
    <td>Solu11</td> <td>Solu12</td> <td>Solu13</td>
  </tr>
  <tr>
    <td>Solu21</td> <td>Solu22</td> <td>Solu23</td>
  </tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]


<cite> Viittaus johonkin teokseen, esimerkiksi kirjan, artikkelin, runon, musiikkiteoksen, TV ohjelman, elokuvan, teatteriesityksen, veistoksen tai taulun nimeen. Kyseessä ei tarvitse olla teoksen esittely, myös ohimennen mainittu teoksen nimi voidaan antaa cite-elementissä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<p>
    Pentti Haanpään klassikossa <cite>Noitaympyrä</cite> kuvataan nälkäisen miehen
    hysteeristä hiihtoa kuutamoyössä hirmupakkasessa läpi Kairanmaan korpien.
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<code> Merkkaa tekstinosan ohjelmakoodiksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Otsikko kirjoitetaan <code>h1</code>-elementin sisään seuraavasti:<br />
<code>&lt;h1>Pääotsikko&lt;/h1></code>
[W3C] [W3C non-normative] [MDN] [W3School]


<dd> <dl>-listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <dl>-elementti
esimerkki:
  <dl>
    <dt>Termi A</dt>
      <dd>Tässä selitys termille A</dd>
    <dt>Termi B</dt>
      <dd>Tässä selitys termille B</dd>
  </dl> 
[W3C] [W3C non-normative] [MDN] [W3School]


<dfn> Merkkaa kohdan, jossa termi määritellään.
sallittu sisältö phrasing-sisältö, ei kuitenkaan sisäkkäistä <dfn>-elementtiä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<p> 
  <dfn id="Internet-maaritelma">Internet</dfn> on maailmanlaajuinen, 
  palvelinkoneiden ympärille muodostettujen verkkojen yhteenliittymä,
  "verkkojen verkko".
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<dl> Määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms.
sallittu sisältö nolla tai useampia <dt>-elementtiä, jota seuraa yksi tai useampia <dd>-elementtiä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <dl>
    <dt>Termi A</dt>
      <dd>Tässä selitys termille A</dd>
    <dt>Termi B</dt>
      <dd>Tässä selitys termille B</dd>
  </dl> 
[W3C] [W3C non-normative] [MDN] [W3School]


<div> Geneerinen flow-elementti, joka kapseloi lohkon, jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään lohko, johon halutaan vaikuttaa CSS-säännöillä. Lohkotason elementti, vastaava elementti tekstitasolla on <span>.
sallittu sisältö flow-sisältö, jota voi edeltää yksi tai useampia <style>
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <div id="container">
	<p>
	   Täällä div:in sisällä voi olla mitä
	   vaan sisältöä, kappaleita, taulukoita, listoja,..
	   Tarkoituksena on vain kapseloida tämä osa
	   dokumenttia
	</p>
  </div>
[W3C] [W3C non-normative] [MDN] [W3School]


<dt> <dl>-listan termi, käsite, tms.
sallittu sisältö flow-sisältöä, ei kuitenkaan heading- tai sectioning-sisältöä, eikä myöskään <header>- tai <footer>-elementtejä.
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <dl>-elementti
esimerkki:
  <dl>
    <dt>Termi A</dt>
      <dd>Tässä selitys termille A</dd>
    <dt>Termi B</dt>
      <dd>Tässä selitys termille B</dd>
  </dl> 
[W3C] [W3C non-normative] [MDN] [W3School]


<em> Painotettu tekstinosa, kyse on kielellisestä painotuksesta, ei tekstinosan tärkeydestä, jonka merkintään tulisi käyttää elementtiä <strong>)
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  Ensi kesänä menen Ruotsiin <em>töihin</em>.
[W3C] [W3C non-normative] [MDN] [W3School]


<fieldset> Asettaa kentät lomakkeella omaksi kehystetyksi ryhmäkseen, ryhmälle voi antaa otsikon <legend>-elementin avulla.
sallittu sisältö <legend>-elementti, jota voi seurata mitä tahansa flow-sisältöä
sallitut attribuutit globaalit attribuutit, name, disabled, form
sallittu äiti-elementti elementti, joka voi voida flow-sisältöä
esim. (vrt. esimerkkilomake)
<fieldset>
  <legend>Tekstiä ja salasana</legend>
  <label for="kja-tunnus">Tunnus:</label>
  <input id="kja-tunnus" type="text" name="kja-tunnus"size="22" 
         value="Anna käyttäjätunnuksesi" />
  <label for="password">Salasana:</label>
  <input id="password"  type="password" name="password"size="15"  />
</fieldset>
[W3C] [W3C non-normative] [MDN] [W3School]


<figcaption> <figure>-elementin seliteteksti.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <figure>-elementti
esimerkki:
  <figure>
      <img src="kuva.png" alt="Tuotteen x kuva">
      <figcaption>Tuotteen x kuvaus</figcaption>
  </figure>
[W3C] [W3C non-normative] [MDN] [W3School]


<col> määrittää sarakkeet <colgroup>-elementin sisällä.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit   span 
sallittu äiti-elementti sellainen <colgroup>, jolla ei ole span-attribuuttia.
esimerkki (sarakkeet merkattu col-elementtien avulla):
<style type="text/css">
   .maa {background-color:lime;}
   .vakiluku {background-color:yellow;}
   .kieli {background-color:pink;}
</style>
.
. 
<p>Sarakkeen korostus col-elementtiä käyttäen:</p>
<table  border="1">
  <colgroup>
    <col />
    <col class="maa" />
    <col class="vakiluku" />
    <col class="kieli" />
  </colgroup>
  <tbody><tr>
      <th></th>
      <th>Pääkaupunki</th>
      <th>Väkiluku</th>
      <th>Kieli</th>
    </tr>
    <tr>
      <td>USA</td>
      <td>Washington D.C.</td>
      <td>309 miljoonaa</td>
      <td>englanti</td>
    </tr>
    <tr>
      <td>Suomi</td>
      <td>Helsinki</td>
      <td>5,5 million</td>
      <td>suomi, ruotsi, saami</td>
    </tr>
  </tbody>
</table>

vrt. vastaava sivu

[W3C] [W3C non-normative] [MDN] [W3School]


<colgroup> Määrittää taulukosta yhden tai useamman sarakkeen, jolloin muotoilun voi kohdistaa vertikaalisessa suunnassa, sarakkeen soluille.
sallittu sisältö yksi tai useampia <col>-elementtejä tai vaihtoehtoisesti span-attribuutti (jälkimmäisessä tilanteessa <colgroup>-elementillä ei saa olla lapsia)
sallitut attribuutit  globaalit attribuutit   span 
sallittu äiti-elementti <table> - mahdollisen <caption>-elementin jälkeen, mutta ennen kaikkia muita taulukon sisällön määrittäviä elementtejä.
esimerkki (neljästä sarakkeesta kolmas on merkattu korosta-luokkaan kuuluvaksi):
<style type="text/css">
   .korosta-vakiluku {background-color:yellow;}
</style>
.
. 
<p>Sarakkeen korostus:</p>
<table  border="1">
  <colgroup span="2"></colgroup>
  <colgroup class="korosta-vakiluku"></colgroup>
  <tbody><tr>
      <th></th>
      <th>Pääkaupunki</th>
      <th>Väkiluku</th>
      <th>Kieli</th>
    </tr>
    <tr>
      <td>USA</td>
      <td>Washington D.C.</td>
      <td>309 miljoonaa</td>
      <td>englanti</td>
    </tr>
    <tr>
      <td>Suomi</td>
      <td>Helsinki</td>
      <td>5,5 million</td>
      <td>suomi, ruotsi, saami</td>
    </tr>
  </tbody>
</table>

vrt. vastaava sivu

[W3C] [W3C non-normative] [MDN] [W3School]


<datalist> Elementin avulla voi tekstityyppiseen <input>-syotekstikenttään liittää list-attribuuttia käyttäen ennakkoon määritellyn listan arvoja, joita tarjotaan automaattisena täydennyksenä kun kenttään kirjoitetaan sisältöä.
sallittu sisältö nolla tai useampia <option-elementtejä
sallitut attribuutit globaalit attribuutit
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim.
<input type="text" list="isotkaupungit" name="kotikaupunki">
<datalist id="isotkaupungit">
   <option value="Tampere">
   <option value="Helsinki">
   <option value="Oulu">
   <option value="Turku">
   <option value="Rovaniemi">
</datalist>
[W3C] [W3C non-normative] [MDN] [W3School]


<figure> Elementti, jossa on itsenäinen sisältö niin että siihen viitataan tyypillisesti omana, elementtivirrasta irrallisena, yksikkönään ja se voidaan siirtää päävirrasta sivuun vaikuttamatta dokumentin merkitykseen. Tällainen elementti voisi olla esimerkiksi kuva, kaavio tai vaikkapa koodilistaus.
sallittu sisältö flow-sisältöä, jota saattaa seurata tai edeltää <figcaption>-elementti
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <figure>
      <img src="kuva.png" alt="Tuotteen x kuva">
      <figcaption>Tuotteen x kuvaus</figcaption>
  </figure>
[W3C] [W3C non-normative] [MDN] [W3School]




<form> Määrittelee lomakkeen, joka sisältää kenttiä tietojen syöttämiseen palvelimelle tallennetun ohjelman käsiteltäväksi.
sallittu sisältö flow sisältö; ei kuitenkaan sisäkkäisiä <form>-elementtejä;
erityisesti: lomakkeen kentät määritellään elementtien <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label> avulla
sallitut attribuutit  globaalit attribuutit   accept-charset   action   autocomplete   enctype   method   name   novalidate   target 
sallittu äiti-elementti Mikä tahansa elementti, joka voi saada flow-sisältöä
[W3C] [W3C non-normative] [MDN] [W3School]

Lomake-elementin attribuuttien avulla voidaan määritella lomakkeen ominaisuuksia seuraavasti.

<h1>... <h6> Otsikko tasolla 1... 6. Selainten html-tulkit saattavat käyttää otsikoita automaattisen sisällysluettelon luomiseen sivusta.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä, <hgroup>-elementti
esimerkki:
  <h1>Ensimmäisen tason otsikko</h1>
  <p>Kappale.... </p>
[W3C] [W3C non-normative] [MDN] [W3School]


<hgroup> Elementin avulla ryhmitellään yhteen <h1>.. <h6> elementtejä silloin kun otsikko koostuu usean tason otsikosta.
sallittu sisältö yksi tai useampi <hn>-elementti
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <hgroup id="harj_02" class="harjoituksen-otsikko">
    <h1 class="harjoituksen-otsikko">Harjoitus 2</h1>
    <h2>HTML&CSS, Dao of Web Desing, peruselementtejä</h2>
  </hgroup>
[W3C] [W3C non-normative] [MDN] [W3School]


<head> Dokumentin otsikko-osa määrittää dokumentiin liittyvän metainformaation (metadata), kuten esimerkiksi osoitteet joista sivuun liitettävät tyylisäännöt ja skriptit löytyvät.
sallittu sisältö yksi <title>-elementti (otsikko-osan ensimmäisenä elementtinä), mahdollinen <base>-elementti, sekä nolla tai useampia seuraavista metadata-elementeistä: <command>, <link>, <meta>, <noscript>, <script>, <style>
sallitut attribuutit globaalit attribuutit
sallittu äiti-elementti dokumentin juurielementti <html>
[W3C] [W3C non-normative] [MDN] [W3School]


<header> Alkavan osan alkunimiö, ts. elementin avulla voidaan sitoa osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <article>
    <header>
      <h1>Hard Trance is My Life</h1>
      <p>By DJ Steve Hill and Technikal</p>
    </header>
    <p>The album with the amusing punctuation has red artwork.</p>
  </article>
[W3C] [W3C non-normative] [MDN] [W3School]


<html> dokumentin juurielementti, joka sisältää sekä dokumentin otsikko-osan, että sisältö-osan.
sallittu sisältö yksi <head>-elementti ja yksi <body>-elementti
sallitut attribuutit globaalit attribuutit, manifest
sallittu äiti-elementti ei äitiä
[W3C] [W3C non-normative] [MDN] [W3School]


<hr> Sisällön temaattinen vaihdos, kappaletasolla. Vaikka monet selaimet renderöivät tämän horisontaaliseksi viivaksi, merkitys temaattisena vaihdoksena on olennaista, esitysmuoto voi tietysti olla jotain muutakin.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
        ...
    </section>  
    <hr>
    <section>
        Dokumentin sektiovaihdon kohdalla usein temaattisen  
        sisällönvaihdoksen merkkaus voi olla paikallaan.
        ....
[W3C] [W3C non-normative] [MDN] [W3School]


<i> Merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on kursivoitu teksti. Testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia vaan esimerkiksi mielenalan, tunnelman tai muun merkityksen takia esimerkiksi ajatus, sananlasku tai laivan nimi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Sanalaskukin sen sanoo: <i>Sitä saa mitä tilaa</i>.
[W3C] [W3C non-normative] [MDN] [W3School]


<img> Elementti tuo sivulle kuvan src-attribuutin määrittelemästa tiedostosta
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   src   alt   height   width   usemap   ismap 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
 <img src="img/kuva.jpg" alt="seliteteksti" />
[W3C] [W3C non-normative] [MDN] [W3School]


<input> Yleinen lomakkeen syötekenttä, type attribuutti määrittelee tarkemmin millaisesta syötekentästä on kyse.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit globaalit attribuutit, type, accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, value, width,
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä.
esim.
  <input type="text" id="sivu-id" name="palvelin-id" value="oletusarvo" />
[W3C] [W3C non-normative] [MDN] [W3School]


<kbd> Merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Selaimissa oikotie toimii yleensä näppäinkomennolla <kbd>alt+shift+x</kbd> 
tai <kbd>alt+x</kbd>.
[W3C] [W3C non-normative] [MDN] [W3School]


<keygen> Elementin avulla luodaan salausavainpari, jota käytetään salaamaan tiedot jotka kulkevat palvelimen ja selaimen välillä.
sallittu sisältö ei sisältöä
sallitut attribuutit globaalit attribuutit, autofocus, challenge, disabled, form, keytype, name
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim.
<form action="kasittelija.php" method="get">
    Pankkitilin numero: <input type="text" name="tilinro" />
    Salaus: <keygen name="salaus" />
    <input type="submit" value="Lähetä" />
</form>
[W3C] [W3C non-normative] [MDN] [W3School]


<label> Antaa kentälle nimikkeen.
sallittu sisältö Flow- tai phrasing-content.
sallitut attribuutit globaalit attribuutit, for, form
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä.
esim.
<label for="enimi">Etunimi: </label>
<input type="text" id="enimi" />
Ks. myös esimerkki käytöstä edellä <fieldset>-elementin esittelyssä.
[W3C] [W3C non-normative] [MDN] [W3School]


<legend> Antaa lomakkeella otsikon <fieldset>-kenttäryhmälle.
sallittu sisältö mitä tahansa phrasing-sisältöä
sallitut attribuutit ei sallittuja attribuutteja
sallittu äiti-elementti <fieldset>-elementti
esimerkki käytöstä edellä <fieldset>-elementin esittelyssä.
[W3C] [W3C non-normative] [MDN] [W3School]

Verkkosivulla näkyvälle kentälle halutaan usein antaa nimiö (esim. esimerkkilomakkeen Tunnus:). Nimikkeen antaminen tapahtuu <label> elementin avulla ja sen sidonta kenttään for attribuutin avulla.



<li> Listan rivi.
sallittu sisältö flow-sisältö
sallitut attribuutit  globaalit attribuutit   value 
sallittu äiti-elementti <ul> <ol> <menu>
esimerkki:
  <ol>
    <li value="100">lista alkaa sadasta</li>
    <li>satayksi</li>
    <li>satakaksi</li>
    <li>satakolme</li>  
  </ol>
[W3C] [W3C non-normative] [MDN] [W3School]




<map> Sisältää <area>-elementit, jotka määrittävät kuvaan hiiren napsautuksella aktioivissa olevat. Kuvan ja kuvakartan yhdistäminen tapahtuu antamalla usemap-attribuutille kuvakartan nimi name arvoksi.
sallittu sisältö äidiltä peritty sisältömalli
sallitut attribuutit  globaalit attribuutit   name 
sallittu äiti-elementti mikä tahansa elementti, jolle joko phrasing- tai flow-sisältö on sallittua
esimerkki:
<img src="img/pinnin-aula.jpg" alt="Pinnin aula" usemap="#kello-ja-kasvi" />
<map name="kello-ja-kasvi">
   <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
   <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="Kasvi" />
</map>
[W3C] [W3C non-normative] [MDN] [W3School]


<mark> Merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Tätä elementtiä käytetään tekstinosan <mark>korostamiseen</mark>.
[W3C] [W3C non-normative] [MDN] [W3School]


<meta> Tämän elementin avulla voidaan määritellä sellaisia metatietoja, joita muiden meta-elementtien (<title> <base> <link> <script> <style>) avulla ei saa määrittellyksi. Elementin avulla voidaan mm. määritellä käytetty merkistökoodaus, antaa avainsanoja hakukoneille, kertoa dokumentin tekijän nimi, kuvailla dokumentin sisältö tai määrätä sivulle virkistystaajuus (viimeisen käyttöä pitäisi välttää, koska se on WAI-suositusten vastainen toiminta).
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit   name   http-equiv   content   charset 
sallittu äiti-elementti <head>, poikkeus: jos elementillä on  http-equiv -attribuutti, äiti voi olla myös <noscript>
esimerkki:
  <meta charset="utf-8">
 
  <!-- lataa 2 sekunnin kuluttua toinen sivu -->
  <meta http-equiv="refresh" content="2; url=http://www.uta.fi">
[W3C] [W3C non-normative] [MDN] [W3School]


<meter> Piirtää horisontaalisen palkin, jolla voi visualisoida suhteellista määrää. Esimerkiksi arvo 0.5 piirtää puoleen väliin täytetyn palkin.
sallittu sisältö phrasing sisältö
sallitut attribuutit globaalit attribuutit, value, min, max, low, high, optimum
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim. kaksi palkkia, ensimmäinen täytettynä 13- ja toinen 75-prosenttisesti
Mittari1: <meter value="2013" min="2000" max="2100" ></meter>
Mittari2: <meter value="0.75"></meter>
Mittari1: meter-1 Mittari2: meter-2
[W3C] [W3C non-normative] [MDN] [W3School]

Vaikka näitä syotekomponentteja käytetään tyypillisesti lomakkeiden sisällä, niitä voi myös käyttää sivulla ilman <form> elementtiä.



<ol> Järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä).
sallittu sisältö nolla tai useampia <li>-elementtejä
sallitut attribuutit  globaalit attribuutit   reversed   start   type 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<ol>
  <li>Listan eka rivi, edessä numero 1</li>
  <li>Listan toka rivi, edessä numero 2      <!-- </li> ei tänne  -->
    <ol type="I" start="10" reversed> <!-- < roomalaiset numerot  -->
      <li>alilistan eka rivi</li>
      <li>alilistan toka rivi</li>
      <li>alilistan kolmas rivi</li>
    </ol>
  </li>                           <!-- toka rivi suljetaan täällä -->
  <li>kolmas rivi, edessä numero 3</li>
</ol>
[W3C] [W3C non-normative] [MDN] [W3School]


<option> Elementin avulla määritellään valintalistan, valintaruudun tai radiopainikkeen vaihtoehdot.
sallittu sisältö tekstiä
sallitut attribuutit globaalit attribuutit, label, selected, value
sallittu äiti-elementti <select-, <optgroup>- tai <datalist>-elementti
esimerkki käytöstä edellä <select>-elementin esittelyssä
[W3C] [W3C non-normative] [MDN] [W3School]


<optgroup> Ryhmittelee vaihtoehtoja valintalistassa.
sallittu sisältö nolla tai useampia <option-elementtejä
sallitut attribuutit globaalit attribuutit, disabled, label
sallittu äiti-elementti <select-elementti
esim.
<form action="kasittelija.php">
  <select  id="kirja" name="on-lukenut" multiple="multiple">
    <optgroup label="Sofi Oksanen">
      <option>Puhdistus</option>
      <option>Kun kyyhkyset katosivat</option>
    </optgroup>
    <optgroup label="Arto Paasilinna">
      <option>Aatemi ja Eeva</option>
      <option>Jäniksen vuosi</option>
      <option>Kylmät hermot, kuuma veri</option>
    </optgroup>
  </select>
<form>
[W3C] [W3C non-normative] [MDN] [W3School]


<output> Vastaavasti kuin <input>-elementtiä käytetään tiedon tuomiseen verkkosivun lomakkeelta käsittelyyn, tulisi <output>-elementtiä käyttää ohjelmassa tuotettujen (selaimessa javascriptillä laskettujen tai palvelimelta saatujen) tietojen näyttämiseen.
sallittu sisältö phrasing sisältö
sallitut attribuutit globaalit attribuutit, for, form, name
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
[W3C] [W3C non-normative] [MDN] [W3School]


<p> Kappale (erotettuna rivinvaihdoin ympäristöstään)
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <p>
     Tämä teksti renderöityy omaksi kappaleekseen
  </p>
[W3C] [W3C non-normative] [MDN] [W3School]


<pre> Esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan; esim. välilyönnit ja rivivaihdot menevät suoraan sellaisenaan esitettävälle sivulle. Myöskään automaattisia rivinvaihtoja ei tehdä. Esityksessä käytetään tasalevyistä kirjasinta, yleensä Courieria.
sallittu sisältö phrasing-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<pre>&lt;p>
      koodi kirjoitetaan usein &lt;pre>-elementtiä 
      käyttäen, koska sen avulla teksti 
      voidaan muotoilla itse:
      rivitys, sisennykset ym. säilyvät sellaisenaan 
&lt;/p></pre>
[W3C] [W3C non-normative] [MDN] [W3School]


<progress> Piirtää horisontaalisen palkin, jolla voi visualisoida tehtävän etenemistä. Esimerkiksi arvo 20 piirtää puoleen väliin täytetyn palkin, jos maksimiarvoksi on annettu 40 (kuten esimerkissä alla).
sallittu sisältö phrasing sisältö
sallitut attribuutit globaalit attribuutit, value, max
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim. piirtää puoleenväliin täytetyn palkin
<progress value="20" max="40"></progress>
Progress bar:
[W3C] [W3C non-normative] [MDN] [W3School]


<q> Jostain muusta lähteestä lainattu teksti.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   cite 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Selain lisää lainausmerkin q-elementin sisään kirjoitettuun lainattuun
tekstiin, niitä ei siis kirjoiteta itse. Lisäksi elementtiä  käytetään
nimenomaan lainattaessa tekstiä:  
<q cite="http://www.w3.org/TR/html5/text-level-semantics.html">The 
   q element must not be used in place of quotation marks that do not  
   represent quotes; for example, it is inappropriate to use the q element 
   for marking up sarcastic statements.
</q>
[W3C] [W3C non-normative] [MDN] [W3School]


<rp> Elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue ruby-merkkejä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <ruby>
[W3C] [W3C non-normative] [MDN] [W3School]


<rt> Ruby merkkien ääntämisohje, käytetään yhdessä <ruby>-elementin kanssa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <ruby>
[W3C] [W3C non-normative] [MDN] [W3School]


<ruby> Ruby merkkien (itä-aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt>-elementin kanssa
sallittu sisältö phrasing-sisältö, jota tulee seurata <rt>-elementti, tai <rp>-elementti jota seuraa <rt>- ja <rp>-elementit
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
[W3C] [W3C non-normative] [MDN] [W3School]


<s> Vanhentunutta, epätarkkaa tai ei enää relevanttia tietoa, tyypillinen . Ei pidä käyttää esittämään tietoa joka halutaan poistaa, tai korvata uudella tekstillä (siihen tarkoitukseen delelementti).
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Kotimainen tomaatti <s>3.50€/kg </s> 2.50 €/kg 
[W3C] [W3C non-normative] [MDN] [W3School]


<samp> Merkkaa tekstinosan ohjelman tulosteeksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <samp>Tämä on ohjelman tulostetta.</samp>
[W3C] [W3C non-normative] [MDN] [W3School]


<select> Elementti valintalistan totetutukseen.
sallittu sisältö nolla tai enemmän <optiongroup>- ja <option>-elementtejä
sallitut attribuutit globaalit attribuutit, autofocus, disabled, form, multiple, name, required, size
sallittu äiti-elementti elementti, joka voi voida flow-sisältöä
esim.
<form action="kasittelija.php">
  select  id="kirja" name="on-lukenut" multiple="multiple">
      <option>Väinö Linna: Tuntematon sotilas</option>
      <option>Arto Paasilnna: Jäniksen vuosi</option>
      <option>Sofi Oksanen: Kun kyyhkyset katosivat</option>
      <option>Aki Ollikainen: Nälkävuosi</option>
      <option>Ulla-Leena Lundberg: Jää</option>
  </select>
<form>
[W3C] [W3C non-normative] [MDN] [W3School]


<section> Määrittelee dokumentin osan ("sektion"). Sektiot ovat temaattisia kokonaisuuksia, ts. sektioihin jakoa ei pitäisi käyttää muotoilun apuvälineenä, siihen tarkoitukseen käytetään edelleen <div> -elementtiä. Sisäkkäisten sektioiden avulla voidaan määritellä dokumentin hierarkinen rakenne (luvut, niiden aliluvut, jne).
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä, ei kuitenkaan <address>-elementti
esimerkki:
  <section>
    <h1>Otsikko</h1>
    <p>	
      Tämä luku on merkattu omaksi sektiokseen. Tyypillisesti sektioon 
      merkataan sekä otsikko että sen sisältö.
    </p>
  </section>
[W3C] [W3C non-normative] [MDN] [W3School]


<script> Esittelee sivulla käytetyt selainpuolen ohjelmat (kuten esim. Javascript-koodin) ja antaa niihin liittyviä määrittelyjä.
sallittu sisältö ohjelmakoodia
sallitut attribuutit  globaalit attribuutit   src   async   defer   type   charset 
sallittu äiti-elementti <head>, tai jokin muu elementti, joka voi saada metadata-sisältöä, tai mikä tahansa elementti, joka voi saada phrasing-sisältöä.
esimerkki:
  <!-- erillisestä tiedostosta haettu ohjelmakoodi -->
  <script src="script/javascript.js"> </script>

  <!-- suoraan elementtiin kirjoitettu ohjelmakoodi -->
  <script>
    document.write("Hello World!")
  </script>
[W3C] [W3C non-normative] [MDN] [W3School]


<small> Pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<small>Noudatamme voimassa olevaa henkilötietolakia</small>
[W3C] [W3C non-normative] [MDN] [W3School]


<span> Geneerinen phrasing-elementti, joka kapseloi tekstiä jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään tekstinosa, johon halutaan vaikuttaa CSS-säännöillä. Tekstitason elementti, vastaava elementti lohkotasolla on <div>.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<p>
  dropzone="<span class="default">copy</span>"|"move"|"link"
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<strong> Tärkeä tekstinosa, kuten uusi termi tai muuten huomatuksi haluttava osa tekstiä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  Nykyisin suuri osa laajemmista www-sivuistoista toteutetaan
  jonkun <strong>sisällönhallintajärjestelmän</strong> avulla.
[W3C] [W3C non-normative] [MDN] [W3School]


<style> Mahdollistaa CSS-sääntöjen esittelyn html-dokumentin otsikko-osassa. Vähänkin isommissa sivustoissa erillisen tyylitiedoston (tyylitiedostojen) esittely on kuitenkin suositeltavampaa.
sallittu sisältö type-attribuutin määrittämän tyyppistä sisältöä
sallitut attribuutit  globaalit attribuutit   media   type   scoped  Lisäksi  title -attribuutin merkitys tässä elementissä on erityinen; sen avulla on mahdollista määritellä vaihtoehtoisia tyylisääntöjoukkoja.
sallittu äiti-elementti <head> tai jokin muu elementti, joka voi saada metadata-sisältöä, tai <div> <noscript> <section> <article> <aside>
esimerkki:
  <style type="text/css">
    body {
       font-family: verdana, arial, sans-serif;
    }
  </style> 
[W3C] [W3C non-normative] [MDN] [W3School]


<sub> Merkkaa alaviitteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Veden kemiallinen kaava on H<sub>2</sub>O.
[W3C] [W3C non-normative] [MDN] [W3School]


<sup> Merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmällä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Neliön pinta-ala lasketaan sivun nelionä: sivu<sup>2.
[W3C] [W3C non-normative] [MDN] [W3School]


<table> Esittelee taulukon.
sallittu sisältö taulukon sisällön määritteleviä elementtejä: <caption> <colgroup> <thead> <tfoot> <tbody>
sallitut attribuutit  globaalit attribuutit   border 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <table border="1">
    <tr>
      <td>rivi 1 sarake 1</td>
      <td>rivi 1 sarake 2</td>
    </tr>
    <tr>
      <td>rivi 2 sarake 1</td>
      <td>rivi2 sarake 2</td>
    </tr>
  </table>
[W3C] [W3C non-normative] [MDN] [W3School]


<tbody> Merkkaa taulukon runko-osan (sisältörivit).
sallittu sisältö yksi tai useampia <tr> -elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> (elementissä <caption> <colgroup> ja <thead>-elementtien jälkeen)
esimerkki: ks. <thead> -elementin esimerkki
[W3C] [W3C non-normative] [MDN] [W3School]


<td> Määritteleen yhden solun taulukon rivillä.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <tr>
esimerkki:
  <table border="5">
    <tr>
      <td>rivi 1 sarake 1</td>
      <td>rivi 1 sarake 2</td>
    </tr>
    <tr>
      <td>rivi 2 sarake 1</td>
      <td>rivi2 sarake 2</td>
    </tr>
  </table>
[W3C] [W3C non-normative] [MDN] [W3School]


<textarea> Syötekomponentti useamman rivin tekstille.
sallittu sisältö Merkkimuotoista tietoa
sallitut attribuutit globaalit attribuutit, autofocus, cols, dirnamea, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä.
vrt. esimerkkilomake
<label for="msg">Viesti: </label>	
<textarea id="msg" rows="10" cols="40" name="msg"></textarea>
[W3C] [W3C non-normative] [MDN] [W3School]


<tfoot> Merkkaa taulukon rivin/rivit taulukon yhteenvetoriveiksi.
sallittu sisältö nolla tai useampia <tr>-elementtejä.
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> (elementissä ennen <tbody> ja <tr>-elementtejä, HTML5:ssä tätä vaatimusta lievennetty)
esimerkki: ks. <thead> -elementin esimerkki
[W3C] [W3C non-normative] [MDN] [W3School]


<th> Merkkaa solun otsikkosoluksi. Jos solu on taulukon ensimmäisellä rivillä, se tulkitaan sarakeotsikoksi, jos taas rivin ensimmäinen solu, riviotsikoksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   colspan   rowspan   scope   headers 
sallittu äiti-elementti <tr>
esimerkki (päivittäiset työtunnit):
<table border="1">
  <tr>
    <td></td>
    <th>MA</th>
    <th>TI</th>
    <th>KE</th>
    <th>TO</th>
    <th>PE</th>
  </tr>
  <tr>
    <th>Päivätunnit</th>
    <td>4</td>
    <td>0</td>
    <td>0</td>
    <td>8</td>
    <td>2</td>
  </tr>
  <tr>
    <th>Iltatunnit</th>
    <td>0</td>
    <td>3</td>
    <td>0</td>
    <td>0</td>
    <td>6</td>
  </tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]


<thead> Merkkaa taulukon otsikko-osan (otsikkorivit, yksi tai usemapia taulukon rivejä).
sallittu sisältö yksi tai useampia <tr> -elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> (elementissä <caption> ja <colgroup>-elementtien jälkeen, mutta ennen <tbody> <tfoot> <tr> -elementtejä)
esimerkki:
<p>Esteetön taulukko</p>
<table border="1">
  <caption>Puolivuosikatsaus: myynti liikkeittäin</caption>
  <thead>
    <tr>
      <th></th>
      <th>Tammikuu</th>
      <th>Helmikuu</th>
      <th>Maaliskuu</th>
      <th>Huhtikuu</th>
      <th>Kesäkuu</th>
      <th>Heinäkuu</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Yht.</th>
      <td>11 730 €</td>
      <td>9 480 €</td>
      <td>12 450 €</td>
      <td>8 680 €</td>
      <td>11 200 €</td>
      <td>5 730 €</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Kemi</th>
      <td>3 240 €</td>
      <td>2 980 €</td>
      <td>4 200 €</td>
      <td>3 200 €</td>
      <td>3 100 €</td>
      <td>1 500 €</td>
    </tr>
    <tr>
      <th>Jyväskylä</th>          
      <td>4 590 €</td>
      <td>2 200 €</td>
      <td>3 020 €</td>
      <td>2 500 €</td>
      <td>3 200 €</td>
      <td>2 340 €</td>
    </tr>
    <tr>
      <th>Tampere</th>          
      <td>3 900 €</td>
      <td>4 300 €</td>
      <td>5 230 €</td>
      <td>2 980 €</td>
      <td>4 900 €</td>
      <td>1 890 €</td>
    </tr>
  </tbody>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]


<time> Merkkaa joko kellonajan (24-tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime-attribuutin arvona. Tarkoituksena on, että ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   datetime 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Kesän 2013 teatterikesän <time datetime="2013-08-05">5.</time> - 
<time datetime=2013-08-11"">11.8.</time> ohjelmisto on jukistettu.
[W3C] [W3C non-normative] [MDN] [W3School]


<title> Dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona. Dokumentilla voi olla vain yksi otsikko.
sallittu sisältö merkkimuotoinen tieto joka saa sisältää myös <-merkkejä (HTML-jäsentäjä ei tulkitse otsikon sisältä HTML-alkutunnuksia)
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <head>
esimerkki:
  <title>UTA: JWT - 2013</title>
[W3C] [W3C non-normative] [MDN] [W3School]


<tr> Määritteleen yhden rivin taulukossa.
sallittu sisältö nolla tai useampia <th> ja <td>-elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> <thead> <tbody> <tfoot>
esimerkki:
  <table>
    <tr>
      <td>rivi 1 sarake 1</td>
      <td>rivi 1 sarake 2</td>
    </tr>
    <tr>
      <td>rivi 2 sarake 1</td>
      <td>rivi2 sarake 2</td>
    </tr>
  </table>
[W3C] [W3C non-normative] [MDN] [W3School]


<track> Elementin avulla mediatiedostoon voi liittää "tekstiraidan".
sallittu sisältö ei sisältöä (tyhjä elementti).
sallitut attribuutit  globaalit attribuutit   src   kind   srclang   label   default 
sallittu äiti-elementti <video>- tai <audio>-elementti
esimerkki:
<!-- tekstitetty -->
<video src="video.ogg">
  <track kind="subtitles" src="tt.fi.vtt" srclang="fi" label="Suomeksi">
  <track kind="subtitles" src="tt.sv.vtt" srclang="sv" label="Ruotsiksi">
</video>
[W3C] [W3C non-normative] [MDN] [W3School]


<u> Merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on alleviivattu teksti. Testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa puolesta; tällä voidaan merkata esimerkiksi tekstinosa, jossa on kirjoitusvirhe tai käyttää kiinan kielessä henkilön nimen alleviivaukseen.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <p>This is a <u>parragraph</u>.</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<ul> Järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä.
sallittu sisältö nolla tai useampia <li>-elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<ul>
  <li>Listan eka rivi</li>
  <li>Listan toka rivi      <!-- </li> ei tänne  -->
    <ul> 
      <li>alilistan eka rivi</li>
      <li>alilistan toka rivi</li>
      <li>alilistan kolmas rivi</li>
    </ul>
  </li>                     <!-- toka rivi suljetaan täällä -->
  <li>Kolmas rivi</li>
</ul>
[W3C] [W3C non-normative] [MDN] [W3School]


<var> Merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Suorakaiteen pinta-ala lasketaan kaavalla 
<var>leveys</var> * <var>korkeus</var>.
[W3C] [W3C non-normative] [MDN] [W3School]


<video> Tuo sivulle videon.
sallittu sisältö Läpinäkyvä, ts. äidiltä peritty sisältömalli, kuitenkin niin, että elementin sisältö rakentuu seuraavasti. Sisältönä tulee olla
(1) joko  src -attribuutti tai yksi tai useampia <source>-elementtejä,
(2) jota seuraa nolla tai useampia <track>-elementtejä, sekä mahdollisesti flow tai phrasing-sisältöä (ei kuitenkaan sisäkkäistä <video>-elementtiä tai <audio>-elementtiä).
sallitut attribuutit  globaalit attribuutit   src   height   width   poster   preload   autoplay   controls   muted   loop   mediagroup 
sallittu äiti-elementti mikä tahansa elementti, jolle joko phrasing- tai flow-sisältö on sallittua
esimerkki:
<video src="img/pelikaani.ogg">
  Ikävä kyllä selaimesi ei tue sivulle upotettuja videoita, mutta voit toki
  <a href="img/pelikaani.ogg">ladata videon</a> ja katsella sen omalta 
  koneeltasi.
</video>

<video>
  <source src="img/pelikaani.webm" type="video/webm">
  <source src="img/pelikaani.mp4" type="video/mp4">
  <p>Selaimesi ei pysty näyttämään videota, pahoittelen.</p>	
</video>
[W3C] [W3C non-normative] [MDN] [W3School]


<TAG> XXX esittely XXX
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   ??   ?? 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <
  </XX>
[W3C] [W3C non-normative] [MDN] [W3School]


4 CSS

CSS-tyylipohjakieltä alettiin käyttää vasta kun www-sivuja oli jo kirjoitettu HTML:llä useampia vuosia. Aiemmissa HTML-merkkauskielen versioissa on ollut muotoiluun liittyviä elementtejä ja attribuutteja, kuten esimerkiksi font, br ja center, mutta HTML5-versiosta ne on poistettu. HTML 5 -elementit eivät siis sisällä sivun ulkomuotoon tai esittämiseen liittyvää tietoa — kaikki muotoilutieto annetaan erillisissä CSS-tyylipohjadokumenteissa, CSS-muotoilusääntöinä (poikkeuksena taulukon border ja kuvan widht ja height-attribuutit).

4.1 Taustaa

CSS-sääntöjä on olemassa useampia kerroksia (levels), ts. CSS:stä ei ole julkaistu uusia versioita, vaan uusi CSS-kerros on aina tuonut kieleen lisää tyylisääntöjä.

Ensimmäisen kerroksen tyylisäännöt CSS1 julkaistiin vuonna 1996. CSS2 julkaistiin jo heti sen jälkeen 1997, mutta se korvatiin tarkistetulla versiolla CSS2.1. Sen kehitystyö saatettiin päätökseen 2011: W3C Recommendation CSS2.1 julkistettiin kesällä 2011.

CSS2:n rinnalla kehitettiin seuraavan kerroksen, CSS3:n, sääntöjä jo vuodesta 1998 lähtien, tosin ajoittain kehittely oli laimeaa. Uusien selainten ilmaantuminen markkinoille, sai CSS3 kehityksen aktivoitumaan jälleen muutamia vuosia sitten. CSS2.1:n saattaminen stabiiliin vaiheeseen kesti niin kauan, että CSS3:a ei enää haluttu kehittää isona monoliittinen kokoelma tyylisääntöjä, vaan CSS3 jaettiin useampaan moduuliin, joista kukin toteuttaa tiettyyn aihepiiriin liittyvät säännöt. CSS3-moduuleista on jo tällä hetkellä standardoitu värit, nimiavaruudet, valitsimet ja mediakyselyt.

Tyylipohjakielen nimi, CSS (Cascading Style Sheets), tulee piirteiden putousmaisesta (cascade = vesiputous) periytymisestä DOM-hierarkiassa äidiltä lapselle, ts. piirteiden periytyminen ympäröivältä elementiltä. Periytyminen on kuitenkin piirrekohtaista, kaikki piirteet eivät ole periytyviä.

4.2 CSS-sääntöjen syntaksi

Tyylipohjan säännöt voi liittää HTML-koodissa merkittyihin elementteihin kolmella eri tavalla.

4.2.1 Liittäminen dokumenttiin

Suositeltavin tapa on kirjoittaa tyylisäännöt erilliseen *.css -tiedostoon ja liittää tiedosto HTML-dokumenttiin otsikko-osassa <link>-elementin avulla. Usein saattaa olla järkevää kirjoittaa useampia tyylitiedostoja, jolloin tiettyyn dokumentiin on helpompi liittää vain kulloinkin tarpeelliset tyylitiedostot. Useampien tyylitiedostojen tapahtuu seuraavasti:

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8" />
  <title>Sivun otsikko</title>
  <link rel="stylesheet" type="text/css" href="polku/perustyylit.css" />
  <link rel="stylesheet" type="text/css" href="polku/navigointi.css" />
  <link rel="stylesheet" type="text/css" href="polku/erityiset-tyylit.css" />
 ...

Tyylisääntöjä voi myös kirjoittaa suoraan HTML-dokumentin otsikko-osaan <style> elementtiä käyttäen, esimerkiksi seuraavasti:

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8" />
  <title>Sivun otsikko</title>
  <style type="text/css">
     body {
        background-color:maroon;
        margin-left:20px;
     }
     p { color:white; }
  </style>
  ...

Säännön voi myös kirjoittaa dokumentin runkoon, suoraan elementtiin style-attribuuttia käyttäen, jolloin valitsin jää pois, koska kohde-elementtiä ei tarvitse määritellä.

<p style="color:sienna; margin-left:20px">
   This is a paragraph.
</p>

Nämä vaihtoehdot eivät ole toisiaan poissulkevia, jos samalle elementille on kohdistettu tyylisääntöjä erillisessä tyylitiedostossa, dokumentin otsikko-osan <style>-elementissä ja dokumentin runko-osassa suoraan elementille  style -attribuutin avulla, elementin näyttämiseen käytetään sitä sääntöä, joka on lähimpänä elementtiä. Yhteentörmäystilanteessa elementtiin kirjoitettu sääntö siis kumoaa otsikko-osan säännön, joka edelleen kumoaa mahdollisen tyylitiedostossa annetun säännön.

Ensimmäinen esitellyistä tyylien esittämistavoista on suositeltavin, kahta muuta tulisi käyttää vain poikkeustilanteissa. Kaksi jälkimmäistä tapaa eivät ole sen perusperiaatteen mukaisia, että html-dokumentti kuvaa vain sisällön ja tyylitiedosto ulkoasun. Jälkimmäiset tavat ovat erityisesti käteviä tapoja dokumenti luontivaiheessa, kun haluaa nopeasti kokeilla jonkun säännön vaikutusta dokumenttiin.

4.2.2 CSS-säännön syntaksi

CSS-tyylitiedosto muodostuu jonosta CSS-sääntöjä (CSS rule), jossa valitsin (selector) määrää, mihin HTML 5 -elementtiin säännön esittely (declaration) kohdistuu.

Jos sama sääntö halutaan kohdistaa useammalle kohteelle, kohteet luetellaan listana valitsimia pilkulla toisistaan eroteltuna.

Esittelyt koostuvat piirteistä (properties) ja niille annettavista arvoista (values). Koko esittelyjen luettelo suljetaan aaltosulkuhin ja ne erotetaan toisistaan puolipisteellä. Esittelyn voi myös ajatella päättyvän puolipisteeseen, joten viimeisenkin esittelyn jälkeen saa olla puolipiste, mutta se ei ole pakollinen. CSS-tyylisääntöjen esittelyjen yleinen syntaksi on siten seuraavanlainen.

css-säännön syntaksi

Esimerkki CSS-säännöstä, jossa sama sääntö kohdistetaan useammalle elementille (sekä ykkös- että kakkostason otsikot kirjoitetaan sinisellä värillä):

h1, h2 {    
  color: blue;
}

ja säännöstä, jossa on useampia esittelyjä (sivun tekstin värin ja taustavärin määrittäminen) :

body {    /* tekstin ja taustan väri */
  color: purple;
  background-color: silver;
}

Kommentit CSS-tyylimäärittelyissä kirjoitetaan /* */ merkkiparin väliin. Yllä oleva on vain esimerkki kommentista - liian tarkka kommentointi ei ole järkevää. Yksittäisten selitysten sijasta kommentteja kannattaa käyttää tyylitiedoston logiikan ja rakenteen selkeyttämiseksi.

Säännön kohde-elementti määrittellään valitsimen avulla. Tarkastellään seuraavassa ensin millaisia valitsimet voivat olla, ja sen jälkeen tarkemmin sitä mitkä kaikki asiat vaikuttavat siihen, mikä sääntö yhteentörmäystilanteessa on voimassa elementin esittämisessä.

4.3 Valitsimet

Valitsin määrittää sen, mihin dokumenttipuun elementtiin tyylisääntö kohdistuu. Valitsimen voidaan ajatella olevan hahmo (pattern), jota haetaan dokumenttipuusta, ja sääntö kohdistetaan elementtiin tai elementteihin, johon hahmonhaku sopii (pattern matches). CSS2.1:ssä voidaan käyttää seuraavanlaisia valitsimia:

Valitsin Hahmo Sopii
Elementtivalitsin ekaikkiin <e>-elementteihin
Luokkavalitsin .class kaikkiin elementteihin, joilla on class-attribuutti class="class"
id-valitsin #id kaikkiin elementteihin, joilla on id-attribuutti, jolla on arvo id="id"
Kontekstinen valitsin e1 e2 kaikkiin elementteihin <e2>, joilla on <e1>-elementti äitinä tai esivanhempana
Lapsivalitsin e1>e2 kaikkiin elementteihin <e2>, joilla on <e1>-äitielementti
Nuorempi sisarus -valitsin e1+e2 kaikkiin elementteihin <e2>, joita välittömästi edeltävä sisarus on on <e1>-elementti
Attribuuttivalitsin e[att]
e[att=val]
e[att~=val]
e[att|=val]
kaikkiin elementteihin <e>, joilla on:
att-attribuutti,
att-attribuutti, jolla on vain arvo "val"
att-attribuutti, jonka arvoista yksi on "val"
att-attribuutti, jonka arvo alkaa merkkijonolla val ja jota voi seurata tavuviiva ja lisää merkkejä
Pseudoluokkavalitsin :link
:visited
:hover
:active
:focus
:first-child
:lang
elementteihin, joille hahmohaun perusteena on muut elementin ominaisuudet kuin elementin nimi, käytetyt attribuutit tai niiden sisällöt.
Pseudoelementtivalitsin ::before
::after
::first-letter
::first-line
elementteihin, joille hahmohaun perusteena on muut elementin ominaisuudet kuin elementin nimi, käytetyt attribuutit tai niiden sisällöt.
Universaalivalitsin * kaikkiin elementteihin.

4.3.1 Elementtivalitsin ja valitsinlista

Elementtivalitsin on valitsimista yksinkertaisin. Se muodostuu elementin nimestä, seuraava sääntö sisentäisi kaikkia dokumentin kappaleille 10 pisteellä.

p {    
  padding-left: 10px;
}

Jos samaa sääntöa sovelletaan useampaan elementtiin, ne luetellaan pilkulla toisistaan eroteltuna. Ensimmäisen ja toisen tason otsikoihin liitetyt samanlaiset säännöt

h1 {    
  color: purple;
  font-weight: bold;
}
h2 {    
  color: purple;
  font-weight: bold;
}

Voitaisiin siis esittää lyhemmin seuraavasti

h1, h2 {    
  color: purple;
  font-weight: bold;
}

[W3C] [MDN] [W3School]

4.3.2 Luokkavalitsin ja luokiteltu elementtivalitsin

Jos sääntö halutaan kohdistaa tiettyihin elementteihin, jotka eivät välttämättä ole edes samantyyppisiä, voidaan käyttää HTML-elementtien attribuuttia class elementtien ryhmittelyyn. Jos esimerkiksi halutaan esittää tärkeä teksti vahvennettuna ja punaisella värillä, voidaan nämä tekstin osat sijoittaa elementteihin, joille määritellään class="tarkea". CSS-sääntö voidaan nyt kirjoittaa muodossa.

.tarkea {
  color: red;
  font-weight: bold;
}

HTML dokumentissa tärkeä viesti merkittäisiin seuraavasti:

<p>
   Tämä teksti on muuten ihan tavallista, mutta 
   <span class="tarkea">huomaa erityisesti tämä tärkeä asia</span>. 
   Joskus tärkeää voi olla koko kappale, jolloin piirre voidaan antaa 
   koko <p>-elementille, kuten seuraavasssa kappaleessa on tehty.
</p>

<p class="tarkea">
   Tämä kappale on kokonaisuudessaan aivan
   erityisen tärkeä. 
</p>

Yhteen elementtiin voi kohdistaa useampia luokkavalitsinta käyttäviä CSS-sääntöjä. Tällöin class-attribuutin arvoksi annetaan halutut luokan nimet välilyöntimerkillä toisistaan eroteltuna. Jos meillä on esiteltynä kaksi CSS-sääntöä seuraavasti:

.tarkea {
  color: red;
  font-weight: bold;
}

.termi {
  font-style: italic;
}

Tällöin voisimme käyttää näitä tyylimäärittelyt HTML-dokumentissa esimerkiksi seuraavasti:

<p>
   Tämä kappale sisältää lukijalle uusia termejä 
   kuten esimerkiksi 
   <span class="termi">luokkavalitsin</span>.
   Uudet termit esitetään kursiivilla. Jos termi on paitsi 
   uusi myös erityisen tärkeä kuten esimerkiksi 
   <span class="termi tarkea">periytyminen<span> se 
   esitetään lisäksi punaisella värillä ja vahvennettuna.
</p>

Luokiteltu elementtivalitsin on edellä kuvattujen valitsimien (elementti- ja luokkavalitsin) yhdistelmä. Valitsin muodostuu elementin nimestä, pisteestä ja luokan nimestä. Sääntö kohdistuu nyt annetun nimisiin elementteihin, jotka kuuluvat annettuun luokkaan. Esimerkiksi sääntö

h1.tarkea {
  color: maroon;
  font-weight: bold;
}

kohdistuu ainoastaan h1-elementteihin, joilla on class-attribuutin arvossa tarkea. Jos tämä ja luokkavalitsimen kohdalla esitetty esimerkkisääntö ovat yhtäaikaa olemassa, näytetään tärkeät h1-otsikot punaruskealla (maroon) ja kaikki muut tärkeät elementit punaisella.

[W3C] [MDN] [W3School]

4.3.3 id-valitsin

HTML-elementit voidaan myös nimetä yksilöllisesti ja kohdistaa sääntöjä yksittäisiin elementteihin. Tämä on mahdollista määrittelemällä halutuille elementeille yksikäsitteiset id-attribuutit ja käyttämällä CSS-säännöissä id-valitsimia. id-valitsin muodostuu #-merkistä ja id attribuutin arvosta.

#paaotsikko {
  color: green;
  text-align: center;
}
<h1 id="paaotsikko">KOKO JUTUN OTSIKKO</h1>

[W3C] [MDN] [W3School]

4.3.4 Kontekstinen valitsin

Kontekstinen valitsin (kutsutaan myös jälkeläisvalitsimeksi, descendant selector) muodostuu välilyönnillä erotetuista elementin nimistä. Nimiä voi olla kaksi tai useampia. Kontekstinen valitsin e1 e2 kohdistuu e1-elementtien sisällä oleviin e2-elementteihin. Jos elementtien nimiä on useampia kuin kaksi, kohteena on aina luettelon viimeinen elementti, jonka tulee olla kaikkien edellisten sisällä luettelon ilmaisemassa järjestyksessä. Esimerkiksi sääntöjen

ul li {
  font-size: small;
}

ul ul li {
  font-size: x-small;
}

vaikutuksesta numeroimattoman listan alkiot esitetään pienellä tekstillä (small) ja sisäkkäisen listan alkiot vielä pienemmällä tekstillä (x-small).

Huomaa, mikä ero on pilkuin erotetulla luettelolla ja välilyönnein erotetulla luettelolla (valitsinlista ja kontekstinen valitsin). Esim. sääntö

td, em {
  font-family: sans-serif;
  font-weight: bold;
}

vaikuttaa kaikkiin td ja em elementteihin, kun taas sääntö

td em {
  font-family: serif;
  font-weight: bold;
}

vaikuttaa ainoastaan td-elementtien sisällä esiintyviin em-elementteihin.

Kontekstisessa valitsimessa voidaan elementin nimien sijasta käyttää myös class tai id attribuutteja ja kaikkien näiden yhdistelmiä, esimerkiksi seuraavasti:

aside p.ingressi {
  font-family: sans-serif;
  color: blue;
}

[W3C] [MDN] [W3School]

4.3.5 Lapsivalitsin

Lapsivalitsin kohdistuu tietyn elementin lapseen. Seuraava sääntö kohdistuisi listan riveillä oleviin <strong>-elementteihin. kuitenkin vain niihin <strong>-lapsielementteihin, ei hierarkiassa syvemmälle, esimerkiksi lapsenlapsiin.

li > strong {color:#f00;}

Lapsivalitsimen hahmohaku sopii kuitenkin vain välittömiin lapsielementteihin, ei hierarkiassa syvemmälle, esimerkiksi lapsenlapsiin.

<li> 
   <strong>tähän tekstiin yllä oleva hahmohaku sopii</strong>
   <p>
      <strong>mutta ei tähän</strong>
   </p>
</li>

[W3C] [MDN] [W3School]

4.3.6 Nuorempi sisarus -valitsin

Nuorempi sisarus -valitsin kohdistuu tiettyä elementtiä e1 seuraavaan elementtiin e2. Elementeillä tulee olla sama äiti.

h1+p {margin-top: 14px;}

Jolloin ykköstason otsikkoa välittömästi seuraavaan kappaleeseen lisätään yläreunaan marginaalia 14 pikseliä.

[W3C] [MDN] [W3School]

4.3.7 Attribuuttivalitsin

Attribuuttivalitsinta sovitetaan hahmoon elementin attribuutin tai/ja attribuutin arvon perusteella. Seuraava sääntö kohdistuisi <p>-elementteihin, joilla on dir-attribuutti, riippumatta siitä mikä attribuutin arvo on.

p[dir] {color:#f00;}

Seuraavassa sääntö kohdistuisi vain niihin kappaleisiin, jossa tekstin kirjoitussuunnaksi on määritelty oikealta vasemalle.

p[dir=rtl] {color:#f00;}

Seuraavassa sääntö taas kohdistuisi kaikkiin niihin kappaleisiin, yksi attribuutin class arvoista on "tarkea".

p[class~=tarkea] {color:#f00;}

Ja viimeinen esimerkki attribuuttivalitsimista kohdistuu kaikkiin kappaleisiin joiden attribuutin lang arvo alkaa kirjaimilla en (kuten en, en-us, en-gb, jne).

p[lang|=en] {color:#f00;}

[W3C] [MDN] [W3School]

4.3.8 Pseudoluokkavalitsin

Pseudoluokkavalitsin liitetään elementin nimen perään kaksoispisteellä erotettuna. Valitsinta ei soviteta elementteihin niiden tyypin, esiteltyjen attribuuttien eikä attribuuttien sisältöjen vaan jonkun muun elementin ominaisuuden perusteella. Yleisimmin käytettyjä pseudoluokkia ovat a elementteihin liittyvät neljä pseudoluokkaa ja niiden avulla muodostettavat pseudovalitsimet. Säännöt

td, em {
   a:link    { color: purple; }
   a:visited { color: blue; }
   a:hover   { border: 1pt dashed gray; }
   a:active  { color: lime; }
}

määrittelevät, että linkki on alunperin purppuranvärinen, ja se muuttuu siniseksi sen jälkeen kun siinä on käyty. Lisäksi, kursorin vieminen linkin päälle tuo linkin ympärille näkyviin katkoviivalla piirretyn reunuksen ja kun linkki aktivoidaan, se on uuden sivun latautumisen ajan väriltään limen vihreä.

[W3C, W3C] [MDN, MDN, MDN, MDN] [W3School, W3School, W3School, W3School]

Muut pseudoluokat, joita voidaan käyttää valitsimen muodostamisessa, ovat

:focus
valitsee aktiivisen elementin, esim.
 input:focus {background-color:yellow}

[W3C] [MDN] [W3School]

:first-child
valitsee elementin ensimmäisen lapsen, esim.
 p:first-child {background-color:yellow;}

[W3C] [MDN] [W3School]

:lang(kielikoodi)
valitsee jokaisen elementin jolle on määritelty annettu kielikoodi.
 p:lang(it) {background:yellow;}

[W3C] [MDN] [W3School]

4.3.9 Pseudoelementtivalitsin

Pseudoelementtivalitsin liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna. Pseudoluokkavalitsimilla haetaan olemassa olevia elementtejä, kun taas pseudoelementtivalitsemen avulla voidaan (nimensä mukaisesti) "luoda" pseudoelementtejä, jotka eivät oikeasti ole olemassa.

Seuraavassa lueteltun CSS2.1:ssä esitellyt neljä pseudoelementtiä. Esimerkiksi e::before -valitsimen ja content-piirteen avulla luodaan "maaginen" elementti elementin e eteen (pseudoelementtiä ei ole dokumenttipuussa).

::before
lisää annetun sisällön valitun elementin eteen, esim.
 p::before {content:"Lue tämä:"}

[W3C] [MDN] [W3School]

::after
lisää annetun sisällön valitun elementin jälkeen, esim.
 p::after {content:"Muista tämä:"}

[W3C] [MDN] [W3School]

::first-letter
valitsee elementin ensimmäisen kirjaimen, esim.
 p::first-letter {font-size:200%; color:#8A2BE2;}

[W3C] [MDN] [W3School]

::first-line
valitsee elementin ensimmäisen rivin, esim.
 p::first-line {background-color:yellow;}

[W3C] [MDN] [W3School]

4.3.10 Universaalivalitsin

Univeraalivalitsin *, sopii kaikkiin elementteihin. Universaalivalitsinta näkee aika harvoin käytettävän, mutta itse asiassa se on käytössä koko ajan, mutta se jätetään kirjoittamatta näkyviin. Jos universaali valitsin on ainoa elementtivalitsin yksittäisessä valitsimessa, sen saa jättää pois

Esimerkiksi seuraavat kaksi valitsinta ovat itse asiassa samat

 .omaluokka
 *.omaluokka

samaten kuin seuraavat kaksi

 #osa-1
 *#osa-1

[W3C] [MDN] [W3School]

4.3.11 CSS3 valitsimet

Edellä lueteltujen valitsimien tehokkaan käytön opettelu on jo enemmän kuin perussivustojen toteuttamiseksi on välttämätöntä. Koska kolmostason valitsimet on jo standardoitu, alla kuitenkin lueteltu myös CSS3:ssa määritellyt uudet valitsimet

h1+p {margin-top: 14px;}

Jolloin ykköstason otsikkoa välittömästi seuraavaan kappaleeseen lisätään yläreunaan marginaalia 14 pikseliä.

[W3C] [MDN] [W3School]

4.4 CSS-sääntöjen kohdistaminen elementtiin

Yhteen elementtiin kohdistuu yleensä useita tyylisääntöjä, niitä saattaa yhdessä tyylitiedostossa olla useita, sääntöjä saatetaan saada useasta lähteestä ja lisäksi niitä saatetaan luoda elementille automaattisesti periytymisen kautta. Siihen, mikä sääntö missäkin tilanteessa jää voimaan, ts. mitä sääntöja käytetään elementin tuottamiseen sivulle, vaikuttavat kolme pääperiaatetta:

  1. Sijanti (location)
  2. Periytyminen (inheritance),
  3. Painoarvo (specificity) ja

4.4.1 Sijainti (location)

Esimmäisellä tasolla elementin piirteiden arvoihin, eli siis elementtien ulkonäkoon vaikuttavat säännöt, jotka joka on voitu kohdistaa sille:

Mikäli elementiin ei ole kohdistettu muita sääntöjä, ne esitetään selaimen oletustyylillä.

Selaimissa käyttäjä voi itse määrätä sivun tuottamisessa sovellettavia elementtien tuottamiseen liityviä sääntöjä, jotka kumoavat selaimen oletusasetukset. Heikkonäköinen käyttäjä voi haluta esimerkiksi oletustekstin suuremmaksi tai poikkeuksellisesti värejä näkevä saattaa haluta muuttaa tekstin muuttaa tekstin ja taustan oletusvärejä. Esimerkiksi Firefoxissa käyttäjä voi antaa määritykset selaimen asetuksissa, tai muokata sekä selaimen käyttöliittymäkomponentteja tiedoston userChrome.css, että tässä yhteydessä merkityksellisempää elementtien esitysmuotoja tiedoston userContent.css, kautta.

Edelleen, dokumentissa itsessään määritellyt säännöt kumoavat selaimessa annetut säännöt ja ovat sitä voimakkaampia mitä lähempänä elementtiä ne ovat. Ulommalla tasolla olevat säännöt siis ikäänkuin "valuvat" (cascade) sisemmäs, mikäli mikään uusi sääntö ei niitä kumoa.

Paitsi jollain tasolla CSS-sääntönä elementille eksplisiittisesti annettuja, voivat elementin piirteiden arvot olla myös implisiittisesti äidiltä perittyjä. Jos esimerkiksi määrität <body>-elementille tietyn kirjasintyypin ja koon, on mielyttävää, ettei sitä joudu määrittämään jokaiselle sivun elementille (esim. kappaleelle) uudelleen, vaan määrityksen joutuu tekemään vain niille, jotka poikkeavat tuosta sivulla yleisesti käytetystä fontista.

4.4.2 Periytyminen (inheritance)

Yksi CSS-piirteiden ominaisuksista on periytyvyys, se määrittää sen, perityykö piirteen arvo äidiltä lapselle vai ei. W3C:n CSS-määrittelystä piirteiden yhteenvetotaulukossa kustakin CSS:n piirteestä on annettu seuraavat tiedot:

Ominaisuus Selitys
Name Piirteen, ts. elementin visuaalisen ominaisuuden nimi, jolle CSS-säännössä annetaan uusi arvo.
Value Ne arvot, joita piirre voi saada arvokseen.
Initial value Arvo, joka piirteellä on ennenkuin sitä CSS-säännöillä muutetaan.
Applies to Mitä elementtiä piirre, koskee? Kaikki piirteet eivät ole käytössä kaikissa elementeissä.
Inherited? Jotkut arvoista saadaan perittynä, toisia ei.
Percentages  Jos piirre voi saada arvokseen prosentteja, miten se tulkitaan (esimerkiksi mihin prosentti arvo viittaa, prosentteja mistä).
Media Millä mediatyypeillä piirre on relevantti.

Piirteen ominaisuuksista voi siis aina tarkastaa onko se periytyvä vai ei. Edellisen esimerkkimme tilanne siitä, että kirjasimen voi määrittää runkoelementille, eikä sitä joudu toistamaan sivun muille elementeille, johtuu siitä että piirre font-family on periytyvä piirre.

Tarkastellaan vielä seuraavaa esimerkkiä. Jos meillä on esimerkiksi määritelty, että listan alkioissa käytetään tekstin värinä sinistä:

li {
   color: blue; 
}

ja meillä on html-koodissa lista, jonka toinen alkio koostuukin kahdesta kappaleesta:

<ul>
  <li> 
    Tässä ensimmäinen listan alkio
  </li>
  <li> 
    <p>
       Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen.
       Tässä ensimmäinen kappale.
    </p>
    <p>
       Tässä toinen kappale
    </p>
  </li>
</ul>

Piirteiden ominaisuustaulukosta näemme, että color on periytyvä piirre. Tästä syystä listan toinenkin alkio kirjoittuu sinisellä värillä. Entä, jos määritämme lisäksi, että listan vasempaan reunaan piirretään 3em levyinen punainen reunus?

li {
   color: blue; 
   border-left: 3em solid red; 
}

Periytyykö reunus <p> elementille? Kumman seuraavista tuotoksista saamme näillä määrityksillä?

periytyy vai ei periydy

Jälkimmäinen kuvista on oikein, koska border-left piirre ei ole periytyvä piirre.

Piirteen voi kuitenkin pakottaa periytymään. Ts. sen sijaan, että annettaisiin piirteelle jokin määrätty arvo, annetaankin piirteelle arvo inherit, jolloin piirre saa arvonsa vanhempielementiltä. Edellisessä esimerkissä saisimme ensimmäisen yo. kuvista, jos antaisimme kappaleelle tyylisäännön:

p { 
   border-left: inherit; 
}

Huomaa myös, että piirteillä on aina tietyt alkuarvot (taulukossa arvo initial value). Jos esimerkiksi antaisimme listalle taustavärin background-color piirteen avulla, periyisikö se listan toiseen alkioon (<p> elementille)? Taustaväri ei ole periytyvä piirre, joten ilmeisesti ei. Mutta jos kokeilet, huomaat, ettei listan toinen alkio kuitenkaan tule eri värillä kuin muu lista. Miksi? Selitys on juuri piirteen alkuarvoasetuksessa. Taustaväri on oletusarvoisesti läpinäkyvä (taulukossa arvo transparent)

4.4.3 Painoarvo (specificity)

Sääntö kohdistetaan aina tiettyyn elementtiin, mitä spesifisempi sääntö, sitä suurempi painopainoarvo säännöllä on. Jos samaan elementtiin kohdistuu useampia sääntöjä, elementtiin sovelletaan sääntöä, joka on painoarvoltaan suurempi. Toisin sanoen spesifisemmin kohdistettu sääntö ylittää karkeammin kohdistetun säännön.

Säännön painoarvo saadaan laskettua arvo seuraavasti. Jokaisella valitsemella on oma painoarvonsa seuraavasti.

Valitsin Painoarvo
universaalivalitsin 0
elementtivalitsin, pseudoelementtivalitsin 1
luokkavalitsin, pseudoluokkavalitsin, attribuutivalitsin 10
id-valitsin 100
elementtin style-attribuutin avulla annettu sääntö 1000

Laskemalla nämä arvot yhteen saadaan säännön painoarvo (specificity value). Seuraavassa muutamia esimerkkejä.

id-valitsemella annetut säännöt ovat siis ylivoimaisesti painavavimpia, jos jätetään elementin attribuuttiin kirjoitettu sääntö huomiotta.

4.4.4 !important

Vielä yksi erityistilanne: kaikki nämä säännöt on mahdollista kumota antamalla säännölle määritys !important.

Tietyn säännön määritellä poissulkevan tärkeiksi seuraavasti:

p { 
  font-size:large; !important 
}

Käyttäjä voisi omassa tyylitiedostossaan antaa !important määrityksen avulla tälläisen säännön, joka kumoaisi kaikki muut p-elementille annetut koon määritykset.

!important määritys onkin tarkoitettu edelläkuvatuntyyppisiin erikoistilanteisiin, sen käytöstä tulisi siis pidättäytyä, vaikka sen avulla saisikin helposti joitain tilanteita hoidetuksi.

4.4.5 Sääntöjen määrittelystä

Todettakoon vielä, että saman painoarvon sääntöjen kesken voimaan jäävä sääntö määräytyy säännön sijainnin mukaan.

Ohjenuorana sääntöjen kirjoittamiselle on pyrkiä tekemään säännöistä mahdollisimman yleisiä ja mennä spesifisiin sääntöihin vain kun tilanne tosiaan niin vaatii. Mitä alhaisempi kynnys hyvin spesifisien sääntöjen käyttämiseen on, sitä helpommin tyylipohjasta tulee sekava ja vaikeasti ylläpidettävä. Alla pari hyvää kirjoitelmaa aiheesta.

4.5 CSS-värit

Värin voi määritellä usealla tavalla. Helpoin tapa on käyttää CSS:ssä määriteltyjä värien nimiä, 16 perusvärin lista (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) olivat aiemmin määriteltynä jo HTMLssä. CSS3:ssa on määritelty lisäksi 147 muuta nimettyä väriä.

Nämä 163 väriä ovat kuitenkin pieni osa täysvärikuvassa käytettävissä olevista 16,7 miljoonasta värisävystä. Tarkemman värinmäärityksen voi tehdä käyttäen RGB/RGBA tai HSL/HSLA formaatteja (A-versioissa on mukana koko kuvan läpinäkyvyys).

Verkosta löytyy hyviä työkaluja värien määritykseen, esimerkiksi:
ColorZilla Firefoxiin tai w3schoolin värinpoimija

4.5.1 RGB / RGBA (Red, Green, and Blue)

RGB-väri määritellään kolmella luvulla: punaisen, vihreän ja sinisen värin määrä.

Kukin kolmesta väristä määritellään asteikolla: 0-255 tai 0%-100% tai 00-FF. Kolmen värin intensitetti voidaan siis määrittää joko desimaalilukuna, prosenttina tai heksadesimaalilukuna. CCS-väreissä kaksi ensimmäistä koodausta annetaan suluissa kolmena pilkuilla toisistaan erotettuna lukuna, ja sulkujen eteen kirjoitetaan tunnus rgb. Heksadesimaaliesitys alkaa #-merkillä jota seuraa kuusi merkkiä joukosta: 0, 1.. 9,a,..f.

Esimerkiksi mustassa värissä kaikkien kolmen värin määrä on 0, ts. musta väri voitaisiin esittää RGB-värinä rgb(0,0,0), rgb(0%,0%,0%) tai #000000. Vastaavasti valkoinen olisi rgb(255,255,255), rgb(100%,100%,100%) tai #ffffff.

Määritys rgb(54,165,63) tuottaa ruohonvihreän värin, joka prosentteina ilmaistuna olisi rgb(21%, 65%, 5%). Heksadesimaaliesitysmuodossa sama väri olisi #36c93f.

Määritys rgb(153,0,51) puolestaan tuottaa tiilenpunaisen värin . Prosentteina ilmaistuna se olisi rgb(60%, 0%, 13%) ja heksadesimaaliesitysmuodossa sama väri olisi #990033. Näissä erikoistilanteissa, joissa kukin väri koostuu kahdesta samasta merkistä, heksadesimaaliesityksen voi lyhentää esitettäväksi kolmella merkillä: #903.

RGBA-värissä määritellään kolmen luvun lisäksi neljäs, joka määrittää värin läpinäkyvyyden desimaalilukuna väliltä 0-1, mitä lähempänä nollaa luku on, sen läpinäkyvämpi kuva on. Jos edellisessä tiilenpunaisessa värissä olisimme käyttäneet tekstivärinä mustaa, teksti olisi ollut vaikeasti nähtävissä. Seuraavassa värille on annettu läpinäkyvyyttä 0.8, 0.6, 0.4 ja 0.2: rgba(153,0,51,0.8) / rgba(153,0,51,0.6) / rgba(153,0,51,0.4) / rgba(153,0,51,0.2)

4.5.2 HSL / HSLA (Hue, Saturation, and Lightness)

HSL-väri on toinen tapa määritellä värisävy (uusi, CSS3). Tässäkin määrittely tapahtuu kolmella luvulla: värisävy ja värikylläisyyden ja vaaleuden aste. Ensimmäinen näistä luvuista ilmaistaan luvulla väliltä 0-360 ja kaksi jälkimmäistä prosentteina.

Musta värin HSL-määritys hsl(0, 0%,0%) ja valkoisen hsl(0, 0%, 100%).

HSL väreinä edellisen esimerkin värit ovat: ruohonvihreä: hsl(124, 58%, 50%) ja tiilenpunainen: hsl(340, 100% 30%) .

HLSA-värissä määritellään neljäs prosenttiluku läpinäkyvyydelle täysin analogisesti RGBA-määrityksen kanssa.

4.6 Mittayksiköt

CCS:ssä käytetyt mittayksiköt ovat joko suhteellisia tai absoluuttisia. Näiden lisäksi voidaan monessa yhteydessä käyttää prosenttilukuja suhteellisina mittayksiköinä.

4.6.1 Suhteelliset mittayksiköt

Yksiköt em ja ex ovat suhteessa elementissä käytettyyn kirjasimeen. Mittayksikön edessä annettava mittaluku voi olla joko kokonaisluku tai desimaaliluku (desimaalierottimena piste). Mittaluvun ja mittayksikön väliin ei saa kirjoittaa välilyöntiä.

Huomaa erityisesti, että CSS pikseli, px, on suhteellinen, ei absoluuttinen mittayksikkö. Se ei välttämättä ole sama kuin laitteen pikseli, vaan se on määritelty pienimmäksi mittayksiköksi, joka on paljain silmin nähtävissa ja joka ko. tulostuslaitteessa voidaan tuottaa tarkkareunaisena. CSS pikselin ja laitteen näyttöpikselin suhde siis riippuu näytön koosta ja tarkkuudesta.

Voi siis luottaa, että yhden pikselin (ja sen kerrannaisten) viiva tulostuu tarkkana laitteesta riippumatta, mutta px mittasuhde ei tarkoita samaa kuin kirjasinten kirjasinkoko. CSS määrittää myös, että bittikarttakuvien (jpg, png, gif) pikselit hahmonnetaan suoraan yksi-yhteen CSS-pikseleihin, jolloin esimerkiksi 320 x 215 kuvapisteen kuva näkyy sivulla täsmälleen 320 px leveänä ja 215px korkeana.

li { 
  font-size: 0.875em;
  padding: 2px;
}

4.6.2 Prosenttiluvut

Prosenttiluvut ilmaistaan kirjoittamalla prosenttimerkki luvun (kokonais- tai desimaaliluku) perään. Prosenttiarvot annetaan aina suhteessa johonkin toiseen arvoon, suhteessa vanhempielementin ko. piirteen arvoon.

Jos esimerkiksi <body> elementin yksi lapsi on määritelty kuuluvaksi vasenpalsta-luokkaan (ts. elementillä on attribuutti class="vasenpalsta"), ja toinen lapsi oikeapalsta-luokkaan. Tyylipohjassa on annettu säännöt:

.vasenpalsta { 
  width: 40%;
}
.oikeapalsta { 
  margin-right: 5%;
}

Tällöin vasenpalsta-luokaan määritelty elementti 40% koko sivun leveydestä, ja oikeapalsta-luokkaan määritellyllä elementillä on oikeassa reunassa marginaali, joka 5% sivun leveydestä.

4.6.3 Absoluuttiset pituusyksiköt

CSS:ssä on määritellyt absoluuttiset mitat, ovat seuraavat.

Mittayksikäiden väliset suhteet ovat siis: 1in = 2.54cm = 25.4mm = 72pt = 6 pc

Absoluuttiset mittayksiköt ovat nimensä mukaisesti pysyvästi samanmittaisia riipumatta välineestä, missä ne esitetään. Näin pitäisi olla, riippuu tietysti aina laitteesta, kuinka tarkasti se toteuttaa mittoihin liittyvät standardit. Absoluuttisia mittaksiköitä ei juurikaan voi käyttää tuotettaessa sisältöä näytöille, koska absoluuttisella mitalla määritetty elementti veisi esim. puhelimessa kovin erilaisen tilan näytöstä suhteessa isoon näyttöön.

4.6.4 Mitä mittayksiköitä pitäisi käyttää?

Sivustojen ulkoasua määritettäessä tulisi CSS-säännöissä lähes poikkeuksetta käyttää suhteellisia mittoja (em, ex, px tai prosentteina), jolloin sivu skaalautuu kulloinkin käytettävään sivunkokoon. Kirjasinten koot suositellaan annettavaksi em-yksiköissä. Absoluuttisten pituusyksikköjen käyttöön tulisi olla jokin erityinen syy.

Lyhyt ja ytimekäs selvitys aiheesta löytyy W3C:n sivuilta:
Bert Bos: em, px, pt, cm, in ...

4.7 Tekstin muotoilu

Tekstin muotoilemiseksi elementin sisällä on käytettävissä seuraavat piirteet:

text-decoration: none|underline|overline|line-through|blink|inherit
[W3C] [MDN] [W3School]
Tekstia voidaan alleviivata, yliviivata, ylleviivata ja vilkuttaa (underline, line-through, overline, blink). Lisäksi piirteen arvon voi asettaa myös pakkoperinnällä tai pyyhkiä pois kaikki koristelut. (inherit, none). Ei periydy.
text-align: left|right|center|justify|inherit
[W3C] [MDN] [W3School]
Teksti sijoittelu elementissä voi olla vasen suora, oikea suora, keskitetty tai molemmista reunoista tasattu. Piirteen arvon voi asettaa myös pakkoperimällä (inherit). Oletuksena on piirteelä on nimetön arvo, joka toimii länsimaiselle tekstille kuten arvo left ja right, jos tekstin kirjoitussuunta on oikealta vasemmalle. Periytyy.
text-indent: pituusyksikkö|prosentti|inherit
[W3C] [MDN] [W3School]
Tekstilohkon ensimmäisen rivin sisennys, arvo annetaan jollakin mittayksiköllä tai prosentteina äiti-elementin leveydestä. Piirteen arvon voi asettaa myös pakkoperinnällä. Alkuarvona on 0. Periytyy.
text-overflow: clip|ellipsis|merkkijono
[W3C] [MDN] [W3School]
Määrittelee miten tekstiä käsitellään ellei se mahdu elementtiin. Teksti joko vain leikataan (clip), leikataan ja merkitään loppuun kolme pistettä (ellipsis), joka kertoo ettei teksti mahtunut elementtiin tai piirteelle voi antaa merkkijonon, joka annetaan tässä tilanteessa elementin arvoksi. Ei periydy.
text-shadow: none|x-offset y-offset [blur] [väri]
[W3C] [MDN] [W3School]
Piirtää tekstille varjon, varjolle pitää määritellä horisontaalinen ja vertikaalinen siirtymä. Nämä arvot annetaan mittayksikköinä. Varjon voi myös hämärtää (blur)tai määrätä varjolle haluamansa värin. Periytyy.
text-transform: capitalize|uppercase|lowercase|none|inherit
[W3C] [MDN] [W3School]
Tekstin kirjasimet voi pakottaa isoin tai pienin kirjaimin kirjoitetuksi tai joka sanan isolla alkavaksi. Periytyy.
line-height: normal|mittayksikkö|kokonaisluku|prosentti|inherit
[W3C] [MDN] [W3School]
Rivin korkeuden voi säätää antamalla sille koko mittayksiköiden avulla tai kokonaisluku (1 rivinkorkeuden riviväli, 2 rivinkorkeuden riviväli, jne. tai rivinkorkeuden voi pakottaa alkuperäiseksi (normal). Periytyy.
letter-spacing: normal|mittayksikkö|inherit
[W3C] [MDN] [W3School]
Kirjainten välistys voidaan määrittää pituusmittana. Periytyy.
word-spacing: normal|mittayksikkö|inherit
[W3C] [MDN] [W3School]
Sanojen välistysoidaan määrittää pituusmittana. Periytyy.
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit
[W3C] [MDN] [W3School]
Määrittää tyhjätilamerkkien käsittelemisen.
Tyhjätilamerkit luhistuvat yhdeksi arvoilla nowrap ja pre-line ja säilytetään arvoilla pre ja pre-wrap.
Rivinvaihdot käsitellään seuraavasti:
nowrap: riviä ei vaihdeta lainkaan (se jatkuu kunnes kohdataan rivinvaihtoelementti <br>),
pre: rivi toistaa vain tekstissä annetut rivinvaihdot (kuten <pre>-elementissä),
pre-line ja pre-wrap: rivi toistaa annetut rivinvaihdot mutta vaihtaa tarvittaessa riviä myös automaattisesti.
Periytyy.
word-wrap: normal|break-word
[W3C] [MDN] [W3School]
Määrittelee voidaanko pitkä sana katkaista seuraavalle riville, jos se ei mahdu kapeaan elementtiin. Periytyy.

4.8 Kirjasimet

CSS-piirteet tekstissä käytetyn kirjasimen säätelyyn sallivat kirjasimen ja kirjasinperheen, (font-name, font-family), kirjasinkoon (size) ja kirjasimen erilaisten leikkausten (style, weight, variant) määrittelyn.

4.8.1 Kirjasinperheet

font-family: [kirjasinperhe]*|[geneeringn kirjasin-perhe]
[W3C] [MDN] [W3School]
Piirre käytettävän kirjasinperheen määritämiseen. Termi kirjasinperhe viittaa siihen, että jokainen kirjasin sisältää useampia leikkauksia kirjasimesta (normaali, kursivoitu, lihavoitu, ...).

Piirteen arvoksi voi antaa useita vaihtoehtoja pilkuilla erotettuna listana, jolloin käyttöön tulee ensimmäinen niistä joka sivun tulkintaympäristössä on käytettävissä. Viimeisenä vaihtoehtona suositellaan käytettävän jotakin ns. geneeristä kirjasinperhettä. Esimerkiksi:

.body { 
  font-family: verdana, arial, sans-serif;
}

.lainaus { 
  font-family: "new century schoolbook", serif; 
}

Geneeriset kirjainperheet

sans-serif
esim. Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana. Kirjasin on Päätteetön kirjasin, nykyisin näitä kirjasimia käytetään paljon verkkosivuilla, ja yleensäkin elektronisessa muodossa esitetyissä teksteissä.
serif
esim. Garamond, Georgia, New York, Times, Times New Roman. Päätteellinen kirjasin, käytetään yleisesti paperille tulostetussa tekstissä.
monospace
tasavälinen kirjasin, esim. Courier, Courier New, Lucida Console, Monaco. Käytetään tyypillisesti koodin kirjoittamiseen tai konekirjoitukseomaisen tekstin vaikutelman aikaansaamiseksi. Kirjasimen kaikki kirjaimien vievät riviltä saman tilan ts. ovat samanlevyisiä.
cursive fantasy
esim. Impact, Copperplate, Desdemona, Kino. Näitä kirjasimia käytetään erikoistilanteissa, otsikoissa tai lyhyissä huuhahduksenomaisissa tekstpaloissa; pitkissä teksteissä käytettynä tekee tekstistä vaikealukuista. Näissä kirjasimissa ei kirjasinperhe eikä merkistökokoelma välttämättä ole kattavasti toetutettu, esim. kursiivi kirjasin tai kansallisia erikoismerkkejä saataa puuttua.

Eri kirjasinten luettavuudesta on tehty vuosikymmenten kuluessa paljon tutkimusta, joka nykytiedon valossa on todettu enemmän tai vähemmän hataraksi. Erityisesti sarif ja san serif vertailusta löytyy paljon tutkimusta. Vaikuttaa siltä että luettavuuteen vaikuttaa enemmänkin tottumus (ja kirjasimen selkeys, toki) kuin itse käytetty kirjasinleikkaus.

Hyvä yhteenveto aiheesta:
Alex Poole: Which Are More Legible: Serif or Sans Serif Typefaces?).

Verkkosivuilla voi halutessaan käyttää myös ns. Webbikirjasimia (Web fonts), jolloin kirjasinleikkaukset haetaan serverille tallennetusta tiedostoista. Tälläiset erikoiskirjasinperheet ovat usein maksullisia ja ne liitetään sivulle @font-face CSS-piirteen avulla:
@font-face: {kirjasimen-tiedot}
[W3C] [MDN] [W3School]

4.8.2 Kirjasinkoot

font-size: xx-small|x-small|small|medium|large|x-large|xx-large|mittayksikkö
[W3C] [MDN] [W3School]
Tekstin kokoa voi hallita kahdella tavalla; voimme määrätä elementin absoluuttisen kirjasinkoon käyttäen CSS:n nimettyjä arvoja tai absoluuttisia mittayksiköitä, tai määrittää tekstin koon suhteellisin mittayksiköin (prosentteina tai em/ex-mittayksiköillä).

On mahdollista määrätä suoraan elementtien kirjasinkoko. Jos niin hlutaan tehdä, pistekokojen sijasta on suositeltavampa käyttää font-size-piirteen suhteellisia kokomäärityksiä (xx-small ... xx-large), joka vanhemmissakin (erityisesti Internet Explorerin vanhoissa versiossa) skaalautuvampi.

Kirjasinkokojen suhteellinen määritys antaa kuitenkin joustavammat sommittelumahdollisuudet, mutta silloin on hyvä muistaa, että kirjasimen koko on periytyvä ominaisuus. Jos tätä ei muista, kirjasinkoon periytyminen saatta jossain tilanteessa johtaa yllättäviin tilanteisiin, kun suhteellinen skaalaus kertautuu sisäkkäisissä elementeissä. Seuraavassa on esitetty yksi tapa pitää kirjasikoota hallinnassa.

Anna ensin dokumentin rungossa tekstille peruskoko säännöllä:

body { font-size=100% }

Tämä määritys tuottaa useimmissa sealaimissa kirjasinkoon 16px. Skaalaa sitten dokumentin muut elementit suhteessa tähän kirjasinkokoon. Jos esimerkiksi haluat, että kappaleiden esityskoko (normaalissa näyttötilassa) on 14px (tyypillinen käytetty koko näytöllä), annat kappaleen kooksi 14/16 px. Määrität silloin kappaleen kirjasinkooksi

p { font-size = 0.875em }

Muut dokumentin elementit vastaavasti; kirjasinkoot otsikoille voisivat olla (h1, h2) ovat 22px, 18px, jolloin niiden suhteelliset koot olisivat 1.375em ja 1.1em. Tyypillinen esimerkkipohja kirjasinkokojen määritykseen olisi seuraavanlainen:

@charset "UTF-8";

body {
  font-family: "Palatino Linotype", Palatino, serif;
  font-size: 100%;
}

h1, h2 {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: normal;
}

h1 { /* 22px/16px */ 
  font-size: 1.375em; }

h2 { /* 18px/16px */
  font-size: 1.1em;  
}

p { /* 14px/16px */ 
  font-size: .875em; 
}

4.8.3 Kirjasinten tyyleistä

font-style: normal|italic|oblique|inherit
[W3C] [MDN] [W3school]
Kirjasin voidaan näyttää kursiivina (italic), tai käyttää siitä vinokirjasinleikkausta (obligue), jos se on kirjasimelle olemassa.

font-variant: normal|small-caps|inherit
[W3C] [MDN] [W3school]
Kirjasimesta voidaan käyttää versaalia kirjasinta (small-caps) käyttävää leikkausta , jos se on sille olemassa.

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit
[W3C] [MDN] [W3school]
Vahvennuksen määräämiseen voi käyttää myös nimettyjä vahvuuksia tai käyttäen lukuarvoa väliltä 100 - 900 (400 normaalivahvuus, ja 700 tavanomainen lihavoitu). Se kuika suuri muutoksen pitää olla, jotta se käytännössä näkyisi muutoksena kirjasimen vahvuudesta, riippuu luonnollisestikin tulkkausympäristöstä ja kirjasinleikkauksesta.

4.9 Lokeromalli

CSS:n lokeromalli

CSS käsittelee kaikkia verkkosivulla olevia elementtejä, kuin niiden ympärille olisi piirretty oheisen mallin mukaiset näkymättömät laatikot.

Lokeromalli antaa sivun suunnittelijalle hyvät välineet sivun sommitteluun: CSS-sääntöjen avulla on mahdollista muokata kunkin elementin lokeromallin eri osia monipuolisesti, kuten esimerkiksi värejä (color, background-color), taustoja (background) reunan ominaisuuksia (border), tai alueiden kokoja (width, height).

4.9.1 Reunus, täyte, marginaali (border, padding, margin)

pyöristettykulmainen suorakaideElementin reunus muotoillaan CSS-piirteillä border-width, border-style ja border-color. Kunkin näistä piirteistä avulla voidaan muokata lokeromallin reunusta joko kokonaisuudessaan, tai erikseen kehyksen yläreunaa, oikeaa reunaa, alareunaa tai vasenta reunaa. Jos arvoja annetaan yksi, muotoilu koskee kaikkia reunoja. Jos arvoja annetaan neljä (välilyönnillä toisistaan erotettuna) arvot koskevat eri reunoja edellä luetellussa järjestyksessä.

border-width: [thin|medium|thick|mittayksikkö|inherit]1-4
[W3C] [MDN] [W3school]
border-style: [none|hidden|dotted|dashed|solid|double|width|groove|ridge|inset|outset]1-4
[W3C] [MDN] [W3school]
border-color: [transparent|värikoodi|inherit]]1-4
[W3C] [MDN] [W3school]

Reunuksen oletusväri on "kynän väri", ts. elementin piirteen color arvo.

pyöristettykulmainen suorakaide Näiden kolmen piirteen lisäksi kehyksen kulmat voidaa pyöristää border-radius-piirteen avulla. Piirteelle annetaan arvona kulman pyöristävän ympyrän säde (oletusarvo on 0, ts. kulma ei ole pyöristetty). Jälleen, arvoja voi antaa vain yhden, jolloin pyöristyssäde koskee kaikkia kulmia, tai kulmien pyöristykset voivat olla erilaisia, jolloin arvoja luetellaan välilyönnillä toisistaan eroteltuna useampia.

border-radius: [mittayksikkö]1-4
[W3C] [MDN] [W3school]

Reunuksen eri piirteet voi antaa yksittäin elementin eri reunoille , esim.

border-attribuutin käyttöesimerkki, neljä kehystä yksittäin annettuna
.kehys {
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 10px;
  border-bottom-width: 1px;
  border-left-width: 50px;
}

piirtäisi elementin vasemman reunan hyvin vahvalla ja ylä- ja alareunan hyvin ohuella viivalla. Esimerkissä huolehdittiin ensin border-style attribuutin avulla, että kehys oli näkyvä. Jos reunojen paksuudet kirjoitetaan yhteen sääntöön, tulkitaan annetut mitat kohdistuvan elementin reunaviivaan myötäpäivään yläreunasta lähtien. Edellisen kanssa yhtäpitävä sääntö olisi siis

.kehys {
  border-width: 1px 10px 1px 50px;
}

Tässäkään merkintätavassa ei kuitenkaan tarvitse antaa arvoja kaikille reunoille, jos arvoja on vähemmän kuin neljä, periaate on, että reunus pyrkii pysymään symmetrisenä. Jos siis annamme vain yhden arvon, se määrää reunuksen elementin kaikille reunoille, jos annamme kaksi arvoa, ensimmäistä arvoista käytetään sekä ylä-, että alareunan piirtämisessä ja toista arvoa oikean ja vasemman reunan piirtämisessä. Jos annamme kolme arvoa toista arvoista käytetään sekä oikean että vasemman reunaviivan piirtämisessä.

Ks. Esimerkki reunuksen käytöstä.

Kun reunus on kaikilla reunoilla samanlainen, voidaan reunuksen piirteet asettaa myös kerralla käyttäen lyhennemerkintää: border-attrivuutin käyttöesimerkki

.kehys {
   border: 15px outset maroon;
}

Lyhennemerkinnästä voi joku tai jotkin kolmesta piirteestä puuttua (jolloin ko. piirteelle käytetään oletusarvoa), mutta järjestyksen tulee kuitenkin aina olla yllä annettu (leveys, tyyli, väri).

Täytteen leveys annetaan padding-piirteen avulla.

padding: [mittayksikkö]1-4
[W3C] [MDN] [W3school]

Se voidaan antaa erikseen elementin eri laidoille piirteillä padding-top, padding-right, padding-bottom ja padding-left vastaavasti kuin edellä reunuksen piirteiden kanssa, esimerkiksi

padding-attrivuutin käyttöesimerkki
.kehys {
   border: 1px solid black;
   padding: 5px 50px;
}

Marginaalin leveys määritellään täysin analogisesti, joko yksittäin piirteiden, margin-top, margin-right, margin-bottom ja margin-left avulla tai lyhemmin, yhdellä piirteellä

margin: [mittayksikkö]1-4
[W3C] [MDN] [W3school]

margin-attrivuutin käyttöesimerkki

Esimerkiksi

.kehys {
  border: 1px solid black;
  padding: 5px;
  margin: 0px 2px 5px;
}

4.9.2 Taulukon kehystys

Taulukolle border-attribuutilla määritelty reunaviiva <table border="1"> piirtää reunukset kullekin taulukon solulle erikseen. Tällöin kahden solun väliin piirtyy aina kaksi viivaa. Piirteen border-collapse avulla voi määrätä, että taulukon solujen väliin piirretään vain yksi viiva (piirteen arvo voi olla collapse tai separate).

border-collapse: collapse|separate|inherit
[W3C] [MDN] [W3school]

Solujen väliin jätettävää tilaa voi säädellä padding piirteen avulla aivan kuten millä tahansa muullakin elementillä. Erityisesti tähän taulukoihin liittyvään tilanteeseen on kuitenkin käytettävissä myös piirre border-spacing, jonka avulla määritellään vierekkäisten solujen etäisyys toisistaan CSS-mittayksiköillä ilmaistuna. Jos piirteelle annetaan arvona vain yksi mittayksikkö, horisontaalinen ja vertikaalinen etäisyys ovat yhtä suuret.

border-spacing: h-etäisyys [v-etäisyys]|inherit
[W3C] [MDN] [W3school]

4.10 Taustat

Olemme jo aiemmissa esimerkeissä nähneet, että color piirre asettaa elementin "edustavärin", ns. piirtovärin, jonka avulla voidaan asettaa elementissä annetun tekstin väri. Edellä on ollut esimerkkejä mhyös taustavärin määrttelemisestä.

Elementille voi antaa taustaksi myös taustakuvan background-image-piirteen avulla.

Oletusarvoisesti taustakuva toistuu sekä horisontaalisessa että vertikaalisessa suunnassa. Tämän avulla voi helposti toteuttaa erilaisia taustatekstuureja.

Ks. Esimerkki taustakuvan käytöstä
Ks. Esimerkki kuvan käytöstä tekstuurin luomiseksi

Taustakuvan esittämistä voi kontrolloida seuraavilla piirteillä

Ks. Esimerkki kuvan käytöstä taustalla (ei toistoa)

Taustan tyylit voidaan asettaa myös kerralla, käyttäen lyhennemerkintää

background: color position size repeat origin clip attachment image;

4.11 Visuaalinen sommittelu

Sivun visuaalisen sommittelun periaate CSS-tyylipohjien avulla on yksinkertainen.

Tee ensin sivusta "rautalankamalli", ts. mieti millaisista visuaalisista elementeistä sivusi koostuu. Kirjoita sitten nuo elementit omiksi osikseen käyttäen ensisijaisesti HTML5:n sivun rakenteen määrittelyyn esiteltyjä elementtejä, ja toissijaisesti geneeristä div-elementtiä. Voit sen jälkeen sijoitella elementit rautalankamallisi mukaisesti käyttäen asemointia (position), kellutusta (float) tai elementtien näyttötavan muokkausta (display).

4.11.1 Rautalankamalli

Rautalankamallin ajatuksena on miettiä mitä sisältöä sivulla halutaan esittää, ja miten paljon sille halutaan varata tilaa. Rautalankamallin voi hyvin piirtää käsin paperille, mutta tähän tarkoitukseen löytyy myös erilaisia wireframe, tai protoiluvälineitä (esim. balsamiq, maksullinen, mutta siitä on olemassa myös ilmainen webbiversio tai Pencil; täältä löytyy enemmänkin vaihtoehtoisia välineitä 33 Free and Online Tools for Drawing, Painting and Sketching).

Tämän sivuston rautalankamalli Tämän sivuston rautalankamalli voisi olla jotain oheisen kuvan kaltaista. Rautalankamallissa ei ole tarkoitus kuvata värejä, kirjasinvalintoja, kuvia tai taustoja, vaan lähtökohtana on sivun rakenteen suunnittelu lähtökohtana kullakin sivulla esitettävä sisältö ja sen tärkeys sekä sivulla tarvittavat navigointielementit.

4.11.2 Asemointi

position: static|relative|abolute|fixed;
[W3C] [MDN] [W3school]

Normaali elementtivirta

position: static

Normaalisti elementit sijoittuvat sivulle elementtivirran mukaisessa järjestyksessä, toisin sanoen siinä järjestyksessä jossa ne on dokumenttiin kirjoitettu. CSS:n position-piirteelle annetut arvot antavat meille erilaisia mahdollisuuksia poiketa tuosta järjestyksestä. Elementtien oletusasemointi on static, eli tällöin elementti tuodaan sivulle siihen kohtaan mihin se HTML-dokumentin elementtivirrassa tulee vastaan. Esimerkki: Elementti oletusasemoinnilla

Relatiivinen sijoittelu

position: relative

Elementin asemointipiirteen arvolla relative on muuten kuten static, mutta elementtiä voidaan siirtää oletuspaikaltaan käyttäen piirteitä left top right ja bottom.
Esimerkki: Suhteellinen asemointi (relative)

Relatiivinen sijoittelu

position: absolute

Elementin asemointipiirteen arvolla absolute tuo elementin pois elementtivirrasta ihan "omaan piirtotasoonsa", jossa sen sijainti määritellään suhteessa sivun koordinaatistoon. Asemointi sivulla tapahtuu piirteiden left top right ja bottom avulla; sivun vasemman yläkulman koordinaatti on 0,0.
Esimerkki: Absoluuttinen asemointi (absolute)

Relatiivinen sijoittelu

position: fixed

Elementti voidaan sitoa sivun sijasta myös selainikkunaan, tällöin asemointipiirteen arvoksi annetaan fixed. Ero tulee näkyviin ikkunaa vieritettäessä, selainikkunaan (piirteiden left top right ja bottom avulla) sidottu elementti pysyy paikoillaan vaikka sivun muu sisältö liikkuu. Tämä asemointitapa toimii joissain selaimissa (IE) epäluotettavasti.
Esimerkki: Kiinteä asemointi (fixed)

4.11.3 Kellutus

Edellisillä tavoilla ei kuitenkaan saa sijoitelluksi elementtiä (esimerkiksi kuvaa) siten, että muut elementit täyttävät jäljellen jääneen tilan (esim. teksti kiertää kuvaa). Absoluuttisessa ja kiinteässä asemoinnissa elementti irroittetaan elementtivirrasta. Koska elementti sijoitetaan paikalleen ihan omassa, muusta sivusta erillisessa, "maailmassaan", ei muulla sivulla ole sivua skaalattaessa tietoa siitä missä absoluuttisesti asemoitu elementti loppuu. Ei siis ole keinoa sitoa muita elementtejä sijaitsemaan näin asemoidun elementin jäljessä. Siksi saattaa olla tarpeen "kelluttaa" elementti absoluuttisen sijoittelun asemasta.

float

float: left|right|none|inherit;
[W3C] [MDN] [W3school]

Elementti voidaan kelluttaa (float) oikealle tai vasemmalle, jolloin se siirtyy horisontaalisesti niin kauas vanhempielementtinsä reunaan kuin mahdollista. Kellutus voi tapahtua vain horisontaalisessa suunnassa. Kellutus ei vaikuta kellutettavaa elementtiä edeltäviin elementteihin, mutta sen jälkeen tulevat elementit täyttävät vapautuvan tilan kiertäen kellutettua elementtiä.

clear

clear: left|right|both|none|inherit;
[W3C] [MDN] [W3school]

Elementti, jonka piirtymiseen kellutettu elementti vaikutti, voi estää vaikutuksen clear piirteen avulla. Piirteen arvo left "puhdistaa" elementin vasemman reunan, vastaavasti piirteen arvo right oikean reunan ja antamalla piirteelle arvon both saadaan aikaan molemmat vaikutukset.

4.11.4 Elementtien näyttötapa

display: block|inline|inline-block|none|inherit[tässä ei kaikki];
[W3C] [MDN] [W3school]

Aiemmin todettiin, että elementit voidaan luokitella lohkotason- ja rivitason elementteihin. Itse asiassa kyse on elementin piirteen display oletusarvosta. Ne elementit, joiden display-piirteen oletusarvo on block (esim. <p>) luokiteltiin lohkotason elementeiksi, ja ne elementit, joilla oletusarvo on inline (esim. <strong>) luokiteltiin rivitason elementeiksi.

Lohkotason elementille on tyypillistä paitsi, että se erotetaan muista elementeistä rivinvaihdolla, myös, että se varaa iselleen horisontaalisesti tilaa 100% äiti-elementtinsä leveydestä. Rivitason elementti varaa tilaa vain sisällön tarpeen mukainen lokero. Jos rivitason elementti jatkuu useammalle riville, uudella rivillä se varaa itselleen uuden lokeron.

Piirteen arvo voidaan kuitenkin muuttaa oletusarvosta. Jos esimerkiksi kappale-elementin display-piirteen arvoksi annetaan inline, peräkkäiset kappaleet kirjoittuvat yhteen, ja vastaavasti vahvennetut tekstinosat erotettaisiin muista elementeistä rivinvaihdolla, jos sen display-piirteen arvoksi annettaisiin block.

Näiden kahden risteymällä, elementillä, jonka display-arvo on inline-block on lohkotason elementin lokeromalli, mutta silti se käyttäytyy muuten kuten rivitason elementti (ei erotu muista elementeistä rivinvaidolla).

Arvo none on yhdessä jonkin skriptikielen kanssa käytettynä hyödyllinen. Sen avulla elementti voidaan kääntää näkymättömäksi. Näkymätön elementti ei varaa tilaa elementtivirrasta ja dokumentti käyttäytyy kuten elementtiä ei olisi lainkaan olemassa.

Piirteellä on iso valikoima muitakin arvoja, joita ei kaikkia käydä tässä läpi, mutta elementti voidaan niiden avulla saada käyttäytymään mm. kuten listan rivi, taulukko, tai jokin taulukon osa.

4.12 Mukautuva suunnittelu

John Allsoppin artikkeli A Dao of Web Design (2000) oli aikoinaan merkittävä www-sivujen suunnittelulle. Samaan tapaan Ethan Marcotten kirja ja artikkeli Responsive Web Design (2010) antoi nimen ja kirjoitti näkyväksi periaatteet, joita CSS3:n uusi mediakysely-mahdollisuus antoi.

Tausta-ajatuksena on, että aiemmin käytäntönä ollut tapa pyrkiä luomaan sivuista erilliset mobiiliversiot, alkoi laitteistokirjon kasvaessa osoittautua kestämättömäksi käytännöksi. Jos sivuston sisällöstä kirjoitetaan vain yksi versio, joka edellä kuvatulla tavalla kirjoitetaan lineaariseksi elementtien virraksi, mediakyselyiden avulla voidaan tilanteen mukaan tuottaa samasta sisällöstä kullekin laitteelle sopiva visuaalinen sommittelu.

Saman Resposive Design -ajatuksen muunnelmista on käytetty mm. nimityksiä progressive enhancement, content focused tai mobile first -suunnittelu. Sivun sisällön esittämiselle suunnitellaan erilliset rautalankamallit riippuen sen laitteen ominaisuuksista, jolla sivua katsotaan. Rautalankamallit toteutetaan omina CSS-tiedostonaan, ja valinta kulloinkin käytettävästä CSS-tiedostosta tehdään mediakyselyn antaman vastauksen perusteella.

4.12.1 Mediakyselyt

@media media-type [and (media-feature-experssion)]*
[W3C] [MDN] [W3school]

Mediakyselyt-moduuli on yksi jo valmiista CSS3-standardeista (valmistui 1012). Sen avulla WWW-sivu voi tiedustella selaimelta ovatko tietyt ehdot voimassa siinä ympäristössä, jossa dokumenttia ollaan esittämässä. Kyselyssä tiedustellaan ensin laitetta (mediatyyppi, (media-type)), ja sen jälkeen yhden tai useammman mediapiirteen (media feature expression) voimassaoloa. Mediakyselyä voi käyttää myös kuten valitsinta, esimerkiksi

@media screen and (max-device-width: 480px) {
  .column {
     float: none;
  }
}

Mediakysely voidaan yhdistää myös <link>-elementtiin, jolloin sen avulla voidaan valita koko käytettävä tyylipohja, esimerkiksi:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="mobiili.css" />

Yleisin mediatyyppi on screen; muut mahdolliset ovat: braille, embossed, handheld, print, projection, speech, tty ja tv.

Mahdolliset mediapiirteet ovat:

Mediapiirre Arvo Kuvaus
width mittayksikkö ikkunan leveys
height mittayksikkö ikkunan korkeus
device-height mittayksikkö laitteen korkeus
device-width mittayksikkö laitteen leveys
orientation portrait|landscape pysty/vaaka -orientaatio
aspect-ratio luku width/height
device-aspect-ratio kokonaisluku/kokonaisluku kuvasuhde
color kokonaisluku värisyvyys
color-index kokonaisluku indeksoitujen värien lukumäärä
monochrome kokonaisluku mustavalkoisen näyttöympäristön värisyvyys
resolution "dpi" tai "dpcm" resoluutio
scan "progressive" tai "interlaced" "tv" mediatyypin arvoja
grid kokonaisluku tosi, jos laite on grid-pohjainen

Mediakyselyistä ja mukautuvasta suunnittelusta tarkemmin kiinnostuneita kehotetaan lukemaan esimerkiksi seuraavat hyvät artikkelit:

5 Javascript

Javascriptin avulla www-sivuille saadaan lisättyä dynaamisia toimintoja. Web on kehittynyt alkuaikojen roolistaan dokumenttien jakojärjestelmänä, nykysenlaiseksi sovelluksia tukevaksi ohjelmointiympäristöksi. Selaimen rooli käyttäjälle on usein lähes sama kuin käyttöjärjestelmän rooli aiemmin.

WWWW-sivuille upotettavan JavaScriptin rooli, varsinkin kun HTML5-standardointi prosessin lähestyessä päätepistettään, on kehittynyt alkuaikojen (usein ärsyttävien) tehosteiden lisäyksiin käytetyistä, aliarvostetusta kielestä varsin vakavasti otettavaksi ja voimakkaaksi ohjelmointikieleksi.

Javascriptin avulla voidaan esimerkiksi tarkistaa lomakkeelle syötettyjä tietoja, tulostaa verkkosivulle sisältöä ja muokata verkkosivulla olevaa sisältöä.

5.1 Taustaa

Javascript on ohjelmointikieli, jonka alunperin Netscape kehitti selaimiinsa; kieli oli käytössä Netscapen selaimessa 1995 nimellä LivesScript, mutta Netscape vaihtoi nimen varhaisessa vaiheessa (Java-kielen nousun myötä) JavaScriptiksi. Sittemmin JavaScriptin menestyksen taustalla on ollut ECMA, joka otti vastuun kielen standardisoinnista. JavaScript seuraa ECMAScript-standardeja. Viimeisin kielen määrittely on JavaScript 1.8.5 (huhtikuu 2013, perustuu EcmaScript standardiin ECMA-262(2011).

JavaScript on

Toisin kuin cgi-ohjelmat, javascript-koodi suoritetaan suoraan selaimessa. Tälloin sivuun saatetaan tehdä paikallisia muutoksia lataamatta koko sivua uudelleen palvelimelta. Tätä periaatetta selaimessa tapahtuvasta koodin tulkinnasta ja sen vaikutuksesta sivun hahmonnukseen kutsutaan usein "dynaamiseksi HTML:ksi". Javascriptiin on olemassa palvelinpuolen ohjelmoinnin mahdollistavia laajennusmoduleita. Laajennettuun JavaScriptiin on esitelty olioita, joiden kautta voi esimerkiksi käsitellä palvelimella sijaitsevia tietokantoja tai tiedostoja.

5.2. JavaScriptin perusasioita

Katsotaan ensin muutama perusasia, jotka tulee tietää, kun liittää JavaScript-koodia sivulle.

5.2.1 Sivulle liitäminen

JavaScript-ohjelma upotetaan sivulle (HTML-dokumenttiin) analogisesti CSS-sääntöjen kanssa. JavaScript-koodi voidaan kirjoittaa omaksi (*.js) tiedostokseen ja tuoda se sivulle <script>-elementin avulla

  <script type="text/javasript" src="nimi.js" >
    ... javascript-koodi

  </script>

tai omana elementtinään johonkin kohtaan HTML-dokumenttia

  <script>
    ... javascript-koodi

  </script>

Seuraava JavaScriptiä sisältävä HTML-dokumentti selaimeen avattuna tuottaisi sivun, jossa lukee "Opetellaan Javascriptiä".

<!DOCTYPE html>
<head>
  <title>Ensimmäinen javascript ohjelma</title>
</head>
<body>
  <h1>Opetellaan JavaScriptiä - 1</h1>
  <script>
    document.write("<p>Tämä kappele tuotettu JavaScriptillä</p>")
  </script></body>
</html>

Esimerkki www-sivuna

Esimerkissä tutustutaan samalla myös DOM-olioon document. Jokaisesta selaimeen ladatusta HTML-dokumentista muodostetaan document-olio, jonka kautta päästään käsiksi kaikkiin sivulla esiteltyihin elementteihin. Yksi document metodeista on write, jonka avulla voi kirjoittaa parametrina saamansa tekstin HTML-dokumenttiin siihen kohtaan missä se esiintuu. Edellisessä esimerkissä HTML-dokumentin rungoksi tulee siis vain

Periaatteessa <script>-elementin voi sijoittaa sivulle minne tahansa elementit yleensäkin voi kirjoittaa. Käytäntönä on usein ollut sijoittaa skripti-funktiot dokumentin otsikko-osaan. Tämä on toisaalta luonteva sijoitupaikka, koska sriptit eivät ole varsinaista sivun sisältöä, vaan eräänlaista sivun lisäinformaatiota ja toisaalta, jos skriptiä kutsutaan jo sivun latauksen yhteydessä, skriptit joutuukin sijoittamaan sivun alkuun.

Selain noutaa (erilliset tiedostot) ja tulkkaa skriptit siinä järjestyksessä kun ne HTML-dokumentissa tulevat vastaan. Sinä aikana kun skriptitiedostoa tulkataan, sivulle ei tuoteta mitään <script>-elementin jäljessä määriteltyä sivun sisältöä. Näin ollen <script>-elementti "blokkaa" sivun muun sisällön tuottamisen selainikkunaan.

Skriptit kannattaakin siis sijoittaa sivun loppuun juuri ennen </body>-lopputunnusta aina kun se on mahdollista. Jos skripteja suoritetaan elementtivirrasta suoraan sivun lataustuessa, se ei luonnollisesti ole mahdollista, koska kutsuttavan funktion tulee olla esiteltynä ennen kuin sitä kutsutaan.

5.2.2 Ohjelmakoodin kirjoittamisesta

Tyhjätilamerkkien käsittely

Tulkki ohittaa ylimääräiset tyhjätilamerkit (välilyönnit, sarkainmerkit ja rivinvaihdot), joten ohjelmakoodin sisennys normaaliin tapaan koodin rakenteen selkeyttämiseksi on suositeltavaa.

Erilaiset JavaScript-kirjastot, joita saata ohjelmassasi käyttää, tulevat usein yhtenä pitkänä rivinä sisentämättömässä muodossa. Tämä johtuu siitä, että moduulien toimittajat ovat minimoineet ohjelmakoodin, jotta sen tulkkaus selaimessa olisi mahdollisimman nopeata. Koodin minimointiin on käytettävissä työkaluja, sellaisia kuten Google Closure Compiler, sen online versio, tai YUI Compressor ja sen online versio

Puolipisteiden käyttö

Vastaavasti kuin C:ssä, C++:ssa tai Javassa, lauseet päätetään normaalisti puolipisteeseen. JavaScriptissä puolipisteen voi kuitenkin jättää pois, jos lause on kirjoitettu omalle rivilleen.

  var alku = 1; var loppu = 2; 
  var muuttuja1 = 10
  var muuttuja2 = 20

Kirjoitettaessa muuttujien esittelyt samalle riville, molemmat esittelyt tulee siis päättää puolipisteellä. Puolipisteen voi jättää pois vain yksin omalla rivillään olevasta lauseesta, on kuitenkin hyvän tavan mukaista päättää lause aina puolipisteeseen.

Case-sensitiivisyys ja nimeämiskäytännöt

JavaSript on case-sensitiivinen kieli, joten tunnuksissa (kielen varatut sanat, muuttujien nimet, jne) isot kirjaimet ovat merkitseviä (Muuttuja ≠ muuttuja).

Varsinaisia pakottavia sääntöjä tunnusten nimeämiskäytännöissä ei ole, mutta "camelCase" kirjoitustapa on JavaScript-koodissa yleinen tunnusten krjoituskäytäntö (esimerkiksi under_score -käytännön sijasta). Nimeämiskäytännöistä tärkein on käyttää ohjelmissa hyvin kuvaavia nimiä ja säilyttää omaksumansa nimeämiskäytäntö samana. Käy myös selaamassa läpi Jeff Wayn kokoama lista erilaisista nimeämiskäytännöistä: 9 Confusing Naming Conventions for Beginners.

Koodin kommentointi

Tulkki jättää rivin loppuun asti huomiotta kaiken tekstin, joka on kirjoitettu kahden kauttaviivan (//) ja myös kaiken tekstin joka on kirjoitettu merkkien /* ja */ väliin. Edellisellä voi siis kirjoittaa ohjelmadoodiin yhden rivin ja jälkimmäisellä useamman rivin kommentteja.

  document.write("Seuraavat rivit eivät näy sivulla")
    // yhden rivin kommentti
    /* javascript-tulkki ohittaa kaikki merkit
       oli se sitten mitä tahansa
       kunnes löydetään kommentin lopettavat merkit */
  document.write("Tämä taas näkyy")

Vanhoilla sivuilla saatta nähdä että koodi on yllä esitettyyn tapaan ympäröity <!-- ja --> merkeillä. Silla oli tarkoitus välttää virheet selaimilla, jotka eivät JavaScriptiä ymmärtämättömien selainten kanssa.

  <script language="javascript" type="text/javascript">
  <!--
    document.write("Opetellaan Javascriptiä!")
  -->
  </script>

JavaScript kohtelee HTML:n kommentin aloittavaa merkkijonoa <!-- samoin kuin //-merkkejä, loppurivi tulkitaan kommentiksi. Tästä syystä <script>-alkumerkkiä seuraava <!-- rivi jää JavaScriptiltä huomiotta ja puolestaan koko JavaScript-ohjelma HTML:ltä huomiotta vaikka <script> elementtiä ei tunnitettaisikaan. JavaScipt ei kuitenkaan tunnista HTML-kommentin lopettavia --> merkkejä joten ne piilotettiin JavaScript tulkilta //-merkeillä.

Kaikki selaimet ovat kuitenkin jo kauan tukeneet JavaScriptiä, joten tämä varotoimenpide on nykyisin tarpeeton.

5.2.3 Varatut sanat

Alla olevassa taulukossa on lueteltu kielen varatut sanat, joita ei siis voi käyttää itse nimetyissä kohteissa tunnuksina:

abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

5.3. Muuttujat ja tietotyypit

JavaScript on dynaamisesti tyypitetty kieli, joka tarkoittaa sitä, että muuttujien tyyppi määräytyy sen arvon perusteella. JavaScriptissä on kolme perustietotyyppiä luvuille, merkkijonoille ja totuusarvoille (number, string, boolean) ja sen lisäksi oliot. Olioita voi luoda itse, mutta kielestä löytyy joukko valmiiksi käytettävissä olevia ydinolioita (core objects), ne ovat: Array, Boolean, Date, Function, Math, Number,RegExp, ja String.

Perustietotyypit ovat yksinkertaisia muuttujia, jotka luodaan sijoittamalla suoraan arvo (numero, merkkijono, totuusarvo) muuttujaan. Esimerkiksi

var mjono = "Jokin merkkijono";

On kuitenkin hämmentävää, että tälle string-tietotyyppiselle muuttujalle voi kohdistaa metodeja, kuten esimerkiksi

var mjono = "Jokin merkkijono";
var mjono2 = mjono.toUpperCase();

Tämä johtuu siitä, että ydioliot Number, String ja Boolean ovat perustietotyyppien number, string ja boolean ympärille määriteltyjä olioita, ja jos primitiiviin kohdistetaan vastaavan olion metodeja, perustietotyyppi muunnetaan automaattisesti väliaikaisesti, metodin suorituksen ajaksi, olioksi.

5.3.1 Muuttujien esittely

Muuttuja on esiteltävä ennenkuin sitä voi käyttää. Muuttujan nimissä saa käyttää kirjaimia (A-Z, a-z), numeroita (0-9) ´ja alaviivamerkkiä (_). Nimi ei saa kuitenkaan alkaa numerolla: esimerkiksi muuttujan nimi 99tunnus ei siten ole sallittu, mutta tunnus _99tunnus on.

Muuttujalle voidaan antaa arvo esittelyn yhteydessä, mutta se ei ole välttämätöntä.

<script type="text/javascript">
   var luku = 12; //Number
   var nimi = "Outi Ohjelmoija";
   var nimi2;
</script>

Muuttujat ovat paikallisia omassa funktiossaanl. Funktioiden ulkopuolella esitellyt muuttujat ovat globaaleja muuttujia. Vaikka muuttujan voi esitellä funktion sisällä missä kohdassa tahansa (jopa sen jälkeen kun sitä käytetään (!), ns. hoisting), on hyvän käytännön mukaista esitellä funktiossa käytetyt muuttujat funktion alussa.

5.3.2 Perustietotyypit

Luvut – number

JavaScriptissä ei ole erikseen tietotyyppiä kokonais- ja desimaaliluvuille, luvussa voi olla desimaaliosa tai se voi puuttua. Jos luvussa ei ole desimaalipistettä, niitä kohdellaan kokonaislukuina.

var luku1 = 3535;
var luku2 = -1000;
var luku3 = 0.34544;
var luku4 = 12.3e-2; // = 0.123

Merkkijonot – string

Merkkijonot koostuvat lainausmerkkine tai heittomerkkien väliin kirjoitetuista merkeistä ja mahdollisesti erikoismerkeistä (escape characters). Erikoismerkit kirjoitetaan kenoviivan avulla; yleisimpiä erikoismerkkejä ovat:

var mjono1 = "Tämä on merkkijono";
var mjono2 = 'Tähän  sisältyy "lainaus", siksi käytetty heittomerkkejä';
var mjono3 = "Tähän  sisältyy \"lainaus\", sen voi tehdä myös näin"'";
var mjono4 = "123"; // tämäkin on merkkijono, ei luku
var mjono5 = "ensimmäinen rivi\ntoinen rivi"; // tulostuisi kahdelle riville

Merkkijonojen yhteydessä plus-operaattori (+) tulkitaan konkatenaatio-operaattoriksi, sen avulla merkkijonoja voi yhdistää. Jos plus-operaattoria käytettäessä toinen operandeista on merkkijono, operaattori tulkitaan konkatenaatioksi ja toinenkin operandi muunnetaan merkkijonoksi.

var alku = "Tässä on alku";
var loppu = "ja tässä loppu";
var mjono = alku + ", " + loppu + "."; // ="Tässä on alku, ja tässä loppu."
var sostunnus = "120289-123C"; 
var vuosi = sostunnus.substr(4, 2);
var svuosi = "19" + vuosi; // merkkijono 1989
var vuosi2 = vuosi + 1;   // merkkijono 891
var vuosi3 = parseInt(vuosi) + 1;   // luku 90
var vuosi4 = Number(vuosi)+1; // luku 90

Totuusarvot – boolean

Totuusarvoisen tietotyypin madolliset arvot ovat true ja false, arvoja ei suljeta heittomerkkeihin.

var aviossa = true;
if (aviossa) {
	...
}
var b = (luku == 1000)
var eiTotuusarvoMja = "false"; // tämä on merkkijonomuuttuja

5.3.3 Oliot

Oliot ovat kokoelmia piirteitä; piirteet voivat olla joko ominaisuuksia (properties, perustietotyyppejä tai edelleen olioita) tai metodeja (methods, funktioita). Olion ominaisuuksiin ja metodeihin viitataan pistenotaatiolla.

Olio, voidaan luoda joko alustajalla (initializer) tai new-operaattorin ja Object()-konstruktorin avulla. Alustajalla olion luominen tapahtuu luettelemalla listana piirteenNimi:arvo-pareja aaltosulkeissa, esimerkiksi:

var kirja1={aihe:"jQuery", tekija:"David Sawyer McFarland"};

Seuraavassa esimerkissä luodaan alustajalla kirja-olio ja kirjoitetaan sivulle sen tiedot sivulle viittaamalla sen ominaisuuksiin pistenotaatiolla olio.ominaisuus.

<!DOCTYPE HTML>
<head>
  <title>Itse määritelty olio</title>
</head>
<body>
  <h1>Opetellaan JavaScriptiä - 2</h1>
  <script type="text/javascript">
     // Luodaan ja alustetaan kirja-olio, jolla kaksi ominaisuutta
     var kirja = {aihe:"jQuery", tekija:"David Sawyer McFarland"};
     // kutsutaan seuraavassa luotua oliota
     document.write("Kirjan nimi: " + kirja.aihe + "<br>");
     document.write("Kirjoittaja: " + kirja.tekija + "<br>");
  </script></body>
</html>

Esimerkki www-sivuna

Edellisessä tilanteessa olio luotiin suoraan alustus-lyhennemerkintätapaa käyttäen. Olio voidaan tarvittaessa luoda myös ensin tyhjänä oliona käyttäen new-operaattoria,

olio = new Object();

ja antamalla sen jälkeen oliolle ominaisuudet sijoituslausein:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Oma olio</title>
</head>
<body>
  <h1>Opetellaan JavaScriptiä - 3</h1>
  <script type="text/javascript">
      var kirja = new Object();   // Luodaan olio
      kirja.aihe = "jQuery";      // ja asetetaan oliolle ominaisuudet
      kirja.tekija  = "David Sawyer McFarland";
     // kutsutaan seuraavassa otsikko-osassa luotua oliota
     document.write("Kirjan nimi: " + kirja.aihe + "<br>");
     document.write("Kirjoittaja: " + kirja.tekija + "<br>");
  </script></body>
</html>

Esimerkki www-sivuna

Selkeämpää on kuitenkin luoda erillinen konstruktori-funktio Olio(parametrit). Silloin voimme luoda kirja-olion suoraan konstruktoria käyttäen vain tarvittaessa. Lisäksi, saman konstruktorin avulla voidaan luoda muitakin kirja-oliomuuttujia. Funktion sisällä käytettäessä varattua sanaa this, se viittaa funktiota kutsuvaan olioon, seuraavassa esimerkissä siis kostruktorin avulla luotavaan olioon.

<!DOCTYPE HTML>
<head>
  <meta charset="UTF-8">
  <title>Konstruktorilla määritelty olio</title>
  <script type="text/javascript">
    //kostruktori: funktio Kirja-tyyppisen olion luomiseksi
    function Kirja(mj1, mj2){  
      this.aihe = mj1; 
      this.tekija  = mj2;
    }
  </script></head>
<body>
  <h1>Opetellaan JavaScriptiä - 4</h1>
  <script type="text/javascript">
    var kirja1 = new Kirja("jQuery","David Sawyer McFarland");
    document.write("<p class='tausta'>Kirjan nimi: " + kirja1.aihe + "<br>");
    document.write("Kirjoittaja: " + kirja1.tekija + "<br>");
  </script></body>
</html>

Esimerkki www-sivuna

Edellä oliolle annettiin luotaessa ominaisuuksia. Olioiden metodien määritys tapahtuu myös samaan tapaan, nyt metodille vaan annetaan arvoksi funktio. Voit siis ajatella, että olion metodit ovat sellaisia olion ominaisuuksia, jolle ei annetakaan arvoksi perustietotyyppiä, vaan funktio.

Seuraavaan esimerkkiin on kirjoitettu kontstruktori oliolle Asiakas, jolla on kolme ominaisuutta: etunimi, sukunimi ja ika. Neljäs oliolle osoitettu piirre syntynyt ei olekaan perustietotyyppi, vaan sille annetaan arvoksi funktion nimi (Syntymavuosi). Metodin toteuttava funktio Syntymavuosi on määritelty erikseen.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>metodin itse tehdylle oliolle</title>
    <script type="text/javascript">
      function Asiakas(mj1, mj2, luku) {
          this.etunimi = mj1; 
          this.sukunimi  = mj2;
          this.ika = luku; 
          // liitetään olioon metodi
          this.syntynyt = Syntymavuosi;        
      } 
      function Syntymavuosi(vuosiNyt) {
        var sVuosi = vuosiNyt - this.ika;
        return sVuosi;
      }
    </script></head>
<body>
  <h1>Opetellaan JavaScriptiä - 5</h1> 
  <script type="text/javascript">
      var asiakas_001 = new Asiakas("Kalle", "Kuluttaja", 28);
      document.write("Asiakkaan 001 nimi on: " + 
        asiakas_001.etunimi + " " + asiakas_001.sukunimi + 
        " (" + asiakas_001.ika + "v)" +
        ",  hän on siis syntynyt vuonna: " + asiakas_001.syntynyt(2013));
   </script>
</body>
</html>

Esimerkki www-sivuna

5.3.4 Valmiit oliot

Number

Jos muuttujaa on tarpeen käsitellä oliona (käyttää esimerkiksi sen metodeja) voi luku-muuttujan esitellä perustietotyypin number sijasta olioksi Number.

var luku = new Number(15);

Number-oliolle määriteltyjen metodien avulla olio voidaan esimerkiksi pakottaa tulostumaan eksponenttimuodossa tai muuttaa merkkijonoksi tai perustietotyypiksi number. Tarkemmin Number-olion ominaisuuksista ja metodeista:
[MDN] [W3School] [TP]

Boolean

Vastaavasti totuusarvoisen perustietotyypin boolean sijasta voi tarvittaessa luoda olion Boolean.

var mja = new Boolean(alkuarvo);

Jos Boolean-oliolle ei anneta alkuarvoa (mja =new Boolean()) tai annettu alkuarvo on 0, -0. null, "", undefined, NaN tai ehto, jonka arvo on epätosi, saa muuttuja arvokseen epätosi. Kaikissa muissa tilanteissa (huom. myös tilanteessa mja=Boolean(false)) saa luotu muuttuja arvokseen tosi. Tarkemmin Boolean-olion ominaisuuksista ja metodeista:
[MDN] [W3School] [TP]

String

Myös merkkijononmuuttujan voi luoda olioksi.

var str = new String("Tämä on merkkijono-olio");

Merkkijonon luonti olioksi, antaa laajat mahdollisuudet merkkijonon käsittelyyn. String-olion metodien avulla voi merkkijonosta esimerkiksi hakea merkkejä, korvata merkkejä toisilla, palotella merkkijono osamerkkijonoiksi, muuntaa kirjaimet pieniksi tai isoiksi aakkosiksi, jne. Esimerkkejä merkkijonojen käsittelemisestä annettiin edellä perustietotyypin string yhteydessä.

Tarkemmin String-olion ominaisuuksista ja metodeista:
[MDN] [W3School] [TP]

Array

Taulukko on JavaScriptissä toteutettu oliona. Taulukko on järjestetty joukko arvoja, joihin voi viitata joko nimellä tai indeksillä. Taulukko voidaan luoda usealla eri tavalla. Seuraavat kolme lausetta loisivat saman taulukon:

var taulu = new Array(alkio0, alkio1, ..., alkioN);
var taulu = Array(alkio0, alkio1, ..., alkioN);
var taulu = [alkio0, alkio1, ..., alkioN];

Jos taulukko halutaan luoda antamatta sille sisältöä luonnin yhteydessä, sille voi halutessaan antaa pituuden taulukon luonnissa. Esimerkiksi kolmen alkion mittainen sisällöltään määrittelmätön taulukko voidaan luoda ja täyttää seuraavasti.

var taulu = new Array(3);
var taulu = Array(3),
var taulu = []; taulu3.length = 3;
taulu[0]=alkio1; taulu[1]=alkio2; taulu[2]=alkio3;

Moniulotteisia taulukoita voi luoda sisäkkäisten taulukkojen avulla, ts. määrittelemällä yksiulotteisen taulukon soluun edelleen taulukon.

var iMax = 5;
// silmukkamuuttujat
var i, j;

// Määritellään taulukon pituudeksi iMax+1. 
// (taulukon indeksointi lähtee nollasta)
var matriisi = new Array(iMax + 1);

//  kullekin taulukon riville
for (i = 1; i <= iMax; i++) {  
  // Luo taulukon sarakkeet
  matriisi[i] = new Array(iMax + 1);

  // täytetään taulukko 
  for (j = 1; j <= iMax; j++) {
    matriisi[i][j] = i * j;
  }
}

document.write(matriisi[3][4]);
document.write("<br/>"); 
document.write(matriisi[5][2]);
document.write("<br/>");
document.write(matriisi[1][4]);

Edellinen ohjelma tuottaisi luvut 12 10 ja 4 (omille riveilleen).

Taulukolle on määritelty joukko metodeja, joiden avulla taulukkoja voidaan mm. lajitella, paloitella, yhdistellä, käyttää pinomaisena tietotyyppinä, jne. Metodiluetteloita ja tarkempia kuvauksia löydät seuraavista lähteistä:
[MDN] [W3School] [TP]

Date

Date-oliotyyppiseen muuttujaan voi tallentaa päiväyksen ja ajan. Ajan voi ilmaista oliomuuttujaa luodessaan antamalla konstruktorille jokin seuraavista parametreista

Jos Date-olio luodaan ilman parametreja, saa luotu olio arvokseen nykyisen ajanhetken.

var luotu = new Date(2013, 04, 27, 16, 02, 00);
var nyt = new Date();

Date-olion metodien avulla voi esimerkiksi noutaa nykyhetken päväyksen (käyttäjän laitteen antama "system clock" -aika) ja päästä helposti eri osiin päiväystä, kuten esimerkiksi viikonpäivään getDay(). Tarkemmin Date-olion ominaisuuksista ja metodeista:
[MDN] [W3School] [TP]

Math

Math-olioille on määriteltynä ominaisuuksia ja metodeita, jotka helpottavat matemaattisten operaatioiden tekemistä. Olioon on esimerkiksi tallennettu piin (Π) arvo ominaisuudeksi: Math.PI ja trigonometriset funktiot metodeiksi. Math-prototyypistä ei normaalisti ole tarvetta luoda oliota, vaan sen ominaisuuksia ja metodeita voi käyttää suoraan prototyypistä.

var pii = Math.pii;
var rad = sin(x); // x kokonaisluku, palauttaa arvon sin(x) radiaaneissa 

Tarkemmin Math-olion ominaisuuksista ja metodeista: Date-olion ominaisuuksista ja metodeista:
[MDN] [W3School] [TP]

RegExp

RegExp-oliot ovat säännöllisiä lausekkeita, joiden avulla on mahdollista tehdä hahmontunnistusta merkkijonoille.

Lisää tietoa säännöllisistä lausekkeista:
[MDN] [W3School] [TP]

5.4. Operaattorit

Lausekkeet ovat sellaisia koodinosia, jotka voidaan evaluoida ja evalutoituina ne edustavat jonkin tietotyypin arvoa. Seuraavassa on luetteltu JavaScriptin lausekkeissa käytettävissä olevat operaattorit.

5.4.1 Aritmeettiset operaattorit

Operaattori Selitys Esimerkki
(a=5 ja b=10)
+ yhteenlasku a + b arvo 15
-vähennyslasku a - b arvo -5
* kertolasku a * b arvo 50
/ jakolasku a / b arvo 0.5
% jakojäännös a % b arvo 5
++ lisäysoperaattori, kasvattaa arvoa yhdellä a++ lausekkeen arvo 5, mutta a:n arvo lausekkeen suorituksen jälkeen 6
-- vähennysoperaattori, vähentää arvoa yhdellä a-- lausekkeen arvo 5, mutta a:n arvo lausekkeen suorituksen jälkeen 4

5.4.2 Vertailuoperaattorit

Operaattori Selitys Esimerkki
(a=5 ja b=10)
== yhtäsuuruus (a == b) arvo false
!= erisuuruus (a != b) arvo true
> suurempi kuin (a > b) arvo true
< pienempi kuin (a < b) arvo false
>= suurempi tai yhtä kuin. (a > b) arvo true
<= pienempi tai yhtä kuin (a < b) arvo false

5.4.3 Loogiset operaattorit

Operaattori Selitys Esimerkki
(a=true ja b=false)
&& looginen and-operaattori (a && b) arvo epätosi
|| looginen or-operaattori (a || b) arvo tosi
! negaatio !(a && b) arvo tosi

5.4.4 Binääriset operaattorit

Operaattori Selitys Esimerkki
(a=2 ja -b=3)
|binäärinen or - suorittaa loogisen or-operaation kokonaislukuoperandiensa binäärimuotojen vastinbiteille (a | b) arvo 3
^binäärinen xor (poissulkeva or) (a ^ b) arvo 1
~ binäärinen negaatio, vaihtaa luvun binääriesityksen nollat ykkösiksi ja päinvastoin (~a) arvo -3 ja (~b) arvo -4
<< binäärinen siirto vasemmalle, siirtää ensimmäinen operandin binäärimuotoisessa esityksessä bittejä toisen operandin ilmoittaman määrän, täyttää oikealta 0-biteillä (a << 1) arvo 4
>> binäärinen siirto oikealle, siirtää ensimmäinen operandin binäärimuotoisessa esityksessä bittejä toisen operandin ilmoittaman määrän, täyttää vasemmalta 0-biteillä, jos luku on positiivinen luku, 1-biteillä jos se on negatiivinen luku (säilyttää luvun etumerkin) (a >> 1) is 1
>>> binäärinen siirto oikealle, täyttö 0-biteillä, muuten sama kuin edellä, mutta täyttö vasemmalta aina 0-biteillä (a >>> 1) arvo 1

5.4.5 Sijoitusoperaatorit

Operaattori Selitys Esimerkki
= arvon sijoitus c = a + b antaa lausekkeen a+b arvon muuttujalle c
+= lisää oikean operandin arvon vasemman operandin arvoon c += a <=> c = c + a
-= vähentää oikean operandin arvon vasemman operandin arvosta c -= a <=> c = c - a
*= kertoo vasemman operandin arvon oikean operandin arvolla c *= a <=> c = c * a
/= jakaa vasemman operandin arvon oikean operandin arvolla c /= a <=> c = c / a
%= korvaa vasemman operandin arvon jakolaskun vasen/oikea jakojäännöksellä c %= a <=> c = c % a

5.4.6 Erityiset operaatorit

Kielessä on edellisen lisäksi seuraavat erityiset operaattorit

Operaattori Selitys Esimerkki
? : ehdollisuusoperaattori (?) evaluoi ensimmäisen operandinsa arvon, jos arvo on true, koko lausekkeen arvo on toisen operandin arvo, jos false, arvo on kolmannen operandin arvo ehto?arvo1:arvo2
Jos ehto on tosi, lausekkeen arvo on arvo1, muuten arvo2
typeof unaarinen operaattori; lausekkeen arvo on operandin tyyppi merkkijonona annettuna typeof luku1
lausekkeen arvo "number" jos muuttujassa oli luku; muut mahdolliset arvot ovat: "string", "function", "boolean", "object"
, pilkkuoperaattori (,) evaluoi molemmat operandinsa ja palauttaa lausekkeen arvona toisen operandin arvon i++, j++
kasvattaa molempien operandiensa arvoa lausekkeen itsensä arvo on j (ennen kasvatusta)
delete unaarinen operaattori, tuhoaa operandinsa, joka voi olla olio, olion ominaisuus tai taulukon solu; tuhottu kohde on onnistuneen tuhoamisen jälkeen undefined ja lausekkeen arvo on true, jos tuhoaminen ei onnistunut, lausekkeen arvo on false delete olio; delete olio.ominaisuus; delete taulukko[i];
in palauttaa arvon true, jos ensimmäinen operandi (ominaisuus) on toisen operandin (olio) ominaisuus length in mjono
arvo on true, jos mjono on String-olio, jolla on ominaisuus lenth
instanceof X palauttaa arvon true, jos ensimmäinen operandi (olio) on toisen operandin (tietotyyppi) pohjalta luotu olio var auto = new String("Lada");
lausekkeen auto instanceof String
arvo on true
new unaarioperaattori olion luontiin jonkin itsemääritellyn tai ennalta määritellyn oliotyypin mukaisesti. var olio = new Date(2013,4,26);
this unaarioperaattori jonka arvona on nykyinen olio; yleensä käytetään metodin sisällä kun halutaan viitata kutsuvaan olioon this.ominaisuus1
void unaarioperaattori, jota käytetään kun halutaan evaluoida lauseke, ilman että lausekkeelle annetaan arvoa void (lauseke)

5.5 Lauseet (kontrollirakenteet)

Seuraavassa eisitellään lyhyesti JavaScriptissä käytössä olevat kontrollirakenteet, kielen lauseet. Erota lauseet toisistaan puolipisteellä.

Aluksi todettakoon, että peräkkäiset lauseet voidaan sitoa lohkolauseeksi käyttäen aaltosulkuja ( { } ). Tätä mahdollisuutta käytetään erityisesti silmukoiden yhteydessä sitomaan toistettavat lauseet yhdeksi toistettavaksi lohkolauseeksi. Huomaa, että muuttujien paikallisuus tarkoittaa paikallisuutta funktion sisällä, ei lohkolauseen sisällä. Vaikka muuttuja olisikin esitelty lohkolauseen sisällä, se on näkyvissä senkin ulkopuolella koko funktiossa.

5.5.1 if-lause

if-ehtolauseen avulla voidaan asettaa ehto, jonka perusteella valitaan mikä lause (voi olla lohkolause, jolloin lauseita voi olla useita) suoritetaan.

 if (ehtolauseke) 
   lause
 [lelse 
   lause]

Kuten muissakin kielissä, ehtolauseita kirjoittaa sisäkkäin

var ika;
. . .
  if (ika<10) {
    document.write("lapsi");
    //ehkä muitakin lauseita
  }
  else if (ika <30) {
  	document.write("nuori");
  	//ehkä muitakin lauseita
  }
  else if (ika <65) {
  	document.write("aikuinen");
  	//ehkä muitakin lauseita
  }
  else document.write("seniori");

5.5.2 switch-lause

switch-ehtolausekkeessa määritellään lauseke, jonka arvon perusteella voidaan määrittää mistä lähtien lauseen sisään kirjoitetut lauseet suoritetetaan. break-lause katkaisee lauseiden suorituksen ja kontrolli siirtyy pois switch-lauseesta.

switch (lauseke) {
  case arvo1: lause;
             [lause;]*
              break;
  case arvo2: lause;
             [lause;]*
              break;
   ...
  case arvon: lause;
             [lause;]*
              break;
  default: lause;
}

Esimerkiksi:

switch (luku) {
  case 10: alert("Luku on 10");
            break;
  case 20: alert("Luku on 20");
            break;
  default: alert("Ei ollut luku 10 eikä 20, ei.")
}

5.5.2 while-silmukka

while-silmukan avulla voidaan asettaa ehto, jonka voimassa olllessa silmukan lauseita suoritetaan: "niin kauan kun"

while (ehtolauseke)
   lause
   [;lause]*

Esimerkiksi:

var i=10;
while (i>0) {
    document.write(i+"\n");
    i--;
}

5.5.4 do...while-silmukka

do...while -silmukka on kuten while-silmukka edellä, mutta ehto tarkistetaan aina sen jälkeen kun silmukan lauseet on suoritettu. Tällöin lauseet tulee aina suoritetuksi ainakin kerran.

do{
  lause
  [;lause]*
} while (ehtolauseke);

5.5.5 for-silmukka

for -silmukan avulla voidaan aloituslause suoritus, lopetusehto ja silmukkamuuttujan arvon muutos jokaisella silmukan kierroksella määritellä suoraan lauseen esittelyssä seuraavasti.

for (aloituslause; lopetuslause; silmukkamuutujan muutos){
   lause
  [;lause]*
}

Esimerkiksi:

for (var i=0; i<10; i++)
  document.write(taulu[i,j])
}

5.5.6 for...in -silmukka

for...in -silmukan avulla käydään läpi olion kaikki ominaisuudet. Silmukan lauseet suoritetaan kullekin ominaisuudelle erikseen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>for...in -esimerkki</title>

</head>
<body>
  <h1>Opetellaan JavaScriptiä - 6 </h1>
  <p> 
    Käydään läpi asiakastiedot ja muodostetaan niistä
    merkkijono. 
  </p> 
  <p> 
    Tuloksena on: 
    <span id="tiedot-tahan">Ei tietoja.
  </p>
    <script>
      var tieto;
      var asiakasTiedot = "";
      var asiakas={etunimi:"Aarne",sukunimi:"Asiakas",ika:30};
      for (tieto in asiakas)
        asiakasTiedot = asiakasTiedot + asiakas[tieto] + " ";
        document.getElementById("tiedot-tahan").innerHTML =
        asiakasTiedot;
  </script></body>
</html>

Esimerkki www-sivuna

Yllä olevassa esimerkissä, ennen kutakin silmukan kierrosta muuttuja tieto saa arvokseen olion asiakas ominaisuuden. Silmukkaa toistetaan, kunnes olion kaikki kolme ominaisuutta on käyty läpi, ja ne on yhdistetty yhdeksi merkkijonoksi.

Esimerkissä tutustutaan myös kahteen uuteen monikäyttöiseen DOM-rajapinnan kohteeseen: document-olion metodiin getElementById ja DOM-solmun ominaisuuteen innerHTML.

Aiemmin olemme tutustuneet jo yhteen document-olion metodiin, funktioon write. Toinen voimakas document-olion metodi on getElementById. Sen avulla voi noutaa minkä tahansa yksittäisen elementin, jolle on annettu attribuutti id. Tässä tilanteessa funktion avulla haettiin <span>-elementti tunnuksella "tiedot-tahan".

Toinen käytetty DOM-funktio, innerHTML jäsentää merkkijonon (tässä esimerkissä merkkijonomuuttujan asiakasTiedot sisällön) ja korvaa solmun (tässä <span>-elementti) sisällön jäsennetyllä sisällöllä.

5.5.7 break ja continue

break-lausetta käytettiin jo edellä switch-lauseen yhteydessä, sen avulla suoritus määrättiin siirtymään ulos lauseesta. break-lauseen avulla voidaan tulla ulos mistä tahansa lauselohkosta. continue lausetta käytetään silmukan sisällä määräämään, että suoritus siirtyy välittömästi testaamaan silmukkaehdon voimassaolemista, ja mikäli se vielä täyttyy, silmukan lauseiden suoritusta jatketaan seuraavan kierroksen alusta.

5.6 Funktiot

Sekvenssi lauseita voidaan sulkea funktioksi, jolle annetaan nimi. Tällöin lauseet saadaan suoritetuksi mistä tahansa kohdasta, jossa funktiota kutsutaan. Funktion kutsua voidaan siis toisaalta ajatella lauselohkona, joka suoritetaan funktion kutsulla.

Funktioon voidaan syöttää kutsukohdasta arvoja parametrien avulla. Funktio esitellään käyttäen varattua sanaa function. Funktion parametrit luetellaan pilkulla eroteltuna funktion-nimen jälkeen sulkeissa. Sulkeet kirjoitetaan, vaikka funktiolla ei olisikaan parametreja, sulkeiden väliin ei silloin kirjoiteta mitään.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asiakastietojen käsittely</title>
</link>
  <script type="text/javascript">
    function asiakas(mj1, mj2, luku) {
      this.etunimi = mj1; 
      this.sukunimi  = mj2;
      this.ika = luku; // vie metodi ominaisuudeksi 
    } 
    function muodostaAsiakasTiedot(tamaAsiakas){
      var tieto;
      var asiakasTiedot = "";
      for (tieto in tamaAsiakas)
        asiakasTiedot = asiakasTiedot + tamaAsiakas[tieto] + " ";
      return asiakasTiedot;
    }
  </script></head>
<body>
  <h1>Opetellaan JavaScriptiä - 7 </h1>
  <p> 
    Käydään läpi asiakastiedot ja muodostetaan niistä
    merkkijono. 
  </p> 
  <p> 
    Tuloksena on: 
    <span id="korvaa-tama">Ei tietoja.</span>
  </p>	
  <script type="text/javascript">
    var asiakas1 = new asiakas("Kalle", "Kuluttaja", 28);
    var str1 = muodostaAsiakasTiedot(asiakas1); 
      document.getElementById("korvaa-tama").innerHTML=str1;
  </script>
</body>
</html>

Esimerkki www-sivuna

5.7 Valintaikkunat

JavaScriptissä on toteutettu kolme valitaikkunatyyppiä; alert, confirm ja promt. Ne kaikki ovat modaalisia ikkunoita, jotka aukeavat pop up-tyyppisesti selainikkunan päälle. Niiden poistaminen ja selaimen käyttämisen jatkaminen vaativat käyttäjältä jotain toimintaa, hiiren napsauttamista tai syötteen antamista.

alert-ikkuna on tarkoitettu viestien ja (virhe)ilmoitusten antamiseen. Sen avulla voi tulostaa merkkijonon, ja sitä tuleekin usein käytetyksi sivujen rakennusvaiheessa skriptien jäljittämiseen. Seuraavassa esimerkissä tulostettava merkkijono on rakennettu JavaScriptin merkkijonojen konkatenaatio-operaattorilla +. img/05-js-valintaikkuna-alert.png

alert("asiakas.etunimi on nyt: " + asiakas.etunimi)

confirm-ikkunan avulla käyttäjälle voi esittää kysymyksen, johon käyttäjä voi vastata joko ok tai cancel. Jos vastaus on "ok", funktio palauttaa arvonaan kutsukohtaan totuusarvon true, jos taas "cancel" funktion arvona palautuu false. img/05-js-valintaikkuna-confirm.png

if (confirm("Haluatko jatkaa?")==true)
   alert("Okei, jatketaan!)
else alert("Hyvä on, lopetaan.");

prompt-ikkunan avulla käyttäjältä voidaan pyytää syötettä tekstikenttään. Valintaikkunassa on myös ok ja cancel -painikkeet. Jos käyttäjä painaa ok, funktio palauttaa syötetyn arvon, jos cancel, palautetaan null. img/05-js-valintaikkuna-prompt.png

var nimi = prompt("Kirjoita tähän nimesi:","Matti Malliesimerkki")
alert("Hyvää päivää " + nimi + " nimi");

5.8 Tapahtumat ja tapahtumankäsittelijät

Edellisissä esimerkeissä skriptipalat suoritettiin aina dokumentin latautuessa selaimeen, ts. ne oli kirjoitettu sivulle ns. inline-skripteinä. JavaScriptin varsinainen hyöty ja käyttökelpoisuus saadaan kuitenkin tapahtumien (event) ja niihin JavaScript-funktioina itse kirjoitettujen tapahtumankäsittelijöiden (event handler) kautta. Tapahtumankäsittelijöiksi kirjoitettujen funktioiden tulee jollain tavalla saada tieto tapahtumista.

Kun käyttäja tekee jotain sivulla, selain rekisteröi sen tapahtumana. Yksinkertaisin tällainen tapahtuma voisi olla esimerkiksi hiiren napsautus; se rekisteröidään tapahtumaksi onclick. Jos hiiren napsautus tapahtuisi esimerkiksi kuvan päällä, tapahtumankäsittelijä voitaisiin yhdistää <img>-elementtiin seuraavasti

<img href="kuvan osoite" onclick="kasittelijaFunktio(parametrit)">

Alla on lueteltu onclick-tapahtuman lisäksi muutamia yleisimpiä tapahtumia, mutta tämä lista ei ole täydellinen. Täydellisemmän tapahtumaluettelon löydät esimerkiksi osoiteesta HTML 5 Event Handler Content Attributes

Ellei muuta mainita, seuraavat tapahtumankäsittelijät on mahdollista liittää mihin tahansa HTML-elementtiin, tai DOM-oliohin document ja window.

Attribuutti Kuvaus
onchange Poistutaan elementistä, jota on muokattu.
onclick Elementtiä napsautettu.
ondblclick Elementtiä kaksoisnapsautettu
ondrag Raahataan elementtiä.
ondragend Raahaus lopetettiin.
ondragenter Raahattava elementti tiputettiin kohteeseen.
ondragleave Tapahtuu, jos elementti raahataan pois validin kohteen päältä.
ondragover Tapahtuu kun elementti raahataan validin kohteen päälle.
ondragstart Tapahtuu, kun raahaus alkaa.
ondrop Elementii tiputetaan raahauksen jälkeen.
ofocus Elementti aktivoitu (vain document ja body)
oninput Syötteen käsittelijä
onkeydown Näppäimen alas painaminen
onkeypress Näppäimen painallus (alas painaminen ja vapautus)
onkeyup Näppäimen vapautus
onload Lataus tehty (vain document ja body)
onmousemove Kursori liikahti elementin päällä ollessaan
onmousedown Kursori siirtyi elementin päälle ja hiiren painike painettiin alas.
onmousemove Kursori liikahti elementin päällä ollessaan
onmouseout Kursori poistui elementistä
onmouseover Kursori tuotiin elementin päälle (ongelmallinen kosketusnäytöissä)
onmouseup Hiiren painike vapautettiin elementin päällä/td>
onmousewheel Hiiren rullaa käytettiin
onscroll Vieritys tapahtunut (vain document ja body)
onsubmit Lomakkeen "submit"-painikkeen painallus.

Yllä kuvattu tapa yhdistää tapahtumat tapahtumankäsittelijöihin on se perinteinen ja yksinkertaisin tapa joka on ollut käytössä JavaScriptin alkuajoista lähtien.

Nyttemmin JavaScriptin tapahtumankäsittelyyn on olemassa monipuolempiakin tapoja. Niitä ei kuitenkaan ole tämän kurssin puitteissa mahdollista käsitellä, aiheesta lähemmin kiinnostueita kehoitetaan lukemaan seuraavat Peter-Paul Kochin artikkelit:

6 DOM (Document Object Model)

Kun selain lähtee hahmontamaan HTML-dokumenttia www-sivuksi, se samalla tallentaa sivun DOM-puuksi (vrt. alustava DOM esittely), johon tallentuu kaikki tieto sivun elementeistä, niiden attribuuteista ja sisällöstä. DOM on W3C:n starndardoima rajapinta sivun sisältöön. DOM-puun kautta JavaScript "pääsee kiinni" sivun sisältöön; se tarjoaa mahdollisuuden sivun dynaamiseen, vuorovaikutteiseen, muokkaukseen tai täysin uudenkin sisällön tuomiseen sivulle.

WWW-sivusta luotu puu koostuu solmu-olioista (Node objects), puun juurisolmu on document-solmu, muita solmutyyppejä ovat esimerkiksi elementti-, attribuutti- tai teksti-solmuja.

6.1 Viittaus sivun elementtiin

DOM-puun kaikki solmu-olioilla on kolme yhteistä ominaisuutta:

Tarkastellaan esimerkkinä yksinkertaista sivua:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Otsikko</title>
</head>
<body>
    <h1 class="palkki">MY: Meidän Yritys</h1>
    <p>Tervetuloa Meidän Yritykseen!</p>
    <p>MY tuotteet:</p>
    <ul>
      <li id="eka"><a href="tuote1.html">Päätuote</a></li>
      <li id="toka"><a href="tuote2.html">Kakkostuote</a></li>
      <li id="kolmas"><a href="tuote3.html">Kolmostuote</a></li>
    </ul>
    <form method="post" action="osoite">
      <div>
        <label for="tuote-nimi">Minkä tuotteen haluat tilata:</label>
        <input type="text" name="tuote-nimi" id="tuote-nimi" />
        <input type="submit" name="osta" value="Osta" />
      </div>
    </form>
</body>
</html>

Helpoin tapa viitata elementtiin sivulla on käyttää sen id-attribuuttia ja DOM-metodia getElementById("id-tunnus"). Palautuva arvo on tyypiltään joku solmu, tyypin voi tarkastaa tulostamalla haetun arvon merkkijononona. img/06-dom-getElementById.png

var e = document.getElementById("eka");
alert("e: " + e + 
      "\ntyyppi:" + e.nodeType + 
      " nimi: " + e.nodeName + 
      " arvo: " + e.nodeValue);

Toinen tapa viitata elementtiin on käyttää sen html-elementtinimeä metodilla getElementsByTagName"("elementti"). Tällöin funktio palauttaa yhden elementti-solmun (Node-olion) sijasta listan solmu-olioita (NodeList) jonka oliotyyppi on HTMLCollection. Listan yksittäisiin solmuihin voi viitata taulukkomaisella indeksoinnilla: hakasulut, ensimmäinen solmu indeksillä 0. Kun käy läpi solmulistaa, esimmäisen solmun lisäksi on tarpeen tietää listan pituus, ts. solmujen lukumäärä. Se on tallennettu solmulistan ominaisuuteen length. Siten solmulistan elem ensimmäinen solmu on elem[0] ja viimeinen elem[elem.length-1]. img/06-dom-getElemenstByTagName.png

var es = 
  document.getElementsByTagName("p");
  alert("es: " + es + 
    "\nSolmulistan ensimmäisen elementin" +
    "\ntyyppi:" + es[0].nodeType + 
    " nimi: " + es[0].nodeName + 
    " arvo: " + es[0].nodeValue);

Kuten edellisistä esimerkeistä kävi ilmi, sekä getElementById() että getElementsByTagName() ovat DOM-olion (tai täsmällisemmin, DOM-liittymän) document metodeja. Sen kautta voit esimerkiksi luoda uutta tekstisisältöä sivulle createTextNode tai luoda uuden attribuuttisolmun (vienti elementille Node-olion setAttributeNode(element)-metodilla). Yksityiskohtaisemmin document-liitymään voit tutustua Sen W3C:n document-liittymän spesifikaatiosta

6.2 Solmujen keskinäiset suhteet

Kun olet onnistunut viittaamaan johonkin DOM-puun elementeistä, pääset sen kautta kiinni mihin tahansa sivun muista elementeistä. Kaikilla solmuilla on seuraavat ominaisuudet:

Seuraavat JavaScript-lauseet tuottaisivat alert-ikkunaan tekstin "Kakkostuote", koska <li>-elementin ensimmäinen lapsi on <a>-elementti, jonka ensimmäinen lapsi on teksti-solmu ja edelleen, tekstisolmun arvo on merkkijono "Kakkostuote".

var e = document.getElementById("toka");
alert(e.firstChild.firstChild.nodeValue);

6.3 DOM-ongelmista

Edelliset esimerkit ehkä osoittivat, että vaikka elementtien noutaminen DOM-puun kautta on mahdollista, se ei ole kovin intuitiivista ja helppoa.

Alustavassa DOM-esittelyssä kerrottiin, että DOM-puuhun tulee itse asiassa tallennettua muutakin kuin vain hierarkinen html-dokumentissa esitellyistä elementeistä koostuva puun solmuhierarkia. Sinänsä välttämätön sivun sisällön (tekstit, kuvat, jne.) ottaminen mukaan DOM-puuhun, on siemen ongelmille. Rakentaessaan DOM-puuta selaimet tulkitsevat tyhjätilamerkit eri tavoin jotkut selaimet ohittavat ne, toiset tekevät niistä oman DOM-solmunsa.

Selainten tulkinta DOM-puun rakentamiseksi toivottavasti tarkentuu ajan myötä, mutta toistaiseksi turvallisen JavaScript-koodin kirjoittaminen vaatii aikaa tarkastaa miten pääselaimet joissain erikoistilanteissa rakentavat oman DOM-puunsa. Mieluummin tietysti käyttäisi aikansa miellyttävien, vuorovaikutteisten sivujen suunnitteluun, sen sijasta että kirjoittaa vaihtoehtoisia skriptejä eri selaimille.

Tämän lisäksi, viittaaminen sivun kohteisiin vaikuttaa monimutkaiselta, kun otetaan huomioon, että CSS:ään on jo toteutettu selkeät ja yksikäsitteiset valitsimet.

Ratkaisuna näihin ongelmiin on kehitelty monia eri JavaScript-kirjastoja. Jos käytämme JavaSciptiä jonkun yleisesti hyvälaatuiseksi todetun javaScript -kirjaston kautta, nämä perustason ongelmat on niissä valmiiksi ratkaistu.

jQuery (http://jquery.com/) esimerkki yhdestä tällaisesta skriptikirjastosta.

Käytetyistä merkinnöistä

sininen väri
sininen väri merkitsee html-koodia
vihreä väri
sininen väri merkitsee javascript-koodia
keltainen väri
keltainen väri merkitsee css-koodia
[]
hakasulkuja käytetään ryhmittelyyn, ne itse eivät kuulu sisältöön
[XXX]
0 tai 1, ts. hakasuluissa oleva sisältö XXX voi puuttua tai esiintyä kerran
[XXX]*
0 tai n, ts. hakasuluissa oleva sisältö XXX voi puuttua, tai toistua useamman kerran
[XXX]+
1 tai n, ts. hakasuluissa oleva sisältö XXX voi puuttua tai esiintyä kerran
|
erottaa vaihtoehdot, esim "a|b", tarkoittaa, että ko. kohdassa voi olla joko "a" tai "b"
uusi HTML5:ssa
muuttunut HTML 4 -tulkinnasta
anytag
minkä tahansa HTML5-elementin alkutunnus
alleviivaus
oletus-arvo, esim. <form autocomplete="on|off"> jos autocomplete-attribuuttia ei ole annettu, oletusarvo on "on".