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

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

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

Transkriptio

1 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 tietyllä tavalla ja näyttää sitten tulkintansa mukaan käyttäjälle. Eri selaimet voivat tulkita saman html-koodin hieman eri tavoin. Lisäksi selaimet saattavat tukea sellaisia komentoja, mitä toiset selaimet eivät tunnista ollenkaan. HTML-kieli koostuu siis komennoista, joita sanotaan tageiksi. Esimerkiksi, jos haluamme kirjoittaa kappaleen tekstiä, niin käytämme tagia nimeltä P (paragraph=kappale). Tagit kirjoitetaan merkkien < ja > väliin. Esim. <P>. Selaimelle pitää myös ilmoittaa, koska komento päättyy. Se tapahtuu laittamalla merkkien < ja > väliin merkki /. Esim. </P>. Kappale tekstiä saataisiin HTML-koodiin seuraavasti <P> Minun tekstii... </P> Jotkin tagit toimivat yksinään esim. rivivaihdon aiheuttava tagi <BR> HTML-koodi alkaa aina ilmoituksella että kyseessä on HTML-koodi <HTML> Sitä seuraa pää ja runko <HEAD> erilaisia määreitä, css-koodia ja javascriptiä </HEAD> <BODY> varsinainen websivun sisältö tulee tähän </BODY> </HTML>

2 Tageihin voi lisätä määreitä eli attribuutteja. Esim. kertoa millaista tekstiväriä tai pohjaväriä käytetään. Esim. Tahdotaan, että koko dokumentissa käytetään punaista pohjaväriä ja sinistä tekstiä Silloin lisätään BODY-tagiin lisämääreet BGCOLOR (taustaväri) TEXT (kirjoitusväri) <BODY BGCOLOR=RED TEXT=BLUE> Väreistä lisää tuonnempana. Muutamia käyttökelpoisia tagejä: Otsikkoja löytyy 6 eritasoista. H1,H2,H3,H4,H5,H6 (H1 pääotsikko eli suurin) Esim. <H1>Suurin otsikko</h1> Jos tahtoo tasata kappaleita ja/tai otsikoita voidaan se tehdä ALIGN lisämääreellä, joka voi saada arvot LEFT,RIGHT,CENTER,JUSTIFY Esim. otsikon keskittäminen <H1 ALIGN=CENTER>Suurin otsikko</h1> Lihavointi <B>Lihavoitua tekstii</b> Kursivointi <I>kursiivia tekstii</i> Alleviivattua <U>alleviivattua tekstii</u> Kirjoituskonetyyli <TT>Kirjotuskonetekstii</TT> Esimuotoiltua tekstiä saadaan <PRE> -tagillä. Siinä selaimen tekemät muotoilut ovat (lähes) samanlaiset kuin ne on itse koodin seassakin. Tehtäviä. 1. Tee opettajan mallin mukainen eka web-sivu. Sitä on hyvä käyttää pohjana. 2. Tee kirjoitelma muistiota (notepad) käyttäen, vaikka kesälomastasi tai mistä vain aiheesta. Otsikoi tarinasi, lisää tekijän nimi väliotsikkona. Valitse otsikkosi ja tekstisi. Valitse pohjaväri ja kirjoitusväri. Lisää tekstin lomaan alleviivausta, lihavointia yms. Kokeile PRE-tagin käyttöä. 3. Tutustu web-sivuun

3 HTML Viivat, listat, linkit toisiin dokumentteihin Viivat Viivoja saa piirrettyä <HR> tagillä. Sillä ei ole lopetustagiä. Attribuutteina voi antaa mm. ALIGN (tasaus), WIDTH (leveys), SIZE (paksuus), COLOR (väri) Esim. Piirretään leveys suunnassa keskelle 200px pitkä ja 5px paksu punainen viiva. <HR ALIGN=center WIDTH=200 SIZE=5 COLOR=red> Esim. Viivan leveys voidaan määrätä myös suhteellisesti esim. 80% ruudun leveydestä <HR ALIGN+center WIDTH=80%> Listat Listoja ja luetteloita voidaan tehdä seuraavasti Järjestämätön lista Esim. <UL> <LI>Kissa</LI> <LI>Koira</LI> <LI>Sika</LI> </UL> Tulos: Kissa Koira Sika

