Teemavaihtoehdot

• Oletusteema
• Rock
• Old fashion
• Space & time
• Green Grass
• Industry
• DISCO!

xHTML+CSS Survival Kit

OSA I: Muutama sana teoksesta

1. xHTML+CSS Survival Kit
2. Kiitokset ja kreditit

OSA II: Alustus

1. Mitä xHTML ja CSS ovat?
2. xHTML-sivujen rakenne
3. Suunnittelu
4. Mitä tarvitaan sivujen tekemiseen?

OSA III: Aloitetaan sivujen tekeminen

1. Sivurakenteen ja peruselementtien läpikäynti, ensimmäisen sivun luonti
2. Sivujen linkittäminen, hyperlinkit
3. Sivukokonaisuuden luominen, kuvien liittäminen
4. Tyylitiedoston luominen
5. Tagien läpikäynti
6. Class ja ID
7. Järjestetty ja järjestämätön listaus
8. Sisäkkeiden listaus
9. Määritelmien listaus
10. Taulukot
11. Toisen palstan luominen
12. Vepissä käytettävät fontit, erikoismerkit ja umlaut
    • Saavutettavat fontit
    • Yleisimmin käytetyt mittayksiköt
    • Umlaut
13. Sivujen turvarajat
14. Se, mikä näkyy paljaalle silmälle ja elementtien järjestys
15. Kuvien tallentaminen Internettiin Photoshopilla
16. Tarkistuslista
17. Sivujen julkaiseminen

OSA IV: Listat ja resurssit

1. xHTML 1.0 Transitional -tagilista
2. Attribuutti -lista
   • Standardit Attribuutit
   • Muut Attribuutit
3. CSS -tagilista
   • Peruskäyttö
   • Background
   • Text
   • Font
   • Border
     • border-top
     • border-right
     • border-bottom
     • border-left
   • Outline
   • Margin
   • Padding
   • List
   • Table
   • Height & Width
   • Luokittelu
   • Sijainti
4. Merkistösetti
   • Skandinaaviset
   • Koodissa käytettävät
   • Symbolit
5. HEX-värit ja värikartta
6. Lista editoreista ja ftp-ohjelmista
   • Windows
   • Mac
7. Lähteitä

Muutama sana teoksesta

xHTML+CSS Survival Kit

xHTML+CSS Survival Kit on Jani Penttisen opinnäytetyönä valmistunut opetusmateriaalipaketti perus www-sivujen luomista varten. Sen tarkoitus ei ole olla www-sivujen rakentamisen pitkä oppimäärä, vaan apu pulassa oleville sivujen nopeaan luomiseen. Lisäksi xHTML+CSS Survival Kit pyrkii antamaan järkevän kuvan Internetsuunnittelusta.

Mielestäni yksi hyvä tapa oppia tekemään mitä tahansa, on tehdä perässä ja ottaa mallia (tässä tapauksessa kopioida). Siispä kaikki materiaali, mikä tästä paketista löytyy, on käytettävissäsi Creative Commons Nimeä-Epäkaupallinen-Tarttuva 1.0 Suomi-lisenssi alaisena. Suomeksi sanottuna, olet vapaa esittämään, kopioimaan ja muuntelemaan mitä tahansa tästä teoksesta löytyvää materiaalia omiin epäkaupallisiin tarkoituksiisi.

Ladattava materiaali

Kiitokset ja kreditit

Haluan kiittää tämän teoksen valmistumiseen vaikuttaneita henkilöitä. Oikeaa siipimiestäni Ismo Vuorista, oikoluvusta Maria K. ja uskomattoman urheaa testausryhmääni: Hannupekka Sormunen, Henri Ilanen, Iiro Uusitalo, Ilja Suvanto, Jani Gyllenberg, Janne Kajovuori, Janne Nissinen, Joona-Pekka Hirvonen, Jutta Ikonen, Kaisu Laine, Kim Sainio, Matti Rauhala, Matti Kärkkäinen, Markus Manninen, Mikko Turunen, Minna Siltanen, Pasi Lehtinen, Pyry Hyvönen, Riku Immonen, Saara Kolehmainen, Sari Tikkanen, Siiri Saarimaa, Silla Virmajoki, Simo Rouhiainen, Tiia Puumalainen, Tomi Tirkkonen, Tuula Maasilta, Tytti Ilves.

Kiitos opinnäytetyön ohjaajana toimineelle Pasi Räsämäelle ja Pohjois-Karjalan koulutuskuntayhtymän AV-viestinnälle yleisesti. Kiitos myös tämän sivun mahdollistavien javascript toimintojen kehittelijöille.

Live long and prosper. Tänks.

Alustus

Mitä xHTML ja CSS ovat?

xHTML (eXtensible Hypertext Markup Language) on kuvauskieli, joka tunnetaan erityisenä kielenä www-sivujen rakentamiseen. xHTML -kuvauskielellä rakennetaan sivuille runko, sitä ei tulisi käyttää ulkoasun muotoiluun, vaan tähän tulisi käyttää CSS (Cascading Style Sheets) -tyylittelyä. Kun sisältö erotetaan ulkoasusta, sivun ylläpito selkeytyy ja helpottuu. Tämä säästää aikaa ja vaivaa, lisäksi sivujen rakenne selkeytyy.

xHTML-sivujen rakenne

Webbisivujen runkorakenne, missä kaikki varsinainen sisältö sijaitsee, rakentuu tageista. Jokaiselle tagille voi määrittää ominaismääritteet CSS-tyylitiedostoon. Näin pystytään rakentamaan oma ominaispiirteinen tyyli sivustolle. Suurimmalla osalla tageista, joilla on alku, tulee olla myös loppu. Jos koodiin jää avonaisia tageja, sivurakenne hajoaa. Ne tagit joilla ei ole loppua ovat tageja, jotka eivät rajaa mitään sisältöä tietyn ominaisuuden alle. Esimerkiksi: <br /> <img /> <hr />. Nämä tagit suljetaan itseensä kirjoittamalla loppuun kauttaviiva “/", kun taas tagit joilla on alku ja loppu kirjoitetaan tyyliin <p> ja </p>.

Suunnittelu

Ennen kun sivuja edes aletaan tehdä, kannattaa homma aloittaa miettimällä, löytyykö sivuille julkaisemisen arvoista sisältöä. Olemme keskellä suurella vauhdilla kasvavan median vallankumousta, mikä mahdollistaa koko ajan yhä monimutkaisempien ja interaktiivisten sivujen tekemisen. On paljon tärkeämpää luoda sivut, joilta sisältö löytyy helposti ja selkeästi, kuin rakentaa vaikeaselkoiset sivut, jotka ovat hienot ja raskaat. Suurin osa käyttäjistä ei jaksa odotella, että raskaat sivut latautuvat, vaan lähtevät matkoihinsa hyvinkin nopeasti. Yksinkertaiset ja kevyet sivut eivät tarkoita, että ne olisivat rumat. Minun mielestäni miellyttävät ja tyylikkäät sivut eivät rakennu suurista välkkyvistä flash-animaatioista ja graafisista elementeistä, vaan monista pienistä muotoilullisista seikoista. Sivujen suunnittelu kannattaa aloittaa kaivamalla kynä ja paperia esiin. Erilaisten luonnosten piirtäminen paperille selkeyttää ajatteluprosessia sivuja tehdessä. Tämä ei tarkoita sitä, että sivujen pitäisivät olla juuri sellaiset, kuin suunnitelmissa lukee.

