CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

Download "CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:"

Transkriptio

1 CSS CSS on merkintäjärjestelmä, jolla voidaan esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia. Yhtä kokonaisuutta sanotaan tyyliohjeeksi eli tyylisäännöstöksi, englanniksi style sheet. (Korpela 2003, 2.) Hieman erilainen paketti pdf tiedostona. Tämä materiaali vastaa kysymyksiin kuten: - Miksi tällaista typerää, minä onnistuin ihan hyvin vääntämään sivuni Front Pagella? - Osaan käyttää Dreamweaveria, eikö se muka riitä? - Teen sivuni Flashillä ja viittaan CSS:lle kintaalla, joten saanen olla rauhassa? - Onko kyseessä vaikea tapa tehdä sivuja? - Miksen vois vaan kirjoittaa sivujani Wöördillä? Materiaalin tarkoitus on myös vasta tärkeimpään kysymykseen eli mitä hyötyä CSS:n käyttämisestä on? Lyhyesti sanottuna kyse on seuraavista eduista. Helppo päivitettävyys, koska päivitettäviä tiedostoja on vain yksi. - Pienet tiedostojen koot. Kun kaikki turhat tyylimäärittely karsitaan pois HTML-dokumenteista, saavutetaan pienemmät tiedostokoot ja sivut latautuvat nopeammin kuin ennen. - Saavutettavuus eli CSS:llä tehdyt sivut ovat esteettömiä. - Eri mediat. CSS:n avulla voidaan tehdä eri medioille erilaiset versiot. - Entistä parempi typografian kontrollointi. CSS:n avulla voidaan vaikuttaa kaikkeen millä on typografista merkitystä. Historia Kun HTML keksittiin ei sen tarkoitus ollut, että koodi sisältäisi visuaalisia efektejä. HTML:n tehtäväksi kaavailtiin vain ja ainoastaan sisällön rakenteellista kuvausta. Mutta varsin pian kävi niin, että kova kysyntä aiheutti muutospaineita. Kun HTML oli versiossa 3.2 alkoivat puurot ja vellit mennä sekaisin. HTML ei enään kuvannut pelkkää rakennetta vaan mukaan tuli myös tyyli. Esimerkkinä mainittakoon tagit <font> ja <bgcolor>. Kun HTML-koodi pääsi versioon 4 oli tarkoitus irroittaa rakenne ja sisältö toisistaan. Uutena 1 / 41