4 Numeroitu lista <OL> <LI>Eka</LI> <LI>Toka</LI> <LI>Kolmas</LI> </OL> Tulos: 1. Eka 2. Toka 3. Kolmas CSS-koodauksella saadaan listoihin mm. omat luettelomerkit. Niistä myöhemmin. LINKIT Linkit toteutetaan ns. ankkureiden avulla. Käytetään tagia <A> Esim. tekstin kohtaa Heippa! napauttamalla siirtyminen Tampereen kotisivuille. <P>Diipadaapadaa, <A HREF= >Heippa!</A></P> Esim. Kuvaa napauttamalla siirtyminen Tampereen kotisivuille <A HREF= ><IMG SRC= kuva1.jpg ></A> Ankkurin voi siis laittaa mihin tahansa sivun elementtiin. HREF määreeseen tulee linkitettävän dokumentin nimi tai web-sivun nimi. Jos web-dokumenttisi on pitkä (ei mahdu yhdelle ruudulle), niin voit haluta tehdä linkkejä dokumentin sisään. Esim. tahdotaan sivun alkuun tehdä linkki sivun lopussa olevaan kuvaan. Sivun lopussa: <A name= loppukuva ><IMG SRC= finaali.jpg ></A> Sivun alussa: <A HREF= #loppukuva >Tästä klikkaamalla sivun loppuun</a> Teksti linkeillä on kolme väriä: Vierailematon linkki LINK, Vierailtu linkki VLINK, Aktiivinen linkki ALINK (ollaan juuri painamassa linkkiä). Värit lisätään BODY-tagiin <BODY LINK=red VLINK=blue ALINK=yellow>

