Aulikki Hyrskykari Antti Sand

Transkriptio

1 Aulikki Hyrskykari Antti Sand

2 Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista, erikoismerkeistä, merkistökoodauksista o elementtien luokittelu ja sisältömallit Tällä kertaa o vertaisarvioinnit o kertausta elementtien sisältömalleista o attribuuteista globaalit attribuutit o <head>-osan sisältö o <body>-osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön ryhmittely - tekstitason semanttinen merkkaus

3 Arvioitava työ Antamasi pisteet Kommenttisi työstä

4 Aiemmin HTML- elementit jaettiin lohkotason ja rivitason (block ja inline) elementteihin o lohkotason elementti erottuu ympäristöstään rivin vaihdoin (esim. <p> elementti) o rivitason elementti merkkaa tekstiä kappaleen sisällä ( esim <strong> elementti) HTML5:ssä elementit jaetaan useampaan luokkaan Pääluokat ovat o phrasing elementit (~rivitason elementtejä) o Flow-elementit (~lohkotason elementtejä)

5 Spesifikaatio luokittelee elementit hienojakoisemmin Luokat ovat päällekkäisiä, ts. yksi elementti voi kuulua useampaan luokkaan ks. elementtien luokitteluluettelot HTML spesifikaatiosta: diagrammi löytyy suoraan osoitteesta Mihin luokittelua tarvitaan? o kullekin elementille määritelty sisältömalli (content-model) o kuvaa millaista sisältöä elementti voi saada, esim. - tyhjä HTML-elementti (void element), ei mitään, - vain tietyn määrätyn elementin (määrättyjä elementtejä), - vain phrasing-sisältöä tai väljemmin - flow-sisältöä.

6 Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa omassa kontekstissaan Yhtäsuuruusmerkin molemmin puolin saa olla välilyönti, tai se voi puuttua. Jos attribuutti on Boolean-tyyppinen o HTML5-syntaksin mukaan ei tarvitse antaa arvoa o pelkkä attribuutin esittäminen vastaa silloin attribuutin "true"-arvoa o esim. <input disabled> HML5:ssä on joukko attribuutteja, jotka voidaan osoittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan globaaleiksi attribuuteiksi.

7 Kaikille elementeille voi antaa mitkä tahansa näistä attribuuteista Kunkin elementin määrittelyn yhteydessä määritellään erikseen mitä muita attribuutteja elementti voi saada Joidenkin globaalien attribuuttien merkitys (esim- titleattribuutti) saattaa olla eri elementeille määriteltynä hiukan erilainen. Globaalit attribuutit ovat: accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate

8 id syntaksi: <anytag id="merkkijono"> Antaa elementille yksikäsitteisen tunnuksen o koko dokumentissa vain yksi elementti, jolla ko. tunnus <h1 id="osa-contact">yhteystiedot</h1> Elementtiin viitataan käyttäen #-merkkiä, esimerkiksi o tyylisäännöissä: #osa-contact { background-color: yellow; } o linkissä: <a href= #osa-contact >yhteystietoihin</a> [W3C] [W3C non-normative] [MDN] [w3school]

9 syntaksi: <anytag class="luokan-nimi"> Määrää elementin kuuluvaksi tiettyyn luokkaan Elementtiin voi tyylisäännöissä viitata luokkanimen avulla o dokumentissa useita ko. luokkaan kuuluvia elementtejä <p class="insertti"> Tämän tyyppisille tekstipaloille halutaan määritellä oma tyylinsä, siksi sille on määritelty luokkanimi, jonka avulla sille voi kohdistaa muotoilusääntöjä css-tiedostosta. </p> Luokan elementteihin viitataan käyttäen pistettä, esimerkiksi tyylisäännössä.insertti { font-style: italics; } class [W3C] [W3C non-normative] [MDN] [W3School]

10 accesskey määrittää yhden tai useampia näppäimistö-oikoteitä elementin aktivoimiseksi contenteditable määrää voiko elementin sisältöä muokata contextmenu dir draggable dropzone hidden lang spellcheck style tabindex title translate liittää elementille konteksisensitiivisen ponnahdusvalikon määrittää tekstin kirjoitussuunnan (left-to-right, right-to-left tai jätetään ohjelmallisesti määriteltäväksi) määrittää voiko elementtiä raahata vai ei määrittää miten raahattavaa kohdetta käsitellään jos se tiputetaan elementin päälle mahdollistaa elementin piilottamisen ts. kääntämisen pois näkyvistä kertoo elementin kirjoittamisessa käytetyn kielen Muut globaalit attribuutit määrää suoritetaanko elementin tekstisisällölle automaattinen oikeinkirjoitustarkistus mahdollistaa CSS-sääntöjen kirjoittamisen elementin sisään (sääntö kohdistuu silloin vain ko. elementtiin) määrittää, että elementti voi saada fokuksen, ja missä järjestyksessä selaus tapahtuu liittää elementtiin tooltip-tyyppistä lisäinformaatiota (älä sekoita <title>-elementtiin) määrittää, käännetäänkö elementin (ja sen lasten sisältämä) teksti, kun sivusta tehdään lokasoitu versio, koskee myös attribuutteja ja niiden sisältöä

