26.3.2013 Aulikki Hyrskykari sisällön ryhmittelyä lohkotasolla Tekstitason semanttisia elementtejä Linkit Taulukot Otsikko osan elementit: <base> <link> <script> <style> <title> <meta> Dokumentin runko: rakenteen määrittely <address>, <h1>..<h6>, <hgroup> <section>, <article>, <aside>, <header>, <footer>, <nav> sisällön ryhmittely <hr> <br> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div>
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. Sallittu sisältö: flow sisältöä, jota saattaa seurata tai edeltää <figcaption> elementti <figure> <img src="kuva.png" alt="tuotteen x kuva"> <figcaption>tuotteen x kuvaus</figcaption> </figure> <figure> elementin seliteteksti. Sallittu sisältö: flow sisältö Sallittu äiti elementti: <figure> <figure> <img src="kuva.png" alt="tuotteen x kuva"> <figcaption>tuotteen x kuvaus</figcaption> </figure>
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ö: oflow sisältö, jota voi edeltää oyksi tai useampi <style> elementti Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <div id="container"> Täällä div:in sisällä voi olla mitä vaan sisältöä, kappaleita, taulukoita, listoja,.. Tarkoituksena on vain kapseloida tämä osa dokumenttia </div> 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
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: <a> <em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> <span> Hyperlinkki (linkeistä tarkemmin kohta). Sallittu sisältö: sama kuin äidillään (transparent) Sallitut attribuutit: oglobaalit attribuutit o<href>,<target>,<hreflang>,<rel>,<media>,<type> Sallittu äiti elementti: oelementti, joka voi saada flow tai phrasing sisältöä Sivujen tekijän on hyvä tietää mitä selaimia nykyisin käytetään. Eräs selkeä tilasto selainten niin nykyisestä kuin menneestäkin käytöstä löytyy <a href= "http://www.w3schools.com/browsers/browsers_stats.asp">w3schoolin sivuilta </a>
Painotettu tekstinosa, kyse on kielellisestä painotuksesta, ei tekstinosan tärkeydestä, jonka merkintään tulisi käyttää elementtiä <strong>). Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä Ensi kesänä menen Ruotsiin <em>töihin</em>. Tärkeä tekstinosa, kuten uusi termi tai muuten huomatuksi haluttava osa tekstiä. Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä Nykyisin suuri osa laajemmista www sivuistoista toteutetaan jonkun <strong>sisällönhallintajärjestelmän</strong> avulla>
Pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset. Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <small>noudatamme voimassa olevaa henkilötietolakia</small> 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). Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä Kotimainen tomaatti <s>3.50 /kg </s> 2.50 /kg
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ä. Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä Pentti Haanpään klassikossa <cite>noitaympyrä</cite> kuvataan nälkäisen miehen hysteeristä hiihtoa kuutamoyössä hirmupakkasessa läpi Kairanmaan korpien. Jostain muusta lähteestä lainattu teksti. Sallitut attribuutit: o globaalit attribuutit o cite Sallittu äiti elementti: o elementti, joka voi saada phrasing sisältöä Elementtiä käytetään nimenomaan lainattaessa tekstiä: <q cite="http://www.w3.org/tr/html5/text level semantics.html">the q element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the q element for marking up sarcastic statements. </q>
Merkkaa kohdan, jossa termi määritellään. (ei kuitenkaan sisäkkäistä <dfn>elementtiä) <dfn id="internet maaritelma">internet</dfn> on maailmanlaajuinen, palvelinkoneiden ympärille muodostettujen verkkojen yhteenliittymä, "verkkojen verkko". Merkkaa lyhenteen tai akronyymin. Jos elementillä on titleattribuutti, sen tulee sisältää lyhenteen selitys. Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä Internet tarjoaa infrastruktuurin <abbr title="world Wide Web">WWW</abbr>:lle.
Merkkaa joko kellonajan (24 tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime attribuutin arvona. Tarkoituksena on, että ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä. Sallitut attribuutit: o globaalit attribuutit o datetime Kesän 2013 teatterikesän <time datetime="2013 08 05">5.</time> <time datetime=2013 08 11"">11.8.</time> ohjelmisto on jukistettu Merkkaa tekstinosan ohjelmakoodiksi. Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä Otsikko kirjoitetaan <code>h1</code> elementin sisään seuraavasti:<br /> <code><h1>pääotsikko</h1></code>
Merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa. Suorakaiteen pinta ala lasketaan kaavalla <var>leveys</var> * <var>korkeus</var>. Merkkaa tekstinosan ohjelman tulosteeksi. <samp>tämä on ohjelman tulostetta.</samp>
Merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä Selaimissa oikotie toimii yleensä näppäinkomennolla <kbd>alt+shift+x</kbd> tai <kbd>alt+x</kbd>. Merkkaa alaviitteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä. Veden kemiallinen kaava on H<sub>2</sub>O.
Merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmäl. Neliön pinta ala lasketaan sivun nelionä: sivu<sup>2</sup>. 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. Sanalaskukin sen sanoo: <i>sitä saa mitä tilaa</i>.
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; tällainen tekstinosa voisi olla esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa. Eurooppaministeri <b>alexander Stubbin</b> mukaan kyproslaisten on itse löydettävä ratkaisu, joka täyttää EU:n, Euroopan keskuspankin ja Kansainvälisen valuuttarahaston IMF:n ehdot lainapaketin saamiseksi [ 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; tällä voidaan esimerkiksi käyttää kiinan kielessä henkilön nimen alleviivaukseen tai merkkaamaan tekstinosaa, jossa on kirjoitusvirhe. This is a <u>parragraph</u>.
Merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa. Tätä elementtiä käytetään tekstinosan <mark>korostamiseen</mark> ] Ruby merkkien (itä aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt> elementin kanssa. Sallittu sisältö: ophrasing sisältö, jota tulee seurata <rt> elementti, tai <rp> elementti jota seuraa <rt> ja <rp> elementit <ruby> 明 日 <rp>(</rp><rt>ashita</rt><rp>)</rp>, huomenna, in Finnish </ruby>
Sisältää Ruby merkkien (itä aasialainen merkistö) ääntämisohjeen. Sallittu sisältö: ophrasing sisältö (ääntämisohje) Sallittu äiti elementti: <ruby> <ruby> 明 日 <rp>(</rp><rt>ashita</rt><rp>)</rp>, huomenna, in Finnish </ruby> Elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue ruby merkkejä. Sallittu sisältö: ophrasing sisältö, jota tulee seurata <rt> elementti, tai <rp> elementti jota seuraa <rt> ja <rp> elementit Sallittu äiti elementti: <ruby> <ruby> 明 日 <rp>(</rp><rt>ashita</rt><rp>)</rp>, tarkoittaa suomeksi huomenna </ruby>
Merkataan tekstinosa, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia). Suunnan voi määrätä dir attribuutilla. Normaalisti attribuutin oletusasrvo on ltr, siitä poiketen tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti. Sallitut attribuutit: oglobaalit attribuutit odir Pääsiäinen arabiaksi on bdi>ja />لفصح< bdi > pääsiäisloma الفصح< bdi > < bdi />عيد Muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi. Sallitut attribuutit: o globaalit attribuutit o dir Uskotko, että "eno Kimmo, pese se pommikone" on panlindromi? Kokeillaan. Kirjoitettuna oikealta vasemmalle se on: <bdo dir="rtl"> eno Kimmo, pese se pommikone </bdo>
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 äiti elementti: elementti, joka voi saada flow sisältöä dropzone="<span class="default">copy</span>" "move" "link Linkit esitellään <a href= arvo > elementin avulla href attribuutin arvo kertoo siirtymiskohteen o arvo voi olla jokin uri osoite o http, https, ftp, mailto, ldap, file, news, gopher tai telnet o esimerkiksi Jos arvona on url osoite tai hakemistopolku o o <a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a> kertoo mistä osoitteesta selaimen sivulle haetaan sisältö osoite voi olla 1. absoluuttinen 2. suhteellinen 3. sivun sisäinen
Linkki samalla palvelimella olevalle sivulle o osoite on hakemistopolku tiedostoon + tiedoston nimi o hakemistopolku tulkitaan viittaavan sivun hakemistosta käsin o polussa käytetään - hakemistojen (kansioiden) nimiä ja - pseudohakemistonimä.. avulla (yksi taso rakenteessa ylöspäin) <a href="../harj/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 <a href="#luku 1">Luvun 1 alkuun</a>..... <h1 id= luku 1">1 Luku</h1> Lorem ipsum...
Osoite muodostuu o tiedonsiirtoprotokollan nimestä esim. http: tai https: o palvelimen osoitteesta, esim. //www.sis.uta.fi o mahdollisesti palvelimen tietoliikenneportista - tarpeen antaa vain, mikäli se on eri kuin käytettävän protokollan oletus - esimerkiksi http oletus on :80, ftp protokolla :20 o sivun osoitteesta palvelimella o mahdollisesta elementin tunnuksesta 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> o viimeisessä esimerkissä tiedostonimi puuttuu, noudetaan - oletustiedosto index.html, index.php, index.pl - Hakemiston sisällysluettelo (jos annettu oikeudet) - Virheilmoitus, jos näyttäminen estetty ja oletustiedostoa ei ole 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> 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öä tarkentaviamediapiirteitä (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 otällä hetkellä tieto on tiedotuksenomainen otulevaisuudessa 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]
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>