Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/20/2014
|
|
|
- Urho Mäki
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aulikki Hyrskykari Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista, erikoismerkeistä, merkistökoodauksista o elementtien luokittelu ja sisältömallit Tällä kertaa o vertaisarvioinnit o kertausta elementtien sisältömalleista o attribuuteista globaalit attribuutit o <head> osan sisältö o <body> osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön ryhmittely - tekstitason semanttinen merkkaus
2 Arvioitava työ Antamasi pisteet Kommenttisi työstä Aiemmin HTML elementit jaettiin lohkotason ja rivitason (block ja inline) elementteihin o lohkotason elementti erottuu ympäristöstään rivin vaihdoin (esim. <p> elementti) o rivitason elementti merkkaa tekstiä kappaleen sisällä ( esim <strong> elementti) HTML5:ssä elementit jaetaan useampaan luokkaan Pääluokat ovat o phrasing elementit (~rivitason elementtejä) o Flow elementit (~lohkotason elementtejä)
3 Spesifikaatio luokittelee elementit hienojakoisemmin Luokat ovat päällekkäisiä, ts. yksi elementti voi kuulua useampaan luokkaan ks. elementtien luokitteluluettelot HTML spesifikaatiosta: models diagrammi löytyy suoraan osoitteesta venn.svg Mihin luokittelua tarvitaan? o kullekin elementille määritelty sisältömalli (content model) o kuvaa millaista sisältöä elementti voi saada, esim. - tyhjä HTML elementti (void element), ei mitään, - vain tietyn määrätyn elementin (määrättyjä elementtejä), - vain phrasing sisältöä tai väljemmin - flow sisältöä. Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa omassa kontekstissaan Yhtäsuuruusmerkin molemmin puolin saa olla välilyönti, tai se voi puuttua. Jos attribuutti on Boolean tyyppinen o HTML5 syntaksin mukaan ei tarvitse antaa arvoa o pelkkä attribuutin esittäminen vastaa silloin attribuutin "true" arvoa o esim. <input disabled> HML5:ssä on joukko attribuutteja, jotka voidaan osoittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan globaaleiksi attribuuteiksi.
4 Kaikille elementeille voi antaa mitkä tahansa näistä attribuuteista Kunkin elementin määrittelyn yhteydessä määritellään erikseen mitä muita attribuutteja elementti voi saada Joidenkin globaalien attribuuttien merkitys (esim titleattribuutti) saattaa olla eri elementeille määriteltynä hiukan erilainen. Globaalit attribuutit ovat: accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate id syntaksi: <anytag id="merkkijono"> Antaa elementille yksikäsitteisen tunnuksen o koko dokumentissa vain yksi elementti, jolla ko. tunnus <h1 id="osa contact">yhteystiedot</h1> Elementtiin viitataan käyttäen # merkkiä, esimerkiksi o tyylisäännöissä: #osa contact: background color:yellow; o linkissä: <a href= #osa contact >yhteystietoihin</a> [W3C] [W3C non normative] [MDN] [w3school]
5 syntaksi: <anytag class="luokan nimi"> Määrää elementin kuuluvaksi tiettyyn luokkaan Elementtiin voi tyylisäännöissä viitata luokkanimen avulla o dokumentissa useita ko. luokkaan kuuluvia elementtejä <p class="insertti"> Tämän tyyppisille tekstipaloille halutaan määritellä oma tyylinsä, siksi sille on määritelty luokkanimi, jonka avulla sille voi kohdistaa muotoilusääntöjä css tiedostosta. </code> Luokan elementteihin viitataan käyttäen pistettä, esimerkiksi tyylisäännössä.insertti: font style:italics; class [W3C] [W3C non normative] [MDN] [W3School] accesskey määrittää yhden tai useampia näppäimistö oikoteitä elementin aktivoimiseksi contenteditable määrää voiko elementin sisältöä muokata contextmenu dir draggable dropzone hidden lang spellcheck style tabindex title translate liittää elementille konteksisensitiivisen ponnahdusvalikon määrittää tekstin kirjoitussuunnan (left to right, right to left tai jätetään ohjelmallisesti määriteltäväksi) määrittää voiko elementtiä raahata vai ei määrittää miten raahattavaa kohdetta käsitellään jos se tiputetaan elementin päälle mahdollistaa elementin piilottamisen ts. kääntämisen pois näkyvistä kertoo elementin kirjoittamisessa käytetyn kielen Muut globaalit attribuutit määrää suoritetaanko elementin tekstisisällölle automaattinen oikeinkirjoitustarkistus mahdollistaa CSS sääntöjen kirjoittamisen elementin sisään (sääntö kohdistuu silloin vain ko. elementtiin) määrittää, että elementti voi saada fokuksen, ja missä järjestyksessä selaus tapahtuu liittää elementtiin tooltip tyyppistä lisäinformaatiota (älä sekoita <title> elementtiin) määrittää, käännetäänkö elementin (ja sen lasten sisältämä) teksti, kun sivusta tehdään lokasoitu versio, koskee myös attribuutteja ja niiden sisältöä
6 HTML dokumentissa voi olla vain yksi otsikko osa määrittelee koko dokumenttia koskevia yleisiä tietoja <base> <link> <script> <style> <title> <meta> <base> <link> oletuspolku dokumentissa viitatuille linkeille, dokumentissa saa olla vain yksi <base> elementti määrittää mistä dokumentissa käytetty resurssi löytyy <script> esittelee sivulla käytetyt selainpuolen ohjelmat <style> <title> <meta> määrittää tekstin kirjoitussuunnan (left to right, right to left tai jätetään ohjelmallisesti määriteltäväksi) dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona määrittelee sellaisia metatietoja, joita muiden meta elementtien avulla ei saa määrittellyksi (esim. merkistökoodaus, avainsanoja hakukoneillle, sisällön kuvaus)
7 dokumentin sisältö kirjoitetaan <body> elementin sisään, runko osassa o määritellään dokumentin rakenne o ryhmitellään dokumentin sisältö o merkitään tekstin semanttiset osat WWW sivun elinaika voi olla pitkä o saatetaan tulevaisuudessa katsella hyvinkin erilaisissa olosuhteissa o laitteen näytön koko voi vaihdella pienestä taskulaitteesta todella isoon paneelinäyttöön o renderöinti voi olla paitsi visuaalista, vaikkapa auditiivista (ruudunlukija) tai kosketukseen perustuvaa (braille näytöt) o kuka tietää millaisia laitteita tulevaisuus tuo tullessaan Sivun semanttisen sisällön tunnistaminen auttaa tekemään kuhunkin ympäristöön osuvamman ja selkeämmän tukinnan
8 Elementit dokumentin rungossa välittävät dokumentin osien o semanttisen roolin, merkityksen o ei oteta kantaa siihen, miten sisältö renderöidään selaimen ikkunassa, tai jonkun muun laitteen näytöllä / avulla Asiakasohjelman (user agent, selain) on tärkeätä tietää mikä renderöitävän tekstin merkitys dokumentissa on o ruudunlukija saattaa esimerkiksi lukea otsikot hitaammin tai erisävyisellä äänellä kuin muu teksti o selaimet voivat käyttää semanttista merkkausta apunaan luodessaan selaustoimintoja, ruudunlukijan voi pyytää lukemaan vain otsikot, hyppäämään yhteystietoihin, menemään suoraan alaviitteeseen, jne. o verkossa toimivat robottiohjelmat käyttävät semanttista merkkausta hyväkseen - esim. hakukoneet voivat tarjota merkkausta hyväkseen käyttäen sivustosta selkeän, sivuston rakennetta kuvaavan pikalinkkikokoelman o W3C outline algoritmin määritys : rakenne Dokumentin jakaminen semanttisesti merkityksellisiin osiin <address>, <h1>..<h6>, <hgroup> <section>, <article>, <aside>, <header>, <footer>, <nav>
9 Ennen otsikot olivat ainoa tapa jäsentää dokumentin rakennetta: <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>dokumentin rakenteen määrittely</title> </head> 01 a dokumentin rakenne.html <body> <h1>1 Otsikko</h1> <p> Lorem... </p> <h1>2 Otsikko</h1> <p> Lorem... </p> <h2>2.1 Otsikko</h2> <p> Lorem... </p> <h3>2.1.1 Otsikko</h3> <p> Lorem... </p> <h3>2.1.2 Otsikko</h3> <p> Lorem... </p> <h2>2.2 Otsikko</h2> <p> Lorem... </p> <h3>2.2.1 Otsikko</h3> <p> Lorem... </p> </body> <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <h1>2 Otsikko</h1> > <section> <h1> 2.1 Otsikko</h1> > <section> <h1>2.1.1 Otsikko</h1> > </section> <section> <h1>2.1.2 Otsikko</h1> </section> </section> <section> <h1>2.2 Otsikko</h1> <section> <h1>2.2.1 Otsikko</h1> </section> </section> </body> 01 b dokumentin rakenne.html <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <h1>2 Otsikko</h1> > <section> <h2> 2.1 Otsikko</h2> <section> <h3>2.1.1 Otsikko</h3> </section> <section> <h3>2.1.2 Otsikko</h3> </section> </section> <section> <h2>2.2 Otsikko</h2> <section> <h3>2.2.1 Otsikko</h3> </section> </section> </body> 01 c dokumentin rakenne.html
10 Viimeinen edellisistä (ainankin tällä hetkellä) suositeltu tapa o ruudunlukijat eivät (toistaiseksi) jäsennä otsikkotasoja dokumentin osien sisältä, vaan turvautuvat suoraan käytettyyn <h1>..<h6> elementtiin o Bruce Lawson: Headings in HTML5 and accessibility, in html 5 and accessibility/ o HTML5 Doctor: The section element, sectionelement/). Yksinkertaistaa myös otsikoiden muotoilua o eri tasoiset otsikoi voi edelleen muotoilla suoraan määrittämättä sen tasoa section hierarkiassa Saattaa aluksi tuntua monimutkaiselta o on kuitenkin HTML5 versiossa yksikäsitteisesti määritelty o Geoffrey Sneddonin HTML5 Outliner ( Dokumentin semanttisessa jäsentelyssä nojataan <h1>..<h6> elementteihin seuraava ei ole suositeltavaa <body> <h1>pääotsikko</h1> <h2>tarkentava aliotsikko</h2>... koska <h2> ei aloita uutta alilukua <h1> ja <h2> itse asiassa muodostavat otsikon yhdessä o tulisi käyttää <hgroup> elementtiä <body> <hgroup> <h1>pääotsikko</h1> <h2>tarkentava aliotsikko</h2> </hgroup>...
11 rakennetta <address> <h1>.. <h6> <header> <section> <article> <footer> <nav> sisältää yhteystiedot; jos elementin äiti on body elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot otsikot tasoilla ; selainten html tulkit saattavat luoda otsikoiden avulla automaattisen sisällysluettelon sivusta sitoo osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi määrittelee dokumentin hierarkisen rakenteen, voi muutenkin määritellä dokumentin temaattisen osan ( sektion ) jolla on oma otsikkonsa osa dokumenttia, joka muodostaa oman kokonaisuutensa (lehtiartikkeli, blogi, tms. itsenäisesti julkaistavissa oleva) alatunnisteenomaista tietoa siihen osaan dokumenttia, jonka sisässä elementti sijaitsee elementin avulla merkataan ne elementit, joita käytetään navigointiin sivun eri osien välillä sisällön <div> <p> <hr> <br> <pre> <blockquote> <figure> <figcaption> <ol> <ul> <li> <dl> <dt> <dd> Näitä elementtejä käytetään dokumentin sisällön erilaiseen ryhmittelyyn, kuten o jakamiseen kappaleiksi, o dokumentin jakamiseen temaattisiin osiin o listoihin tai o muihin jollain tavalla oman kokonaisuutensa muodostaviin osiin Esitetään oletusarvoisesti omana lohkonaan, ts. ne erotetaan muusta sisällöstä rivinvaihdoin Kukin elementti kuvaa sen roolia dokumentin rakenteessa o <div> elementti poikkeus, sen avulla ei kuvata merkitystä
12 Geneerinen flow elementti, joka kapseloi lohkon, jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään lohko, johon halutaan vaikuttaa CSS säännöillä. Sallittu sisältö: oflow sisältö, jota voi edeltää oyksi tai useampi <style> elementti Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <div id="container"> <p> Täällä div:in sisällä voi olla mitä vaan sisältöä, kappaleita, taulukoita, listoja,.. Tarkoituksena on vain kapseloida tämä osa dokumenttia </p> </div> [W3C] [W3C non normative] [MDN] [W3School] <p> <hr> <br> <pre> sisällön kappale (erotettuna rivinvaihdoin ympäristöstään) sisällön temaattinen vaihdos (ei siis välttämättä viiva ) edustaa rivinvaihtoa esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan <blockquote> muusta lähteestä lainattu tekstisisältö <figure> elementti, jossa on itsenäinen sisältö niin että siihen viitataan tyypillisesti omana, elementtivirrasta irrallisena, yksikkönään ja se voidaan siirtää päävirrasta sivuun vaikuttamatta dokumentin merkitykseen. Tällainen elementti voisi olla esimerkiksi kuva, kaavio tai vaikkapa koodilistaus. <figcaption> elementin seliteteksti
13 LISTAT (<body> sisällönryhmittelyä) <ul> <li> järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi <ul> <li>listan eka rivi</li> <li>listan toka rivi <! </li> ei tänne > <ul> <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ul> </li> <! toka rivi suljetaan täällä > <li>kolmas rivi</li> </ul> <ul> <li> <ol> LISTAT (2) (<body> sisällönryhmittelyä) järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä) <ol> <li>listan eka rivi, edessä numero 1</li> <li>listan toka rivi, edessä numero 2 <! </li> ei tänne > <ol type="i" start="10" reversed> <! < roomalaiset numerot > <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ol> </li> <! toka rivi suljetaan täällä > <li>kolmas rivi, edessä numero 3</li> </ol>
14 LISTAT (3) (<body> sisällönryhmittelyä) <ul> <li> <ol> <dl> <dt> <dd> järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä) määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms <dl> listan termi, käsite, tms. listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl> <span> <em> <strong> <a> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> Ennen oli mahdollista määrittää muotoilukomentoja oesimerkiksi lihavoida <b> elementtiä käyttäen HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä otekstinosia, sanaryhmiä, sanoja tai jopa yksittäisiä merkkejä voi edelleenkin merkata omerkkaus on kuitenkin aina semanttinen omerkattavaan tekstinosaan siis liittyy aina jokin semanttinen arvo, ts. jokin merkitys <span> on poikkeus
15 Geneerinen phrasing elementti, joka kapseloi tekstiä jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään tekstinosa, johon halutaan vaikuttaa CSSsäännöillä (vastaava elementti lohkotasolla on <div>). Sallittu sisältö: phrasing sisältö Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <p> dropzone="<span class="default">copy</span>" "move" "link </p> [W3C] [W3C non normative] [MDN] [W3School] Molemmat tarkoittavat jonkinlaista tekstinosan korostusta o saavat aikaan (useimmissa selaimissa) lihavoinnin tai kursivoinnin o niitä ei pitäisi käyttää ajatellen näiden muotoilujen aikaansaamista Elementin <strong> sisään kapseloidaan erityisen tärkeä tekstinosa o se, miten tärkeä tekstinosa eri ympäristöissä (graafisesti, tai esim. äänenä) vaihtelee asiakasohjelmasta riippuen. Elementin <em> sisään kapseloidaan tekstinosa jota halutaan painottaa o kyse on enemmänkin kielellisestä painotuksesta, ei niinkään tekstinosan tärkeydestä o lauseiden: Ensi kesänä menen Ruotsiin töihin tai Ensi kesänä menen Ruotsiin töihin merkitys on erilainen. o tulisi käyttää <em> elementtiä painotuksen ilmaisemiseen, ei <strong> elementti o vastaava logiikka pätee muihinkin tekstitason elementteihin:
16 Linkit esitellään <a href= arvo > elementin avulla href attribuutin arvo kertoo siirtymiskohteen o o kertoo mistä osoitteesta selaimen sivulle haetaan sisältö osoite voi olla 1. suhteellinen (osoite samalla palvelimella oleviin tiedostoihin) 2. sivun sisäinen siirtymä 3. Absoluuttinen Linkki samalla palvelimella olevalle sivulle o osoite on hakemistopolku tiedostoon, tulkitaan viittaavan sivusta lähtien o polussa käytetään - hakemistojen (kansioiden) nimiä ja - pseudohakemistonimä.. avulla (yksi taso rakenteessa ylöspäin) <a href="../esimerkit/index.html"> <a href="kuvat/taulu.jpg"> <a href="../../index.html"> o viimeinen linkki viittaa - kaksi hakemistotasoa ylemmäs - index.html dokumenttiin - nimen voisi jättää pois, koska se on joka tapauksessa oletus: <a href="../../ >
17 Kohta dokumentissa (johon halutaan siirtyä) o merkitään id attributin avulla Viitattaessa o tunnus kirjoitetaan muun osoitteen perään # merkin jälkeen <h1 id= luku 1">1 Luku</h1> <p> Lorem ipsum... </p>..... <a href="#luku 1">Luvun 1 alkuun</a>.. Osoite muodostuu o href attribuutin arvona jokin uri osoite o tiedonsiirtoprotokolla voi muukin, kuin www sivu o alussa annetaan tiedonsiirtoprotokollan nimi http, https, ftp, mailto, ldap, file, news, gopher tai telnet o esimerkiksi <a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a>
18 Protokollan jälkeen palvelimen osoite o esim. // Mahdollisesti palvelimen tietoliikenneportti o tarpeen antaa vain, mikäli se on eri kuin käytettävän protokollan oletus o esimerkiksi http oletus on :80, ftp protokolla :20 sivun osoitteesta palvelimella mahdollisesta elementin tunnuksesta sivun sisällä <a href= US/docs/URIs_and_URLs >URI ja URL</a> <a href= >luennot</a> <a href= http 6 >linkit</a> <a href= >ilmainen sanakirja</a> viimeisessä esimerkissä tiedostonimi puuttuu, noudetaan o oletustiedosto index.html, index.php, index.pl, index.asp, jos näitä ei löydy o hakemiston sisällysluettelo (jos annettu oikeudet, ja ellei oikeuksia sen näyttämiseen o virheilmoitus, jos näyttäminen estetty ja oletustiedostoa ei ole Esimerkin vuoksi katsaus kaikkiin <a> elementin attribuutteihin Mahdolliset attribuutit: href, target, hreflang, media, rel, type syntaksi: <a target="_blank" "_self" "_parent" "_top"> Määrittelee mihin linkin osoitteessa oleva sisältö avataan _blank: uuteen selaimeen tai välilehteen _self: samaan selaimen osaan jossa linkki itse sijaitsee _parent: samaan selaimen osaan missä äiti elementti sijaitsee _top: jos linkki iframe:n sisällä, rakenteen ylimmälle tasolle aukaise <a href="osoite" target="_blank">linkki</a> uuteen välilehteen aukaise <a href="osoite" target="_self">linkki</a> tähän ikkunaan aukaise <a href="osoite" target="_parent">linkki</a> äitielementtiin aukaise <a href="osoite" target="_top">linkki</a> koko ikkunaan [W3C] [W3C non normative] [MDN] [w3school]
19 syntaksi: <a hreflang="language subtag"> Hyperlinkin osoittaman dokumentin kieli o lista käytössä olevista tunnisteista löytyy osoitteesta: subtag registry <a href=" hreflang="fi">html5 kurssi</a> [W3C] [W3C non normative] [MDN] [W3School] syntaksi: <a media="arvo"> Millä laitteella dokumentti on suunniteltu esitettäväksi o ts. mille laitteelle optimoitu o arvo voi olla jokin mediakyselyn antama mediatyyppi (media query) o + esitysympäristöä tarkentavia mediapiirteitä (media features). o mediatyyppivaihtoehtoja ovat tällä hetkellä - all, aural, braille, handheld, projection, print, screen, tty ja tv o valikoima laajennee laitteistojen kehittyessä - min width on esimerkki mediapiirteistä (media features) <a href="url" media="screen and (min width: 320px) >linkki</a> [W3C] [W3C non normative] [MDN] [w3school]
20 syntaksi: <a rel= "void" "alternate" "author" "bookmark" "help" "license" "next" "nofollow" "noreferrer" "prefetch" "prev" "search" "tag"> Kuvaa viittaava dokumentin ja linkitetyn dokumentin (href) keskinäisen suhteent. mille laitteelle optimoitu <a href="osoite" rel="next">seuraava luku</a> [W3C] [W3C non normative] [MDN] [w3school] syntaksi: <a type="ei negatiivinen luku"> Kertoo linkattavan dokumentin esitysmuodon, ns. MIME tyypin otällä hetkellä tieto on tiedotuksenomainen otulevaisuudessa sitä saatetaan käyttää eri tavoin - selain saattaisi esim lisätä pienen kaiutinikonin audio/wav linkkiin - MIME tyypit on esitelty IANAn sivuilla: types.. tässä asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa.. [W3C] [W3C non normative] [MDN] [w3school]
21 tekstitason <small> <s> <cite> <q> <dfn> <abbr> <time> <code> pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset vanhentunutta, epätarkkaa tai ei enää relevanttia tietoa, tyypillinen (ei pidä käyttää esittämään tietoa joka halutaan poistaa, tai korvata uudella tekstillä, siihen tarkoitukseen del elementti) viittaus johonkin teokseen, esimerkiksi kirjan, artikkelin, runon, musiikkiteoksen, TV ohjelman, elokuvan, teatteriesityksen, veistoksen tai taulun nimeen; kyseessä ei tarvitse olla teoksen esittely, myös ohimennen mainittu teoksen nimi voidaan antaa cite elementissä jostain muusta lähteestä lainattu teksti merkkaa kohdan, jossa termi määritellään merkkaa lyhenteen tai akronyymin; jos elementillä on title attribuutti, sen tulee sisältää lyhenteen selitys. merkkaa joko kellonajan (24 tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime attribuutin arvona (ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä) merkkaa tekstinosan ohjelmakoodiksi tekstitason <var> <samp> <kbd> <sub> <sup> <i> <b> merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa merkkaa tekstinosan ohjelman tulosteeksi. merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä merkkaa alaviitteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmällä merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on kursivoitu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia vaan esimerkiksi mielenalan, tunnelman tai muun merkityksen takia (esimerkiksi ajatus, sananlasku tai laivan nimi) merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on lihavoitu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia (esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa)
22 tekstitason <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on alleviivattu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia (voidaan esimerkiksi käyttää kiinan kielessä henkilön nimen alleviivaukseen tai merkkaamaan tekstinosaa, jossa on kirjoitusvirhe) merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa Ruby merkkien (itä aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt> elementin kanssa sisältää Ruby merkkien (itä aasialainen merkistö) ääntämisohjeen elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue Ruby merkkejä. merkkaa tekstinosan, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia); suunnan voi määrätä dir attribuutilla (normaalisti attribuutin oletusasrvo on ltr, mutta tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti) muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi Muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi. Sallittu sisältö: phrasing sisältö Sallitut attribuutit: o globaalit attribuutit o dir Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <p> Uskotko, että "eno Kimmo, pese se pommikone" on panlindromi? Kokeillaan. Kirjoitettuna oikealta vasemmalle se on: <bdo dir="rtl"> eno Kimmo, pese se pommikone </bdo> </p> JWT Hyrskykari, SIS, Tampereen yliopisto [W3C] [W3C non normative] [MDN] [W3School]
Aulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista,
JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/26/2013. Otsikko osan elementit: <base> <link> <script> <style> <title> <meta>
26.3.2013 Aulikki Hyrskykari sisällön ryhmittelyä lohkotasolla Tekstitason semanttisia elementtejä Linkit Taulukot Otsikko osan elementit: Dokumentin runko:
Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/21/2014
20.3.2014 Aulikki Hyrskykari Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o osan sisältö o osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön
Arvioitava työ. Antamasi pisteet. Kommenttisi työstä Aulikki Hyrskykari
21.3.2013 Aulikki Hyrskykari Vertaisarvioinneista HTML5 dokumentin otsikko osa HTML5 dokumentin runko osa dokumentin rakenne ja osien semanttinen merkkaus sisällön ryhmittelyä lohkotasolla semanttista
JWT Hyrskykari, SIS, Tampereen yliopisto 3/19/2013
19.3.2013 Aulikki Hyrskykari HTML dokumentin ensimmäisenä rivinä annetaan dokumenttityypin määrittely HTML5 dokumentti koostuu selementtien hierarkiasta, joista juuri elementti sisältää kaikki muut
Aulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o -osan sisältö o -osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön
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
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
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
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
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,
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
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#
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 &
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.
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ö,
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
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ää
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ö)
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
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ää
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
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
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
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),
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ää
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
Verkkojulkaiseminen 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.
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
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
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
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
6 Linkit ja ankkurit 69
69 HTML mahdollistaa käytännöllisen tavan rakenteisten dokumenttien esittämiseen, mutta mikä erottaa sen muista merkkauskielistä, on sen hypertekstiominaisuudet ja mahdollisuus toteuttaa interaktiivisia
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
HTML5 -elementit jatkuu
HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"
Navigointi Verkkomultimedia ICT1tn004
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
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
FrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
http://www.microsoft.com/expression/
Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA
URL-osoitteiden suunnittelu
Tim Berners-Lee: Jos olisin arvannut kuinka suosittu Webistä tulee, olisin yrittänyt keksiä URL-osoitteiden alkuosalle jonkin toisen muodon. http-alkuosa on hankala erityisesti puhelinkeskusteluissa. URL
Tekstinkäsittelyn jatko KSAO Liiketalous 1. Osanvaihto näkyy näytöllä vaakasuorana kaksoispisteviivarivinä ja keskellä riviä lukee osanvaihdon tyyppi
KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana
Työvälineohjelmistot KSAO Liiketalous 1
KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana
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
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
Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)
23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN
ejuttu ohjeet kuinka sitä käytetään.
ejuttu ohjeet kuinka sitä käytetään. 1. Artikkelin lisääminen a. Kirjaudu sisään b. Lisää sisältöä c. Artikkeli i. Lisää pääkuva 1. Pääkuvalle kuvateksti ii. Anna artikkelille otsikko iii. Ingressi-kenttään
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
SeaMonkey pikaopas - 1
SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston
Ohjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 2.3.2011 T-106.1208 Ohjelmoinnin perusteet Y 2.3.2011 1 / 39 Kertausta: tiedoston avaaminen Kun ohjelma haluaa lukea tai kirjoittaa tekstitiedostoon, on ohjelmalle
HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari
1332014 Aulikki Hyrskykari HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit ensimmäinen kokeilu
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
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
Luento 2 Vertaisarviointien tekeminen ja ryhmätyö Office 365:ssä
Luento 2 Vertaisarviointien tekeminen ja ryhmätyö Office 365:ssä 3.9.2019 Aulikki Hyrskykari Tänään o Ajankohtaista aikatauluista o Vertaisarvioinnit o Office 365 yleistä o OneDrive ja jakaminen o Kalenteri
KÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
M. Merikanto 2012 XML. Merkkauskieli, osa 2
XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao
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
Käyttöliittymä ja tuotantokäsikirjoitus. Heini Puuska
Käyttöliittymä ja tuotantokäsikirjoitus Heini Puuska Sisältö 1 Käyttöliittymä... 1 2 Tuotantokäsikirjoitus... 2 2.1 Kurssin esittely... 2 2.2 Oppimistehtävä 1... 2 2.3 Oppimistehtävä 2... 2 2.4 Reflektio
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
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
Kuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
DOORSin Spreadsheet export/import
DOORSin Spreadsheet export/import 17.10.2006 SoftQA Oy http/www.softqa.fi/ Pekka Mäkinen Pekka.Makinen@softqa.fi Tietojen siirto DOORSista ja DOORSiin Yhteistyökumppaneilla ei välttämättä ole käytössä
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
UpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
Putteri Käyttöliittymä ja ulkoasu
Putteri Käyttöliittymä ja ulkoasu Jukka Värri 15.10.2007 Versio: 1.0 Yleistä järjestelmästä Järjestelmän merkistö on UTF-8 (Unicode). Käyttöliittymä tulee järjestelmän mukaan. Uusia käyttöliittymiä ei
Ohjelmassa henkilön etunimi ja sukunimi luetaan kahteen muuttujaan seuraavasti:
1 (7) Tiedon lukeminen näppäimistöltä Scanner-luokan avulla Miten ohjelma saa käyttöönsä käyttäjän kirjoittamaa tekstiä? Järjestelmässä on olemassa ns. syöttöpuskuri näppäimistöä varten. Syöttöpuskuri
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
Sivupohjien täyttö suppeat sivupohjat
Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat
ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu
ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista
WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY
1 WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 10.4.2015 Lounea Oy Tehdaskatu 6, 24100 Salo Puh. 029 707 00 Y-tunnus 0139471-8 www.lounea.fi Asiakaspalvelu 0800 303 00 Yrityspalvelu 0800 303 01 Myymälät 0800 303
ICT1TN004 Hakukoneoptimoin p ti Heikki Hiet Hie ala t
ICT1TN004 Hakukoneoptimointi Heikki Hietala Hakukoneoptimointi Sivuston laatiminen on vain osa työtä Laadittu sivusto on saatava myös hyvin esiin hakukoneissa Tavoitteena on kasvattaa ns. luonnollista
Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
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
Ohjelmoinnin peruskurssi Y1
Ohjelmoinnin peruskurssi Y1 CS-A1111 13.9.2017 CS-A1111 Ohjelmoinnin peruskurssi Y1 13.9.2017 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,
Ohjelmoinnin peruskurssi Y1
Ohjelmoinnin peruskurssi Y1 CS-A1111 12.9.2018 CS-A1111 Ohjelmoinnin peruskurssi Y1 12.9.2018 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,
Verkkosivujen Rakenne (HTML)*
Verkkosivujen Rakenne (HTML)* Hanna Hämäläinen Mediatekniikan laitos *Perustuu Antti Tolppasen, Pia Tukkisen ja Hannu Järvisen kalvoihin Luennon jälkeen osaan tehdä yksinkertaiset verkkosivut sekä lisätä
Ohjelmoinnin peruskurssi Y1
Ohjelmoinnin peruskurssi Y1 CS-A1111 11.9.2019 CS-A1111 Ohjelmoinnin peruskurssi Y1 11.9.2019 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,
SISÄLLYSLUETTELO. Word Sisällysluettelo
Word 2013 Sisällysluettelo SISÄLLYSLUETTELO SISÄLLYSLUETTELO... 1 Otsikoiden merkitseminen... 1 Ylä- ja alatunnisteet: sisällysluettelosivulla ja tekstissä erilainen ylätunniste... 1 Sisällysluettelon
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
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
HTML editorin käyttö - 1
HTML editorin käyttö KompoZer sivustoeditorin pikaopas (hae editori osoitteesta: http://kompozer.net/) KompoZer editori Kompozer on sivustoeditori, jolla voit koostaa sivustoasi (useamman sivun linkitetty
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
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
Sivuston 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
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
Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012
Tiedostot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi työpöydältä raahata
Lyhyt kertaus osoittimista
, syksy 2007 Kertausta Luento 10 12.10.2007 Syksy 2007 1 Lyhyt kertaus osoittimista char *p; /* char, int, jne ilmoittavat, minkä tyyppisiä */ Keskusmuisti int *q; /* olioita sisältäviin muistilohkoihin
Ohjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 4.3.2009 T-106.1208 Ohjelmoinnin perusteet Y 4.3.2009 1 / 35 Tiedostot Tiedostojen käsittelyä tarvitaan esimerkiksi seuraavissa tilanteissa: Ohjelman käsittelemiä
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.
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.
Tiedostojen siirto ja FTP - 1
Tiedostojen siirto ja FTP Tiedonsiirto Sibelius-Akatemian hakemistosi ja jonkun muun koneen välillä (esim. kotikoneesi) Taustaa FTP on lyhenne sanoista File Transfer Protocol. Se on yhteystapa jolla siirretään
Sisällys. 1. Omat operaatiot. Yleistä operaatioista. Yleistä operaatioista
Sisällys 1. Omat operaatiot Yleistä operaatioista. Mihin operaatioita tarvitaan? Oman operaation määrittely. Yleisesti, nimeäminen ja hyvä ohjelmointitapa, määreet, parametrit ja näkyvyys. HelloWorld-ohjelma
Tähtitieteen käytännön menetelmiä Kevät 2009 Luento 4: Ohjelmointi, skriptaus ja Python
Tähtitieteen käytännön menetelmiä Kevät 2009 Luento 4: Ohjelmointi, skriptaus ja Python 31. tammikuuta 2009 Ohjelmointi Perusteet Pythonin alkeet Esittely Esimerkkejä Muuttujat Peruskäsitteitä Käsittely
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
1. Omat operaatiot 1.1
1. Omat operaatiot 1.1 Sisällys Yleistä operaatioista. Mihin operaatioita tarvitaan? Oman operaation määrittely. Yleisesti, nimeäminen ja hyvä ohjelmointitapa, määreet, parametrit ja näkyvyys. HelloWorld-ohjelma
Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat
Microsoft Office 2010 löytyy tietokoneen käynnistävalikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,
10 Nykyaikainen WWW-arkkitehtuuri
10 Nykyaikainen WWW-arkkitehtuuri è è è 10 Nykyaikainen WWW-arkkitehtuuri WWW on ylivoimaisesti suosituin hypertekstijärjestelmä. Käydään seuraavaksi läpi nykyaikaisen WWW-arkkitehtuurin perusteet. Vuonna
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
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,
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
Johdatus Ohjelmointiin
Johdatus Ohjelmointiin Syksy 2006 Viikko 2 13.9. - 14.9. Tällä viikolla käsiteltävät asiat Peruskäsitteitä Kiintoarvot Tiedon tulostus Yksinkertaiset laskutoimitukset Muuttujat Tiedon syöttäminen Hyvin
Pikaohjeet A&O oppimisympäristön käytön aloittamiseen
Pikaohjeet A&O oppimisympäristön käytön aloittamiseen 1. Kirjaudu A&O-ympäristöön Verkkopalvelun sisällöntuotanto kurssilla käytettävä A&O alusta löytyy verkko-osoitteesta: http://ao4.ee.tut.fi/hypermedia/