5 HTML4 Fontit, erikoismerkit, ylä- ja alaindeksit FONTIT FONT-tagillä voidaan muokata kirjasimen kokoa, lajia ja väriä Esim. Halutaan kirjoittaa Arial-fontilla, hieman suuremmalla fontilla ja värillä punainen. Nämä saadaan attribuuteilla FACE, SIZE, COLOR <FONT FACE= Arial SIZE=+2 COLOR=RED>Tekstini</FONT> Tekstini Erilaisia fonttilajeja, jonka voi olettaa toimivan kaikkialla ovat Arial, Courier, Times New Roman, Verdana myös paljon muita löytyy! Koolle SIZE voidaan antaa arvoja 1 7. CSS-koodauksen avulla fontit voidaan määritellä vielä tarkemmin ja toivottavaa olisikin että web-sivuilla ei käytettäisi FONT-tagiä kirjasimen muotoiluun. INDEKSIT Yläindeksin saa tagillä SUP ja alaindeksin tagillä SUB Esim. X<SUP>2</SUP>+T<SUB>x</SUB> 2 X + T x ERIKOISMERKIT Erikoismerkit mm. <, >, &, ä, å, ö ei voida kirjoittaa suoraan HTML-koodin sekaan, koska selaimen HTML-tulkki ei osaisi enää tulkita koodia. Sen sijaan käytetään & merkillä alkavia koodeja Esim. < saadaan web sivulle &lt koodilla x&lt y (tai x&#60) Näyttää websivulla x<y. Tältä sivulta voit etsiä erikoismerkkien koodeja

6 HTML5 Taulukoiden tekeminen HTML kielessä Taulukot voidaan muodostaa <TABLE> tagillä. Taulukon rivit tehdään <TR> tagillä Taulukon solut tehdään <TD> tagillä esim. 2x2 taulukko, jossa luvut 1,2,3,4 <TABLE> <TR> </TR> <TR> </TR> </TABLE> <TD>1</TD><TD>2</TD> <TD>3</TD><TD>4</TD> Tulos: Reunat saadaan lisäämällä BORDER attribuutti esim. <TABLE BORDER=2> Taulukon leveys saadaan määrättyä WIDTH attribuutilla esim. <TABLE WIDTH=80%> olisi taulukon leveys 80% sivusta. Taulukon korkeus saadaan määrättyä HEIGHT attribuutilla esim. <TABLE HEIGHT=200> olisi taulukon korkeus 200 pikseliä. Taulukon vaakasuora tasaus saadaan ALIGN määrellä esim. <TABLE ALIGN=RIGHT> Taulukon pystysuora tasaus saadaan VALIGN määrellä, joka voi saada arvot TOP, BOTTOM, MIDDLE esim. <TABLE VALIGN=MIDDLE>

7 Jos tahdot yhdistä soluja, niin riveillä se tapahtuu COLSPAN määrellä esim. <TD COLSPAN=3> tekee tästä solusta 3 solun levyisen sarakkeissa se tapahtuu ROWSPAN määreellä esim. <TD ROWSPAN=2> yhdistää tämän ja alemman solun CELLSPACING attribuutilla voidaan määrätä paljonko solujen väliin jää tilaa CELLPADDING attribuutilla voidaan määrätä paljonko solun reunan ja sisällön väliin jää tilaa Taulukon solujen taustavärin voi muuttaa BGCOLOR määrellä Tehtäviä: 1. Tee taikaneliö Taikaneliö Tee taulukko ja laita taulukon soluihin kuvia

8 HTML6 Median (musiikki, video flash-animaatio yms.) lisääminen web-sivulle. Media voidaan upottaa websivustoon EMBED-tagillä. Esim. Videotiedosto omaelokuva.avi liittäminen web-sivulle. <EMBED SRC= omaelokuva.avi > EMBED-tagiin voi liittää seuraavat määreet. WIDTH leveys HEIGHT korkeus HIDDEN vaihtoehdot TRUE/FALSE näkyykö esim. musiikin tapauksessa soitin. AUTOSTART vaihtoehdot TRUE/FALSE käynnistyykö media automaattisesti. LOOP montako kertaa media soitetaan/esitetään. VOLUME äänen voimakkuus CONTROLLER näytetäänkö soitin CONTROLS mitä soittimen ominaisuuksia voi käyttää vaihtoehdot VOLUMELEVER STOPBUTTON PAUSEBUTTON PLAYBUTTON SMALLCONSOLE CONSOLE <NOEMBED> Mitä näytetään vaihtoehtoisesti </NOEMBED> InternetExplorerissa saa äänen soimaan taustalla BGSOUND-tagillä <BGSOUND SRC= omamusa.mp3 LOOP=2> soittaa omamusa.mp3 kahdesti. LOOP=INFINITE olisi loputon.

9 Tavallisimpia mediatiedostoja (tiedostopäätteet) Ääni wav (Wave) mp3 (MPEG-1 Audio Layer 3) au Video wmv (Windows media) mpeg,mpg (Moving Picture Expert Group) avi (Audio Video Interleave) mp4 (MPEG-4) qt (Quicktime) rm (Realmedia) Flash swf (Shockwave Flash) Tehtäviä: 1. Etsi musiikkitiedostoja ja musiikinpätkiä tai mitä vain äänitiedostoja ja liitä omalle websivulle. (Googleen hakusananksi mp3 audio sample) Tiedostotyypit: wav, mp3, au 2. Etsi videoklippejä jotka voit liittää omalle websivulle. (Googleen hakusanaksi avi video sample) Tiedostotyypit: mpeg, avi, wmv 3. Liitä flashanimaatio tai flashvideoklippi websivullesi. Esim. Youtube. Tiedostotyyppi: swf

10 HTML7 Kohde ikkuna. Linkkien yhteydessä voidaan valita mihin ikkunaan linkki avataan. TARGET-attribuutti kertoo mihin ikkunaan linkki avataan. TARGET voi saada arvokseen Ikkunan nimen (linkki avataan kyseisen nimisessä ikkunassa) _blank(linkki avataan uuteen ikkunaan) _parent(linkki avataan ylempänä hierarkiassa olevaan kehykseen tai ikkunaan) _top(avaa ylimpänä hierarkiassa olevaan kehykseen tai ikkunaan) _self(linkki avataan kuten ilmankin target määrettä) Esim. Avataan linkki uuteen ikkunaan <A HREF= webbisivu.html TARGET= _blank >Klikkaa tähän</a> Kehykset Kehyksillä on tarkoitus jakaa ikkuna useampaan osaikkunaan (kehykseen). Pääsivu esim. Paasivu.html <HTML> <HEAD></HEAD> <FRAMESET COLS= 30%,70% > <FRAME NAME= ekakehys SRC= eka.html > <FRAME NAME= tokakehys SRC= toka.html > </FRAMESET> <NOFRAMES> <BODY> Selain ei tue kehyksiä. </BODY> </NOFRAMES> </HTML>

11 Ensimmäinen kehys voisi sisältää linkkiluettelon, josta klikkaamalla sivut aukeavat toiseen kehykseen. eka.html <HTML> <BODY> <A HREF= TARGET= tokakehys >Tampere</A><br> <A HREF= TARGET= tokakehys > Turku</A><br> <A HREF= TARGET= tokakehys > Helsinki</A><br> <A HREF= toka.html TARGET= tokakehys > Alkuun</A><br> </BODY> </HTML> Määreitä FRAMESET yhteydessä: COLS miten jaetaan pystysuoriin kehyksiin ROWS miten jaetaan vaakasuoriin kehyksiin FRAME yhteydessä: FRAMEBORDERS Tuleeko reunat kehyksiin (1 tai 0) SCROLLING Tuleeko vierityspalkit (YES, NO, AUTO) NORESIZE Voiko käyttäjä muuttaa kehysten kokoa (NORESIZE) IFRAME voidaan tehdä websivun sisään kehyksiä (kaikki selaimet eivät välttämättä tue) <IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> Selaimesi ei tue dokumentin sisäisiä kehyksiä </IFRAME>

12 HTML8 Lomakkeet. Lomakkeita muodostetaan FORM-tagillä. Lomakkeen elementteinä voivat toimia: Tekstilaatikot: Suorakulmainen alue johon voidaan kirjoittaa esim. salasana Tekstialueet: Suorakulmainen alue, johon voidaan kirjoittaa vaikkapa pitkä tarina Radionapit: Nappeja joista vain yksi kerrallaan voi olla valittuna Valittava laatikko: Rastitettavat ruudut Valikot: Laatikko, josta voidaan valita eri vaihtoehdoista hiirellä Reset painike: Lomakkeen tietojen tyhjennys Elementtejä lisätään INPUT-tagillä ja valikot SELECT-tagillä. Esim. <FORM name= lomake > <INPUT TYPE=TEXT NAME= tekstilaatikko MAXLENGHT=30 SIZE=15 VALUE= Kirjoita tähän ><BR> Salasanasi <INPUT TYPE=PASSWORD NAME= salasana MAXLENGHT=30 SIZE=15 VALUE= ><BR>

13 <TEXTAREA NAME= tekstialue ROWS=6 COLS=40 WRAP=OFF (muut vaihtoehdot soft ja hardl) VALUE= Kirjoita tähän paljon tekstiä >Kirjoita</TEXTAREA><BR> Punainen <INPUT TYPE=RADIO NAME= radionapit VALUE= Punainen > Vihreä <INPUT TYPE=RADIO NAME= radionapit VALUE= Vihreä > Sininen <INPUT TYPE=RADIO Tykkään rasteista NAME= radionapit VALUE= Sininen ><BR> <INPUT TYPE=CHECKBOX NAME= valintaruutu VALUE= Tykkään rasteista ><BR> <SELECT NAME= valikko > <OPTION VALUE= Punainen >Punanen</OPTION> <OPTION VALUE= Vihreä >Vihreä</OPTION> <OPTION VALUE= Sininen >Sininen</OPTION>

14 <OPTION VALUE= Musta SELECTED>Musta</OPTION> </SELECT><BR> <INPUT TYPE=RESET VALUE= Tyhjennä ><BR> </FORM> Painikkeita voidaan lisätä BUTTON-tagillä <BUTTON TYPE=BUTTON NAME= painonappi VALUE= Painettu >Tökkää nappia</button> Muita vaihtoehtoja Tiedoston valitseminen lähetettäväksi <INPUT TYPE=FILE> Kuvallinen painike <INPUT TYPE=IMAGE SRC= kuva.jpg ALT= Kuva ei näy, tästä painat > Tehtäviä: 1. Tee lomake, joka kyselee käyttäjältä Nimen, Osoitteen, Lempivärin, Salaisen tervehdyksen, Pyytää kertomaan itsestään sekä sisältää kuvallisen lähetä painikkeen, Tee myös muutama muu kysymys, johon voit käyttää rasti ruutuun menetelmää. Lomakkeessa on myös tyhjennys-painike. Valitse järkevät lomakkeen elementit.

15 HMTL META META-tagilla, annetaan yleistä tietoa HTML-dokumentista esim. hakukoneiden kuten google avuksi. META tagit sijoitetaan HEAD osaan dokumentissa. METAtagilla ei ole lopetustagia </META>. esim. <HEAD> <META name= description content= HTML OHJEITA > <META name= author content= Olli Opettaja > </HEAD> META-tagissa on kaksi määrettä name ja content eli name kerrotaan dokumentin ominaisuuden nimi ja content sisältää ominaisuuden. Lisää esimerkkejä: <meta name="content-language" content="fi"> <meta name="robots" content="index, follow"> <meta name="description" content="sivujen kuvaus omin sanoin"> <meta name="keywords" content="avainsanat"> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="pragma" content="no-cache"> <meta http-eguiv="expires" content="0"> <meta http-equiv="refresh" content="1200"> <meta http-equiv="expires" content="now"> <meta http-equiv="window-target" content="_top"> <meta name="copyright" content=" Copyright 2004, Etunimi Sukunimi"> <meta name="author" content="etunimi Sukunimi"> <meta name="publisher" content="etunimi Sukunimi"> <meta name="pagetopic" content="internet"> <meta name="pagetype" content="html-formular"> <meta name="audience" content="experts"> Käytetty kieli Robotit seuraavat linkkejä jotka ovat etusivullasi Sisältö omin sanoin Avainsanat jotka sivulla esiintyvät Sivujen tyyppi texti/html Sivu ladataan joka kerta uudestaan palvelimelta. (ei käytetä sivu välimuistia) Sivu ei tallennu välimuistiin (tuorein versio sivusta avautuu) Ladataan palvelimelta 20 minuutin välein kun sivu auki Vanhentumis aika Uusi sivu Tekijänoikeus Tekijä Julkaisija Sivujen kohde Sivutyyppi Kohderyhmä

16 Sivun avaustyylit content="blendtrans(duration=1.0)"> content="revealtrans(duration=1.0,transition=0)"> content="revealtrans(duration=1.0,transition=1)"> content="revealtrans(duration=1.0,transition=2)"> content="revealtrans(duration=1.0,transition=3)"> content="revealtrans(duration=1.0,transition=4)"> content="revealtrans(duration=1.0,transition=5)"> content="revealtrans(duration=1.0,transition=6)"> content="revealtrans(duration=1.0,transition=7)"> content="revealtrans(duration=1.0,transition=8)"> content="revealtrans(duration=1.0,transition=9)"> content="revealtrans(duration=1.0,transition=10)"> content="revealtrans(duration=1.0,transition=11)"> content="revealtrans(duration=1.0,transition=12)"> content="revealtrans(duration=1.0,transition=13)"> content="revealtrans(duration=1.0,transition=14)"> content="revealtrans(duration=1.0,transition=15)"> content="revealtrans(duration=1.0,transition=16)"> content="revealtrans(duration=1.0,transition=17)"> content="revealtrans(duration=1.0,transition=18)"> content="revealtrans(duration=1.0,transition=19)"> content="revealtrans(duration=1.0,transition=20)"> content="revealtrans(duration=1.0,transition=21)"> content="revealtrans(duration=1.0,transition=22)"> content="revealtrans(duration=1.0,transition=23)"> Avautuu pehmeästi 1 ssä Siirtymä reunoista neliönä 1 ssä Siirtymä keskeltä neliönä 1 ssä Siirtymä reunoista ympyränä 1 ssä Siirtymä keskeltä ympyränä 1 ssä Siirtymä alhaalta 1 ssä Siirtymä ylhäältä 1 ssä Siirtymä vasemmalta 1 ssä Siirtymä oikealta 1 ssä Pystysuuntaiset kaihtimet 1 ssä Vaakasuuntaiset kaihtimet 1 ssä Sakkiruudut vaakasuunnassa 1 ssä Sakkiruudut pystysuunnassa 1 ssä Satunnainen hajonta 1 ssä Siirtymä reunoista pystysuunnassa 1 ssä Siirtymä keskeltä pystysuunnassa 1 ssä Siirtymä reunoista vaakasuunnassa 1 ssä Siirtymä keskeltä vaakasuunnassa 1 ssä Sahalaita ylhäältä vasemmalle 1 ssä Sahalaita ylhäältä vasemmalle 1 ssä Sahalaita alhaalta vasemmalle 1 ssä Sahalaita ylhäältä oikealle 1 ssä Sahalaita alhaalta oikealle 1 ssä Viivat vaakasuunnassa 1 ssä Satunnainen 1 ssä

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE=text/css> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...

Lisätiedot

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN -Mene osoitteeseen keskustanuoret.fi/user - Kirjoita saamasi käyttäjätunnus ja salasana - Klikkaa yllä olevaa piirisi logoa niin

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

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

Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä.

Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeet Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeen tyylit kannattaa määritellä omaan, eriliseen,

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

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

UpdateIT 2010: Editorin käyttöohje

UpdateIT 2010: Editorin käyttöohje UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...

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

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina

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

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aineisto-valikon tai Add an activity or resource valikon (Asetukset lohko Activity chooser on toiminnon ollessa päällä). Valitse

Lisätiedot

KURSSIX: KURSSIEN HALLINTA -OHJELMA. Kurssix-ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3

KURSSIX: KURSSIEN HALLINTA -OHJELMA. Kurssix-ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3 1 KURSSIX: KURSSIEN HALLINTA -OHJELMA -ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3 Kurssin luominen Kurssin lisääminen 4 Kurssitietojen muuttaminen 5 Kurssin poistaminen 5 Kurssin opettajan määrittely

Lisätiedot

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) 6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren

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

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

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

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

