T-106.1061 Tietotekniikan työkurssi Luento 8. T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 2 Luennon sisältö ja tavoitteet hypertekstillä uudenlaisia.

Esitys aiheesta: "T-106.1061 Tietotekniikan työkurssi Luento 8. T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 2 Luennon sisältö ja tavoitteet hypertekstillä uudenlaisia."— Esityksen transkriptio:

1 T-106.1061 Tietotekniikan työkurssi Luento 8

2 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 2 Luennon sisältö ja tavoitteet hypertekstillä uudenlaisia rakenteita HTML-koodin perusrakenteet keinoja WWW-sivujen tekoon ymmärrät, mistä WWW-sivut koostuvat tiedät, HTML:n avulla kirjoitetaan yksinkertaisia WWW- sivuja Tyylien käyttö HTML-sivuissa osaat suunnitella omia WWW-sivuja Internetiin

3 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 3 World Wide Web Yksi monista Internetin sovelluksista Yhdistää tekstiä, kuvia ja linkkejä hyperteksti-dokumentiksi – Linkki osoittaa toiseen dokumenttiin, joka voi sijaita samalla tai toisella palvelimella Voi myös sisältää liikkuvaa kuvaa, ohjelmistojen käyttöliittymiä jne. Dokumentit kirjoitetaan HTML-kielellä – HyperText Markup Language – Perustuu SGML-kieleen (Standard Generalized Markup Language) – Kuvaa dokumentin rakenteen WWW-selainohjelmisto tulkitsee HTML-koodin ja valitsee rakennetta vastaavan esitystavan – Nykyään HTML-kieltä käytetään myös ulkoasun ohjaamiseen

4 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 4 W3C - konsortium http://www.w3.org/ Kansainvälinen yhteisö, joka kehittää standardeja mahdollistaakseen WWW:n pitkän aikavälin kasvun. Kenen tahansa on mahdollista osallistua ryhmiin, keskusteluihin ja vaikuttaa blogeihin. Tavoitteena WWW:n potentiaalin täysi hyödyntäminen. Varmasti oikeaoppiset tutoriaalit html:ään, XML:ään ja CSS:ään

5 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 5 Hyperteksti on WWW-sivun perusta WWW perustuu hypertekstiin – mistä tahansa osasta dokumenttia voidaan hypätä minne tahansa muualle dokumenttiin tai toiseen dokumenttiin linkkien avulla – mahdollistaa dynaamisen dokumenttirakenteen – linkit voivat olla myös tiedostoja kuten kuvia, ääniä, animaatioita, videoita jne. Lisää ominaisuuksia esimerkiksi: – Java – JavaScript – PHP (PHP: hypertext prepocessor) – ASP (Active Server Pages) HTML-kuvauskieli (Hypertext Markup Language) – CSS-tyylit (Cascading Style Sheets) XML-kuvauskieli (Extensible Markup Language)

6 Kalvo 6T-106.1061 Tietotekniikan työkurssiLuento 8 World Wide Webin rakenne

7 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 7 Internetin ohjelmistokerrokset Sovelluskerros: Muodostaa viestin ja osoitteen Kuljetuskerros: Jakaa viestin paketeiksi Verkkokerros: Hoitaa reitityksen internetin halki Linkkikerros: Hoitaa varsinaisen pakettien kuljetuksen Sovellus Kuljetus Verkko Linkki (TCP) (IP)

8 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 8 WWW -sivun osoite: URL Universal Resource Locator Osoite tiedon sijaintipaikkaan – protokolla://palvelin[:portti]/polku/tiedosto.html – protokolla://palvelin[:portti]/polku/ Esimerkiksi – http://www.tkk.fi/ – news://sfnet.harrastus.retkeily – ftp://ftp.funet.fi/rfc/ WWW-selainohjelma käyttää URL-osoitteita noutaakseen dokumentteja verkosta

