CLT132 Vastauksia esille tulleisiin kysymyksiin CSS, External Style Sheet (viikko 9)

Esitys aiheesta: "CLT132 Vastauksia esille tulleisiin kysymyksiin CSS, External Style Sheet (viikko 9)"— Esityksen transkriptio:

1 CLT132 Vastauksia esille tulleisiin kysymyksiin CSS, External Style Sheet (viikko 9)

2 CLT132 – kevät 2008Sauli Nurmi Vastauksia kysymyksiin Tämän viikon ehkä hieman sekalainen sillisalaattimainen sisältö koostuu pitkälti kysymyksistä, joita kurssin aikana on esitetty eri asioista Nämä tosin enimmäkseen nivoutuvat myös suhteellisen kivuttomasti External Style Sheet –asiaan, joka edellisviikkojen CSS-asian valossa pitäisi olla suht’ ongelmaton omaksua

3 CLT132 – kevät 2008Sauli Nurmi DIV-elementti Määrittää alueen HTML-dokumentissa Matemaattisesti: HTML > BODY > DIV > P > etc. DIV-elementti on siis “pienempi” kuin esim. BODY, mutta “suurempi” kuin P Kuten edellä todettu, se määrittää alueen dokumentissa, mikä on triviaalin tyhjentävä vastaus sen olemuksesta...

4 CLT132 – kevät 2008Sauli Nurmi DIV-elementti, jatkoa Seuraava looginen kysymys on, miksi ihmeessä haluaisimme määritellä jonkin alueen dokumentissa? No, muistellaanpa esim. mitä tiedämme jo tähän mennessä CSS:n ominaisuuksista: CSS:n voi määritellä joko yleisesti tai tapauskohtaisesti Määritelmät ovat periytyviä!!!

5 CLT132 – kevät 2008Sauli Nurmi DIV-elementti, jatkoa (2) Edellä esitetystä seuraa, että jos määritämme DIV-alueen dokumentissa, voimme määritellä alueen, joka on pienempi kuin koko dokumentti ja toisaalta suurempi kuin vaikkapa yksittäinen kappale Edelleen, muistamme (ainakin ideatasolla, vaikka ei vielä käytännössä) että ulkoisen CSS-määritelmän avulla voidaan hoitaa useamman dokumentin määritykset Loppu onkin näiden faktojen soveltamista…

6 CLT132 – kevät 2008Sauli Nurmi DIV-elementti, jatkoa (3) Voisimme vaikkapa haluta tehdä ratkaisun, jossa jokaisella sivulla on usean kappaleen kokoinen alue (esim. tietolaatikko), jonka voimme määritellä kätevästi DIVin ja ulkoisen CSS-tiedoston avulla osaksi useaa dokumenttia

7 DIV-esimerkki (dokumentti 1) Céline Marie Claudette Dion, (born March 30, 1968) is a Canadian singer, and occasional songwriter and actress. Born to a large, impoverished family in Charlemagne, Quebec, Dion emerged as a teen star in the French-speaking world after her manager and future husband René Angélil mortgaged his home to finance her first record. In 1990 she released the anglophone album Unison, establishing herself as a viable pop artist in North America and other English-speaking areas of the world. CLT132 – kevät 2008Sauli Nurmi

8 DIV-esimerkki (dokumentti 2) Mariah Carey (born March 27, 1970) is an American hip hop, pop and R&B singer-songwriter, record producer, and actress. Born to a large, impoverished family in Charlemagne, Quebec, Dion emerged as a teen star in the French-speaking world after her manager and future husband René Angélil mortgaged his home to finance her first record. In 1990 she released the anglophone album Unison, establishing herself as a viable pop artist in North America and other English-speaking areas of the world. CLT132 – kevät 2008Sauli Nurmi

