Aulikki Hyrskykari Antti Sand

HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien lukittelu ja sisältömallit

<!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>ensimmäinen kkeilu</title> </head> <bdy> <h1>www-sivun luminen</h1> <p> Harjitellaan tällä sivulla ensin, mitkä vat HTML-dkumenttiin vaadittavat sat minimissään. </p> <p> Html-dkumentti sisältää aina head- ja bdy-elementit, edellisessä kuvataan dkumenttiin liittyviä yleisempiä asiita ja jälkimmäiseen kirjitetaan sivun varsinainen sisältö. Tämän dkumentin head-elementtissä n määritelty dkumentin tallennuksessa käytettävä merkistökdaus (meta charset...) ja dkumentin nimi (title). Bdy-elementissä n annettu yksi ensimmäisen tasn tsikk (h1) ja kaksi kappaletta (p). </p> </bdy> </html> Selain esittää dkumentin ymmärrettävässä ja havainnllisessa mudssa: http://www.sis.uta.fi/~jwt/14/esim/01-01-ensimmainen-sivu.html HTML5-määrittely määrittelee kielen syntaksin + aiempaa tarkemmin miten selainten tulee esittää erilaiset kielen elementit käyttäjälle () Selainten kehitystyökalut sivun kdin tutkimisessa

HTML:ää alettiin sveltaa suunniteltua mnimutisempaan käyttöön Uudet HTML-määrittelyt eivät pysyneet takaamaan dkumenttien yksiselitteistä jäsentämistä ja tulkintaa eri selainvalmistajille alki kehittyä mat tulkintansa HTML-kielestä Sivustjen kehittäjät jutuivat jk käyttämään vain niitä HTML-elementtejä, jtka testasivat timiviksi kaikissa selaimissa, määrittämään, että sivust timii vain tiety(i)llä selaimilla tai kirjittamaan sivuststaan useampia versiita eri selaimille. W3C:ssä nähtiin tarpeelliseksi kehittää HTML:lle paremmin verkksvelluksiin spiva krvaaja syntyi XML (Extensible Markup Lanaguage) meta-kieli, jnka avulla vidaan määritellä merkkauskieliä HTML ei llut uuden XML-kielen mukainen ei täyttänyt yksinkertaistettuja rakenteellisia vaatimuksia tarvittiin uusi versi HTML:stä sai nimekseen XHTML

XHTML 1.0 n lähestulkn identtinen HTML 4.1 -versin kanssa XHTML vain tiukemmin ja puhtaammin kirjitettua HTML:ää XHTML dkumentit vat valideja HTML-dkumentteja (ei päde välttämättä tiseen suuntaan) Tärkeimmät XHTML:n ja HTML:n väliset ert 1) Elementtien päättäminen (prperly clsed elements) - HTML-jäsentäjät tekevät näissä tilanteissa letuksia - Hum! Myös tyhjät elementit tulee päättää esim. <br /> 2) Elementtihierarkian eheys (prperly nested elements) - XHTML elmentit tulee lla hierarkisesti sisennettyinä - ts. viimeksi avattu elementti tulee sulkea ennen kuin sitä edeltävä elementti suljetaan 3) HTML alku- ja lpputunnisteet ja attribuutit pienin kirjaimin (lwercase tags and attributes) - elementtien alku- ja lpputunnisteet (tags) kuten myös attribuutit tulee kirjittaa pienin kirjaimin - ts. XHTML:ssä <HEAD> n väärin, ja <head> ikein. 4) Attribuutien tarkempi esitys (quted attribute values) - HTML sallii blean-tyyppisille attribuuteille "arvttmat attribuutit esimerkiksi sallitaan pelkkä blean-attribuutti checked ilman että sille annetaan arva - XHTML:ssä kaikilla atribuuteilla n ltava arv ja sen tulee lla lainausmerkeissä ts. XHTMLssä edellinen lisi väärin, sen sijaan tulisi merkitä: checked="checked" (ps. js arvn sisältyy lainausmerkki, arv suljetaan heittmerkkeihin, esim. name='jussi "Juice" Leskinen')

