JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096
|
|
- Reijo Tamminen
- 6 vuotta sitten
- Katselukertoja:
Transkriptio
1 JWT 2017 luento 2 to klo Aulikki Hyrskykari PinniB1096 1
2 Edellinen luento o Kurssin sisältö ja suoritus, Web terminologiaa, HTML-kehitys, HTMLkertausta ja julkaisu shell.sis-palvelimella, validointi, HTML5-kertausta, koodin kirjoitustyylit, DOMista alustavasti Tänään o CSS-kertausta CSS-säännöt ja valitsimet Lokeromalli ja marginaalien käyttäytyminen Asemointi (kellutus, relative, absolue, fixed, sticky) Taustat o Joitain edistyneempiä piirteitä (CSS3 ) webfonttien käyttö viewport-prosentti display (none, block, inline, inline-block) liike palstoitus flexbox 2
3 CSS-kertausta (Cascading Style Sheets) HTML-dokumentti määrittelee sivun sisällön ja rakenteen (mitä) CSS-tyylitiedostot määritelevät miten sivu näytetään käyttäjälle (miten) CSS ZEN GARDEN 3
4 CSS säännön (rule) syntaksi selector property (piirre) value valitsin { ominaisuus: arvo; declaration 4
5 CSS säännön (rule) syntaksi p { color: red; 5
6 CSS säännön syntaksi (2) valitsin[, valitsin]* { ominaisuus: arvo[; ominaisuus: arvo]*[;] 6
7 CSS säännön syntaksi (2) p, h1,.tarkea { color: red; width: 240px; 7
8 Tyylipohja (tyyliohje, stylesheet) * { /* yhtenäistetään kaikkien elementtien marginaalit ja leveyden tulkinnat */ margin: 0; box-sizing: border-box; h1 { /* ensimmäisen tason otsikolle määritellään varjostus */ text-shadow: 4px 4px 2px black; p { /* kappaleiden teksti punaisella, ja kappaleleveyden määritys*/ color: red; width: 240px; 8
9 CSS valitsimet kolme perusvalitsinta HTML-dokumentti CSS-tyyliohjeet o Elementtivalitsin (type selector) <p> tekstiä </p> p { color: red; o Luokkavalitsin (class selector) <p class ="tarkea"> tekstiä </p>.tarkea { color: red; o id-valitsin (id selector) <p id = "uniikki"> tekstiä </p> #uniikki { color: red; 4 9
10 Attribuutti-, pseudoluokka- ja pseudoelementivalitsin o Attribuuttivalitsin e1[ ] elementtien valinta muiden kuin id- ja luokka-attribuuttien arvoja käyttäen ks. esim. MDN: Attribute selectors o Pseudoluokkavalitsin e1:takennin etsintä ei nimen, attribuuttien eikä attribuuttien sisältöjen perusteella, vaan jonkun muun elementin ominaisuuden perusteella (esim. käyttöliittymäelementeille hakua elementin tilan perusteella) ks. esim. MDN: Pseudo classes o Pseudolelementtivalitsin e1::tarkennin "luo" pseudoelementin, ts. vastaavaa elementtiä ei varsinaisesti ole olemassa ks. esim. MDN: Pseudo elements 10
11 Valitsinten yhdisteleminen o Kontekstinen valitsin (decendant selector, jälkeläisvalitsin) e1 e2 kohdistuu elementin e1 sisällä oleviin kaikkiin e2-elementteihin, esim. <article> <p> Teksti p-elementeissä, article-elementin sisällä sinistä </p> </article> <p> Tämä ei sinistä </p> <article> <div> <p>onko tämä sinistä? </p> </div> </article> article p { color: blue; 11
12 Valitsinten yhdisteleminen (2) o Lapsivalitsin (child selector) e1 > e2 kohdistuu elementin e1 välittömiin e2-lapsiin (siis ei myöhempiin jälkeläisiin), esim. <article> <p> Teksti p-elementeissä, article-elementin sisällä sinistä </p> </article> <p> Tämä ei sinistä </p> <article> <div> <p>onko tämä sinistä? </p> </div> </article> article > p { color: blue; 12
13 Valitsinten yhdisteleminen (3) o Luokkien käyttö tarkentimena (chaining classes):.luokannimi <div class = "yksi"> Tekstiä div-elementin sisällä, jolla luokka "yksi" <span class = "kaksi kolme"> Tekstiä span-elementissä divin sisällä, tällä luokka "kaksi" </span> </div> <div class ="yksi kolme"> Tekstiä div-elementissä, joka on edellisen divin ensimmäinen sisarus, tällä on kaksi luokkaa: luokat "yksi" ja "kolme" </div> Miten saadaan valituksi ensimmäinen div? Miten saadaan nämä kaksi tekstiä valituksi? div.yksi { color: red; div.yksi > span { color: red; div.yksi.kolme { color: red; div.yksi.kaksi > span { color: red;? 13
14 Lokeromalli kehys (border) marginaali (margin) täyte (padding) sisältö (content) 5 14
15 Marginaalin käyttäytyminen horisontaalisesti margin: 20px margin: 60px content content margin: 80px 15
16 Marginaalin käyttäytyminen vertikaalisesti margin: 20px content etäisyys? margin: 60px 60 px margins collapse vertically content 16
17 Kellutus (float left, float right, float both) <main> <p id="p1"></p> <p id="p2"></p> <p id="p3"></p> <p id="p4"></p> <section> tekstiä </section> </main> p { width: 50px; height: 50px; border: 1px solid black; main { background-color: lightblue; #p1 { background-color: yellow; #p2 { background-color: blue; #p3 { background-color: red; #p4 { background-color: green; o Kellutettu elementti irroitetaan dokumentivirrasta (document flow) 7 o Kellutuksen kokeilua (jos kellutus tuottaa vaikeuksia, täällä yksi rauhallisessa tahdissa asiaa selittävä video: 17
18 Asemointi (positioning) position: static relative abolute fixed Staattinen o oletus kaikille elementeille paitsi <html>-elementille, sen oletus on suhteellinen) o elementti sijoittuu normaalisti omalle paikalleen elementtivirrassa 18
19 Suhteellinen (relative) o Absoluuttinen asemointi siirtää elementin normaalilta paikaltaan elementtivirrassa siirto annetaan css-ominaisuuksilla top, bottom, left, right (siirto yläreunasta ja vasemmalta tai alarunasta ja oikealta) elementtiä ei oteta irti dokumenttivirrasta, ts. muut osat olettavat, että elementti on alkuperäisessä paikassaan elem { position: relative top: 50px; left: 100px; 50px elem 100px elem sama vaikutus: bottom: -50px; right: -100px 7 19
20 Absoluuttinen (absolute) o Aboluuttisesti asemoitu kiinnitetään esivanhempansa kohtaan top, bottom, left, right kiinnittävä elementti, on se lähin esivanhempi, jonka asemointi on jokin muu kuin staattinen asemointi elementti otetaan irti dokumenttivirrasta elem { position: absolute; bottom: 10px; left: 50%; elem elem 50% 10px 8 20
21 Kiinteä (fixed) o Kuten absoluuttinen, mutta kiinnittävän esivanhempi elementin sijasta kiinnitetään viewporttiin (selainikkunaan) 9 o Uusi position: sticky; on sekoitus absoluuttista ja kiinteää (fixed) asemointia asemointi on fixed tiettyyn raja-arvoon asti, ja sen jälkeen absolute 21
22 Taustat (background) o Taustojen avulla helposti vaikuttavia efektejä ks esim. Me tiedämme missä asut background-color background-position (top, left, bottom, right, center, %, inherit,..) background-repeat (repeat, no-repeat, repeat-x, repeat-y,..) background-clip (content-box, border-box, margin-box,..) background-attachments 10 22
23 CSS edistyneempiä piirteitä
24 Webfonttien käyttäminen o Tietyt vakiofontitkäytettävissä aina esimerkiksi Times, Georgia, Arial, Tahoma, Lucida Console, jne. o Iso valikoima ilmaisia fontteja, helppo ottaa käyttöön etsi ensin haluamasi fontti, esim. lataa fontin määrittelevä tiedosto palvelimelle (esim. Chunkfive.otf), ts. tallenna se omaan public_html hakemistoosi tuo fonttitiedosto (CSS3) tämän jälkeen voit käyttää sitä samalla tavalla kuin vakiofonttejakin h1, h2 { font-family: "ChunkFiveRegular"; src: local ( ChunkFiveRegular") url("fonts/chunkfive.otf") format ("opentype"); font-family: "ChunkFiveRegular", "Georgia", serif;
25 Webfonttien käyttäminen 2 o Googlefontit: ei tarvitse tallentaa palvelimelle voi käyttää linkkaamalla kirjasintiedoston suoraan Googlen palvelimelta o Esimerkiksi fontti "Indie Flower " etsi h1, h2 Googlen { palvelusta valitse use ja saat valmiit skriptin fontin käyttämiseksi itse asiassa googlen antamasa link-tiedostossa vain -sääntö jonka itse kirjoitimme edellä <link href= ' rel='stylesheet' type='text/css'> font-family: 'Indie Flower', cursive;
26 Uusi mittayksikkö: viewport-prosentti o Mittayksikkö, joka suhteessa viewport-ikkunan leveyteen (viewport on selainikkunassa näkyvä sivun osa): vw, vh, vmin, vmax o Pienissä laitteissa viewport usein kapeampi kuin selainikkuna ikkunaa selataan pyyhkäisyllä sivusuunnassa o Esimerkiksi 1vw = 1/100 nykyisen viewport-leveydestä (1%) 15vh = 15/100 nykyisen viewport-korkeudesta (15%) o Helpottaa erityisesti elementtien korkeuden säätelyssä korkeuden säätely vanhoillakin prosenttimitoilla mahdollista mutta hankalaa joutuu huolehtimaan että äiti-elementillä on korkeus koska (width ja height) eivät ole periytyviä ominaisuuksia esimerkki halutaan määrätä kuvan korkeus, mutta sitoa se sivun leveyteen, ei korkeuteen 11 26
27 Elementtien sijoittelusta: CSS-ominaisuus display o Määrittää miten elementti sijoittuu suhteessa sitä edeltäviin ja sitä seuraaviin elementteihin o display: none elementti muutetaan näkymättömäksi o display: block leveys/korkeus voidaan asettaa (widht ja hight) asemoituu aina omalle rivilleen o display: inline leveys/korkeus määräytyy automaattisesti, sitä ei voi asettaa asemoituu samalle riville (jos mahtuu) o display: inline-block asemoituu kuten inline-elementti mutta sille voi antaa leveyden/korkeuden 12 27
28 Oletusarvoa voi muuttaa o Esim esimerkiksi avautuvan valikon toteutus ul-elementtien ul-lapset, joilla nav äitinä tai esiäitinä nav ul ul { display:none; nav ul li:hover > ul { display: block; nav elementin ul lapsen hiiren kursorin alla olevan li-lapsen ul-lapsi <nav> <ul class="menu"> <li> Ensimmäinen valikko <ul> <li><a href="#">(1) Eka alkio</a></li> <li><a href="#">(1) Toka alkio</a></li> <li><a href="#">(1) Kolmas alkio</a></li> </ul> </li> <li> Toinen valikko. </li> <li> Kolmas valikko. </li> </ul> </nav> 28
29 Esimerkki, listan tyylittely valikoksi <nav> <ul> <li><a href="#">eka alkio</a></li> <li><a href="#">toka alkio</a></li> <li><a href="#">kolmas alkio</a></li> </ul> </nav> Muutetaan listan rivit inline-elementeiksi, poistetaan pallukat, määritellään listan tausta vihreäksi ja täytettä reunoille (0.5 fonttikorkeutta vertikaalisessa ja 1 fonttikorkeus horisontaalisesssa suunnassa) nav li { display: inline; list-style-type: none; nav ul { background-color: LightGreen; padding: 0.5em 1em; 29
30 Listan tyylittely valikoksi.. Muutetaan listanalkio vahvennetuksi san-serif-fontiksi ja poistetaan linkille oletusarvoisesti annettava alleviivaus. nav li {.. font-family: "Helvetica", "Arial", "sans-serif"; font-weight: bold; nav a { text-decoration: none; Listan alkioille ei voi määritellä täytettä, kun muutimme elementit inline-elementiksi. Muutetaan navin sisällä olevat listanalkiot inline-block-elementiksi, niin täytteen antaminen onnistuu. Lisätään vielä kaksi mouse-over-efektiä (hoover-pseudoluokkavalitsimella), listanalkio-elementin taustavärin muutos, ja kallistus. nav li { display:inline-block; padding: 1em; nav li:hoover { text-decoration: none; 12 30
31 Oletusarvoinen display-arvo o Oletusarvoisesti display: block lohkoelementit, esim. <div>, <p>, <ol>, <ul>, <li>,... o Oletusarvoisesti display:inline sisäelementit, esim. <span>, <em>,... ns. replaced elements poikkeus: vaikka ovat inline-elementtejä, niiden leveys/korkeus voidaan asettaa esim. <img> ja <textarea> 31
32 inline / block / inline-block o display: inline marginaali ja täyte määräytyvät automaattisesti, niitä ei voi itse asettaa muiden elementtien sallitaan asemoitua elementin eteen tai jälkeen o display: block marginaali ja täyte voidaan asettaa pakotettu rivinvaihto elementin jälkeen o display: inline-block muiden elementtien sallitaan asemoitua elementin eteen tai jälkeen marginaalit & täytteet ja leveys & korkeus voidaan asettaa 32
33 Liikettä sivulle CSS3-ominaisuuksilla o CSS3:n mukana on tulossa käyttöön tyyliominaisuuksia, joiden avulla wwwsivuille saa suoraan liikettä ja jonkinasteista interaktiivisuutta ennen tarvittu joko JavaScriptia tai Flashiä liikkeen saamiseksi www-sivuille edellä käytetty transform esimerkki yhdestä uudesta CSS3-tyyliominaisuudesta o Valitsimen avulla määrättyä elementtiä voidaan kiertää paikallaan halutun astemäärän verran o Muita transform funktioita, esim. scale, skaalaus, elementin koon muuttaminen translate, siirtäminen paikaltaan o Elementin ominaisuuden animoitu muutos transition, tyylin arvosta toiseen animate, animointipolussa useampia avainkehyksia (keyframes) elem { transform: rotate(10deg); elem {transform: scale(x,y); elem {transform:translate(x,y); elem {transition: width 2s; 33
34 Tekstin palstoitus (CSS3) o Tekstin jakaminen palstoihin voidaan kiinnittää palstanleveys column-width tai palstojen lukumäärä column-count o Palstojen välille voidaan määritellä väliin jätettävä leveys: column-gap Mahdollisen palstanjakoviivan ominaisuudet: column-rule useamman palstan yli jatkuva elementti: column-span (vrt taulukon solun span-ominaisuus) 34
35 Flexbox (CSS3) o Maalaisjärkisempi tapa joustavien asemointien tekemiseksi kehyksen sisällä joko horisontaalissa tai vertikaalissa (!) suunnassa siksi ei puhuta leveydestä ja korkeudesta, tarvitaan uudet termit sijoittelun pääsuunta, main axis ristikkäinen suunta, cross axis o Kehykselle määritellään kehys boksi div-fl-kehys { display: flex; 35
36 Flexbox 2 (CSS3) flex-direction: row flex-direction: column o Asemointiin voi vaikuttaa (kehyksen) ominaisuuksilla paljon mahdollisuuksia, tässä vain osa asemointisuuntaan (flex-direction) asemoitavien elementtien rivitykseen (flex-wrap), = vaihdetaanko riviä (saraketta) kun eivät mahdu vai kutistetaanko niitä asemoitavien sijoitteluun pääsuunnassa (justify-content), vasempaan tai oikeaan suoraan, keskitettynä, välistettynä, jne. o Asemoitavalle elementille ei tarvitse määritellä tyyliominaisuuksia paitsi, jos haluaa yksittäisen boksin käyttäytyvän muista poikkeavasti esim. muut kutistuvat sivua kavennettaessa, mutta yksi ei 13 hyvä tutoriaali 36
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ätiedotUlkoasun 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ätiedotAulikki 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ätiedotKotisivujen 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ätiedotCascading 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ätiedotUlkopuolisen 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ätiedotTaulukot. 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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedotCSS. 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ätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotWWW-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ätiedot1. 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ätiedotCSS 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ätiedotJWT 2016 luento 2. to klo Aulikki Hyrskykari PinniB1097
JWT 2016 luento 2 to 10.3.2016 klo 14-16 Aulikki Hyrskykari PinniB1097 1 Viime luennolla o Kurssin sisältö ja suoritus, Web terminologiaa ja yleistä HTML-kertausta Tänään o HTML5 vielä Validointi ja JWT-house
LisätiedotH 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ätiedotCSS - 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ä:
LisätiedotCSS - 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ätiedotvalitsin 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ätiedotDigitaalisen 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ätiedotH 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ätiedotCode 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ätiedotKatsotaan 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ätiedotAsemointi. 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ätiedotLisä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ätiedotAjatus 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ätiedotAulikki 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ätiedotWWW-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ätiedotVerkkosivujenulkoasu
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ätiedotselector { 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ätiedotWWW-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ätiedotAulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA
Aulikki Hyrskykari Antti Sand Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta
LisätiedotTee 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ätiedotKotisivut 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ätiedotKuva 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ätiedotDigitaalisen 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ätiedotNavigointi 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ätiedotWritten 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ätiedotQT 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ätiedotHTML-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ätiedotDigitaalisen 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ätiedotEdellinen 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 -
LisätiedotKylä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ätiedotDigitaalisen 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ätiedotEditorin 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ätiedotKotisivuohjeet. 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ätiedotHTML5 -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ätiedotHTML & 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ätiedotTAULUKOINTI. 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ätiedot4 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ätiedot4 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ätiedotHTML 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ätiedotOpinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03
Opinnäytetyö 5.4.2006 Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Sisällysluettelo 1. Johdanto... 3 2. Suunnittelu... 4 2.1. PTOPlus.net... 4 2.2. Sivujen tarkoitus ja kohderyhmä...
LisätiedotMuotoilutoliot. 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ätiedotCascading 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ätiedotHelsingin 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ätiedotHelsingin yliopisto/tktl XML-metakieli XSL-FO XSL - extensible stylesheet language XSL-FO
XSL - extensible stylesheet language XSL kehitettiin XML aineistojen esitysmuodon märittelyyn XSLT (T ~ Transformations) dokumentin rakenteen tai sisällön muunnokset XSLT 1.0 (http://www.w3.org/tr/xslt)
LisätiedotCSS 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ätiedotKyläsivujen InfoWeb-ohje
Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina
Lisätiedothttp://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ätiedotJohdatusta 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
LisätiedotNavigointi 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ätiedotCSS - 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
LisätiedotKÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
LisätiedotEntiteetit 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ätiedotVerkkosivut 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ätiedotProseduraalinen 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ätiedotKuvat 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ätiedot1 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ätiedotH6: 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ätiedotJWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari
JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti
LisätiedotTAULUKKO, 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ätiedotTaulukot. 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ätiedotKun 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ätiedotAT4-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ätiedot6.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ätiedotSisä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ätiedotUpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
LisätiedotArtikkelien 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ätiedotAulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/27/2014
27.3.2014 Aulikki Hyrskykari JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto Edellinen luento o Videotiedostot - palvelimelle tallennetun videon tuonti verkkosivulle - HTML5 videoformaatit - videon
LisätiedotJAVA-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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedotGoogle-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
LisätiedotKontakti - Ohje palveluun. Luo ja lähetä viestejä
Kontakti - Ohje palveluun Luo ja lähetä viestejä Näin pääset alkuun! A4 kirjeelle on valittavana myös lisäsivut (tuo ne valmiina pdf-tiedostona). A5 ja A6 kortteihin on valittavana myös kuoritus. Mene
Lisätiedotejuttu ohjeet kuinka sitä käytetään.
ejuttu ohjeet kuinka sitä käytetään. 1. Artikkelin lisääminen a. Kirjaudu sisään b. Lisää sisältöä c. Artikkeli i. Lisää pääkuva 1. Pääkuvalle kuvateksti ii. Anna artikkelille otsikko iii. Ingressi-kenttään
Lisätiedot1 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ätiedotAlkuun HTML5 peliohjelmoinnissa
Paavo Räisänen Alkuun HTML5 peliohjelmoinnissa www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida ja levittää ei kaupallisissa tarkoituksissa. Sisällysluettelo 1: Alkusanat 2: Alkuun 3: Pelinäkymä
LisätiedotKotisivut 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ätiedotMetropolia Ammattikorkeakoulu Sonja Merisalo 3.6.2012
5. Taulukkolaskenta 5.1 Taulukon hallinta Rivejä saat valittua klikkaamalla rivin numeroa tai maalamalla useamman rivin kerralla numeroiden päältä. Tämä toiminto valitsee rivin aina hamaan loppuun asti.
LisätiedotVerkkojulkaiseminen 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ätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotYllä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ätiedotYH7: Taulukkolaskenta I
Aulikki Hyrskykari, Juhani Linna YH7: Taulukkolaskenta I Huom. Suosittelemme vahvasti taustamateriaaliin tutustumista ennen aloittamista, erityisesti mikäli taulukkolaskenta on sinulle uusi asia. Taustamateriaalista
LisätiedotKOTISIVUKONE 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ätiedotValidaattorit o HTML 5 validaattori: o CSS validaattori: validator/validator.html.
1432013 Aulikki Hyrskykari W3C = World Wide Web Consortium W3C spesifikaatioiden kehitysprosessi o Working Draft (WD) o Candidate Recommendation (CR) o Proposed Recommendation (PR) o W3C Recommendation
LisätiedotHTML ja tyylit. 4 HTML ja tyylit
HTML ja tyylit 4 HTML ja tyylit Yksi HTML:n perinteisistä ongelmista on ollut se, että kehittäjät haluavat itse määrittää sen miltä dokumenttien tulee näyttää, käytännössä tämä johtaa dokumenttien formatointiin
Lisätiedot1. Perustiedot. Sivu 1 / 4. Tietovirran nimi: Hallinnassa näkyvä tietovirran nimi. Selite: Tietovirran kuvausteksti.
Widget käyttöohjeet Sivu 1 / 4 1. Perustiedot Tietovirran nimi: Hallinnassa näkyvä tietovirran nimi. Selite: Tietovirran kuvausteksti. Yhteyshenkilö: Tietovirran yhteyshenkilön valinta (vain tietona käyttäjille).
LisätiedotAulikki Hyrskykari Informaatiotieteiden yksikkö, Tampereen yliopisto
Aulikki Hyrskykari 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
Lisätiedot1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut
1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...
Lisätiedot