3 Sivupolku: metaforat & selittäminen
|
|
|
- Annemari Hyttinen
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 3 Sivupolku: metaforat & selittäminen 3 Sivupolku: metaforat & selittäminen Ennen WWW:n sisältötuotannon perustekniikoiden esittelyä luonnehditaan lyhyesti metafora-käsitettä. Yhteys aiheeseen löytyy ajatuksesta, jonka mukaan ei-triviaalin WWW-sivujen tekemistä voi verrata käyttöliittymän suunnitteluun ja toteuttamiseen (hyperdokumentin lukemisen vuorovaikutteisen perusluonteen ansiosta). Tällöin "pelkän asiasisällön esittämisen" ohella merkittävää on ilmeisesti myös se tapa, jolla asiat jäsennetään & esitetään. Metaforan rooli kaikessa tässä on tarjota käyttäjälle käsitteelliset välineet uuden oppimiseen. Tietojenkäsittely ja ohjelmistotyökalujen käyttö ja (miksei myös muiden asioiden ymmärtäminen) perustuvat käsitteellisesti metaforien käyttöön Metaforalla tarkoitetaan kuulijalle entuudestaan tuttua tai ymmärrettävää vertauskuvaa, esimerkkiä tai analogista mallia jonka kautta uuden käsitteen tai prosessin ymmärtäminen helpottuu Usein ohjelmistojen käyttöliittymät, työkalut (miksei myös teoriat) muotoillaan siten, että ne on mahdollista helposti ymmärtää joidenkin entuudestaan tuttujen käsitteiden avulla HYPERMEDIAN PERUSTEET (syksy 2003) 66
2 3 Sivupolku: metaforat & selittäminen Tekeminen jäsentyy symbolien ja metaforan kautta > << > >> 12: HYPERMEDIAN PERUSTEET (syksy 2003) 67
3 3 Sivupolku: metaforat & selittäminen Esimerkkejä - hypertekstin intuitiivinen selittäminen onnistuu helpoimmin kartta&paikkametaforan avulla (tai suoraan sanan "verkko" avulla) - puun (graafin erikoistapaus) metafora puolestaan on puu - WYSIWYG-tekstieditorin avulla tapahtuva kirjoitustyö perustuu pitkälle ajatukseen paperille tapahtuvasta kirjoitustyöstä (+uusia ominaisuuksia) - graafisen käyttöliittymän malli tulee "toimiston pöydästä" (mukana myös selviä ristiriitoja!) - verkossa välitetään tietoa "ilmoitustaulujen", "sähköpostin" ja "kotisivujen" avulla - hyperdokumenteissa "navigoidaan" ja sähköisen kaupan sivuilta ostokset kerätään "ostoskoriin" - laskutoimituksia suoritetaan "avaruudessa", funktion integroiminen tarkoittaa "pinta-alan" laskemista, lukujono saattaa olla "suppeneva", predikaattilogiikan lauseiden "totuusarvo" selviää "mallien" avulla, jne HYPERMEDIAN PERUSTEET (syksy 2003) 68
4 3 Sivupolku: metaforat & selittäminen Huomaa: - metaforan nimi näkyy usein sovelluksen nimessä (usein metaforan käyttöä ei edes huomaa ajatella) - metaforat lisääntyvät kulttuuris-teknillisten muutosten myötä; tänä päivänä CD-soittimen ohjauspaneli sopii jo metaforaksi länsimaissa - tietokoneet ja näihin liittyvät asiat myös muuttavat vanhoja metaforia; vrt. "toimisto"-metaforan muuttuminen (arkistokaapit? kortistot? ) - esim. hyperteksti alkaa toimia jo omana metaforanaan Metaforien käyttö perustuu ajatukseen, jonka mukaan ymmärtäminen on karkeasti sanottuna kyky mallintaa (uudelleenmuotoilla) jokin ilmiö entuudestaan tuttujen käsitteiden avulla ("riittävän yhtäpitävässä" muodossa) HYPERMEDIAN PERUSTEET (syksy 2003) 69
5 3 Sivupolku: metaforat & selittäminen Metaforien käytön hyviä puolia: - uusia sanoja (termejä) tarvitaan vähemmän! - uusien käsitteiden omaksuminen on nopeampaa - jos metafora on soveltuva, työskenteleminen on alusta alkaen "loogista" - samantyyppisten metaforien käyttäminen eri sovelluksissa mahdollistaa tietojen ja taitojen monipuolisen käytön (ja tietämyksen "siirtämisen") Metaforien käytön huonoja puolia: - sanat (termit) voivat mennä myös sekaisin! - metaforan kautta ilmiöön saatetaan liittää vääriä olettamuksia - ilmiö saatetaan olettaa liian suppeaksi tai monimutkaiseksi - jos metaforan ymmärtämiseen liittyy "virheitä" tai huonoja työtapoja, siirtyvät samat ongelmat myös uuteen sovellukseen "Hypertekstijärjestelmän" paras käyttömetafora EI aina ole hyperteksti (!) HYPERMEDIAN PERUSTEET (syksy 2003) 70
6 4 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=" Home Page</a>.</p> <img src="logo.gif"> <hr> <p>tämän dokumentin kirjoitti <cite>ossi</cite>, </body> </html> Huomioita: rakenne, elementit, tagit, attribuutit, (puutteellinen merkkaus!) HYPERMEDIAN PERUSTEET (syksy 2003) 71
7 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 (viimeisin syntaktinen suositus 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 ertyisen selainohjelman (browser, user agent, web client) avulla Sopivasti WWW:hen "sijoitettuna" HTML-dokumentteja on mahdollista lukea miltä tahansa WWW:hen kytketyltä selaiohjelmalta (Web ~ HTTP-palvelinten verkosto) HYPERMEDIAN PERUSTEET (syksy 2003) 72
8 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 HYPERMEDIAN PERUSTEET (syksy 2003) 73
9 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 ( ) - kehykset - objektit - kansainvälisyys ja monikielisyys - siirtyminen tyylien käyttöön (style sheets) - parantunut tuki skripteille 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 HYPERMEDIAN PERUSTEET (syksy 2003) 74
10 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 XML Namespaces HTML-kivikausi SGML XML XML HYPERMEDIAN PERUSTEET (syksy 2003) 75
11 HTML:n tulevaisuus Viimeisin HTML-sukupolvi poikkeaa nykyisestä SGML-kehityskaaresta: XHTML 1.0 (ks. ) - 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 (arvio: 2002 lopussa 75% UA:ista ei enää pöytämikr.) HYPERMEDIAN PERUSTEET (syksy 2003) 76
12 HTML:n syntaksi 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 muotoilukomentoja ( loogiset elementit) <h1>moi maailma!</h1> HTML-koodien perusideana on merkata dokumentin looginen rakenne - tekstin merkitystä kuvaileva merkkaus; ulkoasumääritykset määr. 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 WWW-selaimet katsovat asian läpi sormien) Yksinkertaisten HTML-dokumenttien kirjoittaminen on erittäin helppoa, kirjoittaminen onnistuu millä tahansa tekstinkäsittelyohjelmalla HYPERMEDIAN PERUSTEET (syksy 2003) 77
13 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 loppukoodien (tagien) avulla. Poikkeuksena tyhjät elementit merkataan tyhjän elementin koodilla Esimerkki: <p>elementti p merkkaa kappaleen</p> <img src="kuva.gif" alt="jostain syystä kuvaa ei näy?"> 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="jostain syystä kuvaa ei näy?" /> HYPERMEDIAN PERUSTEET (syksy 2003) 78
14 Joillekin elementeille voidaan antaa myös attribuutteja ("abstrakteja" ominaisuuksia/parametreja) 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="jostain syystä kuvaa ei näy?"> 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> HYPERMEDIAN PERUSTEET (syksy 2003) 79
15 Esimerkki: HTML-elementtiin liittyvät termit tarkemmin <p align="left">elementti p merkkaa kappaleen</p> 4 WWW-hypermedian perusta: HTML 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 Esitettävät elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) (tai lohkotyylin erikoistapauksena listatyylisiä objekteja ([list item])), vrt. esim: <h3>heading</h3> <p><b>plump</b> Fiction is yet another movie with a funny name.</p> <ol> <li>one</li> <li>two</li> <li>three</li> </ol> Lohkotyyliset objektit esitetään suorakaiteena (margin/border/padding - attribuutit), tekstityyliset merkkivirtana ja listatyyliset lohkotyylin erikoistapauksena suorakaiteena HYPERMEDIAN PERUSTEET (syksy 2003) 80
![Esitettävät elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) (tai lohkotyylin erikoistapauksena listatyylisiä objekteja ([list item])), vrt.](/docs-images/55/9778005/images/page_15.jpg "esim: <h3>heading</h3> <p><b>plump</b> Fiction is yet another movie with a funny name.")
16 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 HYPERMEDIAN PERUSTEET (syksy 2003) 81
17 - alussa dokumentin tyyppijulistus (kerrotaan dokumentin DTD) - mahdollisesti XML-julistus & nimiavaruuden ilmoittava parametri (tosin vain XHTML-dokumenteissa) 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=" HYPERMEDIAN PERUSTEET (syksy 2003) 82
18 Nimiavaruudet yms. liittyvät XML-määritystaustaan (näihin ei vielä HTMLopiskelun alkuvaiheessa tarvitse kiinnittää vielä yksityiskohtaista huomioita) HTML-dokumentin sisältö parsitaan & tulkitaan merkatusta tekstistä - merkkaukseen varatut erikoismerkit on koodattava (esim. "<"-merkki ei saa esiintyä sisällössä, vaan on annettava esim. < -entiteettiviittauksella) - 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 HYPERMEDIAN PERUSTEET (syksy 2003) 83
19 HTML-dokumentin yleisrakenne Jokaisella HTML-dokumentilla on tietty yleisrakenne. HTML-dokumentti koostuu (lähinnä metatietoa sisältävästä) otsikko-osasta ja (varsinaisen "asian" sisältävästä) vartalosta Esimerkki: (HTML 4.01) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>my first HTML document</title> </head> <body> <h1>heading</h1> <p>hello world!</p> <p>much a do about nothing, aye?</p> </body> </html> Suurin osa HTML-koodauksesta keskittyy body-elementin sisältöön. Framesettyyppisillä dokumenteilla body-elementti korvataan frameset-elementillä HYPERMEDIAN PERUSTEET (syksy 2003) 84
20 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 HTMLversion standardiasteesta riippuen ( ) - HTML DTD (ks. ) - XHTML DTD (ks. ) 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ää) HYPERMEDIAN PERUSTEET (syksy 2003) 85
21 HTML-dokumenttien keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit Kuvaileva merkkaus vs. formatoitu teksti HTML-spesifikaatio olettaa erityisesti tyylien (esim. CSS) ja skriptien (esim. JavaScript) olemassaolon (vrt. XHTML Basic) Tapahtumankäsittely HYPERMEDIAN PERUSTEET (syksy 2003) 86
22 Keskeinen HTML-merkkaus == XHTML Basic HTML 4 on varsin laaja spesifikaatio -- no mikäs sitten on "keskeisin" osa HTML:ää? (kohtuullisen hyvä) vastaus: XHTML Basicin sis. merkkaus: Structure module body, head, html, title Text module abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Hypertext Module a List Module dl, dt, dd, ol, ul, li Basic Forms Module form, input, label, select, option, textarea Basic Tables Module caption, table, td, th, tr Image Module img Object Module object, param Metainformation Module meta Link Module link Base Module base EI MUKANA: b, i, map, frame, style, Sitten takaisin "koko" HTML-merkkauksen esittelyyn HYPERMEDIAN PERUSTEET (syksy 2003) 87
23 Teksti Tekstin esittämistavat: tekstin merkitystä kuvaavat merkinnät vs. tekstin ulkoasua kuvaavat merkinnät, vrt: <cite>i'll be back!</cite> <small>you just can't go around killing people</small> <code> for (i=0; I<foesInSight; ++i) { killfoe(i);} </code> Tekstin jako, kappaleet ja otsikot (p, div, h1-h6, ), tekstin merkitystä kuvaavat elementit (abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var, ) Tekstin ulkoasua kuvaavat muotoilut (B, BIG, I, SMALL, STRIKE, SUB, SUP, TT, U, ), värien ja efektien käyttö Poistuva fontinkäsittely (BASEFONT, FONT), tekstin välistys ja asemointi (BR, PRE, CENTER, ), listarakenteet (UL, OL, DL) + muuta (BLOCKQUOTE, ADDRESS, HR, ) HYPERMEDIAN PERUSTEET (syksy 2003) 88
24 Hypertekstilinkit Hypertekstiä syntyy erityisen ankkuri-elementin avulla. <a href=" <a href="../previous.html">again Hello again</a> <a href="./homepage/">hello again even once more</a> Nimetyt ankkurit: linkin kohteen osoittaminen HTML-dokumentin sisällä <a name="funny1">once</a> upon a time in a country far from See <a href="destfile.html#funny1">the rude joke</a> about two thousand rabbits and a vacuum cleaner. Oleellisesti samaan päästään myös id-attribuutin käytöllä nimeämällä elementti <div id="funny1">once upon a time in a country far from</div> HTML-dokumenttien ohella linkit voivat viitata myös muihin tiedostoihin, tällöin tiedostojen käsittely riippuu selainohjelmasta (plugins, helper applications, ): Read about <a href="./viruscontainer.doc">y2k</a> now! HYPERMEDIAN PERUSTEET (syksy 2003) 89
25 Entiteetit, merkkiviittaukset, metatieto ja objektit HTML-dokumentin sisään voi upottaa myös (korvattavien elementtien avulla) objekteja, joita HTML "ei sinällään tunne" kuten kuvia sekä entiteetti- ja merkkiviittauksia, esim: <img src="pic.jpg"> Hyv&aml;&aml; y&oml;t&aml; ABC HTML-metatiedon avulla taas voidaan toteuttaa esim. client pull -operaatio tai vain kuvailla dokumentin sisältöä ("kielen std-laajennukset") <meta http-equiv="refresh" content="0;url=./dir.cgi"> <meta name="keywords" lang="en" content="73270, hp"> Objektien käsittely HTML-kielen ulkopuolella (OBJECT ja EMBED -tagit) Lisää ominaisuuksia: skriptit (SCRIPT) ja appletit (APPLET & OBJECT) - Java, JavaScript, VBScript, HYPERMEDIAN PERUSTEET (syksy 2003) 90
26 Taulukot, kuvat, kuvakartat, TABLE, esim. <table> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> IMG MAP (selainpäässä toimivan kuvakartan tekeminen) <img src="hmlogo.gif" usemap="#mymap" border="0"> <map name="mymap"> <area shape="rect" coords="0,0,50,50" href="koe.html" title="suorakaide"> <area shape="circle" coords="150,150,50" href="koe.html" title="ympyrä"> </map> HYPERMEDIAN PERUSTEET (syksy 2003) 91
27 Palvelinpään kuvakartan toteuttaminen onnistuu myös (edellyttäen tosin CGIskriptin tms. kirjoittamista) <p><a href=" <img src="game.gif" ismap alt="target"></a> Appletin lisääminen sivulle onnistuu APPLET ja OBJECT-elementtien avulla: <applet code="nervoustext.class" width="375" height="50"> <param name=text value="hypermedian perusteet"> </applet> <object codetype="application/java" classid="java:nervoustext.class" width="375" height="50"> <param name="text" value="hypermedian perusteet"> </object> OBJECT-elementin avulla HTML-dokumenttiin voidaan periaatteessa upottaa "mitä tahansa" (toinen HTML-dokumentti, appletti, kuva, tai jokin muu, läh. pluginin tulkitsema & ymmärtämä resurssi) HYPERMEDIAN PERUSTEET (syksy 2003) 92
Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
3 WWW-hypermedian perusta: HTML
3 WWW-hypermedian perusta: HTML Hypertext Markup Language HTML (Hypertext Markup Language) on tapa koodata (merkata) rakenteisia (teksti)dokumentteja WWW:ssä Esimerkki: Tästä kaikki alkaa
Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti
1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys
WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000
Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002
, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi
HTML-dokumenttien keskeiset piirteet
HTML-dokumenttien keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
HTML-dokumenttien keskeiset piirteet. Keskeinen HTML-merkkaus == XHTML Basic. Hypertekstilinkit. Teksti
en keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit Kuvaileva
2 Internet & WWW. 2 Internet & WWW
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
Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/
Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,
XHTML aloitus. Sisällys
XHTML aloitus XHTML-dokumentin rakenne, metatieto, kommentit, tekstit Mirja Jaakkola Sisällys 3. Taustaa 4. Selain palvelin 5. Elementin rakenne 6. Attribuutti 7. XHTML-dokumentin rakenne 8. XHTML:n DOCTYPE-määrittely
HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
3 Verkkosaavutettavuuden tekniset perusteet
3 Verkkosaavutettavuuden tekniset perusteet Saavutettavuuden toteuttaminen edellyttää lähtökohtaisesti tietoa laitteista ja sovelluksista, käyttäjistä ja käyttötavoista, sekä tekniikasta. Tekniikasta on
2. PEHMEÄ XHTML XRAJAHTML
Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &
XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja
XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard
Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.
HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen
2.17 Esimerkki järkevän relaatiotietokannan rakenteesta
Rakenteisten dokumenttien perusteet 2.17 Esimerkki järkevän relaatiotietokannan rakenteesta Peruskäsitteitä: taulu/relaatio, monikko/tietue, mallinnus ja normalisointi, kytkös vs. redundanssi, anomaliat
Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/
1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon
M. Merikanto 2012 XML. Merkkauskieli, osa 2
XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao
Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.
1. Julkaisutoiminnan peruskysymyksiä a) Mieti kohderyhmät b) Mieti palvelut c) Mieti palvelujen toteutus Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta. PALVELUKOKONAISUUDET:
Johdatus rakenteisiin dokumentteihin
-RKGDWXVUDNHQWHLVLLQGRNXPHQWWHLKLQ 5DNHQWHLQHQGRNXPHQWWL= rakenteellinen dokumentti dokumentti, jossa erotetaan toisistaan dokumentin 1)VLVlOW, 2) UDNHQQHja 3) XONRDVX(tai esitystapa) jotakin systemaattista
HTML perusteita (ei julkiseen jakeluun)
HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä
Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti
1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23
XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.
XML prosessointi Miten XML dokumentteja luetaan ja kirjoitetaan XML prosessori lukee ja välittää XML dokumentin sovellukselle. Se sisältää entieettikäsittelijän (mahdollisesti) XML jäsentimen Sovellus
Johdatusta selainohjelmointiin
Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat
XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),
Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
Tyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 5 WWW-hypermedian perusta: HTML
Tyylien käyttö Tyylien (style) ideana on HTML:n tapauksessa erottaa toisistaan dokumentin rakenne ja ulkoasu Tavoitteena on, että dokumentin loogisen rakenteen ja ulkoasun koodaus erotetaan toisistaan
Luento 10: XML WWW:ssä
Luento 10: XML WWW:ssä AS-0.110 XML-kuvauskielten perusteet Janne Kalliola XML WWW:ssä XHTML versiot modularisointi XForms edut XForms vs. HTML-lomakkeet RSS 2 1 XHTML XHTML HTML on standardointityössä
2 HTML ja rakenteinen merkkaus
2 HTML ja rakenteinen merkkaus 2. HTML ja rakenteinen merkkaus Kuva tuotettu Websites as graphs työkalulla (http://www.aharef.info/static/htmlgraph/) MATHM-37100 JOHDATUS HYPERMEDIAAN (syksy 2009) 1 2.1
XML johdanto, uusimmat standardit ja kehitys
johdanto, uusimmat standardit ja kehitys Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: on W3C:n suosittama
Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
Ctl160 Tekstikorpusten tietojenkäsittely p.1/15
Ctl160 490160-0 Nicholas Volk Yleisen kielitieteen laitos, Helsingin yliopisto Ctl160 490160-0 p.1/15 Lisää säännöllisistä lausekkeista Aikaisemmin esityt * ja + yrittävät osua mahdollisimman pitkään merkkijonoon
Digitaalisen median tekniikat. Luento 3: CSS
Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi
CSS - tyylit. 13.11.2000 Seppo Räsänen
CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot
Cascading Style Sheets
Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta
Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
Digitaalisen median tekniikat xhtml Harri Laine 1
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
4. Lausekielinen ohjelmointi 4.1
4. Lausekielinen ohjelmointi 4.1 Sisällys Konekieli, symbolinen konekieli ja lausekieli. Lausekielestä konekieleksi: - Lähdekoodi, tekstitiedosto ja tekstieditorit. - Kääntäminen ja tulkinta. - Kääntäminen,
Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus
Laajuus 5 op Luennot: 12 x 2t 11.3.2014 29.4.2014 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Aulikki Hyrskykari
Ulkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
3 XHTML-dokumenttien anatomia
3 XHTML-dokumenttien anatomia XHTML tarjoaa tutun esimerkin rakenteisten dokumenttien opiskelun alkutaipaleelle. Erityisesti, koska XHTML on eräs XML-sovellus: - havainnollistaa se tiedon teknistä merkkausta
9 Hypermediajärjestelmistä
9 Hypermediajärjestelmistä Lyhyt vilkaisu järjestelmätason hypermediaan. Hypermediasovellukseen liittyy aina kaksi näkökulmaa: lukijan ja laatijan näkökulma Hypertekstijärjestelmä (hypermediajärjestelmä)
Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit
Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan
MITÄ JAVASCRIPT ON?...3
JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3
Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com
Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#
ELM GROUP 04. Teemu Laakso Henrik Talarmo
ELM GROUP 04 Teemu Laakso Henrik Talarmo 23. marraskuuta 2017 Sisältö 1 Johdanto 1 2 Ominaisuuksia 2 2.1 Muuttujat ja tietorakenteet...................... 2 2.2 Funktiot................................
valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda
Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda
W3C & verkkojulkaisun standardit
W3C & verkkojulkaisun standardit Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: World Wide Web Consortium (W3C)
XML / DTD / FOP -opas Internal
XML / DTD / FOP -opas Internal Reviewed: - Status: pending approval Approved by: - Author: Sakari Lampinen Revision: 1.0 Date: 15.10.2000 1 Termit DTD (data type definition) on määrittely kielelle, niinkuin
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
Semanttinen Web. Ossi Nykänen. Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto
Semanttinen Web Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: Semanttinen Web (SW) on
SISÄLLYSLUETTELO 1 JOHDANTO...2 2 META- JA MERKINTÄKIELI...2
SISÄLLYSLUETTELO 1 JOHDANTO...2 2 META- JA MERKINTÄKIELI...2 3 SGML...2 3.1 YLEISTÄ...2 3.2 RAKENNE...3 3.2.1 Elementti...3 3.2.2 DTD...3 3.2.3 Attribuutti...4 4 HTML...4 4.1 TAUSTAA...4 4.2 RAKENNE...4
3 Muotoilu 27. elementtiä käytetään ja miltä se näyttää selaimessa.
27 Tässä kappaleessa käydään läpi tekstin muotoiluun liittyvät elementit ja niiden käyttö. Lisäksi käydään läpi sivun ulkonäköön liittyvät elementit kuten taustaväri sekä sivun jaotteluun käytettävät elementit,
XML Technologies and Applications - harjoitustyö -
XML Technologies and Applications - harjoitustyö - TURUN YLIOPISTO Informaatioteknologian laitos Tietojenkäsittelytiede Harjoitustyö Helmikuu 2009 Jyri Lehtonen (72039) jyri.lehtonen@utu.fi (yksin tehty
Ajatus kaiken taustalla
HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen
Luento 12: XML ja metatieto
Luento 12: XML ja metatieto AS-0.110 XML-kuvauskielten perusteet Janne Kalliola XML ja metatieto Metatieto rakenne sanasto Resource Description Framework graafikuvaus XML Semanttinen Web agentit 2 1 Metatieto
05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne
Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1
Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
Digitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus
9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus XSL-muunnos voi tietenkin tuottaa myös tiettyyn nimiavaruuteen liittyviä kohdedokumentteja (tarvitaan aina jo esim. XHTML-sovelluksissa!) Helpoimmillaan
Digitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
Sivuston tiedotmysiteworthcheck.com
Sivuston tiedotmysiteworthcheck.com Luotu Huhtikuu 26 2019 09:24 AM Pisteet59/100 SEO Sisältö Otsikko Check you website value Pituus : 23 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 1/8: Informaation esitystapa
W3C-teknologiat ja yhteensopivuus
W3C-teknologiat ja yhteensopivuus Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: W3C asettaa
VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN
VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN Tämän tehtävän tarkoitus on tutustuttaa ympäristöön sekä tutustuttaa wwwdokumenttien tekoon php:llä. Alkutoimet Varmistetaan, että verkkolevyllä on kansio
W3C ja Web-teknologiat
W3C ja Web-teknologiat Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: World Wide Web Consortium (W3C) on kansainvälinen
HTML elementit. Sisällys
HTML elementit HTML elementit 1 Tämä dokumentti sisältää useimmat HTML 4.0 suosituksen elementit attribuutteineen. Kirjoitin tämän lähinnä perusteelliseksi referenssiksi, en perinteiseksi oppaaksi. Mukana
Ulkopuolisen tyylitiedoston käyttö
1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit
10 Tiedostot, dokumentit, tieto (&h-media)
10 Tiedostot, dokumentit, tieto (&h-media) Tietokoneet käsittelevät tietoa tiedostojen muodossa Tietokoneiden yhteydessä dokumentilla tarkoitetaan tiedosto(je)n avulla esitettävää asiakokonaisuutta, joka
9 XML perusteet
9 XML 1.0 - perusteet XML jakaa dokumenttien käsittelyn kaksitasoiseksi prosessiksi, jossa XMLprosessori ([processor]) lukee XML-tiedoston ja välittää tämän parsittuna sovellukselle ([application]). Käytännössä":
Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
Digitaalisen median tekniikat xhtml - jatkuu
Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1 Kehykset IFRAME - elementti (inline frame) mahdollistaa kehysten upottamisen myös muihin kuin frameset.dtd:n mukaisiin dokumentteihin IFRAME toimii
OPINNÄYTETYÖRAPORTTI WEB-STANDARDIT JA NIIDEN SOVELTAMINEN. Timo Sulanne Kimmo Tapala
OPINNÄYTETYÖRAPORTTI WEB-STANDARDIT JA NIIDEN SOVELTAMINEN Timo Sulanne Kimmo Tapala Tietojenkäsittelyn koulutusohjelma Joulukuu 2005 Työn ohjaaja: Rami Lehtinen TAMPERE 2005 Tekijät Koulutusohjelma Tutkintotyön
Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.
WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)
13 Tiedostot, dokumentit, tieto (&h-media)
13 Tiedostot, dokumentit, tieto (&h-media) Esimerkki: HTML-dokumentti Tietokoneet käsittelevät tietoa tiedostojen muodossa Tietokoneiden yhteydessä dokumentilla tarkoitetaan tiedosto(je)n avulla esitettävää
2 Rakenteisten dokumenttien perusteet
è è è Rakenteisten dokumenttien perusteet 2 Rakenteisten dokumenttien perusteet Kuten todettua, rakenteinen dokumentaatio tähtää tiedon mallintamiseen käytössä olevien välineiden mahdollisuudet huomioiden
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla
4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät
3 HTML 4 pintaa syvemmältä
3 HTML 4 pintaa syvemmältä Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
Mitä direktiivi käytännössä velvoittaa?
Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön
Sivuston tiedotwindowsrepublic.com.au
Sivuston tiedotwindowsrepublic.com.au Luotu Maaliskuu 28 2019 14:41 PM Pisteet48/100 SEO Sisältö Otsikko Windows Republic - upvc windows manufacturer and supplier in Melbourne Pituus : 70 Täydellistä,
Paikkatiedot ja Web-standardit
Paikkatiedot ja Web-standardit Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: World Wide
Digitaalisen median tekniikat Harri Laine 1
Digitaalisen median tekniikat 30.4.2004 Harri Laine 1 Kurssin sisällöstä Digitaalinen media on laaja käsite pitäen sisällään erilaisia digitaalisessa muodossa olevia dokumentteja ja niiden käsittelyä tekstiä
Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1
Digitaalisen median tekniikat xhtml - jatkuu 30.4.2004 Harri Laine 1 XHTML lomakkeet Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite
3 Verkkosaavutettavuuden tekniset perusteet
3 Verkkosaavutettavuuden tekniset perusteet Saavutettavuuden toteuttaminen edellyttää lähtökohtaisesti tietoa laitteista ja sovelluksista, käyttäjistä ja käyttötavoista, sekä tekniikasta. Tavoitteenamme
W3C: teknologia ja (tieto)yhteiskunta
W3C: teknologia ja (tieto)yhteiskunta Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: World Wide Web Consortium
CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola
CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti
Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi
CT30A3200 - WWW-sovellukset Luento 1 Jouni Ikonen - Jouni.Ikonen lut.fi linkki Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen CT30A3200 WWW-sovellukset Tämän luennon aiheet: Kurssin yleiset asiat
Digitaalisen median tekniikat xhtml - jatkuu
Digitaalisen median tekniikat xhtml - jatkuu 26.3.2004 Harri Laine 1 Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite
Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin
Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin Ossi Nykänen Tampereen teknillinen yliopisto, Hypermedialaboratorio, W3C Suomen toimisto Terveyden
6 Hypermediajärjestelmistä
6 Hypermediajärjestelmistä Lyhyt vilkaisu järjestelmätason hypermediaan. Hypermediasovellukseen liittyy aina kaksi näkökulmaa: lukijan ja laatijan näkökulma Hypertekstijärjestelmä (hypermediajärjestelmä)
Kurssin hallinta -työväline
Kurssin hallinta -työväline Kurssin hallinta -työvälineellä muokataan kursseja A&Ooppimisympäristöalustalla Kurssi koostuu - ohjelmasta (linkit työkaluihin& muihin resursseihin), - materiaaleista, - keskusteluryhmästä,
8 Kuvat, sovelmat ja objektit
97 Tässä kappaleessa käsitellään kuvien ja sovelmien (Applets) liittämistä HTMLdokumenttiin. Kuvia on periaatteessa olemassa kolmea päätyyppiä, tekstin sisäisiä, tekstin ulkoisia ja kolmanneksi kuvakarttoina