1990-1995: HTML 1.0 - HTML 2.0 Tim Berners-Lee julkaisi ensimmäisen suunnitelman Wrld Wide Webin tteuttamiseksi ensimmäisten viiden vuden aikana HTML:n kehityksestä livat pääasiallisessa vastuussa CERN ja IETF. HTML:stä julkaistiin useita krjailtuja ja tarkistettuja versiita. 1995-1998: HTML 3.0 - HTML4 1994 vastuu HTML-kielen ylläpitämisestä ja kehittämisestä siirtyi W3C:lle W3C kehittää ja julkaisee www-tekniikihin liittyviä standardeja (recmmendatins) 1998-2004: XHTML, DOM Level 1-3 XHTML-versin julkaisemisen jälkeen W3C päätti lpettaa HTML:n kehityksen alitti XML-phjaisen XHTML kielen kehittämisen: HTML4 tteutettiin XHTML:llä vunna 2000 (XHTML1.0) W3C ryhtyi kehittämään uutta HTML:n ja XHTML1.0 kanssa yhteen spimatnta XHTML2.0-kieltä. sa selaintimittajista alki kehittää HTML:ään phjautuvia tekniikita (DOM Level 1, DOM Level 2 Cre ja DOM Level 2 HTML) tämä kehitystyö hiipui vähitellen. 2003 : XFrms 1.0, WHATWG W3C julkaisi 2003 XML-phjaisen lmakkeiden kuvailukielen, XFrmsin kehitysprjekteissa tutettiin lähinnä uusia www-tekniikita (kuten esim. RSS, Atm) eivät krvanneet HTML:ää kiinnstus HTML:n kehittämiseen heräsi jälleen: Mzilla ja Opera tekivät 2004 W3C :lle yhteistyöehdtuksen ehdtus trjuttiin (W3C strategia li kehittää uutta XHTML versita) Mzilla, Opera ja Apple perustivat WHATWG-yhteisön (Web Hypertext Applicatin Technlgy Wrking Grup) WHATWG perusperiaatteet: uuden merkkauskielen (1) tulee lla taaksepäin yhteenspiva HTML:n, XHTML:n ja DOM 2 Level -tekniikiden kanssa, (2) tteutusten ja spesifikaatiiden tulee vastata tisiaan (vaikka se tarkittaisi spesifikaatin muuttamista) ja (3) spesifikaatiiden tulee lla niin yksityiskhtaiset että sillä vidaan taata selainten yhteen timivuus. 2006 : HTML5, DOM4 2006 W3C liittyi WHATWG-yhteisöön kehittämään HTML5-kieltä, 2007 perusti siihen tarkitukseen työryhmän XHTML 2.0 kehitystyö lpetettiin julukuussa 2012 julkaisema HTML5 Candidate Recmmendatin selainten uudet versit tteuttavat varsin hyvin kielen uudetkin piirteet takuu taaksepäin yhteenspivuudesta tekee HTML5:n käyttämisestä hukuttelevaa ja turvallista DOM4 kehityksen alla

HTML-tulkit tunnistavat dkumentissa määritellyt elementit jäsentävät dkumentin DOM-puuksi (DOM = Dcument Object Mdel). DOM-puu slmujen hierarkia juurislmu <DOCTYPE html> slmuhierarkia: äiti / lapsi -suhteet heisessa (yksinkertaistetussa) esimerkissä - elementin <h1> äiti n <bdy> - elementillä <head> n lapsi <title> - elementillä <h1> n kaksi <p>-sisarusta. leellista ymmärtää varsinkin siinä vaiheessa, kun lähdetään tekemään dynaamisia www-sivuja auttaa kuitenkin myös staattisten HTML-sivujen rakentamista, määritettäessä wwwsivun ulkasua CSS-sääntöjä käyttäen (esim. minaisuuksien perinnän ymmärtämisessä)

