1332014 Aulikki Hyrskykari HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit
<!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ä kuvataan dokumenttiin liittyviä yleisempiä asioita ja jälkimmäiseen kirjoitetaan sivun varsinainen 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://wwwsisutafi/~jwt/14/esim/01-01-ensimmainen-sivuhtml HTML5 määrittely määrittelee o 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 tulkintaa o 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 10 on lähestulkoon identtinen HTML 41 version kanssa o o XHTML vain tiukemmin ja puhtaammin kirjoitettua HTML:ää 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 erot 1) 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 hierarkisesti sisennettyinä - 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 10 HTML 20 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 30 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 3 o XHTML version julkaisemisen jälkeen W3C päätti lopettaa HTML:n kehityksen o aloitti XML pohjaisen XHTML kielen kehittämisen: HTML4 toteutettiin XHTML:llä vuonna 2000 (XHTML10) o W3C ryhtyi kehittämään uutta HTML:n ja XHTML10 kanssa yhteensopimatonta XHTML20 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 10, WHATWG o W3C julkaisi 2003 XML pohjaisen lomakkeiden kuvailukielen, XFormsin o 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öehdotuksn o 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, DOM4 o 2006 W3C liittyi WHATWG yhteisöön kehittämään HTML5 kieltä, 2007 perusti siihen tarkoitukseen työryhmän o XHTML 20 kehitystyö lopetettiin o joulukuussa 2012 julkaisema HTML5 Candidate Recommendation o selainten uudet versiot totettavat varsin hyvin kielen uudetkin piirteet o takuu taaksepäin yhteensopivuudesta tekee HTML5:n käyttämisestä houkuttelevaa ja turvallista o 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 hierarkia o juurisolmu <DOCTYPE html> o solmuhierarkia: äiti / lapsi suhteet oheisessa (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ä wwwsivun ulkoasua CSS sääntöjä käyttäen (esim ominaisuuksien perinnän ymmärtämisessä) CSS (Cascading Style Sheet) okieli, jonka avulla määritellään www sivun ulkoasu oselaimilla 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ä: h1 { font family: helvetica, arial rounded, sans serif; color: red; p { background color: lightgreen; font size: large; ootsikossa käytetyn kirjasintyyppi muutetaan punaiseksi, päätteettömäksi San Serif fontiksi okappaleiden tekstin isommaksi ja kappaleiden taustan vaalean vihreäksi
<!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="indexhtml">etusivu</a></li> <li><a href="sivu2html">toinen sivu</a></li> <li><a href="sivu 3html">Kolmas sivu</a></li> <li><a href="yhteystiedothtml">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/w3cpng 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 1032012 (viimeksi muokattu 732014) </footer> </body> </html> http://wwwsisutafi/~jwt/14/esim/02 01 html plus css ahtml 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css ahtml o miten saadaan dokumentti näyttämään tältä: http://wwwsisutafi/~jwt/14/esim/02 01 html plus css jhtml
@charset "UTF 8"; /* LISÄTÄÄN TEKSTILLE JA SIVUN TAUSTALLE VÄRIT */ body { color: #ba55d3; background color: #ffefd5; o CSS säännöt sisältävä tiedosto kirjoiteaan omaksi css tyyppiseksi tekstitiedostokseen (02 01 bcss) o html tiedoston alussa <link> elementti määrittää sivuun liitettävän css tiedoston o ks www sivuna: http://wwwsisutafi/~jwt/14/esim/02 01 html plus css bhtml 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 kelluttamalla elementtejä voi siirtää horisontaalisessa suunnassa asetetaan "kellumaan vasemmalle kuva siirtyy dokumentin vasempaan reunaan ja sen /* MÄÄRITELLÄÄN, KUVA "KELLUVAKSI" VASEMPAAN REUNAAN */ img { float:left; margin: 1em; 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css chtml
/* 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 määrittää, että dokumentissa käytettävä kirjasinperhe on Georgia, paitsi että otsikoissa käytetään Geneva kirjasinperhettä o ks www sivuna: http://wwwsisutafi/~jwt/14/esim/02 01 html plus css dhtml /* LISTALLE ABSOLUUTTINEN SIJOITUS SIVUN VASEMPAAN REUNAAN */ ulnavipalkki { position: absolute; top: 2em; left: 1em; width: 9em; 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css ehtml
/* SIIRRETÄÄN KAIKKIA ELEMENTTEJÄ OIKEALLE */ body { padding left: 11em; font family: Georgia, "Times New Roman", Times, serif; o rungolle annettu sääntö jättää kaikkien elementtien vasempaan reunaan tyhjää tilaa 11 kirjasinkorkeuden verran o ks www sivuna: http://wwwsisutafi/~jwt/14/esim/02 01 html plus css fhtml ulnavipalkki { 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css ghtml
ulnavipalkki { 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css ghtml ulnavipalkki li { background color: white; margin: 05em 0; padding: 03em; border right: 1em solid #c71585; 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css hhtml
ulnavipalkki a { font family: Geneva, Helvetica, Arial, sans serif; text decoration: none; font weight:bold; color: #c71585; o poistetaan alleviivaus linkeistä o määriteltään niiden kirjasin paremmin sivulle sopivaksi o ks www sivuna: http://wwwsisutafi/~jwt/14/esim/02 01 html plus css ihtml footer { font family: sans serif; font size: 08em; border top: thin dotted; padding top: 1em; text align: right; 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://wwwsisutafi/~jwt/14/esim/02 01 html plus css jhtml
[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 o 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://wwww3org/tr/2011/wd html5 20110113/named character referenceshtml tai http://wwwtutorialspointcom/html5/html5_entitieshtm
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 B - heksadesimaaliluvusta 1x16 2 +11x16 1 +1x16 0 = 433 desimaaliluvuksi: (1B1) 16 = (433) 10 - desimaaliluvusta heksadesimaaliluvuksi: jaetaan lukua kantaluvulla ja otetaan 3858/16 = 241, jää 2 jakojäännökset talteen: 241/16 = 15, jää 1 (3858) 10 = (F12) 16 15/16 = 0, jää 15 F 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://wwww3org/tr/html5/images/content vennsvg 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 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