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

Koko: px
Aloita esitys sivulta:

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

Transkriptio

1 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 wwwosoitteella. Pääsivun nimi on aina index.html tyylit.css Tyylitiedosto, joka sisältää sivujen asettelu- ja muotoilumääritykset. Nimetään noudattaen nimeämissääntöjä, ks. seuraava laatikko. Alasivuja, jotka nimetään noudattaen wwwympäristön nimeämissääntöjä: ei ääkkösiä, ei välilyöntejä, ei erikoismerkkejä, vain yksi piste nimen ja tiedostotunnisteen välissä. Yleensä käytetään pieniä alkukirjaimia. jpg gif png kuvat Alikansio kuvia varten. Alikansioiden avulla voi järjestää sivustoon kuuluvia tiedostoja. Nimeämissäännöt koskevat myös kansioiden nimiä.

2 Html-dokumentin aloitus... 3 Html ja css... 4 Kielioppia... 4 Sivun rakenne... 5 Css-tyylien liittäminen html-elementteihin... 8 Harjoitus: index-sivu ja tyylitiedosto... 9 Html_xhtml-5.docx (10)

3 Html-dokumentin aloitus Opettele ajan kanssa html-elementtejä eli tageja; niistä on selkeät selitykset, erot html 4 ja 5 välillä, ja esimerkit käytöstä sekä tieto mitkä selaimet tukevat. Sivun muodostavat rakenne-elementit: <html> <head>metatietoa selaimelle ja hakukoneille</head> <body>selainikkunassa näkyvä ja toimiva sisältö</body> </html> Html4-standardin mukaan: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>portfolio</title> <link href="tyylit.css" rel="stylesheet" type="text/css" /> </head> Xhtml1-standardin mukaan: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>portfolio</title> <link href="tyylit.css" rel="stylesheet" type="text/css" /> </head> Html5-standardin mukaan: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>portfolio</title> <link href="tyylit.css" rel="stylesheet"> </head> Html_xhtml-5.docx (10)

4 Standardia valitessasi huomioi, että kaikki selaimet eivät tue vielä kaikkia html5-elementtejä virheettömästi. Selaimia kehitetään kuitenkin koko ajan ja todennäköisesti lähitulevaisuudessa html5 yleistyy voimakkaasti, koska se toimii hyvin myös mobiililaitteissa. Html ja css Nettisivuja tehdessä erotetaan rakenne ja sisältö html-koodiksi ja muotoilu ja asettelu css-koodiksi. Csskoodi voi olla html-tiedostossa html-koodin seassa, mutta tehokkaammin css-koodia käytetään sijoittamalla se erilliseen css-tiedostoon. Html-sivu linkitetään css-tyylitiedostoon head-osaan kirjoitettavan komennon avulla. Kun selain lukee html-koodista tagin <body>, ja löytää css-koodista määrittelyn body { }, selain näyttää body-elementin aaltosulkeiden sisällä määritellyllä tavalla. Yllä olevassa esimerkissä on määritelty bodyelementin taustaväri (sivun taustaväri), fonttimuotoilu (joka toimii sivun tekstien oletusmuotoiluna) ja marginaali. Vastaavasti voi määrittää minkä tahansa html-elementin muotoilut. Kielioppia Html-elementti muodostuu <aloituskomennosta>, sisällöstä ja <lopetuskomennosta>: <h1>tervetuloa portfoliosivuilleni</h1> Joillakin elementeillä on vain aloituskomento, koska niillä ei varsinaisesti ole sisältöosaa: <br> (kappaleensisäinen rivinvaihto) <img> (kuva) Aloituskomentoon lisätään tarvittaessa lisämääreitä eli attribuutteja: <img src= kuvat/logo.jpg width= 160 height= 90 > Esimerkiksi kuva-elementin aloituskomennossa kerrotaan src-attribuutin avulla esitettävän kuvatiedoston sijainti ja nimi, width-attribuutilla leveys ja height-attribuutilla korkeus. Attribuutin kielioppi on: ominaisuus= arvo ja se erotetaan aloituskomennosta ja muista attribuuteista välilyönnillä. Html_xhtml-5.docx (10)

