Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

Download "Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA"

Transkriptio

1 Aulikki Hyrskykari Antti Sand

2 Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta Tällä luennolla o Lokeromallia kehystykset, taustakuvat o Visuaalinen sommittelu rautalankamallit asemointi o Mukautuva suunnittelu responsiivinen suunnittelu

3 margin-left border-left padding-left padding-right border-right margin-right Sisältö (content) Täyte (padding) margin-top border-top padding-top ELEMENTIN SISÄLTÖ (content area) Reunus (border) Marginaali (margin) padding-bottom border-bottom margin-bottom

4 Reunuksen paksuus, tyyli ja väri o border-width: [thin medium thick mittayksikkö inherit] 1-4 o border-style: [none hidden dotted dashed solid double width groove ridge inset outset] 1-4 o border-color: [trasparent color inherit] 1-4 Elementtillä 10px levyiset reunat (kaikki reunat): p { border-width: 10px; Elementillä katkoviivalla piirretty kehys.kehystetty { border-style: dotted Elementillä väritetty piirretty kehys Tämä olisi tulos, jos oheiset säännöt olisi annettuna tämän tekstin sisältävään p- elementtiin div { border-color: #34fade

5 Kolme edellistä reunuksen piirrettä on mahdollista kirjoittaa yhteen sääntöön seuraavasti: p { border: 10px dotted #34fade; Jos joku tai jotkin kolmesta piirteestä puuttuu ko. piirteelle käytetään oletusarvoa Järjestyksen tulee kuitenkin aina olla yllä annettu (paksuus, tyyli, väri).

6 valitsin { border-width: 5px 15px 25px 35px; border-style: inset; border-color: blue; width: 30em; piirteellä kaksi arvoa valitsin { border-width: 5px 10px; border-style: dotted; border-color: green; kaksi ensimmäistä piirrettä yhdistetty, kolmannella piirteellä kolme arvoa valitsin { border: 20px groove; border-color: green red yellow;

7 Reunuksen eri piirteet voi antaa myös yksittäin elementin eri reunoille.kehys { border-width-top: 1px; border-width-right: 10px; border-width-bottom: 1px; border-width-left: 50px; Ylläolevan kanssa yhtenevä sääntö olisi siis:.kehys { border-width: 1px 10px 1px 50px; Tarve yksittäisen reunapiirteen käyttöön esim. jos halutaan asettaa vain vasen reunus

8 Täytteen ja marginaalin määritys o vain yksi, mittayksikköarvoinen attribuutti o muuten analoginen reunuksen kanssa opadding: [mittayksikkö] 1-4 omargin: [mittayksikkö] 1-4.harvenna { margin-left: 2em; padding: 25px 50px;

9 .kehystetty { border-radius: 10px; Eri kulmat voi pyöristää eri tavoin.kehystetty { border: 10px double orange; border-radius: 5px 50px 50px 50px;

10 able, th, td Jos taulukolle annettu css-sääntö o piirtyvät reunukset kullekin taulukon solulle erikseen (solujen välissä kaksi viivaa) table, td { border: 1px solid black; Hallinta border-collapse-piirteen avulla border collapse: collapse separate inherit table, td { border: 1px solid black; table { border-collapse:collapse;

11 border-spacing:20px 5px; Solujen väliin jätettävää tilaa o voi säädellä solun täytteen (padding) avulla, tai o tähän tilanteeseen erityisesti: border-spacing o vierekkäisten solujen etäisyys toisistaan CSS-mittayksiköillä ilmaistuna border-spacing: h-etäisyys [v-etäisyys] inherit table, td { border: 1px solid black; border-collapse:separate; border-spacing:20px 5px; o jos piirteelle annetaan arvona vain yksi mittayksikkö, horisontaalinen ja vertikaalinen etäisyys ovat yhtä suuret.

12 Värin määrittelyssä color: värikoodi inherit edustaväri elementin piirtoväri, periytyvä background-color: värikoodi läpinäkyvä inherit täyttöväri elementin taustaväri, ei periydy background-image: uri none inherit Taustakuva o oletusarvoisesti taustakuva toistuu o sekä horisontaalisesti että vertikaalisesti o sen avulla helppo toteuttaa mm. taustatekstuureja Esimerkki taustakuvan käytöstä Esimerkki kuvan käytöstä tekstuurin luomiseksi

13 Taustakuvan esittämistä voi kontrolloida seuraavilla piirteillä background-attachment: scroll fixed inherit taustakuvan pysyminen paikallaan / kuvan liikkuminen sivua vieritettäessä background-position: [left righ center top center bottom] [mittayksikkö-x mittayksikkö-y] taustakuvan vasemman yläreunan piirtopaikka, oletus left top, joka voitaisiin ilmaista myös esim. 0% 0% tai 0em 0em background-repeat: repeat repeat-x repeat-y no-repeat inherit taustakuvan mahdollinen toistaminen horisontaalisesti tai (/ja) vertikaalisesti background-clip: content-box border-box margin-box inherit rajaa elementistä lokeromallin osaan, johon taustakuva vaikuttaa background-size: mittayksikkö taustakuvan koon skaalaus annettuun kokoon Esimerkki kuvan käytöstä taustalla (ei toistoa)

14 Kaksi vierekkäistä (tai sisäkkäistäkin) elementtiä Vertikaalisuunnassa marginaalit limittyvät o jos molemmat marginaalit positiivisia tai negatiivisia, käytetään itseisarvoltaan isompaa marginaalia Jos marginaalit eri merkkisiä, luvut lasketaan yhteen Horisontaalissa suunnassa limittymistä ei tapahdu Tommy Olsson and Paul O Brien: Collapsing Margins Andy Budd: No margin for Error

15 Periaate yksinkertainen: o mieti ensin millaisista visuaalisista elementeistä sivusi koostuu o piirrä elementeistä rautalankamalli o kirjoita elementit omiksi osikseen o käytä ensisijaisesti HTML5:n rakenteen määrittelyyn esiteltyjä semanttisia elementtejä o toissijaisesti geneeristä div-elementtiä Sen jälkeen voit asemoida elementit sivulle joko o asemointia (position) o kellutusta (float) tai o elementtien näyttötavan kellutusta (display) muokkausta käyttäen

16 Ajatuksena miettiä o mitä sisältöä sivulla halutaan esittää, ja o miten paljon sille halutaan varata tilaa Rautalankamallin voi o piirtää käsin paperille, o tarkoitukseen löytyy myös erilaisia wireframe, tai protoiluvälineitä: - balsamiq : maksullinen, mutta hiukan riisuttua versiota pääsee käyttämään ilmaiseksi verkkoversiona: - Pencil: open source ohjelma - lista muista vastaavista välineistä:

17 aside { border: 2px dotted #ce0c39; border-radius: 10px ; padding: 1em; background-color: #fcd4dd; width: 70%; aside {... position: relative; left: 3em; top: -3em;

18 aside {... position: absolute; left: 100px; top: 0px; Irroitetaan elementtivirrasta ja asetetaan kiinteään kohtaan äitielementtiään. Koska äitielementti liikkuu sivua vieritettäessä, myös siihen absoluuttisesti sidottu elementti liikkuu. aside {... position: fixed; left: 100px; top: 0px; Irroitetaan elementtivirrasta ja asetetaan kiinteään kohtaan selainikkunassa. Pysyy paikallaan sivua vieritettäessä.

19 Kiinteästi asemoidut elementit voivat mennä päällekkäin o z-index määrittää elementin syvyystason o mitä suurempi arvo, sen edempänä syvyystasolla o arvona kokonaisluku, voi saada myös negatiivisia arvoja.edessa { z-index: 2; edessä.jaa-taakse { z-index: -1; takana

20 aside { float:left; Elementti voidaan kelluttaa horisontaalisessa suunnassa alkuperäiseltä paikaltaa oikealle tai vasemmalle. Koska äitielementti liikkuu sivua vieritettäessä, myös siihen absoluuttisesti sidottu elementti liikkuu. aside { float:left; p.puhdista { clear: left; Kun elementti on otettu irti elementti virrasta, uudelleenasemointi vaikuttaa sen jäljessä tuleviin elementteihin Jäljessä tulevat elementit ottavat käyttöön vapautuneen tilan Vaikutuksen voi eliminoida clear-piirteellä. clear: right left both

21 Lohkotason elementti o erotetaan muista elementeistä rivinvaihdolla o varaa iselleen horisontaalisesti tilaa 100% äiti-elementtinsä leveydestä. Rivitason elementti o varaa tilaa vain sisällön tarpeen mukainen lokero Jos jatkuu useammalle riville, uudella rivillä se varaa itselleen uuden lokeron Elementit luokittelu lohkotason- ja rivitason elementteihin o itse asiassa kyse on piirteen display oletusarvosta o ne elementit, joilla display-piirteen oletusarvo on - block luokiteltiin lohkotason elementeiksi (esim. <p>) - inline luokiteltiin rivitason elementeiksi (esim. <strong>) taustakuvan pysyminen paikallaan / kuvan liikkuminen sivua vieritettäessä display: block inline inline-block none inherit[..];

22 Jos esimerkiksi muutetaan o <p>: display-piirteen arvoksi inline: peräkkäiset kappaleet kirjoittuvat yhteen o <strong>: display-piirteen arvoksi block: vahvennetut tekstinosat erotettaan muista elementeistä rivinvaihdolla inline-block elementillä on o lohkotason elementin lokeromalli o silti se käyttäytyy muuten kuten rivitason elementti (ei erotu muista elementeistä rivinvaidolla) none - yhdessä jonkin skriptikielen kanssa käytettynä hyödyllinen o elementti voidaan kääntää näkymättömäksi o näkymätön elementti ei varaa tilaa elementtivirrasta o dokumentti käyttäytyy kuten elementtiä ei olisi lainkaan olemassa. display-piirteellä on iso valikoima muitakin arvoja, mm. o elementti voidaan saada käyttäytymään kuten listan rivi, o taulukko o jokin taulukon osa (rivi, sarake, solu, otsikko )

23

24 Ajatuksena kelluttaa kukin palsta vasemmalle edellisen palstan viereen.. palsta1,. palsta2,.palsta3 { width: 300px; float: left; margin: 10px; 960px

25 Kiinteässä asettelussa o elementit eivät mukaudu ikkunan koon muutokseen o elementtien mitat annetaan pikseleinä tai em-yksikköinä Skaalautuva sommittelussa o elementit venyvät ikkunan koon muutoksen mukaisesti o elementtien mitat annetaan prosentteina Entä jos sisältö ei mahdu? o overflow: visible hidden scroll auto ts. jos sisältö ei mahdu: annetaan value yli, leikataan, elementissä on vierityspalkit tai vierityspakit tuodaan automaattisesti tarvittaessa

26 Elementtien sijoittelun parempi kontrolli + rivin pituuden kontrollointi reunojen tyhjät tilat Jos käyttäjä muuttaa kirjasinkokoa, muutos saattaa aiheuttaa ongelmia o Sivun saa mukautumaan selainikkunan kokoon + sisältö kutistuu pieneen näyttöön leveässä näytössä helposti hankalan pitkiä rivejä o Sommittelu saattaa muuttua paljon ajatellusta»min-width, max-width: CSS piirteiden avulla edelliset voi yhdistää elastiseksi sommitteluksi (liquid layout)

27 Ethan Marcot: Responsive Web Design (2010) o antoi nimen ja kirjoitti näkyväksi periaatteet, joita CSS3:n uusi mediakyselymahdollisuus antoi. Periaate o aiemmin käytäntönä pyrkiä luomaan sivuista erilliset mobiiliversiot o laitteistokirjon kasvaessa kestämätön käytäntö sivuston sisällöstä kirjoitetaan vain yksi versio lineaariseksi elementtien virraksi mediakyselyiden hyväksikäyttäen voidaan tilanteen mukaan tuottaa samasta sisällöstä kullekin laitteelle sopiva visuaalinen sommittelu Resposive Design -ajatuksen muunnelmia (sama perusajatus) o progressive design, content focused tai mobile first -suunnittelu Sivun sisällön esittämiselle suunnitellaan erilliset rautalankamallit riippuen sen laitteen ominaisuuksista, jolla sivua katsotaan Rautalankamallit toteutetaan omina CSS-tiedostonaan, ja valinta kulloinkin käytettävästä CSS-tiedostosta tehdään mediakyselyn antaman vastauksen perusteella

28 @media media-type [and (media-feature-experssion)] * Mediakyselyt-moduuli on valmis CSS3-standardi (W3C Recommendation 19 June 2012) Mediakyselyä voi käyttää kuten valitsinta, screen and (max-device-width: 480px) {.column { float: none; Tai yhdistää myös <link>-elementtiin, jolloin sen avulla voidaan valita koko käytettävä tyylipohja, esimerkiksi: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobiili.css" />

29 Voidaan tiedustella selaimelta ovatko tietyt ehdot voimassa o siinä ympäristössä, jossa dokumenttia ollaan esittämässä. o tiedustellaan ensin laitetta: mediatyyppi, (media-type) o sen jälkeen yhden tai useammman mediapiirteen (media feature expression) voimassaoloa Mediatyypit: Mediapiirteet: screen, braille, embossed, handheld, print, projection, speech, tty ja tv.

30

31 Ruudukoita (gridejä) käytetään sommittelussa yleisesti Valokuvissa tasapainon tai jännitteen luomiseksi Kolmanneksen sääntö (Rule of third s) yleinen sommitteluohje o 3x3 ruudukon risteyskohdat kuvan kannalta tärkeitä

32 JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

33 oetuja sivuston sivujen kesken yhtenäisempi vaikutelma tukee käyttäjää etsitty informaation etsinnässä (lisää ennustettavuutta) helpottaa uuden sisällön lisäämistä 12 x 60 px palstat, 20 px etäisyydellä toisistaan, sivuilla 10px marginaalit

34 Huom! sekä container_12 että gid_n luokka Esimerkiksi 12 palstaa:.container_12 { margin-left: auto; margin-right: auto; width: 960px;.container_12.grid_4 { width: 300px;.container_12.grid_6 { width: 460px; <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <div class="clear"></div> <section class="container_12 grid_6"> leveyteni on 1/2 sivusta </section> <section class="container_12 grid_6"> leveyteni on 1/2 sivusta </section>

35 o Edellinen tuottaisi sivulle 10 px 20 px 20 px leveyteni on 1/3 sivusta leveyteni on 1/3 sivusta leveyteni on 1/3 sivusta 10 px leveyteni on 1/3 sivusta 20 px leveyteni on 1/3 sivusta 4/14/2015

36 Mahdollistaa erilaisia sommitteluja

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin) 23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN

Lisätiedot

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

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014 1.4.2014 Aulikki Hyrskykari Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

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

Lisätiedot

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

CSS tyyliä sivuihin osa II. Elina Ulpovaara

CSS tyyliä sivuihin osa II. Elina Ulpovaara CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration

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

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Antti Tolppanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

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

Asemointi. 1. Lohkon korkeus ja leveys

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

Lisätiedot

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

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

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS

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

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

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

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

Lisätiedot

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

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

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

Lisätiedot

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

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

Kotisivut helposti - osa 4

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

Lisätiedot

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

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

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

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

3 CSS ja teknisesti laadukas Web-sivu

3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja CSS ja teknisesti laadukas Web-sivu Johdanto luentokerran aihepiiriin: Nykyaikaisen Web-hypermedian toteuttaminen on HTML-kielen ja CSS-tyylien yhteispeliä

Lisätiedot

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

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

Lisätiedot

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

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

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

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

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

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten: CSS CSS on merkintäjärjestelmä, jolla voidaan esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia. Yhtä kokonaisuutta sanotaan tyyliohjeeksi eli tyylisäännöstöksi, englanniksi style sheet. (Korpela

Lisätiedot

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

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

Lisätiedot

Kotisivut helposti - osa 3

Kotisivut helposti - osa 3 Kotisivut helposti - osa 3 Tämän artikkelisarjan kahdessa ensimmäisessä osassa esiteltiin Internet-sivujen perusteita, kotisivujen suunnittelulähtökohtia sekä HTML/XHTML-ohjelmoinnin perusteita ja yleisimmin

Lisätiedot

Verkkosivujenulkoasu

Verkkosivujenulkoasu Verkkosivujenulkoasu ulkoasu (CSS) WWW-sivujen ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Aleksi O Connor DI Pia Tukkinen laitos Mediatekniikan Mediatekniikan

Lisätiedot

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista

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

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8. Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.

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

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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

Lisätiedot

JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096

JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096 JWT 2017 luento 2 to 10.3.2016 klo 12-14 Aulikki Hyrskykari PinniB1096 1 Edellinen luento o Kurssin sisältö ja suoritus, Web terminologiaa, HTML-kehitys, HTMLkertausta ja julkaisu shell.sis-palvelimella,

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Pinja Hokkanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

JAVA-OHJELMOINTI 3 op A274615

JAVA-OHJELMOINTI 3 op A274615 JAVA-OHJELMOINTI 3 op A274615 Layoutit Teemu Saarelainen teemu.saarelainen@kyamk.fi Lähteet: http://java.sun.com/docs/books/tutorial/index.html Vesterholm, Kyppö: Java-ohjelmointi, Talentum 2004. Layout

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Pinja Hokkanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

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

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat

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

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

ESIKATSELU, TULOSTAMINEN, TUNNISTEET

ESIKATSELU, TULOSTAMINEN, TUNNISTEET Excel 2013 Tulostaminen Sisällysluettelo ESIKATSELU, TULOSTAMINEN, TUNNISTEET TULOSTAMINEN JA TULOSTUSASETUKSET... 1 Esikatselu ja tulostaminen... 1 Reunuksien määrittäminen, keskittäminen... 2 Ylä- ja

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004

Navigointi Verkkomultimedia ICT1tn004 Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?

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

virkailija.opintopolku.fi

virkailija.opintopolku.fi Cybercom Design Studio virkailija.opintopolku.fi Organisaatiotietojen ylläpitpo versio.0 7..0 versio muutoshistoria.0 Organisaatiotietojen ylläpito-palvelun design Organisaatiotietojen ylläpito Suodatuskenttä

Lisätiedot

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia XSL:n muotoiluoliot "Formatting objects" (FO) muotoiluolioita, esim. lohko, kirjainmerkki, taulukon solu, (FO:n elementtejä) muotoiluominaisuuksia, esim. kehyksen leveys, kirjasinkoko, (FO:n elementtien

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

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

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

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

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

Lisätiedot

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

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen

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

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?

Lisätiedot

QT tyylit. Juha Järvensivu 2008

QT tyylit. Juha Järvensivu 2008 QT tyylit Juha Järvensivu juha.jarvensivu@tut.fi 2008 Sisällys QStyle Style sheet Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä

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

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

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

Racket ohjelmointia osa 1. Tiina Partanen Lielahden koulu 2014

Racket ohjelmointia osa 1. Tiina Partanen Lielahden koulu 2014 Racket ohjelmointia osa 1 Tiina Partanen Lielahden koulu 2014 Sisältö 1) Peruslaskutoimitukset 2) Peruskuvioiden piirtäminen 3) Määrittelyt (define) 4) Yhdistettyjen kuvien piirtäminen 5) Muuttujat ja

Lisätiedot

Oulun yliopiston www-sivujen tekeminen

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

Lisätiedot

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

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

virkailija.opintopolku.fi

virkailija.opintopolku.fi Cybercom Design Studio virkailija.opintopolku.fi Organisaatiotietojen ylläpito versio.0 7..0 versio muutoshistoria.0 Organisaatiotietojen ylläpito-palvelun design.0 Tarkennuksia: Tarkennettu haku Puulistan

Lisätiedot

Visuaalisen suunnittelun alkeita. Aiheina

Visuaalisen suunnittelun alkeita. Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli

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

Sami Hirvonen. Ulkoasut Media Works sivustolle

Sami Hirvonen. Ulkoasut Media Works sivustolle Metropolia ammattikorkeakoulu Mediatekniikan koulutusohjelma VBP07S Sami Hirvonen Ulkoasut Media Works sivustolle Loppuraportti 14.10.2010 Visuaalinen suunnittelu 2 Sisällys 1 Johdanto 3 2 Oppimisteknologiat

Lisätiedot

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu Excel-harjoitus 1 Tietojen syöttö työkirjaan Kuvitteellinen yritys käyttää Excel-ohjelmaa kirjanpidon laskentaan. He merkitsevät taulukkoon päivittäiset ostot, kunnostuskulut, tilapäistilojen vuokramenot,

Lisätiedot

5 CSS1-ominaisuudet. Arvot

5 CSS1-ominaisuudet. Arvot 5 CSS1-ominaisuudet Arvot CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties)

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

5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet

5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet 5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background

Lisätiedot

5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet

5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet 5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background

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

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

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.

Lisätiedot

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS-tyylien perusteet CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.

Lisätiedot

KAPPALEMUOTOILUT. Word Kappalemuotoilut

KAPPALEMUOTOILUT. Word Kappalemuotoilut Word 2013 Kappalemuotoilut KAPPALEMUOTOILUT KAPPALEMUOTOILUT... 1 Tekstin tasaaminen... 1 Sisentäminen... 1 Koko kappaleen sisentäminen... 2 Sisennyksen poistaminen... 2 Riippuva sisennys (sivuotsikko)...

Lisätiedot

KÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu

KÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu KÄYTTÖLIITTYMÄT Visuaalinen suunnittelu MUISTETTAVA Yksinkertaisuus Selkeys Johdonmukaisuus Sommittelutyyli on säilytettävä samankaltaisen koko sivustossa Sivustolle yhtenäinen ulkoasu Miellyttävä ulkonäkö

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

Muuta pohjan väri [ ffffff ] valkoinen Näytä suuri risti

Muuta pohjan väri [ ffffff ] valkoinen Näytä suuri risti 1. Qcad. Aloitusohjeita. Asenna ohjelma pakettien hallinasta. Tämä vapaa ohjelma on 2D. 3D ohjelma on maksullinen. Qcad piirustusohjelma avautuu kuvakkeesta. Oletuksena, musta pohja. On kuitenkin luontevaa

Lisätiedot

Teeman rakentaminen Wordpressiin

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

Lisätiedot

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

KUVAT. Word 2013. Kuvat

KUVAT. Word 2013. Kuvat Word 2013 Kuvat KUVAT KUVAT... 1 Kuvatiedoston lisääminen... 1 Microsoftin-kuvien lisääminen... 1 Koon muuttaminen ja kääntäminen... 2 Kuvan siirtäminen... 2 Tekstiin tasossa... 2 Kelluva kuva, tekstin

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso

Lisätiedot

Java layoutit. Juha Järvensivu juha.jarvensivu@tut.fi 2007

Java layoutit. Juha Järvensivu juha.jarvensivu@tut.fi 2007 Java layoutit Juha Järvensivu juha.jarvensivu@tut.fi 2007 Layout Container Container LayoutManager Component Component Component Komponentin koko minimikoko setminumumsize(dimension d) Useimmat layoutmanagerit

Lisätiedot

KOTISIVUKONE ULKOASUEDITORI

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

Lisätiedot

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015 Suomi Finland 100 -tunnus Graafinen ohjeisto Lokakuu 2015 Tunnus Tämä on Suomen itsenäisyyden satavuotisjuhlavuoden tunnus perusmuodossaan. Se on juhlavuoden visuaalisen ilmeen arvokkain elementti, jota

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

TEKSTINKÄSITTELY Aloitusharjoitus

TEKSTINKÄSITTELY Aloitusharjoitus TEKSTINKÄSITTELY Aloitusharjoitus Kirjoita teksti, jossa kerrot lyhyesti, max. ½ sivua, mitä kaikkea olet tietokoneiden kanssa tähän mennessä puuhastellut. Mitä jo osaat ja mitä tarvitsisi vielä oppia?

Lisätiedot

Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL-FO. XSL-FO sivut

Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL-FO. XSL-FO sivut sivut XSL-Formating objects on suositus tiedon esitystavan määrittelyyn Osa XSL-suositusta XSLT:n tapaan on XML-rakenteinen ja hyvin raskas käyttää ilman sopivia työkaluja Tyypillistä: määrityksiä generoidaan

Lisätiedot

Työvälineohjelmistot KSAO Liiketalous 1

Työvälineohjelmistot KSAO Liiketalous 1 KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana

Lisätiedot

Html & css Verkkopalvelu AV-HELTECH

Html & css Verkkopalvelu AV-HELTECH Html & css Verkkopalvelu AV-HELTECH 13.8. - 27.9.2012 http://juy.fi/kurssit/web/verkkopalvelu/syksy12 Tutorial 1 vaihe 1 eka html tiedosto vaihe 2 (muutokset edelliseen lihavoituja) art

Lisätiedot