2 Internet & WWW. 2 Internet & WWW



Samankaltaiset tiedostot
3 Internet & WWW. 3 Internet & WWW

2 Internet & WWW. Internet - verkkojen verkko. Internet ja WWW. Esimerkki keskitason palvelusta: SMTP-protokolla

2 Internet & WWW. 2 Internet & WWW

3 Sivupolku: metaforat & selittäminen

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

7 4 7 G? C % "$! "# Internet on osa maailmanlaajuista sähköisen viestinnän (muita infrastruktuurin osia ovat televerkot sekä TV- ja radio

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

ATK yrittäjän työvälineenä

Mikä on internet, miten se toimii? Mauri Heinonen

T Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

3 Verkkosaavutettavuuden tekniset perusteet

Johdatus rakenteisiin dokumentteihin

2 Internet & WWW. Internet - verkkojen verkko. Esimerkki keskitason palvelusta: SMTP-protokolla. Internet ja WWW

3 WWW-hypermedian perusta: HTML

1.1 Internetistä lyhyesti. Mikä Internet on? 1.2 Maailmanlaajuinen verkko

10 Nykyaikainen WWW-arkkitehtuuri

TIEDEJUTTUKURSSI FM VILLE SALMINEN

IT-OSAAJA, TIETOJENKÄSITTELYN ERIKOISTUMISOPINNOT

ATK yrittäjän työvälineenä

XML johdanto, uusimmat standardit ja kehitys

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY

Verkkosivut perinteisesti. Tanja Välisalo

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa

HTML perusteita (ei julkiseen jakeluun)

Tyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 5 WWW-hypermedian perusta: HTML

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

W3C ja Web-teknologiat

Julkaiseminen verkossa

9 Hypermediajärjestelmistä

INTERNET-yhteydet E L E C T R O N I C C O N T R O L S & S E N S O R S

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin

W3C-teknologiat ja yhteensopivuus

Paikkatiedot ja Web-standardit

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

Selvitysraportti. MySQL serverin asennus Windows ympäristöön

TCP/IP-protokollat ja DNS

1 HTML HyperText Markup Language

Syksy MATHM Johdatus hypermediaan (3 op) Luentorunko. 1 Käytännön järjestelyt. Mitä on hypermedia?

Verkkopalveluiden saavutettavuus

W3C: teknologia ja (tieto)yhteiskunta

Hajautettujen sovellusten muodostamistekniikat, TKO_2014 Johdatus kurssiin

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Semanttinen Web. Ossi Nykänen Tampereen teknillinen yliopisto (TTY), DMI / Hypermedialaboratorio W3C Suomen toimisto

Järjestelmäarkkitehtuuri (TK081702) Web Services. Web Services

FuturaPlan. Järjestelmävaatimukset

- Jarjestelmaasiantuntija Markku Jaatinen

Laitteessa tulee olla ohjelmisto tai uudempi, tarvittaessa päivitä laite

in condition monitoring

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus

Taustaa. CGI-ohjelmointi

Tietoliikenne II (2 ov)

2. PEHMEÄ XHTML XRAJAHTML

Johdatusta selainohjelmointiin

URL-osoitteiden suunnittelu

11 Hypermediajärjestelmistä

TeleWell TW-EA711 ADSL modeemi & reititin ja palomuuri. Pikaohje

KYMENLAAKSON AMMATTIKORKEAKOULU Tietotekniikan koulutusohjelma / Tietoverkkotekniikka. Joni Korjala APACHE WWW-PALVELIN Seminaarityö 2012

ISACA Finland OWASP The OWASP Foundation. Timo Meriläinen Antti Laulajainen.

Järjestelmäarkkitehtuuri (TK081702)

M. Merikanto 2012 XML. Merkkauskieli, osa 2

1 www-sivujen teko opetuksessa

DNS- ja DHCPpalvelut. Linuxissa. Onni Kytönummi & Mikko Raussi

Tikon Ostolaskujenkäsittely versio SP1

Pertti Pennanen OSI 1 (4) EDUPOLI ICTPro

SUOMEN KUNTALIITTO Sairaalapalvelut

Palomuurit. Palomuuri. Teoriaa. Pakettitason palomuuri. Sovellustason palomuuri

CSS - tyylit Seppo Räsänen

Pertti Pennanen DOKUMENTTI 1 (5) EDUPOLI ICTPro

Code Camp for Girls. Sanna Nygård. Lokakuussa

dyntäminen rakennusautomaatiossa Jussi Rantanen Myyntipää äällikkö Fidelix Oy

Luento 12: XML ja metatieto

opiskelijan ohje - kirjautuminen

ARVO - verkkomateriaalien arviointiin

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

IHTE 1900 Seittiviestintä (syksy 2007) VERKKOTEKNIIKKAA. Mikä on protokolla, IP osoite, nimipalvelu jne ja mihin näitä tarvitaan?

VERKON ASETUKSET SEKÄ WINDOWSIN PÄIVITTÄMINEN

W3C & verkkojulkaisun standardit

Linux palomuurina (iptables) sekä squid-proxy

Regulointi, standardointi, veloitus. Yhteenveto

WELHO ADSL -LAAJAKAISTAPALVELUIDEN PALVELUKUVAUS KULUTTAJA-ASIAKKAILLE (alkaen )

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1

MITÄ JAVASCRIPT ON?...3

W3C ja alueellinen standardointi

Semanttinen Web. Ossi Nykänen. Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto

6 Hypermediajärjestelmistä

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

Tiedonlouhinta rakenteisista dokumenteista (seminaarityö)

Ctl160 Tekstikorpusten tietojenkäsittely p.1/15

DNA LAAJAKAISTA TUOTEKUVAUS

Digitaalisen median tekniikat xhtml - jatkuu

Transkriptio:

2 Internet & WWW Nykyään huomattava osa hypermediasta liittyy siis tavalla tai toisella ns. World Wide Webiin (WWW) Webin ymmärtäminen lienee siis tähdellistä Webiä käytetään hypermedian tekemiseen ensisijaisesti käytännöllisistä syistä - käyttö asiaa sen kummemmin ajattelematta, sosiaalisista syistä ( koska kaikki muutkin käyttävät") - käyttö pelkkänä tiedon välityskanavana (esim. pelkkä tiedostojen siirto yms. kommunikointi) - käyttö loogisena WWW:nä (HTML-sivut, sovelmat, CGI-palvelut, servletit yms. oikeat WWW-sovellukset) WWW ei kuitenkaan ole oma fyysinen verkkonsa tms. kaapeleiden sekamelska, vaan standardoitu Internet-verkon metaverkko - taustalla Internet-verkkoon kuuluvat fyysiset verkot ja - Internetin peruspalvelut (läh. nimipalvelut, tiedonsiirto & sähköposti) Osa Internetin toiminnoista näkyy läpi tavassa, jolla WWW toimii MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 33

Internet - verkkojen verkko Internet on osa maailmanlaajuista sähköisen viestinnän teknistä infrastruktuuria (muita infrastruktuurin osia ovat televerkot sekä TV- ja radioverkot) Internetkään ei yksi ole tietty fyysinen siirtotie (esim. kaapeliverkko), vaan lähinnä standardoitu (TCP/IP) tapa kytkeä tietokoneita tähän verkkojen verkkoon Internet rakentuu lähi, alue, jne. -verkkojen, sekä erilaisten näitä yhdistävien yhdyskäytävien varaan Internet voidaan loogisesti jakaa esim. - siirtopalveluihin eli runkoverkkoihin, - liityntäpalveluihin eli tilaajaverkkoihin ja - varsinaisiin palveluihin Tyypillisiä (varsinaisia) Internet-palveluja ovat esim. - nimipalvelut, WWW-palvelut ja FTP-palvelut, sekä - postipalvelut, listapalvelut ja uutispalvelut MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 34

Internet ja WWW Internet toimii perustana ja tarjoaa useita tietoverkkoihin liitettäviä palveluita - sähköposti, keskusteluryhmät, tietokoneiden ja ohjelmien etäkäyttö, tiedostopalvelimet (korkean tason palvelut) - WWW:n tekninen perusta ja palvelut (matalan tason palvelut) WWW:n läpimurron myötä Internet on loppukäyttäjien näkökulmasta jäänyt kulissien taakse - perinteiset Internet-palvelut sulautettu osaksi WWW-palveluita - osa Internetin ominaisuuksista on vanhentuneita Internet vs. WWW - paljaan Internetin etuna tyypillisesti pienemmät resurssivaatimukset - Internetin perinteisten sovellusohjelmien ongelmana on näiden merkkipohjaisuus ja komentokielien käyttö (tai sitten ei!) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 35

Esimerkki keskitason palvelusta: SMTP-protokolla Seuraavassa lähetetään sähköpostia SMTP-palvelun avulla: S: MAIL FROM:<Smith@Alpha.ARPA> R: 250 OK S: RCPT TO:<Jones@Beta.ARPA> R: 250 OK S: RCPT TO:<Green@Beta.ARPA> R: 550 No such user here S: RCPT TO:<Brown@Beta.ARPA> R: 250 OK S: DATA R: 354 Start mail input; end with <CRLF>.<CRLF> S: Blah blah blah... S:...etc. etc. etc. S: <CRLF>.<CRLF> R: 250 OK Huomioita: jotta hommassa olisi järkeä, vastaanottajan pitää tunnistaa mitä lähettäjältä on tulossa, SMTP ei koodaa varsinaisen asiasisällön rakennetta lainkaan (pelkkää ascii-tekstiä) -- tälle on omia protokolliaan MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 36

Mistä Internetissä oikeastaan on kyse? Internet on useista verkoista ja näihin kytketyistä tietokoneista, koneiden palveluista ja tekniikan käyttötavoista muodostuva rönsyilevä toiminnallinen kokonaisuus - standardoitua tekniikkaa ja laitteita (esim. kaapeleiden standardit, IP-os.) - yhteisesti sovittuja tiedonkoodaustapoja (esim. ASCII [ XML] & MIME) - etikettejä tiedon välittämiseen verkon eri osien välillä (esim. SMTP, FTP) - em. määritysten mukaisesti toimivia ohjelmia (esim. pine, ftp) - yleisesti tunnettuja käyttötapoja (sähköpostin käsite) Internetiä kokonaisuutena ei virallisesti omista tai hallinnoi mikään yksittäinen taho - suosituksia, standardeja (esim. IETF, W3C, Unicode, ECMA, IANA) - suurten organisaatioiden tai alan pioneerien de facto -ratkaisuja (esim. IBM, SUN, Cisco) - käyttäytymisellään äänestäviä pienempiä palveluntarjoajia ja käyttäjiä MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 37

Internetin sisältö on sekamelska kaikkea mahdollista Maailmanlaajuinen "Sana on vapaa" - palsta - sähköisen julkaisun madaltunut kynnys seurauksena harrastajien helmiä, täyttä roskaa ja jotain tältä väliltä Globaali tietokanta - yhteisöjen tietokanava & tuoreen julkisen tiedon väylä - eksoottisen tai muuten vaikeasti saatavan tiedon lähde, ilmaisten ohjelmien, karttojen, kirjojen, yms. pohjaton varasto Markkinointikanava - suora tuotemainonta, mielikuvamainonta, ideologiamainonta, poliittinen mainonta,... Pitkään Internet oli maksuton, akateeminen tai "underground" verkko, mutta Webin myötä asiat ovat muuttuneet (hyvässä ja pahassa) Uusien Internet-palvelujen luominen on periaatteessa erittäin helppoa: palvelinkoneeseen (ip) vain sopiva prosessi (portti) ja vóila! MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 38

Internetin rakenne Taustalla fyysisistä laitteista koostuva hierarkkinen järjestelmä - perustana maailmanlaajuinen verkko - valtakunnallisia verkkoja - paikallisverkkoja tai alueverkkoja - lähiverkkoja - tietokoneita: isännät (host): palvelimet ja asiakkaat) Maailmanlaajuiseen verkkoon kytkeydytään globaalien tietoyhteyksien kautta (esim. Otaniemestä Tukholmaan) Esimerkkejä: MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 39

