13.3.2014 aulikki hyrskykarijwt/14/luennot/luento2.pdf · 2014-03-27 · • xhtml 1.0 on...

3/27/2014

JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto

13.3.2014

Aulikki Hyrskykari

• HTML / DOM / CSS –perusperiaatteita

• HTML syntaksista

• Elementtien luokittelu ja sisältömallit

3/27/2014JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto

<!DOCTYPE html> <html>

<head><meta charset = "UTF‐8" /><title>Ensimmäinen kokeilu</title>

</head> <body>

<h1>Www‐sivun luominen</h1> <p>

Harjoitellaan tällä sivulla ensin, mitkä ovat HTML‐dokumenttiin vaadittavat osat minimissään.

</p> <p>

Html‐dokumentti sisältää aina head‐ ja body‐elementit, edellisessä kuvataandokumenttiin liittyviä yleisempiä asioita ja jälkimmäiseen kirjoitetaan sivunvarsinainen sisältö. Tämän dokumentin head‐elementtissä on määritelty dokumentin tallennuksessa käytettävä merkistökoodaus (meta charset ...) ja dokumentin nimi (title). Body‐elementissä on annettu yksi ensimmäisen tason otsikko (h1) ja kaksi kappaletta (p).

</p> </body>

</html>

• Selain esittää dokumentin ymmärrettävässä ja havainnollisessa muodossa:http://www.sis.uta.fi/~jwt/14/esim/01-01-ensimmainen-sivu.html

• HTML5‐määrittely määritteleeo kielen syntaksin + aiempaa tarkemminmiten selainten tulee esittää erilaiset kielen elementit käyttäjälle ()

• Selainten kehitystyökalut sivun koodin tutkimisessa


• HTML:ää alettiin soveltaa suunniteltua monimuotoisempaan käyttöön

• Uudet HTML‐määrittelyt o eivät pysyneet takaamaan dokumenttien yksiselitteistä jäsentämistä ja tulkintaao eri selainvalmistajille alkoi kehittyä omat tulkintansa HTML‐kielestä

• Sivustojen kehittäjät joutuivat joko o käyttämään vain niitä HTML‐elementtejä, jotka testasivat toimiviksi kaikissa selaimissa, o määrittämään, että sivusto toimii vain tiety(i)llä selaimilla tai o kirjoittamaan sivustostaan useampia versioita eri selaimille.

• W3C:ssä nähtiin tarpeelliseksi kehittää HTML:lle paremmin verkkosovelluksiin sopiva korvaaja o syntyi XML (Extensible Markup Lanaguage)

o meta‐kieli, jonka avulla voidaan määritellä merkkauskieliä

• HTML ei ollut uuden XML‐kielen mukainen o ei täyttänyt yksinkertaistettuja rakenteellisia vaatimuksia o tarvittiin uusi versio HTML:stäo sai nimekseen XHTML


• XHTML 1.0 on lähestulkoon identtinen HTML 4.1 ‐version kanssao XHTML vain tiukemmin ja puhtaammin kirjoitettua HTML:ääo XHTML dokumentit ovat valideja HTML‐dokumentteja (ei päde välttämättä toiseen suuntaan)

• Tärkeimmät XHTML:n ja HTML:n väliset erot1) Elementtien päättäminen

(properly closed elements)- HTML‐jäsentäjät tekevät näissä tilanteissa oletuksia - Huom!Myös tyhjät elementit tulee päättääesim. <br />

2) Elementtihierarkian eheys(properly nested elements)- XHTML elmentit tulee olla hierarkisestisisennettyinä

- ts. viimeksi avattu elementti tulee sulkea ennenkuin sitä edeltävä elementti suljetaan

3) HTML alku‐ ja lopputunnisteet ja attribuutit pienin kirjaimin (lowercase tags and attributes)- elementtien alku‐ ja lopputunnisteet (tags) kuten myös attribuutit tulee kirjoittaa pienin kirjaimin- ts. XHTML:ssä <HEAD> on väärin, ja <head> oikein.

4) Attribuutien tarkempi esitys (quoted attribute values)- HTML sallii boolean‐tyyppisille attribuuteille "arvottomat attribuutit”esimerkiksi sallitaan pelkkä boolean‐attribuutti checked ilman että sille annetaan arvoa

- XHTML:ssä kaikilla atribuuteilla on oltava arvo ja sen tulee olla lainausmerkeissäts. XHTMLssä edellinen olisi väärin, sen sijaan tulisi merkitä: checked="checked"

(ps. jos arvoon sisältyy lainausmerkki, arvo suljetaan heittomerkkeihin, esim. name='Jussi "Juice" Leskinen')


• 1990‐1995: HTML 1.0 ‐ HTML 2.0 o Tim Berners-Lee julkaisi ensimmäisen suunnitelman World Wide Webin toteuttamiseksi o ensimmäisten viiden vuoden aikana HTML:n kehityksestä olivat pääasiallisessa vastuussa CERN ja IETF.o HTML:stä julkaistiin useita korjailtuja ja tarkistettuja versioita.

• 1995‐1998: HTML 3.0 ‐ HTML4 o 1994 vastuu HTML‐kielen ylläpitämisestä ja kehittämisestä siirtyi W3C:lle o W3C kehittää ja julkaisee www‐tekniikoihin liittyviä standardeja (recommendations)

• 1998‐2004: XHTML, DOM Level 1‐3o XHTML‐version julkaisemisen jälkeen W3C päätti lopettaa HTML:n kehitykseno aloitti XML‐pohjaisen XHTML kielen kehittämisen: HTML4 toteutettiin XHTML:llä vuonna 2000 (XHTML1.0)o W3C ryhtyi kehittämään uutta HTML:n ja XHTML1.0 kanssa yhteensopimatonta XHTML2.0‐kieltä.o osa selaintoimittajista alkoi kehittää HTML:ään pohjautuvia tekniikoita (DOM Level 1, DOM Level 2 Core ja DOM Level 2 HTML)o tämä kehitystyö hiipui vähitellen.

• 2003 : XForms 1.0, WHATWGo W3C julkaisi 2003 XML‐pohjaisen lomakkeiden kuvailukielen, XFormsino kehitysprojekteissa tuotettiin lähinnä uusia www‐tekniikoita (kuten esim. RSS, Atom) – eivät korvanneet HTML:ääo kiinnostus HTML:n jkehittämiseen heräsi jälleen: Mozilla ja Opera tekivät 2004 W3C :lle yhteistyöehdotuksno ehdotus torjuttiin (W3C strategia oli kehittää uutta XHTML versiota) o Mozilla, Opera ja Apple perustivat WHATWG‐yhteisön (Web Hypertext Application Technology Working Group) o WHATWG perusperiaatteet: uuden merkkauskielen

(1) tulee olla taaksepäin yhteensopiva HTML:n, XHTML:n ja DOM 2 Level ‐tekniikoiden kanssa, (2) toteutusten ja spesifikaatioiden tulee vastata toisiaan (vaikka se tarkoittaisi spesifikaation muuttamista) ja (3) spesifikaatioiden tulee olla niin yksityskohtaiset että sillä voidaan taata selainten yhteentoimivuus.

• 2006 : HTML5, DOM4o 2006 W3C liittyi WHATWG‐yhteisöön kehittämään HTML5‐kieltä, 2007 perusti siihen tarkoitukseen työryhmäno XHTML 2.0 kehitystyö lopetettiin o joulukuussa 2012 julkaisema HTML5 Candidate Recommendationo selainten uudet versiot totettavat varsin hyvin kielen uudetkin piirteet o takuu taaksepäin yhteensopivuudesta tekee HTML5:n käyttämisestä houkuttelevaa ja turvallistao DOM4 kehityksen alla


• HTML‐tulkit o tunnistavat dokumentissa määritellyt elementit

o jäsentävät dokumentin DOM‐puuksi(DOM = Document Object Model).

• DOM‐puu o solmujen hierarkiao juurisolmu <DOCTYPE html>o solmuhierarkia: äiti / lapsi ‐suhteetoheisessa (yksinkertaistetussa) esimerkissä- elementin <h1> äiti on <body> - ementillä <head> on lapsi <title>- elementillä <h1> on kaksi <p>‐sisarusta.

o oleellista ymmärtää varsinkin siinä vaiheessa, kun lähdetään tekemään dynaamisia www‐sivuja

o auttaa kuitenkin myös staattisten HTML‐sivujen rakentamista, määritettäessä www‐sivun ulkoasua CSS‐sääntöjä käyttäen (esim. ominaisuuksien perinnän ymmärtämisessä)


JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto

•CSS (Cascading Style Sheet) okieli, jonka avulla määritellään www‐sivun ulkoasu

o selaimilla oletustyylit elementtien näyttämiseen www‐sivulla

onäitä oletustyylejä voi muuttaa omilla CSS‐säännöillä

•CSS‐säännöt näyttävät tältä:ootsikossa käytetyn kirjasintyyppi muutetaan punaiseksi, päätteettömäksi San Serif –fontiksi

okappaleiden tekstin isommaksi ja kappaleiden taustan vaalean vihreäksi

h1 { font‐family: helvetica, arial rounded, sans‐serif;

color: red; } p { background‐color: lightgreen; font‐size: large; }

3/27/2014

JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/27/2014

<!DOCTYPE HTML> <html lang="fi"> <!‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ otsikko‐osa ‐‐> <head><meta charset = "UTF‐8" /><title>hTML:n ja CSS:n yhteispeli</title>

</head> <!‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ runko‐osa ‐‐> <body><nav> <!‐‐ lista, tehdään tästä tyylien avulla menu ‐‐‐‐‐‐‐‐‐ ‐‐>

<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> <!‐‐ Sivun varsinainen sisältö ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐‐><h1>HTML+CSS kokeilu</h1><p>

Tämä on ensimmäinen kokeiluni siitä miten HTML ja CSS toimivat yhdessä. Aluksi kirjoitetaan HTML‐dokumenttiin vain sivun sisältö ja sen rakenne. Määritellään ulkomuotoon liittyvät seikat sitten erikseen CSS‐säännöillä.

</p><img src="img/w3c.png” alt=”W3C logo” /><h2>Kuvat www‐sivulla</h2><p>

Otetaan tähän mukaan yksi kuvakin, jotta nähdään saman tien, miten kuvien liittäminen sivulle tapahtuu.</p><h2>Linkit www‐sivulla</h2><p>

Navigointiosassa on linkkejäkin, vaikka ne eivät nyt johda mihinkään kun noita vastaavia sivuja ei ole luotu.</p><!‐‐ On hyvien tapojen mukaista liittää mukaan allekirjoitus ja päiväys ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐‐><footer> Aulikki Hyrskykari, luotu 10.3.2012 (viimeksi muokattu 7.3.2014) </footer>

</body></html>

http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐a.html

o kommentit <!– ei saa sisältää kahta tavuviivaa peräkkäin ‐‐>

o HTML5‐dokumenttityyppi: <!DOCTYPE html>

o otsikko‐osa / runko‐osa

o lista <ul> ‐elementin avulla, jolle määritelty luokka‐attribuutti: class=“navipalkki”

o linkin määrittely <a>‐elementin avulla

o <nav>‐elementti (HTML5)

o <footer>‐elementti (HTML5)

o www‐sivuna, selaimen oletusmuotoiluilla: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐a.html

o miten saadaan dokumentti näyttämään tältä:http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐j.html


o CSS‐säännöt sisältävä tiedosto kirjoiteaan omaksi .css‐tyyppiseksi tekstitiedostokseen (02‐01‐b.css)

o html‐tiedoston alussa <link> ‐elementti määrittää sivuun liitettävän css‐tiedoston

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐b.html


@charset "UTF‐8";

/* LISÄTÄÄN TEKSTILLE JA SIVUN TAUSTALLE VÄRIT */

body {

color: #ba55d3;

background‐color: #ffefd5;

}

o kelluttamalla elementtejä voi siirtää horisontaalisessa suunnassa ‐ asetetaan "kellumaan vasemmalle”

kuva siirtyy dokumentin vasempaan reunaan ja sen lisäksi muu dokumentin sisältö kuvan jälkeen kiertää kuvan ympäri.

o tässä tapauksessa tämä tekstin kiertyminen kuvan ympärille on säännön ainoa vaikutus, koska kuva oli jo valmiiksi sivun vasemmassa reunassa

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐c.html


/* MÄÄRITELLÄÄN, KUVA "KELLUVAKSI" VASEMPAAN REUNAAN */

img {

float:left;

margin: 1em;

}

o kuvan paikka elementtivirrassa (document flow) on ensimmäisen kappaleen jälkeen ja ennen otsikkoa Kuvat www‐sivulla.

o koska kuva on noiden molempien elementtien ulkopuolella, se varaa www‐sivulta oman rivinsä. Jos se olisi kappaleen tai otsikon sisällä, sitä käsiteltäisiin kuten yhtä merkkiä elementtivirrassa, silloin se kuitenkin suurentaisi tekstin rivivälin oman korkeutensa mukaiseksi.

o määrittää, että dokumentissa käytettävä kirjasinperhe on Georgia, paitsi että otsikoissa käytetään Geneva‐kirjasinperhettä.

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐d.html


