Aulikki Hyrskykari Antti Sand

Transkriptio

1 Aulikki Hyrskykari Antti Sand

2 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

3 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)

4 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>

5 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>

6 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

7 <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

8 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

9 <audio>-elementti o äänitiedoston soittaminen - palvelimelta tai - jonnekin url-osoitteen osoittamaan paikkaan tallennetusta äänitiedostosta verkkosivulla o analoginen videon esittämiselle o äänitiedostoformaatit:

10 ää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

11 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).

12 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 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 monoliittisena kokoelmana 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)

13 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" />...

14 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>...

15 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

16 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;

17 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

18 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;

19 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;

20 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

21 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;

22 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;

23 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>

24 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ä.

25 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)

26 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

27 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

28 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

29 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.

30 Muistakaa pääsiäisen aiheuttamat poikkeuksen luentoihin