Teleoperaattori on yhteydessä Espoon Otaniemen FICIXin (Finnish Commercial Internet exchange) kautta maailmanlaajuiseen Internet-verkkoon - teleoperaattori (esim. Song tai EUnet Finland Oy) omistaa ja ylläpitää fyysisen runkoverkon Suomen alueella - maailmanlaajuiseen verkkoon kytkeydytään globaaleja tietoyhteyksiä ylläpitävän yrityksen (esim. AT&T tai British Telecom) kautta Internet-operaattori ostaa teleoperaattorilta käyttöoikeuden tämän ylläpitämään runkoverkkoon - Internet-operaattori (esim. Saunalahti) kaupittelee tavallisille kuluttajille Internetpalveluja ja käyttöaikaa Pienkäyttäjät ottavat yhteyden Internet-operaattorin palvelimille (esim. puhelimella) ja siten edelleen Internetiin. Organisaatioilla on oma lähiverkko, joka on yhteydessä runkoverkkoon (mahdollisesti Internet-operaattorin kautta) Käytännössä maailman ääriin voi ottaa yhteyden myös ilman valtakunnallisen runkoverkon palveluita, esim. soittamalla puhelimella suoraan Japanilaiselle Internetoperaattorille; käytännössä näin ei kuitenkaan tehdä, koska puhelinlinjan käyttö moiseen tulee pöyristyttävän kalliiksi (vaikka data loppujen lopuksi liikkuisikin samaa kaapelia pitkin) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 40

Periaatekuva Internet-palveluntarjoajista Käyttäjät Organisaatioiden lähiverkot (pienet oppilaitokset, pienyritykset, jne.) TUT Yliopistot ja korkeakoulut yms. Internetoperaattorit Saunalahti Teleoperaattorit Kansainvälinen Internet-verkko Song KPNQwest FICIX FUNET Muut yhteysmuodot (esim. suorat puhelinsoitot) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 41

Internet-osoitteet ja verkkoon liittyminen Jokaisella Internetin isännällä (host, verkkoon liitetty tietokone) on yksikäsitteinen Internet-osoite eli IP-osoite - perustana 32-bittinen osoite (esim. 130.230.8.9) (IPv6 tulossa) - osoitteet jakaa kansainvälinen NIC (Network Information Center) vuodesta 1984 käytetty ns. nimipalveluita (tuloksena selväkielinen nimi, esim. matriisi.ee.tut.fi) Suomessa nimipalveluista vastaa Viestintävirasto (www.ficora.fi) Esimerkki: matriisi.ee.tut.fi fi ~ Suomen ISO-maakoodi (ns. top level domain, TLD) ee.tut ~ TUT-organisaation (hierarkinen) tunnus (oma nimipalvelu) matriisi ~ koneen nimi Maakoodien lisäksi (epämääräisessä) käytössä on USA:n verkkoaluetunnuksia - com, edu, gov, mil, net, org MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 42

IP-osoite kertoo vain koneen loogisen sijainnin Internet-verkossa - varsinaiset palvelut kohdennetaan ns. porttinumeroiden perusteella - TCP hallitsee usean yhtäaikaisen yhteyden kahden isännän välillä - yhteyden määrittää käytännössä lukunelikkö (Aip, Aport, Bip, Bport) Internet-verkkoon liittymisen voi hoitaa usean erityyppisen yhteysmuodon avulla: - kiinteät yhteydet - valinnaiset yhteydet - pääteyhteydet Kiinteä yhteys lähiverkon kautta: - kone jatkuvasti kiinni verkossa - oma pysyvä IP-osoite tai muuttuva IP-osoite DHCP:n (Dynamic Host Configuration Protocol) avulla - tiedonsiirtonopeus esim. suuruusluokkaa 10-100 Mbps MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 43

Valinnainen yhteys - modeemi tai ISDN-yhteys - yhteys muodostetaan tarvittaessa - mahdollisesti tilapäinen IP-osoite - modeemi: nopeus < 28 Kbs - ISDN: nopeus < 64/128 Kbs Pääteyhteys - tietokone toimii vanhan terminaaliyhteyden (esim VT100) tavoin - tehtävänä vain ohjata näyttö & näppäimistö keskuskoneelta terminaaliin ja päinvastoin Muita: ADSL (nopea yhteys puhelinverkon kautta ~ 2 Mbps / 512 kbps), kaapelimodeemi (kiinteä yhteys kaapeli-tv-verkon kautta ~512/128 kbps), GPRS (yhteys kannettavalla laitteella, teoreettinen yhteysnopeus 171,4 kbps) Pääteyhteysmuoto oli välillä kuolemassa pois, mutta erilaisten verkkotietokonearkkitehtuurien myötä samat ideat toistuvat uudestaan (tyypillisesti lähiverkoissa) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 44

Internetin perinteiset palvelut Palvelun perustana toimii siis Internetissä sijaitseva palvelin X, jonka kautta käyttäjät asioivat Palvelun nimi, käytetty protokolla ja palvelun toteuttava ohjelmisto sekoittuvat usein kielenkäytössä - protokolla ~ yhteisesti sovittu valituntyyppisen tiedon koodaus(kehystämis)tapa, kommunikointirajapinta ja eri osapuolien toiminnallisuus esim. ohjelmistojen välisessä tietoliikenteessä Perinteiset palvelut: - telnet (SSH) - sähköposti & news - FTP, IRC, Gopher & WAIS - pelit - WWW ~ HTTP + URL + HTML MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 45

Tyypillinen Internetin peruspalanen on lähiverkko Internet koostuu siis pienemmistä yhteen liitetyistä verkoista. Eri organisaatioiden sisäinen tietoliikenne tapahtuu yleensä paikallisen lähiverkon avulla Lähiverkon osista voidaan erottaa työasemat, palvelimet, verkkosovittimet sekä kaapelointijärjestelmä (tms. siirtotie). Lähiverkot yhdistetään reitittimillä Työnjaon motivaationa tietokoneiden käytön tehostaminen: - tiedon ja oheislaitteiden jakaminen - tietohallinnan ja ylläpidon keskittäminen Idea: MUU INTERNET ALUE- VERKKO LÄHI- VERKKO MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 46

Verkon työnjaon perusratkaisu: asiakas/palvelin -malli Asiakas/palvelin-mallissa verkon palvelut ja merkittävä osa tiedosta on keskitetty tiettyjen palvelinkoneiden hoidettavaksi Hyötynä saadaan tietoturvan, tiedon varmistamisen, päivittämisen ja tehtävien automatisoinnin helppous sekä tietoturvan ja käytön valvonnan perusratkaisut Toinen (harvinaisempi) malli on ns. peer-to-peer -malli, jossa koneet tapauskohtaisesti toimivat sekä palvelimina että asiakkaina Huomattava osa Internetin & Webin toiminnoista rakentuu asiakas/palvelin-mallin varaan - luonteenomaista sovellusten hajautunut luonne ja yhtäaikaiset käyttäjät MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 47

