Verkkosivujen Rakenne (HTML)*

Verkkosivujen Rakenne (HTML)* Pinja Hokkanen Mediatekniikan laitos *Perustuu Antti Tolppasen, Pia Tukkisen ja Hannu Järvisen kalvoihin

Luennon jälkeen osaan tehdä yksinkertaiset verkkosivut sekä lisätä niihin metatietoa Kalvo 2

Sisältö Verkkosivut HTML Historia ja nykypäivä pähkinänkuoressa Koodin rakenne ja käsittely DOM-puu HTML5 elementit Yksinkertaisen sivurungon rakentaminen - Demo Semantiikka RDFa, mikrodata, mikroformaatit Yhteenveto Codecademy Kalvo 3

Verkkosivut Internetissä tai intranetissä julkaistu sivu Maailmanlaajuinen tai kohdennettu yleisö Pyörivät palvelinkoneella (kurssilla dime.tml.hut.fi) Reaaliaikaisesti saatavilla Käytetään verkkoselaimella Palvelin vastaa käyttäjän pyyntöön ja lähettää koodatun dokumentin, jonka selain muuttaa ihmiselle ymmärrettävään muotoon Asiakaspää palvelinpää http://www.cs.tut.fi/~jkorpela/webjulk/index.html Kalvo 4

Asiakaspää - palvelinpää Kalvo 5

HTML Historia ja nykypäivä HTML5 Kalvo 6

HTML ennen (ja nyt) HyperText Mark-up Language Standardoitu kuvauskieli joka määrittelee dokumentin rakenteen Otsikoita, kappaleita, listoja, taulukoita, kuvia, lomakkeita, linkkejä muihin dokumentteihin Yksinkertainen syntaksi mahdollistanut valtavan kasvun Kuka tahansa pystyy tekemään yksinkertaisen dokumentin Virheitä sallivat selaimet Ei dynaaminen ohjelmointikieli! Dynaaminen toiminnallisuus voidaan ohjelmoida sopivalla ohjelmointikielellä ja liittää osaksi sivustoa Kalvo 7

HTML5 Ensimmäinen versio julkaistu 2008 Kehittyy edelleen jatkuvasti Kokoelma inkrementaalisia lisäyksiä HTML 4:n Ei täysin uusi keksintö, vanhat sivut toimivat yhä. Selaintuki ei ole vielä täydellinen Selainriippumattomuus vaatii lisätyötä tällä hetkellä. Tulevaisuudessa käyttö yleistyy Flash ei toimi kaikissa mobiililaitteissa Samat ominaisuudet, mutta ei yksittäisen yrityksen hallinnassa. http://diveintohtml5.info/ Kalvo 8

HTML5 tuki eri selaimissa Kalvo 9

HTML koodin rakenne Kalvo 10

Tunnisteet ja elementit HTML on rakenteista tekstiä, joka koostuu tunnisteista ja elementeistä. Merkitään hakasulkeilla < ja > Tunnisteen, eli tagin avulla selain osaa näyttää sivun oikein. <html>, <h1>, <p>, jne.. Elementti tarkoittaa yhden tagin ja sen päättötagin muodostamaa kokonaisuutta. <elementti></elementti> Tagit ja elementit voivat olla sisäkkäisiä tai peräkkäisiä. TUTORIAL: http://www.quackit.com/html/tutorial/ Kalvo 11

Sisällön ja ulkoasun erottaminen Nykyisin hyvänä käytäntönä pidetään sisällön ja ulkoasun erottamista erillisiin dokumentteihin HTML = sisältö CSS = ulkoasu Lisäksi voidaan lisätä dynaamista toiminnallisuutta ja muokata koodia ohjelmoimalla Etuna helppo päivitettävyys, ulkoasu voidaan muuttaa kerralla koko sivustolle! Voidaan määritellä ulkoasuja eri mediatyypeille käyttäen samaa HTML-dokumenttia. Kalvo 12

Tyypillinen verkkosivuston rakenne HTML5:llä <header> <nav> <section> <article> <aside> <footer> Kalvo 13

DOM-puu Kalvo 14

Document Object Model (DOM) W3C:n kehittämä ohjelmointirajapinta (DOM API) valideille HTML ja XML -dokumenteille Määrittelee miten dokumenttia hallitaan, käsitellään ja muokataan Ohjelmoijat voivat rakentaa dokumentteja, navigoida rakenteessa, poistaa tai lisätä elementtejä sekä muokata niitä. Voidaan käyttää minkä tahansa ohjelmointikielen kanssa. Kalvo 15

DOM-puu DOM esittää dokumentin hierarkisena, eri tyyppisistä solmuista koostuvana puuna. Solmuilla voi olla erityyppisiä lapsisolmuja. Kalvo 16

DOM-puu - esimerkki Kalvo 17

DOM-puu - esimerkki <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <section> <h1>pääotsikko</h1> <article> <h2>ensimmäinen Aliotsikko</h2> </article> <article> <h2>toinen Aliotsikko</h2> </article> </section> </body> </html> Kalvo 18

