Hyppää suoraan sisältöön ↓

Teemavaihtoehdot

Vaihda ulkoasu

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
  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
  3. CSS -tagilista
  4. Merkistösetti
  5. HEX-värit ja värikartta
  6. Lista editoreista ja ftp-ohjelmista
  7. Lähteitä

Muutama sana teoksesta

xHTML+CSS Survival Kit

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.

Creative Commons License by-nc-sa

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 →

Windows -käyttöympäristössä muistiosovelluksen löydät "käynnistä -> ohjelmat -> apuohjelmat -> muistio".
Mac OS X -käyttöympäristössä muistiosovelluksen löydät "finder -> ohjelmat -> texturi".

Tärkeä huomautus TeXturin käyttäjille!

Mac OS X:n muistiosovellus Texturi:sta joudutaan kytkemään rikkaan tekstin (rich text) ymmärtäminen ja kirjoittaminen pois päältä, jotta se saadaan ymmärtämään html koodia.

Asetukset löytyvät: TeXturi -> Asetukset

Välilehdestä "Uusi dokumentti" voidaan käydä valitsemassa kohta: "Muoto: Pelkkä teksti".

Välilehdestä "Avaa ja tallenna" voidaan käydä muutamassa kohdat:

  • "HTML-tiedostojen tallennusvalinnat" kohtaan Dokumentin tyyppi: "XHTML 1.0 Transitional"
  • Tyylittely: "CSS dokumentissa"
  • Koodaus "Unicode (UTF-16)"

Katso kuva.

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:

html
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>

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

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>.

Kun noudatetaan jokaisen kielen omia standardeja, taataan sivujen ymmärrettävyys myös tulevaisuudessa eri selaimilla. Vaikka standardeja pystyttäisiinkin noudattamaan aivan täydellisesti, se ei välttämättä tee sivusta toimivaa kokonaisuutta. Sivujen testaaminen kaikilla mahdollisilla selaimilla ja käyttöjärjestelmäalustoilla on kaiken A ja O, sillä jokaisella selaimella ja selainalustalla on oma tyypillinen tapansa tulkita koodausta. Parhain tapa tarkistaa koodin kelpoisuus on käyttää The W3C Markup Validation Service:ä (http://validator.w3.org/).

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.

Osa koodin kirjoittamiseen tarkoitetuista editoreista eivät osaa tallentaa välttämättä dokumenttia siihen muotoon, että UTF-8 merkistö olisi käytettävissä. Esim. Mac OS X muistiossa tiedostot pitävät tallentaa UTF-16 muodolla, jotta skandinaavialaiset merkit eivät särkyisi tallentaessa. Jos dokumentit ääkköset hajoavat itse sivulla, voidaan ne muuttaa umlauteiksi. Vepissä käytettävät fontit, erikoismerkit ja umlaut →

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.

Kaikki kirjoitetut tagit tulevat sulkea sulkujärjestyksessä.

<h2><a href="http://www.osoite.com/">Otsikko</h2></a> on väärin suljettu.
<h2><a href="http://www.osoite.com/">Otsikko</a></h2> on oikein suljettu.

xHTML 1.0 Transitional kielessä vaaditaan, että kaikki koodissa esiintyvät tagit ovat pieniä kirjaimia (lower case).

<A HREF="http://www.osoite.com/">Linkki</A> on väärin kirjoitettu.
<a href="http://www.osoite.com/">Linkki</a> on oikein kirjoitettu.

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ä.

Ennen kuin aletaan tekemään useita sivuja ja linkittämään niitä, olisi hyvä yrittää viimeistellä ensimmäinen sivu mahdollisemman pitkälle, sekä miettiä, kuinka monta sivua kokonaisuudessa halutaan olevan. Tämä vähentää työtä tulevaisuudessa kun mahdolliset virheet saadaan eliminoitua yhdestä sivusta, jotta niitä ei myöhemmin tarvitse eliminoida monesta sivusta.

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

html
<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>

Sivujen linkittäminen, hyperlinkit

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:

html
<!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>

Sivukokonaisuuden luominen, kuvien liittäminen

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" />

Kuvan voi linkittää tyyliin <a href="http://osoite.com/"><img src="kuva.jpg" alt="etusivu" /></a>.
Kuvaan voi määrittää rajat lisäämällä border="1" tai vaihtoehtoisesti rajat pois . Mitä suurempi numero, sitä paksummat rajat.

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

html
<!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>

Vaihe 4 -Sivukokonaisuuden luominen, kuvien liittäminen

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
<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:

CSS
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.

Vaihe 5 - Tyylitiedoston luominen

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:

  • margin-top:10px;
  • margin-right:5px;
  • margin-bottom:5px;
  • margin-left:20px;

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

Jos koodiin kirjoitetaan 0 -> 0px sijasta, selain tulkitsee tämän oman oletusarvonsa mukaan.

Arvo 0 = selain käyttää omia oletuksia.
Arvo 0px = none.

Class ja ID

Avaamme about -sivun uudelleen ja muokkaamme koodia:

html
<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:

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

Class ja ID

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.

<div id="kohta"> merkitään CSS puolella #kohta
<div class="kohta"> merkitään CSS puolella .kohta

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:

html
<ul>
 <li><a href="#">linkki</a></li>
 <li><a href="#">linkki</a></li>
 <li><a href="#">linkki</a></li>
</ul>
  • ul = unordered list (järjestämätön listaus)
  • ol = ordered list (järjestetty listaus)
  • li = list item (listattava kohde)

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

CSS:

CSS
ul { }
ul li { }

tai

CSS
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:

html
<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.

html
<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.

  • dl = definition list
  • dt = definition term
  • dd = definition description

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:

html
<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:

html
<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.

  • tr = table row
  • th = table header cell
  • td = table data cell

Toisen palstan luominen

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

html
<!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:

CSS
#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;
     }