Mitä tarvitaan sivujen tekemiseen?

Sivut voidaan tehdä yksinkertaisimmillaan käyttöjärjestelmän omalla muistiosovelluksella. Tämän lisäksi on olemassa ilmaisia (mm. freeware, open source) sekä maksullisia lisenssiohjelmia koodin suoltamiseen. Näitä ohjelmia kannattaa käyttää auttamaan koodin kirjoittamisessa, ei itse koodin tekemisessä. Parhaimmillaan nämä ohjelmat osaavat nopeuttaa ja auttaa koodin kirjoittamisessa, pahimmillaan ne voivat luoda turhaa ja toimimatonta koodia. Yleensä ohjelmien visuaaliset WYSIWYG (What You See Is What You Get) -editorit ovat juuri niitä, jotka pystyvät tekemään turhaa ja toimimatonta koodia. Lista editoreista ja ftp-ohjelmista →

Aloitetaan sivujen tekeminen

Sivurakenteen ja peruselementtien läpikäynti, ensimmäisen sivun luonti

Aloitamme tekemällä aivan perus XHTML 1.0 Transitional -sivun avaamalla muistion ja kirjoittamalla seuraavan:

Kohta 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Kohta 2<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>Otsikko - Ensimmäinen sivu</title>
</head>

Kohta 3<body>
	
<h1>All your base are belong to us</h1>
<p>How are you gentlemen</p>
<p>You are on the way to destruction. You have no chance to survive <br />
make your time.</p>

Kohta 4</body>
</html>

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Kohta 1. on sivulla käytettävä koodaustyyli, mikä kertoo, että maailmanlaajuisia standardeja pyritään noudattamaan sivulla. Tämä kertoo minkätyyppistä koodia sivuilla pitäisi olla. Opettelemme tekemään sivuja joustavalla XHTML 1.0 Transitional tekniikalla. Kohta <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> kertoo taas selaimelle, että on aika ruveta tulkitsemaan standartinmukaista html koodausta, kohta <html> loppuu aivan sivun lopussa kohtaan </html>.

Kohta 2. on niin sanottu otsake (head), jonne kirjoitetaan sivulla olevat metatiedot, kuten mm. sivuilla käytettävä kirjasintyyppi, sivun otsake ja CSS-tyylitiedostot. Tähän kohtaan merkittävät tiedot eivät tule näkyviin itse sivulla selaimesta katsottuna. Otsake alkaa kohdasta <head> ja loppuu kohtaan </head>. Kohta <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> kertoo sivuilla tulkittavan merkistön. UTF-8 on universaali merkistösetti, joka taitaa myös skandinaavissa käytettävät erikoismerkit.

Kohta 3. on sivun kehoalue (body), johon kirjoitetaan runkokoodi ja sivuilla oleva sisältö. Tähän väliin tulee sivuilla näkyvä materiaali. Tämä alue alkaa kohdasta <body> ja loppuu kohtaan </body>

H1 on otsikko (headline). Otsikot menevät tyyliin H1, H2, H3 jne.. Mitä suuremmaksi numeroissa mennään, sitä pienimmiksi otsikon koko käy. H6 on kuitenkin pienin käytettävissä oleva otsikko. Otsikoita käytettäessä olisi hyvä muistaa käyttöjärjestys: Ensimmäisenä tulisi lisätä H1 otsikko, sitten H2 ja sitten H3. Otsikoita H2 - H6 voidaan käyttää niin monta kertaa kuin tarvetta on.

Kohta <p>How are you gentleman?</p> on kappale (paragrafi). Teksti “How are you gentleman?" erotetaan siis kappaleella seuraavasta tekstistä. Kohta <br /> on rivivaihto. Kappaleiden käyttäminen tekstin jaksottamiseen parantaa luettavuutta ja selkeyttää sisältöä koodin puolella.

Kohta 4. selaimelle kerrotaan että on aika lopettaa dokumentin tulkitseminen.

Nyt tallennamme. Kirjoittamamme tiedostoksi nimellä “index.html". Kotisivujen ensimmäinen “pääsivu" tulee nimetä aina nimellä “index", sillä palvelimet ovat yleensä koulutettu automaattisesti näyttämään kansiosta tiedoston nimeltä “index" ensimmäisenä. Kohta .html on taas tiedostotyyppi siinä missä .jpg tai .txt. Internetissä isoilla ja pienillä kirjaimilla on väliä, joten kannattaa huomioida kirjoitetaanko nimet isolla vai pienellä. Suosittelen kirjoittamaan kaikki tiedostonimet pienellä. Tiedostonimet eivät saa sisältää erikoismerkkejä (åäö .yms). Pisteiden käyttämistä tiedostonnimissä kannattaa myös välttää, sillä pisteet on tarkoitettu erottamaan tiedostonimi tiedostotyypistä. Niiden käyttäminen voi sekoittaa tiedostonimen tiedostotyypiksi.

Sivujen linkittäminen, hyperlinkit

Hyperlinkit ovat netissä käytettäviä linkkejä, joita painamalla pystytään siirtymään webbiosoitteesta toiseen kirjoittamatta itse osoitetta selaimen osoitekenttään. Hyperlinkkien avulla voidaan luoda monisivuiset www-sivut, joissa materiaali on luokiteltu usealle sivulle.

Hyperlinkki luodaan ulkoiselle sivulle tyyliin <a href="http://www.osoite.com/">sivun nimi</a>. Ulkoista sivua linkittäessä pitää muistaa aina kirjoittaa www-osoiteen http:// alku, jotta selain tietää sivun sijaitsevan jossain muualla kuin sivusi kotihakemistossa.

Hyperlinkkejä tehdessä kannattaa pyrkiä selkeään ymmärrettävyyteen. Linkin pitäisi olla sellaisenaan tarpeeksi kuvaava, että siitä voisi päätellä mitä siitä painamalla tapahtuu tai mille sivulle siitä pääsee. Kannattaa välttää "klikkaa tästä" tyyppisiä linkkejä.

Kokeilemme nyt hyperlinkkiä käytännössä:

<h1>All your base are belong to us</h1>
<p>How are you gentlemen</p>
<p>You are on the way to destruction. You have no chance to survive <br />
make your time.</p>
 
<p><a href="http://google.com/">Lisää minusta googlettamalla.</a></p>

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Tallennamme muutoksemme ja näin olemme luoneet ensimmäisen hyperlinkin Googlen sivuille.

Sivukokonaisuuden luominen, kuvien liittäminen

Kun haluamme luoda monisivuisen kotisivun, avaamme index.html, muutamme siitä tagien <body> </body> välisen sisällön mieluiseksemme ja tallennamme siitä kopion eri nimellä (vaikka about.html).

Esimerkiksi tällaisen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>Otsikko - Toinen sivu</title>
</head>
<body>