5 Osa html-elementeistä on rakenneosia suorakaiteen muotoisia laatikoita, joilla luodaan sivun asettelu. Tällaisia ovat esim. div ja table, tai html5:n section, header, article, footer, aside, nav jne. Asettelu määritellään css-tyyleillä. Osa elementeistä on sisältöelementtejä, kuten otsikot, tekstikappaleet jne. Esimerkiksi sivun ylälaitaan voidaan sijoittaa laatikko otsikkoa tai banneria varten: html-koodi (html5) <header> <h1>tervetuloa portfoliosivuilleni</h1> </header> (html4 / xhtml1) <div id= header > <h1>tervetuloa portfoliosivuilleni</h1> css-koodi header { height: 90px; background-color: #696; } #header { height: 90px; background-color: #696; } Css-tyylimäärityksen kielioppi on valitsin { ominaisuus: arvo; } Yllä olevasta esimerkistä näet, miten määrittelyt kirjoitetaan. Huomaa, että väri annetaan heksadesimaaliarvona ja kolmenumeroinen #696 on lyhyempi merkintä värille # Kommenttimerkinnät Niin html- kuin css-koodin sekaan voi kirjoittaa kommentteja, joilla selvennetään ja selitetään koodia ja vaikkapa ohjeistetaan sivujen päivittäjää. Kommentille on oma merkintätapansa molemmissa: html <!-- kommentti, yksi- tai monirivinen --> css // yksirivinen kommentti /* kommentti, joka voi olla monirivinenkin */ Sivun rakenne Sivun rakenne ja asettelu kannattaa suunnitella hyvin ennen toteuttamista. Yksinkertaisinta on luoda asettelun koossa pitämiseksi yksi pohjalaatikko, jonka sisälle luodaan sivun varsinainen asettelurakenne. Laatikot luodaan käyttämällä div-elementtejä (html4 ja xhtml), tai semanttisia elementtejä (html5); vrt. edellä olevan esimerkin header-elementti. Semanttinen elementti tarkoittaa yksinkertaistettuna, että elementin nimi kertoo myös käyttötarkoituksen. Alla esimerkki yksinkertaisesta sivurakenteesta: Html_xhtml-5.docx (10)

6 <div id= wrapper > <header> html 5 <nav> <article> id on yksilöivä nimi, joka annetaan elementille sen tunnistamista varten. Html5:n semanttiset elementit eivät tarvitse id:tä tyylejä varten. <footer> <div id= wrapper > <div id= header > html 4 xhtml <div id= nav > <div id= article > <div id= footer > Html_xhtml-5.docx (10)

7 Html-koodina rakenne näyttää tältä (body-osa): <body> <!-- html5-standardin mukaan --> <div id= wrapper > <header> yläpalkin sisältö, esim. logo, otsikko, banneri </header> <nav> linkit </nav> <article> sisältöosa, esim. tekstiä ja kuvia </article> <footer> alapalkin sisältö, esim. copyright, yhteystietoja </footer> </body> <body> <!-- html4- tai xhtml-standardin mukaan --> <div id= wrapper > <div id= header > yläpalkin sisältö, esim. logo, otsikko, banneri <div id= nav > linkit <div id= article > sisältöosa, esim. tekstiä ja kuvia <div id= footer > alapalkin sisältö, esim. copyright, yhteystietoja </body> Ilman css-tyylimäärityksiä tulos selaimessa on laiha: Html_xhtml-5.docx (10)

8 Css-tyylien liittäminen html-elementteihin Sivun 5 taulukosta näet, kuinka html-elementti ja sille tarkoitettu tyylimääritys liittyvät toisiinsa valitsimen avulla. Valitsinta voi ajatella myös tyylin nimenä. Alla olevassa taulukossa on lisää esimerkkejä: html-elementti <body> <h1> <p> <div id= wrapper > <div id= header > <div id= article > <p>tekstikappale</p> <article> <header> <article> <p>tekstikappale</p> </article> <h1 class= oikeatasaus > <p class= oikeatasaus > <a> käyttämätön linkki <a> hiiren osoitin linkin päällä <a> vierailtu linkki <a> aktiivinen linkki valitsin, joka liittää csstyylin html-elementtiin body h1 p #wrapper #header #article p article header article p.oikeatasaus a:link a:hover a:visited a:active kuvaus Kun valitsin on sama kuin html-elementti, tyyli vaikuttaa kaikkiin elementin esiintymiin, esim. kaikkiin tekstikappaleisiin. Kun id:tä käytetään valitsimena, sen eteen kirjoitetaan #-merkki. Tyyli vaikuttaa vain elementtiin, jolla on kyseinen id. Tyyli vaikuttaa tekstikappaleisiin, jotka ovat article-nimisen div-elementin sisällä. Html5:n uusille elementeille käytetään valitsimia kuten muillekin html-elementeille, vrt. ensimmäinen esimerkki. Tyyli vaikuttaa tekstikappaleisiin, jotka ovat article-elementin sisällä. Class-attribuutilla voidaan liittää itse nimetty tyyli mihin tahansa html-elementtiin, kunhan määritys sopii järkevästi siihen. Class-tyyppisen tyylin nimi (valitsin) alkaa aina pisteellä. Huomaa, että attribuutin arvossa pistettä ei käytetä. Linkeille voi css-tyyleillä muotoilla neljä olotilaa. Näin käyttäjä saa visuaalista palautetta toiminnastaan. Tyypillisesti muutetaan linkin tekstin väriä. Html_xhtml-5.docx (10)

9 Harjoitus: index-sivu ja tyylitiedosto 1) Avaa muistio-ohjelma (Notepad) tai vastaava mahdollisimman yksinkertainen tekstieditori. Voit myös asentaa ilmaisen koodieditorin Notepad++ : Älä käytä tekstinkäsittelyohjelmaa! 2) Tallenna tiedosto. Valitse tallennuspaikaksi sivustoa varten tekemäsi pääkansio tai luo pääkansio tallennuksen yhteydessä. Kirjoita tiedostonimeksi index.html ja vaihda tallennusmuodoksi Kaikki tiedostot (ettei muistio tee tiedostosta txt-päätteistä tekstitiedostoa). Valitse koodaukseksi UTF-8. 3) Kirjoita html5:n mukaisesti sivun 6 mukainen html-dokumentti (voit luntata sivulta 7). Voit jättää esimerkkitekstit pois ja koodata vain rakenneosat. 4) Avaa toinen muistio-ikkuna Käynnistä-painikkeen valikosta niin että html-tiedostosi ei sulkeudu. Tallenna uusi tiedosto yllä olevien ohjeiden mukaan nimellä tyylit.css samaan kansioon html-tiedoston kanssa. Notepad++ osaa pitää useita dokumentteja auki omilla välilehdillään, jotka saa aseteltua kätevästi myös rinnakkain. 5) Kirjoita css-tyylit html-dokumentin elementtejä varten. Määritä body-elementille taustaväri (background-color, esimerkiksi #333). Esimerkkiä löytyy sivuilla 4-5. Määritä wrapper-elementille leveys (width) 800 px ja korkeus (height) 700 px, ja marginaalit (margin-top: 10 px, margin-left: auto, margin-right: auto). Wrapper-elementti tulee näin keskitettyä sivulle ja 10 pikseliä irti yläreunasta. Html_xhtml-5.docx (10)

10 Määritä muille elementeille sopiva korkeus ja taustaväri. Melko kattava sävykartta löytyy täältä: (maininta www värin kohdalla kertoo, että se on selainturvallinen väri mutta muitakin voi käyttää). Harjoituksen esimerkkiratkaisu Notepad++ ikkunassa: Esimerkissä wrapperin sisällä olevien elementtien korkeudet on annettu prosentteina pikselilukemien sijaan. Huomaa Tallenna kaikki painike työkalurivillä. Html_xhtml-5.docx (10)

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

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

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

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

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

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

KompoZerin kotisivu on osoitteessa kompozer.net, josta sivun yläreunan Download-linkin takaa löytyy suomenkielisen version asennusohjelma.

KompoZerin kotisivu on osoitteessa kompozer.net, josta sivun yläreunan Download-linkin takaa löytyy suomenkielisen version asennusohjelma. KompoZer s. 1/15 1 Johdanto KompoZer on ohjelma www-sivujen tekemiseen ja sivustoon kuuluvien tiedostojen hallintaan. Ohjelmassa on graafinen WYSIWYG-käyttöliittymä (what you se is what you get), jonka

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

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

Editorin käyttö. TaikaTapahtumat -käyttöohje

Editorin käyttö. TaikaTapahtumat -käyttöohje Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset

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

http://www.microsoft.com/expression/

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

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

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

Kuva xhtml-sivulla. Mirja Jaakkola

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

Lisätiedot

Teeman rakentaminen Wordpressiin

Teeman rakentaminen Wordpressiin 1 Teeman rakentaminen Wordpressiin Jari Sarja lokakuu 2009 Sisältö Johdanto... 2 Valmiin teeman muokkaaminen... 2 XHTML:n perussäännöt... 4 Teeman tiedostot... 5 Sanasto... 5 Hierarkia... 5 Template...

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

SeaMonkey pikaopas - 1

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

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

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

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

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

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

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

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

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

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

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

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. Ohjetta voidaan käyttää sivupohjien luonnin apuna, on kuitenkin suositeltavaa että

Lisätiedot

Perustietoja Mietoisten kyläportaalista... 2. Yhdistyksen ylläpitäjän kirjautuminen... 2. Yhdistyksen etusivun muokkaaminen... 2

Perustietoja Mietoisten kyläportaalista... 2. Yhdistyksen ylläpitäjän kirjautuminen... 2. Yhdistyksen etusivun muokkaaminen... 2 Mietoisten kyläportaalin käyttöohjeet alasivujen ylläpitäjille Päivitetty 8.4.2011 Sisältö Perustietoja Mietoisten kyläportaalista... 2 Yhdistyksen ylläpitäjän kirjautuminen... 2 Yhdistyksen etusivun muokkaaminen...

Lisätiedot

Tietosuoja-portaali. päivittäjän ohje

Tietosuoja-portaali. päivittäjän ohje Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan

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

Taulukot. 2002 Päivi Vartiainen 1

Taulukot. 2002 Päivi Vartiainen 1 Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit

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

Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat

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,

Lisätiedot

Aloitusopas verkkosivuston ylläpitoon

Aloitusopas verkkosivuston ylläpitoon Aloitusopas verkkosivuston ylläpitoon JPP-Soft Oy 2(13) Sisällys Tervetuloa emedia CMS verkkopalveluiden käyttäjäksi... 3 Sivuston graafinen ilme ja rakenne... 4 Sivuston ilme ja tyyli... 5 Sivupohjat...

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

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

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot

Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi

Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi CT30A3200 - WWW-sovellukset Luento 1 Jouni Ikonen - Jouni.Ikonen lut.fi linkki Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen CT30A3200 WWW-sovellukset Tämän luennon aiheet: Kurssin yleiset asiat

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

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

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

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

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut 1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...

Lisätiedot

Ylläpitoalue - Etusivu

Ylläpitoalue - Etusivu Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

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

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

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

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan

Lisätiedot

Pedacode Pikaopas. Web-sovelluksen luominen

Pedacode Pikaopas. Web-sovelluksen luominen Pedacode Pikaopas Web-sovelluksen luominen Pikaoppaan sisältö Pikaoppaassa kuvataan, miten Netbeans-työkalulla luodaan uusi yksinkertainen web-sovellus ja testataan sen toiminta. Opas kattaa kaiken aiheeseen

Lisätiedot

HTML perusteita (ei julkiseen jakeluun)

HTML perusteita (ei julkiseen jakeluun) HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä

Lisätiedot

HTML editorin käyttö - 1

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

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

xhtml+css Survival Kit

xhtml+css Survival Kit xhtml+css Survival Kit xhtml:n ja CSS:n lyhyt oppimäärä OSA I: Muutama sana teoksesta 1. xhtml+css Survival Kit 2. Kiitokset ja kreditit OSA II: Alustus 1. Mitä xhtml ja CSS ovat? 2. xhtml-sivujen rakenne

Lisätiedot

KOTISIVUKONE ULKOASUEDITORI

KOTISIVUKONE ULKOASUEDITORI KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen

Lisätiedot

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö

Lisätiedot

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja Julkaisujärjestelmän ohje 2014 2 PM-Julk aisujärjestelmän perusohjeet Julkaisujärjestelmän käyttöönotto Julkaisujärjestelämän avulla voit itsenäisesti muokata

Lisätiedot

Kotisivut helposti - osa 4

Kotisivut helposti - osa 4 Kotisivut helposti - osa 4 Artikkelisarjan kolmessa ensimmäisessä osassa esiteltiin Internet-siviuihin sekä XHTML- ja CSS-ohjelmointikieliin liittyviä perusteita. Tässä osassa kerrotaan, miten aiemmin

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

BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla

BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla BLOGGER ohjeita blogin pitämiseen Googlen Bloggerilla Sisältö Blogin luominen... 1 Uuden blogitekstin kirjoittaminen... 4 Kuvan lisääminen blogitekstiin... 5 Lisää kuva omalta koneelta... 6 Lisää kuva

Lisätiedot

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi) 1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 4 2. Ruudukkopohjainen taitto... 5 2.1. 960 Grid System... 5 2.2.

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

