21.3.2013 Aulikki Hyrskykari Vertaisarvioinneista HTML5 dokumentin otsikko osa HTML5 dokumentin runko osa dokumentin rakenne ja osien semanttinen merkkaus sisällön ryhmittelyä lohkotasolla semanttista merkkausta tekstitasolla Arvioitava työ Antamasi pisteet Kommenttisi työstä
HTML dokumentissa voi olla vain yksi otsikko osa. Dokumentin otsikko osa määrittää dokumentiin liittyvän metainformaation (metadata) o esim. osoitteet, joista löytyy - liitettävät tyylisääntötiedostot - sivulla käytettävät skriptit Sallittu sisältö: o korkeintaan yksi <base> elementti o nolla tai useampia seuraavista <link>, <meta>, <script>, <style>, <title> Sallittu äiti elementti: dokumentin juurielementti <html>
Käsitellään seuraavaksi otsikko osaan mahdollisesti sisältyvät elementit <base> <link> <script> <style> <title> <meta> Oletuspolku dokumentissa viitatuille linkeille. Dokumentissa saa olla vain yksi <base> elementti. Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallitut attribuutit: o globaalit attribuutit ohref, target Sallittu äiti elementti: dokumentin otsikkoelementti <head> <base href="http://www.sis.uta.fi/~jwt/13/" />
Määrittää mistä dokumentissa käytetty resurssi löytyy o esim. tyylimäärittely, skriptitiedosto Sallittu sisältö: void elementti Sallitut attribuutit: o globaalit attribuutit o Globaalin attribuutin title merkitys tässä elementissä käytettynä on erityinen: sen avulla voi määritellä vaihtoehtoisia tyylejä, joista käyttäjä voi valita mitä tyyliä käyttäen haluaa sivua katsella. Valinnan voi tehdä selaimessa valikon Näytä/Sivun tyylit (View/Page style) kautta. o href, hreflang, rel, media, type, sizes Sallittu äiti elementti: o <head>, tai o jokin muu elementti, joka voi saada metadata sisältöä. <! tavanomainen tyylitiedoston liittäminen html dokumenttiin > <link rel="stylesheet" href="css/jwt.css" media="screen" /> <! vaihtoehtoisia tyylejä title attribuutin avulla > <link rel="stylesheet" href="css/jwt.css" media="screen" title="oletustyyli"/> <link rel="stylesheet" href="css/print.css" media="screen" title="tulostuksen esikatselu"/> Esittelee sivulla käytetyt selainpuolen ohjelmat o kuten esim. Javascript koodin o antaa niihin liittyviä määrittelyjä Sallittu sisältö: ohjelmakoodia Sallitut attribuutit: o globaalit attribuutit o src, async, defer, type, charset Sallittu äiti elementti: o <head>, o jokin muu elementti, joka voi saada metadata sisältöä tai o mikä tahansa elementti, joka voi saada phrasing sisältöä. <! suoraan elementtiin kirjoitettu ohjelmakoodi > <script> document.write("hello World!") </script> <! erillisestä tiedostosta haettu ohjelmakoodi > <script src="script/javascript.js"> </script>
Mahdollistaa CSS sääntöjen esittelyn html dokumentin otsikko osassa o vähänkin isommissa sivustoissa erillisen tyylitiedoston (tyylitiedostojen) esittely suositeltavampaa. Sallittu sisältö: type attribuutin määrittämän tyyppistä sisältöä Sallitut attribuutit: o globaalit attribuutit o media,type,scoped o title attribuutin merkitys tässä elementissä on erityinen; sen avulla on mahdollista määritellä vaihtoehtoisia tyylisääntöjoukkoja. Sallittu äiti elementti: o <head> o jokin muu elementti, joka voi saada metadata sisältöä o <div>, <noscript>,, <article>, <aside> <style type="text/css"> body { font family: verdana, arial, sans serif; } </style> Dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona o dokumentilla voi olla vain yksi otsikko Sallittu sisältö: o merkkimuotoinen tieto joka saa sisältää myös < merkkejä (HTML jäsentäjä ei tulkitse otsikon sisältä HTML alkutunnuksia) Sallitut attribuutit: o globaalit attribuutit Sallittu äiti elementti: <head> <title>uta: JWT 2013</title>
Tämän elementin avulla voidaan määritellä sellaisia metatietoja, joita muiden meta elementtien avulla ei saa määrittellyksi, mm. o määritellä käytetty merkistökoodaus, o antaa avainsanoja hakukoneille, kertoa dokumentin tekijän nimi, o kuvailla dokumentin sisältö o määrätä sivulle virkistystaajuus - tämän käyttöä pitäisi välttää, koska se on WAI suositusten vastainen toiminta Sallittu sisältö: void elementti Sallitut attribuutit: o globaalit attribuutit o name, http equiv, content, charset Sallittu äiti elementti: o <head> o poikkeus: jos annettu http equiv attribuutti, äiti voi olla myös <noscript> <meta charset="utf 8"> <! lataa 2 sekunnin kuluttua toinen sivu > <meta http equiv="refresh" content="2; url=http://www.uta.fi"> Dokumentin sisältö kirjoitetaan <body> elementin sisään, dokumentin runko osaan
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 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 : http://www.w3.org/tr/html5/sections.html#outline
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> http://www.sis.uta.fi/~jwt/13/esim/03 01 a dokumentin rakenne.html <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> <!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> > <h1> 2.1 Otsikko</h1> > <h1>2.1.1 Otsikko</h1> > <h1>2.1.2 Otsikko</h1> <h1>2.2 Otsikko</h1> <h1>2.2.1 Otsikko</h1> </body> http://www.sis.uta.fi/~jwt/13/esim/03 01 b dokumentin rakenne.html <!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> > <h2> 2.1 Otsikko</h2> <h3>2.1.1 Otsikko</h3> <h3>2.1.2 Otsikko</h3> <h2>2.2 Otsikko</h2> <h3>2.2.1 Otsikko</h3> </body> http://www.sis.uta.fi/~jwt/13/esim/03 01 c dokumentin rakenne.html
Viimeinen edellisistä tällä hetkellä suositeltu tapa o ruudunlukijat eivät ainakaan toistaiseksi osaa jäsentää otsikkotasoja dokumentin osien sisältä, vaan turvautuvat suoraan käytettyyn <h1>..<h6> elementtiin o Bruce Lawson: Headings in HTML5 and accessibility, http://brucelawson.co.uk./2009/headings in html 5 and accessibility/ o HTML5 Doctor: The section element, http://html5doctor.com/the sectionelement/). 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 (http://gsnedders.html5.org/outliner/) Dokumentin semanttisessa jäsentelyssä nojataan <h1>..<h6> elementteihin seuraava ei ole suositeltavaa <body> <h1>pääotsikko</h1> <h2>tarkentava aliotsikko</h2>... koska <h2> ei aloita uutta alilukua <h1> ja <h2> itse asiassa muodostavat otsikon yhdessä o tulisi käyttää <hgroup> elementtiä <body> <hgroup> <h1>pääotsikko</h1> <h2>tarkentava aliotsikko</h2> </hgroup>...
Dokumentin jakaminen semanttisesti merkityksellisiin osiin <address>, <h1>..<h6>, <hgroup>, <article>, <aside>, <header>, <footer>, <nav> Sisältää yhteystiedot; jos elementin äiti on body elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot. Sallittu sisältö: o flow sisältöä, oei kuitenkaan heading tai sectioning sisältöä, oeikä <header>, <footer> eikä <address> elementtejä Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <address> Aulikki Hyrskykari<br /> Informaatiotieteiden yksikkö, Tietojenkäsittelytieteet<br /> Tampereen yliopisto<br /> email: aulikki.hyrskykari(at)uta.fi </address>
Otsikko tasolla 1... 6. Selainten html tulkit saattavat käyttää otsikoita automaattisen sisällysluettelon luomiseen sivusta. Sallittu sisältö: phrasing sisältö Sallittu äiti elementti: oelementti, joka voi saada flow sisältöä o<hgroup> <h1>ensimmäisen tason otsikko</h1> <p>kappale... </p> Elementin avulla ryhmitellään yhteen <h1> <h6> elementtejä silloin kun otsikko koostuu usean tason otsikosta.. Sallittu sisältö: yksi tai useampi <hn> elementti Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <hgroup id="harj_02" class="harjoituksen otsikko"> <h1 class="harjoituksen otsikko">harjoitus 2</h1> <h2>html&css, Dao of Web Desing, peruselementtejä</h2> </hgroup>
Alkavan osan alkunimiö, ts. elementin avulla voidaan sitoa osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi. Sallittu sisältö: flow sisältö Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <article> <header> <h1>hard Trance is My Life</h1> <p>by DJ Steve Hill and Technikal</p> </header> <p>the album with the amusing punctuation has red artwork.</p> </article> Määrittelee dokumentin osan ("sektion"). Sektiot ovat temaattisia kokonaisuuksia, ts. sektioihin jakoa ei pitäisi käyttää muotoilun apuvälineenä, siihen tarkoitukseen käytetään edelleen <div>elementtiä. Sisäkkäisten sektioiden avulla voidaan määritellä dokumentin hierarkinen rakenne (luvut, niiden aliluvut, jne). Sallittu sisältö: flow sisältö Sallittu äiti elementti: o elementti, joka voi saada flow sisältöä o ei kuitenkaan <address> elementti <h1>otsikko</h1> <p> Tämä luku on merkattu omaksi sektiokseen. Tyypillisesti sektioon merkataan sekä otsikko että sen sisältö. </p>
Osa dokumenttia, joka muodostaa oman kokonaisuutensa o voisi ajatella itsenäisesti julkaistavaksi o esim. lehtiartikkeli tai blogi Sallittu sisältö: o flow sisältö, o jota saattaa edeltää yksi tai useampia <style> elementtejä Sallittu äiti elementti o elementti, joka voi saada flow sisältöä o ei kuitenkaan <address> elementti <article> <h2>kakkosluvun otsikko <p> Tämän otsikon alle kirjoitettu teksti muodostaa selkeästi oman kokonaisuutensa, että sen voisi vaikka "ripata" jonnekin muualle. </p> </article> Sivulla omaan lokeroonsa kirjoitettua sisältö. Usein tälläisia oheissisältöjä ovat "hyvä tietää" tai "taustafaktoja" tyyppiset sivuhuomautuslokerot ("tangentially related" informaatiota). Sallittu sisältö: o flow sisältö, ojota voi edeltää yksi tai useampia <style> elementtenä Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <aside> <h1>fakta BOKSI</h1> <p> Tiesitkö, että... </p> </aside>
Alaviitteenomaista tietoa siihen osaan dokumenttia, jonka sisässä elementti sijaitsee o oletetaan kohdistuvan lähimpään äiti elementtiin, joka on - sectioning elementti tai - <blockquote>, <body>, <details>, <fieldset>, <figure>, <td> o esimerkiksi <body> elementin lapsena <footer> sisältää tyypillisesti tiedot koko sivun tekijästä ja muuta koko sivuun liittyvää informaatiota Sallittu sisältö: flow sisältö Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <footer role="contentinfo"> <p> Aulikki Hyrskykari, Tampereen yliopisto. Materiaalinkopioiminen tai käyttäminen kaupallisiin tarkoituksiin ilman lupaa kielletty. </p> </footer> Elementin sisään suljetaan sivun osa, jota käytetään navigointiin sivun eri osien välillä. Sallittu sisältö: flow sisältö Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <nav> <ul class="navipalkki"> <li><a href="index.html">etusivu</a></li> <li><a href="sivu2.html">toinen sivu</a></li> <li><a href="sivu 3.html">Kolmas sivu</a></li> <li><a href="yhteystiedot.html">yhteystiedot</a></li> </ul> </nav>
<p> <hr> <br> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div> 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 Kappale (erotettuna rivinvaihdoin ympäristöstään). Sallittu sisältö: o phrasing sisältö Sallitut attribuutit: o globaalit attribuutit Sallittu äiti elementti: o elementti, joka voi saada phrasing sisältöä <p> Tämä teksti renderöityy omaksi kappaleekseen </p>
Sisällön temaattinen vaihdos o kappaletasolla o merkitys temaattisena vaihdoksena on olennaista o ei viiva esitysmuoto voi olla jotain muutakin Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallittu äiti elementti: elementti, joka voi saada flowsisältöä... <hr> Dokumentin sektiovaihdon kohdalla usein temaattisen sisällönvaihdoksen merkkaus voi olla paikallaan.... Edustaa rivinvaihtoa. Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallittu äiti elementti: o elementti, joka voi saada phrasing sisältöä <p> </p> Tästä tulostuu selaimessa <br /> kaksi riviä.
Esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan o myös tyhjätilamerkit renderöidään suoraan sellaisenaan esitettävälle sivulle o automaattisia rivinvaihtoja ei tehdä o esityksessä oletusarvoisesti tasalevyinen kirjasin (yleensä Courier) Sallittu sisältö: phrasing sisältö Sallittu äiti elementti: o elementti, joka voi saada flow sisältöä <pre><p> koodi kirjoitetaan usein <p> elementtiä käyttäen, koska sen avulla teksti voidaan muotoilla itse: rivitys, sisennykset ym. säilyvät sellaisenaan </p></pre> Muusta lähteestä lainattu tekstisisältö. Sallittu sisältö: flow sisältö Sallitut attribuutit: o globaalit attribuutit o cite attribuutti Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <blockquote cite= "http://www.w3.org/tr/html5/grouping content.html#attr blockquote cite"> If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. </blockquote>
Järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä. Sallittu sisältö: nolla tai useampia <li> elementtejä Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <ul> <li>listan eka rivi</li> <li>listan toka rivi <! </li> ei tänne > <ul> <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ul> </li> <! toka rivi suljetaan täällä > <li>kolmas rivi</li> </ul> ] Järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä). Sallittu sisältö: nolla tai useampia <li> elementtejä Sallitut attribuutit: o globaalit attribuutit o reversed, start, type Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <ol> <li>listan eka rivi, edessä numero 1</li> <li>listan toka rivi, edessä numero 2 <! </li> ei tänne > <ol type="i" start="10" reversed> <! < roomalaiset numerot > <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ol> </li> <! toka rivi suljetaan täällä > <li>kolmas rivi, edessä numero 3</li> </ol>
Listan rivi. Sallittu sisältö: flow sisältö Sallitut attribuutit: oglobaalit attribuutit ovalue Sallittu äiti elementti: <ul>, <ol> tai <menu> <ol> <li value="100">lista alkaa sadasta</li> <li>satayksi</li> <li>satakaksi</li> <li>satakolme</li> </ol> Määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms. Sallittu sisältö: onolla tai useampia <dt> elementtiä, joista okutakin seuraa yksi tai useampia <dd> elementtiä Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl>
<dl> listan termi, käsite, tms. Sallittu sisältö: oflow sisältöä, paitsi oei heading tai sectioning sisältöä, eikä o <header> tai <footer> elementtejä Sallittu äiti elementti:<dl> elementti <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl> [XX] [XX] [X] [X] <dl> listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle. Sallittu sisältö: flow sisältöä Sallittu äiti elementti:<dl> elementti <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl>