Arvioitava työ. Antamasi pisteet. Kommenttisi työstä Aulikki Hyrskykari

Koko: px
Aloita esitys sivulta:

Download "Arvioitava työ. Antamasi pisteet. Kommenttisi työstä Aulikki Hyrskykari"

Transkriptio

1 Aulikki Hyrskykari Vertaisarvioinneista HTML5 dokumentin otsikko osa HTML5 dokumentin runko osa dokumentin rakenne ja osien semanttinen merkkaus sisällön ryhmittelyä lohkotasolla semanttista merkkausta tekstitasolla Arvioitava työ Antamasi pisteet Kommenttisi työstä

2 HTML dokumentissa voi olla vain yksi otsikko osa. Dokumentin otsikko osa määrittää dokumentiin liittyvän metainformaation (metadata) o esim. osoitteet, joista löytyy - liitettävät tyylisääntötiedostot - sivulla käytettävät skriptit Sallittu sisältö: o korkeintaan yksi <base> elementti o nolla tai useampia seuraavista <link>, <meta>, <script>, <style>, <title> Sallittu äiti elementti: dokumentin juurielementti <html>

3 Käsitellään seuraavaksi otsikko osaan mahdollisesti sisältyvät elementit <base> <link> <script> <style> <title> <meta> Oletuspolku dokumentissa viitatuille linkeille. Dokumentissa saa olla vain yksi <base> elementti. Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallitut attribuutit: o globaalit attribuutit ohref, target Sallittu äiti elementti: dokumentin otsikkoelementti <head> <base href=" />

4 Määrittää mistä dokumentissa käytetty resurssi löytyy o esim. tyylimäärittely, skriptitiedosto Sallittu sisältö: void elementti Sallitut attribuutit: o globaalit attribuutit o Globaalin attribuutin title merkitys tässä elementissä käytettynä on erityinen: sen avulla voi määritellä vaihtoehtoisia tyylejä, joista käyttäjä voi valita mitä tyyliä käyttäen haluaa sivua katsella. Valinnan voi tehdä selaimessa valikon Näytä/Sivun tyylit (View/Page style) kautta. o href, hreflang, rel, media, type, sizes Sallittu äiti elementti: o <head>, tai o jokin muu elementti, joka voi saada metadata sisältöä. <! tavanomainen tyylitiedoston liittäminen html dokumenttiin > <link rel="stylesheet" href="css/jwt.css" media="screen" /> <! vaihtoehtoisia tyylejä title attribuutin avulla > <link rel="stylesheet" href="css/jwt.css" media="screen" title="oletustyyli"/> <link rel="stylesheet" href="css/print.css" media="screen" title="tulostuksen esikatselu"/> Esittelee sivulla käytetyt selainpuolen ohjelmat o kuten esim. Javascript koodin o antaa niihin liittyviä määrittelyjä Sallittu sisältö: ohjelmakoodia Sallitut attribuutit: o globaalit attribuutit o src, async, defer, type, charset Sallittu äiti elementti: o <head>, o jokin muu elementti, joka voi saada metadata sisältöä tai o mikä tahansa elementti, joka voi saada phrasing sisältöä. <! suoraan elementtiin kirjoitettu ohjelmakoodi > <script> document.write("hello World!") </script> <! erillisestä tiedostosta haettu ohjelmakoodi > <script src="script/javascript.js"> </script>

5 Mahdollistaa CSS sääntöjen esittelyn html dokumentin otsikko osassa o vähänkin isommissa sivustoissa erillisen tyylitiedoston (tyylitiedostojen) esittely suositeltavampaa. Sallittu sisältö: type attribuutin määrittämän tyyppistä sisältöä Sallitut attribuutit: o globaalit attribuutit o media,type,scoped o title attribuutin merkitys tässä elementissä on erityinen; sen avulla on mahdollista määritellä vaihtoehtoisia tyylisääntöjoukkoja. Sallittu äiti elementti: o <head> o jokin muu elementti, joka voi saada metadata sisältöä o <div>, <noscript>,, <article>, <aside> <style type="text/css"> body { font family: verdana, arial, sans serif; } </style> Dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona o dokumentilla voi olla vain yksi otsikko Sallittu sisältö: o merkkimuotoinen tieto joka saa sisältää myös < merkkejä (HTML jäsentäjä ei tulkitse otsikon sisältä HTML alkutunnuksia) Sallitut attribuutit: o globaalit attribuutit Sallittu äiti elementti: <head> <title>uta: JWT 2013</title>