Mainonnanhallinta Käyttöopastus. Tekniikka. Olli Erjanti. 8.4.2008 Mediareaktori

Mainonnanhallinta Käyttöopastus. Tekniikka. Olli Erjanti. 8.4.2008 Mediareaktori Mainonnanhallinta Käyttöopastus Tekniikka EmediateAd 3.7 Olli Erjanti Oppaassa käydään läpi seuraavaa: Mainospaikkojen luonti html-sivupohjaan Mainoskampanjan keskeytys teknisten tai muiden ongelmien vuoksi

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan

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

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti: HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis

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

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

SMART Board harjoituksia 17 - Notebook 10 Tiedostomuotoihin tallentaminen Yritä tehdä tehtävät sivulta 1 ilman että katsot vastauksia.

SMART Board harjoituksia 17 - Notebook 10 Tiedostomuotoihin tallentaminen Yritä tehdä tehtävät sivulta 1 ilman että katsot vastauksia. SMART Board harjoituksia 17 - Tiedostomuotoihin tallentaminen Yritä tehdä tehtävät sivulta 1 ilman että katsot vastauksia. http://www.kouluon.fi/ Harjoitus 1-17: NOTEBOOK muotoon tallentaminen Tee työpöydälle

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Tärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu...

Tärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu... Tärkeimmät toiminnot Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta Kun hiiren jättää kuvakkeen päälle vähäksi ajaksi Word selittää toiminnon Avaa tiedosto Tallenna Kumoa, nuolesta aiemmat