11 HTML-dokumentissa voi olla vain yksi otsikko-osa määrittelee koko dokumenttia koskevia yleisiä tietoja

12 <base> <link> <script> <style> <title> <meta> <base> <link> oletuspolku dokumentissa viitatuille linkeille, dokumentissa saa olla vain yksi <base>-elementti määrittää mistä dokumentissa käytetty resurssi löytyy <script> esittelee sivulla käytetyt selainpuolen ohjelmat <style> <title> <meta> määrittää tekstin kirjoitussuunnan (left-to-right, right-to-left tai jätetään ohjelmallisesti määriteltäväksi) dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona määrittelee sellaisia metatietoja, joita muiden meta-elementtien avulla ei saa määrittellyksi (esim. merkistökoodaus, avainsanoja hakukoneillle, sisällön kuvaus)

13 dokumentin sisältö kirjoitetaan <body>-elementin sisään, runko-osassa o määritellään dokumentin rakenne o ryhmitellään dokumentin sisältö o merkitään tekstin semanttiset osat

14 WWW-sivun elinaika voi olla pitkä o saatetaan tulevaisuudessa katsella hyvinkin erilaisissa olosuhteissa o laitteen näytön koko voi vaihdella pienestä taskulaitteesta todella isoon paneelinäyttöön o renderöinti voi olla paitsi visuaalista, vaikkapa auditiivista (ruudunlukija) tai kosketukseen perustuvaa (braille-näytöt) o kuka tietää millaisia laitteita tulevaisuus tuo tullessaan Sivun semanttisen sisällön tunnistaminen auttaa tekemään kuhunkin ympäristöön osuvamman ja selkeämmän tukinnan

15 Elementit dokumentin rungossa välittävät dokumentin osien o semanttisen roolin, merkityksen o ei oteta kantaa siihen, miten sisältö renderöidään selaimen ikkunassa, tai jonkun muun laitteen näytöllä / avulla Asiakasohjelman (user agent, selain) on tärkeätä tietää mikä renderöitävän tekstin merkitys dokumentissa on o ruudunlukija saattaa esimerkiksi lukea otsikot hitaammin tai erisävyisellä äänellä kuin muu teksti o selaimet voivat käyttää semanttista merkkausta apunaan luodessaan selaustoimintoja, ruudunlukijan voi pyytää lukemaan vain otsikot, hyppäämään yhteystietoihin, menemään suoraan alaviitteeseen, jne. o verkossa toimivat robottiohjelmat käyttävät semanttista merkkausta hyväkseen - esim. hakukoneet voivat tarjota merkkausta hyväkseen käyttäen sivustosta selkeän, sivuston rakennetta kuvaavan pikalinkkikokoelman o W3C outline-algoritmin määritys :

16 rakenne Obsolete poistunut määritelmästä Dokumentin jakaminen semanttisesti merkityksellisiin osiin <address>, <h1>..<h6>, <hgroup> <section>, <article>, <aside>, <header>, <footer>, <nav>

17 Ennen otsikot olivat ainoa tapa jäsentää dokumentin rakennetta: <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <p> Lorem... </p> <h1>2 Otsikko</h1> <p> Lorem... </p> <h2>2.1 Otsikko</h2> <p> Lorem... </p> <h3>2.1.1 Otsikko</h3> <p> Lorem... </p> <h3>2.1.2 Otsikko</h3> <p> Lorem... </p> <h2>2.2 Otsikko</h2> <p> Lorem... </p> <h3>2.2.1 Otsikko</h3> <p> Lorem... </p> </body>

18 <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <h1>2 Otsikko</h1> > <section> <h1> 2.1 Otsikko</h1> > <section> <h1>2.1.1 Otsikko</h1> > </section> <section> <h1>2.1.2 Otsikko</h1> </section> </section> <section> <h1>2.2 Otsikko</h1> <section> <h1>2.2.1 Otsikko</h1> </section> </section> </body> <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <h1>2 Otsikko</h1> > <section> <h2> 2.1 Otsikko</h2> <section> <h3>2.1.1 Otsikko</h3> </section> <section> <h3>2.1.2 Otsikko</h3> </section> </section> <section> <h2>2.2 Otsikko</h2> <section> <h3>2.2.1 Otsikko</h3> </section> </section> </body>

