20.3.2014 Aulikki Hyrskykari Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o <head> osan sisältö o <body> osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön ryhmittely (listat) Tällä kertaa o sisällön ryhmittelystä jatkoa - tekstitason semanttinen merkkaus o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla - kuvaformaateista - kuvankäsittelyohjelmista - kuvien koosta - kuvakartoista o video ja äänitiedostot verkkosivulla o CSS taustaa
<span> <em> <strong> <a> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> Ennen oli mahdollista määrittää muotoilukomentoja oesimerkiksi lihavoida <b> elementtiä käyttäen HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä otekstinosia, sanaryhmiä, sanoja tai jopa yksittäisiä merkkejä voi edelleenkin merkata omerkkaus on kuitenkin aina semanttinen omerkattavaan tekstinosaan siis liittyy aina jokin semanttinen arvo, ts. jokin merkitys <span> on poikkeus Geneerinen phrasing elementti, joka kapseloi tekstiä jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään tekstinosa, johon halutaan vaikuttaa CSSsäännöillä (vastaava elementti lohkotasolla on <div>). Sallittu sisältö: phrasing sisältö Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <p> dropzone="<span class="default">copy</span>" "move" "link </p> [W3C] [W3C non normative] [MDN] [W3School]
Molemmat tarkoittavat jonkinlaista tekstinosan korostusta o saavat aikaan (useimmissa selaimissa) lihavoinnin tai kursivoinnin o niitä ei pitäisi käyttää ajatellen näiden muotoilujen aikaansaamista Elementin <strong> sisään kapseloidaan erityisen tärkeä tekstinosa o se, miten tärkeä tekstinosa eri ympäristöissä (graafisesti, tai esim. äänenä) vaihtelee asiakasohjelmasta riippuen. Elementin <em> sisään kapseloidaan tekstinosa jota halutaan painottaa o kyse on enemmänkin kielellisestä painotuksesta, ei niinkään tekstinosan tärkeydestä o lauseiden: Ensi kesänä menen Ruotsiin töihin tai Ensi kesänä menen Ruotsiin töihin merkitys on erilainen. o tulisi käyttää <em> elementtiä painotuksen ilmaisemiseen, ei <strong> elementti o vastaava logiikka pätee muihinkin tekstitason elementteihin: Linkit esitellään <a href= arvo > elementin avulla href attribuutin arvo kertoo siirtymiskohteen o o kertoo mistä osoitteesta selaimen sivulle haetaan sisältö osoite voi olla 1. suhteellinen (osoite samalla palvelimella oleviin tiedostoihin) 2. sivun sisäinen siirtymä 3. absoluuttinen
Linkki samalla palvelimella olevalle sivulle o osoite on hakemistopolku tiedostoon, tulkitaan viittaavan sivusta lähtien o polussa käytetään - hakemistojen (kansioiden) nimiä ja - pseudohakemistonimen.. avulla (yksi taso rakenteessa ylöspäin) <a href="../esimerkit/index.html"> <a href="kuvat/taulu.jpg"> <a href="../../index.html"> o viimeinen linkki viittaa - kaksi hakemistotasoa ylemmäs - index.html dokumenttiin - nimen voisi jättää pois, koska se on joka tapauksessa oletus: <a href="../../ > Kohta dokumentissa (johon halutaan siirtyä) o merkitään id attributin avulla Viitattaessa o tunnus kirjoitetaan muun osoitteen perään # merkin jälkeen <h1 id="luku 1">1 Luku</h1> <p> Lorem ipsum... </p>..... <a href="#luku 1">Luvun 1 alkuun</a>..
Osoite muodostuu o href attribuutin arvona jokin uri osoite o tiedonsiirtoprotokolla voi olla muukin, kuin www sivu o alussa annetaan tiedonsiirtoprotokollan nimi http, https, ftp, mailto, ldap, file, news, gopher tai telnet o esimerkiksi <a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a> Protokollan jälkeen palvelimen osoite o esim. //www.sis.uta.fi Mahdollisesti palvelimen tietoliikenneportti o tarpeen antaa vain, mikäli se on eri kuin käytettävän protokollan oletus o esimerkiksi http oletus on :80, ftp protokolla :20 sivun osoitteesta palvelimella mahdollisesta elementin tunnuksesta sivun sisällä <a href= https://developer.mozilla.org/en US/docs/URIs_and_URLs >URI ja URL</a> <a href= http://www.sis.uta.fi/~jwt/13/sisalto.html >luennot</a> <a href= http http://www.sis.uta.fi/~jwt/13/sisalto.html#luku_3 6 >linkit</a> <a href= http://www.sanakirja.org/ >ilmainen sanakirja</a> viimeisessä esimerkissä tiedostonimi puuttuu, noudetaan o oletustiedosto index.html, index.php, index.pl tai index.asp, jos mitään näistä ei löydy o hakemiston sisällysluettelo (jos annettu oikeudet) ja ellei hakemistolle ole r oikeuksia o virheilmoitus, jos näyttäminen estetty ja oletustiedostoa ei ole
Esimerkin vuoksi katsaus kaikkiin <a> elementin attribuutteihin Mahdolliset attribuutit: href target hreflang media rel type syntaksi: <a target="_blank" "_self" "_parent" "_top"> Määrittelee mihin linkin osoitteessa oleva sisältö avataan _blank: uuteen selaimeen tai välilehteen _self: samaan selaimen osaan jossa linkki itse sijaitsee _parent: samaan selaimen osaan missä äiti elementti sijaitsee _top: jos linkki iframe:n sisällä, rakenteen ylimmälle tasolle aukaise <a href="osoite" target="_blank">linkki</a> uuteen välilehteen aukaise <a href="osoite" target="_self">linkki</a> tähän ikkunaan aukaise <a href="osoite" target="_parent">linkki</a> äitielementtiin aukaise <a href="osoite" target="_top">linkki</a> koko ikkunaan [W3C] [W3C non normative] [MDN] [w3school] syntaksi: <a hreflang="language subtag"> Hyperlinkin osoittaman dokumentin kieli o lista käytössä olevista tunnisteista löytyy osoitteesta: http://www.iana.org/assignments/language subtag registry <a href="http://www.sis.uta.fi/~jwt/13/sisalto.html" hreflang="fi">html5 kurssi</a> [W3C] [W3C non normative] [MDN] [W3School]
syntaksi: <a media="arvo"> Millä laitteella dokumentti on suunniteltu esitettäväksi o ts. mille laitteelle optimoitu o arvo voi olla jokin mediakyselyn antama mediatyyppi (media query) o + esitysympäristöä tarkentavia mediapiirteitä (media features). o mediatyyppivaihtoehtoja ovat tällä hetkellä - all, aural, braille, handheld, projection, print, screen, tty ja tv o valikoima laajennee laitteistojen kehittyessä - min width on esimerkki mediapiirteistä (media features) <a href="url" media="screen and (min width: 320px) >linkki</a> [W3C] [W3C non normative] [MDN] [w3school] syntaksi: <a rel= "void" "alternate" "author" "bookmark" "help" "license" "next" "nofollow" "noreferrer" "prefetch" "prev" "search" "tag"> Kuvaa viittaava dokumentin ja linkitetyn dokumentin (href) keskinäisen suhteent. mille laitteelle optimoitu <a href="osoite" rel="next">seuraava luku</a> [W3C] [W3C non normative] [MDN] [w3school]
syntaksi: <a type="ei negatiivinen luku"> Kertoo linkattavan dokumentin esitysmuodon, ns. MIME tyypin otällä hetkellä tieto on tiedotuksenomainen otulevaisuudessa sitä saatetaan käyttää eri tavoin - selain saattaisi esim lisätä pienen kaiutinikonin audio/wav linkkiin - MIME tyypit on esitelty IANAn sivuilla: http://www.iana.org/assignments/media types.. tässä asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa.. [W3C] [W3C non normative] [MDN] [w3school] tekstitason <small> <s> <cite> <q> <dfn> <abbr> <time> <code> pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset vanhentunutta, epätarkkaa tai ei enää relevanttia tietoa, tyypillinen (ei pidä käyttää esittämään tietoa joka halutaan poistaa, tai korvata uudella tekstillä, siihen tarkoitukseen del elementti) viittaus johonkin teokseen, esimerkiksi kirjan, artikkelin, runon, musiikkiteoksen, TV ohjelman, elokuvan, teatteriesityksen, veistoksen tai taulun nimeen; kyseessä ei tarvitse olla teoksen esittely, myös ohimennen mainittu teoksen nimi voidaan antaa cite elementissä jostain muusta lähteestä lainattu teksti merkkaa kohdan, jossa termi määritellään merkkaa lyhenteen tai akronyymin; jos elementillä on title attribuutti, sen tulee sisältää lyhenteen selitys. merkkaa joko kellonajan (24 tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime attribuutin arvona (ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä) merkkaa tekstinosan ohjelmakoodiksi
tekstitason <var> <samp> <kbd> <sub> <sup> <i> <b> merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa merkkaa tekstinosan ohjelman tulosteeksi. merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä merkkaa alaviitteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmällä merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on kursivoitu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia vaan esimerkiksi mielenalan, tunnelman tai muun merkityksen takia (esimerkiksi ajatus, sananlasku tai laivan nimi) merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on lihavoitu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia (esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa) tekstitason <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on alleviivattu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia (voidaan esimerkiksi käyttää kiinan kielessä henkilön nimen alleviivaukseen tai merkkaamaan tekstinosaa, jossa on kirjoitusvirhe) merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa Ruby merkkien (itä aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt> elementin kanssa sisältää Ruby merkkien (itä aasialainen merkistö) ääntämisohjeen elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue Ruby merkkejä. merkkaa tekstinosan, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia); suunnan voi määrätä dir attribuutilla (normaalisti attribuutin oletusasrvo on ltr, mutta tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti) muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi
Jäsentävät taulukkomaista tietoa riveihin ja sarakkeisiin niitä ei saa käyttää sivun osien asemointiin! Taulukoiden käyttö tulee rajoittaa nimenomaan taulukoidun tiedon esittämiseen ja sivun ulkoasun määritykset, sivun eri osien asemointi tehdään CSS:n keinoin Esittelee taulukon. Sallittu sisältö: o <caption> <colgroup> <thead> <tfoot> <tbody> Sallitut attribuutit: o globaalit attribuutit o border Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <table border="1"> <tr> <td>rivi 1 sarake 1</td> <td>rivi 1 sarake 2</td> </tr> <tr> <td>rivi 2 sarake 1</td> <td>rivi2 sarake 2</td> </tr> </table> [W3C] [W3C non normative] [MDN] [W3School]
Tärkeitä o sivuston keventäjinä o ilmeen luojina o usein myös informaatiota sisältävinä elementteinä Kuvia käytettäessä tulee muistaa kuvien tekijänoikeudet o voit tuoda sivulle vain itse ottamaasi kuvan, tai o kuvan, jonka käyttöoikeudet eksplisiittisesti sallivat sen käyttämisen sillä tavalla ja siinä yhteydessä, jossa aiot kuvaa käyttää Creative Commons lisenssoinnin kautta on saatavissa eri tavoin vapaita tai rajoitetusti käytettävissä olevia kuvia Googlen kuvahaku o voit rajoittaa koskemaan vain vapaasti käytettävissä olevia kuvia o tarkennettu haku (kohta: Käyttöoikeudet) Vaikka kuva olisikin vapaasti käytettävissä o kuvan yhteyteen jollain tavoin hyvä liittää mainita kuvan tekijästä o jos se vaan on löydettävissä. Joissain tilanteissa tarpeen piirtää tai luoda kuvia "lennossa oesimerkiksi jossain grafiikkaa sisältävässä nettipelissä o HTML5:ssä uusi <canvas> elementtin o<canvas> on nimensä mukaisesti taustakangas kuvalle oitse kuva luodaan tai tuodaan taustakankaalle esim. javascriptillä tai jollain muulla skriptikielellä Käsitellään tässä <img> elementin avulla sivulle tuotuja kuvia
Piirretään käyttäen geometrisia olioita o viivoja, suorakaiteita, ellipsejä, Bezier käyriä, jne. o vektrorigrafiikan iso etu on sen skaalautuvuus o se säilyy terävänä kaikissa kooissa laadun kärsimättä. Vektorigrafiikkaa käytetään o esim. kirjasinten toteutuksessa, ja o logojen ja julisteiden suunnittelussa Vektorigrafiikkaa tukevia piirto ohjelmilla o esim. Freehand, Illustrator o toimisto ohjelmien piirtotyökalut Kun kuva tuodaan sivulle <img> elementin avulla o vektorigraafisena luotu kuvakin muunnetaan useimmiten bittikarttakuvaksi o yleisimmät formaatit: jpeg, gif ja png formaatit o <img> elementin avulla on kuitenkin mahdollista tuoda myös vektorigraafisia kuvia (svg piirrokset tai yksisivuiset pdf tiedostot) Valokuvat ovat aina bittikarttakuvia (rasterigrafiikkakuvia) o bittikarttakuvat koostuvat pisteistä, kuvapikseleistä. o yksi kuvapikseli voi saada arvokseen jonkun värin o kuvan värisyvyys (kuinka monta väriä kuvassa on käytettävissä) o vaikuttaa suoraan kuvan kokoon Esim. o kuvan värisyvyys on 8 bittiä - kunkin kuvapikselin esittämiseen varataan 8 bittiä - kullakin kuvapikselillä voi olla 2 8 =256 toisistaan poikkeavaa väriä o värisyvyys on 24 bittiä o täysvärikuva o yksi kuvapikseli voi tällöin saada yhden 2 24 =16,7 miljoonasta värisävystä o kuvakoko kasvaa kolminkertaiseksi.
JPG o (Joint Photographic Expert Group) Suunniteltu tiivistämään jatkuvasävyisiä (continuoustone) väri tai harmaasävykuvia. o + säilyttää värit (täysvärituki, 24 bittiä) o + pakkaussuhteen voi määrätä portaattomasti o pakkaus vaikuttaa kuvan tarkkuuteen o ei tue läpinäkyvyyttä o ei tue animointia GIF o (Graphics Interchange Format) Sopiva tiivistysformaatti piirroksille, logoille ja muille kuville, joissa on käytössä vähän eri värejä. o värisyvyys 8 bittiä o kuvassa maksimissaan 256 väriä o gif pakkausalgoritmi patentoitu Unisys yhtiölle o + säilyttää kuvan tarkkuuden o + tukee läpinäkyvyyttä o + tukee animointia (peräkkäisten kuvien sitominen animaatioksi PNG o Portable Network Graphics GIF korvaajaksi kehitetty patenteista vapaa tiivistysformaatti o + säilyttää kuvan tarkkuuden, mutta tiivistys tehokkaampaa kuin GIF kuvissa o + tukee läpinäkyvyyttä o ei tue animointia o selainten vanhat versiot eivät tue tätä formaattia Yleisohje: PNG kuvia voi käyttää muuten paitsi isohkoissa, paljon pieniä väripintoja sisältävissä valokuvissa, jolloin JPG kuvat toimivat paremmin tai tilanteissa, jossa sivujen toimita vanhoilla selaimilla ovat syystä tai toisesta olennaista Bittikarttakuvan koko (dimensiot) mitataan pikseleissä o esimerkkinä "3 megapikselin" kamera o ottaa kuvia, jotka ovat 2048 pikselin levyisiä ja 1536 pikselin korkuisia o kuva tulostetaan paperille, kuvan fyysinen koko riippuu tulostuksessa käytetystä painojäljestä o paperille, siedettävällä painojäljellä 256 ppi (pixels per inch), tulostettuna 3M kuvan koko olisi noin 20 x 15 cm. Kuvaa ei kuitenkaan voisi näyttää sellaisenaan verkkosivulla o W3schoolin selaininformaatiosivulta nähdään, että resoluutio 1024x768 on tällä hetkellä se "kynnyskoko o lähes kaikilla w3school sivustolla kävijöillä vähintään sen kokoinen näyttö. o kamerasta saadun kuvan koko on siis huomattavasti sitä suurempi (lisäksi on hyvä huomioida, että w3school sivustolla tuskin käydään paljon pieninäyttöisiltä mobiililaitteilta) Näyttöjen tarkkuus vaihtelee välillä 72 100 ppi o esimerkkivalokuvan fyysinen koko näytöllä olisi näin ollen noin 75 x 54 cm o aivan liian suuri näytöllä esitettäväksi o kuvaa on järkevä käydä pienentämässä jossain kuvankäsittelyohjelmassa ennen sivulle tuontia
Termiä käytetään kuvaamaan kahta asiaa o kuvan kokoa - esittämiseen käytettävää kuvapikselien lukumäärää, esim. 1024 x 768 o tai esitystarkkuutta - pikselien lukumäärää tietyllä pinta alamitalla - esim. 72 ppi on tyypillinen näytön resoluutio Paperille tulostettuna kuvapikselien määrän kasvu voi lisätä kuvan tarkkuutta tai kuvan kokoa Näytöllä pikselien määrän lisäys tarkoittaa aina kuvan fyysisen koon kasvua. Läpinäkyvien kuvien avulla o on mahdollista luoda monimutkaisempia asetteluja o kuvan ääriviivan ei tarvitse olla suorakulmio, tai kuvia on helpompi sijoitella osittain päällekkäin. o GIF ja PNG tukevat läpinäkyvyyttä - kuvankäsittelyohjemissa voi määritellä läpinäkyvät alueet - GIF kuvissa voi yhden 256:sta väristä määritellä läpinäkyväksi, ts. yksi pikseli voi olla läpinäkyvä, tai sillä on väri - PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä - PNG kuvien avulla on helpompi saada pehmeästi häpyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä. o JPG ei tue läpinäkyvyyttä
Kuvankäsittelyn perusperiaatteet ovat samat riippumatta käyttämästäsi ohjelmasta o Adoben Photoshop ja sen hiukan halvempi serkku Fireworks suosituimmat o Photoshop on monipuolinen, kallis ja raskas ohjelma o Fireworks hinnaltaa noin kolmanneksen edellisestä, ketterämpi ja erityisesti suunniteltu verkkokäyttöön tulevien kuvien luontiin ja muokkaukseen o Alex J. Wendpap: Which is best for web design Muita o Paint Shop Pro monipuolinen, tehokas, maksaa muutaman kympin (Windows) o GIMP ilmainen open source ohjelma, myös monipuolinen ja tehokas, käyttö vaatii ehkä pientä totuttelua (Windows, Mac). o Paint.net monipuolisuudessaan verrattavissa edellisiin kahteen, ilmainen (Windows) o Acorn ja Pixemator muutaman kympin monipuolisia kuvankäsittelyohjelmia, ilmaiset kokeiluversiot (Mac) Kuva sisällytetään HTML5 dokumenttiin <img> elementin avulla <img src="kuvan verkko osoite" alt="seliteteksti" /> Seliteteksti alt="seliteteksti" on HTML5:ssä pakollinen o näytetään, jos kuvaa jostain syystä ei voida näyttää o esim. tekstipohjaisissa tai audioselaimissa o ruudunlukijat tukeutuvat selitetekstiin kuvan sisällön kuvaamiseksi. Kuva voi olla linkki <a href="#osa 2"> <img src="../img/ff arrow.png" alt="seuraava osa"> <a>
Kuva kannattaa o luoda suoraan sen kokoiseksi jona sen aikoo näyttää sivulla, ja o määrittää kuvan koko <a> elementissä height ja width attribuuttien avulla: <img src="kuva.png" width="200" height="165" alt="sanallinen selitys" /> Kuvan dimensiot o kannattaa aina kertoa eksplisiittisesti o silloin kuvan tuonti ei hidasta muun sisällön tuontia o eikä aiheuta ikävän näköistä uudelleenasettelua Ensisijaisesti kuva sivulle omassa koossaan o kuvan laadun säilymisen ja latautumisen nopeuden takia height ja width attribuutit o kuvan voi myös skaalata sivulle sopivaan kokoon o jos samaa kuvaa käytetään sivustolla eri kokoisena eri kohdissa o jos antaa vain leveyden tai korkeuden - toinen ulottuvuus määräytyy oikeassa suhteessa - ei vaaraa kuvan venymisestä tai litistymisestä ole - toisaalta edellä todettiin, että selain hyötyy siitä jos määrää molemmat dimensiot Koon tarkistus esim o kuvankäsittelyohjelmassa o selaimessa (helposti muutakin tietoa kuvasta)
Kuvaan voidaan "piilottaa kartta o määrittelee kuvan sisällä alueita o alueisiin voidaan liittää erikseen linkkiominaisuus Kartta: <map> elementin sisällä <area> koordinaatit määrittelevät halutut alueet o kuva ja kartta liitetään toisiinsa usemap attribuuttin arvon avulla <img src="img/pinnin aula.jpg" alt="pinnin aula" usemap="#kello ja kasvi" /> <map name="kello ja kasvi"> <area shape="circle" coords="205,18,13" href="kello.html" alt="kello" /> <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="viherkasvi" /> </map> Jokainen kartan area elementti määrittelee koordinaatein kuvan sisällä alueen, johon se liittyy Ks. esimerkit kurssisivuilta