Vaihe 11 - Toisen palstan luominen

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.

Jos haluamme keskittää tehdyn sivun, lisäämme kohtaan #container marginaaliin arvot "margin:10px auto 0 auto;", niin sivun kehys keskittyy. Tätä komentoa käytettäessä, tulee div-tason leveys määrittää.

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:

body { font-family: Arial, Verdana, "Courier New"; }

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
Windows Mac Huomautus
Arial   Arial, Helvetica    
Arial Black   Arial Black, Gadget    
Impact   Impact, Charcoal   Charcoal toimii vain jos Mac OS Classic on asennettu.
Lucida Sans Unicode   Lucida Grande    
Tahoma   Geneva    
Trebuchet MS   Helvetica   Trebuchet MS tuli ensimmäisen kerran Windows 2000/XP mukana.
Verdana   Verdana, Geneva    
MS Sans Serif   Geneva   Ms Sans Serif on bittikarttafontti, joka on suunniteltu käytettäväksi 8, 10, 12, 14, 18 ja 24 pikselin kokoisena.
Serif
Windows Mac Huomautus
Georgia   Georgia   Georgia tuli ensimmäisen kerran Windows 2000/XP mukana.
Palatino Linotype, Book Antiqua   Palatino   Palatino Linotype tuli ensimmäisen kerran Windows 2000/XP mukana. Book Antiqua tuli ensimmäisen kerran Windows 98 mukana. Palation toimii vain jos Mac OS Classic on asennettu.
Times New Roman   Times    
MS Serif   New York   MS Serif on bittikarttafontti, joka on suunniteltu käytettäväksi 8, 10, 12, 14, 18 ja 24 pikselin kokoisena.
Monospace, Cursive, Symbols
Windows Mac Huomautus
Courier New   Courier New    
Lucida Console   Monaco    
Comic Sans MS   Comic Sans MS    
Symbol (Symbol) Symbol (Symbol)  
Webdings (Webdings) Webdings (Webdings)  
Wingdings (Wingdings) Zapf, Dingbats    

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:

font-size: arvo|ysikkö;

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
Merkki umlaut Merkki umlaut
å &aring; Å &Aring;
ä &auml; Ä &Auml;
ö &ouml; Ö &Ouml;

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

html
<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.

Jos sivut kasataan suurista graafisista elementeistä, kannattaa huomioida, että mitä enemmän grafiikkaa sivuilla käyttää, sitä raskaammaksi ne muuttuvat ja sitä pidempi on sivujen latausaika.