Internetin historiaa 1957 NL: Sputnik - USA pelkäsi joutuvansa alakynteen tiedekilvassa: ARPA (Advanced Research Projects Agency) perustetaan 1962 pakettiverkon perusideat - ei keskitettyä hallintoa - toimivuus huonoimmissa mahdollisissa olosuhteissa - verkko on epäluotettava - verkon epäluotettavuus ei saa estää verkon toimintaa - verkon solmut samanlaisia ja tasa-arvoisia - viestit jaetaan itsenäisesti reititettäviin paketteihin MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 48

1969 ARPANET - NCP-protokolla - neljä solmua 1971 e-mail - ARPANetissä 23 hostia 1972 ARPA->DARPA 1973 ensimmäiset kansainväliset yhteydet 1974 TCP-protokolla - termi Internet käytössä ensi kerran 1976 Ethernet keksitään, SATNET käyttöön 1982 EUnet (European Unix Network) perustetaan 1983 ARPANET siirtyy TCP/IP:n käyttöön 1984 ARPANET jakautuu MILNETiksi ja ARPANETiksi MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 49

1990 ARPANET lakkaa olemasta - ARPANETin vanhat 50Kbs yhteydet korvataan 1,5 Mbs -yhteyksillä (NSFNET) 1991 WAIS ja gopher 1992 CERN: WWW 1994 WWW:n räjähdysmäinen kasvu - sähköinen kaupankäynti ja pankkitoiminta alkaa 1997-nykypäivä-tulevaisuus: Internet 2 (?) - "Internet on liian tehoton" uusi nopea maailman (tai ainakin P-Amerikan ) laajuinen tietoverkko, jossa yhtymäkohtia myös vanhaan Internetiin - alusta asti suunnitelmallisempi kuin Internet (mukana yritysosapuolia) Muuta - Next Generation Internet - Mobiiliverkot yms. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 50

World Wide Web (WWW) WWW on Internet-palveluiden varaan rakentuva metaverkko, joka WWW-hypertekstin ohella tarjoaa integroidun graafisen käyttöliittymään verkon palveluihin erityistä selainohjelmaa käyttäen Näkymä Webiin rakentuu perusmuodossaan HTML-dokumenttien varaan, jotka tekstin ohella liimaavat yhteen mm. - lomakkeita ja objekteja (esim. kuvat, äänet ja sovelmat), Internet-palveluja (esim. sähköposti ja FTP) ja aitoja WWW-palveluja (CGI, Servlets, PHP, ), -...tarjoten siten saumattoman pääsyn WWW-palvelujen äärelle (esim. etäkomento tai näkymä tietokantaan) URIviittaus IP-osoite IP-osoite N WWW-palvelin WWW-asiakas MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 51

Webin kantava idea pähkinänkuoressa Internetin palvelut ja julkiset dokumentit kootaan suureksi hyperavaruudeksi Hyödynnetään Internetin alkuajoista parantuneen verkon kapasiteettia tekstin ohella myös kuvien, äänen ja videokuvan välittämiseen Internetin paikoin vaikeakäyttöiset ja kirjavat palvelut sulautetaan yhdenmukaisen & helppokäyttöisen graafisen käyttöliittymän alle Lisätään kokonaan uusia ominaisuuksia & standardeja (HTML, CSS, XML), joiden avulla mahdollista tuottaa uusia palveluita verkotetulle graafiselle perustalle Otetaan (ns. teollistuneissa maissa) suuressa mittakaavassa käyttöön ja liitetään osaksi todellista tiedottamista, markkinointia, kaupankäyntiä ja kulttuuria MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 52

Keksitään Internetiin uusia WWW:hen ja verkkoihin vahvasti suunnattuja kehitystyökaluja, tekniikoita (Java, sovelmat, ActiveX, skriptikielet) ja käyttötapoja (videokonferenssi, verkotettu yhteistoiminnallisuus) Sähköiset lehdet ilmestyvät, verkosta voi ostaa elintarvikkeita ja verkon kautta voi maksaa laskuja Verkosta löytyy jokapäiväistä tarpeellista tietoa: juna-aikatauluja, asiakastiedotteita, karttoja ja julkisia päätöksiä Verkon käyttö arkipäiväistyy kriittinen massa on saavutettu World Wide Web on syntynyt MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 53

WWW hypertekstijärjestelmänä Nykyään WWW/HTML -yhdistelmä on useimmille niin tuttu, että WWW:n voidaan sanoa toimivan hypermedian de facto referenssijärjestelmänä WWW ei kuitenkaan nykyisellään (ainakaan helposti & esim. suoraan HTMLspesifikaation muodossa) toteuta kaikkia niitä piirteitä, joita esim. Dexter hypertekstijärjestelmälle määrittelee - monensuuntaiset linkit, validi linkitys - universaali hakufunktio, Toisaalta HTML, WWW-hyperteksti sisältää ("määrittelee") muita nykyään hypertekstiin ja mediaan luonnostaan liitettäviä piirteitä & ominaisuuksia - kuvien yms. objektien liittäminen hypertekstiin - ohjelmien ja skriptien liittäminen hyperdokumentin solmuihin - hypertekstin solmujen (dokumenttien) rakenteen esittäminen elementtirakenteina - MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 54

On myös syytä huomata, että WWW kokonaisuutena ei ole varsinainen standardi - kyseessä on alati liikkeessä oleva muuttuva kokonaisuus, jonka standardeista, yleisistä sopimuksista tai käytännöistä yleensä kerralla käytetään/sovelletaan vain osaa, esim. - Yksittäisten dokumenttien & (suurelta osin rakenteettoman) hypertekstin esittäminen (HTML) - hypermedia multimediaelementtien esittäminen (kuviin, äänin & videokuvaan liittyvät standardit, kuten esim. GIF, JPG, AVI, AU, WAV & MPEG) - hyperdokumentin solmujen nimeäminen ja näihin viittaaminen linkeillä (URL) - solmujen noutaminen luettavaksi (HTTP) & HTTP-palvelinohjelmistojen ominaisuuksien hyödyntäminen (esim. index.html-tiedostonimen käyttäminen) - skriptien kirjoittaminen (ECMAScript, JavaScript, VBScript, Perl, ) - dokumenttien muokkaaminen selainten tarjoaminen ohjelmointirajapintojen läpi (DOM), jne. WWW ei oikeastaan ota tarkasti kantaa siitä, millaista hyvän hypermedian tulisi olla, vaan tarjoaa leikkijöiden käyttöön legopalikat asenteella "tässä on kaikki tarpeellinen - tee lelusi itse" MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 55