STS Uuden Tapahtuma-dokumentin teko

STS Uuden Tapahtuma-dokumentin teko STS Uuden Tapahtuma-dokumentin teko Valitse vasemmasta reunasta kohta Sisällöt. Sisällöt-näkymä Valitse painike Lisää uusi Tapahtuma 1 Valitse kieleksi Suomi Välilehti 1. Perustiedot Musta reunus kieliversioneliön

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012 Aineistot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi tiedostot siirtää

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

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

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

1 Dreamweaver MMX. 2 Tekstin muokkaus

1 Dreamweaver MMX. 2 Tekstin muokkaus 1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta

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

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

GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla

GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla GEOS 1 Ilmastodiagrammi Libre Office Calc ohjelmalla Libre Office Calc ohjelman saat ladattua ilmaiseksi osoitteesta: https://fi.libreoffice.org/ Tässä ohjeessa on käytetty Libre Office Calc 5.0 versiota

Lisätiedot

Google-dokumentit. Opetusteknologiakeskus Mediamylly

Google-dokumentit. Opetusteknologiakeskus Mediamylly Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan

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

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

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

Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla

Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Avaa Paint.NET tuplaklikkaamalla sen pikakuvaketta. Paint.NET avautuu tämän näköisenä. Edessä on tyhjä paperi. Saadaksesi auki kuvan, jota aiot pienentää

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

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

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

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