<h1>Toinen sivu jonka nimi on about.html</h1>
<p>Tällä sivulla kerron jotain hieman enemmän minusta.
Tässä hieno kuva minusta:</p>

<img src="mina.jpg" alt="kuva minusta" />

<p><a href="index.html">takaisin etusivulle.</a></p>

</body>
</html>

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Kohta <img src="mina.jpg" alt="kuva minusta" /> kutsuu sivulle kuvan. Kohtaan src=" " kirjoitetaan kuvan polku/osoite ja kohtaan alt=" " kuvaus mitä kuvassa on. Lisättäessä kuvia sivuille, on erittäin suotavaa kirjoittaa jokaiseen kuvaan pieniluontoinen kuvaus kohtaan alt="kuvaus". Esimerkiksi jos hyperlinkin ja kuvan yhdistää yhdeksi linkiksi, eikä kuva syystä tai toisesta lataudu, tiedetään silti mikä linkki on kyseessä.

Jos kuva kutsutaan suoraan kirjoittamalla <img src="mina.jpg" alt="kuva minusta" />, tulee kuvan tällöin sijaita samassa kansiossa "about.html" -sivun kanssa. Jos kuva sijaitsisi vaikkapa kansiossa kuvat, tulisi kohtaan src kirjoittaa "kuvat/mina.jpg". Tällöin about.html -sivun tulee sijaita juuri ennen kansiota kuvat. Kuvan voi linkittää myös jostain www-osoiteesta tyyliin <img src="http://www.osoite.com/mina.jpg" alt="kuva minusta" />

Lisäämme myös sivulle “index.html" hyperlinkin viemään “about.html" sivulle.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>Otsikko - Ensimmäinen sivu</title>
</head>
<body>

<h1>All your base are belong to us</h1>
<p>How are you gentlemen</p>
<p>You are on the way to destruction. You have no chance to survive <br />
make your time.</p>

<p><a href="http://google.com/">Lisää minusta googlettamalla.</a> <br />
Tai suunnistamalla about-sivulle <a href="about.html">tästä</a>.</p>

</body>
</html>

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Nyt olemme onnistuneet tekemään kahden toisiinsa linkitetyn sivukokonaisuuden.

Tyylitiedoston luominen

Perehdymme nyt tekemään about-sivulle oman persoonallisen tyylinsä:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link href="style.css" rel="stylesheet" type="text/CSS" />
   <title>Otsikko - Toinen sivu</title>
</head>
<body>
	
<div id="container">

   <h1>Toinen sivu jonka nimi on about.html</h1>
   <p>Tällä sivulla kerron jotain hieman enemmän minusta.
   Tässä hieno kuva minusta:</p>

   <img src="mina.jpg" alt="kuva minusta" />

   <p><a href="index.html">takaisin etusivulle.</a></p>

</div>

</body>
</html>

Lisäsimme <head> sisälle rivin <link href="style.css" rel="stylesheet" type="text/CSS" /> tämä kohta kutsuu CSS-tyylitiedoston käyttöön. Kohta <body> sisälle lisäsimme tason/elementin <div id="container">.

Luomme uuden puhtaan tiedoston samalla tavalla kuin loimme index.html. Kirjoitamme uuden puhtaan dokumentin sisälle seuraavan:

body { 
     font-family:arial, verdana, georgia;
     font-size:12px;
     color:#000;
     }

a, a:visited {
     color:red;
     }

a:hover, a:active {
     color:blue;
     }

h1 { font-family:georgia, arial, verdana; }

#container {
     width:650px;
     margin10px;
     padding:5px;
     background:#ddd;
     border:1px solid #666;
     }

Tallennamme tämän samaan kansioon muiden tiedostojen kanssa nimellä style.css. Tuloksena sivulla olevan tekstin ympärille on tullut harmaa laatikko, jossa on yhden pikselin paksuiset harmaat reunat, hyperlinkkien värit ovat muuttuneet punaiseksi sekä h1-otsikon kirjasintyyli on vaihtunut.

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Tagien läpikäynti

Kohta body CSS-tyylitiedostossa on kohta <body> html-koodissa. Kohta #container on kohta <div id="container">. CSS-tagit rakentuvat tyyliin -> #container { background: #ddd; }. Kohta #container on alue, johon halutaan vaikuttaa kohdat { ja } rajaavat allensa alueen, johon voidaan määrittää käytettävät arvot. Arvot eritellään toisistaan lopettamalla joka ikinen arvo merkkiin ; tyyliin -> background: #ddd;

body

Tämä on kohta, joka vaikuttaa sivun kokonaisrunkorakenteeseen. Esimerkiksi jos tänne lisää fontin koon ja perheen, eikä määritä niitä erikseen mihinkään muualle, tullaan tähän määritettyjä asetuksia käyttämään oletuksena.

font-family:arial, verdana, georgia;

On fonttiperhe (font-family), johon määrittää sivustolla käytettävät fontit. Ensimmäisenä listassa oleva fontti on ensisijainen fontti jota pyritään käyttämään, mutta jos sitä ei tietokoneelta löydy, yritetään listassa seuraavana olevaa. On järkevää tarkistaa, miltä sivusto näyttää jokaisella listaan määritetyllä fontilla. Vepissä käytettävät fontit, erikoismerkit ja umlaut →

font-size:12px;

On sivuilla olevan fontin koko. Yleisimmin käytetyt mittayksiköt →

color:#000;

On sivuilla käytettävän fontin väri. HEX-värit ja värikartta →

a, a:visited

Kohdasta a on linkin väri, a:visited on taas klikatun hyperlinkin väri. Voimme määrittää samaan aikaan monta aluetta samojen määritteitten alle, kirjoittamalla ne pötköön tyyliin a, a:visited ja sitten lisäämälle arvot tyyliin {color:red;} - jolloin yksi asetus määritetään kahteen kohtaan.

h1

font-family:

Vaikuttaa samalla tavalla kuin body:n font-family, paitsi vain kohdassa h1.

container

width:650px;

On elementin leveys. Tämän voi määrittää pikseleinä tai prosentteina.

margin:10px;

On elementin marginaali. Kohta “10px" tarkoittaa, että elementtiä työnnetään ulospäin 10 pikselin verran jokaisesta kulmasta.

Margin vaikuttaa ulkopuolella

Sisältö

padding:5px;

On viiden pikselin sisennys laatikon sisällä jokaisesta kulmasta. Siinä missä margin vaikuttaa elementin ulkopuolelle, vaikuttaa padding elementin sisäpuolelle.

Padding vaikuttaa sisäpuolella Sisältö

background:#ddd;

Määritetään elementin taustaväri.

border:1px solid #666;

Määrittää sivuilla yhden pikselin rajan.

Jos halutaan määrittää eri kulmiin eri määrä sisennystä tai marginaalia, voidaan kirjoittaa margin:10px 5px 5px 20px; Tämä luo ylös 10px, oikealle 5px, alas 5px ja vasemmalle 10px. Luvut menevät myötäpäivään.

Vaihtoehtoisesti saman koodin voi kirjoittaa:

Tämä periaate toimii samalla tavalla kohdissa padding ja margin.

Class ja ID

