3 HTML 4 pintaa syvemmältä
|
|
- Toivo Aro
- 7 vuotta sitten
- Katselukertoja:
Transkriptio
1 3 HTML 4 pintaa syvemmältä Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <TITLE>Not my first HTML document</title> </HEAD> <BODY BGCOLOR="white"> <! insert your example here --> <P>Simon says: <Hello <B>world</B>!> </BODY> </HTML> Kerrataan HTML-dokumenttien käsitteitä ja syntaksia (oletetaan esim. HTML 3.2 perusteiltaan jo tunnetuksi). Mitä yllä oleva oikeastaan tarkoittaa? RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 42
2 Mikä tai mitä HTML on? HTML (Hypertext Markup Language) on hypertekstin merkkaamiseen tarkoitettu merkintäkieli HTML:n ensimmäiset versiot ovat ns. SGML-sovelluksia, viimeisimpänä HTML 4.01 (edelliset merkittävät saman linjan versiot ovat HTML 4.0, HTML 3.2 ja HTML 2.0) - HTML on kuvattu SGML:lla; syntaksi siten SGML:n mukaista - dokumenttien tyyppi on määritelty standardoidun & julkisen SGML-DTD:n muodossa - tyypillistä: kovakoodattu elementtien formatointi vs. tyylit Nykyään HTML:ää kehitetään XML:n kautta "seuraavan sukupolven HTML:nä": tuloksena XHTML 1.0, joka on ns. XML-sovellus Uusin HTML:n versio on XHTML RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 43
3 HTML-dokumentin esittelyosa HTML-dokumentti alkaa esittelyosalla (joka voi myös puuttua, tällöin "oletuksena on HTML 2.0"), esim: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Kyseessä on SGML-dokumentin "DTD:n ilmoittaminen" ([DOCTYPE declaration]), joka kertoo SGML-prosessorille sovitulla tavalla, että kyseessä on "HTML-tyyppinen dokumentti" yleensä HTML-dokumentteja lukevat ohjelmat ovat kuitenkin yleisiä SGML-prosessoreita huomattavasti spesifimpiä!! Viittaukset ISO-standardeihin (esim. +/- -liput ja kielikoodit) Ongelma: mitä DOCTYPEen tulee kirjoittaa, jos kuitenkin aiotaan käyttää esim. HTML:n Netscape-laajennuksia?? RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 44
4 HTML-dokumentin yleisrakenne HTML-dokumentin rakenne on määritelty HTML:n DTD:ssä tarkkaan, mutta syntaksi sallii runsaasti SGML:lle tyypillisiä lyhenne- ja sievennysmerkintöjä (esim. HTML-tagit[!] tai HEAD-osa voivat puuttua yms.) HTML-dokumentin yleisrakenne: - "prologi" DOCTYPE - "esiintymä" HTML HEAD BODY Selaimet tosin hyväksyvät melkein mitä vain (periaatteessa strict-muoto estää tämän) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 45
5 HTML-elementin attribuutit - DIR (ltr/rtl=tekstin suunta) - LANG (ISO-639-kielikoodi, esim. "en-us") - VERSION (kuten DOCTYPEssä, esim. "-//W3C//DTD HTML 4.0//EN", VERSION on poistuva ([deprecated]) HTML-piirre) HEAD-elementin attribuutit - DIR ja LANG kuten HTML-elementissä - PROFILE (URL-viittaus "profiilitiedostoon", jonka ideana on korvata META-koodien joukko) HEAD-elementin lapsielementit ovat käytännössä: BASE, LINK, TITLE, META, ISINDEX, NEXTID, SCRIPT, STYLE, OBJECT joista elementit SCRIPT ja STYLE voivat sijaita myös BODY-elementissä Kaikki loput HTML-elementit sijaitsevat BODY-elementissä Elementtien sijoittelulle ja kontekstille on olemassa erilaisia sääntöjä RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 46
6 Elementit ja attribuutit HTML-dokumentin rakenne muodostuu pääasiassa elementeistä Lailliset elementit ja niiden korrekti käyttö on kuvattu HTML-spesifikaatiossa (HTML 2.0, 3.2, 4.0, 4.01, jne.) Ks. HTML-esim: <BODY BGCOLOR="white"> <P>Ks. kuva <I>tyttö ja joutsen</i>: <IMG SRC="gspic.jpg" BORDER=0> </BODY> Elementtejä rajaavat alku- ja lopputagit, poikkeuksena tyhjät elementit Joidenkin elementtien, esim. tyhjien, lopputagi voidaan jättää pois Tagien tulee määrittää aidosti sisäkkäinen elementtirakenne ([proper nesting]) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 47
7 Osa elementeistä on tarkoitettu esitettäväksi lukijalle "suoraan", osa ei, esim: <HEAD> <TITLE></TITLE> <LINK REL=stylesheet HREF=fancy.css TYPE=text/css> <HEAD> <BODY> <P>Check this out!</p> Esitettävät (display-tyyppiset) elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) tai listatyylisiä objekteja ([list item]), vrt. esim: <h3>heading</h3> <b>plump</b> Fiction <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 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 48
8 Jotkut HTML-tagit ovat käytännössä redundantteja; esim. seuraava vastaa selaimessa yleensä vain yhtä kappalemerkintää: <P><P><P><P>Paragraph Huomaa termien elementti ja tagi eri merkitys: tagit merkitsevät elementin (elementtien merkitseminen tagien avulla parantaa niiden luettavuutta, toki myös muut menetelmät olisivat periaatteessa mahdollisia) Elementeille voidaan antaa sisällön lisäksi myös attribuutteja, joiden arvo määrätään tutun "="-operaation avulla elementin alkutagissa. Attribuuttien arvot ympäröidään lainaus- tai heittomerkein jos arvo ei sisällä tyhjämerkkejä ([white space]), voi lainausmerkit jättää pois Attribuuttimääritysten järjestyksellä ei ole merkitystä Jos selain ei ymmärrä tagia tai attribuuttia, jätetään se huomiotta (tästä seuraa kaikenlaisia ongelmia) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 49
9 Peruspalaset: 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, ) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 50
10 Entiteetit, merkkiviittaukset, metatieto ja objektit HTML-dokumentin sisään voi upottaa myös objekteja, joita HTML "ei sinällään tunne" (ks. "dokumenttijärjestelmistä"), esim. entiteettejä ja merkkiviittauksia, esim: <IMG SRC="pic.jpg"> Hyv&aml;&aml; y&oml;t&aml; ABC Myös vakiintunutta metatietoa käytetään laajasti, esim: <meta http-equiv=refresh content=0;url=./dir.cgi> <meta name="keywords" lang="en" content="73275, rakdok"> Objektien käsittely HTML-kielen ulkopuolella (OBJECT ja EMBED -tagit) Lisää ominaisuuksia: skriptit (SCRIPT) ja appletit (APPLET & OBJECT) - Java, JavaScript, VBScript, RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 51
11 Kommentit Myös kommenttien käyttö on mahdollista (ei sisäkkäisyyttä, eikä merkkijonoa "- -"), esim: <!-- fix this when the address changes! --> Kommenttien syntaksi tulee suoraan DTD-määritysten syntaksista (tämä käy selvemmin ilmi myöhemmin XML:n yhteydessä) Alkuperäisen tarkoituksen lisäksi kommentteja on alettu laajasti käyttää myös prosessointiohjeiden ([processing instruction]) tavoin Tällöin tyypillistä on kommenttien käyttö esim. ohjauskoodeina, tyyliin Server Side Include (SSI): <!--#komento määrittely1="arvo1" määrittely2="arvo2"--> Esim. <!--#echo var="document_name"--> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 52
12 Myös täysin mielivaltainen käyttäminen on mahdollista, totta kai: <!--MYCODE1 MYPARAM1 MYCOMMENT1 MYJOKE1 MYCODE2 MY --> HTML 4 pintaa syvemmältä Kommenttien käyttö prosessointiohjeina aiheuttaa yleensä päänvaivaa kun ohjelmistoja päivitetään tai muutetaan (osittaisen pelastuksen tuo kuitenkin se, että kommentit välittyvät sellaisenaan niitä käsittelevälle sovellukselle) Kommentteja voidaan käyttää myös omien rakenne-elementtien määrittelyyn Kommenttimerkinnät ovat erittäin laajasti käytössä (esim. MS & Macromedia) Jatkuva omien koodien kirjoittaminen kommenttien muodossa on hyvä merkki siitä, että työtä ei ehkä kannattaisikaan tehdä HTML-dokumenttina, vaan esim. XML-dokumenttina (jos mahdollista) ja määritellä omat elementit XML:llä Jos HTML:ää kuitenkin halutaan, tai on pakko käyttää, voidaan HTML käytännössä laajentaa tyylien avulla "köyhän miehen XML:ksi" (esim. DIV- ja SPAN-tageilla [tähän palataan myöhemmin]) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 53
13 Hypertekstilinkit Hypertekstiä syntyy erityisen ankkuri-elementin avulla. <A HREF=" <A HREF="../pervious.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. 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! RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 54
14 Kehykset Selaimen hierarkkisen ikkunarakenteen määrittäminen tapahtuu kehysten avulla (~linkkikontekstit; kehykset näkyvät yleensä ruudukkona yhden fyysisen käyttöliittymätason ikkunan sisällä) Määritys tapahtuu BODY-elementin korvaavan FRAMESET-elementin avulla, esim: <HTML> <TITLE>My Frame layout<title> <FRAMESET COLS="150,*"> <FRAME SRC="menu.html" NAME="menuwindow"> <FRAME SRC="intropage.html" NAME="contentwindow"> <NOFRAMES> Oh dear, it seems that your browser doesn't support frames </NOFRAMES> </FRAMESET> </HTML> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 55
15 Linkkien avautumisikkunan osoittaminen tapahtuu TARGET-attribuutilla <A HREF="story1.html" TARGET="contentwindow">Hello</A> Ellei toisin määrätä, linkit aukeavat siihen ikkunaan, jossa linkin alkupää sijaitsee. Oletuskohteen uudelleen määrittäminen tapahtuu BASE-elementillä: <HEAD><BASE TARGET="contentwindow"></HEAD> HTML 4.0:n myötä myös ns. inline-kehysten (ns. kelluva kehys) käyttö on periaatteessa mahdollista IFRAME-koodin avulla: <P>Please select a category and read the description: <IFRAME SRC="myframes.html" WIDTH="150" HEIGHT="100" ALIGN="RIGHT"> Sorry, your browser doesn't support inline frames! (What if you visited <A HREF=" while waiting the next software version?) </IFRAME> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 56
16 Muita ominaisuuksia Kuvakartat, esim: <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> </OBJECT> <MAP name="map1"> <A href="guide.html" shape="rect" coords="0,0,118,28">access Guide</A> <A href="search.html" shape="circle" coords="184,200,60">search</a> </MAP> Lomakkeet, esim: <FORM action=" method="post"> <P> First name: <INPUT type="text" name="name"><br> Last name: <INPUT type="text" name="comment"><br> <INPUT type="submit" value="send"> <INPUT type="reset"> </P> </FORM> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 57
17 Taulukot, esim: <TABLE border="1" summary="some statistics"> <CAPTION><EM>A test table with merged cells</em></caption> <TR><TH>Males<TD>1.9<TD>0.003<TD>40% <TR><TH>Females<TD>1.7<TD>0.002<TD>43% </TABLE> HTML 4.0 "uutuutena" myös esim. INS ja DEL -tagit (ns. editorimerkinnät) Tyylit ja skriptit: <P style="font-size: 12pt; color: fuchsia"> Aren't style sheets wonderful? - Yes but not like this!</p> <a href="topic.html" onclick="myfun();">see stats</a> for more Pyrkimys kohti deklaratiivista merkkausta ja proseduraalisten ulkoasumääritysten erottamista HTML-dokumenteista ("esiintymä"-osasta)! RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 58
18 Yleisiä huomioita HTML-dokumenteista ja niiden kirjoittamisesta Osa määrityksestä olettaa toisten spesifikaatioiden olemassaolon (kielikoodit ja linkkiviittaukset, tagit IMG, FORM, SCRIPT, APPLET, OBJECT, ) Osa tageista voidaan pudottaa pois, lopputagien käyttö ei ole aina pakollista, attribuuttien arvot eivät tarvitse aina lainausmerkkejä Elementtien järjestys ei ole aina tarkkaa ja isot ja pienet kirjaimet eivät ole merkittäviä elementtien nimissä Ns. tyhjämerkit normalisoidaan HTML-dokumentteja parsittaessa; esim. elementtien sisennys välilyönneillä tai tabulaattoreilla ei vaikuta koodeihin (poikkeuksena selainparserien pikkumokat) Esitysvaiheessa tyhjämerkit sievennetään elementtien sisällön osalta vastaavasti (+poikkeukset, kuten esim. PRE-tagi) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 59
19 Osa elementeistä on kontekstisidonnaisia, osa ei, vrt. esim: <HR> <B>moi</B> <TABLE><TR><TD>Cell</TABLE> <ul> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ul> HTML 4 pintaa syvemmältä Selain päättää viime kädessä dokumentin ulkoasusta, tosin ulkoasumääritykset voidaan irrottaa dokumenteista tyylimääritysten (CSS, JSS, ) avulla Palstoitus yms. sivuntaitto tehdään usein taulukoiden avulla (vaikka ei pitäisi) Yleisesti käytössä oleva "HTML"-koodisto on käytännössä varsin kirjavaa - Sekaisin rakenne-, ulkoasu- ja metakoodeja - HTML-version 4.0 mukaiset koodit vs. vanhempien HTML-versioiden koodit, joista osa on poistumassa standardista ([deprecated]) - esim. META-koodin kautta välitettävät sovelluskohtaiset koodit - HTTP-palvelinohjelmien tunnistama (esim. kommentti)koodaus - suurten palveluntarjoajien ja ohjelmistotalojen käyttämät, "selainlaajennukset", kommenttikoodit ja omat mv. koodit RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 60
20 Käytössä on virallisestikin eri HTML-versioita (läh. HTML 3.2, 4.0, 4.01 ja XHTML 1.0) ja näiden tyyppimäärityksiä (strict, transitional, loose) Uusia ominaisuuksia ja käyttötapoja tulee koko ajan lisää vielä erilaisten selainlaajennusten (plug-in, ActiveX yms.) ja integroitujen WWWylläpitotyökalujen kautta Kaikkia HTML 4.0 -standardissa esitettyjä osia ei tueta yleisesti lainkaan, ei ainakaan oikein Harkitut "selainsodat" haittaavat "cross-platform" -kehittäjän työtä joskus tarkoituksellisestikin (osa ongelmista tosin ratkennee "itsestään") - HTML-dokumenttien "oikein muodostettu rakenne" - Java-virtuaalikoneet ja JavaScript vs. VBScript - dokumenttimallien eroavaisuudet eri selaimissa - tyylikielten eri tulkinnat - Java, ActiveX, JavaBean, yms. sotkut - IE5:n rooli osana Windows-käyttöjärjestelmää (esim. ohjelmien päivitys) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 61
21 HTML-parsereista Vanhan käytännön mukaisesti HTML-dokumentteja parsitaan "ymmärtäväisellä" asenteella - selaimet ohittavat virheet ja tuntemattomat koodit ellei toisin määrätä - "luovat arvaukset" (esim. "<" ja ">" -merkit) - selainten ja selainversioiden erot! On kuitenkin olemassa myös validoivia HTML-parsereita, joiden avulla myös HTML-dokumenttien kielioppi ja rakenne on mahdollista tarkastaa: ks. esim: - W3C HTML Validation Service ( ) Validius ei kuitenkaan takaa sitä, että elementtejä on käytetty deklaratiivisen merkkauksen hengessä "oikein"! Koska HTML 4.01 on SGML-sovellus, onnistuu validien HTML-dokumenttien käsittely myös "yleisillä" SGML-editoreilla ja selaimilla Koska XHTML 1.0 on XML-sovellus, onnistuu validien XHTML-dokumenttien käsittely myös "yleisillä" XML-editoreilla ja selaimilla RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 62
22 Miten HTML-kieli on määritelty? Laillinen elementtirakenne annetaan HTML 4.01 DTD:ssä SGML:n tyyppimäärityskielen mukaisina "sääntöinä" tyyliin: <!ENTITY % attrs "%coreattrs; %i18n; %events;"> <!-- Unordered Lists (UL) bullet styles --> <!ELEMENT UL - - (LI)+ -- unordered list --> <!ATTLIST UL %attrs; -- %coreattrs, %i18n, %events -- > Idea on selvä: määrityksessä esitellään HTML-dokumentin looginen kielioppi Se, miten koodeja "pitää käyttää" tai mitä ne "tarkoittavat" kerrotaan sanallisesti tai esitetään esimerkkien avulla Yo. esimerkissä on helposti tunnistettavia osia: elementtimerkinnät (erityisesti "<"- ja ">"-merkit) kommentit, elementtien nimet, säännölliset lausekkeet, Yksinkertaisten omien elementtien määrittely olisi käytännössä hyödyllistä ja periaatteessa helppoa, mutta HTML 4.01 ei tähän mahdollisuutta tarjoa RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 63
23 Katso myös Simppeli HTML-tutoriaali aloittelijoille, "Getting started with HTML" (ks. ) HTML 4.01 (ks. ) josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" (ks. ) XHTML 1.0 (ks. ) HTML 3.2 (ks. ) Vaikka selaimet eivät HTML-dokumentteja kriittisesti parsikaan, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. hypertext/hypertext/www/markup/markup.html ) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 64
24 HTML ja XHTML 4 HTML ja XHTML Ensimmäinen XML-kieliopin mukainen HTML-versio on XHTML 1.0 (Extensible HyperText Markup Language) - XHTML 1.0 on HTML 4 -kuvauskielen XML-kieliopin mukainen uudelleenmuotoilu - kärjistys: XHTML säilyttää HTML 4-kuvauskielen elementtien nimet ja tulkinnan entisellään XHTML 1.0 jakaantuu (HTML 4.01:n tapaan) kolmeen dokumenttityyppiin: - XHTML 1.0 Strict koostuu pelkästään rakenteen kuvaamiseen tarkoitetuista elementeistä ja attribuuteista (ulkoasu määritellään tyylitiedostoilla) - XHTML 1.0 Transitional sisältää edelleen joukon dokumentin ulkoasuun liittyviä ominaisuuksia (esimerkiksi body-elementin bgcolor-, text- ja linkattribuutit) - XHTML 1.0 Frameset on identtinen Transitional-määrityksen kanssa, paitsi: kehysten määrittelemiseen tarvittava frameset-elementti korvaa bodyelementin RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 65
25 HTML ja XHTML Miksi XHTML? XHTML on XML-sovellus - suuri osa W3C:n uusista suosituksista perustuu XML:ään yhteensopivuus XHTML mahdollistaa XML:n uusien ominaisuuksien hyödyntämisen - erityisesti uusien elementtien esittely (ei mahdollista SGML-pohjaisissa HTML-versioissa, paitsi DIV- ja SPAN-tagit sekä class-attribuutti) laajennettavuus W3C:n "Modularization of XHTML" määrittelee HTML-sanaston jakamisen tarkoituksenmukaisiin osiin (moduuleihin) - yksittäisessä dokumentissa käytetyt tai tietyn sovelluksen (esim. selain) tukemat HTML-kielen ominaisuudet voidaan yksilöidä tarkemmin modulaarisuus profilointi RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 66
26 HTML ja XHTML XHTML Basic pienin yhteinen tekijä XHTML Basic kokoaa yhteen joukon moduuleita siten, että - moduuleiden sisältämät ominaisuudet on mahdollista toteuttaa myös yksinkertaisessa päätelaitteessa (kännykkä, PDA, digi-tv-päätelaite) - moduuleiden sisältämien ominaisuuksien avulla on mahdollista toteuttaa järkeviä sivustokokonaisuuksia XHTML Basic mahdollistaa esimerkiksi nämä: - perusteksti (sisältäen otsikot, kappaleet ja listat) - hyperlinkit ja linkit esim. tyylitiedostoihin - yksinkertaiset lomakkeet - yksinkertaiset taulukot - kuvat - metatieto RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 67
27 HTML ja XHTML Huomioita XHTML:n kirjoittamisesta Elementtirakenteiden on oltava aidosti sisäkkäisiä, esim: <p>very <em>important</em> text.</p> - HUOM: sääntö on voimassa myös SGML:n mukaisissa HTML-versiossa mutta selaimet eivät tuota yleensä tarkasta Elementtien ja attribuuttien nimet kirjoitetaan pienellä (XML erottelee isot ja pienet kirjaimet) Elementin lopputagi on aina lisättävä, esim: <ul> <li>eka</li> </ul> Vaihtoehtoisesti käytetään tyhjän elementin tagia, esim: <hr /> - HUOM: tyhjän elementin tagissa kannattaa lisätä rivinvaihto ennen "/"- merkkiä (parantaa yhteensopivuutta vanhojen selainten kanssa) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 68
28 Attribuutin arvon ympärillä on aina käytettävä lainausmerkkejä, esim: <td colspan="3"> Yksinkertainen XHTML-dokumentti: HTML ja XHTML <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>virtual Library</title> </head> <body> <p>moved to <a href=" </body> </html> Huomaa: dokumentin syntaksi on XML:n mukainen mutta elementtien ja attribuuttien nimet (muutamaa lukuun ottamatta) ovat tuttuja vanhoista HTMLversioista. Loput opitaan XML:n mukana RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 69
29 HTML ja XHTML XHTML on HTML:n tulevaisuus Nykyinen ja tuleva W3C:n tekemä HTML-kuvauskielen kehitystyö liittyy pelkästään XHTML:ään Uusin HTML-kielen versio on XHTML perustuu XHTML 1.0 Strict dokumenttityyppiin ja moduuleihin - suunniteltu toimimaan pohjana tuleville XHTML-perheen määrityksille XHTML 2.0 on jo kehitteillä Lisätietoa: - XHTML 1.0: - XHTML Basic: - Modularization of XHTML: - XHTML 1.1: RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 70
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.
Lisätiedot4 WWW-hypermedian perusta: HTML. Kehykset
Kehykset Selaimen hierarkkisen ikkunarakenteen määrittäminen tapahtuu kehysten (frame) avulla (~linkkikontekstit; kehykset näkyvät yleensä ruudukkona yhden fyysisen käyttöliittymätason ikkunan sisällä)
LisätiedotSisä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
LisätiedotTyylien 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
Lisätiedot3 Sivupolku: metaforat & selittäminen
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,
Lisätiedot3 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
Lisätiedotkevät Rakenteiset dokumentit (3 ov) Luentokalvot Ossi Nykänen Rakenteiset dokumentit (3 ov)
73275 Rakenteiset dokumentit (3 ov) 73275 Rakenteiset dokumentit (3 ov) kevät 2002 Luentokalvot Ossi Nykänen ossi.nykanen@cc.tut.fi 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 1 73275 Rakenteiset
LisätiedotH 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
LisätiedotProseduraalinen 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
LisätiedotH 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
LisätiedotXML, 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
LisätiedotHTML & 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
Lisätiedot3 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
Lisätiedot2. 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 &
LisätiedotWWW-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
LisätiedotCode 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ö,
LisätiedotJohdatusta 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
LisätiedotXHTML 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
LisätiedotHTML-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
LisätiedotHTML-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
Lisätiedot3 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
LisätiedotM. Merikanto 2012 XML. Merkkauskieli, osa 2
XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao
LisätiedotAjatus 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
LisätiedotCascading 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
Lisätiedot2.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
LisätiedotXML 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
LisätiedotProseduraalinen 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
LisätiedotXHTML - 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),
LisätiedotXML 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
LisätiedotHTML 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
Lisätiedot3 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
Lisätiedot9 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ä":
LisätiedotDigitaalisen 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
LisätiedotVaasan 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:
LisätiedotUlkoasun 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
LisätiedotDigitaalisen 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
LisätiedotJohdatus rakenteisiin dokumentteihin
-RKGDWXVUDNHQWHLVLLQGRNXPHQWWHLKLQ 5DNHQWHLQHQGRNXPHQWWL= rakenteellinen dokumentti dokumentti, jossa erotetaan toisistaan dokumentin 1)VLVlOW, 2) UDNHQQHja 3) XONRDVX(tai esitystapa) jotakin systemaattista
LisätiedotDigitaalisen 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
LisätiedotDigitaalisen 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
LisätiedotXML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen
XML kielioppi Elementtien ja attribuuttien määrittely Ctl230: Luentokalvot 11.10.2004 Miro Lehtonen Dokumenttien mallinnus Säännöt dokumenttityypeille 3Mahdollisten dokumenttirakenteiden määrittely Samassa
LisätiedotT-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot
T-111.361 Hypermediadokumentin laatiminen -Ohjelmointi Peruskäsitys www-ohjelmoinnin kentästä Tekniikat interaktiivisuuden toteuttamiseen tekniikat tekniikat Tietokannat Juha Laitinen TKK/TML juha.laitinen@hut.fi
LisätiedotLuento 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ä
LisätiedotInternetsivujen 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
LisätiedotXML / 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
LisätiedotTaulukot. 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
LisätiedotUlkopuolisen 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
LisätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotDigitaalisen 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ää
LisätiedotHTML 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ä
LisätiedotKun 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ö)
LisätiedotNotepad++ 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
LisätiedotDigitaalisen 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
Lisätiedot05/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
Lisätiedot05/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
LisätiedotTIEDEJUTTUKURSSI 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
LisätiedotEntiteetit 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.
LisätiedotVerkkosivut 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
LisätiedotDigitaalisen 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ää
LisätiedotDigitaalisen 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ää
LisätiedotTuotteiden tiedot: Lisää uuden tuotteen tiedot. Muuta tai poista tuotteen tiedot. Selaa kaikkien tuotteiden tietoja.
laskutus_index http://media.stadia.fi/~0700527/laskutus/laskutus_index.html Sivu 1/1 13.12.2007 Laskutus -tietokanta Henkilöiden tiedot: Lisää uuden henkilön tiedot Muuta tai poista henkilön tiedot Selaa
LisätiedotCSS - 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
Lisätiedot2 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
LisätiedotCSS 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
LisätiedotVERKKOSOVELLUSTEN 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
LisätiedotSivuston 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
LisätiedotXML 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
Lisätiedot3 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,
LisätiedotMITÄ 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
LisätiedotAulikki 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
LisätiedotKotisivujen 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#
LisätiedotDigitaalisen median tekniikat. JSP ja XML Harri Laine 1
Digitaalisen median tekniikat JSP ja XML 28.4.2004 Harri Laine 1 JSP hyvin lyhyesti JSP on Java-pohjainen skriptikieli JSP:llä laadittu sivu käännetään java-servletiksi (sivun toteutus vastaa servlettiluokan
LisätiedotXML rakenteen suunnittelu. Jaana Holvikivi
XML rakenteen suunnittelu Jaana Holvikivi XML suunnittelu Dokumentin ilmentymä elementit attribuutit (määritteet) entiteetit prosessointikäskyt 19.3.2015 Jaana Holvikivi 2 Elementtien sisäkkäisyys: säännöt
LisätiedotCtl160 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
LisätiedotDigitaalisen 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
Lisätiedot6 DTD ja dokumentin tyyppimääritys
6 DTD ja dokumentin tyyppimääritys Tietojenkäsittelyssä päähuomio ei yleensä ole tiedon matalan tason formaatissa vaan sovelluksissa joissa tietoa käytetään loogisesti jäsennettynä. XML-merkkaus tarjoaa
LisätiedotDigitaalisen 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
LisätiedotICT1TN004. Lomakkeet. Heikki Hietala
Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen
LisätiedotKylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.
Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.
Lisätiedot4. 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,
Lisätiedotvalitsin 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
Lisätiedot6 XML-työkalut 1. 6 XML-työkalut
6 XML-työkalut 1 6 XML-työkalut XML:n periaatteiden tutustumisen jälkeen on helpompi tutustua XML-dokumenttien käsittelyyn ja katseluun suunniteltuja työkaiuja. XML:n yleistymisen pahin pullonkaula on
LisätiedotDigitaalisen median tekniikat. JSP ja XML
Digitaalisen median tekniikat JSP ja 28.4.2004 Harri Laine 1 JSP hyvin lyhyesti JSP on Java-pohjainen skriptikieli JSP:llä laadittu sivu käännetään java-servletiksi (sivun toteutus vastaa servlettiluokan
LisätiedotXML-merkkaus. Merkkidata, prosessointikomennot, kommentit
XML-merkkaus Merkkidata, prosessointikomennot, kommentit Merkkidata Elementtien ja attribuuttien arvot 3Merkkijonot elementtien tunnisteiden välissä 3Attribuuttien arvot 3Kielletyt merkit < & Voidaan korvata
Lisätiedot12 Dokumenttiluokan toteuttamisesta
12 Dokumenttiluokan toteuttamisesta Tyypillisiä XML-sovellutuksia ovat esimerkiksi: - annettuun käyttötarkoitukseen räätälöity dokumenttityyppi (esim. painotalon ABC malli käsikirjoituksen rakenteelle)
LisätiedotSivuston tiedotqbsupportcustom erservice.com
Sivuston tiedotqbsupportcustom erservice.com Luotu Kesäkuu 04 2019 09:57 AM Pisteet69/100 SEO Sisältö Otsikko Quickbooks Customer Service 800-329-0391 QB Phone Number Pituus : 58 Täydellistä, otsikkosi
LisätiedotW3C & 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)
LisätiedotPalvelinpuolen ohjelmointi
Palvelinpuolen ohjelmointi Staattiset ja dynaamiset web-sivut Staattiset web-sivut ovat valmiissa muodossaan palvelimella (tai paikallisesti omalla koneella). Javascript mahdollistaa paikalliset dynaamiset
LisätiedotSivuston tiedotprintersupportnu mbercare.com
Sivuston tiedotprintersupportnu mbercare.com Luotu Kesäkuu 22 2019 20:58 PM Pisteet65/100 SEO Sisältö Otsikko HP Printer Support Phone Number +1-855-924-8222 Printer Support Pituus : 63 Täydellistä, otsikkosi
LisätiedotSivuston tiedotgoogle.com
Sivuston tiedotgoogle.com Luotu Tammikuu 14 2019 10:26 AM Pisteet37/100 SEO Sisältö Otsikko Google Pituus : 6 Ihannetapauksessa, sinun otsikkosi pitäisi sisältää väliltä 10 ja 70 kirjainta (välilyönnit
LisätiedotLaajuus 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
LisätiedotXML johdatus: DTD. Jaana Holvikivi
XML johdatus: DTD Jaana Holvikivi Dokumenttityypin rakennemäärittely DTD = kielioppi esim. XML- esitykselle Elementit Attribuutit Entiteetit ja notaatiot Prosessointikomennot DTD:n suunnittelu 19.1.2013
LisätiedotSivuston tiedotakcpshop.de.websiteoutlook.com
Sivuston tiedotakcpshop.de.websiteoutlook.com Luotu Heinäkuu 19 2019 10:32 AM Pisteet67/100 SEO Sisältö Otsikko Akcp-shop : AKCP SHOP Online Shop für sensorprobe, securityprobe und AKCP Sensoren Pituus
LisätiedotKorpusten käsittely clt131, P Luento 6
Korpusten käsittely clt131, P2 2006 Luento 6 Nicholas Volk 8.12.2006 Humanistinen tiedekunta Syöterivien lukemista while () { käsky1; käsky2; käskyn; } continue { print $_; }
LisätiedotJohdatus XML teknologioihin
Johdatus XML teknologioihin Metropolia J. Holvikivi XML metakieli Extensible Markup Language rakenteellinen esitystapa tiedon vaihtoon, talletukseen, yhdistämiseen ja julkaisemiseen yleinen rakenteenkuvauskieli,
LisätiedotSivuston tiedotmp3list.pro
Sivuston tiedotmp3list.pro Luotu Kesäkuu 06 2019 13:16 PM Pisteet52/100 SEO Sisältö Otsikko Download free music - mp3 songs and Pituus : 42 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus
LisätiedotSivuston tiedotqbooksupportpho nenumber.com
Sivuston tiedotqbooksupportpho nenumber.com Luotu Kesäkuu 07 2019 05:06 AM Pisteet74/100 SEO Sisältö Otsikko QuickBooks Support Phone Number +1-844-233-5335 Telephone Support Pituus : 67 Täydellistä, otsikkosi
LisätiedotDigitaalisen 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ä
LisätiedotSivuston tiedotreviewproducts.org
Sivuston tiedotreviewproducts.org Luotu Heinäkuu 28 2019 14:31 PM Pisteet50/100 SEO Sisältö Otsikko Review-products.org our product reviews will help you in choosing and placing your order Pituus : 90
LisätiedotVerkkojulkaiseminen Minna Väisänen. HTML5-tehtävä
Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.
LisätiedotTee 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
Lisätiedot