Lisätiedot

Teeman rakentaminen WordPressin versioon 3.0. Jari Sarja marraskuu 2010

Teeman rakentaminen WordPressin versioon 3.0. Jari Sarja marraskuu 2010 1 Teeman rakentaminen WordPressin versioon 3.0 Jari Sarja marraskuu 2010 2 Sisältö 1. Johdanto... 4 1.1. Mitä tarvitaan?... 4 2. Valmiin teeman muokkaaminen... 5 2.1. Teeman tiedostot... 8 2.2. Sanasto...

Lisätiedot

NTG CMS. Julkaisujärjestelm. rjestelmä

NTG CMS. Julkaisujärjestelm. rjestelmä NTG CMS Julkaisujärjestelm rjestelmä NTG CMS julkaisujärjestelmän avulla voit päivittää ja ylläpitää internetsivujen sisältöä helppokäyttöisen webkäyttöliittymän kautta, ilman minkäänlaista html-osaamista.

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

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

Lappi.fi -pikaohje Kittilän kylille:

Lappi.fi -pikaohje Kittilän kylille: Lappi.fi -pikaohje Kittilän kylille: Tämän pikaohjeen avulla pääsette alkuun sivujenne tekemisessä, mutta suosittelemme täydellisten Lappi.fi -ohjeiden lukemista ennen sivujenne tekemistä. Ohjeet löytyvät

