3 Muotoilu 27. elementtiä käytetään ja miltä se näyttää selaimessa.

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

Download "3 Muotoilu 27. elementtiä käytetään ja miltä se näyttää selaimessa."

Transkriptio

1 27 Tässä kappaleessa käydään läpi tekstin muotoiluun liittyvät elementit ja niiden käyttö. Lisäksi käydään läpi sivun ulkonäköön liittyvät elementit kuten taustaväri sekä sivun jaotteluun käytettävät elementit, kuten viivat ja kappaleet. Muotoilusta on paljon hyötyä: ne tekevät tekstistä visualisesti värikkäämpää, helpommin luettavaa sekä mahdollistavat sen, että tekstejä käyttävät agenttiohjelmat voivat muuttaa käyttäytymistään törmätessään tiettyyn elementtiin (esim. puhesyntetisaattori voi nostaa äänenvoimakkuutta kohdatessaan STRONG-elementin). 3.1 Tekstin muotoilu HTML-dokumentissa tekstiä voidaan muotoilla monilla eri tavoilla. Seuraavassa on käyty läpi ilmaisuelementit (phrase elements), joiden avulla voidaan muokata tekstin ulkoasua. Kaikilla näillä elementeillä on seuraavat attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Attribuutit ja niiden käyttö on käyty läpi kappaleessa 14. Kaikkien attribuuttien hyödyllisyys ei ehkä paljastu heti, mutta niistä voi olla hyötyä jossain tilanteessa. Sitaattiin (esim. Q-elementti) voisi olla hyvä merkitä alkuperäinen kieli langattributilla. Kaikki seuraavat muotoiluelementit vaativat alku- ja lopputagin. Tämä tarkoittaa sitä, että esim. EM-elementin alkaessa <EM>-tagilla sen vaikutus loppuu vasta kun tiedostossa esiintyy </EM>-tagi EM EM-elementtiä käytetään korostukseen. Seuraava esimerkki osoittaa, kuin elementtiä käytetään ja miltä se näyttää selaimessa. <TITLE>EM-elementti</TITLE> <EM>EM-elementillä korostettua tekstiä.</em>

2 28 EM-elementin korostus näyttää lähinnä kursiivilta STRONG STRONG-elementtiä voidaan käyttää EM-elementtiä voimakkaamman korostuksen ilmaisemiseksi. Elementin käyttö käy ilmi seuraavasta esimerkistä. STRONGelementillä korostettu teksti näyttää lähinnä lihavoidulta tekstiltä. <TITLE>STRONG-elementti</TITLE> <STRONG>STRONG-elementillä korostettua tekstiä.</strong> STRONG-elementillä korostettu teksti.

3 DFN DFN-elementtiä (DFN tulee ilmeisesti sanasta definition) käytetään termien määrittelyn yhteydessä. Se on yksi uusimmista elementeistä. Seuraava esimerkki kertoo elementin käytön. <TITLE>DFN-elementti</TITLE> <DFN>DFN-elementillä korostettua tekstiä.</dfn> DFN-elementillä korostettua tekstiä CODE CODE-elementillä kuvataan ohjelmointikielten koodia tai muuta vastaavaa koodia aivan kuten tämän kirjan tekstissä HTML-koodi on kuvattu tällaisella fontilla. Seuraava esimerkki havainnollistaa elementin käyttöä. Esimerkissä esiintyvä BRtagi tarkoittaa rivinvaihtoa. <TITLE>CODE-elementti</TITLE> Ohessa summan laskevan funktion koodi:<br><br> <CODE>function Summa(X, Y: Integer): Integer; stdcall;<br> begin<br> asm<br> MOV EAX,X<BR> ADD EAX,Y<BR> end;<br> end;<br> </CODE>

4 30 CODE-elementillä korostettua ohjelmakoodia SAMP SAMP-elementillä kuvataan ohjelman antamaa esimerkkitulostusta (sample output). Jos esim. jonkin ohjelman käyttöohjeissa käyttäjää pyydetään ensin antamaan ohjelmalle tietty komento, voidaan SAMP-elementillä korostaa ohjelman antamaa vastausta niin, että se erottuu muusta tekstistä. Seuraava esimerkki kuvaa elementin käyttöä. <TITLE>SAMP-elementti</TITLE> Jos ohjelman antama virheilmoitus on seuraavanlainen:<br><br> <SAMP>Virhe 100:Muistia liian vähän. Osta koneeseesi uutta muistia.</samp> <BR><BR> koneesi muisti ei riitä ohjelman ajamiseen. SAMP-elementillä voidaan korostaa ohjelman antamaan tulostusta.

