Tähän mennessä kuvamääritelmäsi pitäisi näyttää suunnilleen tältä:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Kuvaelementtiin voidaan (ja pitäisi) kuitenkin liittää joitain attribuutteja. Aluksi on alt. Tämässä määritelty teksti näytetään selaimessa, jos kuvaa ei - mistä tahansa syystä - voitu ladata.
Valitettavasti alt-attribuutin yhteydessä ilmenee usein väärinkäsityksiä. Alt-attribuutti palvelee todellakin vain tilanteessa, jossa kuvaa ei näytetä. Jotkut selaimet kuitenkin näyttävätkin alt-attribuutin arvon työkaluvihjeikkunassa, kun kuvan päälle pysähtyy hiirellä.
Tämä käyttäytyminen on väärin. Työkaluvihjeisiin tarkoitettu attribuutti on pikemminkin title. Asiaankuuluva määritelmä näyttäisi tältä:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de -logon kuvaus" />
Tässä tapauksessa title-arvo peittää alt-arvon.
Kokoilmoitukset
HTML:ssä paljon on jo nykyään ratkaistu CSS:llä eikä enää attribuuteilla. Kokoilmoitusten määritys ei kuitenkaan kuulu tähän. Korkeus ja leveys määritellään edelleen kahden attribuutin, width ja height, avulla. Taas esimerkki:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de -logon kuvaus" width="200" height="150" />
Jos et anna yksikköä width- tai height-attribuutille, selain tulkitsee numerot pikseleinä. Aikaisemmassa esimerkissä kuva on siis 200 pikseliä leveä ja 150 pikseliä korkea. Prosentteja voi myös käyttää.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de -logon kuvaus" width="20%" height="15%" />
Prosenttimäärät viittaavat käytettävissä olevaan näytön tilaan. Jos kokoilmoituksia ei anneta, selaimet näyttävät kuvat alkuperäisessä koossa.
Kuvat ja tekstikappaleet
Kun sijoitat kuvia virtaavan tekstin yhteyteen, sinun tulee olla varovainen.
<p><img src="logo.png" alt="" width="180" height="150" /> Tämä teksti näkyy kuvan vieressä.</p>
img on niin kutsuttu sisältyvä elementti. Kuvia voidaan siis sijoittaa suoraan tekstiin. Jos kuva on korkeampi kuin rivikorkeus, selain tasaa tekstin rivillä. Oletusarvoisesti tekstin kohdistus tapahtuu alareunasta kuvan suhteen.
Tekstin kohdistusta voi vaikuttaa vanhemmissa HTML-versioissa käytössä ollut align-attribuutti. Älä käytä sitä enää, koska se on poistettu HTML5-standardista. Käytä sen sijaan CSS:n tarjoamia mahdollisuuksia. Näin voit esimerkiksi kiertää kuvan tekstistä.
Pitkä kuvaus
HTML antaa mahdollisuuden lisätä kuvalle yksityiskohtainen kuvaus. Tämä on aina hyödyllistä, kun kuvalle tarvitaan todellisia selityksiä. Voit tallentaa lisätiedot eri paikkoihin ja viitata niihin.
Lisätiedot voivat olla eri paikoissa.
<img src="kuva1.png" alt="Kaavio 1" title="Kaavio 1" longdesc="#kaavio" />
Oletetaan, että sivustolla on alue, jolla on tunniste kaavio.
Yleisimmin käytetty tapa saattaisi olla se, jossa tiedot tallennetaan ulkoiseen tiedostoon.
<img src="kuva1.png" alt="Kaavio 1" longdesc="kaavio1.htm" />
Tässä kuitenkin vielä tökkii selainten tuki. Lisäksi tämän attribuutin käyttö vaikuttaa siihen, miten selainten valmistajat voivat toteuttaa sen vaivattomasti.
Ongelmana on, että esimerkiksi Firefoxissa tämä ei ole todella hieno tai itsestään selvä. Jos kuvaan on lisätty longdesc-attribuutti, tavalliset sivustokävijät eivät aluksi havaitse sitä. Heidän täytyy sen sijaan klikata kuvaa hiiren oikealla painikkeella.
Ponnahdusvalikossa on sitten kohta Näytä kuvaus. Kun tätä napsautetaan, longdesc-attribuutissa määritetty lisätiedot tulevat näkyviin. Kuten sanottu, tämä toimii tässä Firefoxissa, mutta se ei ole varmasti eleganttia.
Opera on muuten ratkaissut asian hyvin samalla tavalla. Kun napsautat kuvaa tässä selaimessa hiiren oikealla painikkeella, näet Pitkä kuvaus -kohdan.
Tämä vie sitten annettuihin lisätietoihin.
WC3 ehdottaa lisäksi pitkän kuvauksen määrittämistä Data-URL:in muodossa.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Mikäli ette ole vielä kokeneet näiden Data-URL:ien käyttöä, löydätte kattavat tiedot osoitteesta http://de.wikipedia.org/wiki/Data-URL.
Määrittele kuvaukset kuville
Aikaisemmin HTML:ssä ei ollut mahdollisuutta määritellä kuvatekstejä ja kuvaryhmiä. Tämä seikka on kuitenkin muuttunut HTML5:ssä. Uusina elementteinä on esitelty figure ja figcaption.
Ennakoidakseni: figurea ei ole tarkoitettu ainoastaan grafiikoiden yhteyteen. Itse asiassa elementtiä voidaan käyttää kaikentyyppisten dokumenttien täydentämiseen. Tämä voi kuvien lisäksi olla esimerkiksi kaavioita, koodiesimerkkejä ja videoita.
Lisäksi on olemassa elementti figcaption. Sen avulla voi varustaa sisällön, joka ei ole tietyille käyttäjäryhmille luettavissa, vaihtoehtoisella kuvauksella.
Tässä esimerkki figure- ja figcaption-elementtien käytöstä:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Tämä on uusi logomme.</figcaption> </figure>
Selaimessa näet seuraavat tulokset:
Miten selaimet käsittelevät näitä kahta elementtiä, jää loppujen lopuksi niiden päätettäväksi. Periaatteessa voit kuitenkin vaikuttaa ulkoasuun jälleen CSS:n avulla.figure-elementin sisällä voit lisätä mielivaltaisen määrän kuvia tai muita elementtejä. Kuitenkaan figure-elementissä saa olla vain yksi figcaption-elementti. Tässäkin on esimerkki:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Tämä on uusi logomme.</figcaption> </figure>
Tällä tavoin voit lisätä useita kuvia yhteen figure-elementtiin.
Erityisesti HTML5 tarjoaa runsaasti uusia mahdollisuuksia verkkosivustojen ja sisältöjen loogiseen rakenteeseen. Näitä uusia ominaisuuksia tulet tietenkin oppimaan tämän sarjan aikana yksityiskohtaisesti.
