Aulikki Hyrskykari Antti Sand

Koko: px
Aloita esitys sivulta:

Download "Aulikki Hyrskykari Antti Sand"

Transkriptio

1 Aulikki Hyrskykari Antti Sand

2 HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien lukittelu ja sisältömallit

3 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>ensimmäinen kkeilu</title> </head> <bdy> <h1>www-sivun luminen</h1> <p> Harjitellaan tällä sivulla ensin, mitkä vat HTML-dkumenttiin vaadittavat sat minimissään. </p> <p> Html-dkumentti sisältää aina head- ja bdy-elementit, edellisessä kuvataan dkumenttiin liittyviä yleisempiä asiita ja jälkimmäiseen kirjitetaan sivun varsinainen sisältö. Tämän dkumentin head-elementtissä n määritelty dkumentin tallennuksessa käytettävä merkistökdaus (meta charset...) ja dkumentin nimi (title). Bdy-elementissä n annettu yksi ensimmäisen tasn tsikk (h1) ja kaksi kappaletta (p). </p> </bdy> </html> Selain esittää dkumentin ymmärrettävässä ja havainnllisessa mudssa: HTML5-määrittely määrittelee kielen syntaksin + aiempaa tarkemmin miten selainten tulee esittää erilaiset kielen elementit käyttäjälle () Selainten kehitystyökalut sivun kdin tutkimisessa

4 HTML:ää alettiin sveltaa suunniteltua mnimutisempaan käyttöön Uudet HTML-määrittelyt eivät pysyneet takaamaan dkumenttien yksiselitteistä jäsentämistä ja tulkintaa eri selainvalmistajille alki kehittyä mat tulkintansa HTML-kielestä Sivustjen kehittäjät jutuivat jk käyttämään vain niitä HTML-elementtejä, jtka testasivat timiviksi kaikissa selaimissa, määrittämään, että sivust timii vain tiety(i)llä selaimilla tai kirjittamaan sivuststaan useampia versiita eri selaimille. W3C:ssä nähtiin tarpeelliseksi kehittää HTML:lle paremmin verkksvelluksiin spiva krvaaja syntyi XML (Extensible Markup Lanaguage) meta-kieli, jnka avulla vidaan määritellä merkkauskieliä HTML ei llut uuden XML-kielen mukainen ei täyttänyt yksinkertaistettuja rakenteellisia vaatimuksia tarvittiin uusi versi HTML:stä sai nimekseen XHTML

5 XHTML 1.0 n lähestulkn identtinen HTML 4.1 -versin kanssa XHTML vain tiukemmin ja puhtaammin kirjitettua HTML:ää XHTML dkumentit vat valideja HTML-dkumentteja (ei päde välttämättä tiseen suuntaan) Tärkeimmät XHTML:n ja HTML:n väliset ert 1) Elementtien päättäminen (prperly clsed elements) - HTML-jäsentäjät tekevät näissä tilanteissa letuksia - Hum! Myös tyhjät elementit tulee päättää esim. <br /> 2) Elementtihierarkian eheys (prperly nested elements) - XHTML elmentit tulee lla hierarkisesti sisennettyinä - ts. viimeksi avattu elementti tulee sulkea ennen kuin sitä edeltävä elementti suljetaan 3) HTML alku- ja lpputunnisteet ja attribuutit pienin kirjaimin (lwercase tags and attributes) - elementtien alku- ja lpputunnisteet (tags) kuten myös attribuutit tulee kirjittaa pienin kirjaimin - ts. XHTML:ssä <HEAD> n väärin, ja <head> ikein. 4) Attribuutien tarkempi esitys (quted attribute values) - HTML sallii blean-tyyppisille attribuuteille "arvttmat attribuutit esimerkiksi sallitaan pelkkä blean-attribuutti checked ilman että sille annetaan arva - XHTML:ssä kaikilla atribuuteilla n ltava arv ja sen tulee lla lainausmerkeissä ts. XHTMLssä edellinen lisi väärin, sen sijaan tulisi merkitä: checked="checked" (ps. js arvn sisältyy lainausmerkki, arv suljetaan heittmerkkeihin, esim. name='jussi "Juice" Leskinen')

6 : HTML HTML 2.0 Tim Berners-Lee julkaisi ensimmäisen suunnitelman Wrld Wide Webin tteuttamiseksi ensimmäisten viiden vuden aikana HTML:n kehityksestä livat pääasiallisessa vastuussa CERN ja IETF. HTML:stä julkaistiin useita krjailtuja ja tarkistettuja versiita : HTML HTML vastuu HTML-kielen ylläpitämisestä ja kehittämisestä siirtyi W3C:lle W3C kehittää ja julkaisee www-tekniikihin liittyviä standardeja (recmmendatins) : XHTML, DOM Level 1-3 XHTML-versin julkaisemisen jälkeen W3C päätti lpettaa HTML:n kehityksen alitti XML-phjaisen XHTML kielen kehittämisen: HTML4 tteutettiin XHTML:llä vunna 2000 (XHTML1.0) W3C ryhtyi kehittämään uutta HTML:n ja XHTML1.0 kanssa yhteen spimatnta XHTML2.0-kieltä. sa selaintimittajista alki kehittää HTML:ään phjautuvia tekniikita (DOM Level 1, DOM Level 2 Cre ja DOM Level 2 HTML) tämä kehitystyö hiipui vähitellen : XFrms 1.0, WHATWG W3C julkaisi 2003 XML-phjaisen lmakkeiden kuvailukielen, XFrmsin kehitysprjekteissa tutettiin lähinnä uusia www-tekniikita (kuten esim. RSS, Atm) eivät krvanneet HTML:ää kiinnstus HTML:n kehittämiseen heräsi jälleen: Mzilla ja Opera tekivät 2004 W3C :lle yhteistyöehdtuksen ehdtus trjuttiin (W3C strategia li kehittää uutta XHTML versita) Mzilla, Opera ja Apple perustivat WHATWG-yhteisön (Web Hypertext Applicatin Technlgy Wrking Grup) WHATWG perusperiaatteet: uuden merkkauskielen (1) tulee lla taaksepäin yhteenspiva HTML:n, XHTML:n ja DOM 2 Level -tekniikiden kanssa, (2) tteutusten ja spesifikaatiiden tulee vastata tisiaan (vaikka se tarkittaisi spesifikaatin muuttamista) ja (3) spesifikaatiiden tulee lla niin yksityiskhtaiset että sillä vidaan taata selainten yhteen timivuus : HTML5, DOM W3C liittyi WHATWG-yhteisöön kehittämään HTML5-kieltä, 2007 perusti siihen tarkitukseen työryhmän XHTML 2.0 kehitystyö lpetettiin julukuussa 2012 julkaisema HTML5 Candidate Recmmendatin selainten uudet versit tteuttavat varsin hyvin kielen uudetkin piirteet takuu taaksepäin yhteenspivuudesta tekee HTML5:n käyttämisestä hukuttelevaa ja turvallista DOM4 kehityksen alla

