Verkkosivujen Rakenne (HTML)*

Transkriptio

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

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

3 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

4 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ää Kalvo 4

5 Asiakaspää - palvelinpää Kalvo 5

6 Tiedostojen siirtäminen dime.tml.hut.fi palvelimelle Ohjeet: Kalvo 6

7 HTML Historia ja nykypäivä HTML5 Kalvo 7

8 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

9 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. Kalvo 9

10 HTML5 tuki eri selaimissa Kalvo 10

11 HTML koodin rakenne Kalvo 11

12 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: Kalvo 12

13 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

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

15 DOM-puu Kalvo 15

16 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

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

18 DOM-puu - esimerkki Kalvo 18

19 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

24 Tehtävä: Asenna Chrome/Firefox! Sublime Text 2/Brackets WinSCP tai Cyberduck (Eclipse) Kalvo 24

25 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

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 HTML tagien sisään tulee koko sivun koodi. Kalvo 26

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ä: Kalvo 27

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 28

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 29

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: Voit generoida kuvan myös sivuston logosta (isompi kuva) Koko 16 x 16 pikseliä Kalvo 30

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 31

32 <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=" HTML5_Logo_512.png" width="100" alt="html5 Logo"/> Kalvo 32

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

34 HTML5 uudet rakenteelliset elementit Kalvo 34

35 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

36 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

37 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

38 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

39 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

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

41

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

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

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 44

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 45

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 Kalvo 46

47 RDFa esimerkki <p xmlns:dc= about=" 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=" ">october 2006</span>. </p> Kalvo 47

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 48

49 Lisämateriaalia Cheat Sheets html5_cheat_sheet_tags.png Cheat-Sheet1.pdf html5-cheat-sheet/html5-cheat-sheet.pdf Kalvo 49

50 Codecademy! Kalvo 50

51 Kiitos! Kysymyksiä? Kommentteja? Kalvo 51