Lisätiedot

Nvu 1.0. by Sami Mäkinen

Nvu 1.0. by Sami Mäkinen Nvu 1.0 by Sami Mäkinen Sisällysluettelo HTML... 1 Yleistä Nvusta... 3 Apua... 3 Sivun ja sivuston rakentamisesta... 3 Tiedostojen nimeämisestä... 3 Uuden sivun aloittaminen... 3 Näkymät... 3 Sivun tallentaminen

Lisätiedot

Ohjeistus yhdistysten internetpäivittäjille

Ohjeistus yhdistysten internetpäivittäjille Ohjeistus yhdistysten internetpäivittäjille Oman yhdistyksen tietojen päivittäminen www.krell.fi-sivuille Huom! Tarvitset päivittämistä varten tunnukset, jotka saat ottamalla yhteyden Kristillisen Eläkeliiton

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

NETTISIVUJEN PÄIVITYS OHJEET versio 1.1

NETTISIVUJEN PÄIVITYS OHJEET versio 1.1 1/7 Sisällysluettelo: YLEISOHJEET 1 HALLINTA 1 Hallinnan etusivu 2 Uutiset 3 Luo uusi uutinen 3 Luo uusi uutiskuva 4 Muokkaa vanhoja uutisia 4 Kuvagalleriat 4 Kalenteri 5 Joukkue 5 Pelaajat 5 Ottelut 6