7 HTML-tulkit tunnistavat dkumentissa määritellyt elementit jäsentävät dkumentin DOM-puuksi (DOM = Dcument Object Mdel). DOM-puu slmujen hierarkia juurislmu <DOCTYPE html> slmuhierarkia: äiti / lapsi -suhteet heisessa (yksinkertaistetussa) esimerkissä - elementin <h1> äiti n <bdy> - elementillä <head> n lapsi <title> - elementillä <h1> n kaksi <p>-sisarusta. leellista ymmärtää varsinkin siinä vaiheessa, kun lähdetään tekemään dynaamisia www-sivuja auttaa kuitenkin myös staattisten HTML-sivujen rakentamista, määritettäessä wwwsivun ulkasua CSS-sääntöjä käyttäen (esim. minaisuuksien perinnän ymmärtämisessä)

8 CSS (Cascading Style Sheet) kieli, jnka avulla määritellään www-sivun ulkasu selaimilla letustyylit elementtien näyttämiseen www-sivulla näitä letustyylejä vi muuttaa milla CSS-säännöillä CSS-säännöt näyttävät tältä: h1 { fnt-family: helvetica, arial runded, sans-serif; clr: red; } p { backgrund-clr: lightgreen; fnt-size: large; } tsikssa käytetyn kirjasintyyppi muutetaan punaiseksi, päätteettömäksi San Serif fntiksi kappaleiden tekstin ismmaksi ja kappaleiden taustan vaalean vihreäksi

9 <!DOCTYPE HTML> <html lang="fi"> <! tsikk-sa --> <head> <meta charset = "UTF-8" /> <title>html:n ja CSS:n yhteispeli</title> </head> <! runk-sa --> <bdy> <nav> <!-- lista, tehdään tästä tyylien avulla menu > <ul class="navipalkki"> <li><a href="index.html">etusivu</a></li> <li><a href="sivu2.html">tinen sivu</a></li> <li><a href="sivu 3.html">Klmas sivu</a></li> <li><a href="yhteystiedt.html">yhteystiedt</a></li> </ul> </nav> <!-- Sivun varsinainen sisältö > <h1>html+css kkeilu</h1> <p> Tämä n ensimmäinen kkeiluni siitä miten HTML ja CSS timivat yhdessä. Aluksi kirjitetaan HTML-dkumenttiin vain sivun sisältö ja sen rakenne. Määritellään ulkmutn liittyvät seikat sitten erikseen CSS-säännöillä. </p> <img src="img/w3c.png alt= W3C lg /> <h2>kuvat www-sivulla</h2> <p> Otetaan tähän mukaan yksi kuvakin, jtta nähdään saman tien, miten kuvien liittäminen sivulle tapahtuu. </p> <h2>linkit www-sivulla</h2> <p> Navigintisassa n linkkejäkin, vaikka ne eivät nyt jhda mihinkään kun nita vastaavia sivuja ei le lutu. </p> <!-- On hyvien tapjen mukaista liittää mukaan allekirjitus ja päiväys > <fter> Aulikki Hyrskykari, lutu (viimeksi mukattu ) </fter> </bdy> </html>

10 kmmentit <! - ei saa sisältää kahta tavuviivaa peräkkäin --> HTML5-dkumenttityyppi: <!DOCTYPE html> tsikk-sa / runk-sa lista <ul> -elementin avulla, jlle määritelty lukka-attribuutti: class= navipalkki linkin määrittely <a>-elementin avulla <nav>-elementti (HTML5) <fter>-elementti (HTML5) www-sivuna, selaimen letusmutiluilla: miten saadaan dkumentti näyttämään tältä:

