Aulikki Hyrskykari Antti Sand
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
<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 o esimerkiksi lihavoida <b>-elementtiä käyttäen HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä o tekstinosia, sanaryhmiä, sanoja tai jopa yksittäisiä merkkejä voi edelleenkin merkata o merkkaus on kuitenkin aina semanttinen o merkattavaan 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 kertoo mistä osoitteesta selaimen sivulle haetaan sisältö o 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 osoite palvelimella mahdollinen elementin tunnus 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 o tällä hetkellä tieto on tiedotuksenomainen o tulevaisuudessa 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 o esimerkiksi jossain grafiikkaa sisältävässä nettipelissä o HTML5:ssä uusi <canvas>-elementtin o <canvas> on nimensä mukaisesti taustakangas kuvalle o itse 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 Jos värisyvyys on 24 bittiä - täysvärikuva - yksi kuvapikseli voi tällöin saada yhden 2 24 =16,7 miljoonasta värisävystä - 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 (1 bit, 0 tai 1) - PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä (8 bit, 0 255) - PNG kuvien avulla on helpompi saada pehmeästi häipyviä 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 lienee suosituin o Photoshop on monipuolinen, kallis ja raskas ohjelma (nykyään SAAS, eli käyttömaksullinen, ei perinteisessä mielessä ostettavissa) o Fireworks hinnaltaa noin kolmanneksen edellisestä, ketterämpi ja erityisesti suunniteltu verkkokäyttöön tulevien kuvien luontiin ja muokkaukseen Eikä ole, Fireworksia ei ole ollut enää aikoihin 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, Linux). o Paint.net - monipuolisuudessaan verrattavissa edellisiin kahteen, ilmainen (Windows) o Acorn ja Pixelmator - muutaman kympin monipuolisia kuvankäsittelyohjelmia, ilmaiset kokeiluversiot (Mac) Verkossa o Esimerkiksi Autodesk Pixlr (http://www.pixlr.com)
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 <img>-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