19.3.2013 Aulikki Hyrskykari HTML dokumentin ensimmäisenä rivinä annetaan dokumenttityypin määrittely HTML5 dokumentti koostuu selementtien hierarkiasta, joista juuri elementti <head> sisältää kaikki muut dokumentin elementit.
Dokumenttityypin määrittely aiemmille HTML versioille viittasi kielen DTDmäärittelyihin (document type definition) Ohessa ylhäällä dokumenttityypin määrittelyt esimerkiksi versioille: HTML 4.01, HTML4.01 strict, XHTML1.0 ja XHTML1.0 HTML5 kielisen dokumentin määrittely on aiempaan verrattuna peri yksinkertainen [attribuutti= arvo ] * = yksi tai useampia attrbuutti/arvo pareja esim. <p lang="en"> A paragraph in English. </p> <a href="http://palvelin/tiedostopolku/tiedosto" target="_blank">tämä on linkki</a>
Koteloivat HTML elementin aloittavan kulmasulun "<" ja tag nimen tai lopputunnuksessa kulmasulun, kauttaviivan ja tag nimen välissä ei saa olla väliöntejä, esim. < p> </ p> </p > määrittelyjä ei tunnistettaisi kappaleen aluksi tai lopuksi kaikilla elementeillä on alkutunnus ei tyhjillä (non void) elementeillä tulee aina olla lopputunnus Elementti voi sisältää o tekstiä o elementtejä tai o Kommentteja Muodostavat elementin sisällön (content) Attribuutit ja niiden arvot eivät ole elementin sisältöä
Tyhjätilamerkkien (white spaces) luhistaminen o välilyöntimerkit, sarkainmerkit, rivin sivun ja osanvaihtomerkit Sivua renderöitäessä (kokeile) o peräkkäiset white space merkit luhistetaan yhdeksi välilyönniksi o rivin loppuun osuva tyhjätilamerkki tuottaa rivinvaihdon HTML dokumenttiin kirjoitetussa tekstissä ei saa olla white spaces merkkejä lukuunottamatta muita kontrollimerkkejä Erikoismerkit voidaan aina antaa joko o koodeina &merkin UTF 8 koodi heksadesimaalina; alkaa & merkillä ja päättyy ; merkkiin o välissä joko merkin entiteettinimi tai heksadesimaalikoodi (alkaa # merkillä) o esim. < tai < (<) ä tai ä (ä) & tai & (&) ks. http://www.w3.org/tr/2011/wd html5 20110113/named character references.html tai http://www.tutorialspoint.com/html5/html5_entities.htm Lukujärjestelmät, joissa kantalukuna jokin muu kuin 10 o binäärilulukujärjestelmä (kantaluku 2), oktaalijärjestelmä (8), heksadesimaalilukujärjestelmä (16) Heksadesimaaliluvut olukujärjestelmä, jossa kantaluku on 16 o0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, omuunnokset - heksadesimaaliluvusta desimaaliluvuksi: (1B1) 16 = (433) 10 - desimaaliluvusta heksadesimaaliluvuksi: jaetaan lukua kantaluvulla ja otetaan jakojäännökset talteen: (3858) 10 = (F12) 16 1x16 2 +11x16 1 +1x16 0 = 433 3858/16 = 241,jää 2 241/16 = 15,jää 1 15/16 = 0, jää 15
Aiemmin HTML elementit jaettiin lohkotason ja rivitason (blockline 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ä) Spesifikaatio luokittelee elementit hienojakoisemmin Luokat ovat päällekkäisiä, ts. yksi elementti voi kuulua useampaan luokkaan ks. elementtien luokitteluluettelot HTML spesifikaatiosta: http://www.w3.org/tr/html5/images/content venn.svg 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 elementtiä (määrättyjä elementtejä), - vain phrasing sisältöä tai väljemmin - flow sisältöä.
Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa omassa kontekstissaan Yhtäsuuruusmerkin molemmin puolin saa olla välilyönti, tai se voi puuttua. Boolean tyyppinen attribuutti 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. Kielen kaikki elementeille voidaan antaa mitä tahansa näistä attibuuteista Sen lisäksi 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
syntaksi: <anytag accesskey="x"> Määrittää yhden tai useampia näppäimistö oikoteitä (x) elementin aktivoimiseksi o esim. aktivoi linkin, tai vie fokuksen elementtiin Selaimissa oikotie toimii yleensä näppäinkomennolla alt+shift+x tai alt+x <nav id="nav_yla"> <a accesskey="i" href="index.html">info</a> <a accesskey="k" href="sisalto.html">kurssisisältö</a> <a accesskey="e" href="esimerkit.html">esimerkit</a> <a accesskey="h" href="harj/index.html">harjoitukset</a> <a accesskey="t" href="ht tentti.html">htyö/tentti</a> <a accesskey="m" href="muuta.html">muuta</a> </nav> accesskey [W3C] [W3C non normative] [MDN] [W3School] class syntaksi: <anytag class="luokan nimi"> Määrää elementin kuuluvaksi tiettyyn luokkaan. Elementtiin voidaan tyylisäännöissä viitata tämän luokkanimen avulla. <p class="insertti"> Tämä tekstipala halutaan asemoida omalla tavallaan, siksi sille on määritelty luokkanimi, jonka avulla sille voi kohdistaa muotoilusääntöjä css tiedostosta. </code> [W3C] [W3C non normative] [MDN] [W3School]
contenteditable syntaksi: <anytag contenteditable="true" "" "false"> Määrää voiko elementin sisältöä muokata. Arvot "true" ja tyhjä merkkijono asettavat elementin editoitavissa olevaksi. Jos attribuuttia ei määritellä elementille lainkaan, elementti perii editoitavuuden äidiltään. <p contenteditable> Tätä tekstiä pystyisi nyt sivulla muokkaamaan. </p> [W3C] [W3C non normative] [MDN] [W3School] contextmenu syntaksi: <anytag contextmenu="menu id"> Liittää elementille konteksisensitiivisen ponnahdusvalikon Valikon sisältö joka esitellään erikseen tunnuksella "menu id Valikko aukaistaan hiiren kakkospainikkeen kautta Selaintuki tälle attribuutille kuitenkin toistaiseksi heikkoa. [W3C] [W3C non normative] [MDN] [W3School]
dir syntaksi: <anytag dir="ltr" "rtl" "auto"> Määrittää tekstin kirjoitussuunnan (left to right, right to left tai jätetään ohjelmallisesti määriteltäväksi) [W3C] [W3C non normative] [MDN] [W3School] draggable syntaksi: <anytag draggable="true" "false" "auto"> Määrittää voiko elementtiä raahata vai ei Itse raahauksen toteuttamien vaatii javascriptin kirjoittamista Attribuutin oletusarvo auto jättää attribuutin arvon selaimen päätettäväksi. <label draggable="true">siirrä tämä</label> Huomaa, että attribuutti ei ole boolean arvoinen (lueteltu tyyppi), joten edellistä esimerkkiä EI voi antaa muodossa: <label draggable>siirrä tämä</label>
dropzone syntaksi: <anytag dropzone="copy" "move" "link"> Määrittää miten raahattavaa kohdetta käsitellään jos se raahatessa tiputetaan elementin päälle Selaintuki tälle toistaiseksi heikkoa. hidden syntaksi: <anytag [hidden]> Mahdollistaa elementin piilottamisen ts. kääntämisen pois näkyvistä <p hidden>tämä teksti ei tule näkyviin</p>
id syntaksi: <anytag id="merkkijono"> Antaa elementille yksikäsitteisen tunnuksen <h1 id="osa contact">yhteystiedot</h1> syntaksi: <anytag lang="language subtag"> Kuvaa elementin kirjoittamisessa käytetyn kielen Tunnisteiden standardoinnista vastaa IANA (SInternet Assigned Numbers Authority) o lista käytössä olevista tunnisteista löytyy osoitteesta: http://www.iana.org/assignments/language subtag registry lang <p languge="de"> Dieser Absatz ist in deutscher Sprache verfasst. </p>
spellcheck syntaksi: <anytag spellcheck[="true" "" false"]> Määrää suoritetaanko elementin tekstisisällölle automaattinen oikeinkirjoitustarkistus o lueteltu tyyppi, joten arvoa ei saa jättää pois (tyhjä merkkijono tulkitaan avoksi true ) o oletusarvon määrääminen (jos attribuuttia ei anneta) on jätetty selaimelle Selaintuki toistaiseksi heikkoa. <input type="text" name="paivitettava kuvaus" spellcheck="true" /> syntaksi: <anytag style="[css sääntö;] * "> elementin sisään voidaan kirjoittaa CSS sääntöjä o koskevat vain tätä elementtiä Tämä kuitenkin rikkoo hyvää kooodaustapaa o HTML dokumentti tulisi pitää erillään sen muotoiluun liittyvistä css säännöistä o muotoilusäännöt tulisi esittää erillisessä CSS tiedostossa o niitä ei pitäisi löytyä *.html dokumentista, eikä varsinkaan dokumentin runkoosasta On kuitenkin joissain tilanteissa näppärä mahdollisuus o esimerkiksi tilapäisesti kokeiltaessa CSS sääntöjen toimintaa <h1 style="background color:yellow; text align:right"> Tämä otsikko on oikealla </h1> style
syntaksi: <anytab tabindex="luku"> tabindex Määrittää, että elementti voi saada fokuksen Missä järjestyksessä elementit (esimerkiksi linkit tai lomakkeen kentät) saavat fokuksen kun niitä käydään näppäimistöltä sarkainselauksella läpi. o sarkaimella käydään elementit läpi lähtien tabindex arvosta 1 o samalla tabindex arvolla olevat elementit käydään läpi esiintymisjärjestyksessä o negatiivinen tabindex arvo: elementti voi saada fokuksen, mutta se ei ole mukana sarkainselaussekvenssissä o tabindex arvo 0: halutaan, että elementti voi saada fokuksen ja että se voidaan aktivoida sarkainselauksella, mutta selausjärjestys jätetään selaimen toteutettavaksi. <p> Sivun <a href="kohde1.html" tabindex="2">linkkien</a> selausjärjestyksen voi halutessaan määrätä itse. Esimerkiksi nyt tähän <a href="kohde2.html" tabindex="1">linkkiin</a> tullaan ensin. </p> title syntaksi: <anytag title="merkkijono"> Liittää elementtiin tooltip tyyppistä lisäinformaatiota. Tulee yleensä näkyviin hiiren kursorin viivähtäessä elementin päällä (mouse over). Tieto ei saa olla sivun käytön kannalta olennaista (kaikissa käyttötilanteissa ei ole hiiren kursoria: tabletit, puhelimet), <link> ja <style> elementeille annettuna title attribuutin merkitys on erityinen <p title="tähän kappaleeseen liittyvä huomautus"> Huomautukset voivat olla vain rivin mittaisia, koska merkkijonoon ei voi sisällyttää rivinvaihtoja. </p>
translate syntaksi: <anytag accesskey="x"> Määrittää, käännetäänkö elementin attribuutit ja niiden sisältö, sekä elementin tekstiä sisältävien lasten kieli, kun sivusta tehdään lokasoitu versio. [W3C] [W3C non normative]