WWW:n historiaa 1980 Tim Berners-Leen ensimmäinen hypertekstiohjelma CERNille 1989 CERNille "Information Management: A Proposal" (Tim B-L) 1990 WWW-hypertekstijärjestelmä CERNin tarpeisiin 1991 ensimmäiset WWW esittelyt 1992 WWW julkaistaan (Erwise ja Viola X-asiakasohjelmat) 1993 Mosaic julkaistaan (NCSA) - vuoden loppuun mennessä yli 200 HTTP-palvelinta 1994 WWW:n suosion räjähdysmäinen kasvu - Euroopan komission tiedon valtatie -ohjelma - ensimmäinen WWW Consortium kokous 1995 WWW G7-kokouksen pääteemana, WWW:tä esitellään laajalti CERNissä tiedotusvälineille (läsnä 250 lehti-, radio- ja tv-toimittajaa) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 56

1996- - lehtien, palveluiden ja sähköisen kaupankäynnin tuleminen verkkoon - tiedon salaaminen ja käyttäjien tunnistaminen (autentikointi) - NSCA kohahduttaa suurta yleisöä salakuuntelemalla verkkoa - kirjava lainsäädäntö ja -tulkinta aiheuttaa ongelmia rikosten tulkinnassa - 2000-nykytilanne - langattomat (lähi)verkot tulevat - tammikuussa 2004 Internet-isäntien lukumäärä yli 230 miljoonaa - virtuaaliyliopisto-hankkeet käynnistyvät Suomessa - Webin käyttäjien ikärakenteen ennustetaan vanhenevan - WWW on käytettävissä myös kannettavissa laitteissa - MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 57

Webin toteutus vs. toteutuminen Hyperdokumentin perustana on Hypertext Transfer Protocol (HTTP) -protokolla ja Internetissä sijaitseva HTTP-palvelinten verkosto - kukin näistä WWW-palvelimista sisältää dokumenttihakemiston, jossa sijaitsevat tiedostot näkyvät osana Webiä - perusmuodossaan idea on se, että HTTP-palvelimet välittävät em. julkaistuja tiedostoja näitä pyytäville asiakkaille Kuvien, äänien ja videokuvan siirtämiseen käytetään standardeja, de facto - sopimuksia ja MIME-koodauksia : GIF, JPEG, WAV, AVI, MPEG,... Käyttöliittymän ja tiedon integroinnin puitteet tarjoaa asiakaspäässä suoritettava selainohjelma (esim. Internet Explorer/Mozilla/Opera/Apple Safari/Lynx) - Webissä näkyvien tiedostojen, tai yleisemmin, resurssien, sijainti (nimi) verkossa, esitystapa ja linkitys on yhteisesti sovittu - selain eli WWW-asiakas (tai agentti) pyytää WWW-palvelimelta tiedostoja ja osaa esittää ne hyperdokumenttina. Selain toteuttaa esim. linkityksen, dokumentteihin upotetut sovellukset ja paljon muuta MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 58

Hyperavaruudessa rakentaminen & surffailu toimii pääpiirteissään seuraavasti: - standardimuotoisia tiedostoja (tekstiä, kuvia, ääntä, videokuvaa, ohjelmia) kootaan yhteen nippuun HTML-kielellä kirjoitetun kuvausdokumentin avulla WWWpalvelimen dokumenttihakemiston alle - selainohjelma (asiakas) ottaa yhteyden yhteyspyyntöjä kuuntelevaan WWWpalvelimeen (ip/portti) ja pyytää tältä jotakin tiettyä WWW-dokumenttia - selainohjelma lataa kuvausdokumentin ja tähän liittyvät muut dokumentit ja ohjelmat asiakkaan koneeseen ja esittää ne Web-sivuna Selainohjelma tarjoaa - graafisen käyttöliittymän käyttäjälle ja yhtenäisen esityksen WWW-dokumentista - yhtenäisen käyttöliittymän eri protokollia hyödyntävään tietoliikenteeseen - apuohjelmia käyttäjälle navigointiin (usein myös kommunikointiin jne.) - teknisen alustan WWW-dokumenttiin sisältyville ohjelmille (esim. Java, Javascript) - kanavan tiedostojen käsittelyyn lokaalin koneen ohjelmilla sekä yhteyden verkon ja lokaalin koneen välillä (esim. tiedostojen siirto) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 59

Hyperavaruuden perusta: Web-osoitteet Osoittamisen idea on resurssien yksikäsitteinen sijainti Internet-verkossa Perustana ns. URI-osoitteet (Uniform Resource Identifiers) Rakenne: protokolla://palvelin/hakemisto/tiedosto - protokolla: http, https, telnet, ftp, gopher (muita: mailto, news, javascript, ) - palvelin: HTTP-palvelinkoneen nimi (esim. matriisi.ee.tut.fi) - hakemisto: WWW-dokumentin suhteellinen sijainti WWW-palvelimen dokumenttihakemistossa - tiedosto: WWW-dokumentin tiedostonimi Osoitteet hierarkkisia, esim. http://matriisi.ee.tut.fi/hmopetus/index.html Hakemisto ja tiedosto-osa voivat kokonaan puuttua tai ne saattavat olla mielivaltaisia - HTTP-palvelinohjelman asetukset, unix-linkit, kehystekniikat, dynaamiset palvelut, index.html -tiedosto, yms. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 60

WWW-seitti eli (koti)sivut Webissä WWW-seitillä tarkoitetaan yleensä WWW-palvelimelle sijoitetusta HTML-sivustosta sekä integroiduista WWW-palveluista muodostuvaa kokonaisuutta Tyypillinen WWW-seitti - sijaitsee fyysisesti yhden WWW-palvelinkoneen HTTP-palvelulle määrätyssä dokumenttihakemistossa - sisältää skriptejä ja viittauksia palvelimen (mahd. räätälöityihin) ohjelmistoihin ja muihin palveluihin, - sisältää viittauksia myös muihin sivustoihin ja seitteihin Seitti voi sisältää myös - salasanalla suojattuja osia ja yksinkertaisen käyttäjäseurannan Mutta yleensä ei - käyttäjien autentikointia tai asiakaskohtaisia pysyviä palvelinprosesseja - jälkimmäisten toteuttamiseen tarvitaan yleensä erityisiä palvelinohjelmistoja MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 61