save for web
(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.

save as
(Photoshop CS3, Windows)

Tarkistuslista

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

Yritä ennakoida virheitä

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

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

Tagi Attribuutti Esimerkki / kuvaus
<head>    
<body>    
<p> </p> [1]

<p>Paragrafi</p>

Esimerkkisivu »

<br/> [1]

Kohta <br/>
on rivivaihto.

Esimerkkisivu »

<b> </b> <strong> </strong> [1]

<strong>Lihavoitu teksti</strong>

Esimerkkisivu »

<u> </u> [1]

<u>Alleviivaus</u>

Esimerkkisivu »

<i> </i> <em> </em> [1]

<em>Kursivoitu teksti</em>

Esimerkkisivu »

<a> </a> href, [1], target, name, rel, rev, type, tabindex, accesskey

<a href="http://google.com">Tästä Googleen</a>

Esimerkkisivu »

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> [1], title, align

<h1>Sivun pääotsikko</h1>

Esimerkkisivu »

<ul> </ul> [1], compact, type
<ul> 
 <li>Listattava 1</li>
 <li>Listattava 2</li>
 <li>Listattava 3</li>
</ul>

Esimerkkisivu »

<ol> </ol> [1], compact, type
<li> </li> [1], type, value
<dl> </dl> [1]
<dl>
 <dt>Otsikko</dt>
 <dd>Kuvaus</dd>
 <dt>Otsikko #2</dt>
 <dd>Kuvaus #2</dd>
</dl>

Esimerkkisivu »

<dt> </dt> [1]
<dd> </dd> [1]
<div> </div> [1], align

<div align="center">Keskitetty teksti</div>

Esimerkkisivu »

<img /> alt, src (pakolliset), [1], height, width, align, border

<img src="kuva" alt="kuvaus" width="10" height="10" border="0" />

<table> </table>
 [1], border, cellpadding, cellspacing, frame, rules, summary, width

<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>

Esimerkkisivu »

<tr> </tr> [1], align, valign
<th> </th> [1], align, valign, abbr, colspan, rowspan, scope
<td> </td> [1], align, valign, abbr, colspan, rowspan, scope
<blockquote> </blockquote> [1], cite

<blockquote>lainattava teksti</blockquote>

Esimerkkisivu »

<pre> </pre> [1], width

<pre>Automaattisesti muotoiltu teksti</pre>

Esimerkkisivu »

<code> </code> [1]

<code>koodi</code>

Esimerkkisivu »

<del> </del> [1]

<del cite="http://example.com" datetime="20080101">poistettu teksti</del>

  • datetime = milloin on poistettu
  • cite = selitys miksi

Esimerkkisivu »

<ins> </ins> [1]

<ins cite="http://example.com" datetime="20080101">poistettu teksti korvataan</ins>

  • datetime = milloin on lisätty
  • cite = selitys miksi

Esimerkkisivu »

<!-- -->  

<!-- Koodia voi kommentoida näin. Tämä ei tule näkyviin itse sivulle, vaan näkyy pelkästään sivun lähdekoodissa kommenttina. -->

<hr /> [1], align, noshade, size, width

Horizontal Rule
<hr />

Esimerkkisivu »

[1] = Standardit Attribuutit: id, class, title, style, dir

Attribuutti -lista

Attribuutin selitys:

<a href="http://osoite.com">www.osoite.com</a>

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

Attribuutti Asetusarvo Esimerkki
Standardit Attribuutit
id id_name

<div id="menu">Uniikkiarvo elementille.</div>

Ei tuetut elementit: base, head, html, meta, param, script, style, title

class class_rule
style_rule

<div class="info">CSS-luokka jota käytetään.</div>

Ei tuetut elementit: base, head, html, meta, param, script, style, title  

title tooltip_text

Elementin kuvaus.

<a href="http://google.com" title="Klikkaamalla tästä pääset Googleen">Googleen</a>

Ei tuetut elementit: base, head, html, meta, param, script, style, title

Esimerkkisivu »

style style_defination <p style="background:black; color:white; padding:10px;">Tausta on musta, teksti valkea ja sisennystä on 10px verran.</p>

Ei tuetut elementit: base, head, html, meta, param, script, style, title

Esimerkkisivu »

dir ltr (left to right)
rtl (right to left)

Kääntää kirjoitussuunnan.

<p dir="rtl">Tämä teksti menee nyt oikealta vasemmalle.</p>

Ei tuetut elementit: base, br, frame, frameset, hr, iframe, param, script

Esimerkkisivu »

Muut Attribuutit
href url (polku/osoite) <a href="http://google.com">google.com</a>

Esimerkkisivu »

target _blank
_parent
_self
_top

<a href="http://google.com" target="_blank">Sivu avataan uuteen ikkunaan</a>

  • _blank - aukaisee uuteen ikkunaan
  • _self - aukaisee samaan ikkunakehykseen
  • _parent - aukaisee pääkehykseen
  • _top - aukaisee pääkehykseen

Linkit avataan oletusarvoisesti aktiivisena olevassa ikkunassa. Tähän toimintoo ei tarvitse määrittää erikseen target -arvoa.

Esimerkkisivu »

src url (polku/osoite) <img src="http://osoite.com/kuva.jpg" alt="kuvaus" />

Esimerkkisivu »

alt tekstiä

Kuvatiedoston kuvaus.

<img src="kuva.jpg" alt="tälle kuvalle määritetään kuvaus" />

Esimerkkisivu »

border numeroita

Elementin (kuva, table) raja.

<img src="kuva.jpg" alt="kuvaus" border="0" />

Attribuutti border kannattaa asettaa suoraan arvoksi border= "0" ja määrittää elementin raja CSS-tyylin kautta.

Esimerkkisivu »

width numeroita <img src="kuva.jpg" width="400" alt="kuvaus" />

Esimerkkisivu »

height numeroita <img src="kuva.jpg" height="400" alt="kuvaus" />

Esimerkkisivu »

align left
center
right
<div align="right">Tämä teksti siirtyy oikealle</div>

Esimerkkisivu »

cite tekstiä <blockquote cite="http://google.com">sitaatti</blockquote>

Esimerkkisivu »

accesskey a-z

Pikanäppäimet.

<a href="toinen_sivu.html" accesskey="a">Paina Windowssissa Alt + A tai Macissa Ctrl + A nähdäksesi toisen sivun</a>

Accesskeytä tukevat tagit: a, area, button, input, label, legend, textarea.

Esimerkkisivu »

cellpadding numeroita

Tablessa olevien solujen sisennys.

<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>

Esimerkkisivu »

cellspacing numeroita

Solujen erottelu.

<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>

Esimerkkisivu »

colspan numeroita
<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>

Esimerkkisivu »

rowspan numeroita
<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>

Esimerkkisivu »

valign top
middle
bottom
baseline
<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>

Esimerkkisivu »

CSS -tagilista

Elementti Määritettävissä olevat ominaisuudet Esimerkki / kuvaus
Peruskäyttö
body Background
Text
Font
Border
Margin
Padding
List
 

Tähän kirjoitetut arvot vaikuttavat yleisesti kaikkeen sivulla olevaan, ellei tämän kohdan arvoja ylikirjoitetta jossain toisessa kohdassa. Esim. kirjasintyylin ja koon voi määrittää tähän.

body {
font-family: Arial, Verdana;
font-size: 12px;
background: #000000;
color: #ffffff;
}
a:link
a:visited
a:hover
a:active
a:focus
Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti

Sivulla esiintyvien hyperlinkkien tyylit voidaan määrittää seuraavasti.

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; }
  • a:link - on linkki
  • a:visited - on vierailtu linkki
  • a:hover - on aktiivisena oleva linkki
  • a:active - on aktivoitu linkki
  • a:focus - on kohdistettu linkki (Internet Explorer ei tue tätä)

