CLT132 Tagien attribuutit Visuaalisen ilmeen muotoilu (viikko 3)

Esitys aiheesta: "CLT132 Tagien attribuutit Visuaalisen ilmeen muotoilu (viikko 3)"— Esityksen transkriptio:

1 CLT132 Tagien attribuutit Visuaalisen ilmeen muotoilu (viikko 3)

2 CLT132 – kevät 2008Sauli Nurmi Attribuutti... HÄH!? Attribuutti on lauseenjäsen, jonka tehtävä on toimia substantiivin välittömänä määritteenä. Attribuutti kertoo, millainen substantiivi on toisin sanoen. Lähde: http://fi.wikipedia.org/wiki/Attribuutti

3 CLT132 – kevät 2008Sauli Nurmi Attribuutti, jatkoa OK, nyt määritelmä tunnetaan, mutta mitä attribuuteilla tehdään HTML- kontekstissa? Attribuutti määrittää jonkin tietyn elementin (tagin) ominaisuuksia Attribuutti ei siis ikinä voi esiintyä yksinään!

4 CLT132 – kevät 2008Sauli Nurmi Attribuutti, jatkoa Attribuutti tulee siis aina osaksi jotain HTML- kielistä tagiä, käytännössä tämä tarkoittaa sitä, että alkutagin sisään kirjoitetaan myös attribuutti Attribuutit jossain määrin universaaleja... kun oppii esim. värin tai asemoinnin attribuuttimääritelmän yhden elementin osalta, se toimii myös muissa elementeissä, joissa tämä muotoilu on mahdollinen Voivat toimia myös HTML:n ulkopuolella (muut sivunkuvauskielet)

5 CLT132 – kevät 2008Sauli Nurmi ”Käytännössä” (=teoriaa) Attribuutteja käytetään seuraavanlaisesti (esitys teoreettinen, tagit eivät määritysten mukaisia)

6 CLT132 – kevät 2008Sauli Nurmi Periaatteessa, tyylillisesti Attribuutit voi periaatteessa laittaa mihin järjestykseen tahansa......mutta kannattaa olla systemaattinen HTML-oppaiden esimerkkijärjestykset (useimmiten) hyviä Toiminnallisuuden kannalta ei väliä, mutta koodin luettavuuden kannalta on parempi noudattaa esimerkkejä

7 CLT132 – kevät 2008Sauli Nurmi Käytännössä, oikeasti Ehkä yleisin attribuutti on ankkuritagin (anchor) href-attribuutti Selväkielisesti: määrittää www-osoitteen Esim. Linkki yliopiston sivuille Ankkurielementistä ei olisi kauheasti hyötyä/iloa ilman attribuuttia…

8 CLT132 – kevät 2008Sauli Nurmi Käytännössä, jatkoa Perinteisesti attribuuteilla on määritelty dokumentin ulkoasua, kuten tekstin asemointia, värejä, yms. Tämä ei enää aukottomasti päde (CSS!), mutta tekniikkana toimii yhä edelleen

9 CLT132 – kevät 2008Sauli Nurmi Esimerkkejä Kappaleen asemointi keskelle sivua: … Kappaleen asemointi oikeaan laitaan: … Kappaleen asemointi vasempaan laitaan: …

10 CLT132 – kevät 2008Sauli Nurmi Esimerkkejä 2 Fontin väri punainen: … Fontin väri sininen: … Fontin väri musta: …

11 CLT132 – kevät 2008Sauli Nurmi Sivukommentti väreistä Värit voi määritellä HTML:ssä niiden nimillä: black, blue, brown, gold, gray, green, orange, pink, purple, red, silver, violet, yellow, white Yleisempää (tai ainakin mielekkäämpää) on kuitenkin käyttää ns. RGB-arvoa RGB = red, green, blue

12 CLT132 – kevät 2008Sauli Nurmi RGB-arvot RGB-arvoilla voidaan luoda äärellinen määrä värejä, käytännössä voidaan kuitenkin sanoa että valikoima on jokaiseen inhimilliseen käyttötarkoitukseen jopa liiankin laaja... Yksittäinen väri koostuu kolmen kanavan ”vahvuudesta”: punainen, vihreä ja sininen