Avaamme about -sivun uudelleen ja muokkaamme koodia:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link href="style.css" rel="stylesheet" type="text/CSS" />
   <title>Otsikko - Toinen sivu</title>
</head>
<body>

<div id="container">

   <h1>Toinen sivu jonka nimi on about.html</h1>
   <p>Tällä sivulla kerron jotain hieman enemmän minusta. 
   Tässä hieno kuva minusta:</p>
  
   <img src="mina.jpg" alt="kuva minusta" class="luokka1" />

<div class="luokka1">
   <p><a href="index.html">takaisin etusivulle.</a></p>
</div>

</div>

</body>
</html>

Lisäämme nyt CSS-tyylitiedostoon seuraavan pätkän koodia:

.luokka1 {
     margin:10px;
     padding:5px;
     background:#f2f2f2;
     border:1px solid #666;
     }

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Tallennamme ja voimme huomata, että sivuilla olevan kuvan ja "takaisin etusivulle" linkin sijainti ja sitä ympäröivä tausta on muuttunut. Kohdan <div id=" "> ja kohdan <div class=" "> ero on siinä, että kaikki elementit, jotka on merkitty id=" " voivat esiintyä koodissa vain kertaalleen. Kohdat, jotka on merkitty class=" " voivat esiintyä koodissa niin monta kertaa kuin on tarvetta.

Elementit joita käytetään useasti, kuten “ilmoituslaatikot", tulisi ilmoittaa classina. Kaikki perus-html-tagit (kuten body,br, p, h1, ul, a) merkitään CSS-puolella ilman etumerkkiä:

body {}
p {}
br {}
ul {}

xHTML 1.0 Transitional -tagilista →
Attribuutti -lista →
Lisää CSS -tagien peruskäytöstä →

Järjestetty ja järjestämätön listaus

Järjestetty ja järjestämätön listaus on tarkoitettu nimensä mukaisesti luomaan listoja. Näillä koodipätkillä voidaan luoda listoja tai rakentaa sivuille navigaatio. Listauksen tyyliä ja suuntaa (horisontaali, vertikaali, vasemmalta oikealla, oikealta vasemmalle) voidaan muuntaa erikseen CSS:ää käyttäen. Järjestetty listaus (<ol> = ordered list) luo listaan automaattisen numeroinnin. Järjestämätön (<ul> = unordered list) listaus luo listauksen ilman numerointia palloilla. Listauksen edessä olevan merkin tai numeron voi muuttaa CSS:n kautta haluamakseen.

HTML:

<ul>
 <li><a href="#">linkki</a></li>
 <li><a href="#">linkki</a></li>
 <li><a href="#">linkki</a></li>
</ul>

Vaihtamalla kohdan ul -> ol, voidaan numeroida listattavat kohteet automaattisesti.

CSS:

ul { }
ul li { }

tai

ol {}
ol li {}

Lista järjestetyssä ja järjestelmättömässä listauksessa käytettävistä CSS-määritteistä (CSS -tagilista: List) →

Sisäkkeiden listaus

Järjestetyn tai järjestämättömän listauksen sisällä voidaan luoda alilistaus tyyliin:

<ul>
 <li>Ensimmäisen taso - listattava elementti
  <ul>
   <li>Toinen taso - listattava elementti</li>
   <li>Toinen taso - listattava elementti #2
    <ol>
     <li>Kolmas taso - listattava elementti</li>
     <li>Kolmas taso - listattava elementti</li>
     <li>Kolmas taso - listattava elementti</li>
    </ol>
   </li>
   <li>Toinen taso  - listattava elementti #3</li>
  </ul>
 </li>
 <li>Ensimmäisen taso - listattava elementti #2</li>
 <li>Ensimmäisen taso - listattava elementti #3</li>
</ul>

Määritelmien listaus

Määritelmien listauksella voidaan käyttää asioiden listaukseen ja määrittämiseen. Tällä voidaan tehdä vaikka esimerkiksi lista CV:hen tai johonkin muuhun hakemukseen.

<strong>Suoritukset:</strong>
<dl>
   <dt>Otsikko</dt>
   <dd>Kuvaus</dd>
   <dt>Otsikko #2</dt>
   <dd>Kuvaus #2</dd>
</dl> 

Kohta dl määrittää määritelmien listauksen alkaneeksi. Kohta dt on käytettävä otsikko, kohta dd on kuvaus.

Taulukot

Taulukot (table) ovat tarkoitettu listamaan suuria määriä tietoja. Taulukkoja on käytetty ennen CSS:n tuomaa helpotusta luomaan sivuille runkorakenne, johon on rakennettu sivun tyyli ja johon on listattu sivulta löytyvä informaatio. Tämä ei kuitenkaan ole taulukkojen oikea käyttötarkoitus ja tätä sivujenrakennustekniikkaa tulisi myös välttää.

On tärkeää käyttää oikeita sivunrakennustekniikoita oikeaan tarkoitukseen. Esimerkiksi kaikki listattavat elementit olisi hyvä listata käyttämällä ul/ol li, sillä se on hyvien tapojen mukaista ja parantaa sivujen saavutettavuutta kaikille alustoille (mobiili, vanhemmat selaimet). Taulukkoja taas tulisi käyttää isompiin listauksiin. Taulukkojen ja määritelmien listaus ja listaus (<ul> / <ol>) eroavat toisistaan siinä, että taulukot on enemmän laajennettavissa: siihen voi lisätä erikseen otsakkeita, palstoja ja rivejä. Listaukseen taas voi lisätä vain rivejä. Kummallekin on oma käyttötarkoituksensa, eikä niiden käyttöä tulisi sotkea.

Yksirivinen- ja palstainen taulukko:

<table border="1" cellspacing="5" cellpadding="5">
 <tr>
   <th>1. Ensimmäinen palstaotsake</th> 
 </tr>
 <tr>
   <td>1. Ensimmäinen rivi - 1. Ensimmäinen palsta</td>
  </tr>
</table>

Kaksirivinen ja kolmepalstainen taulukko:

<table border="1" cellspacing="5" cellpadding="5">
 <tr>
   <th>1. Ensimmäinen palstaotsake</th>
   <th>2. Toinen palstaotsake</th>
   <th>3. Kolmas palstaotsake</th>
 </tr>
 <tr>
  <td>1. Ensimmäinen rivi - 1. Ensimmäinen palsta</td>
  <td>1. Ensimmäinen rivi - 2. Toinen palsta</td>
  <td>1. Ensimmäinen rivi - 3. Kolmas palsta</td>
 </tr>
 <tr>
  <td>2. Toinen rivi - 1. Ensimmäinen palsta</td>
  <td>2. Toinen rivi - 2. Toinen palsta</td>
  <td>2. Toinen rivi - 3. Kolmas palsta</td>
 </tr>
</table>

Kohta cellspacing="5" määrittää miten kauaksi taulukon solut erotellaan toisistaan.
Kohta cellpadding="5" määrittää kuinka paljon sisennystä tulee solujen sisälle.

Toisen palstan luominen

Nyt haluamme luoda etusivusta kaksipalstasen kokonaisuuden. Avaamme siis tiedostot index.html ja style.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link href="style.css" rel="stylesheet" type="text/CSS" />
   <title>Otsikko - Ensimmäinen sivu</title>