5 KBD KBD-elementillä (keyboard) kuvataan tekstiä, joka käyttäjän tulisi syöttää. Ulkoasultaan KBD-elementti näyttää aivan samalta kuin esim. SAMP- ja CODEelementteihin sijoitettu teksti. Idea ei olekaan ulkoasussa, vaan siinä, että teksti on oikeanlaisessa rakenteessa. Perinteisesti kirjoittaja ei ole välittänyt muusta kuin ulkoasusta ja tällöin mahdollisuus väärinkäsitykseen on aina olemassa. Kun teksti on sijoitettu oikeaan rakenteeseen, kertoo rakenne sen, minkä tyyppisestä tekstistä on kyse. Myöhemmin käydään läpi, kuinka olemassa olevien elementtien ulkoasuja muutetaan (style sheets). <TITLE>KBD-elementti</TITLE> Nähdäksesi hakemiston sisällön kirjoita seuraava komento:<br><br> <KBD> ls -al </KBD> KBD-elementillä voidaan korostaa tekstiä, joka käyttäjän tulisi syöttää VAR VAR-elementillä kuvataan ohjelmakoodissa esiintyviä muuttujia jne. Esim. kuvattaessa aliohjelman kulkua viitataan usein muuttujaan, ja kun tällöin korostettaan muuttuja VAR-elementillä, erottuu se paremmin tekstistä. <TITLE>VAR-elementti</TITLE> <VAR>Summa</VAR>-muuttujaan sijoitetaan ensin <VAR>X</VAR>-muuttujan arvo, jonka jälkeen siihen lisätään <VAR>Y</VAR>-muuttujan arvo.

6 32 Tämän jälkeen VAR>Summa</VAR>-muuttuja sisältää muuttujien <VAR>C</VAR> ja <VAR>Y</VAR> summan. VAR-elementillä voi korostaa muuttujia CITE CITE-elementillä kuvataan sitaatti eli lainaus tai viittaus toiseen lähteeseen. HTML 4.0 määrityksen mukaan CITE-elementillä tulisi merkitä pääasiassa viittauksia ja lainattu teksti tulisi sijoittaa Q- tai BLOCKQUOTE-elementteihin. <TITLE>CITE-elementti</TITLE> Lisää tietoa lyödät lähteestä <CITE>[ISO8879]</CITE>. CITE-elementillä korostettu lähde.

7 ABBR ABBR-elementillä merkitään lyhennelmiä (abbreviation) (esimerkiksi www, esim., jne.). ABBR-elementillä merkitty teksti ei erotu ympäristöstään mitenkään: se näyttää aivan tavalliselta tekstiltä. <TITLE>ABBR-elementti</TITLE> Lisää tietoa lyödät <ABBR>esim.</ABBR> yrityksemme <ABBR>www</ABBR>sivuilta. ABBR-elementillä merkitty teksti (esim. ja www) näytetään samanlaisena kuin tavallinen teksti ACRONYM ACRONYM-elementillä merkitään akronyymejä. Akronyymi on useampisanaisen ilmauksen ensimmäisistä kirjaimista muodostettu sana. Esimerkiksi laser tulee sanoista light amplification by stimulated emission of radiation. <TITLE>ACRONYM-elementti</TITLE> Akronyymi on useampisanaisen ilmauksen ensimmäisistä kirjaimista muodostettu sana. Esimerkiksi <ACRONYM>laser</ACRONYM> tulee sanoista light amplification by stimulated emission of radiation.

8 34 ACRONYM-elementillä merkitty laser-sana näytetään samanlaisena kuin tavallinen teksti BLOCKQUOTE BLOCKQUOTE-elementillä merkitään kokonaisen kappaleen lainaus. Useimmat selaimet sisentävät lainauksen, kuten kuvasta näkyy. Sisennys ominaisuudesta johtuen BLOCKQUOTE-elementtiä käytetään useimmiten väärin: tekstin sisennykseen. Elementin käytön helppous houkuttelee kirjoittajia usein käyttämään sitä väärin. HTML ei tarjoa varsinaisesti työkaluja sisennykseen, mutta sisennyksen voi tehdä taulukoiden avulla, PRE-elementin avulla tai tyylien avulla. <TITLE>BLOCKQUOTE-elementti</TITLE> Tämä on tavallista tekstiä.<br><br> <BLOCKQUOTE>BLOCKQUOTE-elementillä merkitään lainauksia. Teksti sisennetään useimmissa selaimissa, mutta elementtiä ei pitäisi käyttää sisennykseen. </BLOCKQUOTE>