KÄYTTÖOHJE LATOMO VERSO

KÄYTTÖOHJE LATOMO VERSO Kirjautuminen Kirjatuminen järjestelmään tapahtuu syöttämällä ylläpitäjältä (yleensä sähköpostilla) saatu käyttäjätunnus ja salasana niille varattuihin kenttiin. Jos olet unohtanut salasanasi voit syöttää

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

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

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4 51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja,

Lisätiedot

TAULUKKO, KAAVIO, SMARTART-KUVIOT

TAULUKKO, KAAVIO, SMARTART-KUVIOT PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden

Lisätiedot

Upotukset artikkeleihin - videot ja Spotify-listat

Upotukset artikkeleihin - videot ja Spotify-listat PIKI-verkkokirjasto 1 artikkeleihin - videot ja Spotify-listat Voit tehdä Spotify-listojen ja videoiden upotuksia artikkeleihin. Upotuskoodeihin on kuitenkin laitettava hieman lisäkoodia, jotta upotukset

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 5/8: Mediaelementit Edellinen

Lisätiedot

Sivueditorin käyttöohje

Sivueditorin käyttöohje Sivueditorin käyttöohje Voit tehdä tyylikkäät nettisivut yrityksellesi sivueditorilla. Sivueditorin avulla on helppoa päivittää ja ylläpitää sivuja silloin, kun sinulle parhaiten sopii. Aloittaaksesi tarvitset