9 DIV-esimerkki (CSS-tiedosto) body { background-color: #FFFFF0; }.perustiedot { font-family: Arial, Verdana, sans-serif; font-size: 14px; color: purple; font-weight: bold; background: #F2F2F2; border: thick double #603311; margin-left: 40px; margin-right: 50px; padding: 10px }.artikkeli { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: black; } CLT132 – kevät 2008Sauli Nurmi

10 DIV/CSS-selitys Äskeisessä siis yksi ulkoinen tiedosto määrittää kahden dokumentin ulkoasua Esimerkin CSS:ssä määritelty BODY määrittää koko dokumentin ulkoasun, paitsi silloin kun DIV-määritys ajaa yli Periytyvyyden ansiosta kaikki DIV-elementin sisällä määrittyy DIVin määrityksen mukaan Uusien kappaleiden yms. lisääminen ei aiheuta tarvetta lisämäärityksille, vaan DIVin sisällä määritykset tulevat CSS:n DIV-määrityksestä, muuten BODYn määrityksestä

11 CLT132 – kevät 2008Sauli Nurmi Pään käyttö on sallittua… Äskeiset HTML-esimerkit eivät vielä paljon ilahdu hienosta CSS- määrityksestämme, sillä… YHTEYS MÄÄRITELMÄÄN PUUTTUU!!! CSS-tiedot tallennetaan esim. style.css –tiedostoon (nimi voi olla muukin) HTML-dokumentin HEAD-osioon lisätään tieto määrityksen sijainnista

12 CLT132 – kevät 2008Sauli Nurmi HTML, HEAD, CSS Mikäli määritelmä sijaitsee triviaalisti samassa hakemistossa kuin HTML- tiedosto seuraava määritys riittää: Muussa tapauksessa href-attribuutti määritetään kuten mikä tahansa linkki, tarvittaessa pitkällä osoitteella, esim. http://www.helsinki.fi/yliopistotyylit/style.css (keksitty osoite)

13 CLT132 – kevät 2008Sauli Nurmi DIV-kikkailua DIV-elementti voi olla (ainakin periaatteessa) myös toisen DIV- elementin sisällä Tässä tapauksessa sisempi määritys yliajaa ulomman (tosin ilman eroavaa luokkamääritystä, mitään näkyvää eroa ei ole…) Kätevä esim. artikkelin keskelle tulevassa info/tietolaatikossa

14 CLT132 – kevät 2008Sauli Nurmi DIV-kikkailua, jatkoa Hyvä esimerkki löytyy tästä keskustelufoorumin kysymys/vastaus-ketjusta: http://www.daniweb.com/forums/thread50049.html Kysyvän kaverin koodi on myös hyvä varoittava esimerkki huonosta nimeämiskäytännöstä: TitDiv varmaankin tahtoo sanoa ”otsikkoalue”, mutta tarkoittaa enkuksi myös ”tissidivisioona”… Ambiguiteetti varmaankin yhdentekevää kontekstissa, mutta jos tämän tekisi vaikka monikansallisen yhtiön sivuilla, voisi jollekin tulla sanomista… Tarinan opetus siis ilmeisesti on olevinaan: triviaaleimpiakin asioita kannattaa harkita kaksi kertaa, kun julkista sivua tekee

15 ”Wrapper” elementti… Hieman hämmennystä on ilmeisesti aiheuttanut yhdessä YouTube- tutoriaalivideossa ollut mysteerinen ”wrapper tag”… Voidaan avoimesti todeta, että videon tekijän pedagoginen lähestymistapa voisi olla parempikin, sillä wrapper-elementtiä tai varsinaista tagiä ei ole olemassakaan! Ei siis ihme, jos oppi tuntuu tässä tapauksessa kaatavan ojaan (tjsp.) CLT132 – kevät 2008Sauli Nurmi

16 ”Wrapper” elementti…, jatkoa Jos kuitenkin katsoo analyyttisesti videota, niin huomataan ettei mitään wrapper-elementtiä/tagiä varsinaisesti ole (Tätä tietenkin oli hyvin vaikea huomata, koska käsiteltiin asioita, joita ei oltu vielä opittu) Kyseessä on siis ihan normaali Internal/External- tyylimääritys, jolle vain annetaan tunnisteeksi ”wrapper” Videota tarkasti katsomalla huomaa, että tekijä käyttää määrityksessä # prefiksiä. prefiksin sijaan (toisin sanoen, määrittää siis ID:n eikä classiä) CLT132 – kevät 2008Sauli Nurmi

17 ”Wrapper”… same old thing… Wrapper ei siis ole mitään sen mystisempää kuin edellä esitetyt DIV-elementtien tyylitiedostomääritykset ja niihin viittaaminen class- tai id-attribuutilla ”Wrapper” on vain valittu joissain piireissä tyylillisesti kuvaavaksi sanaksi sille, mitä muotoiluilla ja määrityksillä halutaan saada aikaan Saman asian ajaisi vaikkapa termi MattiJaTeppo, joka olisi kuitenkin vähemmän kuvaava ja intuitiivisesti ehkä vaikeampi mieltää… Lisää tietoa löytyy googlettamalla, katso esim. http://www.communitymx.com/content/article.cfm?page=1&cid=A8BBA CLT132 – kevät 2008Sauli Nurmi

18 . ja.. Toinen kysymyksiä herättänyt asia (liittyy vain löyhästi edelliseen) on tiedostoihin viittaaminen paikallisessa hakemistorakenteessa Kuten varmaan joltain tietokoneen/tekstitiedostojen alkeiskurssilta tuttua:. viittaa tämänhetkiseen hakemistoon.. viittaa yhtä tasoa ylempänä olevaan hakemistoon

19 CLT132 – kevät 2008Sauli Nurmi Hakemistotasot HTML toimii siis aivan kuten normaali terminaalinavigointi, jos sen osaa, osaa myös. ja.. käytön Kannattaa huomioida: (Yleensä) on mahdollista käyttää myös pitkää Internet-viittausta, mutta se menee rikki, jos tiedostot siirretään toisen osoitteen taakse Paikallinen viittaus toimii niin kauan kuin tiedostot ovat samassa sijaintipaikassa

20 CLT132 – kevät 2008Sauli Nurmi Viittausesimerkkejä "kuvat/kuva.jpg" Viittaus ylemmältä tasolta alemman tason hakemistoon "../kuva.jpg" Viittaus alemmalta tasolta ylemmän tason hakemistoon "../kuvat/kuva.jpg" Hieman hankala… Viittaus samalla tasolla sijaitsevaan, mutta toiseen hakemistoon kuin se, mistä viitataan "../../kuvat/kuva.jpg” Vielä hieman hankalampi… Tässä siis edetään kaksi tasoa ylöspäin, ja sen jälkeen yksi taso alaspäin ”toista haaraa” "./kuva.jpg" Tässä esimerkissä kuva on samassa hakemistossa, joskin käytännössä./ merkintä on turha, parempi jättää pois

21 CLT132 – kevät 2008Sauli Nurmi Kuva linkkinä Yleinen (ja useimmiten huono) tapa on käyttää kuvia linkkeinä Ennen kuin katsotaan, miten se tehdään, käsitellään ”pelisäännöt”: Kuva voi olla linkkinä, mutta muista seuraavat asiat:  Informatiivinen ALT-kuvaus oltava sitä tilannetta varten, että kuva ei lataudu  Tekstimuotoinen linkki oltava sitä tilannetta varten, että koko kuvakentän näyttäminen estetty (esim. selainten kuvaestot)

22 CLT132 – kevät 2008Sauli Nurmi Kuva linkkinä, jatkoa Itse toteutus on varsin triviaali: Suomeksi In English Yllä olevassa siis on Suomen lippu linkkinä suomenkielisille sivuille ja Englannin lippu englanninkielisille Huomioi, että kuvissa on asianmukaiset vaihtoehtoiset kuvaukset ja alapuolella tekstilinkki Huomioi myös, että linkki on yksi ja sama sekä kuvalle ja tekstille (voisi olla myös eri linkki, joka kuitenkin voisi viedä samaan osoitteeseen)

23 Tiedostojen nimeäminen CLT132 – kevät 2008Sauli Nurmi Tämäkin asia on hyvä kerrata, koska tästäkin on tullut jotain kysymyksiä Muistetaan perussääntö: Jotta HTML-tiedosto näkyy ongelmitta, se tulee nimetä *.htm tai *.html –päätteellä Periaatteessa päätteellä ei ole väliä, mutta kokeilkaa vaikka *.xhtml –päätettä, niin varmasti ennen pitkää tulee ongelmia...

24 CLT132 – kevät 2008Sauli Nurmi Tiedoston hyvät nimet Kuten legendaarinen kurssimateriaali eräällä kurssilla eräästä toisesta asiasta totesi: “Sisällön on oltava nformatiivinen ja sekleä” (sic!) Hyvä nimi siis on tarpeeksi pitkä ja kuvaava, toisaalta lyhyt ja ytimekäs Perinteisesti: 8+3 merkkiä, nykyään tämä ei ole rajoitus, mutta hyvä lähtökohta kuitenkin Skandit yms. barbaarisen maailman merkit aiheuttavat ongelmia, parempi käyttää englannin kielen (suppeaa) valikoimaa: A-Z, a-z, 0-9

25 CLT132 – kevät 2008Sauli Nurmi Hyvä nimi vs. huono nimi Hyvä nimi: lomakuvat2008.htm Huono nimi (1): 1.htm Huono nimi (2): Melkein kaikki lomakuvat Kööpenhaminan reissulta joka tehtiin Jaskan ja Börjen kanssa kesällä Ekiltä lainatulla vanhalla Datsunilla.htm Huono nimi (3): wjrojdi93jef9kjd89bbwtlwtnswd94.htm HUOM! Poikkeustapauksena viimeinen voisi olla hyväkin nimi, esim. automaattisesti generoidussa suuressa tietokannassa, mutta ei puututa siihen…

26 CLT132 – kevät 2008Sauli Nurmi Oletussivut Selain+palvelin etsii oletuksena sivua index, joten on hyvä nimetä pääsivu aina tuolla nimellä (htm vs. html pääte ei ole oleellista, enää nykyään ainakaan) Esim. home.htm on ihmiskäyttäjälle looginen oletussivu, mutta ei selaimelle Poikkeus… HTML:ää generoivat serveripään koodisivut voivat olla oletuksena toisenkin nimisiä, esim. default.asp, tämä ei kuitenkaan muuta yllä esitettyä epätodeksi Jos selain ei löydä oletussivua, eikä ihmiskäyttäjä osaa antaa oikeaa osoitetta, ei selaamisesta oikein tule mitään…

27 CLT132 – kevät 2008Sauli Nurmi Mitä palvelin näyttää Palvelin näyttää sen sivun, jota selain yrittää hakea, esim. kuvat.htm tai lomake.htm Sivu näytetään jos ja vain jos palvelimella on asetettu sivun oikeudet sellaiseksi, että ulkopuolinen käyttäjä voi nähdä sen Jos sivua ei ole, tai oikeudet eivät salli, palvelin näyttää joko virhesivun tai ei mitään (jolloin tod.näk. näkyy selaimen sisäinen virheilmoitussivu)

28 CLT132 – kevät 2008Sauli Nurmi Mitä palvelin näyttää, jatkoa Mikäli haetaan esim. http://www.helsinki.fi/hakemisto/index.htm haetaan tiettyä sivua (jolloin periaatteessa esim. index.html:n ei tulisi näkyä haetun sijasta) Mikäli haetaan http://www.helsinki.fi/hakemisto/ luotetaan siihen, että palvelin ja selain näyttävät oletussivun (mikä se ikinä onkaan) Riippuu palvelimesta, mitä näkyy silloin, jos haettua sivua ei ole, mutta hakemisto kuitenkin on olemassa Toisinaan tällöin saadaan näkyviin FTP-tiedostolistaus selaimessa, mikä näyttää saatavilla olevat tiedostot

29 Oikeuksien määritys Palvelimen oikeuksien määrittäminen ei ole elimellisen oleellista asiaa tällä kurssilla, mutta karkealla tasolla kuvattuna täten määritetään se, onko tiedosto ulkopuolisen ladattavissa samoin kuin useimmiten sen, näkyykö tiedostolistaus vai ei Määrityksen tasot: User/owner – group – other Oikeuksien tasot: Read – write – execute Ulkopuolisten vapaat ja rajoittamattomat suoritusoikeudet ovat yksi pahimmista tietoturvariskeistä maailmassa! CLT132 – kevät 2008Sauli Nurmi

30 External Style Sheet Vielä itsenäisenä asiana (irrallaan DIVistä) ulkoisten tyylitiedostojen käyttö kertauksena External Style Sheet on erillinen ja itsenäinen dokumentti, joka tallennetaan *.css – päätteiseen tiedostoon Varsinaisen dokumentin HEAD-elementin sisään tulee linkki css-tiedostoon, esim. CLT132 – kevät 2008Sauli Nurmi

31 External Style Sheet, jatkoa External Style Sheet määrittää muotoilut niille elementeille, joiden määrittelyt se sisältää Ei määritystä merkitsee oletusmäärityksen käyttöä Inline Style ja Internal Style Sheet ajavat External Style Sheetin ohi (jos ja vain jos se ne ovat kohdedokumentissa) CLT132 – kevät 2008Sauli Nurmi

32 Cascading Order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1) Browser default 2) External style sheet 3) Internal style sheet (inside the tag) 4) Inline style (inside an HTML element) http://www.w3schools.com/css/css_intro.asp CLT132 – kevät 2008Sauli Nurmi

