WWW-julkaiseminen-kurssin FAQ

Tälle sivulle muodostuu ajankuluessa WWW-julkaiseminen-kurssin FAQ.

Kurssin sivustoon liittyvät kysymykset

Saanko käyttää kurssin lomakkeenkäsittelyohjelmia (CGI, PHP) muilla kuin harjoitustyösivuilla?

Et saa ilman lupaa.

Millä ohjelmalla kurssin videomateriaalia saa katsottua?

Windows Media Player 9-12:llä. Tarkemmin asiasta tietoa osoitteessa http://appro.mit.jyu.fi/doc/video/.

Harjoitustyöhön liittyvät kysymykset

Mihin palvelimeen otan yhteyttä?

jalava.cc.jyu.fi ja halava.cc.jyu.fi -palvelimien html-hakemistoon siirretyt tiedostot näkyvät osoitteessa:

http://users.jyu.fi/~omatunnus/

Miksi .htaccess-tiedosto ei näy SSH File Transferissa?

Kaikki .-alkuiset tiedostot ovat piilotiedostoja. Nämä saa näkyviin SSH File Transferissa valinnalla View | Show Hidden Files.

Saanko käyttää harjoitustyössä PHP:tä?

Voit käyttää, mutta huomioi harjoitustyön teknisissä vaatimuksissa olevat kohdat. PHP:n käyttäminen tapahtuu täysin omalla vastuulla, eivätkä kurssin opettajat neuvo PHP-ongelmissa.

Miten teen harjoitustyössä tarvittavan lomakkeen käsittelyohjelman?

Ohjelmaa ei tarvitse tehdä, vaan käytät Petri Heinosen, Tommi Lahtosen ja Jukka Mäntylän kurssia varten tekemää CGI-ohjelmaa. Tarvittavan tunnuksen ja salasanan ohjelman käyttöön löydät Korpista kurssille ilmoittauduttuasi.

Miten saan tehtyä toista kieltä olevia dokumentteja, esimerkiksi venäjää tai kiinaa?

  1. Käyttöjärjestelmään (Windows) on asennettava ensin kyseisen kielen tuki, jolloin näppäimistöltä saadaan oikeanlaisia merkkejä aikaiseksi. Mikroluokissa kielen saa valittua tehtäväpalkissa olevasta kielenvalinta-painikkeesta.
  2. XHTML-dokumentille on valittava sellainen merkistö, joka tukee kyseisen kielen merkkejä. Hyvä valinta monia kieliä varten on Unicode-standardi UTF-8. Oletusmerkistön voi vaihtaa esimerkiksi jEditissä valinnalla Utilies | Global Options | General | Default character encoding. Dokumenttia avattaessa merkistön voi päättää suoraan valinnalla Commands | Encoding.
  3. Editorin fontti on vaihdettava sellaiseksi, jossa kyseisen kielen merkit näkyvät. jEditissä fontin voi vaihtaa valinnalla Utilities | Global Options | Text Area | Text font. Esimerkiksi kiinaa voisi kirjoittaa fontilla SimSun.
  4. XHTML-dokumenttiin on määriteltävä oikeat määreet kieliasetuksille. xml-deklaraatioon pitää määrätä oikea merkistö, näissä tapauksissa esimerkiksi
    <?xml version="1.0" encoding="UTF-8" ?>

    Lisäksi html-elementtiin on määrättävä millä kielellä teksti on kirjoitettu. Esimerkiksi:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

    tai

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

    Mikäli tekstin kieli vaihtuu kesken dokumentin, niin oletuskielestä poikkeava lohko on merkittävä erikseen xml:lang-attribuutilla varustettuna. Esimerkiksi:

    <p xml:lang="en">This is a paragraph in English</p>
  5. Lopuksi eri kieliversiot voi tallentaa samaan hakemistoon nimillä, jotka ovat muotoa
    index.[kielimääre].html

    ja tämän jälkeen määrätä palvelinta palauttamaan hakemistosta sen kielinen dokumentti, joka on määrätty selaimen kieli-asetuksessa (toimii kaikissa uusissa selaimissa, myös IE:ssä).

Mitä teen, jos en ehtinyt palauttaa harjoitustyön suunnitelmaa ajoissa lähiopetuskurssilla?