CSS (Cascading Style Sheet) kieli, jnka avulla määritellään www-sivun ulkasu selaimilla letustyylit elementtien näyttämiseen www-sivulla näitä letustyylejä vi muuttaa milla CSS-säännöillä CSS-säännöt näyttävät tältä: h1 { fnt-family: helvetica, arial runded, sans-serif; clr: red; } p { backgrund-clr: lightgreen; fnt-size: large; } tsikssa käytetyn kirjasintyyppi muutetaan punaiseksi, päätteettömäksi San Serif fntiksi kappaleiden tekstin ismmaksi ja kappaleiden taustan vaalean vihreäksi

<!DOCTYPE HTML> <html lang="fi">  <head> <meta charset = "UTF-8" /> <title>html:n ja CSS:n yhteispeli</title> </head>  <bdy> <nav>  <ul class="navipalkki"> <li><a href="index.html">etusivu</a></li> <li><a href="sivu2.html">tinen sivu</a></li> <li><a href="sivu 3.html">Klmas sivu</a></li> <li><a href="yhteystiedt.html">yhteystiedt</a></li> </ul> </nav>  <h1>html+css kkeilu</h1> <p> Tämä n ensimmäinen kkeiluni siitä miten HTML ja CSS timivat yhdessä. Aluksi kirjitetaan HTML-dkumenttiin vain sivun sisältö ja sen rakenne. Määritellään ulkmutn liittyvät seikat sitten erikseen CSS-säännöillä. </p> <img src="img/w3c.png alt= W3C lg /> <h2>kuvat www-sivulla</h2> <p> Otetaan tähän mukaan yksi kuvakin, jtta nähdään saman tien, miten kuvien liittäminen sivulle tapahtuu. </p> <h2>linkit www-sivulla</h2> <p> Navigintisassa n linkkejäkin, vaikka ne eivät nyt jhda mihinkään kun nita vastaavia sivuja ei le lutu. </p>  <fter> Aulikki Hyrskykari, lutu 10.3.2012 (viimeksi mukattu 7.3.2014) </fter> </bdy> </html> http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-a.html