</head>
<body>

<div id="container">
<div id="content">

   <h1>All your base are belong to us</h1>
   <p>How are you gentlemen</p>
   <p>You are on the way to destruction. You have no chance to survive <br />
   make your time.</p>

   <p><a href="http://google.com/">Lisää minusta googlettamalla.</a> <br />
   Tai suunnistamalla about-sivulle <a href="about.html">tästä</a>.</p>

</div>

<div id="sidebar">

   <h2>Kolme numerolistattua hyperlinkkiä</h2>
   <ol>
     <li><a href="#">Somebody set up us the bomb</a></li>
     <li><a href="#">We get signal</a></li>
     <li><a href="#">Main screen turn on</a></li>
   </ol>
		
   <h2>Neljä listattua hyperlinkiä</h2>
   <ul>
     <li><a href="#">Take off every 'ZIG'!!</a></li>
     <li><a href="#">You know what you doing</a></li>
     <li><a href="#">Move 'ZIG</a></li>
     <li><a href="#">For great justice</a></li>
   </ul>
			
</div>
						
<div style="clear:left"> </div>
<div style="clear:right"> </div>
			
</div>
</body>
</html> 

Lisäsimme index.html -sivulle kohdat <link href="style.css" rel="stylesheet" type="text/CSS" />, <div id="container">, <div id="content">, <div id="sidebar">, <h2>, <ul> <li> ja <div style="clear:left" /> ja <div style="clear:right">.

Teimme siis sivujen kehykseen (#container) omat div-tasot sisällölle (#content) ja sivupalkille (#sidebar). Tulemme käyttämään pätkiä <div style="clear:left"> </div> ja <div style="clear:right"> </div> vasemman ja oikean float -komennon irrottamiseen. Sivu näyttää vielä tässä vaiheessa yksipalstaiselta.

Lisäämme style.css tiedostoon seuraavan:

#container {
     width:650px;
     margin10px;
     padding:5px;
     background:#ddd;
     border:1px solid #666;
     clear:both;
     }

#content {
     width:400px;
     float:left;
     }

#sidebar {
     width:150px;
     float:right;
     border-left:1px solid #000;
     padding:0 0 0 10px;
     }

Avaa tämä esimerkki: Lightboxiin / Selaimen omaan ikkunaan

Kohdat float:left ja float:right määrittävät, mihin suuntaan käytettävä div-taso määritetään. Kaksipalstaista sivua tehdessä, div-tasojen leveyden määrittäminen on kriittistä, sekä se, että molemmat tasot sijaitsevat jonkun toisen div-tason sisällä. Kohta #container toimii tasona, johon kaksi muuta div-tasoa rajataan. Tähän tasoon tulee määrittää kohta clear:both, joka eliminoi kohtien #content ja #sidebar float arvot sen jälkeen, kun niitä ollaan jo kerran käytetty. Jos floatia ei clearata, sivurakenne hajoaa, eikä sivu näytä siltä miltä sen pitäisi.

Vepissä käytettävät fontit, erikoismerkit ja umlaut

Internetympäristössä käytettävien fonttien määrä on hyvin rajallinen. Jos haluat käyttää jotain erikoisfonttia sivuillasi, tulisi se laittaa sivulla kuvatiedostona, sillä suurella todennäköisyydellä kyseistä fonttia ei löydy sivuja selaavalta käyttäjältä. Kuvatiedoston haittapuolena on se, että kuvatiedostossa olevan tekstin saavutettavuus kärsii. Sitä ei voi kopioida, eivätkä hakukoneet ymmärrä sitä sellaisenaan.

Jos määritettävää fonttia ei löydy käyttäjän koneelta, tällöin käytetään käyttäjän selaimeen asetettuja oletuksia.

Käytettävä fonttien määritys tehdään CSS:n puolella:

Ensimmäisenä listassa (font-family) oleva fontti on ensisijainen fontti jota pyritään käyttämään, mutta jos sitä ei tietokoneelta löydy, yritetään listassa seuraavana olevaa. On järkevää tarkistaa, miltä sivusto näyttää jokaisella listaan määritetyllä fontilla.

Saavutettavat fontit

Sans-serif

Serif

Monospace, Cursive, Symbols

Yleisimmin käytetyt mittayksiköt

px, pikselit

Pikseleitä (px) käytettäessä fonttikoko on absoluuttinen. Fontti ei skaalaudu käyttäjän asetusten mukana tai ole verrannollinen mihinkään muuhun tyyliasetukseen.

%, prosentit

Prosentteja (%) käytettäessä fonttikoko on skaalautuva.

em

Yksikköä em käytettäessä fonttikoko on skaalautuva ja verrannollinen käytössä oleviin elementtien arvoihin. Jos body:n CSS-tyyliin on annettu fontti koolle arvo 85% ja haluttuun div-tasoon arvo 2em, skaalautuu fontti verrannollisesti prosenttilukuun nähden kaksinkertaiseksi eli 170% kokoon. Käytettäessä arvoa 1em fontin koko säilyisi 85% kokoisena.

Em mittayksiköt ilmoitetaan tyyliin: 0.50em, 0.65em, 0.90em, 1em, 1.1em, 1.5em, 2em, 2.3em... jne.
Yksikkö 1em on alkuperäinen koko. Luvun noustessa korkeammaksi kuin 1em fontin koko alkaa suureta. Laskiessa pienemmäksi kuin 1em fontin koko alkaa pienetä.

• 2em = fontti on kaksi kertaa alkuperäistä isompi. 14px olisi tällöin 28px kokoinen.
• 1.5em = fontti on puolitoista kertaa alkuperäistä isompi. 14px fontti olisi tällöin 21px kokoinen.
• 1em = fontti on alkuperäisen fontin kokoinen.
• 0.50em = fontti on alkuperäistä puolet pienempi. 14px fontti olisi tällöin 7px kokoinen.

Käytettävän fontin koon määritys tehdään CSS:n puolella:

Umlaut

Erikoismerkkejä kuten mm. ä, ö, å tulkinnan kanssa voi ilmetä ongelmia riippuen selaimesta ja käytettävästä merkistökoodauksesta. Periaatteessa utf-8 merkistökoodauksen pitäisi ymmärtää erikoismerkit, mutta jos kyseinen merkisto ei syystä tai toisesta suostu toimimaan, voidaan erikoismerkit muuttaa umlauteiksi muotoon " &auml; = ä, &ouml; = ö". Myös jos sivuille halutaan kirjoittaa koodinpätkiä muiden luettavaksi, on tällöin koodin erikoismerkit muutettava umlauteiksi, jotta selain ei tulkitsisi kyseisiä merkkejä koodiksi vaan tavalliseksi tekstiksi.

Skandinaaviset

Umlauteiksi muutettuna about-sivun teksti näyttäisi tältä:

<h1>Toinen sivu jonka nimi on about.html</h1> 
<p>T&auml;ll&auml; sivulla kerron jotain hieman enemm&auml;n minusta. 
T&auml;ss&auml; hieno kuva minusta:</p> 

<img src="mina.jpg" alt="kuva minusta" class="luokka1" />