Tehtävä: Asenna Chrome/Firefox! Sublime Text 2/Brackets WinSCP tai Cyberduck (Eclipse) https://www.google.com/intl/en/chrome/browser/ http://www.sublimetext.com/2 https://winscp.net/eng/download.php https://cyberduck.io Kalvo 23

Selainten kehitystyökalut Firefox Inspector (sisäänrakennettu tuki) Firebug (liitännäinen) Safari Developer Tools (sisäänrakennettu tuki) Chrome Developer Tools (sisäänrakennettu tuki) Kaikki selaimet Firebug Lite (JavaScript-kirjasto) Kalvo 24

Tiedostojen siirtäminen dime.tml.hut.fi palvelimelle Ohjeet: https://mycourses.aalto.fi/course/view.php?id=7398&section=6 Kalvo 25

HTML elementit ja yksinkertaisen sivurungon rakentaminen käytännössä Kalvo 26

<html> Määritellään dokumentin tyyppi Document Type Declaration (DTD) HTML5:ssä yksinkertaisempi, kuin aiemmissa versioissa <!DOCTYPE html> Not Case sensitive kuten ennen! (eli onko isot vai pienet kirjaimet) Aiemmissa HTML:n versioissa tarkempi määrittely: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.10//EN http://www.w3c.org/tr/html4/strict.dtd> HTML tagien sisään tulee koko sivun koodi. Kalvo 27

HTML4 elementit Tyylittelyyn block tyyliset elementit kuten <div> ja inline tyyliset elementit kuten <span> <div id= container > <table> </div> <p>my brother s name is <span class= namestyle >Michael</span><p> <h1>..<h6><p><b><br><table>... Lista HTML4 elementeistä: http://www.w3.org/tr/html4/index/elements.html Kalvo 28

<head> Head -tagissa määritellään dokumentin metatiedot. Title (muista aina määritellä!) Ilmoittaa sivun otsikon Näkyy selaimen yläpalkissa Metatiedot Voidaan merkitä sivulle piilotettuja tietoja Linkitetyt tiedostot Sivustoon liittyvät tiedostot, kuten css tai javascript -tiedostot Tunnisteikoni URL-kentässä / yläpalkissa näkyvä sivuston logo Kalvo 29

Metatiedot Kuvailevaa tai määrittelevää tietoa tiedosta Metatiedolla pyritään tehostamaan tietovarannon käyttöä Parantaa informaation löydettävyyttä Hakukoneet Suuri merkitys tiedon automaattisessa järjestelyssä Microformats for Google Chrome Kalvo 30

Favicon.ico tunnisteikoni Favicon (favorites icon) näkyy selaimen osoitekentässä ja usein myös taustalla auki olevan välilehden vasemmassa reunassa sekä kirjanmerkeissä. Parantaa sivuston tunnistettavuutta. Voit käyttää jotain valmista palvelua ikonin generoimiseen, kuten: http://www.favicon.cc/ Voit generoida kuvan myös sivuston logosta (isompi kuva) Koko 16 x 16 pikseliä http://www.w3.org/2005/10/howto-favicon Kalvo 31

<body> Kaikki käyttäjälle sivuilla näytettävä sisältö tulee bodytagin sisään. Rakenteen määrittely tapahtuu body-tagin sisällä. Ennen body-tagissa määriteltiin dokumentin esitysominaisuuksia. Nykyään kaikki esitysominaisuudet määritellään CSS-tiedostossa. Sivusto koostuu body-tagin sisään luotavista elementeistä. Sivustolle voidaan määritellä (yhteisiä) globaaleja tai elementtikohtaisia attribuutteja. Kalvo 32

HTML5 uudet rakenteelliset elementit Kalvo 33

HTML5 elementit - Ylätunniste <header> <header> sisältää joukon sivustoa kuvaavia elementtejä (nimi, logo, kuva) sekä mahdollisesti navigaation. <header id="banner > <div id="logo"> <img src="images/logo.png" width="250" alt= Sivuston Logo </div> <div id="headline >OTSIKKO</div> <div id="headline2">aliotsikko</div> <nav>navigaatio</nav> </header> Kalvo 34

Navigaatio <nav> <nav> elementissä esitetään sivuston päänavigaatio. Kaikkien sivun linkkien ei tarvitse olla nav-elementissä. Linkit voivat osoittaa muille sivuston sivuille, tai sivuun itseensä Päänavigaatio listamuodossa. <nav> <ul> <li class="active"><a href="index.html">etusivu</a> <li><a href= tuotteet.html">tuotteet</a></li> <li><a href= jalleenmyyjat.html">jälleenmyyjät</a></li> </ul> </nav> Kalvo 35

Sisältö - <section> ja <article> Leipäteksti ja siihen liittyvät kuvat sijoitetaan sektioiden ja artikkelien sisään. Section-tagi yleisesti rakenteiselle sisällölle. Artikkeli-tagi on käyttökelpoinen esimerkiksi blogiteksteissä tai itsenäisissä artikkeleissa Määrällisesti monta, jäsennettävää tietoa Mahdollista tehdä hierarkisia rakenteita Sektion alisektio. Sijoiteltavissa ja jäsennettävissä vapaasti CSS:n avulla. Kalvo 36