kmmentit <! - ei saa sisältää kahta tavuviivaa peräkkäin --> HTML5-dkumenttityyppi: <!DOCTYPE html> tsikk-sa / runk-sa lista <ul> -elementin avulla, jlle määritelty lukka-attribuutti: class= navipalkki linkin määrittely <a>-elementin avulla <nav>-elementti (HTML5) <fter>-elementti (HTML5) www-sivuna, selaimen letusmutiluilla: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-a.html miten saadaan dkumentti näyttämään tältä: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-j.html

} @charset "UTF-8"; /* LISÄTÄÄN TEKSTILLE JA SIVUN TAUSTALLE VÄRIT */ bdy { clr: #ba55d3; backgrund-clr: #ffefd5; CSS-säännöt sisältävä tiedst kirjitetaan maksi.css-tyyppiseksi tekstitiedstkseen (02-01-b.css) html-tiedstn alussa <link> -elementti määrittää sivuun liitettävän css-tiedstn ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-b.html

kuvan paikka elementtivirrassa (dcument flw) n ensimmäisen kappaleen jälkeen ja ennen tsikka Kuvat www-sivulla. kska kuva n niden mlempien elementtien ulkpulella, se varaa www-sivulta man rivinsä. Js se lisi kappaleen tai tsikn sisällä, sitä käsiteltäisiin kuten yhtä merkkiä elementtivirrassa, sillin se kuitenkin suurentaisi tekstin rivivälin man krkeutensa mukaiseksi. kelluttamalla elementtejä vi siirtää hrisntaalisessa suunnassa - asetetaan "kellumaan vasemmalle /* MÄÄRITELLÄÄN, KUVA "KELLUVAKSI" VASEMPAAN REUNAAN */ img { } flat:left; margin: 1em; kuva siirtyy dkumentin vasempaan reunaan ja sen lisäksi muu dkumentin sisältö kuvan jälkeen kiertää kuvan ympäri. tässä tapauksessa tämä tekstin kiertyminen kuvan ympärille n säännön aina vaikutus, kska kuva li j valmiiksi sivun vasemmassa reunassa ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-c.html

/* RUNGOSSA KÄYTETÄÄN SERIF ja OTSKOISSA SAN-SERIF -KIRJASINTA */ bdy { fnt-family: Gergia,"Times New Rman", Times, serif; } h1, h2 { } fnt-family: Geneva, Helvetica, Arial, SunSans-Regular, sans-serif; määrittää, että dkumentissa käytettävä kirjasinperhe n Gergia, paitsi että tsikissa käytetään Geneva-kirjasinperhettä. ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-d.html

/* LISTALLE ABSOLUUTTINEN SIJOITUS SIVUN VASEMPAAN REUNAAN */ ul.navipalkki { psitin: abslute; tp: 2em; left: 1em; width: 9em; } absluuttinen sijitus ttaa elementin pis elementtivirrasta ja asettaa sen määrättyyn khtaan sivulla kiinnitetään lista sivun vasempaan yläkulmaan piirtyy määrättyyn khtaan riippumatta siitä nk siinä khdassa jtain muutakin sivun sisältöä ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-e.html

/* SIIRRETÄÄN KAIKKIA ELEMENTTEJÄ OIKEALLE */ bdy { padding-left: 11em; fnt-family: Gergia, "Times New Rman", Times, serif;... runglle annettu sääntö jättää kaikkien elementtien vasempaan reunaan tyhjää tilaa 11 kirjasinkrkeuden verran ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-f.html

ul.navipalkki { list-style-type: nne; padding: 0; margin: 0;... pistetaan listan riveiltä letusbulletti navigintipalkin ympärille ei jätetä autmaattisesti tilaa ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-g.html

ul.navipalkki li { backgrund-clr: white; } margin: 0.5em 0; padding: 0.3em; brder-right: 1em slid #c71585; listarivin tausta valkiseksi jätetään painikkeiden ylä- ja alapulelle tilaa suurennetaan elementin varaamaa aluetta jka suunnasta piirretään elementin ikeanpuleinen reunaviiva värillisenä ja vahvennettuna näkyviin ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-h.html

ul.navipalkki a { fnt-family: Geneva, Helvetica, Arial, sans-serif; } text-decratin: nne; fnt-weight:bld; clr: #c71585; pistetaan alleviivaus linkeistä määritellään niiden kirjasin paremmin sivulle spivaksi ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-i.html

fter { fnt-family: sans-serif; fnt-size: 0.8em; brder-tp: thin dtted; padding-tp: 1em; text-align: right; } alaviitteelle päätteetön, muuta tekstiä pienempi kirjasin piirretään hut pisteviiva sen yläpulelle, ei kuitenkaan ihan kiinni piirrettyyn pisteviivaan ks. www-sivuna: http://www.sis.uta.fi/~jwt/14/esim/02-01-html-plus-css-j.html

[attribuutti= arv ] * = yksi tai useampia attrbuutti/arv pareja esim. <p lang="en"> A paragraph in English. </p> <a href="http://palvelin/tiedstplku/tiedst" target="_blank">tämä n linkki</a>

Ktelivat HTML-elementin alittavan kulmasulun "<" ja tag-nimen tai lpputunnuksessa kulmasulun, kauttaviivan ja tag-nimen välissä ei saa lla väliöntejä, esim. < p> </ p> </p > määrittelyjä ei tunnistettaisi kappaleen aluksi tai lpuksi kaikilla elementeillä n alkutunnus ei-tyhjillä (nn-vid) elementeillä tulee aina lla lpputunnus tyhjätkin elementit n susiteltavaa päättää kauttaviivalla <br /> jskin tämä n enemmän henkilökhtainen mieltymys, kuin vaatimus

Alku-ja lpputunnuksen väliin jäävä sa mudstaa elementin sisällön (cntent) Elementti vi sisältää tekstiä elementtejä tai Kmmentteja Attribuutit ja niiden arvt eivät le elementin sisältöä

Tyhjätilamerkkien (white spaces) luhistaminen välilyöntimerkit, sarkainmerkit, rivin- sivun- ja sanvaihtmerkit Sivua renderöitäessä (kkeile) peräkkäiset white space -merkit luhistetaan yhdeksi välilyönniksi rivin lppuun suva tyhjätilamerkki tuttaa rivinvaihdn HTML-dkumenttiin kirjitetussa tekstissä ei saa lla white spaces - merkkejä lukuun ttamatta muita kntrllimerkkejä Erikismerkit vidaan aina antaa jk kdeina &merkin-utf-8-kdi-heksadesimaalina; alkaa &-merkillä ja päättyy ;- merkkiin välissä jk merkin entiteettinimi tai heksadesimaalikdi (alkaa #-merkillä), esim. < = < tai < (kulmasulku) ä = ä tai ä & =& tai & (ja-merkki) välilyönti = ks täydellinen listaus erikismerkeistä (entity) characters: http://www.w3.rg/tr/2011/wd-html5-20110113/named-character-references.html tai http://www.tutrialspint.cm/html5/html5_entities.htm

Lukujärjestelmät, jissa kantalukuna jkin muu kuin 10 binäärilulukujärjestelmä (kantaluku 2), ktaalijärjestelmä (8), heksadesimaalilukujärjestelmä (16) Heksadesimaaliluvut lukujärjestelmä, jssa kantaluku n 16 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, muunnkset B - heksadesimaaliluvusta desimaaliluvuksi: (1B1) 16 = (433) 10 - desimaaliluvusta heksadesimaaliluvuksi: jaetaan lukua kantaluvulla ja tetaan jakjää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 F

Aiemmin HTML- elementit jaettiin lhktasn ja rivitasn (blckline ja inline) elementteihin lhktasn elementti erttuu ympäristöstään rivin vaihdin (esim. <p> elementti) rivitasn elementti merkkaa tekstiä kappaleen sisällä ( esim <strng> elementti) HTML5:ssä elementit jaetaan useampaan lukkaan Päälukat vat phrasing elementit (~rivitasn elementtejä) Flw-elementit (~lhktasn elementtejä)

Spesifikaati lukittelee elementit hienjakisemmin Lukat vat päällekkäisiä, ts. yksi elementti vi kuulua useampaan lukkaan ks. elementtien lukitteluluettelt HTML spesifikaatista: http://www.w3.rg/tr/html5/images/cntent-venn.svg Mihin lukittelua tarvitaan? kullekin elementille määritelty sisältömalli (cntent-mdel) kuvaa millaista sisältöä elementti vi saada, esim. - tyhjä HTML-elementti (vid element), ei mitään, - vain tietyn määrätyn elementin (määrättyjä elementtejä), - vain phrasing-sisältöä tai väljemmin - flw-sisältöä.

Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa massa kntekstissaan Yhtäsuuruusmerkin mlemmin pulin saa lla välilyönti, tai se vi puuttua. Blean tyyppinen attribuutti HTML5-syntaksin mukaan ei tarvitse antaa arva pelkkä attribuutin esittäminen vastaa sillin attribuutin "true"-arva esim. <input disabled> HML5:ssä n jukk attribuutteja, jtka vidaan sittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan glbaaleiksi attribuuteiksi.

Kielen kaikki elementeille vidaan antaa mitä tahansa näistä attribuuteista Sen lisäksi kunkin elementin määrittelyn yhteydessä määritellään erikseen mitä muita attribuutteja elementti vi saada. Jidenkin glbaalien attribuuttien merkitys (esim. titleattribuutti) saattaa lla eri elementeille määriteltynä hiukan erilainen. Glbaalit attribuutit vat: accesskey, class, cntenteditable, cntextmenu, dir, draggable, drpzne, hidden, id, lang, spellcheck, style, tabindex, title, translate