9 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 9 HTTP:// ? HTTP on yksinkertainen yhteyskäytäntö tiedostojen kopioimiseksi tietoverkossa Asiakas (selain) avaa istunnon ottamalla yhteyden palvelimeen – Pull-tyyppinen yhteyskäytäntö, palvelin ei lähetä tietoa omaaloitteisesti Asiakas antaa GET-käskyn noutaakseen nimetyn tiedoston palvelimelta – Ohessa siirtyy muuta tietoa, kuten asiakasohjelman tunniste, tietoa käytettävistä tietomuodoista jne. Palvelin lähettää oheistietoa tiedostosta ja itse tiedoston sisällön – Tiedosto voi olla HTML-dokumentti, kuva tai muuta tyyppiä, tämä kerrotaan otsaketiedoissa – Tiedosto voi olla myös ohjelman luoma

10 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 10 TKK:n opiskelijoiden omat webisivut TKK:n sivut sijaitsevat WWW-palvelimella jokainen käyttäjä voi tehdä omia www-sivuja sivut pitää tallettaa hakemistoon ~tunnus/public_html aloitussivun nimeksi tulee index.html hakemistoille ja tiedostoille tulee antaa oikeat suoritusoikeudet

11 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 11 HTML-kuvaus-/merkintäkieli (Hypertext Markup Language) WWW-sivut on kirjoitettu tekstipohjaisella HTML-kielellä perustuu SGML:ään ja on helppo oppia ei alunperin ulkoasun tarkkaa määrittelyä – kaupalliset sovellukset muokanneet tarkemmaksi HTML 2.0, HTML 3.0, HTML 4.0, HTML 5.0... yhtenäinen sovittu standardi, jota selaimet tukevat selainvalmistajien omat laajennukset tukee tekstiä, kuvia, animaatiota, videota ja ääntä

12 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 12 Extensible Markup Language (XML) Yleiskäyttöinen määrittely kustomoitujen merkkauskielien määrittelyyn Extensible: käyttäjät voivat luoda omia elementtejään Mahdollistaa rakenteisen tiedon jakamisen (esim internetissä) Polveutuu SGML:stä (Standard Generalized Markup Language) Suhteellisen helppolukuinen kieli Semanttinen kieli → Semanttinen web

13 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 13 XML:n käyttö C minor 2/4 egth egth G, egth G, egth G hlf E

14 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 14 Standard Generalized Markup Language (SGML) SGML on yleinen standardi, joka on luotu sähköisten dokumenttien kirjoittamiseen rakennekuvaus-/merkkauskieli, joka määrää dokumentin rakenteen yleensä kaikki dokumenttien käsittelyohjelmat noudattavat tätä standardia – tekstinkäsittelyohjelmat – sivuntaitto-ohjelmat – HTML ja XML mahdollistaa dokumenttien siirron järjestelmien välillä eräs edellytys tietoyhteiskunnan synnylle

15 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 15 Selain tulkitsee HTML-koodia selaimen avulla pystyt lukemaan WWW-sivuja – perusidea: sisällön tallettaja tallettaa rakenteen HTML:llä ja ulkoasun kuvauksen CSS:llä ja käyttäjän selain tulkitsee miten sivu näytetään – nykyään yhä useammin sisällön omistaja haluaa sivun näkyvän tietyllä tavoin hyvä noudattaa mahdollisimman tarkasti HTML- määrityksiä – validointi – validaattorit eli tarkastajat

16 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 16 Omat kotisivut World Wide Webiin oma kotisivu on käyntikorttisi maailmalle kotisivujen kautta voidaan hakea mitä erilaisempaa tietoa sinusta – on syytä olla aina ajan tasalla jos kotisivuja ei jatkuvasti yllä- pidetä, kannattaa siellä olla vain pysyvää tietoa tarkempia ohjeita TKK:n www-sivuilta – http://www.tkk.fi/WWW/Kotisivut/

17 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 17 HTML -Demo Selainotsikko Sivun otsikko --> Jatkuu

18 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 18 HTML:n syntaksi rakenteet ilmoitetaan HTML:ssä tagien avulla aloitustagi (tuntomerkki) lopetustagi vastaavat Wordin tyylejä tagien avulla luodaan – otsikkorakenteet – listat – tavalliset kappaleet – hypertekstihypyt esimerkki: kappale …sisältö… (paragraph)

19 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 19 HTML-sivun perusrakenne … … DTD =document type definition W3C=World Wide Web Consortium Tietoa dokumentista, esim ’author’, ’keywords’, ’copyright,..’ Sivun varsinainen näkyvä osa Sivun määrittelyjä ja infoa

