Verkkosivujen Rakenne (HTML)*

Transkriptio

1 Verkkosivujen Rakenne (HTML)* Hanna Hämäläinen 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 2

3 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

4 Verkkosivut Internetissä tai intranetissä julkaistu sivu Maailmanlaajuinen tai kohdennettu yleisö Pyörivät palvelinkoneella 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 HTML 5 HyperText Mark-up Language Standardoitu kuvauskieli joka määrittelee dokumentin rakenteen Otsikoita, kappaleita, listoja, taulukoita, kuvia, lomakkeita, linkkejä muihin dokumentteihin Selaintuki ei ole vielä täydellinen (IE) Selainriippumattomuus vaatii lisätyötä tällä hetkellä. Selaintukea voi testata caniuse.com html5test.com Kalvo 6

7 HTML koodin rakenne Kalvo 7

8 Tunnisteet ja elementit HTML on rakenteista tekstiä, joka koostuu tunnisteista ja elementeistä. Merkitään kulmasulkeilla < 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. <tag>...</tag> Tagit ja elementit voivat olla sisäkkäisiä tai peräkkäisiä. TUTORIAL: Kalvo 8

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

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

11 DOM-puu Kalvo 11

12 Document Object Model (DOM) Tapa kuvata rakenteisen dokumentin, kuten HTML:n rakenne hierarkisena puuna 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 12

13 DOM-puu - esimerkki Kalvo 13

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

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

20 Tehtävä: Asenna Chrome/Firefox! Sublime Text 2/Brackets/Atom Kalvo 20

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

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

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

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

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

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

27 <body> Kaikki käyttäjälle sivuilla näytettävä sisältö tulee body-tagin 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 27

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

29 HTML5 uudet rakenteelliset elementit Kalvo 29

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

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

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

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

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

35 Lisää HTML4 -elementtejä Kalvo 35

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

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

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

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

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

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

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

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

44 Lisämateriaalia Cheat Sheets r-entities/ et_tags.png at-sheet1.pdf ml5-cheat-sheet/html5-cheat-sheet.pdf Kalvo 44

45 Codecademy! Kalvo 45

46 Kiitos! Kysymyksiä? Kommentteja? Kalvo 46