<div class="luokka1"><p><a href="index.html">takaisin etusivulle.</a></p></div>

Lista merkistöseteistä (Merkistösetti) →
Lista tekstissä käytettävistä CSS-määritteistä (CSS -tagilista: Text) →
Lista fontissa käytettävistä CSS-määritteistä (CSS -tagilista: Font) →

Sivujen turvarajat

Sivuja suunnitellessa on hyvä ottaa huomioon sivujen turvarajat. Tämä tarkoittaa käyttäjien mahdollisesti käyttämää resoluutiota, sekä sitä, että käyttäjät eivät välttämättä pidä selainta täysikokoisessa ikkunassa. Jos sivun leveys ylittää 800-1000 pikseliä, selainikkunaan saattaa ilmestyä rullauspalkit, jotka voivat vaikeuttaa sivujen käytettävyyttä.

Sivujen turvarajaa mietittäessä kannattaa ottaa huomioon, että sivujen turvarajaan vaikuttavat myös padding- ja marginaaliarvot. Esimerkiksi sivuja ympäröivään divin arvoksi on voitu asettaa "margin:10px", tämä aiheuttaa sivujen ympärille kymmenen pikseliä näkymätöntä tilaa. Myös elementtiin body voi asettaa padding- ja marginarvoja. Nämä voidaan poistaa, jolloin sivujen ympärillä ei ole yhtään tyhjää tilaa, ellei sitä olla asetettu jostain muusta arvosta erikseen.

Se, mikä näkyy paljaalle silmälle ja elementtien järjestys

On tärkeää ottaa huomioon sivuja tehdessä, missä järjestyksessä materiaali tulee ja miltä sivu näyttää ilman graafista ilmettä. Jos käyttäjän selain ei ymmärrä jotain CSS-elementtiä, käyttäjä on kytkenyt CSS-tyylien ymmärryksen kokonaan pois, kuvatuki puuttuu tai jokin kuva ei lataudu, niin sivujen saavutettavuuden tulisi säilyä tästä huolimatta. Kannattaa testata, miltä sivu näyttää ilman kuvia ja tyylitiedostoa.

Hyviä miettimisen kohteita ovat: missä järjestyksessä sivuston otsikot (H1, H2, H3, H4) tulevat, missä järjestyksessä sivun sisältö koodataan, tuleeko kaksi palstaa sisältävällä sivulla kumpi palsta ensin. On myös hyvä jaksottaa teksti kappaleisiin, tämä parantaa luettavuutta sekä selkeyttää sisältöä koodin puolelta. Koodin selvä jaksottaminen/muotoilu selkeyttää jälkeenpäin sivujen muokattavuutta.

Kuvien tallentaminen Internettiin Photoshopilla

Menetelmä 1, sivujen grafiikka

Kaikki kuvat, jotka ovat osana jotain sivujen grafiikkaa, olisi järkevintä tallentaa Photoshopissa kohdasta File -> "Save for Web & Devices..." (Mac-pikanäppäin: shift+alt+omppu+s / PC-pikanäppäin: shift+alt+ctrl+s). Kaikkein ymmärrettävin tallennusmuoto on JPEG. Jos kuvat on tarkoitettu olemaan osittain läpinäkyviä, tallennusmuodoiksi tulee valita joko GIF tai PNG ja kytkeä kohta "Transparency" päälle. PNG-läpinäkyvyyttä tukevat kaikki modernit selaimet.

(Photoshop CS3, Windows)

Menetelmä 2, valokuvat

Valokuvia tallentaessa www-käyttöön, tallennuksessa kannattaa jättää väriprofiilin liittäminen tiedostoon pois kokonaan. Tämän valintavaihtoehdon voi valita, kun tiedostoa tallennetaan File -> "Save As..." (Mac-pikanäppäin: shift+omppu+s / PC-pikanäppäin: shift+ctrl+s) ja otetaan raksi kohdasta "Embed Color Profile: profiili" (Mac) / "ICC Profile: profiili" (Windows) pois. Näin kuvat näkyvät mahdollisimman samalla tavalla kaikilla selaimilla, eikä tiedostoa pakata jätemyllyn läpi, niin kuin Save for Web sen olisi tehnyt.

Väriprofiileja käytettäessä taas järkevimmiksi muodoiksi muodostuvat sRGB ja Color Match RGB, mutta suosittelen väriprofiilin pois jättämistä tiedosta.

(Photoshop CS3, Windows)

Tarkistuslista

Älä testaa käyttäjän kärsivällisyyttä

• Aseta sisältö heti tai helposti saataville. Älä piilottele sitä.
• Mieti sivuston latausaikoja. Pakkaa sisältöä jos se on mahdollista.
• Jatka-tästä-kotisivuilleni-sivut (introsivut) ovat turhia.

Yritä ennakoida virheitä

• Varmista että sivu on luettava ilman kuvia, tyylitiedostoja ja erillisiä skriptejä.
• Yritä rakentaa mahdollisemman monella selaimella ja selainalustalla toimiva sivu. Muista testata myös vanhemmilla selainversioilla.
• Yritä noudattaa jokaisen koodauskielen standardeja.
• Yksinkertaista. Älä yritä luoda kerralla liian monimutkaista. Yksinkertainen on helppo ylläpitää ja toimii suuremmalla todennäköisyydellä.
• Jaksota kirjoittamasi koodi, tee siitä mahdollisemman helposti ymmärrettävää ja kommentoi sitä. Käytä pieniä kirjaimia koodin kirjoittamiseen.

Ajattele enemmän käyttäjää kuin itseäsi

• Ole informatiivinen.
• Erottele navigaatiot selkeästi varsinaisesta sisällöstä.
• Tee tekstistä tarpeeksi isoa ja selvästi luettavaa. Katso, että teksti on kopioitavissa.
• Tee jokaiseen kuvaan alt-kuvaus.
• Huomioi turvarajat. Vältä turhien rullauspalkkien ilmestymistä vaakasuunnassa.
• Tee ensin sisältö, sitten vasta tyyli.
• Mieti missä järjestyksessä sisältö sivuilla tulee.
• Tarkista linkkien toimivuus ja tee sivujen välinen liikkuminen mahdollisemman helpoksi käyttäjälle.
• Älä pakota linkkejä aukeamaan uudessa ikkunassa. Vältä ponnahdusikkunoiden (popup) käyttöä.

Sivujen julkaiseminen

Yksi vaihtoehto Internetsivujen julkaisemiseen on FTP (File Transfer Protocol) -ohjelma. Tämän lisäksi tarvitaan sivutila jostain palvelimelta. Internetissä on erilaisia palveluita, jotka tarjoavat muutamia megoja "ilmaista" sivutilaa, jotka ovat yleisesti kuorrutettu täyteen mainoksia.

Laadukasta kotimaista sivutilaa tarjoavat mm. Arkku ja Servut. Myös Internetyhteyksien palveluntarjoajat (Elisa, Sonera, DNA, Saunalahti) tarjoavat yleensä n. 5-20 megaa ilmaista sivu- ja -sähköpostitilaa Internetliittymän omistajille. Kannattaa siis tarkistaa, tarjoaako Internetliittymäsi palveluntarjoaja tilaa sivuille.