20 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 20 Otsikkorakenne otsikkorakenne luodaan WWW:ssä tagien avulla – …

21 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 21 Kappaleen määrittely kappale alkaa aloitustagilla päättyy lopetustagiin tekstin sijainti kappaleessa – … pakotettu rivinvaihto kappaleen sisällä sanan ohjattu katko valmiiksi määritelty muotoilu …

22 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 22 Poikkiviiva WWW-sivuun voidaan laittaa rakennetta havainnollistavia poikkiviivoja toteutetaan -tagilla erilaisia muotoiluvaihtoehtoja – sijainti – paksuus – leveys – suhteellinen leveys – ilman tehostusta

23 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 23 Listat valittavana useita listatyyppejä listatyyppi ja List Item – listatyyppi (alku- ja lopputagi) – List Item jokaisen listan alkion alkuun Unordered list (järjestämätön) – Bullet Type: Ordered list (järjestetty) – numerointityyppi: – aloitusnumero: muut: Defination List (dl, dt), Menu List (menu) ja Directory (dir) verrattavissa Wordin lista-tyyleihin

24 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 24 Erityismerkit muut erityismerkit – on > – & on & – " on &quot ; – © on © – ® on ® – ™ on ™ näkymättömät kontrollimerkit – (vastaa Officen SHIFT-ENTER) Merkki voidaan aina esittää &#[ISO-Latin 1 - numero]; ¥  © ¿

25 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 25 Esimerkkejä erityismerkeistä tab  ÐÐÐ ¡¡¡ÑÑÑ ¢¢¢ÒÒÒ £££ÓÓÓ Kattava listaus löytyy David Raggetin tutoriaalista. Googlaa W3 konsortiumin alta.

26 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 26 Taulukot taulukko … rivin lisääminen … (table row) solun lisääminen … (table data) taulukon muotoilu – reunaviivat: – solujen väli: – leveys: – suhteellinen leveys: muita ominaisuuksia – taulukkojen otsikko: -tagi (table heading) – rivien ja sarakkeiden määrä

27 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 27 Taulukkojen käyttö Vain taulukkomuotoisen datan esittämiseen! Sivun elementit asemoidaan CSS:llä

28 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 28 Söpöin eläin on kani, joka… Hyperlinkit perusmäärittely … (anchor, ankkuri) linkki tiettyyn paikkaan sivulla – … suhteellinen ja absoluuttinen viittaus Erityislinkkejä – … – muita

29 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 29 Kuvien liittäminen WWW-sivuihin sijoitetaan tagilla – sijoittelu: – koko: – reunukset: – tila ympärille: kuvalle vaihtoehto tekstieditoreihin / ’kuvateksti’ –

30 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 30 Sanojen korostukset Tyylin avulla käyttäjä määrää, miltä lopputulos näyttää painotus, … vahva painotus, … sitaatti, … koodi, … suositeltava tapa Muotoilemalla tekijä määrää, miltä lopputulos näytää vahvennus, … kursiivi, … alleviivattu, … Strikeout, … Subscript, … Superscript, …

31 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 31 Muut sivun muotoilukeinot keskittäminen … kirjasimen muotoilu – kirjasimen koko … – kokoa voidaan muuttaa myös + ja - – kirjasimen oletuskoko – kirjasimen väri sivun tausta ja värit – taustakuva: – taustaväri: – tekstin perusväri: – linkkien värit: perus, käyty ja aktiivinen linkki

32 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 32 Tyylit nykyään myös HTML:ää voi käyttää tekstin muotoilemiseen, mutta alunperin HTML tarkoitettiin vain tekstin rakenteen määrittämiseen – HTML:stä on kehittynyt monimutkainen ja sekava yhdistelmä rakenne- ja muotoilu-tageja tyylit antavat mahdollisuuden eristää muotoilukoodit, jotka koskevat useita eri sivuja yhdeksi tiedostoksi – tyylimuutosten tekeminen editoimalla vain tätä yhtä tiedostoa – yhtenäinen ulkoasu ja helppo päivitettävyys sisällön, rakenteen ja muotoilun looginen erottelu

33 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 33 CSS (Cascading Style Sheets) yksinkertainen tyylikieli, jolla voidaan liittää tyylimääritykset HTML-elementteihin CSS1, CSS2 CSS:n perussyntaksi muodostuu valitsimesta, ominaisuudesta ja arvosta valitsin { ominaisuus: arvo; } esim. h1{ font-family: helvetica, sans-serif }

