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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Kuvat ja taustat ICT1TN004. Elina Ulpovaara Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa

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

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

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

on klubin nimi pienillä kirjaimilla ja väliviivalla, esimerkiksi seinajoki; palkaneen-seutu; turku-aboa.

on klubin nimi pienillä kirjaimilla ja väliviivalla, esimerkiksi seinajoki; palkaneen-seutu; turku-aboa. Internet-projekti Jäsenalue / Sähköinen toimisto Syksyllä 2009 unioni on rakentanut uudistettua jäsenaluetta tai sähköistä toimistoa. Jäsenalueelle pääsee unionin nettisivujen vasemmasta palstasta, Kirjaudu

Lisätiedot

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun OpenSpace NetEazer julkaisujärjestelmä on täydellinen informaatiojärjestelmä nykyaikaisten wwwpalvelujen sisällöntuotantoon.

Lisätiedot

ICT1TN004. Lomakkeet. Heikki Hietala

ICT1TN004. Lomakkeet. Heikki Hietala Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen

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

Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki.

Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki. Asiakirjan valmistelu Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki. Tarkista, ettei dokumentissa ole peräkkäisiä

Lisätiedot

Ohje Sosiaalikollegan ja järjestöpankin päivitykseen Päivitetty 17.1.2013

Ohje Sosiaalikollegan ja järjestöpankin päivitykseen Päivitetty 17.1.2013 Ohje Sosiaalikollegan ja järjestöpankin päivitykseen Päivitetty 17.1.2013 Sisältö Yleisimmin käytettyjä pikavalintoja... 1 1 Sisäänkirjautuminen... 1 2 Omien asetusten tarkistaminen ja salasanan muuttaminen...

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

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

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

Wordpress- ohje nettisivujen laadintaan

Wordpress- ohje nettisivujen laadintaan Wordpress- ohje nettisivujen laadintaan Leo Suomela 2 / 13 Sisältö 1 Johdanto... 3 2 Aloitusnäkymä... 3 3 Ohjausnäkymä... 4 4 Sivujen lisäys... 6 5 Etusivun määritys... 9 6 Teeman muokkaus... 13 3 / 13

Lisätiedot

Opinnäytetyön mallipohjan ohje

Opinnäytetyön mallipohjan ohje Opinnäytetyön mallipohjan ohje Sisällys 1 Johdanto 1 2 Mallin käyttöönotto 1 3 Otsikot 2 3.1 Luvun otsikko 3 3.2 Alalukujen otsikot 5 4 Tekstikappaleet 5 5 Kuvat ja kuviot 6 6 Taulukot 6 7 Lainaus 7 8

Lisätiedot

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen Verkkosivustojen suunnittelu ja rakentaminen CSS-perusteet Sisällysluettelo 1 Johdanto 2 CSS:n syntaksi 3 Valitsimet 4 CSS:n liittäminen dokumentteihin 4.1 CSS erillisenä tiedostona 4.2 CSS upotettuna

Lisätiedot

3. Vasemman reunan resurssiselaimen Omiin resursseihin luodaan uusi Handmade -niminen kansio.

3. Vasemman reunan resurssiselaimen Omiin resursseihin luodaan uusi Handmade -niminen kansio. ActivInspire JATKO AINEISTON TUOTTAMINEN Uuden aineiston tekemisen alkua helpottaa etukäteen tehty suunnitelma (tekstit, kuvat, videot, linkit) miellekarttaa hyödyntäen. Valmista aineistoa voi muokata

Lisätiedot

Turun yliopiston Nelli ohje käyttöönottoon

Turun yliopiston Nelli ohje käyttöönottoon Turun yliopiston Nelli ohje käyttöönottoon Perusajatus Perusajatus on sulkea metalib sivu sarakkeeseen, jonka vierelle toiseen sarakkeeseen sijoitetaan hakemistovalikko. Metalib sivujen muokkaus Metalib

Lisätiedot

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa

Lisätiedot

ez Publish ja Toolbar yleisohjeet

ez Publish ja Toolbar yleisohjeet ez Publish ja Toolbar yleisohjeet SISÄLLYSLUETTELO: 1. Perustyökalut 2 1.1 Sivupohjan valinta ja sivun lisäys 2 1.2 Sivun muokkaus, siirto ja poisto 2 1.3 Puurakenne, aakkospainike, TR-painike ja F-painike

Lisätiedot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot HTML-kielen alkeet Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot ovat tavallisia tekstitiedostoja, jotka selain tulkkaa

Lisätiedot

Asiakirjan rakenne ja sen esilletuominen tekstinkäsittelyohjelmassa

Asiakirjan rakenne ja sen esilletuominen tekstinkäsittelyohjelmassa Asiakirjan rakenne ja sen esilletuominen tekstinkäsittelyohjelmassa Yleistä Demon tavoitteena on oppia käyttämään tekstinkäsittelyohjelmaa asiakirjan rakenteen luomiseen ja esittämiseen. Harjoitus on tehty

Lisätiedot

24h Admin V1.00 20.11.2004 / 24h_Admin_v100.pdf 1/9

24h Admin V1.00 20.11.2004 / 24h_Admin_v100.pdf 1/9 24h Admin V1.00 20.11.2004 / 24h_Admin_v100.pdf 1/9 Copyright Yleiskuvaus 1. Perusasioita kirjautumisesta 2. Kirjautuminen 3. Sivut 4. Yläpalkki 5. Sivujen kuvaukset 5.1 Versiotiedot 5.2 Pääsivu 5.3 Valikon

