JWT 2016 luento 2. to klo Aulikki Hyrskykari PinniB1097
|
|
|
- Armas Karjalainen
- 7 vuotta sitten
- Katselukertoja:
Transkriptio
1 JWT 2016 luento 2 to klo Aulikki Hyrskykari PinniB1097 1
2 Viime luennolla o Kurssin sisältö ja suoritus, Web terminologiaa ja yleistä HTML-kertausta Tänään o HTML5 vielä Validointi ja JWT-house rules HTML5, semanttinen merkkaus interaktiiviset elementit DOMista alustavasti o CSS kertausta ja täydennystä tyyliohjeen liittäminen dokumenttiin valitsimet ja sääntöjen kohdistaminen Joitain edistyneempiä piirteitä (CSS3 ) webfonttien käyttö elementtien sijoittelusta, display, float, position liike palstoitus flexbox uusi mittayksikkö (vw, vh) 2
3 Validointi (!) o Validointi tärkeätä tuo esiin virheitä, jotka muuten jäisivät huomaamatta useimmiten selaimet renderöivät sivun virheistä huolimatta virheellisen koodin tulkinta vaihtelee eri selaimissa yllätyksiä o HTML Validointi koodin voi viedä validaattoriin antamalla julkaistun html-sivun osoite uploadaamalla html-tiedosto kopioimalla koodin leikepöydän kautta o CSS Validointi jos viedä css-koodin tai julkaistun html-sivun osoitteen, jolloin myös sivuun liitetty CSS-koodi validoidaan 3
4 JWT-koodaussäännöt: HTML / CSS attribuuttien arvot aina lainausmerkkeihin ("kaksoishipsuihin") elementtien nimet pienellä, esim: <html> ei: <HTML> luokkien ja tunnusten nimet merkityksellisiä, sanojen erotus väliviivalla, esim: <p class="tunnistus-virhe"> ei: <p class = punainen > koodirivit mahdollisuuksien mukaan alle 80 merkin mittaisia yli rivin mittaisissa elementeissä alku- ja lopputunnukset allekkain, sisältö sisennettynä kontekstin määrittävien prefiksien käyttö nimissä suotavaa, esim: <aside class="info-note"> <p class= "info-teksti >... </p>... </aside> suljetaan elementit aina, myös tyhjät elementit, esim: <img src= img/kuva.jpg /> aakkostetaan samaan elementtiin kohdistuvat CSS-säännöt selainmottoriprefiksit kuitenkin jätetään huomiotta, esim: 4
5 HTML5-dokumenttien rakenne o Semanttisen merkkauksen tarve erilaisten Internettiin yhteydessä olevien laitteiden kirjo kasvaa koko ajan mitä enemmän selain ymmärtää dokumentin eri osien merkityksestä, sitä tarkoituksenmukaisemmin renderöinti osataan tehdä semanttinen merkkaus tärkeää saavutettavuuden (accessibility) kannalta HTML5:ssä uusia elementtejä, jotka rakenteen määrittelyn lisäksi kuvaavat dokumentin osan semanttista sisältöä: <address> <article> <aside> <footer> <h1>..<h6> <header> <section> <nav> 5
6 Onko dokumentin osalla semanttinen sisältö o ON Käytä rakenteen määrittelyyn uusia HTML5-elementtejä: o EI OLE Käytä sisällön ryhmittelyelementtiä article, main, header, section, aside, nav, footer div ja tietysti entiseen tapaan vanhoja tuttuja lokhoelementtejä: blockquote, br, div, dl, dd, dt, figcaption, figure, hr, li, ol, p, pre, ul 6
7 Vastaavasti tekstitasolla ( rivitasolla, inline) o Sisäelementit (tekstitason elementit): a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo sisältävät HTML5:ssä semanttisen merkityksen o ei ennalta määriteltyä semanttista merkitystä käytä: span -elementtiä o milloin tähän tarvetta? o esimerkiksi <p> Lempiruokani on <span id = lempiruoka > curry </span> ja sen kanssa juon yleensä <span id = ruokajuoma > maitoa</span> </p> silloin kun tekstinosaan halutaan päästä kiinni CSS-säännöllä tai JavaScriptillä 7
8 Interaktiiviset elementit o yleiskäyttöinen elementti, jolla käyttäjä voi syöttää tietoa selaimelle, esim: <input type= text > o attribuutin type arvo määrittää millainen syöteelementti on kyseessä, syötetäänkö esimerkiksi merkkijono salasana käytettävä merkkijono ilmaistaanko joitain valintoja painikkeen painalluksella, radiopainikkeella, valintalistalla, pudotuslistalla tai monivalintalistalla tekstiä useamman rivin kentässä,... oheinen esimerkki löytyy esimerkkikansiosta: 8
9 Interaktiiviset elementit (2) o Lomakkeet koettiin perinteisessä HTML:ssä hankaliksi o HTML5:ssä tämä on pyritty ottamaan huomioon sisältää huomattavan määrän uusia elementtejä uusia attribuutteja lomakkeen käsittelyä varten o Input-elementin uusia HTML5-tyyppejä (type-attribuutin arvoja): month, week, time, date, datetime, datetime-local, color, url, , tel, number, range, search <input type = date > <input type = color > 9
10 Interaktiiviset elementit (3) o Selaimet eivät vielä tue kattavasti uusia piirteitä HTML-tulkit jättävät tunnistamattomat elementit tai attribuutit käsittelemättä uudet ominaisuudet jäävät vain huomiotta tulevat käyttöön sitä mukaan kun uudet selainversiot niitä tulkitsevat 10
11 Wufoo interaktiivisten elementtien testaustyökalu o Wufoo ( voit tarkistaa miten eri selaimet tukevat HTML5-lomakkeen uusia inputelementin type-attribuutin arvoja sivustolla voi testata myös muiden uusien HTML5-piirteiden toimintaa (uusia input-elementtien attribuutteja ja kokonaan uusia elementtejä) o Sivustolla helppo kokeilla livenä uusien piirteiden toimintaa
12 HTML-dokumentti o DOM (document object model) dokumentti (document) koostuu solmujen (nodes) hierarkiasta: elementtisolmut ja tekstisolmut <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>html-sivu</title> </head> html head body <body> <h1> Elementtejä ja attribuutteja </h1> <p> Tällä sivulla on otsikko ja kaksi kappaletta (tämä on kappaleista ensimmäinen). </p> <p> Tämä on <em>toinen</em> kappale ja tässä on kuva <a href=" <img src = "img/01-tampere.jpg" alt="tampereen Hämeensilta"> </p> </body> </html> meta title #text h1 #text p #text #text em p #text #text a #text br img 12
13 Äiti ja lapsisolmut (parent and child nodes) #text em p #text a br img o DOM (Document object model) kuvaa sivun HTML-dokumentin rakenteen solmujen hierarkisena rakenteena tärkeä ymmärtää kun halutaan päästä muokkaamaan yksittäisen elementin attribuutteja #text #text o p-solmulla on kuusi lasta, br-solmulla on viisi sisarta o #text-solmu vasemmalla on p-solmun ensimmäinen lapsi (firstchild) o em- solmulla on yksi lapsi (#text-solmu) o a-solmu on oikeanpuolimmaisen #text-solmun äiti 13
14 CSS-kertausta o CSS-tyylitiedostojen avulla määritellään miten sivu näytetään käyttäjälle o Tyylisääntö (style rule) koostuu valitsimesta (selector) ja säännön esittelystä (declaration) valitsin (selector) Valitsin { css-ominaisuus-1: arvo1; css-ominaisuus-2: arvo2; säännön esittely (declaration) 14
15 CSS tyyliohjekieli: tyylisäännön syntaksi Deklaraatio (aaltosulkujen välissä) sisältää ominaisuus-arvo pareja, jotkä määräävät tyylin valitsimen määrittämille elementeille o esimerkki: ykköstason otsikoille tummansininen tausta ja tekstin väriksi valkoinen ominaisuus (property) h1 { background-color: DarkBlue; color: white; arvo(value) o sama sääntö kohdistetaan usemmalle elementille: o Tyyliohjeet voi liittää 1) elementin sisään style-attribuuttiin 2) style-elementtiin otsikko-osaan head-elementin sisään (lapseksi) 3) erilliseen css-tyylitiedostoon h1, h2 { margin: 0; padding: 0; 15
16 Tapa 1: Tyyliohjeen liittäminen elementtiin o Suoraan elementtiin style-attribuuttia käyttäen (tällöin valitsin jää pois, koska kohde-elementtiä ei tarvitse määritellä) <h2 style="color:green; margin-left:20px > Tämä on joku otsikko </h2> o Toimii, mutta mikä tekee tästä tavasta huonon? 16
17 Tapa2: Tyyliohjeen liittäminen otsikko-osaan o suoraan HTML-dokumentin otsikko-osaan <style> elementtiä käyttäen o kätevä nopeissa pienissä kokeiluissa <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>sivun otsikko</title> <style type="text/css"> body { background-color:maroon; margin-left:20px; p { color:white; </style>... 17
18 Tapa 3: Erillinen tiedosto, suositeltavin tapa o Erillinen *.css tiedosto, joka liitetään HTML-dokumenttiin otsikkoosassa <link>-elementin avulla. o Usein järkevää kirjoittaa useampia tyylitiedostoja uudelleenkäyttö dokumenttiin liitetään vain kulloinkin tarpeelliset tyylitiedostot <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>sivun otsikko</title> <link rel="stylesheet" type="text/css" href="polku/perustyylit.css" /> <link rel="stylesheet" type="text/css" href="polku/navigointi.css" /> <link rel="stylesheet" type="text/css" href="polku/erityiset-tyylit.css" />... o Tavat 1-3 eivät sulje toisiaan pois yhteentörmäystilanteessa elementtiin kirjoitettu sääntö kumoaa otsikko-osan säännön, joka edelleen kumoaa mahdollisen tyylitiedostossa annetun säännön 18
19 Valitsimet (selektorit, selectors): Yleisimmät o elementti-, luokka-, id- ja *-valitsin: elementtivalitsin (type selector) kohdistuu kaikkiin kappale-elementteihin luokkavalitsin (class selector) kohdistuu kaikkiin elementteihin, joiden class-attribuutilla on annettu arvo nämä voidaan yhdistää (p.intro) id-valitsin kohdistuu kaikkiin elementteihin, joiden id-attribuutilla on annettu arvo p { background-color: yellow;.intro { background-color: yellow; #firstname { background-color: yellow; * universaalivalitsin kohdistuu kaikkiin elementteihin * { background-color: yellow; HARJOITTELE 19
20 Valitsimet 2 Attribuuttivalitsimet o Valitaan elementtejä niille määriteltyjen attribuuttien ja attribuuteille annettujen arvojen perusteella Valitsin [attribuutti] [attribuutti="arvo"] [attribuutti^="arvo"] [attribuutti$="arvo"] [attribuutti*="arvo"] [attribuutti ="arvo"] [attribuutti~="arvo"] [attr1][attr2] Kohdistuu kaikkiin elementteihin, joilla ko. attribuutti, esim: kaikkiin, joilla ko. attribuutilla on ko. arvo a[target] {background-color: yellow kaikkiin, joilla ko. attribuutti alkaa on ko. arvolla (prefixed with arvo > kaikkiin, joilla ko. attribuutti loppuu ko. arvoon (suffixed with arvo ) kaikkiin, joilla arvo sisältyy ko. attribuutin arvoon kaikkiin, joilla ko. attribuutin arvo alkaa arvo- (tai on arvo ) kaikkiin, joilla ko. attribuutilla lista arvoja, joista yksi on arvo kaikkiin elementteihin, joilla kaikki luetellut attribuutit 20
21 Valitsimet 3 Pseudoluokkavalitsimet o Pseudoluokkavalitsin kirjoitetaan elementin nimen perään kaksoispisteellä erotettuna etsintä ei nimen, attribuuttien eikä attribuuttien sisältöjen perusteella, vaan jonkun muun elementin ominaisuuden perusteella esimerkiksi käyttöliittymäelementeille hakua elementin tilan perusteella pseudoluokka ts. kyseistä luokkaa ei varsinaisesti ole määriteltynä :active :checked :disabled :empty :enabled :first :first-child :first-of-type :focus :hover :in-range :invalid :lang :last-child :last-of-type :link :not() :nth-child :nth-last-child :nth-last-of-type :nth-of-type :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :root :target :valid :visited 21
22 Valitsimet (4): Pseudoelementtivalitsin o Pseudoelementtivalitsin liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna pseudoluokkavalitsinten avulla etsitään olemassa olevia elementtejä, kun taas voidaan "luoda" pseudoelementtejä, ts. vastaavaa elementtiä ei varsinaisesti ole olemassa ::after ::before ::first-letter ::first-line 22
23 Valitsimet 5 Kombinaattorivalisimet (Combinators) o Kombinaattorivalitsimet käyttävät elementtien etsinnässä hyväkseen dokumenttipuun rakennetta div p { background-color: yellow; e1 e2 jälkeläisvalitsin (descendant combinator) valitsee elementit e2 joilla e1 äitinä tai esiäitinä div > p { e1 > e2 background-color: yellow; lapsivalitsin (child combinator) valitsee elementit e2, joilla e1 äitinä e1 + e2 div + p { seuraava sisar (adjagent sibling) background-color: yellow; valitsee elementin e2, joille e1 välittömästi edellinen sisar p ~ ul { e1 ~e2 background: #ff0000; nuorempi sisar (child combinator) valitsee elementit e2, joilla e1 vanhempana sisarena 23
24 Valitsimet 6 Esimerkkejä o Esimerkiksi lapsen valinta: valitsee vain ne p-elementit, joka ovat #tunnus-elementin lapsia P-elementit, jotka eivät ole #tunnus-elementin lapsia ei muutu punaiseksi o Vertaa mikä eroaa edellisestä? vaikuttaa kaikkiin #tunnus-elementin lapsiin (ts. sen sisällä oleviin kappaleisiin) o Entä tässä? minkä elementin teksti muuttuu punaiseksi? vain sen p elementin, joka on #tunnus-elementin sisällä ja äitinsä ensimmäinen lapsi o Entä tämä? #tunnus > p { color:red; #tunnus p { color:red; #tunnus p:first-child {color:red; #tunnus~p {color:red; valitsee ne p-elementit, jotka ovat #tunnus-elementin nuorempia sisaruksia 24
25 Valitsimet 7 Esimerkkejä o o o o #tunnus > p { color: Red; valitsee vain ne p-elementit, joka ovat #tunnus-elementin lapsia p-elementit, jotka eivät ole #tunnus-elementin lapsia ei muutu punaiseksi #tunnus p { color: Red; mikä eroaa edellisestä? vaikuttaa kaikkiin #tunnus-elementin lapsiin (ts. sen sisällä oleviin kappaleisiin) #tunnus p:first-child {color: Red; minkä elementin teksti muuttuu punaiseksi? vain sen p elementin, joka on #tunnus-elementin sisällä ja äitinsä ensimmäinen lapsi #tunnus~p {color: Red; valitsee ne p-elementit, jotka ovat #tunnus-elementin nuorempia sisaruksia 25
26 Sääntöjen kohdistaminen (yhteentörmäykset) o Yhteen elementtiin kohdistuu usein monta tyylisääntöä yhdessä tyylitiedostossa saattaa olla useita samalle elementille sääntöjä saatetaan tuoda useasta lähteestä sääntöjä periytyy elementille automaattisesti (äidiltä) o Minkä mukaan elementin ulkoasu määräytyy? o Kolme pääperiaatetta: periytyminen (inheritance) sijainti (location), ja tarkkuus (specificity) Myöhemmin esitelty syrjäyttää ( ylikirjoittaa ) aiemman, jos tarkkuus on sama Painoarvot tarkemmasta yleisempään: (1) sääntö elementin sisällä (2) id-valitsin (3) luokka-, pseudoluokka- ja attribuuttivalitsimet (4) elementti- ja pseudoelementtivalitsimet 26
27 Esimerkki o div[class] {color: red; valitsee kaikki ne div-elementit, joilla on ominaisuus class o div[class= "esim"] { color: blue; Valitsee kaikki ne div-elementit, jotka kuuluvat luokkaan esim o Entä jos nämä säännöt ovat molemmat voimassa? div-elementit joilla on luokka-attribuutti, mutta se ei ole esim punainen vai sininen? säännöillä sama tarkkuus (attribuuttivalitsimia) riippuu siitä kumpi em. säännöistä on esitelty myöhemmin 27
28 CSS edistyneempiä piirteitä
29 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;
30 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;
31 Elementtien sijoittelusta: CSS-ominaisuus display o Määrittää miten elementti sijoittuu suhteessa sitä edeltäviin ja sitä seuraaviin elementteihin 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 o display: none elementti muutetaan näkymättömäksi 31
32 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> 32
33 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> 33
34 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; 34
35 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; 35
36 Asemointi: float vs. display o Elementti asemoidaan sivulle elementtivirrasta sen mukaan onko se lohko- vai sisäelementti o Elementin oletusasemointia voidaan muuttaa display-ominaisuuden arvoa muuttamalla (kuten edellä nähty) o Myös muita tapoja muuttaa oletusasemointia vanha tapa asemoinnin toteuttamiseksi oli kellutus (float) elementin kellutus vetää sen pois elementtivirrasta ja sen voi asemoida joko vasemmalle tai oikealle (left, right) div { float: left; muut elementit asemoituvat muuten normaalisti, mutta väistävät kellutetun elementin kellutettua elementtiä seuraava elementti asemoituu joskus ei-toivotusti kellutetun elementin kanssa limittäin sen estämiseksi voi käyttää clear-sääntöä 36
37 Modernimpi tapa: inline-block o Edellisen kaltaisen asemoinnin voi tehdä myös displayominaisuuden avulla.box { display: inline-block; o Elementille voi antaa leveyden ja korkeuden ja määritellä se inlineblock elementiksi o Ei tarvetta käyttää clear-ominaisuutta, riittää kun asettaa elementille display-arvoksi block.on-its-own { display: block; 37
38 Yhteenvetona display-ominaisuuden käytöstä 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 38
39 position: static / relative / absolute / fixed div { position: static relative avsolute fixed; o position: static oletusarvo elementti asemoituu elementtivirrassa display-ominaisuuden arvon mukaisesti) o position: relative elementtiä siirretään suhteessa oletussijaintiinsa o position:absolute sijoittaa elementin suhteessa äitielementtinsä sijaintiin o position:fixed sijoittaa elementin suhteessa selainikkunaan 39
40 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; 40
41 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) 41
42 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; 42
43 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 hyvä tutoriaali 43
44 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 elementtien korkeuden säätelyssä Erityisesti elementtien 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 44
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,
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
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#
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 -
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
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
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 -
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
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
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
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
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
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ö,
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
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
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
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
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
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
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ä:
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.
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
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
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
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,
Aulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista,
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
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
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
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.
Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
Lisä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
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ää
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.
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ö
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ää
XHTML aloitus. Sisällys
XHTML aloitus XHTML-dokumentin rakenne, metatieto, kommentit, tekstit Mirja Jaakkola Sisällys 3. Taustaa 4. Selain palvelin 5. Elementin rakenne 6. Attribuutti 7. XHTML-dokumentin rakenne 8. XHTML:n DOCTYPE-määrittely
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
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ää
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
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
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
2. PEHMEÄ XHTML XRAJAHTML
Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &
1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
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"
KÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
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
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...
Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome
Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn
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
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
SeaMonkey pikaopas - 1
SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston
JWT 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
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
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)
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
Aulikki 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
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
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?
ejuttu 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
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
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
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
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?
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
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
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
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
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...
Listat eli luettelot. Järjestämätön lista (unordered list)
Listat eli luettelot listaelementit ovat lohkoelementtejä: lista ja listan alkiot alkavat uudelta riviltä listan jälkeen tuleva elementti alkaa uudelta riviltä listan alkuun ja loppuun selain jättää tyhjää
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
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
Google-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
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:
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
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ö)
Kyläsivujen InfoWeb-ohje
Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
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
Mitä direktiivi käytännössä velvoittaa?
Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.
XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.
XML prosessointi Miten XML dokumentteja luetaan ja kirjoitetaan XML prosessori lukee ja välittää XML dokumentin sovellukselle. Se sisältää entieettikäsittelijän (mahdollisesti) XML jäsentimen Sovellus
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
MOODLE-OHJE: Linkin lisääminen tehtävänannon yhteyteen. Web-linkin lisääminen
Web-linkin lisääminen Kirjauduttuasi sisään SAMK Moodleen, mene omalle opintojaksollesi ja siirry muokkaustilaan. Muokkaustila päälle painike löytyy opintojakson etusivulta yläoikealta. Kun muokkaustila
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
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
Muuttujien määrittely
Tarja Heikkilä Muuttujien määrittely Määrittele muuttujat SPSS-ohjelmaan lomakkeen kysymyksistä. Harjoitusta varten lomakkeeseen on muokattu kysymyksiä kahdesta opiskelijoiden tekemästä Joupiskan rinneravintolaa
UpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/26/2013. Otsikko osan elementit: <base> <link> <script> <style> <title> <meta>
26.3.2013 Aulikki Hyrskykari sisällön ryhmittelyä lohkotasolla Tekstitason semanttisia elementtejä Linkit Taulukot Otsikko osan elementit: Dokumentin runko:
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
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ä
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
1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut
1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...
HTML editorin käyttö - 1
HTML editorin käyttö KompoZer sivustoeditorin pikaopas (hae editori osoitteesta: http://kompozer.net/) KompoZer editori Kompozer on sivustoeditori, jolla voit koostaa sivustoasi (useamman sivun linkitetty
XML / DTD / FOP -opas Internal
XML / DTD / FOP -opas Internal Reviewed: - Status: pending approval Approved by: - Author: Sakari Lampinen Revision: 1.0 Date: 15.10.2000 1 Termit DTD (data type definition) on määrittely kielelle, niinkuin
1. 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).
Asiointipalvelun ohje
Asiointipalvelun ohje Yleistä 1. Kirjautuminen 2. Yhteystiedot 3. Vastaustavan valinta 1. Yleistä 2. Palkkatietojen lataaminen tiedostosta 4. Lomake 1. Yleistä 2. Linkit ja vastaajan tiedot 3. Lomakekäsittely
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ä
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