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 HTML5 elementit DOM-puu 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

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

HTML Historia ja nykypäivä HTML5 Kalvo 7

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 8

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 9

HTML5 tuki eri selaimissa Kalvo 10

HTML koodin rakenne Kalvo 11

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 12

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 13

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

DOM-puu Kalvo 15

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 16

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

DOM-puu - esimerkki Kalvo 18

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 19

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 24

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 25

<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 26

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 27

<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 28

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 29

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 30

<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 31

<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 32

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 33

HTML5 uudet rakenteelliset elementit Kalvo 34

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 35

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 36

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 37

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 38

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 39

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

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

Yksinkertaisen sivurungon rakentaminen käytännössä DEMO LUENNOLTA: http://dime.tml.hut.fi/~hmjarvi2/ Koodin näet kun valitset view source, esim. Chromessa oikea näppäin hiirestä tai view->developer->view source Kalvo 42

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

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 44

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 45

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 46

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 47

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 48

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_sheet_tags.png http://woorkup.com/wp-content/uploads/2009/12/html5-visual- Cheat-Sheet1.pdf http://media.smashingmagazine.com/wp-content/uploads/images/ html5-cheat-sheet/html5-cheat-sheet.pdf Kalvo 49

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

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