Lisätiedot

Kyläsivujen InfoWeb-ohje

Kyläsivujen InfoWeb-ohje Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina

Lisätiedot

Nuorten hyvinvointi tilastotietokannan käyttöohjeet Tieke 18.5 2015

Nuorten hyvinvointi tilastotietokannan käyttöohjeet Tieke 18.5 2015 Nuorten hyvinvointi tilastotietokannan käyttöohjeet Tieke 18.5 2015 Taulukon valinta Valitse vasemmalta kansioita, kunnes saat taulukkoluettelon näkyviin. Jos etsit tietoa jostain tietystä aiheesta, voit

Lisätiedot

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut.

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut. Kotisivu ohje Kotisivu - ohjelmisto on webbipohjainen kotisivujen julkaisujärjestelmä jossa käyttäjä ei tarvitse erityistaitoja kyetäkseen julkaisemaan webbisivuja. Jos osaat käyttää Microsoft Word tekstinkäsittelyohjelmaa,

Lisätiedot

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 1 WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 10.4.2015 Lounea Oy Tehdaskatu 6, 24100 Salo Puh. 029 707 00 Y-tunnus 0139471-8 www.lounea.fi Asiakaspalvelu 0800 303 00 Yrityspalvelu 0800 303 01 Myymälät 0800 303

Lisätiedot

Oulun yliopiston www-sivujen tekeminen

Oulun yliopiston www-sivujen tekeminen Oulun yliopiston www-sivujen tekeminen Oulun yliopiston ja sen yksiköiden www-sivuilla noudatetaan yliopiston www-politiikan peruslinjauksia sekä graafisen ohjeiston mukaista visuaalista linjaa. Yhtenäisellä

Lisätiedot

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio 1 PROJEKTIN KUVAUS... 3 1.1 Projektin aloitus... 3 1.2 Aikataulu... 4 1.3 Kustannusarvio... 4 2 ULKOASU... 5 2.1

Lisätiedot

Ohje 13.1.2016. Ohjeessa käydään läpi tilastotietokannan peruskäyttöohjeet.

Ohje 13.1.2016. Ohjeessa käydään läpi tilastotietokannan peruskäyttöohjeet. Ohje 1/8 13.1.2016 Tilastotietokannan käyttö Ohjeessa käydään läpi tilastotietokannan peruskäyttöohjeet. Luonnonvarakeskuksen PX-Web tilastotietokanta on osoitteessa: http://statdb.luke.fi/pxweb/pxweb/fi/luke/

Lisätiedot

2. Aloitus -välilehti, leikepöytä- ja fontti -ryhmät

2. Aloitus -välilehti, leikepöytä- ja fontti -ryhmät 2. Aloitus -välilehti, leikepöytä- ja fontti -ryhmät Aloitus -välilehdelle on sijoitettu eniten käytetyt muotoiluihin liittyvät komennot. Välilehti sisältää viisi eri ryhmää, johon komennot on sijoitettu

Lisätiedot

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010 WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi

Lisätiedot

WWW-Sivustojen suunnittelu

WWW-Sivustojen suunnittelu WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi

Lisätiedot

SPORTTISAITTI KÄYTTÖOHJE

SPORTTISAITTI KÄYTTÖOHJE MUOKKAUSTILA Muokkaustilaan siirtyminen Siirry muokkaustilaan klikkaamalla copyright ( )- merkkiä omalla sivustollasi (esim. seurannimi.sporttisaitti.com). Merkki löytyy sivun alareunasta. Kirjoita käyttäjätunnus

Lisätiedot

Multimaker7 ohjelmalla tuotettujen ohjelmien julkaisusta

Multimaker7 ohjelmalla tuotettujen ohjelmien julkaisusta 1 Multimaker7 ohjelmalla tuotettujen ohjelmien julkaisusta Multimakerohjelmalla tuotettuja ohjelmia voidaan julkaista joko CD-tuotantona tai webbisovelluksena. CD-tuotantoon käännettyjen ohjelmien katselu

Lisätiedot

TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE

TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE HERVANNAN KIRJASTON TIETOTORI Insinöörinkatu 38 33720 Tampere 040 800 7805 tietotori.hervanta@tampere.fi TALLENNETAAN MUISTIKULLE JA MUISTIKORTILLE 1 Muistitikun

Lisätiedot

opiskelijan ohje - kirjautuminen

opiskelijan ohje - kirjautuminen opiskelijan ohje - kirjautuminen estudio on Edupolin kehittämä e-oppimisympäristö koulutusryhmän verkkoalustana perinteisen luokkaopetuksen tukena. etäopiskelussa ja -opetuksessa kotoa tai työpaikalta.

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

Ajokorttimoduuli Moduuli 2. - Laitteenkäyttö ja tiedonhallinta. Harjoitus 1

Ajokorttimoduuli Moduuli 2. - Laitteenkäyttö ja tiedonhallinta. Harjoitus 1 Ajokorttimoduuli Moduuli 2 - Laitteenkäyttö ja tiedonhallinta Harjoitus 1 Tämän harjoituksen avulla opit alustamaan levykkeesi (voit käyttää levykkeen sijasta myös USBmuistitikkua). Harjoitus tehdään Resurssienhallinnassa.

Lisätiedot

HTML-ohjeet. Sivun perusrakenne