Esimerkkisivu »

h1, h2, h3, h4, h5, h6 Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
h1 {
font-family: georgia;
font-size:23px;
}

Esimerkkisivu »

p Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
p {
color: green;
font-size:11px;
line-height:14px;
}

Esimerkkisivu »

em / i Background
Text
Font
Border
Outline
Margin
Padding
Luokittelu
Sijainti
em { 
color: blue; 
line-height: 11px;
}

Esimerkkisivu »

strong / b Background
Text
Font
Border
Outline
Margin
Padding
Luokittelu
Sijainti
strong {
color: red;
}

Esimerkkisivu »

ul Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
ul {
padding: 10px 10px 10px 30px;
background: green;
border: 4px dotted black;
color:white;
}

Esimerkkisivu »

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

Esimerkkisivu »

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

Esimerkkisivu »

dl Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
dl {
padding: 5px;
background: blue;
color:white;
}

Esimerkkisivu »

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

Esimerkkisivu »

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

Esimerkkisivu »

img Background
Border
Outline
Margin
Padding
Luokittelu
Sijainti
img {
background: blue; 
padding:5px;
border: 2px solid red;
}

Esimerkkisivu »

hr Background
Border
Outline
Margin
Padding
Luokittelu
Sijainti
hr {
border:3px dashed red;
margin:10px;
background:green;
}