Lisätiedot

Internet-projekti, nettisivujen päivitysohjeet

Internet-projekti, nettisivujen päivitysohjeet Internet-projekti, nettisivujen päivitysohjeet Unionin nettisivut ovat osoitteessa http://www.soroptimistit.fi. 28.11.2008 / Taina Rytkönen-Suontausta Klubien nettisivut ovat osoitteessa http://www.soroptimistit.fi/clubs/klubinnimi,

Lisätiedot

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan

Lisätiedot

H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet

H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet H6: Tehtävänanto Taulukkolaskennan perusharjoitus Ennen kuin aloitat harjoituksen teon, lue siihen liittyvä taustamateriaali. Se kannattaa käydä läpi kokeilemalla samalla siinä annetut esimerkit käyttämässäsi

Lisätiedot

Tekstieditorin käyttö ja kuvien käsittely

Tekstieditorin käyttö ja kuvien käsittely Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja

Lisätiedot

Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi.

Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Yleisohjeet mainosaineistoille Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Kun lähetät aineistoja sähköpostitse,

Lisätiedot

Sisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14

Sisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14 Ylläpitäjän ohje Sisältö Ylläpitäjän ohje... 1 Yleistä... 3 Vinkkejä ylläpitäjälle... 3 Osoitteet... 3 Internet-selain ja Flash-laajennus... 3 Julkinen sivunäkymä ja ylläpitonäkymä eri välilehdissä...

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

Bioenergia.fi VERKKOPALVELUKOHTAINEN OHJE 03.09.2009

Bioenergia.fi VERKKOPALVELUKOHTAINEN OHJE 03.09.2009 Bioenergia.fi VERKKOPALVELUKOHTAINEN OHJE 03.09.2009 Osoite Puhelin Fax Pankkiyhteys 1/19 Sisällysluettelo Yleistä...3 Ilmoitetut tapahtumat ja uutiset...3 Ilmoita tapahtuma ja Ilmoita uutinen sivujen

Lisätiedot

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit Android ohjelmointi Tunti 2 Käyttöliittymät ja resurssit Debug Log luokka mahdollistaa debug tulostamisen ADB:n kautta konsoliin (esim. DDMS:ään) esim. Log.println(Log.INFO, TAG, Tämä on println ); Voidaan

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

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita

Lisätiedot

Digitaalisen median tekniikat xhtml Harri Laine 1

Digitaalisen median tekniikat xhtml Harri Laine 1 Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Oma kartta Google Maps -palveluun

Oma kartta Google Maps -palveluun TAMPERE 1 (6) Oma kartta Google Maps -palveluun Google Maps palveluun on mahdollista luoda karttoja omilla paikkamerkeillä. Tilin luonti Google-palveluihin Tehdäksesi karttoja omilla paikkamerkinnöillä,

Lisätiedot

Kuvankäsittelyn verkkokurssi

Kuvankäsittelyn verkkokurssi Vantaan aikuislukio / Journalistiliitto -Freelanceosasto Kuvankäsittelyn verkkokurssi Tehtävä 12 Web-tallennus ja kuvagalleriat Photoshop sisältää muutamia osioita, jotka on tarkoitettu helpottamaan verkkoon

Lisätiedot

Asemointi. 1. Lohkon korkeus ja leveys

Asemointi. 1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö

Lisätiedot

POISSAOLOJEN SEURANTAJÄRJESTELMÄ

POISSAOLOJEN SEURANTAJÄRJESTELMÄ POISSAOLOJEN SEURANTAJÄRJESTELMÄ Opinnäytetyö PSK-Aikuisopisto Mac-datanomi, Digitaalinen viestintä Lakso Eija 15.01.2011 2 SISÄLLYSLUETTELO SISÄLLYSLUETTELO... 2 TIIVISTELMÄ... 3 1. JOHDANTO... 4 2. TYÖN

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