2 ratkaisuna esiteltiin Cascading Stylesheets (CSS). CSS 1 oli World Wide Web Consortiumin (w3c) suositus joulukuussa Kyseessä oli oivallinen lisä HTML-koodiin. Vuonna 1998 oltiin jo versiossa CSS 2 ja w3c suositteli sitä. Vuonna 2003 päästiin jo versioon CSS 2.1. Selaimet alkoivat hitaasti tukea uutta menettelytapaa, mutta tänään ollaan tilanteessa, jossa selaimet tukevat css:ää hyvin. Sen sijaan web-sivujen tekijät sotkevat usein rakenteen ja tyylin keskenään. Yksi syy siihen on, että websuunnittelijoilla ja muilla sivunikkareilla on vieläkin liian vähän tietoa CSS:n mahdollisuuksista. CSS:n edut Nykyisin käytetään taulukoita ulkoasun pitämiseksi kasassa, vaikka taulukoita ei ollut koskaan tarkoitettu siihen tehtävään. Koska selainten CSS-tuki viivästyi alkoivat websuunnittelijat etsiä kiertoteitä sivujen ulkoasun pitämiseksi koossa. Ratkaisu oli varsin monimutkainen ja uudelleenkäytettävyyden kannalta pahin mahdollinen eli taulukoiden käyttö ulkoasun määrittelemiseen. Tänään emme enään tarvitse ulkoasun muokkaamisen taulukoita, joten voimme antaa taulukoille takaisin niiden varsinaisen tehtävän eli taulukkomuotoisen datan esittämisen. Nykyään voimme määritellä sivun ulkoasun CSS:llä ja toivon sinunkin hyvä lukija oivaltavan, että CSS on tärkein tekijä www-sivujen muotoilussa. Lisäksi on huomioitava, että CSS:n käyttö ei luo sivuille esteellisyyttä kuten taulukot. Vanhasta perisynnistä eli kehyksistä (frames) on onneksi päästy jo eroon. Taulukko sen sijaan on vielä websuunnittelijan aivoihin iskostuneena yhtenä ja lähes ainoana vaihtoehtona pitää sivut kasassa. Lisäksi esteellisyyden kannalta CSS on parempi kuin taulukko. Tässä pari poimintaa netistä. "Taulukkotaittaminen hankaloittaa olennaisesti sivun lukemista erikoisemmissa selaimissa. Esimerkiksi ääniselaimilla kokonaiskuvan muodostaminen on hankalaa tai jopa mahdotonta. Sivun varsinainen sisältö ja rakenne on tällöin piilotettu taulukkoon, joten sivun muuttaminenkin on työlästä. Taulukon käyttämisen voi usein korvata muilla rakenteellisilla määrittelyillä ja CSS-tyylien avulla. " [ "käytä yksinkertaista ja loogista HTML-merkkausta, ja sommittele ulkoasu ensisijaisesti CSS:llä." [ Mutta kun,... ei mitään muttia. Tyylitiedostot keksittiin luomaan sivuille ulkoasu. Taulukoiden tehtävä oli sen sijaan esittää taulukkomuodossa olevaa dataa. Kyseessä on samanlainen tilanne kuin käyttäisi Exceliä kuvankäsittelyyn Photoshopin sijaan. Nyt on aika unohtaa jo vihdoinkin taulukot ja siirtyä tyylitiedostojen käyttöön. Tai ainakin kannattaa suunnata katse tulevaisuuteen, jolloin taulukot taatusti ovat historiaa sivumuotoilussa kömpelyytensä vuoksi. 2 / 41

3 Ehkä on vaan helpointa siirtyä suoraan asiaan eikä selittää teoriaa. Kooditasolla tarkasteltuna ongelmat näkee selkeästi. Otetaan esim 1 ilman CSS:ää ja esim 2 CSS:n kera. <TABLE width="120" border="0" cellpadding="0" cellspacing="0"> <TR> <TD height="1" width="120" colspan="3" bgcolor="#000000"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="center" width="118" bgcolor="#00ff99"> <font size="2" face="verdana, Arial, Helvetica, sans-serif"> MENU</font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD height="1" width="120" colspan="3" bgcolor="#000000"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="left" valign="top" width="118" bgcolor="#33ffff"> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> <b>etusivu</b><br> </font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="left" valign="top" width="118" bgcolor="#33ffff"> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> <b>toka</b><br> </font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="left" valign="top" width="118" bgcolor="#33ffff"> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> 3 / 41

4 <b>kolmas</b><br> </font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD height="1" width="120" colspan="3" bgcolor="#000000"></td> </TR> </TABLE> Esimerkki ei ole edes pahimmasta päästä. Pahempaakin on nähty ja kaikkein pahimman koodin tuottaa yleensä yhdistelmä wysiwygeditori ja kokematon käyttäjä. Siksi teemme kaiken yksinkertaisemmin. Käytämme css:ää. <style type="text/css"> <!-- table.meny { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; margin: 0px; padding: 0px; border: 1px solid #000000; width: 120px; td { margin: 0px; padding: 0px 0px 0px 2px; background-color: #33FFFF; font-weight: bold; th { background-color: #00FF99; border-width: 0px 0px 1px 0px; border-style: solid; border-color: #000000; font-weight: normal; --> 4 / 41

5 </style> <table cellspacing="0" class="meny"> <tr> <th>menu</th> </tr> <tr> <td>ekasivu</td> </tr> <tr> <td>tokasivu</td> </tr> <tr> <td>kolmas</td> </tr> <tr> </table> Kaunista, eikö vaan? Tosin koodin kauneus ei ole itsetarkoitus. Meidän on lisäksi ajateltava henkilöä, joka suorittaa sivujen päivitystä. Yllä olevassa esimerkissä olisi nopsaa muuttaa fontit teksteille. Lisäksi tiedoston koolla on merkitystä. CSS:n avulla tiedostojen kokoa saadaan pienemmäksi, jonka seurauksena sivut latautuvat enstistäkin nopeammin. Lisäksi ulkoasun päivittäminen on helppoa, koska yksi sivu säätelee tarvittaessa kaikkien sivujen ulkoasua. CSS-sivuun voit sekunnissa muuttaa esim taustavärin, joka vaikuttaa kaikille sivuille oli niitä sitten 1 tai Mutta jos taustaväri on määritelty HTML-sivuilla niin johan kertyy sekuntteja. Vastustus Vaikka CCS:llä on selkeitä etuja, on sitä kohtaan myös kovaa vastusta. On kyse siitä, että asiakkaat haluavat vanhaa vaikka väkisin. Lisäksi websuunnittelijoilla on usein puuttelliset taidot css:n osalta. Tämä on outoa, kun meillä on nykyään olemassa tuki CSS:lle. Echoechon mukaan 89% selaimista tukee CSS:ää hyvin. Googles zeitgeistin mukaan niitä on jopa enemmän. Hommaa oli ajateltava näin. Jos joku käyttää vanhaa selainta ei häntä kiinnosta juuri muu kuin sisältö, hän haluaa informaatiota, tietoa ja dataa. Jos websuunniitelija strukturoi sisällön hyvin ja tekee fiksut CSS-tyylit niin vanhojen selainten käyttäjät voivat edelleenkin selailla sivuja. Asiakkaan mielenkiinnon ei tule kohdistua siihen, että hänen www-sivunsa näyttävät samalta sekä Netscape 4.x selaimella että i IE 6:ssa. Netscape 4.x on selain vuodelta Jos aina menee vanhimman selaimen mukaan on kuin vaatisi YLE:ä lähettämään lähetyksensä mustavalkoisina, koska kaikilla ei kuitenkaan ole väritelkkaria. 5 / 41

6 Asiakkaalle pitää voida tarjota hyvin strukturoituja sivuja, joita on helppo päivittää ja jotka selviytyvät tulevaisuuden haasteista. Tulevaisuudessa sivuja katsellaan mm. telkkarien ja puhelinten kautta - ratkaisu on CSS. Kun CSS:ää käytetään oikein emme tarvitse sivuista erityisversioita eri päätelaitteille. Monet henkilöistä, jotka vielä nykyään käyttävät selainta Netscape 4.X ovat websuunnittelijoita, jotka haluavat tutkija toimivatko sivut kyseisellä selaimella vai ei. On kuitenkin muistettava, että Netscape on päättänyt, ettei se enään tue tai kehitä selaimiaan, jotka ovat muotoa Netscape 4.x tai sitä aiempaa ikäpolvea. Oikea doctype Oikea doctype on tärkeä myös CSS:n kannalta. Hyvät sivut ovat rakenteellisesti oikeat, ne ovat valiidit ja ne sisältävät doctype-määriettelyn.html 4.01sisältää kolme erilaista DOCTYPE-määriittelyä: Strict, Transitional ja Frameset. Strict DTD Tätä käytetään, kun halutaan ehdottoman puhdasta koodia, jossa HTML-määrittelee vain rakenteen. Siinä tapauksessa Cascading Style Sheets (CSS) määrittelee sivun ulkoasun. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Transitional DTD Transitional DTD sisältää myös muotoiluja, joiden W3C olettaa vähitellen siirtyvän hoidettavaksi CSS:n avulla. Tätä suosittelen käyttämään alkuvaiheessa ja nimenomaan tämän kurssin puitteissa. Se on se jota itse tässä vaiheessa käytän. Se sallii, että voin muotoilla ulkoasua HTML:n avulla niin halutessani. Lisäksi hyvä valinta, jos sivuja katsellaan vanhalla selaimella, joka ei tue CSS:ää. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 6 / 41

7 Frameset DTD Frameset DTD:tä käytetään, kun sivuilla on nk kehysrakenne. Frameset DTD on samanlainen kuin Transitional DTD, ainut ero on, että frameset elementti korvaa body elementin. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Lisää tietoa doctypetsä löydät W3Schoolin sivuilta. Neljä tapaa liittää CSS sivuille CSS-tyylin voi liittää sivuille neljällä eri tavalla. Upottamalla Tyyli kirjoitetaan head-elementin sisään <head> <title>css jyrää</title> <style type="text/css"> body { background-color: black; </style> </head> <body> </body> </html> Linkittämällä Laitetaan vaan linkki ja homma on siinä. Kunhan muistat laittaa sen linkion HEAD-osioon. <head> <title>css jyrää</title> <link rel="stylesheet" href="css/bas.css" type="text/css" /> </head> <body></body> </html> 7 / 41

8 Importoimalla <head> <title>css jyrää</title> <style url("css/bas.css"); </style> </head> <body> </body> </html> Tätä tapaa tukevat vain selaimet, jotka ymmärtävät CSS 2.0:aa. Sekä linkitys sijoitetaan head-tagien sisään. CSS-tiedosto tallennetaan tekstiformaattiin ja tiedoston pääte on css. Inline Inline tarkoittaa sitä, että css-koodi kirjoitetaan tagien sisään, kas näin: <body style="background-color:black;"> Jokaisella tavalla on omat etunsa, mutta suosittelisin linkitystä. Sekaisin Voit myös käyttää eri tapoja sekaisin <head> <title></title> <link rel="stylesheet" href="css/bas.css" type="text/css" /> <style url("css/bas.css");</style> <style type="text/css"> body { background-color: black; </style> </head> <body style="background-color:red"> 8 / 41

9 </body> </html> Puuttuva CSS-tuki Tyylimallit voidaan piilotta vanhoilta selaimilta, jotta ne eivät kirjoittaisi tyyliä tavallisena tekstinä. Tässä esimerkki, kuinka tyyli saadaan piiloon. <style type="text/css"> <!-- body { background-color: black; p { background-color: red; --> </style> Sisältö & data Jotta CSS-tyyleistä saa kaiken irti pitää sivut tehdä selkeiksi rakenteeltaan ja varsinkin koodiltaan. Kaikki teksti pitää saada tagien sisään - kuten esim. p, h1 jne. Sivun pääotsikon tulisi olla h1, seuraavan tason otsikon tulisi olla h2. Ja sitten CSS:n avulla päätetään otsikoiden koot, fontit, värit jne. Suosittelen, että hankit tietoa dokumentin rakenteesta, joko XML-kurssilta tai XHTML-kurssilta. Jossain määrin suosittelen myös HTML-kurssia. Paras vaihtoehto noista kolmesta on lyhyt XHTML-kurssi. Erityisen tärkeää on, että tiedät mikä on doktype ja osaat käyttää sitä oikein. Tagit selektorit Html-tagilla <p> on CSS-selektorina (eng.selector) p, tagilla <body> on selektorina body jne. Ei ole mitään väliä sillä ovatko selektorit kirjoitettu pienin vaiko isoin kirjaimin. Kun selektori on valittu, aloitetaan sen määrittely aaltosulkeen avulla {, sitten kirjoitetaan ominaisuus 9 / 41

10 (esimerkissä alla background-color), ominaisuuden jälkeen lisätään arvo (green). Ominaisuus ja arvo ovat yhdessä deklaraatio, joka päätettään yleensä puolipisteeseen ; (jos deklaraatio on viimeinen ei puolipistettä ole pakko kirjoittaa, toisaalta on hyvä tapa tehdä niin, että kirjoittaa sen. Näin siksi, että jos joskus lisää uuden deklaraation niin se ei toimi, koska puolipiste on merkkinä selaimelle uudesta deklaraatiosta. Selektori päätetään aaltosulkeeseen. <style type="text/css"> body { background-color: green; Periytyvyys Nimi Cascading Stylesheets tarkoittaa suomeksi putoavat tyylimallit. Kyse on siitä, että ylemmältä tasolta tyyli valuu kuin vesi alaspäin. Selektoreiden määrittelyt ovat periytyviä, ne ikään kuin valuvat alemmille tasoille. Tarkastellaan asiaa esimerkin avulla. table { background-color: blue; Koska tagit tr,td ja th ovat table tagin "lapsia" saavat ne siksi saman taustavärin kuin table. Helpoiten asian voi ymmärtää kun tutkii XML-dokumentin rakennetta. HTML-dokumentissakin on samantyyppisiä elementtejä, mutta niitä on hankalampi hahmottaa, koska rakenne ja sisältö ovat nivoutuneet yhteen. Mutta tarkastellaan vielä yhtä esimerkkiä <body> <h1>otsikko</h1> <p>yksi kappale, jossa myös<em>korostus</em>. </p> </body> 10 / 41

11 Body on seuraavien tagien isä/äiti h1, p ja em H1 tagilla ei ole lapsia P tagi on tagin em isä/äiti.. Em tagilla ei ole lapsia Jos luon yllä olevaan koodiin seuraavanalisen tyylin: P { background-color: red; Koko kappaleen teksti on punaista. Punainen teksti koskee myös tagia "em". Jos haluan, että tagilla "em" on oma taustaväri, on minun luotava sille selektori. Kas näin: em { background-color: blue; CSS:n perussäännöt Kaiken perustana ovat selektorit ja määrittelyt. Tässä esimerkki, joka muuttaa kaikki kappaleet väriltään punaiseksi. p {color:red Jos sinulla on jossain tällainen pätkä HTML tai XHTML-koodia: <p>tämä on varsin tärkeää</p> muuttuu sen teksti punaiseksi. 11 / 41

12 Sillä ei ole väliä kirjoitatko koodisi välilyöntien kera vai ei. h1 {text-align: center; h2 { text-align: center; Silläkään ei ole väliä kirjoitatko pötköön vai palotteletko koodia riveittäin. Lisäksi määrittelyjä voidaan kirjoittaa useampia. h2 {font-style: italic; text-align: center; color: navy; h3 { font-style: italic; text-align: center; color: navy; Selektoreiden yhdistäminen Selektoreita voidaan myös yhdistellä. Yhdistely kannatta, kun määrittelyt ovat tageille samat. h1, h2 { 12 / 41

13 text-align: center; color:navy; h2, h4 { font-style: italic; Kommentointi Kommentoit tapahtuu merkeillä /* ja */ eli näin /* Tämä on kommentti */ h2, h4 { font-style: italic; Tagit eli selektorit Selektorit eli valitsimet ovat tärkeitä, koska ne määrittelevät, että mille tagile tapahtuu ja mitä sille tapahtuu. Esimerkiksi säännössä H1 {font-family:arial selektori H1ilmoittaa, että deklaraatio (määrittely) font-family:arial koskee kaikkia H1-elementtejä (1. tason otsikoita) ja vain niitä. Html-tagilla <p> on CSS-selektorina (eng.selector) p, tagilla <body> on selektorina body jne. Ei ole mitään väliä sillä ovatko selektorit kirjoitettu pienin vaiko isoin kirjaimin. Kun selektori on valittu, aloitetaan sen määrittely aaltosulkeen avulla {, sitten kirjoitetaan ominaisuuus (esimerkissä alla background-color), ominaisuuden jälkeen lisätään arvo (green). Ominaisuus ja arvo ovat yhdessä deklaraatio, joka päätettään yleensä puolipisteeseen ; (jos deklaraatio on viimeinen ei puolipistettä ole pakko kirjottaa, toisaalta on hyvä tapa tehdä niin, että kirjoittaa sen. Näin siksi, että jos joskus lisää uuden deklaraation niin se ei toimi, koska puolipiste on merkkinä selaimelle uudesta deklaraatiosta. Selektori päätetään aaltosulkeeseen. 13 / 41

14 body { background-color: green; Tyyppiselektorit Tyyppiselektoreita on yhteensä seitsemän ja ne perustuvat HTML-kieleen. Kyseiset selektorit ovat: <body> <div> <h1>...<h6> <p> <ul> <li> <a> Luokkaselektorit Lähes kaikki elementit voidaan merkitä kuuluviksi luokkiin yleisellä CLASS-attribuutilla, esim. seuraavasti: <p class="tarkea">on tärkeää huomioida, että...</p> Tyylisäännöissä luokkiin viitataan pisteellä: 14 / 41

15 p.tarkea { border:3px double;.tarkea { color: red; background-color:yellow; Esimerkin ensimmäinen sääntö koskee P-elementtejä, jotka on merkitty kuuluvikasi tarkea-luokkaan. Toisessa säännössä elementtisidonnaisuutta ei ole, joten se koskee kaikkia elementtejä, jotka on merkitty kuuluvikasi tarkea-luokkaan. Id-selektorit HTML-spesifikaatioiden mukaan id-attribuutin nimen tulisi olla dokumenttikohtaisesti uniikki. Id-valitsinta voitaisiin kutsua oikeastaan uniikkivalitsimeksi, sillä valintakriteeri perustuu (periaatteessa) yksilöivään eli uniikkiin tunnisteeseen (unique identifier). Attribuuttia idk utsutaan englanninkielisissä teksteissä myös sanoilla fragment identifier (= katkelmatunniste, fragmenttitunniste), joten id-valitsinta on mahdollista kutsua myös fragmenttivalitsimeksi. Universaalit selektorit Universaalit elementit voivat vaikuttaa kaikkiin elementteihin. Esim. jos halutaan kaikken elementtien marginaalien olevan 0, voidaan se kirjoittaa näin: * { margin: 0; padding: 0; 15 / 41

16 Laatikkomalli CSS:lle ovat tunnusomaisia blokit, niitä ovat esim kappaleet, otsikot ja divit (div). Toinen tapa esittää elementti on inline, jolloin sisältö onkin rivinä (ei rivinvaihtoja), esimerkkeinä esim. lihavointi ja linkit. Tässä esimerkki. Mikä tässä on sit niin erikoista? Lähinnä juju on siinä, että kaikille laatikkomallin mukaiselle elementeille voidaan määritellä ominaisuuksia kuten: margin, background-color, background-image, padding ja border eli näin: 16 / 41

17 > Kokeile <head> <title>moi</title> <style type="text/css"> body { background-color: black; div { background-color: white; width:300px; height:200px; padding:20px; margin: 20px; position:absolute; left:100px; top:100px; </style> </head> <body> <div class="kissa"></div> Marginaalit Marginaalit määrittelevät elementin reunan suhteen seuraavaan elementtiin (viereisen elementtiin). <BODY> <div> <div class="yksi"> Heh </div> </div> </BODY> </HTML> 17 / 41

18 CSS div { margin: 20px; background-color: red; width: 400px; height: 400px;.yksi { margin: 20px; background-color: green; width: 200px; height: 200px; padding: 20px; Lopputulos 18 / 41

19 Padding <BODY> <div> Heh </div> </BODY> Ja <style body background-color: width: height: padding: </style> Lopputulos css { {margin: type="text/css"> vaikka 200px; luo 40px; näin: tyhjää näin 0; green; tilaa ulkoreunan ja sisällön välille. Esim HTML-koodi näin: 19 / 41

20 HUOM! Reunat CSS tyyppiä. ohut border-width: Elementin voidaan luvussa seuraavassa väri. border-color: border-style-ominaisuudella jokaiselle Ominaisuuden doubleraja ridgeraja border-style: {none,dotted, border-ominaisuuden Tarkemmat luvuista. samalla pilkutettu, raja, tarjoaa Elementin eli. kertaa. antaa Border-ominaisuudella Jokaiselle rajalle arvolla rajojen borderit määritykset harjamainen, monenlaisia [ väri järjestyksessä: arvolla [ none, kaksinkertainen arvoja suoraan thin arvoksi erikseen mediumr {red, leveys väri elementin dotted; dashedraja pituusyksiköissä avulla green, voidaan värin rajan vaihtoehtoja järjestyksessä: on arvolla ajaksi voidaan Ylärajan nyt nimellä dashed leveyden, blue, thick reunalle määritellä laittaa joudutaan on =240 yhtenäinen, tulee inset määrittää red; katkoviivoitettu, ] määritellä tai keskitetysti väri, none, reunoille. tai keskipaksu solid raja voidaan värin ulkoasun yläraja, border-color-ominaisuuden arvoina oikean määrittelemään on border-width-ominaisuuden jolloin double arvolla RGB-arvona. upotettu rajan määritellä Voidaan hallita oikea thin, pikseliä. rajan rajaa arvolla värin grooveraja ulkoasu. mediumj raja, kaikkia väri, ei säätää arvolla määrittämiseksi oma jokaisen piirretä solidraja Värien thick alarajan Rajan ridge väri. on viivan outset rajasta thick. antamisesta ollenkaan. kourumainen, reunan Tällöin on ominaisuuden ulkoasu avulla. väri inset vasen paksuutta, yhtenäinen, Arvolla avulla. raja tulee löytyvät värit ominaisuudet vasemman outset Rajojen on raja. voidaan Arvolla paksu. Ominaisuudelle thin enemmän korotettu. annetaan arvolla väriä edellisistä ] määrityksiä. rajaksi dottedraja määritellä rajan tulee Värit Värien osalta CSS on paljon pidemmälle kehittynyt kuin pelkkä määritelmä tyyliin font color tai bgcolor, joihin me olemme HTML:ssä tottuneet. CSS:ssä on mahdollista määritellä värit kolmella eri tavalla. - background-color: black; - background-color: #000000; - background-color: rgb(0,0,0); Värin nimi 20 / 41

21 Standardin mukaisesti käytössä ovat seuraavat väri: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow. Värin määritteleminen em. tavalla on kuitenkin riski, koska eri käyttöjärjestlmillä voi olla omat käsityksensä väreistä eli esim yellow ei välttämättä ole samanalainen jokaisella koneella. On kuitenkin olemassa kaksi varmaa valintaa eli black och white niistä vallitsee yksimielisyys. HUOM! Selainvalmistajat ovat itse määritelleet muitakin värejä. Vältä niiden käyttämistä. Heksa-arvo Väriarvon kirjoittaminen heksadesimaaliina linee sinulle jo tuttua HTML-koodauksen osalta. Värit kirjoitetaan järjestyksessä RGB eli RED GREEN BLUE ja luku kirjoitetaan heksadesimaalilukuna. Suurin luku on F ja pienin on 0. Mikäli kirjoitat väriarvon näin: #FF0000 saat tulokseksi punaisen värin (punainen maksimissaan ja sininen ja vihreä plekkää nollaa eli minimissään). Voit myös käyttää lyhennettyä muotoa eli punaisen värin voi kirjoittaa myös näin: #F00. Et kuitenkaan voi lyhentää esim seuraavaa väriarvoa: #E3E3E3. Rgb RGB on loistava lisä, koska koodeja ei tarvitse nään muuntaa heksadesimaalimuotoon. RGB on sama muoto kuin kuvankäsittelyohjelmissa. Voit kirjoitta värit myös prosentteina. Tässä esimerkkejä: - Rgb (0,0,0) ja rgb (0%,0%,0%) => musta väri - Rgb (255,0,0) ja rgb(100%,0%,0%) => punainen väri Korkein suurin arvo on RGB väreissä on 255 (tai 100 %) ja alin on nolla (0 %). Koko 21 / 41

22 CSS sisältää useampia kokomäärittelyjä. Aloitetaan kiinteiden kokojen läpikäynnillä. - Px - pikselit - Pt - points, pisteitä - yksi piste on sama kuin 1/72 tuumaa = 0,353 mm (printattuna, mutta ruudulla se voi olla esim. 1/96 osa tuumaa riippuen käyttöjärjestelmästä ja sen resoluutiosta) - Pc- pica - 1 pica = 12 points, pistettä = 4,24mmCm - centimetrit - Mm - millimetrit - In - tuuumat (inches) Kuvailevat koot Kuvailevia kokoja käytetään vain teksteihin. Kuvailevia kokoja ovat: - xx-small - x-small - small - medium - large - x-large - xx-large - smaller, larger. Kaikista yllä mainituista suosittelen lähinnä pikseleitä ja kuvailevia kokoja. Pisteet ja picat oavt lähinnä tarkoitettuja kirjoittimille. vältä myös määreitä kuten centtimeri, millimetri ja tuuma. Pikselitä käytetään, koska tietokoneen näyttö määritellään pikeseleinä. Kuvailevat koot ottavat huomioon webselaimen asetukset, siksi ne ovat usein toimiva ratkaisu. Valitettavasti useilla websivuilla käytetään määreinä pisteitä. Niistä on hyötyä vain kun määrittelemme tulostustyylejä. Miksi sitten pisteet ovat saaneet osakseen suosiota? Yksi syy on tottumus, koska esim ohjelmat kuten Word ja Photoshop käyttävät niitä. Käyttäjät laittavat ulkomuistista samoja suureita sitten nettisivuilleen. Suhteelliset koot - % - procenttia - em - neliö 22 / 41

23 - ex - gemena x Tekstinkäsittelyssä suhteelliset koot ovat suositeltava vaihtoehto, koska niiden avulla saadaan käyttäjäystävällisiä sivuja. Käyttäjä vo silloin itse päättää missä koossa hän katselee www-sivujasi. Prosentit ovat suositeltava vaihtoehto, kun haluat tietyn objektin ottavan jonkun tilan käyttöönsä. Teksti Fonttiperhe Fonteista on olemassa viisi perusperhettä, joita kutsumme nimillä serif (esim. Times), sans-serif (esim. Verdana), monospace (eesim. Courier), cursive (esim Comic sans) ja fantasy (esim. Playbill). Edellä mainitut fonttiperheet ovat webissä ongelma, koska ihan varmaa tietoa ei ole siitä kuinka loppukäyttäjä sivunsa lukee. Kokeile seuraavia: Body { font-family: serif; body { font-family: Georgia, serif; HUOM! Jos fontin nimi on pidempi kuin yksi sana, on se kirjoitettava hipusejen sisään: esim näin: font-family: times new roman. Sama koskee myös erikoismerkkejä kuten esim. Zebra$ ; 23 / 41

24 Koko Tässä pari esimerkkiä: body { font-family: serif; font-size: 12px; body { font-family: serif; font-size: 90%; Paino Painolla säädellään lähinnä paksuutta - Normal - Bold - Bolder - Lighter p { font-weight: normal; h3 { font-weight: 800; Väri 24 / 41

25 Fontin väri ei ala kirjaimilla font vaan esim. näin: P { color: black; Tyyli Tyyleinä on useimmiten normal, italic och oblique. P { font-style: normal; Em { font-style: italic; Variant Teksti voidaan kirjoitta ISOIN kirjaimin tai pienin kirkaimin tai sitten on käytössä. font-variant-ominaisuudella voidaan kirjasimen kirjoitusasu muuttaa. p { font-variant: small-caps Anfangi 25 / 41

26 Anfangi (drop cap) tarkoittaa tekstikappaleen ensimmäistä kirjainta, joka on isompi kuin muut kirjaimet, usein kahden tai kolmen rivin korkuinen. Tässä esimerkkiä..dropcap { float:left; color:#d4d4c7; font-size:100px; line-height:70px; padding-top:2px; font-family: Times, serif, Georgia; <p> <span class="dropcap">n</span>äin tehdään anfangi</p> Aiheesta lisää sivuilta: Tekstin määrittely CSS:n perusidea on, ettei HTML-koodi olisi sellaista kuin tässä esimerkissä alla: 26 / 41

27 HTML-koodista pienennettyä Kappaleiden 140%. käyttäjän ilmaistau <style font-family: line-height: </style> Myös h1 color:#036; font-size: font-weight: Lopuksi peräti { - useimmissa { otsikkoja Elements A The Digital Compose Web 95 type="text/css"> Arial List muutamia % prosentteina. määrittelemästä 80%; 120%; Trouble Typography Design arial, 140%; on siksi, normal; Apart Web osalta pelkkää H1-h6, selaimissa tulisi sivujen of to helvetica, että typography Typographic With a linkkejä. toimiva Vertical jättää 95% voidaan Riviväli ylläpito typografiaa. Sucks EM on koosta. Typography 120%. tagi sans-serif; määrittely Webissä n näytöllä Rhythm articles EN määritellä. <font> Style 140%, (and Käyttäjä helpompaa. helpoiten typografia Applied voisi kokonaan Other jotta Tässä voi olla, to Shady teksti halutessaan luettavissa. on että the pois. esimerkki. tärkeä, Web olis fonttina Characters) Sillä helppolukuista. joidenkin Koko tavoin muuttaa on Arial, 90% tiedostokokoa mielstä tekstin tarkoittaa, Oletusarvona olisi kokoa, webgrafiikasta 90 että saadaan % koska se ja rivivälille on se 90% on Taustakuvat 27 / 41

28 Otetaan pohjaksi tällainen pätkä HTML-koodia. <body> Sivulle saa taustankuvan asetettua CSS-koodilla näin: body { background-image: url(tausta.jpg); Tällainen olisi sit sivu, joka on täynnä ruusuja. <style type="text/css"> body {background-image: url(ruusu.gif); </style> 28 / 41

29 Tallenna background-repeat-ominaisuuden suunnassa, repeattoistaa repeat-xtoistetaan Arvolla <style body {background-image: background-repeat: type="text/css"> no-repeatkuva ruusu jos kuvaa taustakuva koneellesi, kuvaa repeat-y; koko url(ruusu.gif); esiintyy vaakasuunnassa taustan on jotta kooltaan taustalla pääset yli avulla sekä pienempi vain kokeilemaan. voidaan pysty- ja kerran. arvolla että kuin kuvaa repeat-y vaakasuunnassa. selainikkunassa toistaa toistetaan ominaisuuden näytettävä Arvolla kuvaa määrittelemässä pystysuunnassa. alue. Arvo 29 / 41

30 background-attachment-ominaisuuden dokumentti-ikkunaa kuva selainikkunaan, vieritettävässä background-attachment: background-position-ominaisuudella voidaan 0% pituutena vasta avainsanojen sijoittuminen keskelle <style body {background-image: background-position: background-repeat: </style> 0%. ei pystysuuntaan type="text/css"> liiku Esimerkiksi antaa ja annettuista alas. sisällön pystysuunnassa left, prosentuaalisesti dokumentissa. joten centerja rullattaessa. no-repeat; vierittämisen url(ruusu.gif); vaikuttava 100% arvoista taustakuva fixed; 100% rightavulla 0; voidaan ensin 0% arvo. selainikkunan Arvolla liikkuu mukana. tarkoittaa annetaan voidaan Kuvan vasemmalle, määritellä avulla sisällön fixed Arvolla sijoittumisen määritellä elementin voidaan taustakuva vaakasuuntaan vasemmasta mukana, avainsanojen scroll keskelle vaikuttaa taustakuvalle oikeaa on joten vaakasuunnassa ja ylälaidasta kiinnitetty vaikuttava oikealle. top, yläkulmaa. taustakuvan centerja ei tarkka ole selainikkunaan, Vastaavasti lähtien, arvo kiinnitetty näyttää Prosentteina voi bottomavulla sijainti. liikkumiseen myös jota olevan kuvan vastaa Arvot jälkeen määritellä joten jaylös, kiinni arvo 30 / 41

31 background-ominaisuudella ominaisuuksiin. syntaksista. body {color: background: #000000; white Ominaisuuden url(./kuvat/tausta.gif) voidaan arvoilla vaikuttaa on no-repeat tietty kaikkiin järjestys, fixed edellä 50% joka 50%; käsiteltyihin on nähtävillä taustan seuraavasta Kuvateksti Jotta kuvaan voidaan liittää kuvateksti on kuva ja teksti pakattava samaan pakettiin ja se käy esim div-tagin avulla. <div class="imagecaption"> <img src="nexus.jpg alt=" "><BR> Kukka puutarhassa. </div> 31 / 41

32 Tallenna kukka ja teksti ja kokeile. Teksti tässä alla Nexus F1 Aikainen ja matala lajikesarja. Sarjan lajikkeet ovat keskenään tasaisia. Kukka kookas, kehittää silti useita kukkia kerrallaan jo taimivaiheessa. Geneettisesti matalaksi ja tiiviiksi jalostettu kasvutapa helpottaa viljelyä ja auttaa tuottamaan korkealaatuisia taimia erilaisissa viljelyolosuhteissa. Vahvat, kauniit värit Css menee näin: <style type="text/css"> div.imagecaption { float: right; width: 190px; margin: 0 1em 1em 1em; display:inline; </style> Float tarvitaan, jotta kuva asemoituisi oikealle. Koska float on mukana on sille määriteltävä leveys, joka on 188px, mutta koska tehdään vielä reunukset 1px niin siksi 190px. Lopuksi vielä vähän tyhjää tilaa suhtessa muihin elementteihin. Ja lopputulos näin: 32 / 41

33 Kokonaisuudessaan </head> <body> <h2>nexus <div <img Kukka </div> Jatketaan kuvatekstiä. <style {float: width: margin: display:inline; padding: background: color: text-align: div.imagecaption {border: </style> Sitten class="imagecaption"> right; src="nexus.jpg" #000; lopputulos 190px; type="text/css"> puutarhassa. 1px 010px 1em center; saman solid F1</h2> # em #E2ECED; img esimerkin px url(tausta.jpg) 1em; tällainen: koodi 70px alt=" 10px; "><BR> näin: kimpussa repeat-x ja laitetaan 0 100%; kukalle kehys ja tausta ja muotoillaan myös 33 / 41

34 34 / 41

35 Kuvagalleria Tällä kertaa tavoitellemme jotakuinkin tällaista. 35 / 41

36 HTML:n <body> <div <img <p>kukka </div> </body> CSS <style div.thumbnail </style> Kokeile Homma width. alapuolelle. {width: float: Kuvalle {border: Lopuksi {margin: padding: background: class="thumbnail"> menee left; src="kukka.jpg" Lopuksi 130px; type="text/css" 1px eli tarvitaan 10px 0; laitetaan toimii osalta 0 puutarhassani</p> täältä 20px solid Niin näin: url(tausta1.gif) url(tausta2.gif) 0 img pniin, kruunataan koodi 0 ja 30px ne vielä #777; 10px; teksti että kuvat 0; menee alt=""> media="screen"> 10px; kehys ja elementit tietty toinen eli homma no-repeat; näin: ja tausta1 mukaan. se taustakuva, laitetaan pitää sillä,, 0 saada että 100%; Koodi kellumaan jätetään joka 2 irti näin: ja luo reunoista. kukka elementtien illuusion (<div>). Koska varjosta. väliin on tilaa float oikealla niin pitää jaolla myös Vertikaaliset menut Aloitetaan luomalla lista, ja sillähän on jo ulkoasu kuin menulla eli valikolla. <ul id="navigation"> <li><a href="#">koti</a></li> <li><a href="#">jari</a></li> 36 / 41

37 <li><a href="#">jääkiekko</a></li> <li><a href="#">jalkapallo</a></li> <li><a href="#">politiikka</a></li> <li><a href="#">mäntyharju</a></li> <li><a href="#">suomi</a></li> </ul> Lopputulos on näin: Sitten alkaa listan muotoilu, jotta se sopisi navigaatiotarkoituksiin. Otetaan alleviivaus pois ja muutenkin hieman asemoidaan. <style type="text/css" media="screen"> ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none; </style> Jotta yllä mainittu onnistuu niin html muotoon: 37 / 41

38 <ul id="navigation"> Sitten siirrytään tagin <a> kimppuun. Laitetaan se muotoon block ja otetaan alleviivaus pois. ul#navigation a { display: block; text-decoration: none; background: #036; color: #fff; padding:.2em.5em; border-bottom: 1px solid #fff; width: 7em; Ja nyt alkaa jo näyttää joltakin 38 / 41

39 Lopuksi ul#navigation {background: color: Ja sit #000; vielä valmista #69C; hooverefektit a:hover Mikäli <li><a ja ul#navigation Tuolta css haluaa näin: href="#" sitten lisää sen a#current{background: id="current">mäntyharju</a></li> sivun vinkkiä: aktiiviseksi jolla #FFCC66; ollaan niin color: näin: #000000; Horisontaaliset menut 39 / 41

40 Laitetaan edellinen muotoon: <style type="text/css" media="screen"> ul#navigation { padding-left: 0; margin-left: 0; list-style-type: none; background: #036; float: left; width: 100%; ul#navigation li { display: inline; ul#navigation li a {display: block; float: left; padding: 0.2em 1em; text-decoration: none; background: #036; color: #fff; border-right: 1px solid #fff; ul#navigation li a:hover { color: #000; background: #69C; </style> Eri tyyli eri medialle Yleinen ongelma taulukkosivujen kanssa on tulostus. Usein käy niin, että teksti leikkautuu ikävästi oikeasta reunasta. Lisäksi navigaatiot tulevat mukaan ja kaikki linkit on alleviivattu. Tekstiä on siis erittäin hankala lukea. Teksti saattaa paperilla olla esim. tämän näköistä kuin tässä alla, vaikka se ruudulla näkyisikin oikein. 40 / 41

41 Ongelman a table TD Tee <head> <title>ixapplication <LINK Homman <link CSS:n color: background: border-bottom border-style background-color font-family font-size text-align </head> { - screen aural braille embossed handheld projection tty tv text-decoration: { tyylisivuun color rel="stylesheet" { Mediatyyppi SCREEN TTY TV PROJECTION HANDHELD PRINT BRAILLE EMBOSSED AURAL ALL tällainen black; REL="StyleSheet" avulla :{display: none; print screen (televisio) voi :(kaikki :(Laitteet voi 13pt; : left; Black; Times (tulostus) : tehdä voi white; (Puhesyntetisaattorit) none; ratkaista tyyliohje. :(pistekirjoitusnäyttö) viittaus (tietokoneen { none; tehdä edellä (pienille :(Sivuuttava jotka none; toisinkin, test</title> New white; (dataprojektoreille) type="text/css" esim. käyttämällä mainitut) käyttävät Roman, TYPE="text/css" näytöille, Visuaalinen, Visualinen Auditiivinen Taktiilinen Molemmat jolloin näin: tyylin Mediaryhmä braille-tulostin) serif; tasalevyistä ainakin css-tyyliä esim HREF="/css/testi1.css" HREF="/fi/testi2.css" medioille taktiilnen kännykät) HREF="/fi/testi.css"/> seuraaville (Casacading kirjasinta) tehdään vai Jatkuva Båda Paginerad Kontinuerlig Molemmat auditiivinen medioilla erilliset media="screen" Style media="print" vai tyylitiedostot. Sheets) sivutettu eli /> tyyliohjetta. Esim. (ei Molemmat Rutnät Bitmappi lainkaan) näin: Tee vai ruuduettu siis I S M 41 / 41

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

Ulkoasun muokkaus CSS-tiedostossa

Ulkoasun muokkaus CSS-tiedostossa Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

Digitaalisen median tekniikat. Luento 3: CSS

Digitaalisen median tekniikat. Luento 3: CSS Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi

Lisätiedot

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002 , XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi

Lisätiedot

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan

Lisätiedot

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE=text/css> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen Verkkosivustojen suunnittelu ja rakentaminen CSS-perusteet Sisällysluettelo 1 Johdanto 2 CSS:n syntaksi 3 Valitsimet 4 CSS:n liittäminen dokumentteihin 4.1 CSS erillisenä tiedostona 4.2 CSS upotettuna

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.

Lisätiedot

3 CSS ja teknisesti laadukas Web-sivu

3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja CSS ja teknisesti laadukas Web-sivu Johdanto luentokerran aihepiiriin: Nykyaikaisen Web-hypermedian toteuttaminen on HTML-kielen ja CSS-tyylien yhteispeliä

Lisätiedot

Ajatus kaiken taustalla

Ajatus kaiken taustalla HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA Aulikki Hyrskykari Antti Sand Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

CSS tyyliä sivuihin osa II. Elina Ulpovaara

CSS tyyliä sivuihin osa II. Elina Ulpovaara CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Antti Tolppanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti 1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23

Lisätiedot

Kotisivut helposti - osa 4

Kotisivut helposti - osa 4 Kotisivut helposti - osa 4 Artikkelisarjan kolmessa ensimmäisessä osassa esiteltiin Internet-siviuihin sekä XHTML- ja CSS-ohjelmointikieliin liittyviä perusteita. Tässä osassa kerrotaan, miten aiemmin

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

1. Lohkon korkeus ja leveys

1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt

Lisätiedot

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004

Navigointi Verkkomultimedia ICT1tn004 Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?

Lisätiedot

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/ 1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?

Lisätiedot

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014 1.4.2014 Aulikki Hyrskykari Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Kuvat ja taustat ICT1TN004. Elina Ulpovaara Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa

Lisätiedot

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla 4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät

Lisätiedot

XML & CSS. WWW-sovellus??

XML & CSS. WWW-sovellus?? XML & Näkökulmia WWW-ympäristön sovelluksiin ja käyttöliittymiin ILKKA PALOLA Citec Information WWW-sovellus?? Informaationhallinta, julkaisutoiminta Verkkoviestintä ESIMERKKEJÄ käyttäjistä ja käyttökohteista:

Lisätiedot

Editorin käyttö. TaikaTapahtumat -käyttöohje

Editorin käyttö. TaikaTapahtumat -käyttöohje Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset

Lisätiedot

Asemointi. 1. Lohkon korkeus ja leveys

Asemointi. 1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Opinnäytetyö 5.4.2006 Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Sisällysluettelo 1. Johdanto... 3 2. Suunnittelu... 4 2.1. PTOPlus.net... 4 2.2. Sivujen tarkoitus ja kohderyhmä...

Lisätiedot

xhtml+css Survival Kit

xhtml+css Survival Kit xhtml+css Survival Kit xhtml:n ja CSS:n lyhyt oppimäärä 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

Lisätiedot

HTML5 -elementit jatkuu

HTML5 -elementit jatkuu HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"

Lisätiedot

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin) 23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN

Lisätiedot

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1. 1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE 4 1.2 VÄRILLINEN LOGO 5 1.3 LOGO VÄRILLISELLÄ POHJALLA 6 1.4 MUSTA LOGO 7 1.5 EI NÄIN 8 3 1.1 Logo ja turva-alue neste jacobsin logo Neste Jacobsin uusi tekstilogo

Lisätiedot

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa. WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara

Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara Navigointi Verkkomultimedia ICT1tn004 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on? Mihin sivulta

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. 3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi) 1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 4 2. Ruudukkopohjainen taitto... 5 2.1. 960 Grid System... 5 2.2.

Lisätiedot

Johdatusta selainohjelmointiin

Johdatusta selainohjelmointiin Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat

Lisätiedot

CSS - tekstit. Tyylisivut

CSS - tekstit. Tyylisivut CSS - tekstit Sisällys: Tyylien käyttö Tekstit: Fontit, värit, korostukset Tasaus, välistykset ICT01D 28.11.2005 Elina Ulpovaara Tyylisivut Tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on

Lisätiedot

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista

Lisätiedot

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa: XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 2000 - Näkymät FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava

Lisätiedot

Teeman rakentaminen Wordpressiin

Teeman rakentaminen Wordpressiin 1 Teeman rakentaminen Wordpressiin Jari Sarja lokakuu 2009 Sisältö Johdanto... 2 Valmiin teeman muokkaaminen... 2 XHTML:n perussäännöt... 4 Teeman tiedostot... 5 Sanasto... 5 Hierarkia... 5 Template...

Lisätiedot

1. Lähteet 2 2. Linkkejä 2 3. Tuntitehtävä 3 4. 00 Esipuhe 3 5. 01 Mikä ihmeen XML? 3 6. 02 Historiaa 5 7. 03 Välineet 6 8. 04 Hello World! 6 9.

1. Lähteet 2 2. Linkkejä 2 3. Tuntitehtävä 3 4. 00 Esipuhe 3 5. 01 Mikä ihmeen XML? 3 6. 02 Historiaa 5 7. 03 Välineet 6 8. 04 Hello World! 6 9. 1. Lähteet 2 2. Linkkejä 2 3. Tuntitehtävä 3 4. 00 Esipuhe 3 5. 01 Mikä ihmeen XML? 3 6. 02 Historiaa 5 7. 03 Välineet 6 8. 04 Hello World! 6 9. 05 Skandit mukaan 7 10. 06 Rakenneosat 8 11. 07 Eihän se

Lisätiedot

Verkkosivujenulkoasu

Verkkosivujenulkoasu Verkkosivujenulkoasu ulkoasu (CSS) WWW-sivujen ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Aleksi O Connor DI Pia Tukkinen laitos Mediatekniikan Mediatekniikan

Lisätiedot

2. PEHMEÄ XHTML XRAJAHTML

2. PEHMEÄ XHTML XRAJAHTML Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Pinja Hokkanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja HTML ja CSS T-111.4360 WWW-palvelun suunnittelu Mikko Pohja Sisältö HTML XHTML CSS DOM DHTML Käytännön esimerkkejä Kuka tahansa pystyy tekemään yksinkertaisen dokumentin HTML Hyper Text Markup Language

Lisätiedot

Kotisivut helposti - osa 3

Kotisivut helposti - osa 3 Kotisivut helposti - osa 3 Tämän artikkelisarjan kahdessa ensimmäisessä osassa esiteltiin Internet-sivujen perusteita, kotisivujen suunnittelulähtökohtia sekä HTML/XHTML-ohjelmoinnin perusteita ja yleisimmin

Lisätiedot

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.

Lisätiedot

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS-tyylien perusteet CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.

Lisätiedot

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN

Lisätiedot

MITÄ JAVASCRIPT ON?...3

MITÄ JAVASCRIPT ON?...3 JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3

Lisätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Digitaalisen median tekniikat xhtml Harri Laine 1

Digitaalisen median tekniikat xhtml Harri Laine 1 Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki.

Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki. Asiakirjan valmistelu Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki. Tarkista, ettei dokumentissa ole peräkkäisiä

Lisätiedot

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8. Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.

Lisätiedot

SeaMonkey pikaopas - 1

SeaMonkey pikaopas - 1 SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston

Lisätiedot

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara Typografia Verkkomultimedia ICT1tn004 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman. Suunnitellaan

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso

Lisätiedot

Teeman rakentaminen WordPressin versioon 3.0. Jari Sarja marraskuu 2010

Teeman rakentaminen WordPressin versioon 3.0. Jari Sarja marraskuu 2010 1 Teeman rakentaminen WordPressin versioon 3.0 Jari Sarja marraskuu 2010 2 Sisältö 1. Johdanto... 4 1.1. Mitä tarvitaan?... 4 2. Valmiin teeman muokkaaminen... 5 2.1. Teeman tiedostot... 8 2.2. Sanasto...

Lisätiedot

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

Lisätiedot

GetSimple 2.03.1. Jari Sarja. Maaliskuu 2011

GetSimple 2.03.1. Jari Sarja. Maaliskuu 2011 1 GetSimple 2.03.1 Jari Sarja Maaliskuu 2011 2 Sisältö 1. Johdanto... 3 2. Asennus... 4 3. Asetukset... 11 3.1. Kieliasetukset... 12 4. Sivut... 15 4.1. Sivun muokkaus... 15 4.2. Uuden sivun luominen...

Lisätiedot

suomen palopäällystöliiton jäsenmatrikkeli

suomen palopäällystöliiton jäsenmatrikkeli gr a a f ine n oh je is t o suomen palopäällystöliiton jäsenmatrikkeli l ogo Suomen Palopäällystöliiton logo on sinetin ja tekstin yhdistelmä. Tässä on esitettynä sen perusversio jota pyritään käyttämään

Lisätiedot

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat

Lisätiedot

Taulukot. 2002 Päivi Vartiainen 1

Taulukot. 2002 Päivi Vartiainen 1 Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit

Lisätiedot

QT tyylit. Juha Järvensivu 2008

QT tyylit. Juha Järvensivu 2008 QT tyylit Juha Järvensivu juha.jarvensivu@tut.fi 2008 Sisällys QStyle Style sheet Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä

Lisätiedot

ARVO - verkkomateriaalien arviointiin

ARVO - verkkomateriaalien arviointiin ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue

Lisätiedot

KÄYTTÖOHJE. Servia. S solutions

KÄYTTÖOHJE. Servia. S solutions KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet

Lisätiedot

UpdateIT 2010: Editorin käyttöohje

UpdateIT 2010: Editorin käyttöohje UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...

Lisätiedot

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3 Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...

Lisätiedot