Esimerkkisivu »

table Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
table {
background: blue;
border: 1px solid red;
padding: 10px;
color:white;
}

Esimerkkisivu »

tr
tr {
background: green;
color:white;
}

Esimerkkisivu »

th
th {
background: orange;
color:white;
}

Esimerkkisivu »

td
td {
background: black;
color:white;
}

Esimerkkisivu »

blockquote Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
blockquote {
background: #f2f2f2;
padding: 10px;
}

Esimerkkisivu »

pre Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
pre {
color:#444;
font-family: arial;
padding:5px;
background:#f2f2f2;
}

Esimerkkisivu »

code Background
Text
Font
Border
Outline
Margin
Padding
List
Luokittelu
Sijainti
code {
background:green;
padding:1px;
}

Esimerkkisivu »

del Background
Text
Font
Border
Outline
Margin
Padding
Luokittelu
Sijainti
del {
color:#ddd;
}

Esimerkkisivu »

ins Background
Text
Font
Border
Outline
Margin
Padding
Luokittelu
Sijainti
ins { 
color:red; 
}

Esimerkkisivu »

/** **/  
/** CSS -kommentti **/
!important  
.elementti {
color: red !important;
}

!important ylikirjoittaa arvon. Käytetään jos sivulle olevat arvot menevät päällekkäin.

Ominaisuus Asetusarvo Esimerkki / kuvaus
Background
background background-color
background-image
background-repeat
background-attachment
background-position

Lyhennetty tapa ilmaista määritteet.

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 color-hex
color-name
color-rgb
transparent

Määrittää taustalle värin.

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

Esimerkkisivu »

background-image url (polku/osoite)
none

Määrittää taustakuvan.

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

Esimerkkisivu »

background-repeat repeat
repeat-x
repeat-y
no-repeat

Määrittää toistuuko taustakuva.

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

Esimerkkisivu »

Esimerkkisivu »

Esimerkkisivu »

Esimerkkisivu »

background-attachment scroll
fixed

Määrittää onko taustakuva mukana scrollaava (scroll) vai paikallaan pysyvä (fixed).

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

Esimerkkisivu »

Esimerkkisivu »

background-position top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

Määrittää taustakuvan sijainnin.

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;

Esimerkkisivu »

Text
color väriarvo

Määrittää käytettävän tekstin värin.

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

Esimerkkisivu »

direction ltr (left to right)
rtl (right to left)

Määrittää käytettävän tekstin kirjoitussuunnan.

direction: ltr;
direction: rtl;

Esimerkkisivu »

line-height normal
numeroita
lenght
%

Määrittää käytettävän tekstin rivikorkeuden.

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

Esimerkkisivu »

letter-spacing normal
length

Määrittää käytettävän kirjainten välin.

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

Esimerkkisivu »

text-align left
right
center
justify

Määrittää käytettävän tekstin sijainnin.

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

Esimerkkisivu »

text-decoration none
underline
overline
line-through

Määrittää käytettävän tekstin koristuksen.

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

Esimerkkisivu »

text-indent lenght
%

Määrittää tekstin ensimmäisen rivin sisennyksen.

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