13 CLT132 – kevät 2008Sauli Nurmi RGB-arvot, jatkoa Mielikuva-assosiaatio: ajattele, että on kolme jokea, lopullinen väri on se koski, jonka kolmen joen virtaus synnyttää Ei virtausta, ei koskea Kaikki arvot nollassa: musta Täysi virtaus, tulva Kaikki arvot täydessä ääriarvossa: valkoinen Muut yhdistelmiä näiden väliltä

14 CLT132 – kevät 2008Sauli Nurmi RGB -> HEX RGB-arvot ovat siis välillä 0-255 (256 arvoa) Nörteille: binäärijärjestelmän kahdeksas potenssi, 2 8 = 256 Syöte täytyy kuitenkin olla kuudella merkillä merkittävä heksadesimaali-arvo 1-15 = 1-F 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F 10 (10-järjestelmä) = A (heksadesimaali) 10 (heksadesimaali) = 16 (10-järjestelmä)

15 CLT132 – kevät 2008Sauli Nurmi RGB -> HEX, jatkoa Käytännössä esimerkiksi musta on RGB:nä 0,0,0 Kuudella merkillä heksa-arvo siis 000000 Valkoinen 255, 255, 255 Kuudella merkillä heksa-arvo FFFFFF Punaisen värin kohdalla R-kanava on täysin auki, muut kiinni: 255, 0, 0 Kuudella merkillä heksa-arvo FF0000 Jne.

16 CLT132 – kevät 2008Sauli Nurmi Loppukommentti väreistä Heksa-arvon keksiminen intuitiivisesti vaikeaa (poikkeuksena musta, valkoinen, punainen, vihreä ja sininen sekä näiden yleisimmät kombinaatiot) Onneksi on apuvälineitä, esimerkiksi http://www.drpeterjones.com/colorcalc/ http://www.easycalculation.com/rgb-coder.php Ulkoaopettelu übernörtti tapa...

17 CLT132 – kevät 2008Sauli Nurmi Yhteenvetoa Attribuuteilla voi muotoilla (lähes) jokaista elementtiä Yksittäisellä elementillä kuitenkin rajattu attribuuttien määrä, joita se noudattaa EI ole mahdollista määrittää esimerkiksi fontin leveyttä attribuutilla width... Sen sijaan on mahdollista määrittää sen koko size-attribuutilla

18 CLT132 – kevät 2008Sauli Nurmi HTML-filosofointia Periaatteessa attribuutit jopa jossain mielessä HTML:n perusideologian vastaisia Lähtökohtaisesti HTML kuvaa sivun rakennetta ottamatta kantaa sen esittämiseen Useat attribuutit (asemointi, väritys, yms.) nimenomaisesti määrittävät esittämistä, ei rakennetta… Eron tekeminen kenties akateemista, mutta hyvä tiedostaa (ainakin kerran elämässään)

19 CLT132 – kevät 2008Sauli Nurmi Muita muotoiluja (tagejä) Attribuuttien, asemoinnin ja väritysten lisäksi myös eräillä tageillä saa tekstiin korostuksia ja rytmitystä Käytännön tasolla ei olekaan juuri sellaisia HTML-tiedostoja, joissa teksti olisi sellaisenaan ilman kummempia muotoiluja Poikkeuksena raakatekstit ja harrastelijatekeleet

20 CLT132 – kevät 2008Sauli Nurmi H1, H2, H3 H- eli headingtagit kuvaavat tekstin otsikon paikkoja, numeraali kertoo minkä tason otsikko on kyseessä (alaotsikot) HUOM!!! HEAD-elementin otsikkotiedot, kuten title, ovat täysin eri asia kuin BODYn sisään tulevat H(eading)-otsikot Yleistä kurssiasiaa Tenttipäivät