Sivutilaa voi myös ostaa erikseen sitä myyviltä tahoilta. Lista maksullisista, kotimaisista hostingpalveluista löytyy http://www.hostingvertailu.org/ osoitteesta.

Lista editoreista ja ftp-ohjelmista →

Listat ja resurssit

xHTML 1.0 Transitional -tagilista

<ul> 
 <li>Listattava 1</li>
 <li>Listattava 2</li>
 <li>Listattava 3</li>
</ul>

<dl>
 <dt>Otsikko</dt>
 <dd>Kuvaus</dd>
 <dt>Otsikko #2</dt>
 <dd>Kuvaus #2</dd>
</dl>

<table border="1" cellspacing="5" 
cellpadding="5"> 
<tr>
 <th>1. Ensimmäinen palstaotsake</th>
 <th>2. Toinen palstaotsake</th>
</tr>
<tr>
 <td>1. Ensimmäinen rivi 
 1. Ensimmäinen palsta</td>
 <td>1. Ensimmäinen rivi
 2. Toinen palsta</td>
 <td>1. Ensimmäinen rivi
 3. Kolmas palsta</td>
</tr>
</table>

Attribuutti -lista

Attribuutin selitys:

Kohta "a" on tagi. Kohta "href" on attribuutti.

<table border="1"  cellpadding="5">
<tr>
 <th>1.Ensimmäinen palstaotsake</th>
 <th>2.Toinen palstaotsake</th>
</tr>
<tr>
 <td>1.Ensimmäinen rivi 1.Ensimmäinen palsta</td>
 <td>1.Ensimmäinen rivi 2.Toinen palsta</td> 
 <td>1.Ensimmäinen rivi 3.Kolmas palsta</td>
</tr>
</table>

<table border="1"  cellspacing="5"> 
<tr> 
<th>1.Ensimmäinen palstaotsake</th>
<th>2.Toinen palstaotsake</th> 
</tr>
<tr>
<td>1.Ensimmäinen rivi 1.Ensimmäinen palsta</td>
<td>1.Ensimmäinen rivi 2.Toinen palsta</td>
<td>1.Ensimmäinen rivi 3.Kolmas Kolumni</td>
</tr>
</table>

<table border="1" cellspacing="5">
<tr>
 <th>1. Ensimmäinen palsta</th>
 <th>2. Toinen palsta</th>
 <th>3. Kolmas palsta</th>
</tr>
<tr>
 <td>1. Ensimmäinen rivi 
 1. Ensimmäinen palsta
 </td>
 <td>1. Ensimmäinen rivi
 2. Toinen palsta
 </td>
 <td>1. Ensimmäinen rivi
 3. Kolmas palsta
 </td>
</tr>
<tr>
 <td  colspan="3"> 
 Kolmen palstan läpi menevä väliotsikko</td>
</tr>	
<tr>
 <td>2. Toinen rivi - Ensimmäinen palsta
</td>
 <td>2. Toinen rivi - 2. Toinen palsta</td>
 <td>2. Toinen rivi - 3. Kolmas palsta</td>
</tr>
</table>

<table border="1" cellspacing="5" cellpadding="5">
<tr>
 <td> Ensimmäinen solu vasemmalta</td>
 <td> Toinen solu keskeltä</td>
 <td  rowspan="2">
 Tämä kohta vie kaksi riviä oikealta
 </td>
</tr>
<tr>
 <td>Kolmas solu vasemmalta</td>
 <td>Neljäs ja keskimmäinen solu</td>
</tr>
<tr>
 <td>Viides solu vasemmalta</td>
 <td>Kuudes ja keskimmäinen solu alhaalta</td>
 <td>Seitsemäs ja viimeinen solu oikealta</td>
</tr>
</table>

<table border="1" cellspacing="5" width="400"> 
<tr>
 <th>1. Ensimmäinen palstaotsake</th>
 <th>2. Toinen palstaotsake</th>
 <th>3. Kolmas palstaotsake</th>
</tr>
<tr>
 <td  valign="top" height="400"> 
 1. Ensimmäinen rivi
 1. Ensimmäinen palsta
 Teksti tulee pystysuunnassa ylös.
 </td>
 <td  valign="middle"  height="400">
 1. Ensimmäinen rivi
 2. Toinen palsta 
 Teksti tulee pystysuunnassa keskelle.
</td>
 <td  valign="bottom"  height="400">
 1. Ensimmäinen rivi
 3. Kolmas palsta 
 Teksti tulee pystysuunnassa alas.
 </td>
</tr>
</table>

CSS -tagilista

body {
font-family: Arial, Verdana;
font-size: 12px;
background: #000000;
color: #ffffff;
}

a:link { 
color: red; 
text-decoration: none;
}
				
a:visited {
color: blue;
text-decoration: overline; 
} 
			
a:hover {
color: green;
text-decoration: underline;
} 
				
a:active { color: violet; } 
a:focus { color: orange; }

h1 {
font-family: georgia;
font-size:23px;
}

p {
color: green;
font-size:11px;
line-height:14px;
}

em { 
color: blue; 
line-height: 11px;
}

strong {
color: red;
}

ul {
padding: 10px 10px 10px 30px;
background: green;
border: 4px dotted black;
color:white;
}

ol {
padding: 10px 10px 10px 30px;
background: green;
border: 4px dotted black;
color:white;
}

li {
border-bottom: 1px solid black;
list-style: upper-alpha;
}

dl {
padding: 5px;
background: blue;
color:white;
}

dt {
padding: 5px;
background: green;
color:white;
}

dd {
padding: 5px;
background: red;
color:white;
}

img {
background: blue; 
padding:5px;
border: 2px solid red;
}

hr {
border:3px dashed red;
margin:10px;
background:green;
}

table {
background: blue;
border: 1px solid red;
padding: 10px;
color:white;
}

tr {
background: green;
color:white;
}

th {
background: orange;
color:white;
}

td {
background: black;
color:white;
}

blockquote {
background: #f2f2f2;
padding: 10px;
}

pre {
color:#444;
font-family: arial;
padding:5px;
background:#f2f2f2;
}

code {
background:green;
padding:1px;
}

del {
color:#ddd;
}

ins { 
color:red; 
}

/** CSS -kommentti **/

.elementti {
color: red !important;
}

background: #000000; 
	
background: #000000 
url("kuvan/polku.jpg"); 

background: #000000 
url("kuvan/polku.jpg") 
no-repeat; 

background: #000000 
url("kuvan/polku.jpg")
fixed;

background: #000000 
url("kuvan/polku.jpg") 
no-repeat fixed 
top center;

background-color: #000000; 
background-color: black; 
background-color: rgb(0,0,0); 
background-color: transparent;

background-image:url("bg.jpg");
background-image:none;

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

background-attachment: scroll;
background-attachment: fixed;

background-position: top left;
background-position: top center;
background-position: top right;
background-position: center left;
background-position: center center;
background-position: center right;
background-position: bottom left;
background-position: bottom center;
background-position: bottom right;
background-position: 10% 20%;
background-position: 10px 20px;

color: #000000;
color: black;
color: rgb(0,0,0);