Voit ilmoittautua Korpissa vastaavalle verkkokurssille. Verkkokurssilla harjoitustyön suunnitelmia voi palauttaa ympäri vuoden.

Palvelinasetuksiin liittyviä kysymyksiä

Miksi kielenvalinta ei toimi, mitä pitäisi tehdä?

Tässä ohjeet kielenvalinnan tekemiseksi:

http://appro.mit.jyu.fi/doc/www/apache/kielivalinta/

Jos ongelmia vielä tulee, tarkista seuraavat kohdat:

Miksi harjoitustyöni ei näy WWW:ssä? Miksi viite hakemistoon ei näytä nettisivua?

Harjoitustyöhakemisto pitää siirtää kokonaisuudessaan jalava.cc.jyu.fi-palvelimen html-hakemistoon. Tällöin harjoitustyöhakemisto näkyy osoitteessa http://users.jyu.fi/~tunnus/harkkahakemisto/. Hakemiston sisällä täytyy olla luonnollisesti jokin XHTML-dokumentti, jonka palvelin voi antaa selailijalle. Tavallisesti tämän tiedoston nimi index.html. Hakemistosta annettavan oletustiedoston voi muuttaa toiseksi luomalla harjoitustyöhakemistoon .htaccess-nimisen tiedoston ja kirjoittamalla sinne esimerkiksi komennon:

DirectoryIndex index.var index.shtml index.html index.php

Tässä tapauksessa ensimmäisenä hakemistosta tarjotaan index.var-nimistä tiedostoa, toiseksi index.shtml-nimistä tiedostoa ja niin edelleen.

Miksi salasanasuojaukseni ei toimi?

Todennäköisin syy salasanasuojauksen toimimattomuuteen on väärin määritelty polku käyttäjätunnustiedostoon:

AuthUserFile /foo/bar/tunnus/.users

Salasanasuojausohje

Internet Explorer herjaa The XML page cannot be displayed?

Ongelmana ovat .shtml-tiedostot, jotka Apache-palvelin lähettää tavallisesti text/xml-tyyppisenä. IE pyrkii näyttämään tämän perusteella nettisivun XML-dokumenttipuuna, mutta ei onnistu siinä ja herjaa. Ongelma korjaantuu, kun harkkahakemiston sisällä olevaan .htaccess-tiedostoon kirjoittaa rivit:

AddHandler Server-Parsed .shtml
AddType text/html .shtml

Internet Explorer näyttää sivun lähdekoodina

Ongelmana ovat .shtml-päätteiset xhtml-tiedostot, jotka Apache 2 -palvelin lähettää tavallisesti text/xml-tyyppisenä. IE pyrkii näyttämään tämän perusteella nettisivun pelkkänä XML-dokumenttipuuna. Ongelma korjaantuu, kun harkkahakemiston sisällä olevaan .htaccess-tiedostoon kirjoittaa rivit:

AddHandler Server-Parsed .shtml
AddType text/html .shtml

Katso myös demo 7.

Ohjaan monikieliset sivut omiin hakemistoihinsa. Miksi linkkini menevät rikki?

Apachen type-map ei ohjaa selainta alihakemistoon, vaan antaa .var-tiedostossa (tai muussa sellaisessa) määritellyn tiedoston selaimelle. Selaimen URL pysyy edelleen samana. Mikäli nyt viittaukset ovat suhteellisia alihakemistoon nähden, niin linkit menevät rikki. Paras tapa on sijoittaa monikieliset sivut samaan hakemistoon. Toinen vaihtoehto on muuttaa alihakemistossa olevan sivun viitteet osoittamaan suhteessa siihen hakemistoon, joka jää selaimen URL:iin. Tällöin sivustolla ei saa olla suoraa linkkiä alihakemistoon.

Edelleenohjaus herjaa Internal Server Erroria ja tekee loputtoman ohjauksen. Miten voin ohjata hakemiston alihakemistoon?