Esimerkkisivu »

text-shadow none
color
lenght
 

Määrittää tekstiin varjon.

Huomautus! Toimii vain: Safari.

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

Esimerkkisivu »

text-transform none
capitalize
uppercase
lowercase

Määrittää tekstin muotoilun.

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

Esimerkkisivu »

white-space normal
pre
nowrap

Määrittää rivitetäänkö teksti automaattisesti.

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

Esimerkkisivu »

word-spacing normal
lenght

Määrittää käytettävien sanojen välin.

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

Esimerkkisivu »

Font
font font-size / line-height
font-family
font-style
font-variant
font-weight
caption
small-caption

Lyhennetty tapa ilmaista määritteet.

font: 11px/25px Arial, sans-serif;
font-family family-name
generic-family
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

Määrittää käytettävät fontit.

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

font-family: sans-serif;
font-size xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
lenght
%

Määrittää fontin koon.

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%;

Esimerkkisivu »

font-style normal
italic
oblique
 

Määrittää fontin tyylin (normaali/kursivoitu/lihavoitu).

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

Esimerkkisivu »

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

Esimerkkisivu »

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

Määrittää fontin paksuuden.

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;

Esimerkkisivu »

Border
border border-width
border-style
border-color

Lyhennetty tapa ilmaista määritteet. Määrittää rajan jokaiseen reunaan (ylös, oikea, alas, vasen).

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

Esimerkkisivu »

border-color väriarvo

Määrittää rajassa käytettävän värin.

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

Esimerkkisivu »

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

Määrittää rajassa käytettävän tyylin.

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;

Esimerkkisivu »

border-width thin
medium
thick
length

Määrittää rajan paksuuden.

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

Esimerkkisivu »

border-top
border-top border-top
border-top-width
border-style
border-color

Lyhennetty tapa ilmaista määritteet. Määrittää rajan yläreunaan.

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

Esimerkkisivu »

border-top-color väriarvo

Määrittää rajan yläreunassa käytettävän värin.

border-top-color: #000000;
border-top-color: black;
border-top-color: rgb(0,0,0);
border-top-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Määrittää rajan yläreunassa käytettävän tyylin.

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
medium
thick
length

Määrittää rajan yläreunassa käytettävän paksuuden.

border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
border-top-width: 5px;
border-right
border-right border-right
border-right-width
border-style
border-color

Lyhennetty tapa ilmaista määritteet. Määrittää rajan oikeaan reunaan.

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

Esimerkkisivu »

border-right-color väriarvo

Määrittää rajan oikeassa reunassa käytettävän värin.

border-right-color: #000000; 
border-right-color: black;
border-right-color: rgb(0,0,0);
border-right-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Määrittää rajan oikeassa reunassa käytettävän tyylin.

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
medium
thick
length

Määrittää rajan oikeassa reunassa käytettävän paksuuden.

border-right-width: thin;
border-right-width: medium; 
border-right-width: thick;
border-right-width: 5px;
border-bottom
border-bottom border-bottom
border-bottom-width
border-style
border-color

Lyhennetty tapa ilmaista määritteet. Määrittää rajan alareunaan.

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

Esimerkkisivu »

border-bottom-color väriarvo

Määrittää rajan alareunassa käytettävän värin.

border-bottom-color: #000000;
border-bottom-color: black;
border-bottom-color: rgb(0,0,0);
border-bottom-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Määrittää rajan alareunassa käytettävän tyylin.

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
medium
thick
length

Määrittää rajan alareunassa käytettävän paksuuden.

border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
border-bottom-width: 5px;
border-left
border-left border-left
border-left-width
border-style
border-color

Lyhennetty tapa ilmaista määritteet. Määrittää rajan vasempaan reunaan.

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

Esimerkkisivu »

border-left-color väriarvo

Määrittää rajan vasemmassa reunassa käytettävän värin.

border-left-color: #000000;
border-left-color: black;
border-left-color: rgb(0,0,0);
border-left-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Määrittää rajan vasemmassa reunassa käytettävän tyylin.

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
medium
thick
length

Määrittää rajan vasemmassa reunassa käytettävän paksuuden.