Lisätiedot

EeNet materiaalit ohje

EeNet materiaalit ohje EeNet materiaalit ohje EeNetin materiaaleissa voidaan ladata ja jakaa materiaaleja sekä katsoa ja keskustella materiaaleista. Materiaalit voivat olla teksti-, kuva tai videotiedostoja. Videoihin voidaan

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

Kopiodaksesi, leikataksesi ja liittääksesi helpointa on käyttää näppäimistön pikavalintoja:

Kopiodaksesi, leikataksesi ja liittääksesi helpointa on käyttää näppäimistön pikavalintoja: Ohjeita järjestöpankin käytön tueksi Huomioitavaa:... 1 1 Sisäänkirjautuminen... 2 2 Sivun/henkilökortin muokkaaminen... 2 3 Uutisen/sivun/tapahtuman, tms. lisääminen... 3 4 Uutisen/tapahtuman saaminen

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

Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome

Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn

Lisätiedot

Artikkelin lisääminen

Artikkelin lisääminen Sisällys Artikkelin lisääminen...3 Artikkelin muokkaaminen...5 Kuvan lisääminen artikkeliin...6 Väliotsikoiden lisääminen artikkeliin...9 Navigointilinkin lisääminen valikkoon...10 Käyttäjätietojen muuttaminen...13

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

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

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne

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

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