33 Tyylitiedoston toiminta Tyylitiedostoilla voi muuttaa usean dokumentin ulkoasumäärityksiä yhtä aikaa Esimerkiksi: muuttamalla usean dokumentin tyylitiedostomäärityksen linkin osoittamaan samaan css-tiedostoon, ne saavat saman ulkoasun Edelleen: muuttamalla yhden tyylitiedoston määrityksiä, kaikki siihen viittaavat dokumentit ovat muutoksen alaisia CLT132 – kevät 2008Sauli Nurmi

34 Tyylitiedoston toiminta, jatkoa (Mahdollisesti) huono tapa: jos haluaa muuttaa dokumenttien ulkoasun täysin toiseksi muokkaa olemassaolevaa tyylitiedostoa (Usein) parempi tapa: tekee täysin uuden tyylitiedoston (vanhaa voi käytää pohjana), nimeää vanhan tiedoston esim. style.css.old, uuden style.css Dokumentit viittaavat uuteen tiedostoon, saavat uuden ulkoasun, mutta vanha ulkoasu palautettavissa triviaalisti poistamalla.old –suffiksi ja siirtämällä se toiseen tiedostoon CLT132 – kevät 2008Sauli Nurmi

35 Käyttö käytännössä Dokumentti tietenkin voi sisältää yhtä aikaisia määrityksiä eri tyylitiedostoihin, katso esim. http://www.w3.org/TR/html401/present/styles.html#h-14.3 Esim. yksi tyylitiedosto normaaliselaimille, pelkistetympi mobiiliselaimille, äärimmäisen pelkistetty saavutettavuus-käyttöön Sekavat määritelmät voivat tuottaa kuitenkin sekavia lopputuloksia, ja on parempi tehdä yksi huolellinen tiedosto kuin monta ”vähän sinnepäin” Ainakin ohjelmoijan tulee eksplisiittisesti tietää tyylitiedostojen kaskadinen järjestys, eli mistä lähteestä määritykset missäkin tilanteessa haetaan CLT132 – kevät 2008Sauli Nurmi