6 Tämän elementin avulla voidaan määritellä sellaisia metatietoja, joita muiden meta elementtien avulla ei saa määrittellyksi, mm. o määritellä käytetty merkistökoodaus, o antaa avainsanoja hakukoneille, kertoa dokumentin tekijän nimi, o kuvailla dokumentin sisältö o määrätä sivulle virkistystaajuus - tämän käyttöä pitäisi välttää, koska se on WAI suositusten vastainen toiminta Sallittu sisältö: void elementti Sallitut attribuutit: o globaalit attribuutit o name, http equiv, content, charset Sallittu äiti elementti: o <head> o poikkeus: jos annettu http equiv attribuutti, äiti voi olla myös <noscript> <meta charset="utf 8"> <! lataa 2 sekunnin kuluttua toinen sivu > <meta http equiv="refresh" content="2; url= Dokumentin sisältö kirjoitetaan <body> elementin sisään, dokumentin runko osaan

7 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 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 :

8 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> > <h1> 2.1 Otsikko</h1> > <h1>2.1.1 Otsikko</h1> > <h1>2.1.2 Otsikko</h1> <h1>2.2 Otsikko</h1> <h1>2.2.1 Otsikko</h1> </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> > <h2> 2.1 Otsikko</h2> <h3>2.1.1 Otsikko</h3> <h3>2.1.2 Otsikko</h3> <h2>2.2 Otsikko</h2> <h3>2.2.1 Otsikko</h3> </body> 01 c dokumentin rakenne.html

9 Viimeinen edellisistä tällä hetkellä suositeltu tapa o ruudunlukijat eivät ainakaan toistaiseksi osaa jäsentää 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>...

10 Dokumentin jakaminen semanttisesti merkityksellisiin osiin <address>, <h1>..<h6>, <hgroup>, <article>, <aside>, <header>, <footer>, <nav> Sisältää yhteystiedot; jos elementin äiti on body elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot. Sallittu sisältö: o flow sisältöä, oei kuitenkaan heading tai sectioning sisältöä, oeikä <header>, <footer> eikä <address> elementtejä Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <address> Aulikki Hyrskykari<br /> Informaatiotieteiden yksikkö, Tietojenkäsittelytieteet<br /> Tampereen yliopisto<br /> aulikki.hyrskykari(at)uta.fi </address>

11 Otsikko tasolla Selainten html tulkit saattavat käyttää otsikoita automaattisen sisällysluettelon luomiseen sivusta. Sallittu sisältö: phrasing sisältö Sallittu äiti elementti: oelementti, joka voi saada flow sisältöä o<hgroup> <h1>ensimmäisen tason otsikko</h1> <p>kappale... </p> Elementin avulla ryhmitellään yhteen <h1> <h6> elementtejä silloin kun otsikko koostuu usean tason otsikosta.. Sallittu sisältö: yksi tai useampi <hn> elementti Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <hgroup id="harj_02" class="harjoituksen otsikko"> <h1 class="harjoituksen otsikko">harjoitus 2</h1> <h2>html&css, Dao of Web Desing, peruselementtejä</h2> </hgroup>

