T Tietotekniikan työkurssi Luento 8
T 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
T 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
T Tietotekniikan työkurssiLuento 8Kalvo 4 W3C - konsortium 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
T 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)
Kalvo 6T Tietotekniikan työkurssiLuento 8 World Wide Webin rakenne
T 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)
T 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 – – news://sfnet.harrastus.retkeily – ftp://ftp.funet.fi/rfc/ WWW-selainohjelma käyttää URL-osoitteita noutaakseen dokumentteja verkosta
T Tietotekniikan työkurssiLuento 8Kalvo 9 ? 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
T 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
T 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 yhtenäinen sovittu standardi, jota selaimet tukevat selainvalmistajien omat laajennukset tukee tekstiä, kuvia, animaatiota, videota ja ääntä
T 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
T Tietotekniikan työkurssiLuento 8Kalvo 13 XML:n käyttö C minor 2/4 egth egth G, egth G, egth G hlf E
T 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
T 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
T 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 –
T Tietotekniikan työkurssiLuento 8Kalvo 17 HTML -Demo Selainotsikko Sivun otsikko --> Jatkuu
T 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)
T 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
T Tietotekniikan työkurssiLuento 8Kalvo 20 Otsikkorakenne otsikkorakenne luodaan WWW:ssä tagien avulla – …
T 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 …
T Tietotekniikan työkurssiLuento 8Kalvo 22 Poikkiviiva WWW-sivuun voidaan laittaa rakennetta havainnollistavia poikkiviivoja toteutetaan -tagilla erilaisia muotoiluvaihtoehtoja – sijainti – paksuus – leveys – suhteellinen leveys – ilman tehostusta
T 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
T Tietotekniikan työkurssiLuento 8Kalvo 24 Erityismerkit muut erityismerkit – on > – & on & – " on " ; – © on © – ® on ® – ™ on ™ näkymättömät kontrollimerkit – (vastaa Officen SHIFT-ENTER) Merkki voidaan aina esittää &#[ISO-Latin 1 - numero]; ¥ © ¿
T Tietotekniikan työkurssiLuento 8Kalvo 25 Esimerkkejä erityismerkeistä tab ÐÐÐ ¡¡¡ÑÑÑ ¢¢¢ÒÒÒ £££ÓÓÓ Kattava listaus löytyy David Raggetin tutoriaalista. Googlaa W3 konsortiumin alta.
T 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ä
T Tietotekniikan työkurssiLuento 8Kalvo 27 Taulukkojen käyttö Vain taulukkomuotoisen datan esittämiseen! Sivun elementit asemoidaan CSS:llä
T 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
T Tietotekniikan työkurssiLuento 8Kalvo 29 Kuvien liittäminen WWW-sivuihin sijoitetaan tagilla – sijoittelu: – koko: – reunukset: – tila ympärille: kuvalle vaihtoehto tekstieditoreihin / ’kuvateksti’ –
T 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, …
T 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
T 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
T 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 }
T 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
T 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
T 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!
T 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; }
T Tietotekniikan työkurssiLuento 8Kalvo 38 Esimerkki tyylitiedoston linkittämisestä Selainotsikko
T 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)
T 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..)
T Tietotekniikan työkurssiLuento 8Kalvo 41 Office-sovellukset ja HTML Save as html… Koodi voi olla kauheaa
T Tietotekniikan työkurssiLuento 8Kalvo 42 Lisätietoja ja niksejä HTML:ään Internetistä löytyy useita sivuja, jotka antavat apua WWW-sivujen tekemiseen – HTML-standardi: kattavat määrittelyt ja ohjeet löytyy myös alkeisoppaita, opastusta tyylisivuihin ja JavaScriptiin – Korpelan kotisivu: – Googlettamalla HTML-opas löytyy vaikka mitä tekemällä oppii
Kalvo 43T Tietotekniikan työkurssiLuento 8 Kiitos kaikille kurssille osallistuneille!
T Tietotekniikan työkurssiLuento 8Kalvo 44 Kysymyksiä