border-left-width: thin;
border-left-width: medium;
border-left-width: thick;
border-left-width: 5px;
Outline
(Tämä ei toimi Internet Explorer-selaimella! Käytä mieluimmin määritettä border.)
outline outline-width
outline-style
outline-color

Lyhennetty tapa ilmaista määritteet. Luo rajan elementin rajan ulkopuolella.

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

Esimerkkisivu »

outline-color väriarvo
invert

Määrittää elementin ulkopuolella olevan rajan värin.

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

Esimerkkisivu »

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

Määrittää elementin ulkopuolella olevan rajan tyylin.

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;

Esimerkkisivu »

outline-width thin
medium
thick
length

Määrittää elementin ulkopuolella olevan rajan paksuuden.

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

Esimerkkisivu »

Margin
margin margin-top
margin-right
margin-bottom
margin-left

Lyhennetty tapa ilmaista määritteet. Määrittää marginaalin jokaiseen kulmaan. margin: 20px 20px 20px 20px = ylös 20px / alas 20px / oikealle 20px / vasemmalle 20px.

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

Esimerkkisivu »

margin-top auto
length
%

Määrittää marginaalin ylös.

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

Esimerkkisivu »

margin-right auto
length
%

Määrittää marginaalin oikealle.

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

Esimerkkisivu »

margin-bottom auto
length
%

Määrittää marginaalin alas.

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

Esimerkkisivu »

margin-left auto
length
%

Määrittää marginaalin vasemmalle.

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

Esimerkkisivu »

Padding
padding padding-top
padding-right
padding-bottom
padding-left

Lyhennetty tapa ilmaista määritteet. Määrittää sisennyksen jokaiseen kulmaan. padding: 20px 20px 20px 20px = ylös 20px / alas 20px / oikealle 20px / vasemmalle 20px.

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

Esimerkkisivu »

padding-top length
%

Määrittää sisennyksen ylös.

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

Esimerkkisivu »

padding-right length
%

Määrittää sisennyksen oikealle.

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

Määrittää sisennyksen alas.

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

Esimerkkisivu »

padding-left length
%

Määrittää sisennyksen vasemmalle.

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

Esimerkkisivu »

List
list-style list-style-type
list-style-position
list-style-image

Lyhennetty tapa ilmaista määritteet. Määrittää listatauksen.

list-style:inside lower-greek;
list-style-image none
url

Määrittää listauksessa käytettävän listamerkin tilalle kuvan.

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

Määrittää onko listauksessa käytettävä listamerkki sisäpuolella vai ulkopuolella.

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

Esimerkkisivu »

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

Määrittää listauksessa käytettävän listamerkin tyylin.

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;

Esimerkkisivu »

Table
border-collapse collapse
separate

Määrittää erotellaanko taulukoiden väli yhdeksi rajaksi.

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

Esimerkkisivu »

border-spacing length length

Määrittää taulukoiden reunojen välisen välin.

border-spacing: 10px 10px;

Esimerkkisivu »

caption-side top
bottom
left
right

Määrittää taulukon otsikon sijainnin.

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

Esimerkkisivu »

empty-cells show
hide

Määrittää näytetäänkö tyhjiä soluja.

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

Esimerkkisivu »

table-layout auto
fixed

Määrittää taulukon pohjan.

table-layout: auto;
table-layout: fixed;
Height & Width
height auto
length
%

Määrittää elementin korkeuden.

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

Esimerkkisivu »

width auto
length
%

Määrittää elementin leveyden.

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

Esimerkkisivu »

max-height none
length
%

Määrittää elementin maksimikorkeuden.

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

Määrittää elementin maksimileveyden.

max-width: none;
max-width: 200px;
max-width: 50%;
min-height length
%

Määrittää elementin minimikorkeuden.

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

Määrittää elementin minimileveyden.

min-width: 200px;
min-width: 50%;
Luokittelu
float left
right
none

Määrittää elementin sijainnin.

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

Esimerkkisivu »

clear left
right
both
none

Nollaa elementin sijainnin.

clear: left;
clear: right;
clear: both;
clear: none;
position static
relative
absolute
fixed