12 Alkavan osan alkunimiö, ts. elementin avulla voidaan sitoa osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi. Sallittu sisältö: flow sisältö Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <article> <header> <h1>hard Trance is My Life</h1> <p>by DJ Steve Hill and Technikal</p> </header> <p>the album with the amusing punctuation has red artwork.</p> </article> Määrittelee dokumentin osan ("sektion"). Sektiot ovat temaattisia kokonaisuuksia, ts. sektioihin jakoa ei pitäisi käyttää muotoilun apuvälineenä, siihen tarkoitukseen käytetään edelleen <div>elementtiä. Sisäkkäisten sektioiden avulla voidaan määritellä dokumentin hierarkinen rakenne (luvut, niiden aliluvut, jne). Sallittu sisältö: flow sisältö Sallittu äiti elementti: o elementti, joka voi saada flow sisältöä o ei kuitenkaan <address> elementti <h1>otsikko</h1> <p> Tämä luku on merkattu omaksi sektiokseen. Tyypillisesti sektioon merkataan sekä otsikko että sen sisältö. </p>

13 Osa dokumenttia, joka muodostaa oman kokonaisuutensa o voisi ajatella itsenäisesti julkaistavaksi o esim. lehtiartikkeli tai blogi Sallittu sisältö: o flow sisältö, o jota saattaa edeltää yksi tai useampia <style> elementtejä Sallittu äiti elementti o elementti, joka voi saada flow sisältöä o ei kuitenkaan <address> elementti <article> <h2>kakkosluvun otsikko <p> Tämän otsikon alle kirjoitettu teksti muodostaa selkeästi oman kokonaisuutensa, että sen voisi vaikka "ripata" jonnekin muualle. </p> </article> Sivulla omaan lokeroonsa kirjoitettua sisältö. Usein tälläisia oheissisältöjä ovat "hyvä tietää" tai "taustafaktoja" tyyppiset sivuhuomautuslokerot ("tangentially related" informaatiota). Sallittu sisältö: o flow sisältö, ojota voi edeltää yksi tai useampia <style> elementtenä Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <aside> <h1>fakta BOKSI</h1> <p> Tiesitkö, että... </p> </aside>

14 Alaviitteenomaista tietoa siihen osaan dokumenttia, jonka sisässä elementti sijaitsee o oletetaan kohdistuvan lähimpään äiti elementtiin, joka on - sectioning elementti tai - <blockquote>, <body>, <details>, <fieldset>, <figure>, <td> o esimerkiksi <body> elementin lapsena <footer> sisältää tyypillisesti tiedot koko sivun tekijästä ja muuta koko sivuun liittyvää informaatiota Sallittu sisältö: flow sisältö Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <footer role="contentinfo"> <p> Aulikki Hyrskykari, Tampereen yliopisto. Materiaalinkopioiminen tai käyttäminen kaupallisiin tarkoituksiin ilman lupaa kielletty. </p> </footer> Elementin sisään suljetaan sivun osa, jota käytetään navigointiin sivun eri osien välillä. Sallittu sisältö: flow sisältö Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <nav> <ul class="navipalkki"> <li><a href="index.html">etusivu</a></li> <li><a href="sivu2.html">toinen sivu</a></li> <li><a href="sivu 3.html">Kolmas sivu</a></li> <li><a href="yhteystiedot.html">yhteystiedot</a></li> </ul> </nav>

15 <p> <hr> <br> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div> Näitä elementtejä käytetään dokumentin sisällön erilaiseen ryhmittelyyn, kuten o jakamiseen kappaleiksi, o dokumenti 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 Kappale (erotettuna rivinvaihdoin ympäristöstään). Sallittu sisältö: o phrasing sisältö Sallitut attribuutit: o globaalit attribuutit Sallittu äiti elementti: o elementti, joka voi saada phrasing sisältöä <p> Tämä teksti renderöityy omaksi kappaleekseen </p>

16 Sisällön temaattinen vaihdos o kappaletasolla o merkitys temaattisena vaihdoksena on olennaista o ei viiva esitysmuoto voi olla jotain muutakin Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallittu äiti elementti: elementti, joka voi saada flowsisältöä... <hr> Dokumentin sektiovaihdon kohdalla usein temaattisen sisällönvaihdoksen merkkaus voi olla paikallaan.... Edustaa rivinvaihtoa. Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallittu äiti elementti: o elementti, joka voi saada phrasing sisältöä <p> </p> Tästä tulostuu selaimessa <br /> kaksi riviä.