11 "UTF-8"; /* LISÄTÄÄN TEKSTILLE JA SIVUN TAUSTALLE VÄRIT */ bdy { clr: #ba55d3; backgrund-clr: #ffefd5; CSS-säännöt sisältävä tiedst kirjitetaan maksi.css-tyyppiseksi tekstitiedstkseen (02-01-b.css) html-tiedstn alussa <link> -elementti määrittää sivuun liitettävän css-tiedstn ks. www-sivuna:

12 kuvan paikka elementtivirrassa (dcument flw) n ensimmäisen kappaleen jälkeen ja ennen tsikka Kuvat www-sivulla. kska kuva n niden mlempien elementtien ulkpulella, se varaa www-sivulta man rivinsä. Js se lisi kappaleen tai tsikn sisällä, sitä käsiteltäisiin kuten yhtä merkkiä elementtivirrassa, sillin se kuitenkin suurentaisi tekstin rivivälin man krkeutensa mukaiseksi. kelluttamalla elementtejä vi siirtää hrisntaalisessa suunnassa - asetetaan "kellumaan vasemmalle /* MÄÄRITELLÄÄN, KUVA "KELLUVAKSI" VASEMPAAN REUNAAN */ img { } flat:left; margin: 1em; kuva siirtyy dkumentin vasempaan reunaan ja sen lisäksi muu dkumentin sisältö kuvan jälkeen kiertää kuvan ympäri. tässä tapauksessa tämä tekstin kiertyminen kuvan ympärille n säännön aina vaikutus, kska kuva li j valmiiksi sivun vasemmassa reunassa ks. www-sivuna:

13 /* RUNGOSSA KÄYTETÄÄN SERIF ja OTSKOISSA SAN-SERIF -KIRJASINTA */ bdy { fnt-family: Gergia,"Times New Rman", Times, serif; } h1, h2 { } fnt-family: Geneva, Helvetica, Arial, SunSans-Regular, sans-serif; määrittää, että dkumentissa käytettävä kirjasinperhe n Gergia, paitsi että tsikissa käytetään Geneva-kirjasinperhettä. ks. www-sivuna:

14 /* LISTALLE ABSOLUUTTINEN SIJOITUS SIVUN VASEMPAAN REUNAAN */ ul.navipalkki { psitin: abslute; tp: 2em; left: 1em; width: 9em; } absluuttinen sijitus ttaa elementin pis elementtivirrasta ja asettaa sen määrättyyn khtaan sivulla kiinnitetään lista sivun vasempaan yläkulmaan piirtyy määrättyyn khtaan riippumatta siitä nk siinä khdassa jtain muutakin sivun sisältöä ks. www-sivuna:

15 /* SIIRRETÄÄN KAIKKIA ELEMENTTEJÄ OIKEALLE */ bdy { padding-left: 11em; fnt-family: Gergia, "Times New Rman", Times, serif;... runglle annettu sääntö jättää kaikkien elementtien vasempaan reunaan tyhjää tilaa 11 kirjasinkrkeuden verran ks. www-sivuna:

16 ul.navipalkki { list-style-type: nne; padding: 0; margin: 0;... pistetaan listan riveiltä letusbulletti navigintipalkin ympärille ei jätetä autmaattisesti tilaa ks. www-sivuna:

17 ul.navipalkki li { backgrund-clr: white; } margin: 0.5em 0; padding: 0.3em; brder-right: 1em slid #c71585; listarivin tausta valkiseksi jätetään painikkeiden ylä- ja alapulelle tilaa suurennetaan elementin varaamaa aluetta jka suunnasta piirretään elementin ikeanpuleinen reunaviiva värillisenä ja vahvennettuna näkyviin ks. www-sivuna:

18 ul.navipalkki a { fnt-family: Geneva, Helvetica, Arial, sans-serif; } text-decratin: nne; fnt-weight:bld; clr: #c71585; pistetaan alleviivaus linkeistä määritellään niiden kirjasin paremmin sivulle spivaksi ks. www-sivuna:

19 fter { fnt-family: sans-serif; fnt-size: 0.8em; brder-tp: thin dtted; padding-tp: 1em; text-align: right; } alaviitteelle päätteetön, muuta tekstiä pienempi kirjasin piirretään hut pisteviiva sen yläpulelle, ei kuitenkaan ihan kiinni piirrettyyn pisteviivaan ks. www-sivuna:

20 [attribuutti= arv ] * = yksi tai useampia attrbuutti/arv pareja esim. <p lang="en"> A paragraph in English. </p> <a href=" target="_blank">tämä n linkki</a>

21 Ktelivat HTML-elementin alittavan kulmasulun "<" ja tag-nimen tai lpputunnuksessa kulmasulun, kauttaviivan ja tag-nimen välissä ei saa lla väliöntejä, esim. < p> </ p> </p > määrittelyjä ei tunnistettaisi kappaleen aluksi tai lpuksi kaikilla elementeillä n alkutunnus ei-tyhjillä (nn-vid) elementeillä tulee aina lla lpputunnus tyhjätkin elementit n susiteltavaa päättää kauttaviivalla <br /> jskin tämä n enemmän henkilökhtainen mieltymys, kuin vaatimus

22 Alku-ja lpputunnuksen väliin jäävä sa mudstaa elementin sisällön (cntent) Elementti vi sisältää tekstiä elementtejä tai Kmmentteja Attribuutit ja niiden arvt eivät le elementin sisältöä

23 Tyhjätilamerkkien (white spaces) luhistaminen välilyöntimerkit, sarkainmerkit, rivin- sivun- ja sanvaihtmerkit Sivua renderöitäessä (kkeile) peräkkäiset white space -merkit luhistetaan yhdeksi välilyönniksi rivin lppuun suva tyhjätilamerkki tuttaa rivinvaihdn HTML-dkumenttiin kirjitetussa tekstissä ei saa lla white spaces - merkkejä lukuun ttamatta muita kntrllimerkkejä Erikismerkit vidaan aina antaa jk kdeina &merkin-utf-8-kdi-heksadesimaalina; alkaa &-merkillä ja päättyy ;- merkkiin välissä jk merkin entiteettinimi tai heksadesimaalikdi (alkaa #-merkillä), esim. < = < tai < (kulmasulku) ä = ä tai ä & =& tai & (ja-merkki) välilyönti = ks täydellinen listaus erikismerkeistä (entity) characters: tai

24 Lukujärjestelmät, jissa kantalukuna jkin muu kuin 10 binäärilulukujärjestelmä (kantaluku 2), ktaalijärjestelmä (8), heksadesimaalilukujärjestelmä (16) Heksadesimaaliluvut lukujärjestelmä, jssa kantaluku n 16 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, muunnkset B - heksadesimaaliluvusta desimaaliluvuksi: (1B1) 16 = (433) 10 - desimaaliluvusta heksadesimaaliluvuksi: jaetaan lukua kantaluvulla ja tetaan jakjäännökset talteen: (3858) 10 = (F12) 16 1x x x16 0 = /16 = 241, jää 2 241/16 = 15, jää 1 15/16 = 0, jää 15 F

25 Aiemmin HTML- elementit jaettiin lhktasn ja rivitasn (blckline ja inline) elementteihin lhktasn elementti erttuu ympäristöstään rivin vaihdin (esim. <p> elementti) rivitasn elementti merkkaa tekstiä kappaleen sisällä ( esim <strng> elementti) HTML5:ssä elementit jaetaan useampaan lukkaan Päälukat vat phrasing elementit (~rivitasn elementtejä) Flw-elementit (~lhktasn elementtejä)

26 Spesifikaati lukittelee elementit hienjakisemmin Lukat vat päällekkäisiä, ts. yksi elementti vi kuulua useampaan lukkaan ks. elementtien lukitteluluettelt HTML spesifikaatista: Mihin lukittelua tarvitaan? kullekin elementille määritelty sisältömalli (cntent-mdel) kuvaa millaista sisältöä elementti vi saada, esim. - tyhjä HTML-elementti (vid element), ei mitään, - vain tietyn määrätyn elementin (määrättyjä elementtejä), - vain phrasing-sisältöä tai väljemmin - flw-sisältöä.

27 Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa massa kntekstissaan Yhtäsuuruusmerkin mlemmin pulin saa lla välilyönti, tai se vi puuttua. Blean tyyppinen attribuutti HTML5-syntaksin mukaan ei tarvitse antaa arva pelkkä attribuutin esittäminen vastaa sillin attribuutin "true"-arva esim. <input disabled> HML5:ssä n jukk attribuutteja, jtka vidaan sittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan glbaaleiksi attribuuteiksi.

28 Kielen kaikki elementeille vidaan antaa mitä tahansa näistä attribuuteista Sen lisäksi kunkin elementin määrittelyn yhteydessä määritellään erikseen mitä muita attribuutteja elementti vi saada. Jidenkin glbaalien attribuuttien merkitys (esim. titleattribuutti) saattaa lla eri elementeille määriteltynä hiukan erilainen. Glbaalit attribuutit vat: accesskey, class, cntenteditable, cntextmenu, dir, draggable, drpzne, hidden, id, lang, spellcheck, style, tabindex, title, translate

HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari

HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari 1332014 Aulikki Hyrskykari HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit ensimmäinen kokeilu

Lisätiedot

Validaattorit o HTML 5 validaattori: o CSS validaattori: validator/validator.html.

Validaattorit 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ätiedot

JWT Hyrskykari, SIS, Tampereen yliopisto 3/19/2013

JWT Hyrskykari, SIS, Tampereen yliopisto 3/19/2013 19.3.2013 Aulikki Hyrskykari HTML dokumentin ensimmäisenä rivinä annetaan dokumenttityypin määrittely HTML5 dokumentti koostuu selementtien hierarkiasta, joista juuri elementti sisältää kaikki muut

Lisätiedot

Flash ActionScript osa 2

Flash ActionScript osa 2 Liiketalus syksy 2012 Flash ActinScript sa 2 Scripti-kieli Skriptikieli n tarkitettu skriptien eli kmentsarjjen tekemiseen. lyhyitä hjeita, siitä kuinka svelluksen tulisi timia Skripteillä autmatisidaan

Lisätiedot

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

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

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Laajuus 5 op Luennot: 12 x 2t 11.3.2014 29.4.2014 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Aulikki Hyrskykari

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

Aulikki Hyrskykari Antti Sand

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,

Lisätiedot

Harjoitustyö 2: Verkkosivujen rakenne ja ulkoasu (HTML ja CSS)

Harjoitustyö 2: Verkkosivujen rakenne ja ulkoasu (HTML ja CSS) Harjitustyö 2: Verkksivujen rakenne ja ulkasu (HTML ja CSS) Kurssin tisessa harjitustyössä tutustutaan verkksivujen rakenteen ja ulkasun määrittelemiseen HTML:n ja CSS:n avulla. Harjitustyön tarkituksena

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

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

Lisätiedot

Johdatusta selainohjelmointiin

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

Lisätiedot

Luento 4 Tekstinkäsittelyn perusperiaatteita, tyylit, sarkaimet. 29.9.2015 Aulikki Hyrskykari

Luento 4 Tekstinkäsittelyn perusperiaatteita, tyylit, sarkaimet. 29.9.2015 Aulikki Hyrskykari Luent 4 Tekstinkäsittelyn perusperiaatteita, tyylit, sarkaimet 29.9.2015 Aulikki Hyrskykari Tunnukset ja salasanat Uniikit salasanat ei pitäisi käyttää samaa salasanaa eri palveluissa js yksi palvelu murretaan,

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Digitaalisen median tekniikat. Luento 3: CSS

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

Lisätiedot

HENKKARIKLUBI. Mepco HRM uudet ominaisuudet vinkkejä eri osa-alueisiin 1 (16) 28.5.2015. Lomakkeen kansiorakenne

HENKKARIKLUBI. Mepco HRM uudet ominaisuudet vinkkejä eri osa-alueisiin 1 (16) 28.5.2015. Lomakkeen kansiorakenne 1 (16) Mepc HRM uudet minaisuudet vinkkejä eri sa-alueisiin Khta: Kuvaus: Lmakkeen kansirakenne Lmakkeen kansirakenne Lmakkeet vidaan kategrisida tiettyyn lmakekategriaan. Tämä helpttaa käyttäjiä hakemaan

Lisätiedot

Excel 2013:n käyttö kirjallisen raportin, esim. työselostuksen tekemisessä

Excel 2013:n käyttö kirjallisen raportin, esim. työselostuksen tekemisessä Excel 2013:n käyttö kirjallisen raprtin, esim. työselstuksen tekemisessä Sisällysluettel EXCEL-TAULUKKOLASKENTAOHJELMAN PERUSTEET... 2 1. PERUSASIOITA... 2 2. TEKSTIN KIRJOITTAMINEN TAULUKKOON... 3 3.

Lisätiedot

Cascading Style Sheets

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

Lisätiedot

TEEMA 3 Tekstimuotoisen tiedon käsittely

TEEMA 3 Tekstimuotoisen tiedon käsittely Luent 5 TEEMA 3 Tekstimutisen tiedn käsittely 24.9.2019 Aulikki Hyrskykari Tänään Vertaisarviinnin haaststa Harjitus 7 valinnat, tyylit, sarkaimet, taulukk Harjitus 8 autmaattiset timinnt, tuki ryhmätyölle

Lisätiedot

Geometrinen piirtäminen

Geometrinen piirtäminen Gemetrinen piirtäminen Nimet: Piirtäkää gemetrisesti nelikulmi, jnka kaikki sivut vat yhtä pitkät. Valmistautukaa selittämään muille, miksi piirtämistapa timii. Opettajalle Ehdtus tunnin rakenteesta: Alustusvaihe

Lisätiedot

Varsinais-Suomen palvelupisteaineisto

Varsinais-Suomen palvelupisteaineisto 1 Varsinais-Sumen palvelupisteaineist - hjeet käyttöön (versi 16.12.2013) Varsinais-Sumen palvelupisteaineist Ohjeet käyttöön Lyhyesti: Varsinais-Sumesta kerätään ja pidetään ajan tasalla palveluihin liittyvää

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

XML / DTD / FOP -opas Internal

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

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

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

Lisätiedot

Ulkoasun muokkaus CSS-tiedostossa

Ulkoasun muokkaus CSS-tiedostossa Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css

Lisätiedot

Ongelma 1: Mistä joihinkin tehtäviin liittyvä epädeterminismi syntyy?

Ongelma 1: Mistä joihinkin tehtäviin liittyvä epädeterminismi syntyy? Ongelma : Mistä jihinkin tehtäviin liittyvä epädeterminismi syntyy? 0-0 Lasse Lensu Ongelma : Miten vidaan pelata algritmisesti? 0-0 Lasse Lensu Ongelma : Onk mahdllista pelata ptimaalisesti? 0-0 Lasse

Lisätiedot

Maahantuojat: omavalvontasuunnitelman ja sen toteutumisen tarkastuslomakkeen käyttöohje

Maahantuojat: omavalvontasuunnitelman ja sen toteutumisen tarkastuslomakkeen käyttöohje Esittelijä Nurttila Annika Sivu/sivut 1 / 6 Maahantujat: mavalvntasuunnitelman ja sen tteutumisen tarkastuslmakkeen käyttöhje Tarkastuksen tavitteena n selvittää, nk maahantujalla mavalvntasuunnitelmassaan

Lisätiedot

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

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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

Lisätiedot

pienempää, joten vektoreiden välinen kulma voidaan aina rajoittaa välille o. Erikoisesti on

pienempää, joten vektoreiden välinen kulma voidaan aina rajoittaa välille o. Erikoisesti on 5 Pistetul ja sen svellutuksia Kun kahdella vektrilla, a ja b n hteinen alkupiste, niiden määräämät pulisurat jakavat tasn kahteen saan, kahteen kulmaan, jtka vat tistensa eksplementtikulmia, siis kulmia,

Lisätiedot

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#

Lisätiedot

Ajankohtaiskatsaus, Peltotuki 2016.1

Ajankohtaiskatsaus, Peltotuki 2016.1 Ajankhtaiskatsaus, Pelttuki 2016.1 Sftsal Oy huhtikuu 2016 Seuraa Pelttuen alkuruudun Tiedtteet-timinta ja sivustn www.sftsal.fi ajankhtaistiedtteita! Lyhyesti Muista palauttaa 5 vuden viljelysuunnitelma

Lisätiedot

Ongelma 1: Mistä joihinkin tehtäviin liittyvä epädeterminismi syntyy?

Ongelma 1: Mistä joihinkin tehtäviin liittyvä epädeterminismi syntyy? Ongelma : Mistä jihinkin tehtäviin liittyvä epädeterminismi syntyy? 0-0 Lasse Lensu Ongelma : Miten vidaan pelata algritmisesti? 0-0 Lasse Lensu Ongelma : Onk mahdllista pelata ptimaalisesti? 0-0 Lasse

Lisätiedot

Harjoitus 5 (viikko 40)

Harjoitus 5 (viikko 40) Mikäli tehtävissä n jtain epäselvää, laita sähköpstia vastuupettajalle (jrma.laurikkala@uta.fi). Muista nudattaa hyvää hjelminti tapaa muun muassa kdia kmmentimalla ja sisentämällä. Kats lisää hjeita luentmateriaalin

Lisätiedot

2. PEHMEÄ XHTML XRAJAHTML

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 &

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

H.C. Ericsson (HCE), J. Lehtinen (JL), K. Saarhelo (KTS), R. Suonsilta (RS), J. Tainio (JT), R. Valjus (RV)

H.C. Ericsson (HCE), J. Lehtinen (JL), K. Saarhelo (KTS), R. Suonsilta (RS), J. Tainio (JT), R. Valjus (RV) Sumen Viklaliitt ry. Snipe Class Internatinal Racing Assciatin Organisaati Sumen Viklaliitt ry. Kansallissihteeri Juha Lehtinen GSM +358 0500 777 299 e-mail juha.lehtinen@snipeimprt.fi Internet www.snipe.fi

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

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

Lisätiedot

Ominaisuus- ja toimintokuvaus Idea/Kehityspankki - sovelluksesta

Ominaisuus- ja toimintokuvaus Idea/Kehityspankki - sovelluksesta www.penspace.fi inf@penspace.fi 15.6.2015 1 Ominaisuus- ja timintkuvaus Idea/Kehityspankki - svelluksesta 1. Yleistä Kun jäljempänä puhutaan prjektista, tarkitetaan sillä mitä tahansa kehittämishjelmaa

Lisätiedot

Taulukkolaskenta ja analytiikka (A30A01000) Excel-harjoitus 9 1/8 Avoin yliopisto Huhtikuu 2016

Taulukkolaskenta ja analytiikka (A30A01000) Excel-harjoitus 9 1/8 Avoin yliopisto Huhtikuu 2016 Taulukklaskenta ja analytiikka (A30A01000) Excel-harjitus 9 1/8 Avin ylipist Huhtikuu 2016 Oppimistavitteet: - Krk- ja kannattavuuslaskelmia Excelillä, NPV- ja IRR-funktit - Datan siistiminen pistamalla

Lisätiedot

Tämä ruutu näkyy ainoastaan esikatselutilassa.

Tämä ruutu näkyy ainoastaan esikatselutilassa. FINLAND_Decisin_Making_March_3_4cuntry_study(1) Tämä kysely n sa neljän maan vertailututkimusta, jssa tutkitaan päätöksenteka lastensujelussa Nrjassa, Sumessa, Englannissa ja Yhdysvallissa. Samat kysymykset

Lisätiedot

MAKSETUISTA ELÄKKEISTÄ ELÄKESELVITTELYÄ VARTEN ETK:LLE ANNETTAVAN ELÄKEMENOTIEDOSTON SEKÄ PERINTÄTIEDOSTON TÄYTTÖOHJE VUODELLE 2013

MAKSETUISTA ELÄKKEISTÄ ELÄKESELVITTELYÄ VARTEN ETK:LLE ANNETTAVAN ELÄKEMENOTIEDOSTON SEKÄ PERINTÄTIEDOSTON TÄYTTÖOHJE VUODELLE 2013 1 (25) MAKSETUISTA ELÄKKEISTÄ ELÄKESELVITTELYÄ VARTEN ETK:LLE ANNETTAVAN ELÄKEMENOTIEDOSTON SEKÄ PERINTÄTIEDOSTON TÄYTTÖOHJE VUODELLE 2013 Sisällysluettel OSA I: ELÄKEMENOTIEDOSTON TÄYTTÖOHJE... 3 YLEISTÄ...

Lisätiedot

ELEMENTTIMENETELMÄN PERUSTEET SESSIO 09: Tasoristikon sauvaelementti, osa 2.

ELEMENTTIMENETELMÄN PERUSTEET SESSIO 09: Tasoristikon sauvaelementti, osa 2. 9/ ELEMENTTIMENETELMÄN PERSTEET SESSIO 9: Tasristikn sauvaelementti, sa. ES9E Svelletaan tasristikn sauvaelementin teriaa kuvan (a) kahden pisteviman kurmittamaan ristikkn, jnka elementtiverkssa (b) n

Lisätiedot

Finnish Value Pack Julkaisutiedot Vianova Systems Finland Oy Versio 18 21.4.2011

Finnish Value Pack Julkaisutiedot Vianova Systems Finland Oy Versio 18 21.4.2011 Julkaisutiedt Vianva Systems Finland Oy Versi 18 21.4.2011 2(8) Nvapint svellukset, versi 18.00 Yleiskuvaus Nvapint svellukset täydentävät kansainvälistä lkalisitua Nvapint jakeluversita vain sumalaisilla

Lisätiedot

qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm

qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm OHJEITA PUNOMO.FI:N TEEITSE-SIVUSTON JULKAISIJOILLE Tällä pääset alkuun! 4.8.2013 Pirj Sinerv qwertyuipasdfghjklzxcv Sisällys OHJEITA PUNOMO.FI:N TEEITSE-SIVUSTON JULKAISIJOILLE... 0 1. JULKAISUOIKEUDEN

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. 3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Lisätiedot

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

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

Lisätiedot

DNA OY:N LAUSUNTO KUSTANNUSSUUNTAUTUNEEN HINNAN MÄÄRITTELYYN SOVELLETTAVASTA MENETELMÄSTÄ SUOMEN TELEVISIOLÄHETYSPALVELUIDEN MARKKINALLA

DNA OY:N LAUSUNTO KUSTANNUSSUUNTAUTUNEEN HINNAN MÄÄRITTELYYN SOVELLETTAVASTA MENETELMÄSTÄ SUOMEN TELEVISIOLÄHETYSPALVELUIDEN MARKKINALLA 1 (6) Vivi 1110/230/2013 DNA OY:N LAUSUNTO KUSTANNUSSUUNTAUTUNEEN HINNAN MÄÄRITTELYYN SOVELLETTAVASTA MENETELMÄSTÄ SUOMEN TELEVISIOLÄHETYSPALVELUIDEN MARKKINALLA [Liikesalaisuudet merkitty hakasulkein]

Lisätiedot

Fy06 Koe 20.5.2014 Kuopion Lyseon lukio (KK) 1/6

Fy06 Koe 20.5.2014 Kuopion Lyseon lukio (KK) 1/6 Fy06 Ke 0.5.04 Kupin Lysen luki (KK) /6 6p/tehtävä.. Kaksi varattua palla rikkuu lankjen varassa lähellä tisiaan. Pallt vetävät tisiaan puleensa 0,66 N vimalla. Pienemmän palln varaus n kaksinkertainen

Lisätiedot

REKISTERINPITÄJÄN MUUTOKSET: Toimintamalli muutostilanteessa

REKISTERINPITÄJÄN MUUTOKSET: Toimintamalli muutostilanteessa Rekisterinpitäjän muutkset 1(7) REKISTERINPITÄJÄN MUUTOKSET: Timintamalli muutstilanteessa Ptilasasiakirjan rekisterinpitäjä: alkutilanne Tiet ptilaan hidssa syntyvien asiakirjjen rekisterinpitäjästä tallennetaan

Lisätiedot

Luento 6 Taulukkolaskennan perusteista Aulikki Hyrskykari

Luento 6 Taulukkolaskennan perusteista Aulikki Hyrskykari Luent 6 Taulukklaskennan perusteista 18.10.2016 Aulikki Hyrskykari Luent 6 Taulukklaskennasta Miksi? Perusasiita ja esimerkkejä Kaavat Miksi? Ruutupaperin ja taskulaskimen krvaaja Tehkas kein käsitellä

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

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

Lisätiedot

TEEMA 2 Taulukkodatan käsittely

TEEMA 2 Taulukkodatan käsittely Luent 3 TEEMA 2 Taulukkdatan käsittely 10.9.2019 Aulikki Hyrskykari Tänään Vertaisarviinnin haast Harjitukset 4 ja 5 Henkilökhtainen budjetti, Datan käsittelyä, Pivt Taulukklaskenta: mitä ja miksi? Slu,

Lisätiedot

Tuikki.fi ohjeistus Sisältö

Tuikki.fi ohjeistus Sisältö Tuikki.fi hjeistus Sisältö Yleistä Rekisteröinti Sisäänkirjautuminen Unhditk salasanan timint Saalispalaute rekisteröityneelle käyttäjälle Saalispalaute ilman sisäänkirjautumista Prfiili Päiväkirjani Valkuvat

Lisätiedot

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan

Lisätiedot

Ajatus kaiken taustalla

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

Lisätiedot

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Laajuus 5 op Luennot: 12 x 2t 17.3.2015 30.4.2015 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Antti Sand Taru

Lisätiedot

KITI - kilpailu anomuksesta ajoon. Ohjeistus kilpailujen anomisesta ja muokkaamisesta KITIssä.

KITI - kilpailu anomuksesta ajoon. Ohjeistus kilpailujen anomisesta ja muokkaamisesta KITIssä. KITI - kilpailu anmuksesta ajn Ohjeistus kilpailujen anmisesta ja mukkaamisesta KITIssä. Kilpailun anminen kalenteriin KITIssä Kilpailun vi ana kalenteriin KITIssä henkilö, jlla n jäsenrekisterin ylläpitäjän

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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

Lisätiedot

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

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

Lisätiedot

ValueFrame-NetBaron laskutus liittymä

ValueFrame-NetBaron laskutus liittymä ValueFrame-NetBarn laskutus liittymä Päiväys: 25.6.2015 Laatinut: Janne Fredman Tarkastanut: Versi: 1.0 ValueFrame-NetBarn laskutus liittymä Sisällysluettel 1 Liittymän yleiskuvaus... 3 1.1 NetBarn...

Lisätiedot

LÄÄKEHOITOSUUNNITELMA VARHAISKASVATUKSESSA

LÄÄKEHOITOSUUNNITELMA VARHAISKASVATUKSESSA LÄÄKEHOITOSUUNNITELMA VARHAISKASVATUKSESSA Kangasalan varhaiskasvatus tarjaa lapsen ja perheen tarvitsemat varhaiskasvatuspalvelut perheen tilanteen ja tarpeen mukaisesti; kkpäivähita, sapäivähita, perhepäivähita,

Lisätiedot

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa: XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),

Lisätiedot

OHJE ASIAKASKUTSUJÄRJESTELMÄ EVENTALEN KÄYTTÖÖN Yleisesittely

OHJE ASIAKASKUTSUJÄRJESTELMÄ EVENTALEN KÄYTTÖÖN Yleisesittely OHJE ASIAKASKUTSUJÄRJESTELMÄ EVENTALEN KÄYTTÖÖN 20.9.2017 Yleisesittely Vit lähettää asiakaskutsut asiakkaillesi sähköpstilla tai tulstaa kutsut ja lähettää ne pstitse. Kutsun paperikk n A4. Kutsu vi lla

Lisätiedot

Spectrum kokous 11-12.2.2013, Sturenkatu 2a, Helsinki

Spectrum kokous 11-12.2.2013, Sturenkatu 2a, Helsinki Spectrum kkus 11-12.2.2013, Sturenkatu 2a, Helsinki Yleiset ajatukset ja ideat Miksi maanne n valinnut kääntää tietyn san Spectrumia? Sumi Kääntää Appendix 1 - Tämä n sitä, mitä Sumen muset tarvitsevat

Lisätiedot

3. Kolmiulotteisten kohteiden esitys ja mallintaminen: jatkoa

3. Kolmiulotteisten kohteiden esitys ja mallintaminen: jatkoa . Klmiultteisten khteiden esitys ja mallintaminen: jatka Mnikulmiverkkn nähden ilmeisiä etuja vat: eksakti analyyttinen esitysmut klmiultteinen mudn mukkaaminen mahdllista vähemmän muistitilaa vaativa

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti 1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23

Lisätiedot

VIRTAPIIRILASKUT II Tarkastellaan sinimuotoista vaihtojännitettä ja vaihtovirtaa;

VIRTAPIIRILASKUT II Tarkastellaan sinimuotoista vaihtojännitettä ja vaihtovirtaa; VITAPIIIASKUT II Tarkastellaan sinimutista vaihtjännitettä ja vaihtvirtaa; u sin π ft ja i sin π ft sekä vaihtvirtapiiriä, jssa n sarjaan kytkettyinä vastus, käämi ja kndensaattri (-piiri) ulkisen vastuksen

Lisätiedot

HTML5 -elementit jatkuu

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

Lisätiedot

MoViE- sovelluksen käyttöohjeet

MoViE- sovelluksen käyttöohjeet MViE- svelluksen käyttöhjeet Yleistä tieta: MViE- palvelua vidaan käyttää mbiililaitteilla jk käyttämällä laitteessa levaa selainhjelmaa tai lataamalla laitteeseen ma MViE- svellus Svelluksen kautta vidaan

Lisätiedot

KoiraNet-jalostustietojärjestelmän asetukset ja käyttöohjeet SPK:lle

KoiraNet-jalostustietojärjestelmän asetukset ja käyttöohjeet SPK:lle 1 KiraNet-jalstustietjärjestelmän asetukset ja käyttöhjeet SPK:lle Selaimen asetusten muuttaminen rtukhtaiseksi Sumen Kennelliitn Kiranet-jalstustietjärjestelmään pääsee SKL:n internet sitteesta www.kennelliitt.fi/fi/

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

FC HONKA AKATEMIAN ARVOT

FC HONKA AKATEMIAN ARVOT FC HONKA AKATEMIAN ARVOT JOHDANTO... 3 FC HONKA AKATEMIAN ARVOT... 4 YHTEISÖLLISYYS & YKSILÖ... 5 MEIDÄN SEURA, TOIMIMME YHDESSÄ, VOITAMME YHDESSÄ... 5 YKSILÖN KEHITYS JA YKSILÖN ONNISTUMISET PARANTAVAT

Lisätiedot

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/ 1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon

Lisätiedot

RISTIKKO. Määritelmä:

RISTIKKO. Määritelmä: RISTIKKO Määritelmä: Kitkattmilla nivelillä tisiinsa yhdistettyjen sauvjen mudstamaa rakennetta santaan ristikksi. Ristikn sauvat vat rakennesia, jtka ttavat vastaan vain vet tai puristusrasituksen. Js

Lisätiedot

Sisäkorvaistutteen saaneiden lasten kuntoutuksen ja tulkkauspalvelujen tarkoituksenmukaisuus ja tulevaisuuden tarve. 2. vaiheen haastattelututkimus.

Sisäkorvaistutteen saaneiden lasten kuntoutuksen ja tulkkauspalvelujen tarkoituksenmukaisuus ja tulevaisuuden tarve. 2. vaiheen haastattelututkimus. Sisäkrvaistutteen saaneiden lasten kuntutuksen ja tulkkauspalvelujen tarkituksenmukaisuus ja tulevaisuuden tarve. 2. vaiheen haastattelututkimus. ---------------------------------------------------------------------

Lisätiedot

KAKSIKÄYTTÖTUOTTEIDEN VIENTIVALVONTA ASIOINTIPALVELUN AVULLA

KAKSIKÄYTTÖTUOTTEIDEN VIENTIVALVONTA ASIOINTIPALVELUN AVULLA ULKOASIAINMINISTERIÖ 10.1.2014 1(5) OHJE KAKSIKÄYTTÖTUOTTEIDEN VIENTIVALVONTA ASIOINTIPALVELUN AVULLA Kaksikäyttötutteiden vientivalvntaan liittyvät ilmitukset ja hakemukset jätetään sähköisiä lmakkeita

Lisätiedot

KTJkii-aineistoluovutuksen tietosisältö

KTJkii-aineistoluovutuksen tietosisältö KTJkii-aineistluvutuksen tietsisältö 2008-02-12 Versi 1.05 2009-02-10 Versi 1.06 2010-02-16 Versi 1.07 2011-02-14 Versi 1.08 2012-02-13 Versi 1.09 2013-02-25 Versi 1.10 2014-02-10 Versi 1.11 Yleistä Ominaisuustietjen

Lisätiedot

Ohjeita linja- ja aikatuomareille

Ohjeita linja- ja aikatuomareille Päivitetty Ohjeita linja- ja aikatumareille Yleistä Linja- ja aikatumarit timivat SM-kilpailuissa, FinGym-kilpailuissa, katsastuskilpailuissa ja kansainvälisissä kilpailuissa. Mikäli vimistelija n kkeiluajan

Lisätiedot

Luento 2 Moodle ja sähköposti, O365. 15.9.2015 Aulikki Hyrskykari

Luento 2 Moodle ja sähköposti, O365. 15.9.2015 Aulikki Hyrskykari Luent 2 Mdle ja sähköpsti, O365 15.9.2015 Aulikki Hyrskykari Mdle ja sähköpsti, O365 Yleistä kurssiasiaa vertaisarviinneista ja harjituksista Viestittäminen kurssiin liittyvissä asiissa Mdle / vastuupettajat

Lisätiedot

SÄHKÖISEN TULOVEROILMOITUKSEN SÄHKÖISET LIITTEET - OHJELMISTOKEHITTÄJÄT

SÄHKÖISEN TULOVEROILMOITUKSEN SÄHKÖISET LIITTEET - OHJELMISTOKEHITTÄJÄT SÄHKÖISEN TULOVEROILMOITUKSEN SÄHKÖISET LIITTEET - OHJELMISTOKEHITTÄJÄT 11.12.2017 SISÄLTÖ 1 YLEISTÄ DOKUMENTISTA... 3 2 LIITTEIDEN LÄHETTÄMINEN SÄHKÖISESTI... 3 3 LIITETIEDOSTOJEN NIMEÄMINEN... 3 3.1

Lisätiedot

Akaa: Onnistunut työ tekee hyvää -hankkeen työpaja

Akaa: Onnistunut työ tekee hyvää -hankkeen työpaja 1 Akaa: Onnistunut työ tekee hyvää -hankkeen työpaja muisti aika 23.11.2015 kl 13-16: kahvit nin kl 14.15-14.30 paikka valtuustsali sallistujat lapsiperhepalveluissa timivat Aiemmin n lähetetty (ja löytyvät

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

Metropolia Ammattikorkeakoulu Sonja Merisalo 15.10.2012

Metropolia Ammattikorkeakoulu Sonja Merisalo 15.10.2012 3. Tekstinkäsittely Sisällysluettel 3.1 Ylimääräisten rivinvaihtjen pistaminen... 2 3.2 Päätsikk, alatsikk... 2 3.3 Sarkaimet... 2 3.4 Riippuva sisennys... 2 3.5 Rivitys, kappalevaiht, sivunvaiht... 3

Lisätiedot

Aktia-konsernin palkka- ja palkkioselvitys

Aktia-konsernin palkka- ja palkkioselvitys Aktia-knsernin palkka- ja palkkiselvitys Tämä selvitys nudattaa hallinnintikdin (1.10.2010) susitusta 47, jnka mukaan Aktian tulee selvittää Aktia Pankki Oyj:n (Aktia) timitusjhtajalle, muulle knserninjhdlle,

Lisätiedot

Tilannekatsaus 17.11.2015 Eero Ehanti

Tilannekatsaus 17.11.2015 Eero Ehanti Tilannekatsaus 17.11.2015 Eer Ehanti Muse 2015 visit Museiden sähköiset aineistt ja tiedt säilyvät, liikkuvat ja avautuvat! Standardeihin perustuvat Museiden luettelintihjeet kertvat mitä ja missä mudssa

Lisätiedot

Suomi 100 -tukiohjelma

Suomi 100 -tukiohjelma Sumi 100 -tukihjelma 1. Tavitteet Sumen valtillisen itsenäisyyden satavutisjuhlavutta vietetään vunna 2017. Valtineuvstn kanslian asettama Sumi 100 -hanke vastaa juhlavuden hjelman rakentamisesta. Ohjelman

Lisätiedot

VIHI-Forssan seudun yritysten vihreän kilpailukyvyn ja innovaatioiden kehittäminen (2012-2013) Poistotekstiilit 2012, Workshop -ryhmät 1-4

VIHI-Forssan seudun yritysten vihreän kilpailukyvyn ja innovaatioiden kehittäminen (2012-2013) Poistotekstiilit 2012, Workshop -ryhmät 1-4 VIHI-Frssan seudun yritysten vihreän kilpailukyvyn ja innvaatiiden kehittäminen (2012-2013) Pisttekstiilit 2012, Wrkshp -ryhmät 1-4 HAMK Frssa 24.5.2012 1. Suljetun tekstiilimateriaalin kierrn kehittäminen

Lisätiedot

KITI - kilpailu anomuksesta ajoon. Ohjeistus kilpailujen anomisesta ja muokkaamisesta KITIssä.

KITI - kilpailu anomuksesta ajoon. Ohjeistus kilpailujen anomisesta ja muokkaamisesta KITIssä. KITI - kilpailu anmuksesta ajn Ohjeistus kilpailujen anmisesta ja mukkaamisesta KITIssä. Kilpailun anminen kalenteriin KITIssä Kilpailun vi ana kalenteriin KITIssä henkilö, jlla n jäsenrekisterin ylläpitäjän

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

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

Lisätiedot

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

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

Lisätiedot

PITKÄAIKAISSÄILYTYKSEN AINEISTOJEN PAKETOINNIN PILOTIN SUUNNITELMA

PITKÄAIKAISSÄILYTYKSEN AINEISTOJEN PAKETOINNIN PILOTIN SUUNNITELMA PITKÄAIKAISSÄILYTYKSEN AINEISTOJEN PAKETOINNIN PILOTIN SUUNNITELMA V0.1 Tämä määrittely n sa petusministeriön Kansallinen digitaalinen kirjast hanketta (hankenumer OPM039:00/2008) SISÄLTÖ 1 Jhdant... 3

Lisätiedot

Leena Suurpää, Nuorisotutkimusverkosto (Nuorisotutkimusseura ry.), puheenjohtaja Katariina Soanjärvi, Humanistinen ammattikorkeakoulu, sihteeri

Leena Suurpää, Nuorisotutkimusverkosto (Nuorisotutkimusseura ry.), puheenjohtaja Katariina Soanjärvi, Humanistinen ammattikorkeakoulu, sihteeri 1 Nuristyön kehittämisverkst MUISTIO 4/2010 Kkus: Krdinaatiryhmän kkus Aika: ti 30.11.2010 kl 13.00 15.55 Paikka: Läsnä: DIAK (etelä), Järvenpää Päivi Harinen, Itä-Sumen ylipist (YUNET) Elna Hirvnen, Tampereen

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 2000 - Näkymät FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava

Lisätiedot