Määrittää elementin olomuodon.

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

Määrittää minkälaisena elementti luetaan.

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
hidden
collapse

Määrittää elementin näkyvyyden.

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

Määrittää käytettävän hiirenkursorin.

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;

Esimerkkisivu »

Sijainti
top auto
lenght
%

Määrittää elementin sijainnin yläreunasta.

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

Esimerkkisivu »

right auto
lenght
%

Määrittää elementin sijainnin oikeasta reunasta.

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

Esimerkkisivu »

bottom auto
lenght
%

Määrittää elementin sijainnin alareunasta.

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

Esimerkkisivu »

left auto
lenght
%

Määrittää elementin sijainnin vasemmasta reunasta.

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

Esimerkkisivu »

clip shape
auto

Määrittää elementin rajaamisen.

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

Esimerkkisivu »

overflow visible
hidden
scroll
auto

Määrittää elementin ylivuodon (luo mahdollisuuden käyttää div-tasoissa rullauslaatikoita).

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

Esimerkkisivu »

vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%

Määrittää elementin pystysuuntaisen tekstin asettelun. Missä kohdassa teksti sijaitsee pystysuunnassa.

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%;

Esimerkkisivu »

z-index auto
number

Määrittää elementtien tason. Missä järjestyksessä elementit tulevat.

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

Esimerkkisivu »

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: 

#ffffff #cccccc #999999 #666666 #333333 #000000
#ffcccc #ff9999 #ff6666 #ff3333 #ff0000
#cc9999 #cc6666 #cc3333 #cc0000
#996666 #993333 #990000
#663333 #660000
#330000
#ffcc99 #ffcc66 #ffcc33 #ff9933 #ff9900
#cc9966 #cc9933 #cc9900 #cc6600
#996633 #996600 #663300
#ffffcc #ffff99 #ffff66 #ffff33 #ffff00
#cccc99 #cccc66 #cccc33 #cccc00
#999966 #999933 #999900
#666633 #666600
#333300
#ccffcc #99ff99 #66ff66 #33ff33 #00ff00
#99cc99 #66cc66 #33cc33 #00cc00
#669966 #339933 #009900
#336633 #006600
#003300
#ccffff #99ffff #66ffff #33ffff #00ffff
#00ffff #66cccc #33cccc #00cccc
#669999 #339999 #009999
#336666 #006666
#003333
#ccccff #9999ff #6666ff #3333ff #0000ff
#9999cc #6666cc #3333cc #0000cc
#666699 #333399 #000099
#333366 #000066
#000033
#ffccff #ff99ff #ff66ff #ff33ff #ff00ff
#cc99cc #cc66cc #cc33cc #cc00cc
#996699 #993399 #990099
#663366 #660066
#330033

Merkistösetti

Skandinaaviset

Merkki umlaut Merkki umlaut
å &aring; Å &Aring;
ä &auml; Ä &Auml;
ö &ouml; Ö &Ouml;

Koodissa käytettävät

Merkki umlaut Merkki umlaut
" &quot; ' &apos;
<   &lt; >   &gt;
& &amp;    

Symbolit

Merkki umlaut Merkki umlaut
  &nbsp; ¡ &iexcl;
¢ &cent; £ &pound;
¤ &curren; ¥ &yen;
¦ &brvbar; § &sect;
¨ &uml; © &copy;
ª &ordf; × &times;
¬ &not; ­ &shy;
® &reg; ¯ &macr;
° &deg; ¹ &sup1;
±   &plusmn; ²   &sup2;
´ &acute; ³ &sup3;
&para; · &middot;
¸ &cedil; µ &micro;
º &ordm; º &ordm;
» &raquo; ½   &frac12;
«   &laquo; ¼ &frac14;
¿ &iquest; ¾ &frac34;
÷ &divide;    

Lista editoreista ja ftp-ohjelmista

Windows

Editori FTP-ohjelma
Kaupalliset
Ilmaiset

Mac

Editori FTP-ohjelma
Kaupalliset
Ilmaiset

Lähteitä

Lista käytetyistä Javascript ominaisuuksista.

Thank You for Flying with Us!

Sisällysluettelo