/* RUNGOSSA KÄYTETÄÄN SERIF ja OTSKOISSA SAN‐SERIF ‐KIRJASINTA */ body { font‐family: Georgia,"Times New Roman", Times, serif;

}

h1, h2 {

font‐family: Geneva, Helvetica, Arial, SunSans‐Regular, sans‐serif;

}


o absoluuttinen sijoitus ottaa elementin pois elementtivirrasta ja asettaa sen määrättyyn kohtaan sivulla

o kiinnitetään lista sivun vasempaan yläkulmaan

o piirtyy määrättyyn kohtaan riippumatta siitä onko siinä kohdassa jotain muutakin sivun sisältöä

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐e.html

/* LISTALLE ABSOLUUTTINEN SIJOITUS SIVUN VASEMPAAN REUNAAN */

ul.navipalkki {

position: absolute;

top: 2em;

left: 1em;

width: 9em;

}


o rungolle annettu sääntö jättää kaikkien elementtien vasempaan reunaan tyhjää tilaa 11 kirjasinkorkeuden verran

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐f.html

/* SIIRRETÄÄN KAIKKIA ELEMENTTEJÄ OIKEALLE */

body {

padding‐left: 11em;

font‐family: Georgia, "Times New Roman", Times, serif;

.

.

.


o poistetaan listan riveiltä ”oletusbulletti”

o navigointipalkin ympärille ei jätetä automaattisesti tilaa

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐g.html

ul.navipalkki {

list‐style‐type: none;

padding: 0;

margin: 0;

.

.

.


o poistetaan listan riveiltä ”oletusbulletti”

o navigointipalkin ympärille ei jätetä automaattisesti tilaa

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐g.html

ul.navipalkki {

list‐style‐type: none;

padding: 0;

margin: 0;

.

.

.


o listarivin tausta valkoiseksi

o jätetään painikkeiden ylä‐ ja alapuolelle tilaa

o suurennetaan elementin varaamaa aluetta joka suunnasta

o piirretään elementin oikeanpuoleinen reunaviiva värillisenä ja vahvennettuna näkyviin

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐h.html

ul.navipalkki li {

background‐color: white;

margin: 0.5em 0;

padding: 0.3em;

border‐right: 1em solid #c71585;

}


o poistetaan alleviivaus linkeistä

o määriteltään niiden kirjasin paremmin sivulle sopivaksi

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐i.html

ul.navipalkki a {

font‐family: Geneva, Helvetica, Arial, sans‐serif;

text‐decoration: none;

font‐weight:bold;

color: #c71585;

}


o alaviitteelle päätteetön, muuta tekstiä pienempi kirjasin

o piirretään ohut pisteviiva sen yläpuolelle, ei kuitenkaan ihan kiinni piirrettyyn pisteviivaan

o ks. www‐sivuna: http://www.sis.uta.fi/~jwt/14/esim/02‐01‐html‐plus‐css‐j.html

footer {

font‐family: sans‐serif;

font‐size: 0.8em;

border‐top: thin dotted;

padding‐top: 1em;

text‐align: right;

}


[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 lopuksio kaikilla elementeillä on alkutunnus

o ei‐tyhjillä (non‐void) elementeillä tulee aina olla lopputunnus

o tyhjätkin elementit on suositeltavaa päättää kauttaviivalla <br />


• Alku‐ja lopputunnuksen väliin jäävä osa muodostaa elementin sisällön (content)

• Elementti voi sisältää o tekstiä

o elementtejä tai

o Kommentteja

• 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ä), esim.< = < tai < (kulmasulku) ä = ä tai ä & =& tai & (ja‐merkki) välilyönti =

o ks täydellinen listaus erikoismerkeistä (entity) characters:

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 10o binäärilulukujärjestelmä (kantaluku 2) , oktaalijärjestelmä (8), heksadesimaalilukujärjestelmä (16)

• Heksadesimaaliluvuto lukujä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


1x162+11x161+1x160 = 433

3858/16 = 241, jää 2241/16 = 15, jää 115/16 = 0, jää 15 F

B

• 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 luokitteleeelementit hienojakoisemmin

• Luokat ovat päällekkäisiä, ts.yksi elementti voi kuuluauseampaan luokkaanks. 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 elementin (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 attribuuttio 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 title‐attribuutti) 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♦

13.3.2014 aulikki hyrskykarijwt/14/luennot/luento2.pdf · 2014-03-27 · • xhtml 1.0 on...

Documents