21 CLT132 – kevät 2008Sauli Nurmi P P (eli paragraph, kappale) lienee käyttökelpoisimpia elementtejä HTML:ssä Rajaa tietyn alueen tekstistä yhteenkuuluvaksi kokonaisuudeksi Attribuuteilla voidaan määrittää tekstin ulkoasua Myös CSS:llä (myöhempää asiaa) tekstiä tähän väliin

22 CLT132 – kevät 2008Sauli Nurmi CODE, BLOCKQUOTE Toisinaan on hyvä korostaa erityisesti jotain tekstin kohtaa erottamalla se muusta tekstimassasta CODE ja BLOCKQUOTE ovat käteviä tähän tarkoitukseen Periaatteessa CODE-elementtiin pitäisi laittaa ohjelmakoodia ja BLOCKQUOTEen pitkiä tekstilainauksia Käytännössä näihin voi laittaa myös muutakin sisältöä (HTML kun ei kysy että onko esim. CODEn sisällä oikeasti koodia vai vaikka ruåtsalaisvitsejä...)

23 CLT132 – kevät 2008Sauli Nurmi Q, CITE Samanlaisia erillistä tekstilähdettä korostavia elementtejä on mm. Q (quote, lainaus) ja CITE (öh... sekin lainaus, siis sitaatti) Näihin ja muihin kannattaa tutustua: http://www.w3.org/TR/html4/index/elements.html http://www.w3schools.com/tags/default.asp Elämä on laiffii

24 CLT132 – kevät 2008Sauli Nurmi Kommentti kommenteista Tässä vaiheessa on hyvä ottaa esille koodin kommentointi Kuten HEAD-elementin otsikkotiedot, myös kommentit ovat tagejä, jotka eivät näy sivuilla Eivät (periaatteessa) näy myöskään hakukoneilla (käytännössä kyllä) Kertovat koodin (ihmis)lukijalle, mitä koodissa tehdään

25 CLT132 – kevät 2008Sauli Nurmi Kommenteista, jatkoa The definition of an SGML comment is basically as follows: A comment declaration starts with. A comment starts and ends with "--", and does not contain any occurrence of "--".

26 CLT132 – kevät 2008Sauli Nurmi Kommenteista, jatkoa This means that the following are all legal SGML comments: 1. 2. 3. 4. 5. Lähde: http://htmlhelp.com/reference/wilbur/misc/comment.html

27 CLT132 – kevät 2008Sauli Nurmi Yhteenveto kommenteista Kommenttielementti alkaa siis merkinnällä Näiden välinen alue ei varsinaisesti kuulu mukaan näkyvään HTML-dokumenttiin Kommentti alkaa merkinnällä -- ja päättyy samalla tavalla -- Näin ollen siis -- on aina laiton kommentti!!! Sitä ei tulkita kommentiksi, vaan kommentin rajaksi Kommenteilla kerrotaan muille (ja ajan yli itselle) mitä koodissa oikeastaan tehdään

28 CLT132 – kevät 2008Sauli Nurmi Yhteenveto, jatkoa Käytännössä on tuskallisen selvää, että kommentin kuuluu alkaa merkinnällä Tämä ei ole standardi, mutta se on de-facto standardi… Esim. tämän laitoksen lähdetiedostosta www- sivuja generoiva härpätin ei osannut tulkita oikein clt132-kurssin tehtäväsivulle laitettua kommenttia…

29 CLT132 – kevät 2008Sauli Nurmi Viikon oleellisin asia Ymmärtää attribuuttien periaatteellinen ja käytännöllinen merkitys HTML- sivunkuvauskielessä Oppia kommentoimaan HTML-koodia Bonustavoite: oppia käyttämään heksadesimaalipohjaisia värimäärityksiä

30 CLT132 – kevät 2008Sauli Nurmi Lisää aiheesta Attribuutit: http://www.w3.org/TR/html4/index/attributes.html http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.4 Värit: http://www.drpeterjones.com/colorcalc/ http://www.easycalculation.com/rgb-coder.php Kommentointi: http://htmlhelp.com/reference/wilbur/misc/comment.html