Päivitysperiaatteet: Verkkosivuja päivitetään selainpohjaisella WordPress-ohjelmalla, pikaohje seuraavilla sivuilla.

Päivitysperiaatteet: Verkkosivuja päivitetään selainpohjaisella WordPress-ohjelmalla, pikaohje seuraavilla sivuilla. 18.4.2017 KS2019-nettisivuston päivitysperiaatteet- ja pikaohjeet Nettisivujen www.ks2019.fi pääpäivitysvastuu: - maakuntauudistus-viestintä ja yleinen: Virpi Heikkinen, Keski-Suomen liitto - sote-viestintä:

Lisätiedot

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:

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

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

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

RATKAISUT SIVU 1 / 15. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa.

RATKAISUT SIVU 1 / 15. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa. RATKAISUT SIVU 1 / 15 PowerPoint jatko Harjoitus 3.1-3.7: Harjoitus 3.1: Avaa ensin Harjoitustiedosto.pptx. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa. Valitse joka tapauksessa

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

Ensin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat

Ensin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat 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

Uutiskirjesovelluksen käyttöohje

Uutiskirjesovelluksen käyttöohje Uutiskirjesovelluksen käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Johdanto... 1 Päänavigointi...

Lisätiedot

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.

Lisätiedot

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE IT-palvelut / Hannele Rajaniemi optima-support@jyu.fi www.jyu.fi/itp/optima-ohjeet 2 Sisältö Mikä on koosteen idea? Miten saan kooste-työkalun käyttööni? Miten luon koosteen?

Lisätiedot

1. HARJOITUS harjoitus3_korjaus.doc

1. HARJOITUS harjoitus3_korjaus.doc Word - harjoitus 1 1. HARJOITUS harjoitus3_korjaus.doc Kopioi itsellesi harjoitus3_korjaus.doc niminen tiedosto Avaa näyttöön kopioimasi harjoitus. Harjoitus on kirjoitettu WordPerfet 5.1 (DOS) versiolla

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

Outlook Web Access 1(7) 9.9.2011 OUTLOOK WEB ACCESS (OWA) SÄHKÖPOSTIN KÄYTTÖ

Outlook Web Access 1(7) 9.9.2011 OUTLOOK WEB ACCESS (OWA) SÄHKÖPOSTIN KÄYTTÖ Outlook Web Access 1(7) OUTLOOK WEB ACCESS (OWA) SÄHKÖPOSTIN KÄYTTÖ Pääset OWA-sähköpostiin selaimella (esim. Internet Explorer, Mozilla Firefox). Tässä ohjeessa on käytetty Internet Exploreria, jonka

Lisätiedot

CMS Made Simple Perusteet

CMS Made Simple Perusteet CMS Made Simple Perusteet 1. Hallintaan kirjautuminen Kirjautumisruutuun pääset lisäämällä osakaskuntasi www-osoitteen perään liitteen /admin. Käyttäjätunnuksena toimii onkija ja salasanana postitse saamasi

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

Osaamispassin luominen Google Sites palveluun

Osaamispassin luominen Google Sites palveluun n luominen Google Sites palveluun Mikä Osaamispassi on? Osaamispassi auttaa kertomaan taidoistasi, koulutuksestasi, työkokemuksestasi ja sinua kiinnostavista asioista työnantajalle kun haet työtä. Osaamispassi

Lisätiedot

Epooqin perusominaisuudet

Epooqin perusominaisuudet Epooqin perusominaisuudet Huom! Epooqia käytettäessä on suositeltavaa käyttää Firefox -selainta. Chrome toimii myös, mutta eräissä asioissa, kuten äänittämisessä, voi esiintyä ongelmia. Internet Exploreria

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

Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.

Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Sisäänkirjauduttuasi näet palvelun etusivulla helppokäyttöisen hallintapaneelin. Vasemmassa reunassa on esillä viimeisimmät tehdyt muutokset

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

Pikaohjeita OneNote OPS:in käyttäjille

Pikaohjeita OneNote OPS:in käyttäjille OneNote OPS OHJE Pikaohjeita OneNote OPS:in käyttäjille Vinkki: Jos et löydä hakemaasi, voit painaa F1-painiketta, joka avaa OneNote-ohjeen, josta voit hakea hakusanoilla vastausta kysymyksiisi liittyen

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