17 Esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan o myös tyhjätilamerkit renderöidään suoraan sellaisenaan esitettävälle sivulle o automaattisia rivinvaihtoja ei tehdä o esityksessä oletusarvoisesti tasalevyinen kirjasin (yleensä Courier) Sallittu sisältö: phrasing sisältö Sallittu äiti elementti: o elementti, joka voi saada flow sisältöä <pre><p> koodi kirjoitetaan usein <p> elementtiä käyttäen, koska sen avulla teksti voidaan muotoilla itse: rivitys, sisennykset ym. säilyvät sellaisenaan </p></pre> Muusta lähteestä lainattu tekstisisältö. Sallittu sisältö: flow sisältö Sallitut attribuutit: o globaalit attribuutit o cite attribuutti Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <blockquote cite= " content.html#attr blockquote cite"> If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. </blockquote>

18 Järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä. Sallittu sisältö: nolla tai useampia <li> elementtejä Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <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> ] Järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä). Sallittu sisältö: nolla tai useampia <li> elementtejä Sallitut attribuutit: o globaalit attribuutit o reversed, start, type Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <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>

19 Listan rivi. Sallittu sisältö: flow sisältö Sallitut attribuutit: oglobaalit attribuutit ovalue Sallittu äiti elementti: <ul>, <ol> tai <menu> <ol> <li value="100">lista alkaa sadasta</li> <li>satayksi</li> <li>satakaksi</li> <li>satakolme</li> </ol> Määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms. Sallittu sisältö: onolla tai useampia <dt> elementtiä, joista okutakin seuraa yksi tai useampia <dd> elementtiä Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl>

20 <dl> listan termi, käsite, tms. Sallittu sisältö: oflow sisältöä, paitsi oei heading tai sectioning sisältöä, eikä o <header> tai <footer> elementtejä Sallittu äiti elementti:<dl> elementti <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl> [XX] [XX] [X] [X] <dl> listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle. Sallittu sisältö: flow sisältöä Sallittu äiti elementti:<dl> elementti <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl>

Aulikki Hyrskykari Antti Sand

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,

Lisätiedot

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/20/2014

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/20/2014 18.3.2014 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,

Lisätiedot

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

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

Lisätiedot

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 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ätiedot

2. PEHMEÄ XHTML XRAJAHTML

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 &

Lisätiedot

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. 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ätiedot

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

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

Lisätiedot

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/ 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ätiedot

HTML5 -elementit jatkuu

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"

Lisätiedot

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 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ätiedot

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

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#

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

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,

Lisätiedot

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

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

Lisätiedot

Ulkoasun muokkaus CSS-tiedostossa

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

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

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

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

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

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu

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

Lisätiedot

JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/26/2013. Otsikko osan elementit: <base> <link> <script> <style> <title> <meta>

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:

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1

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

Lisätiedot

XHTML aloitus. Sisällys

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

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

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

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu

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

Lisätiedot

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

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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ää

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

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.

Lisätiedot

Cascading Style Sheets

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

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ää

Lisätiedot

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

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.

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

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

Lisätiedot

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

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

Lisätiedot

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:

Lisätiedot

Validaattorit o HTML 5 validaattori: o CSS validaattori: validator/validator.html.

Validaattorit o HTML 5 validaattori:  o CSS validaattori:  validator/validator.html. 1432013 Aulikki Hyrskykari W3C = World Wide Web Consortium W3C spesifikaatioiden kehitysprosessi o Working Draft (WD) o Candidate Recommendation (CR) o Proposed Recommendation (PR) o W3C Recommendation

Lisätiedot

Johdatusta selainohjelmointiin

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

Lisätiedot

Käyttöliittymä ja tuotantokäsikirjoitus. Heini Puuska

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

Lisätiedot

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

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

Lisätiedot

Sivuston tiedotwindowsrepublic.com.au