36 Internal SS, lisäkikka Yhteensopivuutta eri selainten kanssa voi parantaa kommentoimalla sisäisen tyylitiedoston ”pois” Some style sheet languages support syntax intended to allow authors to hide the content of STYLE elements from non- conforming user agents. This example illustrates for CSS how to comment out the content of STYLE elements to ensure that older, non- conforming user agents will not render them as text. <!-- H1 { color: red } P { color: blue} --> CLT132 – kevät 2008Sauli Nurmi

37 Internal SS, lisäkikka, jatkoa Oletuksena edellä mainittu tapa lisää yhteensopivuutta poistamalla tyylimääritykset epäyhteensopivien selainten näkyviltä Mutta käykö mahdollisesti niin, että jokin selain tulkitsee muotoilut faktisesti poiskommentoiduiksi…? Tällöin tietenkin määritykset tulisivat joko ulkoisesta tiedostosta tai selaimen asetuksista Tietoisesti sisäiset määritykset poiskommentoidessa kommenttimerkit voi siirtää ennen ja jälkeen STYLE- elementin alku- ja lopputagiä Periaatteessa tällöin eksplisiittisesti poistaa kommentin käytöstä, mutta ymmärtääkö selain eron edelliseen…(?!) CLT132 – kevät 2008Sauli Nurmi

38 Lisää aiheesta Features of External Style Sheet http://www.ibdjohn.com/ Linking Style Sheets to HTML http://htmlhelp.com/reference/css/style-html.html CSS (Cascading Style Sheets) – Luento 3 http://appro.mit.jyu.fi/www/luennot/luento3/

39 CLT132 – kevät 2008Sauli Nurmi Viikon oleellisin asia Oppia ymmärtämään ulkoisen tyylitiedoston (External Style Sheet) käytön periaatteet Osata toteuttaa External Style Sheet – sivunmuotoiluja käytännössä Tiedostaa DIV-elementin mahdollisuudet dokumentin muotoilussa, erityisesti ulkoisten tyylitiedostojen avulla