HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari

Samankaltaiset tiedostot
Validaattorit o HTML 5 validaattori: o CSS validaattori: validator/validator.html.

Aulikki Hyrskykari Antti Sand

JWT Hyrskykari, SIS, Tampereen yliopisto 3/19/2013

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Aulikki Hyrskykari Antti Sand

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

Digitaalisen median tekniikat. Luento 3: CSS

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Johdatusta selainohjelmointiin

Code Camp for Girls. Sanna Nygård. Lokakuussa

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Ulkoasun muokkaus CSS-tiedostossa

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Ulkopuolisen tyylitiedoston käyttö

Cascading Style Sheets

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

XML / DTD / FOP -opas Internal

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

CSS - tyylit Seppo Räsänen

XML, XHTML ja CSS. T Hypermediadokumentin laatiminen. Mikko Pohja

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

CSS. Tekstin muotoilua

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Ajatus kaiken taustalla

Lisätehtävät. Frantic 2015 sivu 1

2. PEHMEÄ XHTML XRAJAHTML

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

Navigointi Verkkomultimedia ICT1tn004

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

HTML5 -elementit jatkuu

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03

1. Lohkon korkeus ja leveys

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Verkkosivut perinteisesti. Tanja Välisalo

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta:

Digitaalisen median tekniikat css tyylimääritykset

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

TIEDEJUTTUKURSSI FM VILLE SALMINEN

FrontPage Näkymät

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.

Tunnuksen päivitys

Kotisivut helposti - osa 3

MITÄ JAVASCRIPT ON?...3

Kuva xhtml-sivulla. Mirja Jaakkola

HTML perusteita (ei julkiseen jakeluun)

KAPPALEMUOTOILUT. Word Kappalemuotoilut


Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Mitä direktiivi käytännössä velvoittaa?

selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

WWW-sivujen Verkkosivujen ulkoasu (CSS)

3 Verkkosaavutettavuuden tekniset perusteet

Editorin käyttö. TaikaTapahtumat -käyttöohje

Oulun yliopiston www-sivujen tekeminen

ARVO - verkkomateriaalien arviointiin

Sivuston tiedotqbooksupportpho nenumber.com

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML

Sivuston tiedotmysiteworthcheck.com

M. Merikanto 2012 XML. Merkkauskieli, osa 2

Teeman rakentaminen Wordpressiin

OPINNÄYTETYÖRAPORTTI WEB-STANDARDIT JA NIIDEN SOVELTAMINEN. Timo Sulanne Kimmo Tapala

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista

XML johdanto, uusimmat standardit ja kehitys

Sivuston tiedotpechaticentr.ru

Arvioitava työ. Antamasi pisteet. Kommenttisi työstä Aulikki Hyrskykari

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

Sivuston tiedotle-vintage.fr

QT tyylit. Juha Järvensivu 2008

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

SeaMonkey pikaopas - 1

UpdateIT 2010: Editorin käyttöohje

XML & CSS. WWW-sovellus??

Sivuston tiedotwindowsrepublic.com.au

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA

Transkriptio:

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