Sivuston tiedotwindowsrepublic.com.au Sivuston tiedotwindowsrepublic.com.au Luotu Maaliskuu 28 2019 14:41 PM Pisteet48/100 SEO Sisältö Otsikko Windows Republic - upvc windows manufacturer and supplier in Melbourne Pituus : 70 Täydellistä,

Lisätiedot

XML / DTD / FOP -opas Internal

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

Lisätiedot

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.

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ö)

Lisätiedot

M. Merikanto 2012 XML. Merkkauskieli, osa 2

M. Merikanto 2012 XML. Merkkauskieli, osa 2 XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao

Lisätiedot

Sivuston tiedotpechaticentr.ru

Sivuston tiedotpechaticentr.ru Sivuston tiedotpechaticentr.ru Luotu Kesäkuu 03 2019 17:04 PM Pisteet59/100 SEO Sisältö Otsikko Изготовление печатей в Москве. Изготовление печати любой сложности. Pituus : 67 Täydellistä, otsikkosi sisältää

Lisätiedot

HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari

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

Lisätiedot

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

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

Lisätiedot

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3 Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...

Lisätiedot

HTML5 alkaa. Mirja Jaakkola

HTML5 alkaa. Mirja Jaakkola HTML5 alkaa Mirja Jaakkola W3C Word Wide Web Consortiumin (W3C) perustettiin 1994 kehittämään yhteisiä ja yhteensopivia Webin pelisääntöjä ja teknologioita. W3C:n muodostavat sen jäsenet (W3C members).

Lisätiedot

Sivuston tiedotmysiteworthcheck.com

Sivuston tiedotmysiteworthcheck.com Sivuston tiedotmysiteworthcheck.com Luotu Huhtikuu 26 2019 09:24 AM Pisteet59/100 SEO Sisältö Otsikko Check you website value Pituus : 23 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus

Lisätiedot

ARVO - verkkomateriaalien arviointiin

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

Lisätiedot

Ajatus kaiken taustalla

Ajatus kaiken taustalla HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

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

Lisätiedot

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: 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ätiedot

Sivuston tiedotqbsupportcustom erservice.com

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

Lisätiedot

Sivuston tiedotwixaccounting.com

Sivuston tiedotwixaccounting.com Sivuston tiedotwixaccounting.com Luotu Heinäkuu 11 2019 06:23 AM Pisteet61/100 SEO Sisältö Otsikko WIX Accounting +1-888-833-0109 Online QuickBooks Support Number Pituus : 65 Täydellistä, otsikkosi sisältää

Lisätiedot

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

Lisätiedot

TYYLIT. Word Tyylit

TYYLIT. Word Tyylit Word 2013 Tyylit TYYLIT TYYLIT... 1 Pikatyylien käyttäminen... 1 Tyylimuotoilun poistaminen... 2 Tyylin muokkaaminen... 2 Uuden tyylin luominen muotoillusta tekstistä... 2 Uuden tyylin luominen valintataulussa...

Lisätiedot

Sivuston tiedotmp3list.pro

Sivuston 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ätiedot

TiiaKonttinen.fi Kaikki oikeudet pidätetään 2017 Tätä opasta ei saa jakaa, luovuttaa, myydä, kopioida tai julkaista ilman tekijän lupaa.

TiiaKonttinen.fi Kaikki oikeudet pidätetään 2017 Tätä opasta ei saa jakaa, luovuttaa, myydä, kopioida tai julkaista ilman tekijän lupaa. 5 PARASTA BLOGGAAJAN MUISTILISTAA #BLOGGAAJA #BLOGGAAMINEN #BLOGIAMMATTILAINEN TiiaKonttinen.fi Kaikki oikeudet pidätetään 2017 Tätä opasta ei saa jakaa, luovuttaa, myydä, kopioida tai julkaista ilman

Lisätiedot

Digitaalisen median tekniikat. Luento 3: CSS

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

Lisätiedot

Sivupohjien täyttö suppeat sivupohjat

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

