5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet
|
|
- Simo Mikael Niemi
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties) 3. Tekstiominaisuudet (Text properties) 4. Suorakaideominaisuudet (Box properties) 5. Luokkaominaisuudet (Classification properties) Ominaisuudet voivat saada seuraavia arvoja: 1. Pituusarvoja (Lenght units) 2. Prosenttiarvoja (Percentage units) 3. Väriarvoja (Color units) 4. Lokaattoreita (URL) 5. Avainsanoja (Keyword) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 121
2 5 CSS1-ominaisuudet Arvot Käydään aluksi läpi ominaisuuksille annettavissa olevat yleiset arvovaihtoehdot. Pituusarvot (<width>) Pituusarvon yksiköt on jaettu suhteellisiin ja absoluuttisiin. Pituusarvoon viitataan tässä materiaalissa tunnisteella <length>. Suhteellisia yksiköitä ovat elementin kirjasimen korkeus (em), x-kirjaimen korkeus (ex) ja pikseli (px). Esimerkkejä: h1 {margin: 0.5em;} /* ems, the height of the element's font */ h1 {margin: 1ex;} /* x-height, ~the height of the letter 'x' */ p {font-size: 12px;} /* pixels, relative to canvas */ Yksiköt em ja ex viittaavat sen elementin kirjasimen kokoon, jota sääntö koskee. Poikkeuksena on kirjasimen koko ('font-size'), jossa yksiköt viittaavat elementin vanhemman kirjasimen kokoon. Absoluuttisia yksiköitä ovat tuuma (in), senttimetri (cm), millimetri (mm), piste (pt) ja pica (pc). Yksi piste vastaa 1/72 tuumaa ja yksi pika 12 pistettä. Esimerkkejä: h1 { margin: 0.5in; } /* inches, 1in = 2.54cm */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 122
3 h4 { font-size: 12pt} /* points, 1pt = 1/72 in */ h4 { font-size: 1pc } /* picas, 1pc = 12pt */ Prosenttiarvot (<percentage>) 5 CSS1-ominaisuudet Prosenttiarvo viittaa pääsääntöisesti sen elementin kirjasimen kokoon, jota sääntö koskee. p { line-height: 120%; } /* 120% of the element's 'font-size' */ Elementin jälkejäiset perivät prosenttiarvon perusteella lasketun arvon, eivät koskaan prosenttiarvoa. Väriarvot (<color>) Väriarvo voi olla joko avainsana tai RGB (Red Green Blue)-arvo. Väriarvoksi voidaan määritellä jokin avainsanoista: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white tai yellow. RGB-arvo voidaan antaa joko heksadesimaalimuodossa, kolmena kokonaislukuna (0-255) tai kolmena prosenttiarvona. Heksadesimaalimuotoinen RGB-arvon esittämistapa on yleisesti käytössä myös HTML-kielessä. Heksadesimaalimuotoinen väriarvo alkaa aina #-merkillä: p {color: #FF0000;} /* #rrggbb */ MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 123
4 5 CSS1-ominaisuudet RGB-arvon kokonaislukuesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon välillä 0-255: p {color: rgb(255,0,0);} /* rgb(rrr,ggg,bbb), */ RGB-arvo prosenttiesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon väliltä 0.0%-100.0%: p {color: rgb(50%,0%,0%);} /* rgb(rrr%,ggg%,bbb%), 0.0%-100.0% */ Lokaattorit (<url>) URL-osoitteeseen viitataan seuraavalla merkinnällä: body {background-image: url( URL-osoite voi olla myös suhteellinen. Suhteelliset osoitteet käsitellään suhteessa tyylitiedostoon. body {background-image: url(kuva.gif);} Avainsanat Avainsanat ovat tapauskohtaisia ja ne on käyty läpi kunkin ominaisuuden yhteydessä. Sitten ominaisuuksien kimppuun: MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 124
5 5 CSS1-ominaisuudet Kirjasinominaisuudet Kirjasin Ominaisuus: font-family Arvo: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] p {font-family: "Times New Roman", Times, serif;} Kirjasimelle voidaan normaalista poiketen antaa useita arvoja, koska eri koneiden kirjasinvalikoimat eroavat toisistaan. Kirjasimia etsitään koneesta listan määrittelemässä järjestyksessä. Viimeisenä vaihtoehto kannattaa antaa yleinen, käyttöjärjestelmästä riippumaton kirjasimen nimi (generic family): 'serif' (esim. Times), sans-sefif' (esim. Helvetica), cursive' (esim. Zaph-chancery), 'fantasy' (esim. Western) tai 'monospace' (esim. Courier). MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 125
6 5 CSS1-ominaisuudet Kirjasimen tyyli Ominaisuus: font-style Arvo: normal italic oblique em {font-style: normal;} Kirjasimen tyyliksi voidaan valita normaali ('normal') tai kursivoitu ('italic' tai 'oblique'). Kursivointi kannattaa tehdä selainten paremmin tukeman 'italic'-arvon avulla. Kirjasimen tyylin normal-arvo on tarpeen silloin, kun selain esittää oletuksena HTML-elementin kursivoituna (esim. em-elementti). Kirjasimen koko Ominaisuus: font-size Arvo: <absolute-size> <relative-size> <length> <percentage> Kirjasimen koko voidaan antaa neljän eri arvoalueen avulla: absoluuttisena arvona (<absolute-size>), suhteellisena arvona (<relative-size>), pituusarvona (<length>) tai prosenttiarvona (<percentage>). Absoluuttiset arvot: xx-small x-small small medium large x-large xx-large strong {font-size: large;} MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 126
7 5 CSS1-ominaisuudet Suhteelliset arvot: larger smaller blockquote {font-size: larger;} Suhteellinen arvo muuttaa kirjasimen kokoa yhden absoluuttisen arvon verran suuremmaksi ( larger ) tai pienemmäksi ( smaller ). Esimerkiksi larger muuttaa (vanhemmalta perityn) arvon x-small arvoksi small. Pituusarvot: Pituusarvo voi olla suhteellinen (em, ex tai px) tai absoluuttinen (in, cm, mm, pt tai pc). Suhteellisia arvot perustuvat normaalista poiketen elementin vanhemman kokoon. Prosenttiarvot: Prosenttiarvo kertoo elementin koon suhteessa vanhemmalta perittyyn kokoon. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 127
8 5 CSS1-ominaisuudet Kirjasimen vahvennus Ominaisuus: font-weight Arvo: normal bold bolder lighter em {font-style: normal; font-weight: bold;} strong {font-weight: bolder;} Normaali lihavoitu kirjasin (vrt. b-elementti) saadaan arvolla 'bold'. Kirjasimen vahvennus voidaan määritellä myös suhteellisesti: perittyä vahvennusta voidaan lisätä ('bolder') tai vähentää ('lighter'). Kolmas vaihtoehto on kirjasimen vahvennuksen määrittely numeroarvolla: arvo '400' vastaa arvoa 'normal' ja arvo '700' vastaa arvoa 'bold'. Kirjasimen merkkikoko Ominaisuus: font-variant Arvo: normal small-caps h3 {font-variant: small-caps;} Merkkikoon arvolla 'small-caps' isot kirjaimet kirjoitetaan normaalisti. Pienet kirjaimet kirjoitetaan ison kirjaimen näköisillä kirjaimilla, joiden koko on isoa kirjainta pienempi. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 128
9 5 CSS1-ominaisuudet Väri- ja taustaominaisuudet Väri Ominaisuus: color Arvo: <color> p {color: red;} p {rgb(255,0,0);} Ominaisuuden 'color' avulla määritellään elementin (piirto)väri. Yleisin käyttötapaus on tekstin värin määritteleminen. Taustaväri Ominaisuus: background-color Arvo: <color> transparent blockquote {color: #CCCCCC;} Taustaväri voidaan määritellä esimerkiksi tekstikappaleelle, taulukon solulle tai napille. Dokumentin taustaväri määritellään body-elementin avulla (periytyminen): body {background-color: lime;} MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 129
10 5 CSS1-ominaisuudet Taustakuva Ominaisuus: background-image Arvo: <url> none body {background-image: url(tomaatti.gif);} Taustakuva voidaan määritellä koko dokumentin sijaan esimerkiksi pelkästään taulukoille. Taustakuvan toisto Ominaisuus: background-repeat Arvo: repeat repeat-x repeat-y no-repeat body { background-image: url(tomaatti.gif); background-repeat: no-repeat;} Taustakuva voidaan määritellä toistettavaksi ainoastaan vaakasuunnassa ('repeat-x'), ainoastaan pystysuunnassa ('repeat-y') tai molemmissa ('repeat'). Arvolla 'no-repeat' taustakuvaa ei toisteta. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 130
11 5 CSS1-ominaisuudet Taustakuvan kiinnitys Ominaisuus: background-attachment Arvo: scroll fixed body { background-image: url(tomaatti.gif); background-attachment: fixed;} Arvo 'fixed' kiinnittää taustakuvan siten, että se pysyy paikallaan sivua vieritettäessä. Taustakuvan asemointi Ominaisuus: background-position Arvo: [<percentage> <length>]{1,2} [top center bottom] [left center right] Taustakuvan paikka määritellään arvoparina. Arvopari voi koostua prosentti- ja pituusarvoista. Arvoparin ensimmäinen arvo kertoo kuvan paikan pystysuunnassa ja toinen arvo paikan vaakasuunnassa. Paikka voidaan määritellä myös avainsanojen avulla: vaakasuunnassa left, center tai right ja pystysuunnassa top, center tai bottom. Seuraava sääntö sijoittaa taustakuvan keskelle taulukon solua: td { background-image: url(tomaatti.gif); background-position: 50% 50%;} MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 131
12 5 CSS1-ominaisuudet Taustakuvan paikka määritellään oletuksen suhteessa elementin kokoon. Selaimen ruudun keskellä pysyvä taustakuva saadaan, kun kiinnitetään taustakuva 'backgroundattachment'-ominaisuuden arvolla fixed. Esimerkki selventää: body { background-image: url(tomaatti.gif); background-attachment: fixed; background-position: center center;} Taustakuvan paikka kannattaa määritellä joko prosenttiarvoilla tai avainsanojen avulla, jolloin käyttäjän näytön koolla tai tarkkuudella (resoluutio) ei ole merkitystä lopputuloksella. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 132
13 5 CSS1-ominaisuudet Tekstiominaisuudet Tekstin koristelu Ominaisuus: text-decoration Arvo: none [ underline overline line-through blink ] a {text-decoration: none;} em {text-decoration: blink;} del {text-decoration: line-through;} Tekstiä voidaan koristella lisäämällä viiva tekstin alapuolelle ('underline') tai yläpuolelle ('overline'). Teksti voidaan myös yliviivata ('line-through') tai asettaa vilkkumaan ('blink'). Selaimen oletuksena käyttämät koristelut (esimerkiksi viiva linkkitekstin alla) voidaan poistaa arvolla 'none'. Tekstin tasaus pystysuunnassa Ominaisuus: vertical-align Arvo: baseline sub super top text-top middle bottom text-bottom <percentage> td {vertical-align: top;} MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 133
14 5 CSS1-ominaisuudet Pystysuuntaisen tasauksen määrittäminen on tarpeen esimerkiksi taulukon soluissa, joissa oletuksena puoliväliin ( middle ) sijoitettava teksti voidaan tasata joko solun yläreunaan ( top ) tai alareunaan ( bottom ). Tekstin tasaus vaakasuunnassa Ominaisuus: text-align Arvo: left right center justify p {text-align: justify;} h1 {text-align: right;} Teksti voidaan tekstinkäsittelyohjelmien tapaan keskittää ('center') tai tasata vasempaan ('left') tai oikeaan ('right') reunaan. Tekstin tasaaminen molempiin reunoihin onnistuu arvolla 'justify'. Molempiin reunoihin tasausta ei yleensä suositella, koska tekstin lukeminen näytöltä vaikeutuu. Tekstin sisennys Ominaisuus: text-indent Arvo: <length> <percentage> p {text-indent: 1em;} blockquote {text-indent: 10%;} Ominaisuuden 'text-indent' avulla määritellään elementin ensimmäisen tekstirivin sisennys. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 134
15 5 CSS1-ominaisuudet Sanojen välistys Ominaisuus: word-spacing Arvo: normal <length> h1 {word-spacing: 1em;} Sanojen väliin jätettävän tyhjän tilan pituuteen vakutetaan word-spacing ominaisuuden avulla. Ominaisuudelle anntettava arvo lisätään oletuksena käytettävään pituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. Kirjainten välistys Ominaisuus: letter-spacing Arvo: normal <length> blockquote {letter-spacing: 0,1em;} Kirjainten väliin jätettävän tyhjän tilan pituuteen voidaan vaikuttaa letter spacing ominaisuuden avulla. Ominaisuudelle annettava arvo lisätään kirjainten välin oletuspituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 135
16 5 CSS1-ominaisuudet Kirjainkoon muokkaus Ominaisuus: text-transform Arvo: capitalize uppercase lowercase none h1 {text-transform: uppercase;} Teksti voidaan määritellä kirjoitettavaksi kokonaan isoilla ( uppercase ) tai kokonaan pienillä ( lowercase ) kirjaimilla. Arvo capitalize muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi. Vanhemmilta peritty arvo voidaan poistaa käytöstä arvolla none, jos kirjainkoko halutaan säilyttää. Rivin korkeus Ominaisuus: line-height Arvo: normal <number> <length> <percentage> blockquote {line-height: 120%;} blockquote {text-indent: 1.2;} blockquote {text-indent: 1.2em;} Rivin korkeus voidaan määritellä kolmella tavalla: numeroarvona, pituusarvona tai prosenttiarvona. Numeroarvona esitetty rivinkorkeus lasketaan kertomalla kirjasimen koko annetulla numerolla. Prosenttiarvo lasketaan myös elementin kirjasimen koon perusteella. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 136
17 5 CSS1-ominaisuudet Suorakaideominaisuudet Marginaali Ominaisuus: margin-top margin-right margin-bottom margin-left margin Arvo: <length> <percentage> auto h1 {margin-top: 2em; margin-bottom: 1em;} Elementin marginaali yläpuolella ('margin-top'), alapuolella ('margin-bottom'), vasemmalla puolella ('margin-left') ja oikealla puolella ('margin-right'). Marginaali voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'margin' avulla. blockquote {margin: 10%;} Marginaalin prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 137
18 5 CSS1-ominaisuudet Sisällön etäisyys reunasta Ominaisuus: padding-top padding-right padding-bottom padding-left padding Arvo: <length> <percentage> div.paivitystiedot {padding-top: 0.1em; padding-bottom: 0.1em;} Elementin sisällön etäisyys reunasta yläpuolella ('padding-top'), alapuolella ('paddingbottom'), vasemmalla puolella ('padding-left') ja oikealla puolella ('padding-top'). Sisällön etäisyys reunasta voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'padding' avulla. div.paivitystiedot {padding: 5%;} Etäisyyden prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 138
19 5 CSS1-ominaisuudet Reunaviiva Ominaisuus: border-top border-right border-bottom border-left border Arvo: <border-width> <border-style> <color> h1 {border-bottom: 3px solid black;} Elementin reunaviiva yläpuolella ('border-top'), alapuolella ('border-bottom'), vasemmalla puolella ('border-left') ja oikealla puolella ('border-right'). Reunaviivalle voidaan määritellä leveys (<border-width>), tyyli (<border-style>) ja väri (<color>). Reunaviiva voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'border' avulla. Reunaviivan leveys: thin medium thick <length> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 139
20 Reunaviivan tyyli: none dotted dashed solid double groove ridge inset outset Reunaviivan väri: Ks. väriarvot. Elementin leveys ja korkeus Ominaisuus: width height Arvo: <length> <percentage> auto textarea {width: 15em; height: 10em;} Elementille voidaan määritellä leveys ('width') ja korkeus ('height'). 5 CSS1-ominaisuudet MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 140
21 5 CSS1-ominaisuudet Kellutus Ominaisuus: float Arvo: left right none img {float: left;} Elementille voidaan asettaa kellumaan ominaisuuden 'float' avulla. Ominaisuuden avulla voidaan esimerkiksi asettaa kuva kellumaan sivun vasempaan reunaan siten, että teksti rivitetään kuvan oikealle puolelle. Kellutusta on keskeinen keino dokumentin taiton toteutuksessa. Kellutus elementin vierellä Ominaisuus: clear Arvo: none left right both h1 {float: left;} Ominaisuuden 'clear' avulla lementille voidaan määritellä ne sivut, joilla sallitaan elementtien kellutus. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 141
22 5 CSS1-ominaisuudet Luokkaominaisuudet Listan tyyli Ominaisuus: list-style Arvo: <list-type> <list-image> <list-position> ul {list-style: upper-roman;} ul {list-style: url(bullet.gif);} ol {list-style: upper-roman outside;} Ominaisuuden 'list-style' avulla muokataan listan tyyppiä (<list-type>), lista-alkion edessä olevaa kuvaa (<list-image>) ja lista-alkion edessä olevan symbolin sijaintia (<listposition>). Listan tyyppi: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Lista-alkion kuva: <url> none Lista-alkion symbolin asemointi: inside outside MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 142
23 5 CSS1-ominaisuudet Elementin esitystapa Ominaisuus: display Arvo: block inline list-item none input {display: block;} Esitystapa vaikuttaa elementin esittämiseen näytöllä: lohkotyylinen ('block') elementti aiheuttaa rivinvaihdon elementin alkuun ja loppuun, tekstityylinen ('inline') elementti rivittyy selaimen leveyden mukaan. Listatyylinen elementti ('list-item') on lohkotyylisen elementin erikoistapaus. Elementti piilotetaan 'display'-ominaisuuden arvolla 'none'. Tyhjämerkkien tulkinta Ominaisuus: white-space Arvo: normal pre nowrap pre {white-space: pre;} Elementin sisällä olevilla tyhjämerkeillä (välilyönnit, rivinvaihdot, tabulaattorit) voidaan joko sieventää yhdeksi välilyönniksi ('normal') tai näyttää ruudulla ('pre'). Arvo 'nowrap' määrittelee, että rivi katkaistaan ainoastaan br-elementin kohdalta. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 143
24 5 CSS1-ominaisuudet Lopuksi CSS-tyylien ensimmäisen version tarjoamat vaihtoehdot HTML-dokumentin ulkoasun muokkaamiseen ovat monipuoliset. Mahdollisuuksia kannattaa kuitenkin hyödyntää maltillisesti: - absoluuttisesti määritelty kirjasimen koko saattaa estää kirjasimen suurentamisen: vaikeuksia heikkonäköisille - tekstin ja taustavärin kontrastin on oltava riittävä, muuten lukeminen on hankalaa - myös taustakuvien kanssa on oltava tarkkana: liian voimakas taustakuva hankaloittaa lukemista - kursivoitu teksti on vaikeaa lukea näytöltä, toiset kirjasimet sopivat paremmin näytöltä luettavaksi kuin toiset,... CSS2-tyylien mediavalitsimet mahdollistavat erilaisten tyylitiedostojen toteuttamisen eri päätelaittelle. Tämä mahdollistaa periaatteessa sivuston päätelaitekohtaisen räätälöinnin. Käytännössä paras vaihtoehto on kuitenkin eri versioiden toteuttaminen joko mekaanisesti (käsin) tai esimerkiksi dynaamisesti ohjelmointikielen X tai vaikkapa XSL-muunnosten ja XML:n avulla. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 144
25 6 Hypertekstin rakenne ja navigointi 6 Hypertekstin rakenne ja navigointi Laajennetaan näkökulmaa WWW:stä yleisen hypertekstin suuntaan. Hypermediasta ja hypertekstistä puhuttaessa on hyvä huomata, että samoja termejä käytetään eritasoisista asioista puhuttaessa - teksti, hyperteksti, hypermedia, hypermediaohjelma, hypermediasovellus, Hypertekstin ja -median perusidea on verkkomuotoisen tiedon esittäminen tietokoneella - perusrakenne: solmut ja linkit (pisteet ja viivat [nuolet]) - huomaa, että linkit voivat olla aidosti yhden-, kahden- tai monensuuntaisia! - lukutapa: navigointi (linkin seuraaminen ja peruuttaminen) Yksinkertaisen hypertekstin linkit ovat assosiatiivisia, ts. yhdistelevät asioita (kirjoittajan) mielleyhtymien kautta - hyvä (monimutkainen) hyperteksti jäsennetään käytännössä kuitenkin aina tätä monipuolisempien solmujen ja linkkien luokittelun avulla Käsitteellisesti hypertekstin vastaa itse asiassa suunnattua verkkoa MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 145
26 6 Hypertekstin rakenne ja navigointi Hypertekstin perusrakenne on verkko eli graafi Graafi on pisteiden ja niitä yhdistävien viivojen muodostama kokonaisuus Graafin piirtäminen, Suunnattu graafi eli digraafi (viivoille määritellään suunta nuolet), Graafin peruskäsitteet, Graafin merkitseminen & tiedon mallintaminen, Graafit & semanttiset verkot Graafia voidaan pitää kartan abstraktiona: jos pisteet ja viivat tulkitaan kaupunkien ja teiden abstraktioiksi, digraafi kertoo mistä kaupungista pääsee mihinkin ottamatta kantaa kaupunkien maantieteellisiin sijainteihin yms. ominaisuuksiin Hypertekstin ja verkkoteorian välillä on selvä yhteys; käytännössä painopiste on yleensä kuitenkin vain termien, käsitteistön (kielenkäyttö) ja perustulosten käytöllä eikä abstraktin graafiteorian kehittämisellä Merkattujen graafien keskeiset sovellukset: 1) hypertekstin suunnittelu käsitekarttojen avulla & 2) suurten hyperdokumenttien analysointi (tehdään poikkeuksetta abstrahoimalla hyperteksti graafiksi) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 146
27 6 Hypertekstin rakenne ja navigointi Graafien peruskäsitteitä Graafi G = (V,E), V={a,b,c,d,e} pisteiden tai solmujen joukko, E = { (a,b), (b,a), (c,d), (c,e) } viivojen tai kaarien multijoukko, esim. epäyhtenäinen graafi G: G: d a b c e G 1 G 2 G:n aligraafeja ovat sen (pisteiden) osajoukkojen muodostamat graafit (kaikilla E:n viivoilla) G:llä kaksi komponenttia: G 1 ja G 2 Kulku on jokin pisteiden ja viivojen jono pisteestä toiseen Polku on jokin pisteiden ja viivojen jono pisteestä toiseen (pisteet eivät toistu, paitsi päätepisteet piirissä) Suunnattu graafi (digraafi) D=(V,E), V={a,b,c,d,e} pisteiden joukko, E = { (a,b), (b,a), (c,d), (c,e) } suunnattujen viivojen tai nuolien multijoukko, esim. D: a b c d e MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 147
28 6 Hypertekstin rakenne ja navigointi Tärkeä graafin erikoistapaus: juurellinen puu Puu on piiritön graafi. Juurellisessa puussa jokin piste on valittu juuripisteeksi (tai juurisolmuksi) (joskus juurelliset puut esitetään suunnattuina). Esim. d b e a c f g h i j a on T:n juuri. T:n lehdet ovat d, e, i, j, h T.n sisäpisteet ovat b,c,f,g f,g,h ovat c:n lapsia, c on näiden vanhempi f,g,h,i,j ovat c:n jälkeläisiä, j:n edeltäjiä ovat g,c,a f, g, h ovat sisaruksia, f on g:n edeltävä sisar ja h on g:n seuraava sisar T:llä on viisi haaraa, polut a-d, a-e, a-i, a-j ja a-h T:n syvyys on 4 ja sen leveys on 5 Puun rivimuotoinen esitystapa on erityisen kätevä tietokoneiden yhteydessä (luetaan ylhäältä alas ja vasemmalta oikealle): a b c d e f MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 148
29 6 Hypertekstin rakenne ja navigointi Semanttiset verkot ja käsitekartat Merkittyjen graafien keskeinen sovellus hypermediassa (suunnittelu) ovat erilaiset käsitekartat Käsitekartalla tarkoitetaan graafista tiedon esittämisen tekniikkaa, jonka avulla objektista, ilmiöstä tai prosessista poimitaan tarkasteltavaksi osia ja suhteita Muita vastaavantyyppisiä termejä: mindmap, mielle(yhtymä)kartta, Käsitekarttojen piirtämistapoja on lukuisia erilaisia. Tyypillisiä piirteitä: - pisteet kuvaavat objekteja tai ominaisuuksia, viivat näiden välisiä suhteita - pyrkimyksenä on täsmällisyyden sijaan esityksen havainnollisuus - kartta on aina vain eräs tiedon jäsennys (voidaan tehdä perustellusti eri tavalla useista lähtökohdista käsin) Erilaisia käsitekarttoja käytetään muistin ja oppimisen tukena, suunnittelu- ja ideointimenetelmänä, päätöksenteon tukena ja identifioinnissa Semanttisen verkon tai käsitekartan idea voidaan systematisoida osaksi kokonaista suunnittelumenetelmää (esim. OMT, UML) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 149
30 6 Hypertekstin rakenne ja navigointi Tyypillisiä käsitekarttoja ERIKOISKARTAT: tarkkaan sovitun notaation käyttö erikoissovelluksessa, esim. ERdiagrammit (relaatiotietokant. suunn.) nimi näyttelijät nimi studiot osoite osoite tähtenä omistaa elokuvat YLEISKARTAT: käsikartan käyttö esim. tietämyksen havainnollistamisessa nimi tyyppi ominaisuus tuoksu ohjaaja vuosi päällä kukka maljakko pöytä sisällä päällä matto lattia osa päällä jalka tuoli päällä selkänoja osa MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 150
31 6 Hypertekstin rakenne ja navigointi Graafit & hyperteksti Hypertekstiin liittyy oletuksena kartta- tai paikkametafora; lukijan voidaan ajatella sijaitsevan lukemassaan solmussa; navigoinnissa käyttäjä siirtyy solmusta toiseen linkkejä seuraamalla Hypertekstin perusominaisuuksia: - yksinkertainen assosiatiivinen rakenne voidaan suoraan samaistaa suunnatun verkon kanssa - hypertekstin solmujen lukujärjestys ei (kenties alkusolmua lukuun ottamatta) ole ennalta määrätty (jos vastaava verkko ei ole lineaarinen) - hypertekstiä luetaan erilaisella tekniikalla kuin esim. kirjaa (lukutapaa voisi kärjistetysti verrata esim. ensyklopedian, käsikirjan yms. hakuteoksen lukemiseen) - lukemisen sopivan loppukohdan löytäminen saattaa olla hankalaa - lukeminen vaatii suurempaa keskittymistä kuin perinteisen tekstin - dokumenttien rajat saattavat olla epämääräisiä (erityisesti tietoverkoissa) - lukijalla olemassa selkeä eksymisen mahdollisuus MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 151
32 6 Hypertekstin rakenne ja navigointi - navigoinnin tueksi tarvitaan apuvälineitä (esim. karttoja ja kirjanmerkkejä) - hypermediaan on liitetty perinteisesti myös vahva toisten käyttäjien rooli, ts. myös toiset lukevat hyperdokumenttia - ja saattavat tehdä siihen omia (julkisia) merkintöjään Modernin hypertekstin tyypillinen lukustrategia on yleensä yhdistelmä (tietokantatyyppisiä asiasana)hakuja ja navigointia: - 1) navigoinnin alkukohdan etsiminen hakukoneen avulla (esim. Google) 2) navigointi linkkejä seuraamalla ("mitäköhän tuolta löytyy") ja 3) paluu kirjanmerkin avulla takaisin hakukoneeseen ("uusi yritys")? "net - www" hakukone haun tulos uuden navigoinnin alkuna MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 152
33 6 Hypertekstin rakenne ja navigointi Hyperlinkkien tyypit Hyperlinkit voidaan jakaa niiden tyypin perusteella rakenteellisiin, assosiatiivisiin ja viittaaviin linkkeihin Sovelluksen rakenne suunnitellaan käyttäjälle sopivaksi ja esitetään rakenteellisina linkkeinä: - navigointi tapahtuu pääasiassa rakenteellisten linkkien avulla - käyttäjä voi rakenteellisten linkkien avulla arvioida sovelluksen laajuutta ja omaa sijaintiaan sovelluksessa Assosiatiiviset linkit muodostavat merkitykseen perustuvia yhteyksiä hypertekstin solmujen välille: - tarjoavat käyttäjälle vaihtoehtoisen navigointitavan - assosiatiiviset linkit vastaavat ihmisen tapaa jäsentää asioita (Vannevar Bush) Viittaavat linkit ovat assosiatiivisten linkkien erikoistapauksia - viittaavat esimerkiksi lisätietoon tai tarkempaan kuvaukseen MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 153
34 6 Hypertekstin rakenne ja navigointi Esimerkki erityyppisistä linkeistä: rakenteelliset (Next- ja Prev, murupolku), assosiatiiviset ( Muita etsivä- ja poliisisarjoja ) ja viittaavat (Matsin ja Rauskin roolikuvaukset) linkit: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html><head> <title>z-salamapartio</title> <link rel="index" href="sarjat.html"> <link rel="next" href="muksuluuri.html"> <link rel="prev" href="pimeyden-tyyny.html"> </head> <body> <div class="navi"> <a href="sarjat.html">sarjat</a>: Z-Salamapartio</div> <h1>z-salamapartio</h1> <p>etsivät <a href="roolikuvaus-mats.html">mats</a> ja <a href="roolikuvaus-rauski.html">rauski</a> seikkailevan 70-luvun Helsingissä.</p> <div class="katsomyos">muita etsivä- ja poliisisarjoja: <a href="ratkaisijat.html">die Kühe - Ratkaisijat</a> ja <a href="pimeyden-tyyny.html">pimeyden tyyny</a> </div> </body> </html> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 154
35 6 Hypertekstin rakenne ja navigointi Hypertekstin rakenteesta Yksinkertaisimmassa muodossaan hyperteksti on siis assosiatiivinen verkko, jossa linkit yhdistävät verkon solmut toisiinsa (huomaa, että linkkien suunnat ovat merkitseviä) Hypertekstirakenteita voidaan kuitenkin luokitella, esim. seuraavien ääripäiden avulla: - puurakenne - peräkkäisrakenne (lineaarinen rakenne) - peräkkäisrakenne vaihtoehdoilla - peräkkäisrakenne sivupoluilla - hila - yhdistetty rakenne - verkko (kaikki edelliset ovat siis tämän erikoistapauksia) Ilmeisestikin sama sisältö voidaan jäsentää eri tavoin, näkökulmasta riippuen MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 155
36 6 Hypertekstin rakenne ja navigointi Perusrakenteet puurakenne peräkkäisrakenne peräkkäisrakenne vaihtoehdoilla (eräs rakenne) hila yhdistetty rakenne (esim. puu vaihtoehdolla) peräkkäisrakenne sivupoluilla verkko ("yleinen rakenne") MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 156
37 6 Hypertekstin rakenne ja navigointi Huomautuksia On syytä huomata, että käytännössä hyperteksti muodostaa em. ääripäitä huomattavasti monimutkaisemman rakenteen Monimutkainen linkitys johtaa helposti varsin sotkuisen näköiseen graafiin Hypertekstin rakennetta suunniteltaessa (ja esitettäessä) on kuitenkin hyvä pyrkiä esityksen havainnollisuuteen Havainnollisen esityksen perusidea on sieventää käytettyjä merkintöjä esityksen asiasisällön pysyessä samana Kaksi suoraviivaista lähestymistapaa joilla esitykseen piirrettävien linkkien määrää voidaan supistaa ovat - linkin perintä ja - linkkien yhdistäminen MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 157
38 Tällöin hypertekstin tiivistetty esitystapa on seuraava: 6 Hypertekstin rakenne ja navigointi - linkin perinnässä ne solmut {A 1,A 2,,A N }, joista pääsee (mahd. muiden solmujen kautta) linkkejä seuraamalla tiettyyn solmuun B, ympäröidään suorakaiteella (solmuryhmä), eikä linkkejä (A k,b), k=1,..,n merkitä kuvioon näkyviin. Sen sijaan ko. suorakaide yhdistetään nuolella solmuun B - linkkien yhdistämisessä ne solmut {A 1,A 2,,A N }, joista suoraan johtaa linkki tiettyyn solmuun B, ympäröidään ovaalilla (solmuryhmä), eikä linkkejä (A k,b), k=1,..,n merkitä kuvioon näkyviin. Sen sijaan ko. ovaali yhdistetään nuolella solmuun B ~ Edellä viittaus voidaan siis yksittäisen solmun B sijasta tehdä myös toiseen solmuryhmään ja päinvastoin Sekä linkin perinnässä että ylitilojen merkitsemisessä hypertekstirakenteen esityksen luettavuus paranee kun solmuja ryhmitellään ja tarpeettomat nuolet jätetään piirtämättä ~ MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 158
39 6 Hypertekstin rakenne ja navigointi On tietenkin myös mahdollista, että hypertekstin rakenteen tiedetään noudattavan jotain yleisiä sääntöjä, mikä tarjoaa mahdollisuuden tapauskohtaisten sievennystapojen käyttöön Jos linkkien tiedetään esim. noudattavan järjestysrelaatiota, voidaan hyperteksti esittää kompaktissa muodossa ns. viivadiagrammin avulla (Hasse-diagrammi) Tyypillisessä hypertekstissä erilaiset hypertekstirakenteet esiintyvät päällekkäin, esim. - määritelmien assosiatiivinen verkko - johdanto-osan selkeä peräkkäisrakenne - yksityiskohtien ja huomautusten lineaariset sivupolut - jne. Näiden erityyppisten rakenteiden erottaminen toisistaan helpottaa lukijan työtä suuresti Suoraviivaisin apu lukijalle on erityyppisten solmujen ja linkkien (kuvallinen) koodaus joka hyödyntää jotain helposti hahmotettavaa perusrakennetta MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 159
40 6 Hypertekstin rakenne ja navigointi WWW-hyperteksti Perusrakenne on dokumentti- ja elementtirakenteiden varaan rakentuva (esim. assosiatiivinen) linkitysrakenne jonka ytimenä ovat WWW-resurssit Linkkien kohteina ovat WWW-resurssit (dokumentit tai dokumenttien osat) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 160
41 6 Hypertekstin rakenne ja navigointi Seuraavassa hypertekstin perusominaisuuksia peilataan seuraavassa kolmen erilaisen hypertekstijärjestelmän näkökulmasta: HTML:n, Dexterin ja XLinkin. Vain HTML-linkitys käsitellään kurssilla täsmällisesti - on kuitenkin hyvä tietää muustakin. Kiinnostuneille löytyy verkosta lisätietoa, ks. - HTML (ks. ) - Dexter Hypertext Reference Model (ks. ) - XLink (ks. ) Hypertekstin verkkomainen rakenne toteutetaan hyperlinkkien avulla - yksisuuntaiset linkit (esim. HTML a-elementti) - kaksisuuntaiset linkit (Dexter & XLink) - monensuuntaiset linkit (Dexter & XLink) Linkin alkupistettä kutsutaan linkin lähdeankkuriksi ja loppupistettä linkin kohdeankkuriksi (joskus molempia kutsutaan lyhyesti vain ankkureiksi tai lähteiksi ja kohteiksi, vastaavasti) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 161
42 6 Hypertekstin rakenne ja navigointi Hyperlinkkien mekanismeista Toteutuksesta riippuen hypertekstin linkit esitetään eri tavoin - Dexter mallintaa linkit omina komponentteinaan, joihin viittaukset koodataan lähdeja kohdedokumentteihin (monensuuntaisia linkkejä) - HTML-koodaa linkit kiinteästi lähdedokumenttiin (vain yhdensuuntaisia linkkejä) - XML-standardiperheen linkitys tarjoaa em. mahdollisuudet, sekä lisäksi mahdollisuuden assosioida dokumenttiin linkkejä (sekä lähde- että kohdeankkureita) ilman että linkit näkyvät ko. dokumenttien koodauksessa millään tavalla (!) Hyperlinkin avulla voidaan (rakenteisessa dokumentissa) periaatteessa viitata - dokumenttiin kokonaisuudessaan, - dokumentissa löytyvään elementtiin - dokumentista löytyvään pistemäiseen tunnisteeseen (esim. nimettyyn ankkuriin tai tekstisolmuun) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 162
43 6 Hypertekstin rakenne ja navigointi Viittaaminen elementtiin voidaan suorittaa - elementin nimen perusteella - elementin sijainnin perusteella (asema dokumentin jäsennyspuussa) - elementin attribuuttien perusteella - elementin sisältämän merkkidatan (tekstin) perusteella - elementin muun sisällön perusteella (esim. lapsielementtien) Hyperlinkkiviittausten keskeisiä ongelmia ovat: - resurssien löytyminen ja saatavuus (miten kohdesolmut nimetään & miten saadaan tieto näiden olemassaolosta) - viittaamiskäytännön raskaus (esim. viittaukset tekstisisällön perusteella saattavat olla laskennallisesti raskaita) - linkkien ylläpito (rikkoutuvatko linkit jos resursseja liikutellaan tai uudelleenjärjestellään?) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 163
44 6 Hypertekstin rakenne ja navigointi Linkkien saatavuuteen liittyvien pulmien ratkaisumenetelmä vaihtelee vastaavasti: - HTML- ja XML-linkkien kohdeankkurit pitää jostain vain tietää (esim. arvata & kokeilla) - Dexter-sovelluksen kaikki mahdolliset linkit voidaan täsmällisesti etsiä & luetteloida universaalin hakufunktion avulla (koska linkit ovat komponentteja) Linkkiviittausten raskauteen liittyviä ratkaisuja: - HTML-linkit eivät sisällä hakumahdollisuutta, joten HTML-linkit ovat teknisesti kevyt toteuttaa (hakujen teknisiä toteutusmahdollisuuksia käsitellään tuonnempana formaalien kielten esittelyn yhteydessä) - Dexter-linkit voivat sisältää koko hyperavaruuden kaikkien komponenttien sisäisiä hakuja, mikä saattaa tarkoittaa erittäin raskasta prosessointia linkin kohteen selvittämiseksi - XML-linkit sisältävät hakumahdollisuuden, mutta vain yhden (XML-) resurssin sisällä; linkin kohteen selvittämisen raskaus riippuu dokumenttien koosta MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 164
45 6 Hypertekstin rakenne ja navigointi Linkkien eheyteen liittyviin ongelmiin eri järjestelmät ottavat kantaa eri tavoin: - HTML-linkit voivat mennä reilusti rikki, kun taas Dexter-linkit ovat aina ehjiä - XML-linkit voivat mennä rikki (samaan tapaan kuin HTML-linkitkin), mutta linkkien eheyden ylläpitoa voidaan helpottaa ns. ulkoisten linkkien ylläpidon suunnittelulla (näin toimivat erityisesti ns. linkkikannat ([linkbase])) - WWW:hen tosin puuhataan mekanismia, joka nimeäisi linkkejä (vähän Dexterin tapaan, ks. URN / WWW-hypertekstissä on hyvä huomata esim. linkkien eheyteen liittyvä suhteellisuus WWW:n mekanismien ja yksittäisten selainohjelmien toiminnan välillä; voitaisiinhan hyvin esim. määritellä (!), että kaikki A-elementillä merkatut WWW-linkit ovat aina ehjiä ja että selainten toimintaan kuulu olla näyttämättä rikkoutuneita linkkejä (tällöin selaimen esim. validoisi kaikki dokumentin linkit juuri ennen niiden näyttämistä - tavallaan kuvat käsitellään juuri näin!) Oletuksen mukaisesti hypertekstin linkit ovat assosiatiivisia. Linkkejä voidaan kuitenkin tarkastella yleisinä (muinakin kuin binäärisinä) relaatioina ja tarkastella sen mukaisesti (tällöin ongelman saattaa muodostaa sopivan käyttöliittymämetaforan suunnittelu & toteuttaminen) - esitieto, osa-, ryhmä-, jne. relaatiot MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 165
46 6 Hypertekstin rakenne ja navigointi Hyperlinkkien toiminnallisuus On syytä huomata, että hyperlinkeille voidaan periaatteessa asettaa myös toiminnalliseen semantiikkaan liittyviä epästandardeja määrityksiä Esimerkki: XLink-spesifikaation hyperlinkeiltä löytyy attribuutti actuate, arvot: - onload (linkki ladataan välittömästi - toiminnan järkevyys selviää kohta) - onrequest (perinteinen odotetaan kunnes käyttäjä klikkaa, tms.) - other (selain päättää käyttäytymisen) Linkin seuraamistapahtuma voidaan periaatteessa valita mielivaltaisesti Esimerkki: XLink-spesifikaation määrittelemillä hyperlinkeillä voi olla attribuutti show, joka voi saada arvot - new (linkin kohde-elementti(!) avataan uudessa käyttöliittymätason ikkunassa) - replace (selain korvaa koko nykyisen dokumentin linkin osoittamalla kohdeelementillä) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 166
47 6 Hypertekstin rakenne ja navigointi - embed (se elementti, johon linkki viittaa, upotetaan linkkiviittauksen kohtaan siten, että se elementti, joka toimii linkkinä(!), korvataan linkin kohde-elementillä) - other (selain päättää käyttäytymisen) Huomaa, että osa edellisistä voidaan osin toteuttaa HTML-linkkien avulla (ainakin skriptikielellä terästettynä). Edelleen on syytä huomata, että selain voisi periaatteessa tehdä mitä tahansa muutakin (tosin mikä tahansa ei käyttäjän odotuksien näkökulmasta ole sovelluksissa järkevää) Vastaavasti voidaan luokitella myös solmuja (luokittelusta voi edelleen seurata esim. perittävyyteen liittyviä piirteitä hypertekstin tulkintaan, vrt. hypertekstin visualisointia käsittelevä prujun osa) Rakenteisiin dokumentteihin liittyvälle (modernille) hypertekstille voidaan siis esittää (jo edellä esitelty) luonnehdinta - rakenteisen hypermedian perustan muodostaa nimetyistä dokumenteista koostuva hyperavaruus; jokaisen hyperavaruuden dokumentin sisäinen rakenne on hierarkkinen, mikä tarjoaa perustan elementteihin viittaamiseen - hyperlinkit ovat tämän dokumenttiperheen ja dokumenttien elementtienvälisiä relaatioita (teknisesti itsekin dokumentteja tai näiden elementtejä) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 167
48 6 Hypertekstin rakenne ja navigointi Navigoinnin apuvälineitä Kun hypermedian lukemisen pulmat tiedostetaan, löydetään joihinkin niistä lääkkeitä, paitsi hyvän suunnittelun, myös erilaisten navigoinnin apuvälineiden avulla Tyypillisten navigoinnin apuvälineiden perusperiaate on vähentää muistin kuormitusta (vrt. HCI: recall recognition) Kartta Historialista, kirjanmerkki ja jälki Maamerkki Visuaalinen polku Kalansilmänäyttö Hämähäkki Menetelmien yhteiskäyttö on usein toimivin ratkaisu (vrt. WWW-selaimet) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 168
49 6 Hypertekstin rakenne ja navigointi Kartta (map, overview diagram) Kuten termi navigointi jo itsessään vihjaa, navigointia helpottaa kartta Piirteitä (abstrakteja tai konkreettisia, tapauksesta riippuen) - kartta on todellisuuden pelkistetty (ja supistettu!) esitystapa - yleiskartta auttaa hahmottamaan kokonaisuuksia ja luo mielikuvan siitä kuinka laaja hyperteksti kokonaisuudessaan on - (lähi)aluekartta kertoo kontekstin ja esittää mitä mielenkiintoista lähiympäristöstä löytyy Tyypillinen käyttötapa: roam & zoom (yleiskartassa etsitään mistä karkeasti ottaen ollaan kiinnostuneita ja sitten zoomataan tästä lähialuekarttaan, sitten takaisin ylätasolle jne.) Kartta on yleiskäsite; dynaaminen kartan voi käytännössä toimia esim. kalansilmänäytön tekniikalla Selkeästi jäsennetty hypertekstin pääkohdat esittävä linkkisivu (teknisesti pelkkää tekstiä) voi hyvin toimia myös karttana MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 169
50 6 Hypertekstin rakenne ja navigointi Kartan termeistä Maamerkki on navigoinnin osa (esim. linkki) joka auttaa jäsentämään missä hypertekstissä ollaan. Maamerkki voi esim. tarjota oikopolun tutulle pääsivulle, josta käsin tutkimusmatkailu voidaan taas aloittaa Etusivu, jonne pääsee kaikilta muilta sivuilta (maamerkki) Muistiinpano Tässä kohtaa on virhe! Navigointihistorian jälki (henkilökohtainen) Historialista kertoo missä kaikkialla hypertekstissä on vierailtu, jälki on historialistan erikoistapaus joka kertoo mitä viime aikoina on tehty. Eräs tapa jälkien jättämiseen ovat muistiinpanojen tekeminen ja mielenkiintoisten solmujen myöhempää lukemista varten merkkaaminen kirjanmerkeillä MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 170
51 6 Hypertekstin rakenne ja navigointi Kalansilmä ja hämähäkki Kalansilmänäyttö on (dynaaminen) karttanäkymä joka korostaa kartan lähialueita esim. kertomalla näistä enemmän; vrt. kalansilmälinssi valokuvaamisessa (myös kalansilmänäyttö voi olla täysin tekstipohjainen) Hämähäkiksi kutsutaan näyttöä joka esittää valitun hypertekstisolmun linkitysrakennetta suhteessa lähialueen muihin solmuihin Esipuhe Johdanto Hyperteksti peruskäsitteet navigointi linkin seuraaminen peruuttaminen navigoinnin apuvälineet dynaaminen kontrolli ylikuormitus sovelluksia Multimedia Viittaukset Valitusta lähialueesta "enemmän" kertova kalansilmänäyttö Lähialueen linkeistä kertova hämähäkki MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 171
52 6 Hypertekstin rakenne ja navigointi Tekstisisällön osana kalansilmänäyttöä kutsutaan toisinaan nimellä stretch-text Navigoinnin apuvälineiden luokittelukriteerejä: - linkin valitsemista helpottavat toiminnot - rakenteiden hahmottamista helpottavat toiminnot - työhistorian tai dokumentin sisällön hahmottamista helpottavat toiminnot Lisää menetelmien luokitteluperusteita: - teksti- tai grafiikkapohjaiset menetelmät - dynaamiset tai staattiset menetelmiin - käsiteavaruuden rakennetta vääristävät tai sen säilyttävät menetelmät Navigoinnin apuvälineet perustuvat esitettävän informaation tarkoituksenmukaiseen vähentämiseen tai pelkistämiseen Vaikka teknisesti ei välttämättä olisikaan vaikeaa esittää koko hyperavaruuden rakennetta pikkuruisen kartan avulla, ei tästä välttämättä ole sisällöllisesti mitään hyötyä! Perusidea on auttaa käyttäjää esittämällä suuresta tietomäärästä juuri se olennainen MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 172
5 Hypertekstin rakenne ja navigointi
5 Hypertekstin rakenne ja navigointi Laajennetaan näkökulmaa WWW:stä yleisen hypertekstin suuntaan. Hypermediasta ja hypertekstistä puhuttaessa on hyvä huomata, että samoja termejä käytetään eritasoisista
Lisätiedot6 Hypertekstin rakenne ja navigointi
6 Hypertekstin rakenne ja navigointi 6 Hypertekstin rakenne ja navigointi Laajennetaan näkökulmaa WWW:stä yleisen hypertekstin suuntaan. Hypermediasta ja hypertekstistä puhuttaessa on hyvä huomata, että
Lisätiedot5 CSS1-ominaisuudet. Arvot
5 CSS1-ominaisuudet Arvot CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties)
Lisätiedot5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet
5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background
Lisätiedot3 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ätiedotCSS-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ätiedot4 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ätiedot4 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ätiedotHTML-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ätiedotKuva 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ätiedotCSS 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ätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotCSS. 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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedot5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet
5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background
LisätiedotUlkopuolisen 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ätiedotWWW-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ätiedot2 Hypertekstin perusteet
2 Hypertekstin perusteet Lähdetään liikkeelle asian asteittaisen tarkentamisen kautta: esitetään aluksi perusperiaatteet ja pohditaan näitä sitten tarkemmin kun yleiskuva on selvillä Hypermediasta ja hypertekstistä
Lisätiedotvalitsin 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ätiedotCSS 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ätiedotWritten 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ätiedotKotisivut 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ätiedotCSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
LisätiedotH 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ätiedotselector { 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ätiedotTaulukot. 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ätiedotDigitaalisen 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ätiedotCSS - 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ätiedotH 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ätiedotWWW-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ätiedotUlkoasun 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ätiedotAulikki 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ätiedotkäyttäjän tai tietoa käsittelevät ohjelmiston näkökulmasta Jokaiseen dokumenttiin liittyy
7LHGRVWRWGRNXPHQWLWWLHWR KPHGLD Tietokoneet käsittelevät tietoa WLHGRVWRMHQmuodossa Tietokoneiden yhteydessä GRNXPHQWLOODWDUNRLWHWDDQWLHGRVWRMHQDYXOOD HVLWHWWlYllDVLDNRNRQDLVXXWWD, joka jäsennetään kokonaisuudeksi
LisätiedotTee 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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedot1 0/.-,+ 1 Johdanto Problem-solving Realization Conceptualisation Solution Problem Analysis Design Implement. Validation Deployment Req. Development C
& % $! ) ( % & % & & * 1 Johdanto $ ' Isojen sovellusten osalta poikkeuksetta ryhmätyötä, joka edellyttää ja ( # " " # ( " Koska hypermedian tekeminen vaatii usean erityyppisen asian osaamista, hypermediatiimissä
LisätiedotAjatus 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ätiedot6 Hypertekstin rakenne ja navigointi
6 Hyprtkstin raknn ja navigointi Hyprtkstin prusraknn on vrkko li graafi Laajnntaan näkökulmaa WWW:stä ylisn hyprtkstin suuntaan. Hyprmiasta ja hyprtkstistä puhuttassa on hyvä huomata, ttä samoja trmjä
LisätiedotTutkitaan 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ätiedotCode 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ätiedot1. 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ätiedotAulikki 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ätiedotUpdateIT 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ätiedotKotisivut 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ätiedotHTML ja tyylit. 4 HTML ja tyylit
HTML ja tyylit 4 HTML ja tyylit Yksi HTML:n perinteisistä ongelmista on ollut se, että kehittäjät haluavat itse määrittää sen miltä dokumenttien tulee näyttää, käytännössä tämä johtaa dokumenttien formatointiin
LisätiedotTAULUKOINTI. Word Taulukot
Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...
LisätiedotAsemointi. 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ätiedotHTML & 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ätiedotHTML 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ätiedotLisä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ätiedotCSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:
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
LisätiedotVerkkosivut 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ätiedotKuvat 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ätiedotEditorin 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ätiedotCascading 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ätiedotJohdatus rakenteisiin dokumentteihin
-RKGDWXVUDNHQWHLVLLQGRNXPHQWWHLKLQ 5DNHQWHLQHQGRNXPHQWWL= rakenteellinen dokumentti dokumentti, jossa erotetaan toisistaan dokumentin 1)VLVlOW, 2) UDNHQQHja 3) XONRDVX(tai esitystapa) jotakin systemaattista
LisätiedotAlgoritmit 1. Luento 7 Ti Timo Männikkö
Algoritmit 1 Luento 7 Ti 31.1.2017 Timo Männikkö Luento 7 Järjestetty binääripuu Binääripuiden termejä Binääripuiden operaatiot Solmun haku, lisäys, poisto Algoritmit 1 Kevät 2017 Luento 7 Ti 31.1.2017
LisätiedotOhjeita 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ätiedotDigitaalisen 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ätiedotLinkkitekstit. Kaikkein vanhin WWW-suunnitteluohje:
Linkit Linkit ovat hypertekstin tärkein osa. Niiden avulla sivut liitetään toisiinsa ja käyttäjille tarjoutuu mahdollisuus liikkua muille kiinnostaville sivuille. Linkit Linkkejä on kolmea eri tyyppiä:
LisätiedotKotisivujen 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ätiedotHTML ja tyylit. 5 HTML ja tyylit
HTML ja tyylit 5 HTML ja tyylit Yksi HTML:n perinteisistä ongelmista on ollut se, että kehittäjät haluavat itse määrittää sen miltä dokumenttien tulee näyttää, käytännössä tämä johtaa dokumenttien formatointiin
LisätiedotEntiteetit 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ätiedotAT4-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ätiedotTypografia 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ätiedot1 Dreamweaver MMX. 2 Tekstin muokkaus
1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta
LisätiedotNavigointi 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ätiedotQT 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ätiedotArtikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
LisätiedotLuento 12: XML ja metatieto
Luento 12: XML ja metatieto AS-0.110 XML-kuvauskielten perusteet Janne Kalliola XML ja metatieto Metatieto rakenne sanasto Resource Description Framework graafikuvaus XML Semanttinen Web agentit 2 1 Metatieto
LisätiedotXHTML - 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ätiedotKotisivuohjeet. 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ätiedotFonttimuotoilut. Fontin tyyppi ja fonttikoko
Fonttimuotoilut Kun haluat muotoilla jonkin sanan tai osan tekstistä, sinun pitää ensin "maalata" ko. alue. Maalaaminen tapahtuu vetämällä alueen yli hiiren ykköspainike alas painettuna. Maalattu alue
Lisätiedot9 Hypermediajärjestelmistä
9 Hypermediajärjestelmistä Lyhyt vilkaisu järjestelmätason hypermediaan. Hypermediasovellukseen liittyy aina kaksi näkökulmaa: lukijan ja laatijan näkökulma Hypertekstijärjestelmä (hypermediajärjestelmä)
LisätiedotKatsotaan 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ätiedotGoogle-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
LisätiedotNavigointi 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ätiedotXHTML 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ätiedotLuento 2: Tulostusprimitiivit
Tietokonegrafiikan perusteet T-111.4300 3 op Luento : Tulostusprimitiivit Lauri Savioja 11/06 D primitiivit / 1 Sisältö Mallintamisen alkeita Perusprimitiivit (GKS) attribuutteineen Näyttömuisti D primitiivit
LisätiedotTaulukkolaskennan perusteet Taulukkolaskentaohjelmat
Taulukkolaskennan perusteet Taulukkolaskentaohjelmat MS Excel ja LO Calc H6: Lomakkeen solujen visuaalisten ja sisältöominaisuuksien käsittely ja soluviittausten perusteet Taulukkolaskennan perusteita
LisätiedotTaulukkolaskennan perusteet Taulukkolaskentaohjelmat
Taulukkolaskennan perusteet Taulukkolaskentaohjelmat MS Excel ja LO Calc H6: Lomakkeen solujen visuaalisten ja sisältöominaisuuksien käsittely ja soluviittausten perusteet Taulukkolaskennan perusteita
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 1/8: Informaation esitystapa
Lisätiedot10 Tiedostot, dokumentit, tieto (&h-media)
10 Tiedostot, dokumentit, tieto (&h-media) Tietokoneet käsittelevät tietoa tiedostojen muodossa Tietokoneiden yhteydessä dokumentilla tarkoitetaan tiedosto(je)n avulla esitettävää asiakokonaisuutta, joka
LisätiedotPseudoelementit. P:first-line { font-style: italic } H1:first-letter { font-size: bigger }
Pseudoelementit CSS:n pseudoelementtien avulla on mahdollista systemaattisesti vaikuttaa (joidenkin) elementtien ulkoasuun ilman elementtien eksplisiittistä merkkausta Ideana on helpottaa ja vähentää esitettävien
LisätiedotTärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu...
Tärkeimmät toiminnot Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta Kun hiiren jättää kuvakkeen päälle vähäksi ajaksi Word selittää toiminnon Avaa tiedosto Tallenna Kumoa, nuolesta aiemmat
Lisätiedot9. Kappale -ryhmä - Kappalemuotoilut
9. Kappale -ryhmä - Kappalemuotoilut Aloitus -välilehdellä Kappale -ryhmästä löytyvät kaikki kappalemuotoilut. Huomaa, että kappalemuotoilut ovat aina voimassa seuraavaan kappalemerkkiin asti. Kappalemerkki
Lisätiedot1 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ätiedotJAVA-OHJELMOINTI 3 op A274615
JAVA-OHJELMOINTI 3 op A274615 Layoutit Teemu Saarelainen teemu.saarelainen@kyamk.fi Lähteet: http://java.sun.com/docs/books/tutorial/index.html Vesterholm, Kyppö: Java-ohjelmointi, Talentum 2004. Layout
Lisätiedot,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU
,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU Tässä pääsette tutustumaan Internet Explorerin (IE) käyttöön. Muitakin selainversioita löytyy, kuten esimerkiksi Netscape, Opera ja Mozilla. Näiden muiden selainten
LisätiedotProseduraalinen 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ätiedotWCAG 2.1 Uudet kriteerit
WCAG 2.1 Uudet kriteerit Web Content Accessibility Guidelines 2.1 Verkkosisällön uudet saavutettavuuskriteerit (WCAG 2.1) Kimmo Sääskilahti Tero Pesonen WCAG:n versiot 1.0 toukokuu 1999 2.0 joulukuu 2008
LisätiedotOpinnä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ätiedot1 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ätiedotTIEDEJUTTUKURSSI 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ätiedotKopseptisuunnittelu Verkkomultimedia ICT1tn004
Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat
LisätiedotVerkkojulkaiseminen 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ätiedotKOTISIVUKONE ULKOASUEDITORI
KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen
LisätiedotNavigointi 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