Dokumenttihakemisto & kotisivut WWW-palvelinkoneen HTTP-palvelinohjelman asetuksissa valittu alihakemisto näkyy siis WWW-dokumenttihakemistona WWW-kotisivut ovat tämän käyttäjä- tai järjestökohtaisia dokumenttihakemiston alihakemistoja ja niissä majailevia tiedostoja WWW-sivujen tekeminen on periaatteeltaan erittäin yksinkertaista - luodaan oma alihakemisto jonnekin WWW-dokumenttihakemistoon (esim. unixissa tyyliin mkdir ~/public_html, chmod a+rx ~/public_html) - sisältömateriaali esim. HTML- ja GIF-tiedostoina (cp * ~/public_html) - lukuoikeuksien antaminen kaikille käyttäjille (chmod a+rx ~/public_html/*) - WWW-dokumentin osoitteen kertominen muille (ks. www.kone.fi/~ossi/) WWW-palvelimet (esim. Apache) ovat varsin monipuolisia ohjelmistoja, mahdollistaen erilaisten ohjelmien suorittamisen palvelupyyntöjen yhteydessä - esim. tyyliin "pyysit ladata tiedoston X, ko. 'tiedostoa' ei ole tosin staattisena olemassakaan, vaan luon tiedoston sinulle nyt pyyntöhetkellä" MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 62

Intranet eli (organisaation) sisäinen verkko Intranetillä tarkoitetaan yleensä organisaation sisäistä verkkoa, joka tarjoaa Internettyyppisiä palveluja (esim. lähiverkko, jotka käytetään tietyllä tavalla) - lähinnä WWW, FTP, sähköposti,..., (omat IP-numerot, ) Tyypillisesti mukana myös täsmällisempään käyttötarkoitukseen tarkoitettuja sovelluksia - tietokannat, seurantaohjelmat, laskutusjärjestelmät,... Intranet tulkitaan usein paikalliseksi Webiksi, joka vain on eristetty Internetistä (tavalla tai toisella) Ideaalisen Intranetin edut (vrt. Internet): - tiedonsiirron nopeus ja tiedon varma saatavuus - täydellinen hallinnointi, räätälöitävyys (ei esim. ohjelmistojen yhteensopivuusongelmia) ja korkea tietoturva Intranetia vastaavaan toiminnallisuuteen voidaan käytännössä päästä myös erilaisilla (integroiduilla) työryhmäohjelmilla MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 63

Intranet ja muu maailma Intranetin täydellinen eristäminen muusta maailmasta ei kuitenkaan aina ole järkevää - sähköposti? WWW:n käyttö? Internetin muut palvelut? Täydellinen eristäminen suoritetaankin yleensä vain tietoturvasyistä (kun kompromissit eivät riitä) Käytännössä yleensä osa Internetistä rajataan organisaation Intranetiksi palomuuri(ohjelmisto)n (ja proxyn) avulla KULUNVALVONTA MUU INTERNET ALUE- VERKKO LÄHI- VERKKO MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 64

Web-teknologioiden soveltamisen tasot organisaatiossa Taso 0: Verkkoa ei käytetä lainkaan Taso 1: Informaation välittäminen ([informative]) - staattisen ja kausiluonteisen informaation jakelu Taso 2: Materiaalin välittäminen ([supplemental]) - yksisuuntainen ajankohtaisen aineiston jakelu Taso 3: Verkkoperustaisuus ([essential]) - Web-kirjat Taso 4: Yhteisöllinen käyttö ([communial]) yksittäiset HTML-sivut WWWseitit työympäristöt - kaikki osallistuvat materiaalintuotantoon, aktiivinen sähköpostin yms. välineiden käyttö verkkoyhteisöt Taso 5: Kaikenkattava käyttö ([immersive]) kaikki työskentely verkon välityksellä, fyysinen yhteys toimijoiden välillä ei ole tärkeä MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 65

3 WWW-hypermedian perusta: HTML 3 WWW-hypermedian perusta: HTML HTML (Hypertext Markup Language) on tapa koodata (merkata) rakenteisia (teksti)dokumentteja WWW:ssä Esimerkki: Tästä kaikki alkaa <html> <head> <title>ensimmäinen HTML-dokumentti</title> </head> <body bgcolor="#ffff80"> <h1>preludi</h1> <p>moi maailma!</p> <!-- klassinen alku, vai mitä... --> <p>lisää aiheesta löydät osoittesta <a href="http://www.w3.org/markup/">html Home Page</a>.</p> <p><img src="logo.gif"></p> <hr> <p>tämän dokumentin kirjoitti <cite>ossi</cite>, 2005. </body> </html> Huomioita: rakenne, elementit, tagit, attribuutit, (puutteellinen merkkaus!) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 66

3 WWW-hypermedian perusta: HTML Hypertext Markup Language HTML on laitteistoriippumaton & standardi merkintäkieli WWW-hypermedian tekemiseen Käytössä on useita eri HTML-versioita, nykyinen suositus HTML 4.01 (uusin HTMLsuositus on XHTML 1.1) HTML-dokumentit ovat oleellisesti tekstitiedostoja, perustana tekstipohjainen kuvaustiedosto (Keskeisessä roolissa on selainohjelma) - sis. viittauksia toisiin HTML-dokumentteihin (hyperteksti) - sis. viittauksia myös muuntyyppisiin tiedostoihin ja resursseihin (hypermedia) - sis. lukuisia yhtymäkohtia toisiin standardeihin ja järjestelmiin - dokumenttien lukeminen suoritetaan erityisen selainohjelman (browser, user agent, web client) avulla Sopivasti WWW:hen sijoitettuna HTML-dokumentteja on mahdollista lukea miltä tahansa WWW:hen kytketyltä selainohjelmalta (Web ~ HTTP-palvelinten verkosto) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 67

3 WWW-hypermedian perusta: HTML HTML:n historia on lyhyt ja menestyksekäs Ensimmäinen HTML-versio (SGML-sovellus) julkaistiin vuonna 1991 CERNissä (Tim Berners-Lee) Mosaic alkoi laajentaa merkintäkieltä kehitys (yleinen käyttö) HTML 2.0 (RFC 1866) esiteltiin vuonna 1994, tavoitteena tuolloin kesällä 1994 yleisesti käytössä olevien HTML-piirteiden standardointi Selainvalmistajien epästandardi kehitystyö jatkui, tuloksena Netscape, Microsoft, jne. - laajennuksa W3C:n (WWW Consortium) perustaminen vuoden 1994 lopulla hoitamaan WWW:hen liittyviä standardeja HTML 3.0 julkaistiin maaliskuussa 1995, mutta erot HTML 2.0:aan verrattuna olivat liian suuret, eikä HTML 3 koskaan oikeastaan toteutunut Marraskuussa 1995 perustettiin HTML ERB (editoral review board) - yritysosapuolten ottaminen mukaan kehitystyöhön - tavoitteena yhdenmukaisen standardin luominen MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 68

HTML 3.2 tammikuussa 1997 (~parhaiten tuettu HTML-versio?) 1997 ERB korvattiin nykyisillä W3C:n työryhmillä Seuraava HTML-versio (4): Cougar... HTML 4.0 huhtikuussa 1998 Joulukuussa 1999 HTML 4.01 ( http://www.w3.org/tr/html4/ ) - kehykset - objektit - kansainvälisyys ja monikielisyys - siirtyminen tyylien käyttöön (style sheets) - parantunut tuki skripteille 3 WWW-hypermedian perusta: HTML HTML 4 on käytännössä varsin laaja merkintäkieli, käsittäen kuvauksen yli 90 elementille ja 100:lle attribuutille Nykypäivän HTML = HTML 4 (pilkottavissa XHTML:n myötä osiin) - SGML-syntaksi (HTML 4.01) - XML-syntaksi (XHTML 1.0) HTML-jatkokehitys MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 69

3 WWW-hypermedian perusta: HTML HTML-evoluutio pähkinänkuoressa HTML 4.01 CSS2 CSS1 HTML 4.0 HTML 3.2 Modularization of XHTML XHTML 1.0 HTML 3.0 XHTML 1.1 XSL... HTML 2.0... XML Namespaces HTML-kivikausi SGML XML XML 1.0 MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 70

3 WWW-hypermedian perusta: HTML HTML:n tulevaisuus Viimeisin HTML-sukupolvi poikkeaa nykyisestä SGML-kehityskaaresta: XHTML 1.0 (ks. http://www.w3.org/tr/xhtml1/ ) - HTML 4:n semantiikka - perustana XML ja sitä kautta syntaksin täsmentäminen & uudelleenmuotoilu - päämääränä modulaarinen (X)HTML - XML-laajennusosat ja XML-stdperhe, tietokantojen käytön huomioiminen, jne. HTML on ollut ja tulee olemaan WWW:n kehityksen aallonharjassa. Haasteita: - ohjelmistotuotteiden rinnakkainen Web-kehitys - uudet laitteet: verkkotietokoneet, matkapuhelimet, Netti-TV, - WAP & WML, jne. HTML tulee jatkamaan olemassaoloaan suuren suosionsa, levinneisyytensä ja helppoutensa ansiosta (taannoinen arvio: 2002 lopussa 75% UA:ista ei enää pöytämikroja, toteutunut?) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 71

3 WWW-hypermedian perusta: HTML HTML:n kielioppi HTML on SGML-merkintäkielen (ISO 8879:1986) pohjalta kehitetty merkintäkieli; uusin XHTML-perhe perustuu XML-merkintäkieleen HTML-dokumentti on tekstimuotoinen Unicode-tiedosto (~ISO/IEC 10646) Tiedosto sisältää selaimen näytettäväksi tarkoitettua tekstiä ja tekstin merkitystä kuvaavia koodeja ( loogiset elementit) <h1>moi maailma!</h1> HTML-koodien perusideana on merkata dokumentin looginen rakenne - tekstin merkitystä kuvaileva merkkaus; ulkoasu määritellään tyyleillä Muodollisesti jokainen HTML-tiedosto tulisi täsmällisesti HTML-määrityksessä annettujen ohjeiden mukaisesti - käytännössä näin ei kuitenkaan aina tehdä (ja WWWselaimet katsovat asian läpi sormien) Yksinkertaisten HTML-dokumenttien kirjoittaminen on erittäin helppoa, kirjoittaminen onnistuu millä tahansa tekstinkäsittelyohjelmalla MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 72

3 WWW-hypermedian perusta: HTML Merkkauksen perusteet HTML-merkkauksen perusta on HTML-dokumenttien hierarkkinen elementtirakenne Dokumentti muodostaa puumaisen, aidosti sisäkkäisen elementtirakenteen, joka elementtien esiintymäkohdat merkataan elementtien alku- ja loppukoodeilla (tai tyhjän elementin koodeilla) - tuloksena puurakenne Elementtejä on kahta perustyyppiä: 1) (epätyhjiä) elementtejä, joilla voi olla sisältönä tekstiä tai toisia elementtejä ja 2) tyhjiä elementtejä Elementit merkataan dokumenttiin elementtien alku- ja lopputagien avulla. Poikkeuksena tyhjät elementit merkataan tyhjän elementin tagi Esimerkki: <p>elementti p merkkaa kappaleen</p> <img src="kuva.gif" alt="esimerkki kuvan sijoittamisesta"> XHTML-suosituksen mukaan tyhjät elementit pitäisi kirjoittaa XML-syntaksin mukaisesti erityisen tyhjän elementin koodin avulla, siis muodossa (pulmat!) <img src="kuva.gif" alt="esimerkki kuvan sijoittamisesta" /> MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 73

Joillekin elementeille voidaan antaa myös attribuutteja (abstrakteja ominaisuuksia/parametreja) 3 WWW-hypermedian perusta: HTML Attribuutit luetellaan elementin alkutagissa. Toisin kuin elementtien järjestyksellä, attribuuttien järjestyksellä ei dokumentissa ole mitään merkitystä Esimerkki: <a href="sivu.html">ks. myös toinen sivu.</a> <img src="kuva.gif" alt="esimerkki kuvan sijoittamisesta"> Jos selain ei ymmärrä tagia tai attribuuttia, jätetään se huomiotta (tästäkin seuraa kaikenlaisia ongelmia) Osa elementeistä on tarkoitettu esitettäväksi lukijalle suoraan, osa ei, esim: <html> <head> <title>sivun otsikko</title> <link rel="stylesheet" href="fancy.css" type="text/css"> <head> <body> <p>check this out!</p> MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 74

Esimerkki: HTML-elementtiin liittyvät termit tarkemmin <p align="left">elementti p merkkaa kappaleen</p> Termit: elementti: <p align="left">elementti p merkkaa kappaleen</p> elementin (tyypin) nimi: p " sisältö: Elementti p merkkaa kappaleen " alkutagi: <p align="left"> " lopputagi: </p> attribuutti: align="left" attribuutin nimi: align " arvo: left 3 WWW-hypermedian perusta: HTML Esitettävät elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) (tai lohkotyylin erikoistapauksena listatyylisiä objekteja ([list item])), vrt. esim: <h3>otsikko</h3> <p>strong on <strong>tekstityylinen</strong> elementti.</p > <ol> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ol> Lohkotyyliset objektit esitetään suorakaiteena (margin/border/padding -attribuutit), tekstityyliset merkkivirtana ja listatyyliset lohkotyylin erikoistapauksena suorakaiteena MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 75

3 WWW-hypermedian perusta: HTML Yleisiä HTML-ohjeita & -nyrkkisääntöjä: - huomaa termien elementti ja tagi ero - elementtien ja attribuuttien nimet kannattaa kirjoittaa pienillä kirjaimilla (siitäkin huolimatta, että HTML 4 ei erottele isoja ja pieniä kirjaimia) - elementin alku- ja lopputagit tulee aina merkitä näkyviin, vaikka ne saisikin lyhennysmielessä jättää pois - attribuuttien arvot tulee aina ympäröidä heitto- tai lainausmerkein (siitäkin huolimatta, että HTML 4 ei sitä aina pakota) - <-merkki (kun ei merkkausta) pitää aina esittää muodossa < vaikka selain sen halutulla tavalla tulkitsisikin - HTML-spesifikaatio luettelee kaikki sallitut elementit ja attribuutit (näitä kutsutaan HTML-sanastoksi) Elementtien lisäksi HTML-dokumentissa esiintyy muutakin merkkausta; - kommentteja - merkkiviittauksia - entiteettiviittauksia MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 76

- alussa dokumentin tyyppijulistus (kerrotaan dokumentin DTD) 3 WWW-hypermedian perusta: HTML - mahdollisesti XML-julistus & nimiavaruuden ilmoittava parametri (tosin vain XHTMLdokumenteissa) Esimerkki: Kommentti & merkki- ja entiteettiviittaukset <!-- tämä on kommentti - kahden miinusmerkin sisällyttäminen kommentteihin ei ole sallittua --> Seuraavaan kohtaan kirjoitetaan iso A-kirjain: A Seuraavaan kohtaan kirjoitetaan pieni ä-kirjain: ä Esimerkki: Dokumentin alusta voi löytyä tyyppijulistus <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html>... Esimerkki: Dokumentin alusta voi löytyä myös XML-julistus ja nimiavaruuden määrittävä attribuutti <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml">... MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 77

3 WWW-hypermedian perusta: HTML Nimiavaruudet yms. liittyvät XML-määritystaustaan (näihin ei vielä HTML-opiskelun alkuvaiheessa tarvitse kiinnittää vielä yksityiskohtaista huomioita) HTML-dokumentin sisältö jäsennetään & tulkitaan merkatusta tekstistä - merkkaukseen varatut erikoismerkit on koodattava (esim. "<"-merkki ei saa esiintyä sisällössä, vaan se on korvattava esim. < -entiteettiviittauksella, vastaavasti & on korvattava & -entiteettiviittauksella) - myös muut merkkaukseen varatut merkit (>, ja ) kannattaa korvata niitä vastaavilla entiteettiviittauksilla (>, " ja &apos;) - rakenteinen ajattelu: tekstinpätkän merkitys riippuu elementistä, jonka sisällä se sijaitsee - tyhjämerkkien tulkinta & normalisointi (myös attribuuttien arvoissa) - XHTML-dokumenteissa erikoismerkit on koodattava myös attribuuttien arvoissa (ongelmia luvassa nykyselaimille, tämänkin voi aluksi jättää huomiotta) HTML-kieli sisältää karkeasti luokiteltuna kolmentyyppistä merkkausta liittyen dokumentin loogiseen rakenteeseen, ulkoasuun ja formatointiin ja dokumentista ilmi käyvään tai sen tulkitsemisessa tarvittavaan metatietoon MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 78

3 WWW-hypermedian perusta: HTML HTML-dokumentin yleisrakenne Jokaisella HTML-dokumentilla on tietty yleisrakenne. HTML-dokumentti koostuu (lähinnä metatietoa sisältävästä) otsikko-osasta ja (varsinaisen asiasisällön sisältävästä) rungosta Esimerkki: (HTML 4.01) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>validi HTML-dokumentti</title> </head> <body> <h1>validi HTML-dokumentti</h1> <p>hei vaan, maailma!</p> </body> </html> Suurin osa HTML-koodauksesta keskittyy body-elementin sisältöön. Framesettyyppisillä dokumenteilla body-elementti korvataan frameset-elementillä. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 79

3 WWW-hypermedian perusta: HTML HTML-dokumentin tyyppimäärittely HTML-kieli on syntaktisesti määritelty kielen määrittelyssä käytetyn dokumentin tyyppikuvauksen (document type definition, DTD) avulla. Dokumenttityyppejä on useita erilaisia, dokumentin perustyypistä ja HTML-version standardiasteesta riippuen - HTML DTD (ks. http://www.w3.org/tr/html4/ ) - XHTML DTD (ks. http://www.w3.org/tr/xhtml1/ ) HTML-dokumentti voi olla jotain kahta perustyypistä - (sisältö)dokumentti, ts. dokumentti joka on tarkoitettu esitettäväksi & luettavaksi selaimessa (olennaisena sisältönä BODY-elementti) - kehysrakenteen kuvaava dokumentti, ts. kuvaus selainikkunan rakenteesta (olennaisena sisältönä FRAMESET-elementti) Dokumentin tyyppimäärittely on geneerinen malli, jota jokaisen (oikeanmuotoisen eli validin) HTML-dokumentin tulisi noudattaa Käytännössä tyyppimäärittelyn voi jättää poiskin (mutta tyyppimäärityksen merkitys rakenteisessa dokumentissa on syytä ymmärtää) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2005) 80