Lisätiedot

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti

Lisätiedot

Ohjelmoinnin perusteet Y Python

Ohjelmoinnin perusteet Y Python Ohjelmoinnin perusteet Y Python T-106.1208 20.1.2010 T-106.1208 Ohjelmoinnin perusteet Y 20.1.2010 1 / 40 Arvon pyytäminen käyttäjältä Käyttäjän antaman arvon voi lukea raw_input-käskyllä. Käskyn sulkujen

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

Sivuston tiedotqbooksupportpho nenumber.com

Sivuston 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ätiedot

Sivuston tiedotreviewproducts.org

Sivuston 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ätiedot

Sivuston tiedotсайткраснодар.рф

Sivuston tiedotсайткраснодар.рф Sivuston tiedotсайткраснодар.рф Luotu Toukokuu 21 2019 16:36 PM Pisteet62/100 SEO Sisältö Otsikko Создание сайтов в Краснодаре Заказать сайт в Краснодаре Pituus : 57 Täydellistä, otsikkosi sisältää väliltä

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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ää

Lisätiedot

Sivuston tiedotsiteoptimer.com

Sivuston tiedotsiteoptimer.com Sivuston tiedotsiteoptimer.com Luotu Helmikuu 22 2019 07:16 AM Pisteet65/100 SEO Sisältö Otsikko SEO Optimization tools and web page analyzer - siteoptimer.com Pituus : 62 Täydellistä, otsikkosi sisältää

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

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

Lisätiedot

FrontPage 2000 - Näkymät

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

Lisätiedot

Listat eli luettelot. Järjestämätön lista (unordered list)

Listat eli luettelot. Järjestämätön lista (unordered list) Listat eli luettelot listaelementit ovat lohkoelementtejä: lista ja listan alkiot alkavat uudelta riviltä listan jälkeen tuleva elementti alkaa uudelta riviltä listan alkuun ja loppuun selain jättää tyhjää

Lisätiedot

ejuttu ohjeet kuinka sitä käytetään.

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

Lisätiedot

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

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

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

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

Lisätiedot

Sivuston tiedotwebstatinfo.com

Sivuston tiedotwebstatinfo.com Sivuston tiedotwebstatinfo.com Luotu Toukokuu 11 2019 10:17 AM Pisteet59/100 SEO Sisältö Otsikko WebStatInfo.Com - seo analysis tools online free Pituus : 48 Täydellistä, otsikkosi sisältää väliltä 10

Lisätiedot

ICT1TN004 Hakukoneoptimoin p ti Heikki Hiet Hie ala t

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

Lisätiedot

Verkkosivujen Rakenne (HTML)*

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ä

Lisätiedot

Sivuston tiedotakcpshop.de.websiteoutlook.com

Sivuston 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ätiedot

Sivuston tiedotskillers.tech

Sivuston tiedotskillers.tech Sivuston tiedotskillers.tech Luotu Maaliskuu 28 2019 16:54 PM Pisteet55/100 SEO Sisältö Otsikko Skillers - Quality IT Recruiting services Pituus : 41 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta.

Lisätiedot

LibreOffice Writer perusteita

LibreOffice Writer perusteita LibreOffice Writer perusteita Käytetään Digabi-käyttöjärjestelmää (DigabiOS) ja harjoitellaan LibreOfficen käyttöä. 1. Ohjelman käynnistys Avaa Sovellusvalikko => Toimisto => LibreOffice Writer. Ohjelma

Lisätiedot

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

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

Lisätiedot

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

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000

Lisätiedot

Tekstinkäsittelyn jatko KSAO Liiketalous 1. Osanvaihto näkyy näytöllä vaakasuorana kaksoispisteviivarivinä ja keskellä riviä lukee osanvaihdon tyyppi

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

Lisätiedot

Työvälineohjelmistot KSAO Liiketalous 1

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

Lisätiedot

10 Nykyaikainen WWW-arkkitehtuuri

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