direction: ltr;
direction: rtl;

line-height: normal;
line-height: 12px;
line-height: 2;
line-height: 120%;

letter-spacing: normal;
letter-spacing: 3px;

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

text-indent: 5px;
text-indent: 5%;

text-shadow: none;
text-shadow: #000;
text-shadow: 2px 2px 10px #000;

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;

white-space: normal;
white-space: pre;
white-space: nowrap;

word-spacing: normal;
word-spacing: 3px;

font: 11px/25px Arial, sans-serif;

font-family: "Helvetica Neue", 
Arial, Helvetica, 
Geneva, sans-serif;

font-family: sans-serif;

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 1.2em;
font-size: 12px;
font-size: 80%;

font-style: normal; 
font-style: italic;
font-style: oblique;

font-variant: normal;
font-variant: small-caps;

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

border: 5px dotted #000000;
border: 5px dotted black;
border: 5px dotted rgb(0,0,0);

border-color: #000000;
border-color: black;
border-color: rgb(0,0,0);

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

border-width: thin;
border-width: medium;
border-width: thick;
border-width: 5px;

border-top: 5px dashed #000000;
border-top: 5px dashed black;
border-top: 5px dashed rgb(0,0,0);

border-top-color: #000000;
border-top-color: black;
border-top-color: rgb(0,0,0);

border-top-style: none; 
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid; 
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
border-top-width: 5px;

border-right: 5px dashed #000000;
border-right: 5px dashed black; 
border-right: 5px dashed rgb(0,0,0);

border-right-color: #000000; 
border-right-color: black;
border-right-color: rgb(0,0,0);

border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

border-right-width: thin;
border-right-width: medium; 
border-right-width: thick;
border-right-width: 5px;

border-bottom: 5px dashed #000000;
border-bottom: 5px dashed black;
border-bottom: 5px dashed rgb(0,0,0);

border-bottom-color: #000000;
border-bottom-color: black;
border-bottom-color: rgb(0,0,0);

border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
border-bottom-width: 5px;

border-left: 5px dashed #000000;
border-left: 5px dashed black;
border-left: 5px dashed rgb(0,0,0);

border-left-color: #000000;
border-left-color: black;
border-left-color: rgb(0,0,0);

border-left-style: none; 
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

border-left-width: thin;
border-left-width: medium;
border-left-width: thick;
border-left-width: 5px;

outline: 5px dashed #00000; 
outline: 5px dashed black;
outline: 5px dashed rgb(0,0,0);

outline-color: #000000;
outline-color: black;
outline-color: rgb(0,0,0);
outline-color: invert;

outline-style: none; 
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset; 
outline-style: outset;

outline-width: thin;
outline-width: medium;
outline-width: thick;
outline-width: 5px;

margin: auto;
margin: 20px 20px 20px 20px;
margin: 20% 20% 20% 20%;

margin-top: auto;
margin-top: 20px;
margin-top: 20%;

margin-right: auto;
margin-right: 20px;
margin-right: 20%;

margin-bottom: auto;
margin-bottom: 20px;
margin-bottom: 20%;

margin-left: auto;
margin-left: 20px;
margin-left: 20%;

padding: auto;
padding: 20px 20px 20px 20px;
padding: 20% 20% 20% 20%;

padding-top: 20px;
padding-top: 20%;

padding-right: 20px;
padding-right: 20%;

padding-bottom: 20px;
padding-bottom: 20%;

padding-left: 20px;
padding-left: 20%;

list-style:inside lower-greek;

list-style-image: none;
list-style-image url("bg.jpg");

list-style-position: inside;
list-style-position: outside;

list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-alpha; 
list-style-type: upper-alpha;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: upper-latin;
list-style-type: hebrew;
list-style-type: armenian;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: hiragana;
list-style-type: katakana;
list-style-type: hiragana-iroha;
list-style-type: katakana-iroha;

border-collapse: collapse;
border-collapse: seperate;

border-spacing: 10px 10px;

caption-side: top;
caption-side: bottom;
caption-side: left;
caption-side: right;

empty-cells: show;
empty-cells: hide;

table-layout: auto;
table-layout: fixed;

height: auto;
height: 200px;
height: 50%;

width: auto;
width: 200px;
width: 50%;

max-height: none;
max-height: 200px;
max-height: 50%;

max-width: none;
max-width: 200px;
max-width: 50%;

min-height: 200px;
min-height: 50%;

min-width: 200px;
min-width: 50%;

float: left;
float: right;
float: none;

clear: left;
clear: right;
clear: both;
clear: none;

position: static;
position: relative;
position: absolute;
position: fixed;

display: none;
display: inline;
display: block;
display: list-item;
display: run-in;
display: compact;
display: marker;
display: table;
display: inline-table;
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-column-group;
display: table-column;
display: table-cell;
display: table-caption;

visibility: visible; 
visibility: hidden; 
visibility: collapse;

cursor: url;
cursor: auto;
cursor: crosshair;
cursor: default;
cursor: pointer;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: text;
cursor: wait;
cursor: help;

top: auto;
top: 20px;
top: 20%;

right: auto;
right: 20px;
right: 20%;

bottom: auto;
bottom: 20px;
bottom: 20%;

left: auto;
left: 20px;
left: 20%;

clip: rect(10px, 5px, 10px, 5px)

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: top;
vertical-align: text-top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: text-bottom;
vertical-align: 20px;
vertical-align: 25% 25%;

z-index: auto;
z-index: -1;

HEX-värit ja värikartta

HEX-värit (Hexadecimal) ovat yksi tapa ilmoittaa www-ympäristössä käytettävien värien väriarvo. HEX-värit rakentuvat merkeistä (A-F) ja numeroista (0-9) tyyliin #ffcc99. Värit voidaan laskea matemaattisella kaavalla, mutta niiden selvittämiseksi on olemassa myös sovelluksia, jotka ilmoittavat värien arvot suoraan ilman itsesuoritettavaa laskutoimitusta. Lähes kaikki kuvankäsittelyohjelmat osaavat ilmoittaa värejä hex-arvoina, sekä osa koodin koodin suoltamiseen tarkoitetuista editoreistakin osaa kaivaa nämä arvot esille. Webpohjaisia värisovelluksia hex-värejen ilmoittamiseen on: 

• ColorSchemer - Online Color Scheme Generator
• Name that Color - Chirag Mehta : chir.ag
• Online color chart picker
• [ws] Color Scheme Generator 2
• 4096 Color Wheel Version 2.1
• ColorMixers: Remixing RGB since 2003
• ColorBlender.com | Your free online color matching toolbox

Merkistösetti

Skandinaaviset

Koodissa käytettävät

Symbolit

Lista editoreista ja ftp-ohjelmista

Windows

Mac

Lähteitä

• http://w3.org/
• http://www.w3schools.com/
• http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Lista käytetyistä Javascript ominaisuuksista.

Thank You for Flying with Us!

© Jani Penttinen (jani.penttinen at valontuoja.net) - 2008 - Joitain oikeuksia pidätetään.
Tämän teosteoksen käyttöoikeutta koskee Creative Commons Nimeä-Epäkaupallinen-Tarttuva 1.0 Suomi-lisenssi.