Edelleenohjaus tapahtuu selaimesta saadun osoitteen loppuosan perusteella, kun alusta otetaan pois palvelimen nimi ja protokolla (esim. http://users.jyu.fi/). Jos nyt ohjaus tapahtuu hakemistosta alihakemistoon, niin selain joutuu edelleenohjauskierteeseen, jossa hakemistonpolun alkuosa korvautuu aina uudelleen, kunnes palvelin päättää pistää pelin poikki. Ratkaisu ongelmaan on ohjata vain jokin tietty yksittäinen tiedosto kyseisen hakemiston alihakemistoon. Esim.

Redirect permanent /~anjoekon/harkka/testi/index.html http://users.jyu.fi/~anjoekon/harkka/testi/alihakemisto/

Edelleenohjaus antaa Server Errorin (500)! Missä vika?

.htaccess-tiedostoon annettavat komennot pitää laittaa aina yhdelle riville siten, että komento on alussa ja parametrit heti sen jälkeen. Jos pico:lla kirjoittaa liian pitkän rivin, niin se tyypillisesti rivittää sen kahdelle riville, jolloin palvelin ei ymmärrä edelleenohjaavaa komentoa. Käynnistä pico komennolla

pico -w .htaccess

niin rivitystä ei tapahdu. Siirrä edelleenohjaukseen liittyvät kohdat yhdelle riville. Pääteyhteysikkunan koon muuttaminen riittävän isoksi saattaa myös auttaa tähän ongelmaan.

Miksi Nettipoliisi valittaa mediatyypistä? Miksi application/xhtml+xml -määritys ei toimi?

Mikäli WWW-palvelin antaa XHTML-dokumentin mediatyypiksi jotain muuta kuin application/xhtml+xml, niin Nettipoliisi älähtää tästä. Tyypillisesti palvelin antaa tyypiksi text/html tai jotain vastaavaa, vaikka W3C:n suositus on käyttää Nettipoliisin ehdottamaa mediatyyppiä. Asiasta lisää vanhassa demo 8:ssa.

Tietohallintokeskuksen Apache-palvelimella on ongelma mediatyyppimääritysten kanssa. Viitteet hakemistoihin antavat tyypin text/html, vaikka mediatyyppiasetukset olisivatkin .htaccess-tiedostossa kunnossa. Suorat viitteet tiedostoihin ja type-map- asetuksissa määrätyt dokumentit saavat sen sijaan oikean mediatyypin. Tee määritykset edellä mainitun demon 8:n mukaan, mutta älä välitä vaikka tyyppi ei olisikaan aina oikein.

Miksi monet sivustoni linkeistä ovat edelleenohjattuja (301 Moved Permanently)?

Sivustosi on todennäköisesti jaettu kansioihin ja olet laittanut sivuille näihin osoittavia linkkejä. Luultavasti olet kuitenkin unohtanut linkeistä viimeisen kauttaviivan (/), joka kertoo, että linkki todellakin osoittaa kansioon eikä samannimiseen tiedostoon:

<a href="kukkuu">Tämä linkki osoittaa kukkuu-nimiseen tiedostoon</a>
<a href="kukkuu/">Tämä linkki osoittaa kukkuu-nimiseen kansioon</a>

Apache on yleensä säädetty toimimaan niin, että jos halutun nimistä tiedostoa (kukkuu) ei löydy, niin yritetään suoraan vastaavaa kansiota (kukkuu/). Tämä uusi yritys tehdään lähettämällä selaimelle kiinteä uudelleenohjaus eli 301 Moved Permanently.

Kirjoittamalla kansioihin osoittavat linkit oikein nopeuttaa sivuston toimintaa ja vähentää palvelimen rasitusta, koska turha edelleenohjaus jää välistä.

Miksi alihakemistoissani olevat sivut eivät näy etusivun monikielisyysasetuksien jälkeen?

DirectoryIndex-määritys periytyy alihakemistoihin, jolloin viitattaessa hakemistoon palvelin yrittää tutkia hakemistosta index.var-tiedostoa. DirectoryIndex-komennolle voi määritellä myös useampia vaihtoehtoja, jolloin palvelin yrittää annetun järjestyksen mukaan etsiä tiedostoja hakemistoon viitattaessa:

DirectoryIndex index.var index.shtml index.html

Olen laittanut vaikka mitä asetuksia .htaccess-tiedostoon, mutta mikään ei toimi! Missä vika?

Onhan kaikilla lukuoikeus .htaccess-tiedostoon? Onhan .htaccess-tiedosto html-hakemiston alla olevassa harjoitustyöhakemistossa?

XHTML-ongelmat ja ratkaisut

Seuraavassa muutamia XHTML:ään liittyviä ongelmia ja ratkaisuja ongelmiin.

Mitä tarkoitetaan sivustonavigoinnilla ja link-elementeillä?

link-elementeillä voidaan toteuttaa joustava sivuston sisäinen navigointi, jota ovat hyödyntäneet ainakin Mozilla- ja Opera-selaimet. Navigointipalkin saa päälle Mozillassa View | Show/Hide | Site Navigation Bar | Show Always ja Operassa navigointilinkit löytyvät valikosta Navigation | Site Navigation.

link-elementeillä kerrotaan dokumenttien välisistä suhteista sivustolla (esim. hakukoneille ja selaimille). Tavallisin link-elementin käyttötapa on ilmoittaa mitä CSS-tyylitiedostoa sivulla käytetään.

link-elementit sijoitetaan head-elementin sisään. Esimerkiksi:

<head>
<link title="Oletustyyli" rel="StyleSheet" href="/appro2003.css" type="text/css" media="all"/>
<link rev="Made" href="http://www.iki.fi/hazor/" title="Tommi Lahtonen"/>
<link rel="Copyright" href="/copyright.html" title="Copyright Notice"/>
<link rel="First" href="../luento1/" title="XHTML-elementit ja kurssin järjestelyt" />
<link rel="Prev" href="../luento2/" title="CSS (Cascading Style Sheets)"/>
<link rel="Next" href="../luento4/" title="WWW-lomakkeet"/>
<link rel="Start" href="../../" title="WWW-julkaiseminen ITK024"/>
<link rel="Contents" href="../" title="Luennot"/>
<link rel="Parent" href="../" title="Luennot"/>
<link rel="Last" href="../luento12/" title="Luento 1"/>
<link rel="Search" href="/haku/" title="Haku"/>
</head>
First
Kertoo viitteen samassa hakemistossa tai samalla tasolla olevista dokumenteista ensimmäiseen.
Prev
Edellinen samalla tasolla oleva dokumentti (tämä ei siis viittaa edelliseen tasoon, eikä pidäkään toimia kuten selaimen Back-toiminto).
Next
Seuraava saman tason dokumentti (esim. luento, tuote, esittelysivu...).
Last
Viimeinen saman tason dokumentti.
Parent
Edellisen tason dokumentti (esim. yksittäisen tuotteen esittelystä tietyn tuotekategorian luetteloon).
Contents
Viite sisällysluetteloon (esim. nettioppaassa luetteloon, jossa linkit alasivuille).
Start
Viittaus etusivuun.

Mitä tarkoittaa tabindex ja miten se tehdään?

tabindex-attribuutilla määritellään missä järjestyksessä lomakkeen lomake-elementit (input, select, textarea) käydään läpi, kun elementistä toiseen siirtymisessä käytetään näppäimistöltä tabulaattorinäppäintä. Kullekin lomake-elementille on määriteltävä tämä ominaisuus ja sen arvoksi järjestysnumero (1, 2, 3, ...) monennellako tabulaattorin painalluksella elementti tulee valituksi. Numerointi on aloitettava ykkösestä. Esimerkiksi:

<input type="text" id="nimi" tabindex="1" name="nimi" value="Matti Meikäläinen" />

Lisää tietoa W3C:n HTML 4.0 -spesifikaatiossa (esim. numeron 0 merkityksestä).

Millä voin tarkistaa www-sivuni linkkien toimivuuden?

Linkkien tarkistamiseen löytyy moniakin ohjelmia. Yksi käyttökelpoisimmista lienee W3C Link Checker.

Muita hyödyllisiä apuohjelmia voi tutkailla kurssin omalta WWW-työkalusivulta.

Onko HTML-Kitistä versiota Windows XX:lle tai Linuxille?

HTML-Kit toimii kaikilla uudemmilla Windows-versioilla:

label-elementin käyttö lomakkeissa?

label-elementtien käyttö voi aiheuttaa harjoitustyössä paljon vaikeuksia. Seuraavassa lyhyet ohjeet label-elementin käytöstä WWW-lomakkeissa.

Seuraavassa esimerkki label-elementin käytöstä.

<p>
<label for="nimi">Nimesi</label><input type="text" name="kayttajan_nimi" id="nimi" /> 
</p>

<fieldset>
  <legend>Ammatti</legend>
  <p>
  <label for="metsuri">Metsuri</label><input type="radio" name="ammatti" id="metsuri" /> 
  <label for="metallimies">Metallimies</label><input type="radio" name="ammatti" id="metallimies"/> 
  <label for="joku_muu">Joku muu</label><input type="radio" name="ammatti" id="joku_muu" /> 
  </p>
</fieldset>

Miten saan tehtyä XHTML:llä sisäkkäisiä listoja?

Yleisin virhe sisäkkäisiä listoja kirjoitettaessa on unohtaa sisällyttää sisempi lista jonkin ulomman listan lista-alkion (li) sisälle.

<ol>
   <li>Ulomman listan ensimmäinen alkio</li>
   <li>Ulomman listan toinen alkio</li>
   <li>Ulomman listan kolmas alkio, jonka sisäll sisempi lista:
           <ul>
           <li>Sisemmän listan ensimmäinen alkio</li>
           <li>Sisemmän listan toinen alkio</li>
           <li>Sisemmän listan kolmas alkio</li>
           </ul>
       Ulomman listan kolmas alkio loppuu
   </li>
   <li>Ulomman listan neljäs alkio</li>
</ol>

Miksi validaattori herjaa linkissä olevista tuntemattomista entiteeteistä (unknown entity)?

Kirjoittamasi linkki on luultavasti jotakin tämän näköistä:

<a href="foobar?eka=jotakin&toka=bar&kolmas=foofoo">Linkkiteksti</a>

Urlissa on siis &-merkkejä, joilla normaalisti XHTML:ssä merkitään erikoismerkkejä yms. Kaikki &-merkit pitää koodata muotoon &amp;, niin validaattorikin lakkaa herjaamasta ja linkin toimivuus varmistuu.

Yllä oleva esimerkki pitäisi siis kirjoittaa muotoon:

<a href="foobar?eka=jotakin&amp;toka=bar&amp;kolmas=foofoo">Linkkiteksti</a>

CSS:n mediatyyppiongelmat

Miksi CSS-validaattori varoittelee mediatyyppimäärityksistäni, vaikka ne ovat oikein?

CSS-validaattorit eivät ymmärrä standardin mukaista handheld-mediatyyppiä eivätkä print-median @page-määrettä. Voitte ohittaa näihin liittyvät varoitukset!

Miksi en saa Operan Small Screen Rendering -tilaa näkymään handheld-mediatyypin mukaan?

Small Screen Rendering -tilaa käyttäessäsi muista kaventaa selain n. 240 pikseliä leveäksi!

Sivun lataaminen on tehtävä ainakin Operan vanhemmissa versiossa normaalitilassa. Toimi seuraavan kaavan mukaan:

  1. Lataa sivu normaalitilassa.
  2. Siirry Small Screen -tilaan valitsemalla View | Small Screen.
  3. Tutkit miltä sivu näyttää ja muuta tarvittaessa CSS:ää.
  4. Vaihda takaisin normaalitilaan View | Small Screen.
  5. Lataa sivu uudelleen CTRL + R.
  6. Palaa kohtaan 2.

Jos lataat sivun uudelleen (CTRL + R) Operan ollessa Small Screen -tilassa, niin Opera unohtaa tekemäsi handheld-tilan CSS-asetukset ja näyttää sivun kuten se näkyisi ilman mitään handheld-määrityksiä.

Uusimmissa Operan versioissa Small Screen Rendering -tilaa ei ole enää mahdollista käyttää.

Miksi mediatyypin vaihtaminen application/xhtml+xml-muotoon rikkoo sivuni ulkoasun?

Oikean mediatyypin käyttäminen aiheuttaa myös pieniä muutoksia CSS:n toimintaan. Normaalisti text/html-muodossa jaetuissa dokumenteissa body-elementti toimii CSS:n kannalta uloimpana juurielementtinä, vaikka oikeasti uloin elementti on html. Mediatyypin muuttaminen voi nyt aiheuttaa, että sivulle ilmestyy esim. valkoinen marginaali mikä johtuu siitä, että selain tulkitsee nyt myös html-elementille CSS-asetuksia. Tästä aiheutuvat ongelmat on helpointa kiertää määräämällä CSS:ssä html-elementille taustaväriksi sama kuin body-elementillä ja nollaamalla marginaalin, rajan ja paddingin. Myös body-elementin määritykset kannattaa tarkistaa.

html {  
  margin: 0; 
  padding: 0;
  border: 0;
}

Kannattaa muista myös kirjoittaa elementtien nimet pienillä kirjaimilla CSS-tiedostoon. Oikean mediatyypin yhteydessä selain erottelee isoilla ja pienillä kirjoitetut elementtien nimet niin kuin pitääkin.

H1 { /* tämä ei toimi XHTML:n kanssa */
  ... 
}

h1 { /* tämä toimii XHTML:n kanssa */
  ...
}

Lisätietoja: Sending XHTML as text/html Considered Harmful

CSS-ongelmat ja ratkaisut

Seuraavassa muutamia CSS:ään liittyviä ongelmia ja ratkaisuja ongelmiin.

Miten saan listoilta listamerkit pois?

Määritä halutun lohkon li-elementille CSS:ssä:

list-style-type: none;

Miten saan muotoiltua listan vaakasuuntaan?

Määritä halutun lohkon li-elementille CSS:ssä:

display: inline;

Miten saan vaakasuuntaisen listan lista-alkiot eroteltua toisistaan?

Käytä sopivaa erotinmerkkiä. Erottamisen voi tehdä esimerkiksi pystysuoralla viivalla, jolloin helpoiten homman tekee määräämällä lista-alkion vasempaan laitaan reunaviiva, esimerkiksi:

border-left: 1px solid black;

Merkin lisäämisen lista-alkion eteen saa sopivilla CSS-valitsimilla. Esimerkiksi:

li:before {
  color: yellow;
  content: "*";
}

Puutteellisen CSS-tuen vuoksi kaikki selaimet eivät tue kyseistä selektoria.

Miksi asemointini ei toimi IE:ssä?

Vanhempien IE-selainten CSS-tuki on puutteellinen. position: fixed -määre ei toimi ollenkaan IE 7 -versiota aiemmissa versioissa ja aiheuttaa sijoitteluongelmia muiden elementtien kanssa. IE:ssä on havaittu ongelmia myös suhteellisten kokojen laskutavassa (pitäisi laskea isäelementin koon mukaan).

IE:n asemointiongelmat voi kiertää seuraavasti CSS:ssä:

/* Yhteiset määritykset IE:lle ja muille selaimille */
.lohko {
  position: absolute; /* toimii myös IE 6:ssa lähes oikein */
  left: 5%;
  top: 5%;
  background-color: #123456;
}

/* Määritykset, jotka toimivat esim. Firefoxissa ja Operassa */
body>.lohko {
  position: fixed;
}

Miksi asemointini ei toimi Operassa?

Operassa on havaittu ainakin seuraavanlainen asemointibugi: Jos lohko on asemoitu suhteessa selainikkunan tai vanhempielementin kokoon (prosentteina) ja lohkon koko on määritelty jotenkin muuten (esim. em), niin Opera ei päivitä reaaliajassa lohkon paikkaan. Painamalla Reload-painiketta lohko asemoituu oikein.

Miksi asemoimattomat lohkot sijoittuvat mielivaltaisesti?

Mikäli käytetään CSS2:n position-asemointia, on syytä asemoida sivun kaikki elementit sillä. Jos esimerkiksi jokin elementti on asemoitu määrityksillä

position: absolute;
top: 3%;
left: 3%;

niin toiselle lohkolle, jonka paikkaa ei haluta kiinnittää sivulla, pitää antaa CSS:ssä määre

position: relative;

ilman muita asemointimäärityksiä.

Miksi CSSCheck valittaa värimäärityksistäni?

CSSCheck antaa usein varoituksia, joilla se yrittää vihjata miten varmistaa CSS-koodinsa ongelmattoman toiminnan myös mahdollisimman vanhoilla selaimilla. Varoitukset esiintyvät yleensä seuraavanlaisissa CSS-koodeissa:

body {
  background-color: aqua;
}

CSSCheck valittaa seuraavalla tavalla:

Warning: To help avoid conflicts with user style sheets, background-image
         should be specified whenever background-color is used. In most cases,
         background-image: none is suitable.

Eli aina kun määrittelee taustavärin, niin olisi myös hyvä määritellä taustakuva. Jos kuvaa ei ole, niin määrittely none riittää. Tämä ehkäisee mahdollisia ongelmia, jos käyttäjä onkin määritellyt selaimensa käyttämään aina jotakin taustakuvaa. Tarkistin antaa myös toisen varoituksen:

Warning: The shorthand background property is more widely supported than
         background-color.

Tämä tarkoittaa, että CSS-ominaisuus background toimii paremmin joissakin vanhoissa selaimissa kuin ominaisuus background-color. Background-ominaisuudellahan voi suoraan määritellä taustan värin ja taustakuvan yms. Ei siis tarvitse käyttää erillistä ominaisuutta kaikkiin. Ongelma voidaan korjata muuttamalla CSS-koodi seuraavanlaiseksi:

body {
  background: aqua none;
}

Tämä määrittelee taustaväriksi aquan ja taustakuvaksi ei mitään (none) käyttäen background-ominaisuutta.

Mihin määrittelen kuvan pituuden ja korkeuden?

Kuvan koon voi määrittää suoraan XHTML-tiedostoon img-elementin yhteyteen. Näin vanhimmatkin selaimet, jotka eivät vielä ymmärrä CSS:ää, osaavat heti varata kuvalle tarpeeksi tilaa. Toinen vaihtoehto on varata sivulta sopivan kokoinen lohko CSS:n avulla ja laittaa kuva tämän lohkon sisälle. Kuvan todelliseen koon ja määritellyn pituuden ja korkeuden on oltava samoja!

<img src="kuva.jpg" alt="Longyearbyen" width="372" height="250" />

Longyearbyen

Miten varaan CSS:ssä kuvalle tilaa? Voiko määritystä tehdä mitenkään suhteellisena?

Kuvien koot ovat kiinteitä, joten kuvia käytettäessä on tyypillisesti varattava kiinteän kokoinen tila kuvalle. Kiinteä koko on tässä tapauksessa aivan sallittua. Määrityksen voi tehdä suhteellisena, mutta tämä voi aiheuttaa sijoittelu- ja näkyvyysongelmia. Opera ja Firefox osaavat skaalata suhteelliseen kokoon määriteltyä kuvaa, mutta ainakaan vanhemmat Internet Explorit eivät.

Miten saan keskitettyä sivulle haluamani elementit?

CSS:stä löytyy ominaisuus nimeltään text-align, joka on tarkoitettu kappaletason elementin sisältämien tekstitason elementtien keskittämiseen vaakasuunnassa. Varmin temppu on määritellä vaikkapa uusi aliluokka, joka hoitaa keskityksen mille tahansa:

.keskitys {
  text-align: center;
}

Uutta .keskitys aliluokkaa voi nyt käyttää esimerkiksi div-elementin yhteydessä ja näin keskittää vaikkapa kuvan:

<div class="keskitys">
<img src="kuva.jpg" alt="Longyearbyen" width="372" height="250" />
</div>

Pystysuunnassa voi keskityksen määritellä tismalleen samaan tapaan käyttämällä vertical-align-ominaisuutta.

Miten saan määriteltyä kuvat vasempaan tai oikeaan laitaan tai keskelle?

Helpoiten kuvien tai minkä tahansa elementtien paikan määrittely onnistuu muutamalla yleiskäyttöisellä CSS-tyylillä:

.vasen {
  text-align: left;
}

.oikea {
  text-align: right;
}

.keski {
  text-align: center;
}

Sijoita ylläolevat tyylit CSS-tyylitiedostoosi ja käytä niitä xhtml-dokumentissasi seuraavasti:

<div class="vasen">
  <img src="kuva.jpg" alt="kuvan kuvaus" />
</div>

<div class="oikea">
  <img src="kuva.jpg" alt="kuvan kuvaus" />
</div>

<div class="keski">
  <img src="kuva.jpg" alt="kuvan kuvaus" />
</div>

Miten saan tekstin ja kuvan määriteltyä vierekkäin?

Minkä tahansa elementtien saaminen rinnakkain onnistuu käyttämällä CSS:n float-ominaisuutta. "Leijutetaan" haluttu elementti näytön vasempaan tai oikeaan laitaan, jonka jälkeen tulevat elementit sijoitetaan "leijutetun" elementin viereen.

Floatin käyttämisestä löytyy esimerkki luentosivuilta

Esimerkiksi halutaan sijoittaa kuva näytön vasempaan laitaan ja tekstikappale kuvan oikealle puolelle. Luodaan seuraavanlainen CSS-tyyli:

.left {
  float: left;
}

Käytetään tyyliä XHTML-tiedostossa näin:

<div class="left">
<img src="kuva.jpg" alt="Kuvan seliteteksti" />
</div>
<p>Tämä teksti tulee kuvan oikealle puolelle.</p>

Jos halutaan estää jonkin kappaleen tai muun elementin tuleminen "leijutetun" osan viereen, niin täytyy käyttää CSS:n clear-ominaisuutta. clear-ominaisuudella voidaan kieltää elementin tuleminen vasemmalle, oikealle tai kummalle tahansa puolelle leijutetun kappaleen vierelle.

Edelliseen esimerkkiin voitaisiin lisätä kappale, jonka ei haluta tulevan enää leijutetun kuvan vierelle. Lisätää css:ään tyyli:

p.clear-left {
  clear: left;
}

Käytetään tyyliä html-koodissa näin:

<div class="left">
<img src="kuva.jpg" alt="Kuvan seliteteksti" />
</div>
<p>Tämä teksti tulee kuvan oikealle puolelle.</p>
<p class="clear-left">Tämä teksti ei tule kuvan oikealle puolelle, 
vaikka sille vielä olisi tilaakin.</p>

Miten saan poistettua kuvalinkistä reunuksen?

Kuvaan tulee joissakin selaimissa reunus eli raja, kun kuva toimii linkkinä. Reunuksen saa helposti pois määrittelemällä CSS-tiedostoon linkin sisällä olevan kuvan reunuksen leveydeksi nollan. Seuraavassa esimerkki asiasta:

a img {
  border: 0em;
}

Jos ulkoasun muotoilemiseen ei käytetä CSS:ää, niin silloin kuvan reunuksen poistaminen joudutaan tekemään suoraan img-elementissä. Tapa on kuitenkin huono, koska sitä ei tueta enää esimerkiksi W3C:n HTML Basic -suosituksessa. Tämän vuoksi reunus kannattaa poistaa aina CSS:n avulla!

<p>
  <a href="http://appro.mit.jyu.fi/">
    <img src="kuva.png" alt="vaihtoehtoteksti" border="0" />
  </a>
</p>

Miten taustakuva saadaan määritettyä CSS-tiedostoon?

Seuraavassa esimerkki taustakuvan määrittämisestä CSS-tiedoston avulla.

Miten CSS:llä voidaan määritellään popup-ikkunoita?

Seuraavassa esimerkki popup-ikkunan määrittämisestä CSS-tiedoston avulla.

Miten sivun saadaan jaettua useampaan osaan CSS:n avulla?

Seuraavassa esimerkki sivun jakamisesta neljään osaa CSS-tiedoston avulla.

Miten HTML-dokumentille voidaan määritellä monta eri CSS-tiedostoa?

Seuraavassa esimerkki useamman CSS-tiedoston käytöstä HTML-dokumentissa.

Miten taulukko saadaan keskitettyä CSS:n avulla?

Seuraavassa esimerkki määrittämisestä CSS-tiedoston avulla.

Mistä muualta voin etsiä tietoa?

Useimpiin HTML:ään ja WWW-sivuihin liittyviin kysymyksiin löytyy vastauksia seuraavista paikoista:

CSS-bugeista on koottu kattavat listaukset sivustoille, jotka löydät kurssin linkkilistasta.

WWW-julkaiseminen-kurssin luennoista ja demoista löytyy ohjeita WWW-sivujen tekemiseen, ulkoasun muotoiluun ja palvelinasetuksiin.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/faq/www/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2011-03-01 11:48:29
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta