Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla

Transkriptio

1 Aulikki Hyrskykari Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla Tällä kertaa o Videotiedostot - palvelimelle tallennetun videon tuonti verkkosivulle - HTML5 videoformaatit - videon nouto sivulle verkosta o Äänitiedostot o CSS taustaa o CSS syntaksista o CSS valitsimet

2 Aiemmin audio ja videotiedostot verkkosivulle o plug in lisäosien avulla o kolmansien osapuolien tarjoamia ohjelmia o esim. Adoben Flash player, Applen Quicktime Niiden käytössä ongelmansa o lisäosan tulee olla asennettuna koneelle o esim Flash videon upottamiseksi sivulle - koodi, joka yhdellä selaimella toimii - ei välttämättä toimikaan toisella selaimella HTML5 tukee tiettyjä video ja ääniformaatteja natiivisti o suoraan selaimessa, ei plug in tarvetta o tarkoitus: yksi formaatti videolle, yksi formaatti äänitiedostoille o ei ihan onnistunut (Apple ja Nokia) Analoginen esitys kuvien kanssa o video tallennettuna joko sivuston kanssa samalle palvelimelle o johonkin osoitteeseen saataville internettiin (src attribuutti) <video src="media/pelikaani.webm">... </video>

3 Videon esittämistä voidaan säädellä elementin muiden attribuuttien avulla o height, width: videonsoittoalueen koko o poster: soittoalueella aluksi näytettävä kuva (ennen videon käynnistystä) o preload: videon videon noutamiseen liittyviä ohjeita o autoplay: automaattinen käynnistäminen sivulle tultaessa o controls: ohjauspaneelin näyttäminen o muted, loop: videon mykistys ja automaattinen toisto o mediagroup: videoiden ryhmittelyyn (esim. synkronoitia varten) <video src="media/pelikaani.webm" width="500" height="281" controls poster="img/pelikaani.jpg">... </video> Kaikki selaimet eivät kuitenkaan tue WebM videoformaattia Alkuperäinen ajatus ei siis ihan toiminut o videot joutuu aina antamaan sivulla ainakin kahdessa eri formaatissa o lisäksi, sekä Apple ja Microsoft vaativat, että koneelle on asennettu tietyt ohjelmistot asennettuna - Apple: Quicktime, jotta Safari (ja myös Chrome, koska molemmat ovat WebKit pohjaisia selaimia) toimisi - MS: Windows Media Player, jotta IE9 toimisi

4 <source> elementin avulla o tällöin src="url" attribuutti jätetään <video> elementistä pois o jos attribuutti on mukana, se syrjäyttää <source> elementtien vaikutuksen <video> <source src="img/pelikaani.webm" type="video/webm"> <source src="img/pelikaani.mp4" type="video/mp4"> <p>selaimesi ei pysty näyttämään videota, pahoittelen.</p> </video> o selain etenee <source> elementtien listaa o poistuu <video> elementistä kun pystyy tunnistamaan jonkun tarjotuista videotiedostoista <source> elementillä src attribuutin lisäksi attribuutit o type: vaaditaan videon MIME tyypin määrittelemiseksi (video/ogg, video/mp4, video/webm) o media: välittää tietoa siitä millaisille laitteille video on optimoitu näytettäväksi <track> elementin avulla videoon mahdollista lisätä tekstitys Videon soitto sivulla suoraan jostain muualta (esim. YouTubesta) Muista oikeudet myös videoiden kohdalla o YouTube videoita voit käyttää vapaasti, jos upotat ne suoraan YouTubesta omalle sivullesi o upottaminen tapahtuu HTML5:ssä <iframe> elementin avulla o <frame> elementtiä ei HTML5:ssä enää ole, mutta <iframe> elementti kyllä o videon yhteydestä löytyy upota/embed koodi o kurssisivuille upotettu video joka opastaa tämän tekemiseen

5 <audio> elementti o äänitiedoston soittaminen - palvelimelta tai - jonnekin url osoitteen osoittamaan paikkaan tallennetusta äänitiedostosta verkkosivulla o analoginen videon esittämiselle o äänitiedostoformaatit: äänitiedoston tuonti sivulle: <audio autoplay="autoplay" loop="loop"> <source src="audio/ella.wav" type="audio/wav"> <source src="audio/ella.mp3" type="audio/mp3"> <a href="audio/ella.mp3">download the audio</a> </audio> <audio> elementin attribuutit vastaavat kuin <video> elementissä (visuaaliset luonnollisestikin vain puuttuvat) o src, preload, autoplay, controls, muted, loop ja mediagroup

6 Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät DOM hierarkiassa äidiltä lapselle - ts. piirteiden periytyminen ympäröivältä elementiltä o periytyminen on kuitenkin piirrekohtaista, kaikki piirteet eivät ole periytyviä Alettiin käyttää vasta kun www sivuja oli jo kirjoitettu HTML:llä useampia vuosia Aiemmissa HTML versioissa ollut o muotoiluun liittyviä elementtejä ja attribuutteja o esim <font>, <br> ja <center> o HTML5 versiosta ne on poistettu o kaikki muotoilutieto annetaan erillisissä CSS tyylipohjadokumenteissa, CSSmuotoilusääntöinä (poikkeus: kuvan koon määrittävät attribuutit). Eivät ole tyylipohjakielen eri versioita, vaan kerroksia o ts. uusi CSS kerros on aina tuonut kieleen lisää tyylisääntöjä Vaiheet o ensimmäisen kerroksen tyylisäännöt CSS1 julkaistiin vuonna 1996 o CSS2 julkaistiin jo heti sen jälkeen 1997 korvatiin tarkistetulla versiolla CSS2.1. o CSS2.1 kehitystyö saatettiin päätökseen W3C Recommendation CSS2.1 julkistettiin kesällä 2011 o CSS3 kerrosta kehitetty jo vuodesta 1998, ajoittain kehittely ollut laimeaa o uusien selainten ilmaantuminen markkinoille, sai CSS3 kehityksen aktivoitumaan jälleen o CSS2.1:n saattaminen stabiiliin vaiheeseen kesti kauan CSS3:a ei enää haluttu kehittää isona monoliittinen kokoelma tyylisääntöjä CSS3 jaettiin useampaan moduuliin, joista kukin toteuttaa tiettyyn aihepiiriin liittyvät säännöt o CSS3 moduuleista on jo tällä hetkellä standardoitu: värit, nimiavaruudet, valitsimet ja mediakyselyt. o Neljännen tason moduuleitakin kehityksen alla (CSS4)

7 Tapa 1: suositeltavin tapa o erillinen *.css tiedosto o liitetään tiedosto HTML dokumenttiin otsikko osassa <link> elementin avulla. o usein järkevää kirjoittaa useampia tyylitiedostoja tiettyyn dokumentiin helpompi liittää vain kulloinkin tarpeelliset tyylitiedostot <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>sivun otsikko</title> <link rel="stylesheet" type="text/css" href="polku/perustyylit.css" /> <link rel="stylesheet" type="text/css" href="polku/navigointi.css" /> <link rel="stylesheet" type="text/css" href="polku/erityiset tyylit.css" />... Tapa 2: o suoraan HTML dokumentin otsikko osaan <style> elementtiä käyttäen o esimerkiksi dokumentin taustavärin ja vasemman marginaalin määrääminen seuraavasti <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>sivun otsikko</title> <style type="text/css"> body { background color:maroon; margin left:20px; p { color:white; </style>...

8 Tapa 3: o suoraan elementtiin style attribuuttia käyttäen (tällöin valitsin jää pois, koska kohde elementtiä ei tarvitse määritellä) <p style="color:sienna; margin left:20px"> This is a paragraph. </p> Tavat 1 3 eivät sulje toisiaan pois o yhteentörmäystilanteessa elementtiin kirjoitettu sääntö kumoaa otsikko osan säännön, joka edelleen kumoaa mahdollisen tyylitiedostossa annetun säännön Tyylisääntö (Style rule) o valitsin (selector) o piirre (feature) o säännön esittely (declaration of a rule) Sama sääntö kohdistetaan useammalle elementille h1, h2 { color: blue; Useita sääntöjä samalle elementille o /* kommentointi */ body { /* tekstin ja taustan väri */ color: purple; background color: silver;

9 Määrittää, mihin dokumenttipuun elementtiin tyylisääntö kohdistuu CSS2.1 valitsimet o hahmo (pattern), jota dokumenttipuusta haetaan o sääntö kohdistetaan elementtiin tai elementteihin, johon hahmonhaku (pattern matching) sopii Elementtivalitsin (Type selector) on valitsimista yksinkertaisin o e hahmo sopii kaikkiin elementteihin <e> p { padding left: 10px; Valitsinlista o sama sääntö kohdistetaan useampaan elementtiin h1 { color: purple; font weight: bold; h2 { color: purple; font weight: bold; h1, h2 { color: purple; font weight: bold;

10 Sääntö halutaan kohdistaa tiettyihin elementteihin o eivät välttämättä samantyyppisiä o käytetään attribuuttia class elementtien ryhmittelyyn Esim. halutaan tärkeä teksti vahvennettuna ja punaisena o Ensin määritellään tärkeiden tekstien elementit kuuluvaksi luokkaan tarkea ts. annetaan niille attribuutti class="tarkea" <p> Tämä teksti on muuten ihan tavallista, mutta <span class="tarkea">huomaa erityisesti tämä tärkeä asia</span>. Joskus tärkeää voi olla koko kappale, jolloin piirre voidaan antaa koko <p> elementille, kuten seuraavassa kappaleessa on tehty. </p> <p class="tarkea"> Tämä kappale on kokonaisuudessaan aivan erityisen tärkeä. </p> o ja määritellään luokan "tarkea elementeille sääntö:.tarkea { color: red; font weight: bold; Edellä kuvattujen valitsimien (elementti ja luokkavalitsin) yhdistelmä o elementin nimi.luokan nimi o sääntö kohdistuu annetun nimisiin elementteihin, jotka kuuluvat annettuun luokkaan h1.tarkea { color: maroon; font weight: bold; o kohdistuu vain h1 elementteihin, jotka kuuluvat annettuun luokkaan tarkea

11 HTML elementit voidaan myös nimetä yksilöllisesti o ja kohdistaa sääntöjä yksittäisiin elementteihin <h1 id="paaotsikko">koko JUTUN OTSIKKO</h1> o sääntö kohdistetaan tähän elementtiin käyttämälla id valitsinta o muodostuu # merkistä ja id attribuutin arvosta #paaotsikko { color: green; text align: center; Kontekstinen valitsin (jälkeläisvalitsin, descendant selector) o muodostuu välilyönnillä erotetuista elementin nimistä o e1 e2 kohdistuu e1 elementtien sisällä oleviin e2 elementteihin o elementtilistassa voi olla enemmänkin kuin kaksi elementtiä (sama logiikka) ul li { font size: small; ul ul li { font size: x small; o huomaa ero pilkuin erotetun luettelon ja välilyönnein erotetun luettelon välillä o kontekstisessa valitsimessa voidaan elementin nimien sijasta käyttää myös class tai id attribuutteja ja kaikkien näiden yhdistelmiä td, em { font family: sans serif; font weight: bold; td em { font family: sans serif; font weight: bold; aside p.ingressi { font family: sans serif; color: blue;

12 Kohdistuu tietyn elementin lapseen o e1 > e2 kohdistuu kaikkiin elementteihin, joiden äiti on e1 li > strong { color:#f00; o sääntö kohdistuisi listan riveillä oleviin <strong> elementteihin o kuitenkin vain niihin <strong> lapsielementteihin, o ei hierarkiassa syvemmälle, esimerkiksi lapsenlapsiin <li> <strong>tähän tekstiin yllä oleva hahmohaku sopii</strong> <p> <strong>mutta ei tähän</strong> </p> </li> Kohdistuu tiettyä elementtiä seuraavaan elementtiin o e1+e2 o elementeillä on siis sama äiti o elementin tulee seurata välittömästi elementtiä e1 h1+p {margin top: 14px; o ykköstason otsikkoa välittömästi seuraavaan kappaleeseen lisätään yläreunaan marginaalia 14 pikseliä.

13 Sovitetaan hahmoa elementin o attribuutin tai/ja o attribuutin arvon perusteella Seuraava sääntö kohdistuu p[dir] {color:#f00; o kappaleisiin, joilla on dir attribuutti (riippumatta attribuutin arvosta) p[dir=rtl] {color:#f00; o kappaleisiin, joissa tekstin kirjoitussuunnaksi on määritelty oikealta vasemalle p[class~=tarkea] {color:#f00; o kaikkiin niihin kappaleisiin, joilla yksi attribuutin class arvoista on "tarkea" p[lang =en] {color:#f00; o kaikkiin kappaleisiin joiden attribuutin lang arvo alkaa kirjaimilla en (kuten en, en us, en gb, jne) Pseudoluokkavalitsin kirjoitetaan elementin nimen perään kaksoispisteellä erotettuna o ei soviteta elementteihin nimen, esiteltyjen attribuuttien eikä attribuuttien sisältöjen o vaan jonkun muun elementin ominaisuuden perusteella o :link :visited :hover :active :focus :first child :lang

14 Pseudoelementtivalitsin liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna o pseudoluokkavalitsinta sovitetaan olemassa oleviin elementteihin, kun taas o pseudoelementtivalitsemen avulla voidaan"luoda" pseudoelementtejä ::before ::after ::first letter ::first line Univeraalivalitsin *, sopii kaikkiin elementteihin o näkee harvoin käytettävän o itse asiassa se on käytössä koko ajan, mutta se jätetään kirjoittamatta näkyviin o jos universaalivalitsin on ainoa elementtivalitsin yksittäisessä valitsimessa, sen saa jättää pois.omaluokka *.omaluokka #osa 1 *#osa 1

15 Edellä lueteltujen valitsimien tehokkaan käytön opettelu on jo enemmän kuin perussivustojen toteuttamiseksi on välttämätöntä. Kolmostason valitsimetkin kuitenkin jo standardoitu o Merkkijonon hahmohaku valitsimet, joilla elementti voidaan valita sovittamalla merkkijonoa attribuutin arvon osaan (osamerkkijonoon, alkaa, loppuu, sisältää) o Rakenteelliset pseudovalitsimet, joilla haku tehdään dokumenttipuun rakenteen perusteella (juuri, n. lapsi, n. sisarus, ensimmäinen/viimeinen lapsi, lapsettomat elementit, jne.) o Käyttöliittymäelementtien pseudovalitsimet, joilla haku tehdään elementin tilan perusteella o Negaatio pseudoluokka, joka kohdistaa säännöt elementtiin, joka ei sovi annettuun hahmoon. o Sisaruspseudoluokka, jolla haetaan elementit jolla on sama äiti. Yhteen elementtiin kohdistuu usein monta tyylisääntöä o yhdessä tyylitiedostossa saattaa olla useita o sääntöjä saatetaan tuoda useasta lähteestä o sääntöjä periytyy elementille automaattisesti (äidiltä) Minkä mukaan elementin ulkoasu määräytyy? Kolme pääperiaatetta: o sijanti (location), o periytyminen (inheritance) ja o painoarvo (specificity) JWT Hyrskykari, SIS, Tampereen yliopisto