Alatunniste <footer> Tietoa sivustosta Tekijät Tekijänoikeudet Linkki rekisteriselosteeseen Käyttöehdot Alatunniste on yleensä sama kaikilla sivuston sivuilla Yhtenäisyys Usein sivuston alalaidassa, mutta voidaan periaatteessa sijoittaa mihin tahansa. Joka sivulla samassa kohdassa Ei voi laittaa headerin tai toisen footerin sisälle. Kalvo 37

Sivupalkki <aside> <aside> -elementti kuvaa osan sivusta, jossa on välillisesti sivustoon liittyvää materiaalia. Tämäntyyppiset osiot esitetään usein sivupalkkeina painetussa materiaalissa. Esittää lohkoa joka voidaan esittää erotettuna pääsisällöstä <aside id="sidebar"> <ul> <li>kirjaudu sisään</li> </ul> </aside> Kalvo 38

Lisää HTML4 -elementtejä Kalvo 39

<img> Oman tai verkossa olevan kuvan näyttäminen sivulla Oma kuva <img src="html5.png" width="100" alt="html5 Logo"/> Verkosta linkitetty kuva <img src="http://www.w3.org/html/logo/downloads/html5_logo_512. png" width="100" alt="html5 Logo"/> Kalvo 40

Ulkopuolisen sisällön upottaminen <iframe> Esim Youtube <iframe width="560" height="315" src="https://www.youtube.com/embed/nqm84d18pqw" frameborder="0" allowfullscreen></iframe> <object> ja <embed> Esim Youtube (vanha tyyli) <object width="560" height="315 > <param name="movie" value="https://www.youtube.com/v/nqm84d18pqw? hl=en_gb&version=3"></param> <param name="allowfullscreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="https://www.youtube.com/v/nqm84d18pqw?hl=en_gb&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always allowfullscreen="true"></embed> </object> Kalvo 41

Sijoittelu mahdollista CSS:llä <header> <nav> <section> <article> <aside> <footer> Kalvo 42

http://joshduck.com/periodic-table.html

Semantiikka Semantiikka, eli merkitysoppi, tutkii esimerkiksi sanojen ja ajatusten merkitystä. Kalvo 44

Semantiikka verkossa Semanttinen web = kaikki tieto voidaan määritellä ja luokitella, sekä esittää tietoa asioiden keskinäisistä suhteista. Luokiteltu tieto on yhdisteltävissä. Dokumentit suunniteltu paremmin koneiden luettavaksi. Semanttisen webin ensimmäinen toteutus melko monimutkainen, joten se ei ole lyönyt laajasti läpi. HTML5 tukee yksinkertaisen semantiikan liittämistä sivuille. Kalvo 45

Käyttötapauksia Lisenssi Crawlerin löydettävissä, voi lukea lisenssin. Ymmärtää automaattisesti mitä sivulla saa tehdä. Useita kirjoittajia, esimerkiksi blogi tai lehti Liitä kirjoittajan tiedot Viittaa samalla kaikkiin muihinkin, älykäs hakukone voi hakea asiasanalla Ei vielä laajasti käytössä Myytävät tuotteet, Google tuottaa automaattisesti kuvan Goodrelations Kalvo 46

RDFa, mikroformaatit, mikrodata RDFa monimutkaisin, mutta myös tehokkain Toimivat kohtuullisen samankaltaisesti Tulevaisuudessa mahdollisesti yksi formaatti Selviää myöhemmin, tärkeää ymmärtää konsepti. Sanastoja: Dublin Core, DBPedia ja FOAF http://www.w3.org/tr/xhtml-rdfa-primer/ http://manu.sporny.org/2011/uber-comparison-rdfa-md-uf/ Kalvo 47

RDFa esimerkki <p xmlns:dc=http://purl.org/dc/elements/1.1/ about="http://www.example.com/books/wikinomics"> In his latest book <cite property="dc:title">wikinomics</cite>, <span property="dc:creator">don Tapscott</span> explains deep changes in technology, demographics and business. The book is due to be published in <span property="dc:date" content="2006-10-01">october 2006</span>. </p> http://en.wikipedia.org/wiki/rdfa Kalvo 48

Yhteenveto Verkkosivut HTML Historia ja nykypäivä pähkinänkuoressa Koodin rakenne ja käsittely HTML5 elementit DOM-puu Yksinkertaisen sivurungon rakentaminen Semantiikka RDFa, mikrodata, mikroformaatit Kalvo 49

Lisämateriaalia Cheat Sheets http://www.cheatography.com/davechild/cheat-sheets/htmlcharacter-entities/ http://www.addedbytes.com/download/html-cheat-sheet-v1/png/ http://www.inmotionhosting.com/img/infographics/html5_cheat_she et_tags.png http://woorkup.com/wp-content/uploads/2009/12/html5-visual- Cheat-Sheet1.pdf http://media.smashingmagazine.com/wpcontent/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf Kalvo 50

Codecademy! http://www.codecademy.com/tracks/web Kalvo 51

Kiitos! Kysymyksiä? Kommentteja? pinja.hokkanen@aalto.fi Kalvo 52