9 35 BLOCKQUOTE-elementillä merkittyä tekstiä Q Myös Q-elementillä merkitään lainauksia. Q-elementin lang-attribuutilla voidaan määrittää mitä kieltä lainaus on. Tällöin selaimen pitäisi näyttää lainaus määritetyn kielen mukaisesti. Esim. amerikan englannin mukaan lainaus esitetään lainausmerkeissä ja lainauksessa oleva lainaus hipsuissa. Kaikki selaimet eivät kuitenkaan tee näin. Lainauksiin ei tästä huolimatta ole suositeltavaa kirjoittaa lainausmerkkejä <TITLE>Q-elementti</TITLE> <Q lang="en-us">q-elementillä merkitään lainauksia. Tekstin kuuluisi näkyä lang-attribuutin kertoman kielen määrittämällä tavalla (eli lang="us-en"-tapauksessa koko lainauksen pitäisi näkyä lainausmerkeissä). Näin ei kuitenkaan aina ole.</q> Q-elementillä merkitty teksti ei useimmiten korostu mitenkään.

10 SUB ja SUP SUB- ja SUP-elementtien avulla esitetään ylä- ja alaindeksit. SUB-elementin avulle merkitään alaindeksi ja SUP-elementin avulla yläindeksi. Ylä- ja alaindeksejä tarvitaan niin matemaattisissa kaavoissa kuin joissakin kielissä (esim. ranskassa). <TITLE>SUB- ja SUP-elementit</TITLE> H<SUB>2</SUB>O<BR> E = mc<sup>2</sup><br> <SPAN LANG="fr">M<SUP>lle</SUP> Dupont</SPAN><BR> SUB- ja SUP-elementtien käyttö. 3.2 Taustaväri Useiden eri elementtien taustaväriä voi muokata. Näitä elementtejä ovat mm. BODY, TABLE, TR, TH ja TD. Käytettävä väri voidaan kertoa joko värin englanninkielisellä nimellä tai sitten värin heksadesimaaliarvona. Oheisesta taulukossa näkyy joitakin mahdollisista väreistä. Lisää värikoodeja liitteessä 1. Musta Black # Hopea Silver #C0C0C0 Harmaa Gray # Valkoinen White #FFFFFF Kastanjanruskea Maroon # Punainen Red #FF0000 Purppura Purple # Aniliininpunainen Fuchsia #FF00FF Vihreä Green #008000

11 37 Kalkki Lime #00FF00 Oliivin vihreä Olive # Keltainen Yellow #FFFF00 Tumman sininen Navy # Sininen Blue #0000FF Tumman sinivihreä Teal # Vaalena sinivihreä Aqua #00FFFF Värien nimet ja heksadesimaaliarvot. Bgcolor-attribuuttia käytetään yleisesti, vaikka HTML 4.0 määritelmän mukaan sen käyttöä tulisi välttää ja asettaa taustaväri ennemmin tyylilomakkeiden (style sheets) avulla. <TITLE>SUB- ja SUP-elementit</TITLE> <BODY bgcolor=silver> H<SUB>2</SUB>O<BR> E = mc<sup>2</sup><br> <SPAN LANG="fr">M<SUP>lle</SUP> Dupont</SPAN><BR> Bgcolor-attribuutilla voidaan muokata dokumentin taustaväriä. 3.3 Asettelu Oletusarvoisesti kuvat ym. objektit ovat dokumentissa järjestyksessä omalla paikallaan, niin ettei esim. kuvan vieressä ole mitään. Joskus on kuitenkin tarve saada objekti tekstin viereen. Kuville, taulukoille ja kehyksille ym. objekteille määritetty align-attribuutti (arvoilla left ja right) tekee objektista kelluvan. Tämä on yksi tapa saada kuva tekstin viereen käyttämättä taulukoita. Alla olevassa esimerkissä on kuva asetettu kellumaan oikeaan reunaan ja tällöin teksti kiertää sen automaattisesti. Kelluville objekteille mahdollisia align-attribuutin arvoja ovat left ja right.

12 38 <TITLE>Q-elementti</TITLE> <IMG src="a.gif" align="right"> <Q lang="en-us">q-elementillä merkitään lainauksia. Tekstin kuuluisi näkyä lang-attribuutin kertoman kielen määrittämällä tavalla (eli lang="us-en"-tapauksessa koko lainauksen pitäisi näkyä lainausmerkeissä). Näin ei kuitenkaan aina ole.</q> Kuvalle määritetty align-attribuutti (align= right ) tekee kuvasta kelluvan. Tekstielementeille, esim. P ja DIV, määritetty align-attribuutti ei tee tekstistä kelluvaa, vaan muuttaa tekstin asettelun. Left- ja right-arvojen lisäksi joillekin objekteille voidaan asettaa myös arvo center, joka keskittää objektin sivun reunojen suhteen keskelle. <TITLE>Q-elementti</TITLE> <P align="center"> <Q lang="en-us">q-elementillä merkitään lainauksia. Tekstin kuuluisi näkyä lang-attribuutin kertoman kielen määrittämällä tavalla (eli lang="us-en"-tapauksessa koko lainauksen pitäisi näkyä lainausmerkeissä). Näin ei kuitenkaan aina ole.</q> </P>

13 39 Align-attribuutin arvolla center teksti keskitetään. 3.4 Fontit ja viivat Tekstin fontteja voi määrittää monella eri tavalla määrittämällä fontin joko yksittäiselle sanalle tai kappaleelle. Elementtejä käytetään yleisesti vaikkakin uusimman HTML-määritelmän (HTML 4.0) mukaan niiden käyttöä tulisi vähentää. Fonttielementtien sijaan suositellaan käytettäväksi tyylisivuja Korostuselementit TT, I, B, BIG, SMALL, STRIKE, S ja U Korostuselementtejä ovat TT, I, B, BIG, SMALL, STRIKE, S ja U. Ne vaativat alku- ja lopputagin. Niille on määritelty seuraavat attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Seuraava esimerkki kertoo elementtien käytön. <TITLE>Korostus elementit</title> Tämä teksti on normaalilla fontilla.<br> <TT>TT-elementti näyttää tekstin tällaisena.</tt><br> <I>I-elementti näyttää tekstin kursiivina.</i><br> <B>B-elementti näyttää tekstin lihavoituna.</b><br> <BIG>BIG-elementti näyttää tekstin isolla fontilla.</big><br> <SMALL>SMALL-elementti näyttää tekstin pienellä fontilla. </SMALL><BR> <STRIKE>STRIKE-elementti näyttää tekstin yliviivattuna.</strike><br> <S>Myös S-elementti näyttää tekstin yliviivattuna.</s><br>

14 40 <U>U-elementti näyttää tekstin alleviivattuna.</u><br> Korostus-elementtien avulla voi näppärästi korostaa haluamansa määrän tekstiä Fonttielementit FONT ja BASEFONT Fonttielementeillä voidaan määrittää tekstin koko, väri ja fontti (esim. Courier tai Times New Roman). FONT-elementillä määritellään tekstin fontti alku- ja lopputagin välissä ja BASEFONTilla määritetään perusfontin koko (size). Jos BASEFONTia ei käytetä on perusfontin koko oletuksena 3. Elementeille on määritelty seuraavat yleiset attribuutit: id, class lang title style Lisäksi elementeille on määritelty seuraavat omat attribuutit: size = Määrittää käytettävän fontin koon. Attribuutin arvo on kokonaisluku 1 ja 7 väliltä. Koko voidaan myös määrittää vähennyksenä tai lisäyksenä edelliseen kokoon (esim +2 tai -3) eli suhteellisena kokona. color = Määrittää käytettävän fontin värin.

15 41 face = Määrittää käytettävän fontin (esim. FACE="Times New Roman"). BASEFONT-elementti ei siis vaikuta muuhun, kuin perusfontin kokoon. Se ei kuitenkaan vaikuta otsikoiden (headings) eli H1-H6 fonttikokoon ellei niitä ole muutettu FONT-elementin suhteellisella koon muutoksella (esim. +3). <TITLE>Fontit tyylien avulla</title> <FONT FACE="Arial" SIZE=3 COLOR="Black"> <P> Fonttielementeillä voidaan määrittää tekstin koko, väri ja fontti (esim. Courier tai Times New Roman). FONT-elementillä määritellään tekstin fontti alku- ja lopputagin välissä ja BASEFONTilla määritetään perusfontin koko (size). Jos BASEFONTia ei käytetä on perusfontin koko oletuksena 3.<BR> </P> </FONT> FONT-elementillä voi määrittää tekstissä käytettävän fontin Viivaelementti HR Toisinaan sivujentekijät haluavat jakaa sivujen sisältöä kappalevaihtoa voimakkaammalla tavalla. Tätä varten on olemassa HR-elementti, joka tekee määritellyn paksuisen ja pituisen viivan. Elementti ei tarvitse kuin alkutagin, lopputagi ei ole edes sallittu. Elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align

16 42 Lisäksi elementille on määritelty seuraavat omat attribuutit: noshade = size = width = Jos elementin attribuutiksi annetaan noshade, viiva piirretään yhdellä värillä eikä kahdella kuten normaalisti. Määrittää viivan korkeuden pikseleissä (esim. size= 5 ). Määrittää viivan pituuden eli leveys. Pituus voidaan määrittää joko pikseleissä (esim. 400) tai sitten prosentteina ruudun leveydestä (esim. 50%). Seuraava esimerkki havainnollistaa HR-elementin käyttöä: <TITLE>HR-elementti</TITLE> Tekstiä.<BR> <HR width="400" size="5" align="left"> Taas tekstiä.<br> <HR width="50%" size="5" align="center"> Ja taas tekstiä.<br> <HR noshade width="50%" size="5" align="right"> HR-elementillä voi jakaa sivulla olevaa materiaalia. 3.5 Kappaleet Edellisessä kappaleessa käsiteltiin materiaalin jakaminen viivoilla. Toinen tapa on jakaa materiaali kappaleiksi määräämällä rivinvaihto, käyttämällä P- elementtiä tai käyttämällä PRE-elementtiä.

17 BR BR-elementti pakottaa rivinvaihdon. Elementti vaatii ainoastaan alkutagin. Katso käyttö edellisen kappaleen esimerkistä. BR-elementille on määritelty seuraavat yleiset attribuutit: id, class clear title style P P-elementillä merkitään kappaleita. Elementti on luonnollinen tapa merkitä kappaleita. Kappaleita erottavia rivinvaihtoja ei tarvita, sillä kappaleet esitetään toisistaan erillään. P-elementti ei voi sisältää itseään eli P-elementin sisälle ei voi määritellä P-elementtiä. Myöskään tyhjiä P-elementtejä ei ole suotavaa käyttää. P-elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align Seuraava esimerkki havainnollistaa P-elementin käyttöä: <TITLE>P-elementti</TITLE> <P>Kaikista vaivoistaan huolimatta porsaat jaksoivat leikkiä aamusta iltaan. Ne juoksivat ja hyppivät pihamaalla ja heittelivät toisiaan multapaakuilla</p> <P>Kapustahaikara yritti nukkua yövuoronsa jälkeen, eikä voinut sietää porsaiden pitämää mekkalaa. Se nousi ylös ja ulvoi kopissaan. Porsaat eivät välittäneet tästä tippaakaan vaan jatkoivat touhujaan.</p>

18 44 P-elementillä merkityt kappaleet erotetaan toisistaan automaattisesti rivinvaihdolla PRE PRE-elementillä voidaan esittää ennalta muotoiltua tekstiä. Elementti on erittäin nopea keino saada valmiiksi muotoiltu tai yleensä valmis teksti internetiin. PRE-elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Esimerkki PRE-elementin käytöstä: <TITLE>PRE-elementti</TITLE> <PRE> Keikka sujuu hyvin, jos pääsemme perille. </PRE>

19 45 PRE-elementillä esitetty teksti näkyy alkuperäisen muotoilun mukaisesti.

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

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

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

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

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

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

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

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan

Lisätiedot

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

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

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

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

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

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

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

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

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

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

GRAAFINEN OHJEISTO OLLILA TRANS OY

GRAAFINEN OHJEISTO OLLILA TRANS OY GRAAFINEN OHJEISTO OLLILA TRANS OY Ohjeiston sisältö Tämän ohjeiston tarkoitus on antaa selkeät suuntaviivat Ollila Trans Oy:n viestinnälle. Annettuja ohjeita noudattamalla yrityksestä annetaan yhtenäinen,

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

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

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

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

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

Lisätiedot

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

8 Kuvat, sovelmat ja objektit

8 Kuvat, sovelmat ja objektit 97 Tässä kappaleessa käsitellään kuvien ja sovelmien (Applets) liittämistä HTMLdokumenttiin. Kuvia on periaatteessa olemassa kolmea päätyyppiä, tekstin sisäisiä, tekstin ulkoisia ja kolmanneksi kuvakarttoina

Lisätiedot

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1. 1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE 4 1.2 VÄRILLINEN LOGO 5 1.3 LOGO VÄRILLISELLÄ POHJALLA 6 1.4 MUSTA LOGO 7 1.5 EI NÄIN 8 3 1.1 Logo ja turva-alue neste jacobsin logo Neste Jacobsin uusi tekstilogo

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

Tunnuksen päivitys 19.9.2012

Tunnuksen päivitys 19.9.2012 Tunnuksen päivitys 19.9.2012 2 Tampereen yliopiston tunnus Tampereen yliopiston tunnus Tuhannet ihmiset näkevät Tampereen yliopiston tunnuksen päivittäin lomakkeissa, nettisivuilla, raporteissa, esitteissä.

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

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

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002 , XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

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

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

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

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

10 Lomakkeet Kontrollit. 10 Lomakkeet

10 Lomakkeet Kontrollit. 10 Lomakkeet 154 Suurin osa HTML-dokumenteista on tarkoitettu vain selailtaviksi ja katseltaviksi ilman, että katselijan rooli olisi ollut muuta kuin passiivinen. Lisäämällä dokumenttiin lomake-elementti, voidaan pieni

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

Tunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita.

Tunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Graafinen ohjeisto Tunnus Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Visio: Suomi on Euroopan kilpailukykyisin

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

M. Merikanto 2012 XML. Merkkauskieli, osa 2

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

Lisätiedot

Fonttimuotoilut. Fontin tyyppi ja fonttikoko

Fonttimuotoilut. Fontin tyyppi ja fonttikoko Fonttimuotoilut Kun haluat muotoilla jonkin sanan tai osan tekstistä, sinun pitää ensin "maalata" ko. alue. Maalaaminen tapahtuu vetämällä alueen yli hiiren ykköspainike alas painettuna. Maalattu alue

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

Digitaalisen median tekniikat JavaScript_osa2

Digitaalisen median tekniikat JavaScript_osa2 Digitaalisen median tekniikat JavaScript_osa2 7.4.2004 Harri Laine 1 JavaScriptissä voidaan määritellä myös luokkia ja olioita. Luokka määritellään konstruktorifunktion avulla function Ympyra(x,y,r) {

Lisätiedot

Digitaalisen median tekniikat JavaScript_osa Harri Laine 1

Digitaalisen median tekniikat JavaScript_osa Harri Laine 1 Digitaalisen median tekniikat JavaScript_osa2 7.4.2004 Harri Laine 1 JavaScript oliot JavaScriptissä voidaan määritellä myös luokkia ja olioita. Luokka määritellään konstruktorifunktion avulla function

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

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi CT30A3200 - WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen HTML-lomakkeet HTML-lomakkeiden avulla voidaan WWW-sovelluksessa hakea käyttäjän

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

XHTML aloitus. Sisällys

XHTML aloitus. Sisällys XHTML aloitus XHTML-dokumentin rakenne, metatieto, kommentit, tekstit Mirja Jaakkola Sisällys 3. Taustaa 4. Selain palvelin 5. Elementin rakenne 6. Attribuutti 7. XHTML-dokumentin rakenne 8. XHTML:n DOCTYPE-määrittely

Lisätiedot

1. Lohkon korkeus ja leveys

1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt

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

XML / DTD / FOP -opas Internal

XML / DTD / FOP -opas Internal XML / DTD / FOP -opas Internal Reviewed: - Status: pending approval Approved by: - Author: Sakari Lampinen Revision: 1.0 Date: 15.10.2000 1 Termit DTD (data type definition) on määrittely kielelle, niinkuin

Lisätiedot

Graafinen ohjeistus. Taustaa. Logon elementit. Mittasuhtet. Suoja-alue. Värimääritykset. Logon sijoittelu. Kirjasintyypit eli typografia

Graafinen ohjeistus. Taustaa. Logon elementit. Mittasuhtet. Suoja-alue. Värimääritykset. Logon sijoittelu. Kirjasintyypit eli typografia Graafinen ohjeistus Taustaa Logon elementit Mittasuhtet Suoja-alue Värimääritykset Logon sijoittelu Kirjasintyypit eli typografia Taustaa Nuorten Kotkien alkuperäinen logo on vaakunamalliseen kehyksen

Lisätiedot

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla 4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät

Lisätiedot

POWERPOINT HARJOITUKSET OMAN ESITYSPOHJAN RAKENTAMINEN

POWERPOINT HARJOITUKSET OMAN ESITYSPOHJAN RAKENTAMINEN POWERPOINT HARJOITUKSET 3.1-3.7 OMAN ESITYSPOHJAN RAKENTAMINEN Tässä harjoituksessa luomme oman perustyylin, teemme omat värit, oman fonttiteeman, mukautamme perustyyliä ja tallennamme luomuksemme. 1/5

Lisätiedot

HTML elementit. Sisällys

HTML elementit. Sisällys HTML elementit HTML elementit 1 Tämä dokumentti sisältää useimmat HTML 4.0 suosituksen elementit attribuutteineen. Kirjoitin tämän lähinnä perusteelliseksi referenssiksi, en perinteiseksi oppaaksi. Mukana

Lisätiedot

HTML5 -elementit jatkuu

HTML5 -elementit jatkuu HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"

Lisätiedot

TIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski

TIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski TIEDEPOSTERI - Viestinnän välineenä Marisa Rakennuskoski POSTERILAJIT Mainosposteri(pääpaino kuvilla ja visuaalisuudella) Ammatillinenposteri(vapaamuotoinen, esim. jonkin projektin tapahtumia kuvaava,

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

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

Digitaalisen median tekniikat. Luento 3: CSS

Digitaalisen median tekniikat. Luento 3: CSS Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi

Lisätiedot

Aleksanterinkadun Appro. Tunnusohjeisto 25.2.2015

Aleksanterinkadun Appro. Tunnusohjeisto 25.2.2015 Tunnusohjeisto 25.2.2015 sisällys tunnus 3 1 tunnus tekstillä 4 2 tekstitön tunnus 5 tunnuksen väriversiot 6 tunnus kuvan päällä 7 tunnus 1 n tunnus eli visuaalinen tunniste viittaa muotokieleltään Lahden

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

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

Väitöskirja -mallipohja

Väitöskirja -mallipohja JYVÄSKYLÄN YLIOPISTO Väitöskirja -mallipohja Word 2007/2010 IT-palvelut hannele.rajaniemi@jyu.fi https://koppa.jyu.fi/avoimet/thk/vaitoskirja sovellustuki@jyu.fi Sisältö Miten toimii väitöskirja/asiakirjamallipohja?

Lisätiedot

Graafinen ohjeisto. Päivitetty tammikuussa 2015

Graafinen ohjeisto. Päivitetty tammikuussa 2015 Graafinen ohjeisto Päivitetty tammikuussa 2015 Sisällys Sisällys Esipuhe Liikemerkki ja logo Värit korteille ja kirjepohjalle Typografia Fontit korteille ja kirjepohjalle Kirje- ja esityspohja Käyntikorttipohjat

Lisätiedot

Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle

Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Pyydämme suunnitelijaa ottamaan huomioon seuraavat ohjeet verkkokaupan ulkoasun suunnittelua koskien. Näin vältämme lisäkustannukset

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

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

Ctl160 Tekstikorpusten tietojenkäsittely p.1/15

Ctl160 Tekstikorpusten tietojenkäsittely p.1/15 Ctl160 490160-0 Nicholas Volk Yleisen kielitieteen laitos, Helsingin yliopisto Ctl160 490160-0 p.1/15 Lisää säännöllisistä lausekkeista Aikaisemmin esityt * ja + yrittävät osua mahdollisimman pitkään merkkijonoon

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

TEKSTINKÄSITTELYTEHTÄVIÄ, OSA 1

TEKSTINKÄSITTELYTEHTÄVIÄ, OSA 1 TEKSTINKÄSITTELYTEHTÄVIÄ, OSA 1 1 Perustekstejä Tehtävän tarkoituksena on varmistaa tietty perusosaaminen tekstinkäsittelystä sekä lisäksi tässä tulee mukaan myös hiukkasen suomen kielen oikeinkirjoitustakin.

Lisätiedot

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA Ohjeistuksessa käydään läpi kuvan koon ja kuvan kankaan koon muuntaminen esimerkin avulla. Ohjeistus on laadittu auttamaan kuvien muokkaamista kuvakommunikaatiota

Lisätiedot

Kanta graafinen ohje. Versio

Kanta graafinen ohje. Versio Kanta graafinen ohje Versio 3.0 17.3.2014 Sisältö Kirjoitusasu Tunnus Värillinen, musta valkoinen, värillisellä taustalla ja pohjalla sekä suoja-alue, mittasuhteet ja kieliversiot Tunnus ja nimi aukikirjoitettuna

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

Jypelin käyttöohjeet» Ruutukentän luominen

Jypelin käyttöohjeet» Ruutukentän luominen Jypelin käyttöohjeet» Ruutukentän luominen Pelissä kentän (Level) voi luoda tekstitiedostoon "piirretyn" mallin mukaisesti. Tällöin puhutaan, että tehdään ns. ruutukenttä, sillä tekstitiedostossa jokainen

Lisätiedot

GRAAFINEN OHJEISTUS OSA 1

GRAAFINEN OHJEISTUS OSA 1 GRAAFINEN OHJEISTUS OSA 1 Kaikki asiakkaidemme tarpeet liittyvät oman näkemyksen välittämiseen toiselle ihmiselle. Vain siitä on kyse, ja vain se on tärkeää. Olipa näkemys tarkoitettu sähköasentajalle,

Lisätiedot

TAULUKOINTI. Word Taulukot

TAULUKOINTI. Word Taulukot Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...

Lisätiedot

GRAAFINEN OHJEISTO

GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO 8..06 Sisältö Merkki ja tekstiosa 3 Suoja-alue 4 Tunnuksen värit (värillinen tunnus) 5 Tunnuksen värit (harmaasävyinen tunnus) 6 Tunnuksen sähköiset originaalit toimisto-ohjelmiin 7

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

Suunnittelijan sana. 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia

Suunnittelijan sana. 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia Graafinen ohjeisto Sisältö 2 Suunnittelijan sana 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia Suunnittelijan sana Tämän graafisen ohjeiston tarkoitus

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

Sini Jatta Suonio 7/1/2010

Sini Jatta Suonio 7/1/2010 JYVÄSKYLÄN YLIOPISTO, FYSIIKAN LAITOS Microsoft Word 2007 Käyttöohje Sini Jatta Suonio 7/1/2010 Sisällysluettelo 1 Johdanto... 2 2 Wordin perusasetukset... 2 2.1 Tekstin ja kappaleiden asettelu...2 2.2

Lisätiedot

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA SATAKUNNAN AMMATTIKORKEAKOULU Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA Liiketalous ja tietojenkäsittely Huittinen Liiketalous Taloushallinto 2005 1

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

Tekstinkäsittelyn jatko. KSAO Liiketalous 1

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

Lisätiedot

Energiatehokkuussopimusten. graafinen ohjeisto

Energiatehokkuussopimusten. graafinen ohjeisto Energiatehokkuussopimusten ilme graafinen ohjeisto Energiatehokkuussopimusten tunnus Suomalaisille energiatehokkuussopimuksille on suunniteltu oma tunnus, jota käytetään kaikessa energiatehokkuussopimusten

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

GRAAFINEN OHJEISTO 2017

GRAAFINEN OHJEISTO 2017 GRAAFINEN OHJEISTO 2017 Graafinen ohjeisto ja sen käyttötarkoitus Sisällys Tullinkulman Työterveys Oy:n uusi aputoiminimi on Pirte ja se otetaan käyttöön vuoden 2018 alusta alkaen markkinoinnissa ja muussa

Lisätiedot

Hämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet

Hämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet Hämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet Sivun koko Painotuotteen sivun koon tulee olla taitto-ohjelmassa määritetty sivun lopulliseksi kooksi. Tarvittavat leikkuuvarat (Bleed), vähintään

Lisätiedot

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja HTML ja CSS T-111.4360 WWW-palvelun suunnittelu Mikko Pohja Sisältö HTML XHTML CSS DOM DHTML Käytännön esimerkkejä Kuka tahansa pystyy tekemään yksinkertaisen dokumentin HTML Hyper Text Markup Language

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

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

T e k s t i n k ä s i t t e l y ä s e l k o k i e l e l l ä WORD

T e k s t i n k ä s i t t e l y ä s e l k o k i e l e l l ä WORD 1 MICROSOFT T e k s t i n k ä s i t t e l y ä s e l k o k i e l e l l ä WORD Eero Seitsemän veljeksen Eero on vilkas, sukkelasanainen ja älykkäämpi kuin muut veljekset. Hän kiusoittelee ja pilkkaa puheillaan

Lisätiedot

Ajatus kaiken taustalla

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

Lisätiedot

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

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

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