Lisätiedot

Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi

Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 2015 Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 1 Sisällysluettelo 1. Sivustolle rekisteröityminen... 2 2. Yrityksen lisääminen... 3 2.1. Yritystiedot...

Lisätiedot

Sivuston tiedotdigitalagency.hyp ersaiyan.com

Sivuston tiedotdigitalagency.hyp ersaiyan.com Sivuston tiedotdigitalagency.hyp ersaiyan.com Luotu Heinäkuu 10 2017 09:56 AM Pisteet46/100 SEO Sisältö Otsikko Hyper Saiyan : Digital Agency Pituus : 29 Täydellistä, otsikkosi sisältää väliltä 10 ja 70

Lisätiedot

Sivuston tiedotgoogle.com

Sivuston 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ätiedot

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

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ätiedot

Mitä direktiivi käytännössä velvoittaa?

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

Lisätiedot

Sivuston tiedotmarking.seoonline.xyz

Sivuston tiedotmarking.seoonline.xyz Sivuston tiedotmarking.seoonline.xyz Luotu Huhtikuu 08 2019 21:11 PM Pisteet59/100 SEO Sisältö Otsikko Social Bookmarking to get more Visitors Pituus : 39 Täydellistä, otsikkosi sisältää väliltä 10 ja

Lisätiedot

Sivuston tiedotprintersupportnu mbercare.com

Sivuston 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ätiedot

Sivuston tiedotemreemir.com

Sivuston tiedotemreemir.com Sivuston tiedotemreemir.com Luotu Maaliskuu 10 2019 18:41 PM Pisteet66/100 SEO Sisältö Otsikko Emre Emir, Full-Stack Web Developer Pituus : 35 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta.

Lisätiedot

KÄYTTÖOHJE. Servia. S solutions

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

Lisätiedot

Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel

Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel. 0505588666 www.papunet.net/saavutettavuus GOOD DESIGN ENABLES BAD DESIGN DISABLES WCAG 2.x - Verkkosisällön saavutettavuusohjeet World Wide

Lisätiedot

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN

Lisätiedot

ARVO - verkkomateriaalien arviointiin

ARVO - verkkomateriaalien arviointiin ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 1/8: Informaation esitystapa

Lisätiedot

Harjoitus 1 -- Ratkaisut

Harjoitus 1 -- Ratkaisut Kun teet harjoitustyöselostuksia Mathematicalla, voit luoda selkkariin otsikon (ja mahdollisia alaotsikoita...) määräämällä soluille erilaisia tyylejä. Uuden solun tyyli määrätään painamalla ALT ja jokin

Lisätiedot

Sivuston tiedottools.seo-zona.ru

Sivuston tiedottools.seo-zona.ru Sivuston tiedottools.seo-zona.ru Luotu Huhtikuu 09 2019 17:28 PM Pisteet58/100 SEO Sisältö Otsikko WEB-tools: онлайн-сервисы для вебмастера и оптимизатора Pituus : 55 Täydellistä, otsikkosi sisältää väliltä

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

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

Lisätiedot

Tekstinkäsittelyn jatko. KSAO Liiketalous 1

Tekstinkäsittelyn jatko. KSAO Liiketalous 1 KSAO Liiketalous 1 Tyylien käyttö on keskeinen osa tehokasta tekstinkäsittelyä. Merkki- ja kappalemuotoilujen tallentaminen valmiiksi tyyleiksi nopeuttavat tekstinkäsittelyä; tekstin kirjoittamista ja

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

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

Lisätiedot

Tehtävä 1: Tekstin käsitteleminen valinta, kopiointi, siirtely (2p)

Tehtävä 1: Tekstin käsitteleminen valinta, kopiointi, siirtely (2p) H4: Arviointiohjeet Yleistä arvioinnista: Muista laittaa myös kaikkiin arviointeihin tieto käytätkö LibreOfficea vai MS Officea ratkaisun arviointiin. Arvioinnin ensimmäinen rivi on siis esim. Arvioinnissa

Lisätiedot