19 Viimeinen edellisistä (ainakin tällä hetkellä) suositeltu tapa o ruudunlukijat eivät (toistaiseksi) jäsennä otsikkotasoja dokumentin osien sisältä, vaan turvautuvat suoraan käytettyyn <h1>..<h6>-elementtiin o Bruce Lawson: Headings in HTML5 and accessibility, o HTML5 Doctor: The section element, Yksinkertaistaa myös otsikoiden muotoilua o eri tasoiset otsikoi voi edelleen muotoilla suoraan määrittämättä sen tasoa section-hierarkiassa Saattaa aluksi tuntua monimutkaiselta o on kuitenkin HTML5-versiossa yksikäsitteisesti määritelty o Geoffrey Sneddonin HTML5 Outliner (

20 rakennetta <address> <h1>.. <h6> <header> <section> <article> <footer> <nav> sisältää yhteystiedot; jos elementin äiti on body-elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot otsikot tasoilla ; selainten html-tulkit saattavat luoda otsikoiden avulla automaattisen sisällysluettelon sivusta sitoo osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi määrittelee dokumentin hierarkisen rakenteen, voi muutenkin määritellä dokumentin temaattisen osan ( sektion ) jolla on oma otsikkonsa osa dokumenttia, joka muodostaa oman kokonaisuutensa (lehtiartikkeli, blogi, tms. itsenäisesti julkaistavissa oleva) alatunnisteenomaista tietoa siihen osaan dokumenttia, jonka sisässä elementti sijaitsee elementin avulla merkataan ne elementit, joita käytetään navigointiin sivun eri osien välillä

21 sisällön <div> <p> <hr> <br> <pre> <blockquote> <figure> <figcaption> <ol> <ul> <li> <dl> <dt> <dd> Näitä elementtejä käytetään dokumentin sisällön erilaiseen ryhmittelyyn, kuten o jakamiseen kappaleiksi, o dokumenti jakamiseen temaattisiin osiin o listoihin tai o muihin jollain tavalla oman kokonaisuutensa muodostaviin osiin Esitetään oletusarvoisesti omana lohkonaan, ts. ne erotetaan muusta sisällöstä rivinvaihdoin <div>-elementti poikkeus, sen avulla ei kuvata merkitystä

22 Geneerinen flow-elementti, joka kapseloi lohkon, jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään lohko, johon halutaan vaikuttaa CSS-säännöillä. Sallittu sisältö: o flow-sisältö, jota voi edeltää o yksi tai useampi <style>-elementti Sallitut attribuutit: globaalit attribuutit Sallittu äiti-elementti: elementti, joka voi saada flowsisältöä <div id="container"> <p> Täällä div:in sisällä voi olla mitä vaan sisältöä, kappaleita, taulukoita, listoja,.. Tarkoituksena on vain kapseloida tämä osa dokumenttia </p> </div> [W3C] [W3C non-normative] [MDN] [W3School]

23 <p> <hr> <br> <pre> sisällön kappale (erotettuna rivinvaihdoin ympäristöstään) sisällön temaattinen vaihdos (ei siis välttämättä viiva ) edustaa rivinvaihtoa esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan <blockquote> muusta lähteestä lainattu tekstisisältö <figure> elementti, jossa on itsenäinen sisältö niin että siihen viitataan tyypillisesti omana, elementtivirrasta irrallisena, yksikkönään ja se voidaan siirtää päävirrasta sivuun vaikuttamatta dokumentin merkitykseen. Tällainen elementti voisi olla esimerkiksi kuva, kaavio tai vaikkapa koodilistaus. <figcaption> elementin seliteteksti

24 LISTAT (<body> - sisällön ryhmittelyä) <ul> <li> järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi <ul> <li>listan eka rivi</li> <li>listan toka rivi  <ul> <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ul> </li>  <li>kolmas rivi</li> </ul>

25 <ul> <li> <ol> LISTAT (2) (<body> - sisällön ryhmittelyä) järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä) <ol> <li>listan eka rivi, edessä numero 1</li> <li>listan toka rivi, edessä numero 2  <ol type="i" start="10" reversed>  <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ol> </li>  <li>kolmas rivi, edessä numero 3</li> </ol>

26 LISTAT (3) (<body> - sisällön ryhmittelyä) <ul> <li> <ol> <dl> <dt> <dd> järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä) määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms <dl>-listan termi, käsite, tms. listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl>