CSS tyyliä sivuihin osa I. Elina Ulpovaara
|
|
|
- Sami Lattu
- 9 vuotta sitten
- Katselukertoja:
Transkriptio
1 CSS tyyliä sivuihin osa I Elina Ulpovaara
2 Mistä on kyse? CSS eli tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on kirjoitettu tähän tarkoitukseen kehitetyllä kielellä. Yleisin Webissä käytetty kieli on CSS (Cascading Style Sheet), joka on oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä voi ehdottaa elementeille mm.: fontin tyypin, korostuksen, koon tekstin värin taustan värin, taustakuvion ja sen sijainnin marginaalien ja reunusten käytön, leveydet, värit ja muodot esitystavan:mm. elementin esittäminen lohkoina, luetteloalkiona tai ei ollenkaan 2
3 Mihin kirjoitan tyyliehdotukset? Kolme vaihtoehtoa. Tyyli kirjoitetaan erilliseen tiedostoon. <!DOCTYPE html> Tyylitiedosto liitetään html-dokumenttiin <html> <head>-elementtiin <link>-elementillä. <head> <title></title> <link href="tyyli.css" rel="stylesheet" type="text/css" > <style type="text/css"> h1 {color:rgb(255,0,0)} Tyyli kirjoitetaan <style>-elementtiin htmltiedoston otsikossa eli <head>-elementissä. </style> </head> <body> <h1 style="color:rgb(0,0,255)"><br> Verkkomultimedia</h1> <nav> Kirjoittamalla tyyliehdotus juuri siihen <ul><li>kotisivu</li> kohtaan, mihin haluat sen tulevat. <li>aikataulu</li> Html-dokumentissä voidaan tyyli antaa jokaiselle elementille erikseen style-attribuutin... avulla. 3
4 Miten kirjoitan CSS:ään? Tyyliehdotuksen kirjoitusperiaate: valitsin määritys määritys selector declaration declaration h1 {color:rgb(255,0,0); font-size:20px;} ominaisuus arvo property value Valitsin on usein html-elementti, johon tyyli kohdistuu. 4
5 Valitsimia: Yleisvalitsin * : koskee kaikkia elementtejä * {font-size: 12px;} Ehdotus kohdistuu yhteen tiettyyn elementtiin: H1-tason otsikot ovat punaisia ja kooltaan 20px. h1 { color: rgb(255,0,0); font-size: 20px;} Usealla elementillä sama ulkoasuehdotus: H1-tason otsikoiden ja kappaleiden väri on sininen. h1, p { color: rgb(0,0,255);} Elementin sisällä tarkentava elementti, johon ominaisuus kohdistuu: navelementin sisällä oleva a-elementin teksti sinisellä. nav a {color: rgb(0,0,255);} 5
6 Luokkavalitsin Yhdelle html-elementille voidaan ehdottaa useampia tyylejä käyttämällä luokkia. h1.pun { color:rgb(255,0,0)} h1.sin {color:rgb(0,0,255)} Määriteltyyn luokkaan viitataan html-tiedostossa elementeissä class- attribuutilla. <h1 class="pun">ärsyttääkö silmiäsi?</h1> <h1 class="sin">ei ärsytä.</h1> Voidaan käyttää myös yleisiä luokkia, joiden määritys voidaan liittää mihin elementtiin hyvänsä. Luokan määrittely aloitetaan pisteellä (.), jonka jälkeen tulee luokan nimi. Elementin taustaväri on harmaa:.htausta {background-color: rgb(204,204,204)} Näin määriteltyyn luokkaan voidaan viitata missä elementissä hyvänsä käyttämällä class-attribuuttia. <h2 class= htausta">tässä on... <table class= htausta">... 6
7 ID valitsin ID-attribuuttia annetaan dokumentin elementille ainutkertainen tunniste. <p id="eka">tämä on dokun eka kappale...</p> Tähän tunnisteeseen viitataan tyylimäärittelyssä #-merkillä: #eka {color:rgb(255,0,0)} Kommentti css:ssä Kommentti tyylitiedostossa: /* tyylimäärittelyn sisällä oleva kommentti*/ 7
8 Ulkopuolinen css-tiedosto HTML-dokumenttiin lisätään <head>-elementtiin <link>-elementti, joka osoittaa tyylitiedoston sijainnin. Tyylitiedoston tarkentimeksi annetaan.css. <!DOCTYPE html> <html> <head> <title></title> <link href="tyyli.css" rel="stylesheet" type="text/css" > <head>.. Sama tyyli voidaan linkittää useisiin html-sivuihin Yhtenäinen ulkoasu koko sivustolla Ulkoasun päivitys/uudistus on helppoa: muutat vain tyylitiedostoa. Ulkoasun tuottamisen voi hoitaa tarvittaessa eri henkilö kuin html-sivun tekijä/päivittäjä. Voit tuottaa erilaisia ulkoasuja erikoisille näytöille, kirjoittimelle ym. varten samasta html-sivusta 8
9 Style-elementti Html-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje styleelementillä, joka sijoitetaan html-dokumentissa head-elementin alielementiksi. Tämä tyyliohje on olemassa vain siinä html-dokumentissa, jonka headelementissä style-elementti sijaitsee. Sisäisen style-elementin tyyliohje ohittaa ulkoisen.css tiedostossa olevan ohjeen silloin kuin ehdotus koskee saman elementin samaa ominaisuutta. <!DOCTYPE html> <html> <head> <title></title> <link href="tyyli.css" rel="stylesheet" type="text/css" > <style type="text/css"> h1 {color:rgb(255,0,0)} </style> </head>. 9
10 Style-attribuutti HTML-dokumentissa elementille voidaan antaa style-attribuutti, jonka arvoksi kirjoitetaan kyseiseen elementtiin kohdistuvia ulkoasuehdotuksia. Style-attribuutilla tehty tyylimääritys ohittaa sekä ulkoisen tiedoston että style-elementin kyseiselle elementille määritellyt tyyliohjeet. <p style= color:rgb(255,0,0); font-size:20px >Punaista tekstiä, jonka koko on 20px.</p> 10
11 Miten selaimet tukevat CSS:ää? Yleisesti voidaan sanoa, että kaikki selaimet tukevat CSS1 ja CSS2 tyylitiedostotekniikoita. CSS3:sessa on paljon uusia piirteitä, joita kaikki selaimet ei vielä tue. Tietoa piirteistä ja selainten tuesta: Everything yuo need to know about CSS3 Tähän dokumenttiin on pyritty lisäämään ulkoasuominaisuuksien kohdalle, jos tuessa on rajoituksia. 11
12 Osa uusista ominaisuuksista vaatii vielä toimiakseen selainten browser extension määritykset. Extension Rendering Selaimet Esimerkki engine -moz- Mozilla Firefox, Camino -moz-transform -ms- Trident IE -o- Presto Opera -o-transform -webkit- Webkit Chrome, Safari -webkit-transform #laatikko { -moz-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } Huom. Kirjoita viimeiseksi CSSsuosituksen mukainen määritys. CSStyyleissä viimeinen sääntö tulee aina voimaan. Joskus tulevaisuudessa ei enää extension poikkeussääntöjä tarvita. 12
13 CSS-tyylit color tekstinväri Kuvaus: - Asettaa tekstille värin. Periytyminen: kyllä Esimerkki: 1-tason otsikot punaisella Arvot: - heksadesimaalina: #CC rgb-väreinä: rgb(255,0,0) - rgba-väreinä: rgba(255,0,0,0.5) - värin nimellä: red - hsl-väreinä:hsl(0º,100%,50%) - hsla-väreinä:hsla(0º,100%,50%,0.5) h1 {color:rgb(255,0,0)} Heksadesimaalit Väri määritellään #RRGGBB, mikä muodostuu värin osista RR (punainen), GG (vihreä) ja BB (sininen). Osien arvojen täytyy olla väliltä 0-FF.
14 RGB Värit RGB -väri määritellään rgb(red, green, blue). Väriarvo ilmoitetaan Numerona väliltä Prosenttina 0%-100% Tuki: IE9+, Firefox3+, RGBa Värit Chrome, Safari ja Opera10+ RGBa-värit laajentavat RGB-värejä aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. RGBa-väri määritellään rgba(red, green, blue, alpha). Alpha-parametri on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysi peittävyys). 14
15 Värien nimet Perusvärit: aqua, black, blue, fuchsia, gray (grey), green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Lisäksi 130 väriä, linkkejä: HSL värit Väri määritellään hsl(hue, saturation, lightness) väri arvot asteita väliltä kylläisyys arvot 0%-100% harmaa -> väri Tuki: IE9+, Firefox3+, Chrome, Safari ja Opera10+ valoisuus arvot 0%-100% musta -> valkoinen Hue: 0 punainen, 60 keltainen, 120 vihreä, 240 sininen 15
16 Tuki: IE9+, Firefox3+, HSLa Värit Chrome, Safari ja Opera10+ HSLA-värit laajentavat HSL-värejä aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. HSLA-väri määritellään hsla(hue, saturation, lightness, alpha). Alphaparametri on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysi peittävyys). Väriesimerkki: color:rgb(199,21,133) color:#c71585 color: MediumVioletRed color:hsl(322,89%,43%) 16
17 font-family - fontti Kuvaus: - Asettaa fonttityypin. - Tyyppi voidaan antaa fonttien niminä tai käyttämällä jotain viidestä fonttiperheestä. Arvot: - fonttien nimet - fonttiperheet: serif, sans-serif, cursive, fantasy, monospace Periytyminen: kyllä Esimerkki: 1-tason otsikot tulostetaan ensisijaisesti fontilla Tahoma, jos sitä ei ole saatavilla niin käytetään Arial-fonttia. Jos Arialia ei ole käytössä, niin käytetään selaimen sans serif (päätteetön fontti)-oletusfonttia. h1 {font-family: Tahoma, Arial, sans-serif}
18 Fonttien nimistä: Jos fontin nimi koostuu kahdesta tai useammasta sanasta, niin käytetään -merkkejä p {font-family: Times New Roman, serif} Fonttiperheet serif: päätteelliset fontit, esim. Times New Roman sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim. Jokerman monospace: tasalevyiset, esim. Courier New 18
19 font-size fontin koko Kuvaus: - Fontin koko Periytyminen: kyllä Arvot: - xx-small, x-small, small, medium, large, x-large, xx-large - larger, smaller - prosentit - pituusyksiköt: em, px, cm, pt... Esimerkki: Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna. p {font-size: 200%} p {font-size:2em}
20 font-style - tyyli Arvot: - oblique: kallistettu teksti - italic: kursivoitu teksti - normal: normaali teksti Esimerkki: 2-tason otsikot tulostetaan kallistettuna. h2 {font-style:oblique} Periytyminen: kyllä
21 font-weight - fontin lihavuus Arvot: - numeeriset arvot:100, 200, 300, 400, 500, 600, 700, 800, avainsanat: normal(400), bold(700), bolder, lighter Esimerkki: Kappaleen teksti on lihavoitu. p {font-weight:bold} Periytyminen: kyllä Lihavoinnin luvut esittävät fontin paksuusastetta. Yleensä selaimet esittävät font-weight-arvot arvona 400, joka on perusteksti.
22 font-variant - kapiteeliteksti Kuvaus: - Teksti tulostetaan kapiteelikirjaimilla eli isoilla kirjaimilla tavallisten pienten kirjaimien asemasta. Arvot: - Small-caps: kapiteelikirjaimet - normal: normaalit kirjaimet Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla. p {font-variant: small-caps}
23 font Yhdistää edellä esitetyt font-alkuiset ulkoasuehdotukset p {font: bold 12px arial,sans-serif} 23
24 Web Tarkista lisenssit! Mahdollistaa fonttien lataamisen verkosta käyttäjän omalle koneelle. Mistä fontteja: typekit.com Fonttien formaatit: WOFF - Web open font, myös IE9 TTF Toimii kaikilla selaimilla paitsi IE:llä ja iphone.:ssa EOT IE:n aikaisemmat versiot SVG - iphone/ipad. 24
25 Tässä on fontti nimeltä GoodDog tallennettu fontit-hakemistoon. Font-family-nimeksi on annettu leipis. CSS-koodiin: Fonttien mukana tulee mallikoodi { font-family: 'leipis'; src: url('fontit/gooddog-webfont.eot'); src: url('fontit/gooddog-webfont.eot?iefix') format('eot'), url('fontit/gooddog-webfont.woff') format('woff'), url('fontit/gooddog-webfont.ttf') format('truetype'), url('fontit/gooddog-webfont.svg#webfontx1qlglst') format('svg'); font-weight: normal; font-style: normal;} Itse varsinaiseen html-koodiin: p {font-family:'leipis', arial, sans-serif} 25
26 Fontit Googlen palvelusta Valitse sivulta sopiva fontti ->kopio omalle sivullesi siihen osoittava linkki <link href=' rel='stylesheet' type='text/css'> Lisää määre tyylitiedostoosi: p {font-family: 'Skranji', cursive;} 26
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
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
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
CSS - tekstit. Tyylisivut
CSS - tekstit Sisällys: Tyylien käyttö Tekstit: Fontit, värit, korostukset Tasaus, välistykset ICT01D 28.11.2005 Elina Ulpovaara Tyylisivut Tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on
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"
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
CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
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...
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
Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara
Typografia Verkkomultimedia ICT1tn004 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman. Suunnitellaan
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
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),
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
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
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ä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
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
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.
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
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
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
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
Typografia Verkkomultimedia ICT1tn004. Mitä on typografia?
Typografia Verkkomultimedia ICT1tn004 13.9.2009 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman.
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
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ää
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ää
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
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
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
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ä
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
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ö,
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
1. Graafiset peruselementit
1.1. Tunnus Kalajoki tunnusta käytetään kaikessa Kalajoen kaupungin viestinnässä, niin tiedottamisessa, ilmoittelussa kuin mainonnassakin. Kalajoen vaakuna varataan virallisiin ja juhlallisiin käyttötarkoituksiin
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ää
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#
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.
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ö
Käyttöohje - Sanoma Pro digikirjat verkkopalvelu v 1.0 2013-07- 10. Sanoma Pro digikirjat verkkopalvelu... 2. Yleistä... 2. Laitteistovaatimukset...
- 1 - Käyttöohje - Sanoma Pro digikirjat verkkopalvelu v 1.0 2013-07- 10 Sanoma Pro digikirjat verkkopalvelu... 2 Yleistä... 2 Laitteistovaatimukset... 2 Sisäänkirjautuminen... 2 Uloskirjautuminen... 3
HEIKKINEN YHTIÖT YRITYSILME 071212
LOGON PERUSVERSIO PERUSVERSIO Ensisijaisesti käytettävä versio logosta. Käytetään valkoisella tai hyvin vaalealla pinnalla. PERUSVERSIO PUNAINEN NEGA Käytetään tässä ohjeistossa määritellyllä punaisella
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
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
Graafinen ohjeistus Taidekaupunki-logo
Graafinen ohjeistus Taidekaupunki-logo Ohjeistuksessa määriteltyjä raja-arvoja ja värejä tulee noudattaa aina mahdollisuuksien mukaan ellei toisin sovita. SUOJA-ALUE Suoja-alue määräytyy merkissä olevan
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.
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
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
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
Graafinen ohjeisto (27.6.2013)
Graafinen ohjeisto (27.6.2013) Merkki Logotyyppi Alateksti Tunnus Lapin AMK:n tunnus koostuu kolmesta osasta: logotyypistä (Lapin AMK -teksti), merkistä ja englanninkielisestä alatekstistä. Tunnuksen minimileveys
Johdatusta selainohjelmointiin
Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat
Aulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla Tällä kertaa o Videotiedostot -
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
HTML5 video, audio, canvas. Mirja Jaakkola
HTML5 video, audio, canvas Mirja Jaakkola Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu
Kopseptisuunnittelu Verkkomultimedia ICT1tn004
Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat
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
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
Tyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 5 WWW-hypermedian perusta: HTML
Tyylien käyttö Tyylien (style) ideana on HTML:n tapauksessa erottaa toisistaan dokumentin rakenne ja ulkoasu Tavoitteena on, että dokumentin loogisen rakenteen ja ulkoasun koodaus erotetaan toisistaan
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
Äänekosken Juniorijalkapallo
Äänekosken Juniorijalkapallo Graafinen ohjeistus 1 graafinen ohjeistus Sisällysluettelo Äänekosken Juniorijalkapallo -vaakunalogo 3 Äänekosken Juniorijalkapallo -tekstilogo 4 Logojen et ja koot 5 Värielementit
Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara
Navigointi Verkkomultimedia ICT1tn004 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on? Mihin sivulta
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
Aulikki Hyrskykari. CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla
9.4.2013 Aulikki Hyrskykari CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla Jaoetaan pseudovalitsimet edelleen kahteen alaluokkaan: 1. Pseudoelementtivalitsimet o liitetään
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
XML & CSS. WWW-sovellus??
XML & Näkökulmia WWW-ympäristön sovelluksiin ja käyttöliittymiin ILKKA PALOLA Citec Information WWW-sovellus?? Informaationhallinta, julkaisutoiminta Verkkoviestintä ESIMERKKEJÄ käyttäjistä ja käyttökohteista:
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ä
Ohjeita informaation saavutettavuuteen
Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea
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
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
Tekstin muotoilu Työvälineohjelmistot KSAO. tee kappaleiden väliin yksi tyhjä kappale (älä käytä enteriä!), kuinka saat kappaleet näkyville?
Harjoitus 2a 1. Kopioi moodlesta Kouvola.doc. 2. Muotoile teksti seuraavan mallin mukaiseksi: tee kappaleiden väliin yksi tyhjä kappale (älä käytä enteriä!), kuinka saat kappaleet näkyville? Järjestä kappaleet
KompoZerin kotisivu on osoitteessa kompozer.net, josta sivun yläreunan Download-linkin takaa löytyy suomenkielisen version asennusohjelma.
KompoZer s. 1/15 1 Johdanto KompoZer on ohjelma www-sivujen tekemiseen ja sivustoon kuuluvien tiedostojen hallintaan. Ohjelmassa on graafinen WYSIWYG-käyttöliittymä (what you se is what you get), jonka
HTML5 & CSS3 perusteet
Verkkokurssin tuotantoprosessi kurssin harjoitustyönä suunniteltu toteutettavissa oleva verkkokurssi. HTML5 & CSS3 perusteet Sisältö: 1. Ideointi 2. Tausta-analyysi 3. Sisällön suunnittelu 4. Pedagoginen
Fontit ja tekstin selkeys
Fontit ja tekstin selkeys On olemassa useita erilaisia käsityksiä siitä, minkälaista helppolukuisen materiaalin on oltava. Esimerkiksi yleisesti suositellaan fontiksi Times New Roman, Arial tai Verdana
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ä.
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.
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)
3D TALO FINLAND OY GRAAFINEN OHJEISTO
3D TALO FINLAND OY GRAAFINEN OHJEISTO 1 SAATESANAT 3D TALO FINLAND OY 3D Talo Finland Oy on Kuopiolainen virtuaalitodellisuusteknologiaan erikoistunut yritys. Toimintamme keihäänkärkenä on suunnitella
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
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
GRAAFINEN OHJEISTO 1
GRAAFINEN OHJEISTO 1 SISÄLLYSLUETTELO JOHDANTO Johdanto... 3 Logon eri versiot... 4 Kuinka logoa ei tule käyttää.... 5 Logon suoja-alue... 6 Slogan.... 7 Typografia... 8 Tämän manuaalin tarkoitus on ohjeistaa
Racket ohjelmointia. Tiina Partanen 2014
Racket ohjelmointia Tiina Partanen 2014 Sisältö 1) Peruslaskutoimitukset 2) Peruskuvioiden piirtäminen 3) Määrittelyt (define) 4) Yhdistettyjen kuvien piirtäminen 5) Muuttujat ja funktiot 6) Animaatiot
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
OPETUSPELIN TOTEUTUS RESPONSIIVISENA WEB-SOVELLUKSENA
OPETUSPELIN TOTEUTUS RESPONSIIVISENA WEB-SOVELLUKSENA Ossi Korpi Opinnäytetyö Huhtikuu 2013 Mediatekniikan koulutusohjelma Tekniikan ja liikenteen ala OPINNÄYTETYÖN KUVAILULEHTI Tekijä(t) KORPI, Ossi Julkaisun
Internet-pohjaisen oppimisympäristön laadinta. Luento 3
Internet-pohjaisen oppimisympäristön laadinta Luento 3 Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista 31.01.2013 IPOPPLA 2 Toteutustekniikoista
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?
Windows Live SkyDrive - esittely
Windows Live SkyDrive - esittely Microsoftin SkyDrive on pilvipohjainen tiedostojen säilytys- ja jakopalvelu. SkyDrive tarjoaa 25 Gb ilmaista säilytystilaa tiedostoille ja valokuville. Voit käyttää SkyDriven
SÄHKÖPOSTIOHJE. Opiskelijoiden Office 365 for Education -palveluun
SÄHKÖPOSTIOHJE Opiskelijoiden Office 365 for Education -palveluun 1 Ohjeen nimi Vastuuhenkilö Sähköpostiohje Järjestelmäasiantuntija Pekka Patrikka Voimaantulo 15.08.2013 Muutettu viimeksi 16.08.2013 Tarkistettu
String-vertailusta ja Scannerin käytöstä (1/2) String-vertailusta ja Scannerin käytöstä (2/2) Luentoesimerkki 4.1
String-vertailusta ja Scannerin käytöstä (1/2) Vertailuja tehdessä törmätään usein tilanteeseen, jossa merkkijonoa (esimerkiksi merkkijonomuuttujaa) pitää vertailla toiseen merkkijonoon. Tällöin tavanomainen
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
2 Verkkojulkaiseminen typografian kannalta
2 Verkkojulkaiseminen typografian kannalta Tavallisimpia virheitä Verkkosivujen teossa tehdään niin paljon erilaisia karkeita virheitä, että typografiset virheet ovat jääneet vähälle huomiolle. Niihin
RATA-SM -sarjan graafinen ohjeistus Alkusanat Kuvapankki
GRAAFINEN OHJEISTUS RATA-SM -sarjan graafinen ohjeistus Tähän ohjeeseen on koottu RATA-SM -sarjan ulkoisessa ja sisäisessä viestinnässä käytettävien materiaalien ulkoasua koskevat ohjeet. Tärkeää on muistaa
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
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.
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.
AUTO AIR COLORS HINNASTO
120ml 480ml 960ml 4001 Sealer White -04 10,10-16 38,50-32 73,00 4002 Sealer Dark -04 10,10-16 38,50-32 73,00 4004 Transparent Base -04 6,70-16 25,50-32 48,50 4007 Airbrush Cleaner -04 6,70-16 25,50-32
1. Lomakkeet löytyvät asiointiportaalista osoitteesta
TOIMINTA-AVUSTUKSEN SÄHKÖINEN HAKU 1. Lomakkeet löytyvät asiointiportaalista osoitteesta http://asiointi.hel.fi Etusivulta valitaan Yritys- ja yhdistyspalvelut -> avustukset. 1 Valikosta valitaan lomake
Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla
25.3.2014 Aulikki Hyrskykari Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla Tällä kertaa o Videotiedostot -
SUOMEN JOUSIAMPUJAIN LIITTO RY Graafinen ohjeisto Versio 1, Huhtikuu 2017
GRAAFINEN OHJEISTO Versio 1, Huhtikuu 2017 2 Sisällys: Logo, värit ja typografia Logo... 4 Logon käyttö... 5 Värimaailma... 8 Typografia... 9 3 LOGO & LIIKEMERKKI Suomen Jouosiampujain liiton logo koostuu
GRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO SISÄLTÖ LEIRITUNNUS 3 LEIRITUNNUKSEN KÄYTTÖ 4 SUOMEN PARTIOLAISTEN TUNNUS 5 TYPOGRAFIA & VÄRIT 6 VÄRIEN, KUOSIEN JA TYPOGRAFIAN KÄYTTÖ 7 ILME-ESIMERKKI 8 KUVIEN KÄYTÖSTÄ 9 KÄYTTÖOHJE:
Angry Birds CLASSIC. Angry Birds CLASSIC. Angry Birds CLASSIC. toppasaapas / LIME VIHREÄ. toppasaapas / KELTAINEN. toppasaapas / PINKKI
Angry Birds CLASSIC toppasaapas / LIME VIHREÄ Angry Birds CLASSIC toppasaapas / KELTAINEN Angry Birds CLASSIC toppasaapas / PINKKI Angry Birds CLASSIC toppasaapas / MUSTA Angry Birds STELLA toppasaapas
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
1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI...
GRAAFINEN OHJEISTO 1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 PÄÄLLEKKÄISVERSIO... 4 RINNAKKAISVERSIO... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... 5