34 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 34 Tyylin liittäminen HTML-dokumenttiin Periaatteessa useita tapoja: linkittämällä erillinen tyylitiedosto yhteen tai useampaan WWW-sivuun – tyylit määritellään erilliseen tiedostoon, joka linkitetään link-tagilla HTML-dokumentin head-osioon upottamalla tyylit yksittäiseen WWW-sivuun – style-tagilla head-osioon lisäämällä sisäisiä tyyli-määrityksiä tageihin – määritellään tyyli jollekin tietylle tekstille tai käytetään esim. span-tagia määrittelemään tyylin jollekin sanalle tai lauseelle

35 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 35 Tyylin liittäminen HTML-dokumenttiin (2) suositeltavaa käyttää erillisiä tyylitiedostoja – tyylitiedostoa voidaan käyttää usealla sivulla – helppo päivittää tai muuttaa tyyliä – erottaa tyylimäärittelyt muusta sivun sisällöstä, estää tyylejä ymmärtämätöntä selainta sekoittamasta tyylejä varsinaiseen sisältöön – kaistanleveys vaatimusten ja latausaikojen pienentäminen sisäiset määrittelyt menevät upotettujen määrittelyjen edelle ja upotetut linkitettyjen

36 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 36 Mitä tyylisäännöstöstöllä voi tehdä Voidaan EHDOTTAA elementeille lähinnä seuraavanlaisia ominaisuuksia: fontin (kirjasinlajin) tyyppi ja tyypin muunnelma (esim. lihavointi) ja koko tekstin ja taustan väri sekä taustakuvio ja sijoittelu yms. tekstin ominaisuudet kuten sanojen ja kirjainten välistys, alleviivaus, asemointi (esim. keskitys) ja rivinkorkeus (joka määrää rivivälin) marginaalien, reunusten yms. käyttö ja leveydet, värit ja muut ominaisuudet esitystapa: elementin esittäminen ns. lohkona (block), tekstin seassa (inline), listan alkiona - tai ei lainkaan!

37 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 37 Esimerkki tyylitiedostosta body{ color: black; background-color: white; font-family: Calibri, Helvetica; } h1{ font-family: Calibri, Helvetica, Ariel, Sans-Serif; font-size: 18px; color: #660066; text-transform: capitalize; text-align: center; } a:link{ color: navy; font-weight: bold; } ul{ list-style-type: circle; margin-top: 0em; margin-bottom: 0em; }

38 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 38 Esimerkki tyylitiedoston linkittämisestä Selainotsikko

39 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 39 Muuta WWW-sivuista Jos teet isompia kokonaisuuksia, käytä tyylisivuja (huom: harjoitustyössä pakollista) – Linkkaus head –osiossa esim: – Tyylitiedostossa (esim tyyli.css) määritelty erilaisia tyylejä Kommentit Lomakkeet – Forms (Ks. esim. kurssin kotisivu)

40 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 40 HTML:n luonnin vaihtoehdot Editoida HTML-editorilla Kirjoittaa käsin Kääntää ohjelmasta Generoida jollain muulla tavoin (esim Java, JavaScript, Perl, PHP jne..)

41 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 41 Office-sovellukset ja HTML Save as html… Koodi voi olla kauheaa

42 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 42 Lisätietoja ja niksejä HTML:ään Internetistä löytyy useita sivuja, jotka antavat apua WWW-sivujen tekemiseen – HTML-standardi: http://www.w3.org/http://www.w3.org/ kattavat määrittelyt ja ohjeet löytyy myös alkeisoppaita, opastusta tyylisivuihin ja JavaScriptiin – Korpelan kotisivu: http://www.cs.tut.fi/~jkorpela/webjulk/http://www.cs.tut.fi/~jkorpela/webjulk/ – Googlettamalla HTML-opas löytyy vaikka mitä tekemällä oppii

43 Kalvo 43T-106.1061 Tietotekniikan työkurssiLuento 8 Kiitos kaikille kurssille osallistuneille!

44 T-106.1061 Tietotekniikan työkurssiLuento 8Kalvo 44 Kysymyksiä