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

Koko: px
Aloita esitys sivulta:

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

Transkriptio

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

2 Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue), joka määrittelee dokumentissa käytettävän merkistön ja XHTML:n version. (XML - Wikipedia) Tehtävä2: Ota käyttöön skandinaavinen merkistö (ensimmäinen rivi tiedostoon): <?xml version="1.0" encoding="iso "?> lisää seuraavaksi tiedostotyyppi. Strict - tyyppiä suositellaan käytettäväksi css:n kanssa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> tiedostotyyppi, mikä sisältää Strict tyypin lisäksi vanhentuneita tageja: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Tehtävä3: Valitse käytettäväksi jompikumpi edellisistä.

3 xhtml:n html-tagi Tehtävä4 lisää sivulle seuraava tagi: <html xmlns="http://www.w3.org/1999/xhtml"> Tämä poikkeaa HTML:n yksinkertaisemmasta muodosta siitä syystä, että XHTML on XML-pohjainen kieli. HTML-tagin jälkeen tulee <head>tagi. Huomaa, että edellä mainitun tagin jälkeen on pakko tulla <title>-tagi, eli siis näitten välissä ei saa olla muita tageja. Näin ollen <title> on myös XHTML-dokumentin pakollinen osa. <title> - osaan kirjoitettu teksti tulee näkyville selaimen yläpalkissa-

4 Tehtävä5, lisää seuraavat rivit: <head> <title>xhtml-harjoitus</title> </head> <body> <p>sivun materiaali tänne, tämä teksti on kappaletagien sisällä</p> </body> </html> XHTML:ssä kaikki tagit lukuun ottamatta DOCTYPE-määrittelyä tulee kirjoittaa pienin kirjaimin. Esimerkiksi tagi <head> voidaan kirjoittaa HTML-kielessä myös muodossa <HEAD>, mutta tämä merkintätapa on XHTML:ssä kielletty. Se kylläkin toimii kaikissa suosituimmissa selaimissa, mutta on kyllä parempi opetella koodaamaan W3:n normien mukaisesti.

5 Sivun koodin pitäisi näyttää nyt esimerkiksi tältä notepadissa: Tallenna tiedosto notepadissa ja avaa se selaimessa esim. kaksoisklikkaamalla tiedostonimeä resurssienhallinnassa: Näkymä selaimessa:

6 XHTML on, toisin kuin HTML, hyvin tarkka tagien sisäkkäistämisen (engl. nesting) suhteen. Sisäkkäistäminen on helpoin selostaa esimerkillä: <i><b>tämä on väärin.</i></b> Kuten huomaat, tagit on suljettu väärässä järjestyksessä. Tehtävä6, lisää seuraava rivi tiedostoon (tämä on oikea muoto): <i><b>tämä on oikein, lihavoitu ja kursivoitu teksti.</b></i> Tallenna xhtmlharjoitus.xhtml tiedosto ja päivitä selain. Näkymä selaimessa, kun edellinen rivi on lisätty <body> - osaan: XHTML:ssä kaikkien tagien täytyy päättyä (paitsi DOCTYPE). Esimerkiksi seuraava merkintätapa kävisi HTML:ssä, mutta XHTML:ssä se ei käy päinsä: <p>tämä on oikein HTML:ssä, mutta väärin XHTML:ssä Sen sijaan seuraava tapa on oikein myös XHTML:ssä: <p>tämä passaa molemmissa kielissä</p>

7 Lyhyet tagit XHTML:ssä: Tehtävä7, lisää sivulle viiva, rivinsiirto ja tekstiä: Rivinsiirto - tagi <br />rivinsiirto <br /> Viivanpiirto tagi: <hr /> Kuvan lisääminen (kuvan täytyy löytyä samasta kansiosta kuin xhtmlharjoitus.xhtml tiedoto) tallenna vaikka tämä kuva samaan kansioon harjoituksesi kanssa Tehtävä8, Lisää kuva sivullesi: <img src="esimerkki.png" /> <br />

8 Linkki Anchor <a>...</a> kun jokin tekstikohta halutaan linkiksi, ympäröidään linkkinä toimiva tekstikohta, merkkitasoinen elementti tai tyhjä elementti a-elementillä. href-attribuutti a-elementtiin olennaisena kuuluu sen alkutunnisteeseen lisättävä href-attribuutti, jossa kerrotaan linkitettävän kohteen sijainti. Tehtävä9, lisää sivulle linkki: <p>absoluuttinen linkki: <a href="http://www.metropolia.fi/">metropolia</a>.</p> Kun linkitetään sivuston ulkopuolelle, linkitettävä URL on annettava täydellisessä muodossaan,

9 Sivuston sisällä linkki voidaan antaa suhteellisena <p>suhteellinen linkki <a href="toinen_sivu.xhtml">seuraava</a> -omaan tiedostoon </p> (jotta linkki toimisi, pitää samasta harjoituskansiosta löytyä myös tiedosto toinen_sivu.xhtml, - tee se myös notepadilla) : <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>toinen sivu</title> </head> <body> <p>toinen sivu</p> </body> </html> Tehtävä10, tee toinen sivu ja linkitä sivu aukeamaan xhtmlharjoitus.xhtml sivulta.

10 title-attribuutti Mikäli linkitettävä teksti tai kuva ei kerro riittävästi linkitettävästä kohteesta, kannattaa tämä kertoa a-elementtiin liitettävässä title-attribuutissa. title-attribuuttiin sisällytetty teksti tulee esille selaimessa kun hiiri viedään linkin päälle. target-attribuutti Linkin voi avata myös uuteen ikkunaan tai nykyisin uuteen välilehteen. Tämä toteutetaan target-attribuutille annettavalla arvolla _blank: <p>avaa <a title="metropolia" href="http://www.metropolia.fi/" target="_blank">koulun sivuille</a> uuteen selainikkunaan.</p> Tehtävä11: tee linkki sivullesi, missä käytät title ja target-attribuutteja.

11 Sivunsisäinen linkki Pitkän sivun alkuun voidaan tehdä esimerkiksi sisällysluettelo sivunsisäisellä linkityksellä. Linkeille tehdään kohteet antamalla alaotsikoille tai linkin kohteille yksilöivät id-attribuutit, joihin linkeissä viitataan: <h2 id= kakkosotsikko">väliotsikko</h2> <div id="alku"></div> (edelliset rivit tulevat siis xhtml tiedoston alkuosaan - <body> - tagin jälkeen) Linkki samalla sivulla tehdään, viittaamalla elementille annettuun id-attribuuttiin: <a href="#kakkosotsikko">linkitetty kohta</a> <a href="#alku">sivun alkuun</a> Edelliset rivit voit lisätä xhtmlharjoitus.xhtml tiedoston loppuun. Vastaavasti toisen tiedoston tiettyyn id-attribuutilla merkittyyn kohtaan: <a href="toinen_sivu.xhtml#valiotsikko">linkitetty kohta</a> Tehtävä12: tee sivunsisäinen linkki

12 Sähköpostiosoitteen linkittäminen Sähköpostiosoite lisätään sivulle yksinkertaisimmillaan seuraavasti: <a Ongelmana tavassa on se, että roskapostittajat keräävät webbisivuilta koneellisesti sähköpostiosoitteita listoilleen, joten tätä ei kannata käyttää. Yksi mahdollisuus sen sijaan on tehdä sähköpostiosoitteen sisältävä kuva, ja liittää se haluttuihin kohtiin sivuilla. Kuva_esim._tästä <p>postia minulle:</p> <a <img src="sp.png" alt="sähköpostiin" /></a> Tehtävä13: tee sähköpostilinkki kuvasta.

13 Tyylitiedosto mukaan sivulle Seuraava rivi rivi ennen </head> - tagia: <link rel="stylesheet" type="text/css" media="screen" href="tyyli.css" /> tyyli.css tiedosto tehdään notepad ohjelmalla kuten aikaisemmat xhtml tiedostot. Tallennus edelleen samaan kansioon muiden sivustotiedostojen kanssa.

14 css tiedoston sisältöä: body {.huomautus tyylin käyttöönotto: xhtmlharjoitus.xhtml tiedostossa.

15 Tehtävä14: tee tyyli.css tiedosto ja linkitä se molemmille harjoitussivuille. Tee tiedostoon oma tyylimäärittely ja määrittele myös <h2> - tagille koko ja väri. Ota oma tyylimäärittely käyttöön xhtmlharjoitus.xhtml sivulla sekä tekemälläsi toisella sivulla. Palautus Moodleen: linkki etusivulle xhtmlharjoitus.xhtml, kun olet ensin siirtänyt sivut public_html kansioon z- asemalle. osoite on: users.metropolia.fi/~omatunnus/xhtmlharjoitus omatunnus on kirjautumistunnuksesi (username) koulun koneille.

http://www.microsoft.com/expression/

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

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

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

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

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

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

Alkuun HTML5 peliohjelmoinnissa

Alkuun HTML5 peliohjelmoinnissa Paavo Räisänen Alkuun HTML5 peliohjelmoinnissa www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida ja levittää ei kaupallisissa tarkoituksissa. Sisällysluettelo 1: Alkusanat 2: Alkuun 3: Pelinäkymä

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.

Lisätiedot

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

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

Lisätiedot

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

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

Lisätiedot

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi) 1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 4 2. Ruudukkopohjainen taitto... 5 2.1. 960 Grid System... 5 2.2.

Lisätiedot

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3. HTML:n perusteet Jari Sarja / Otavan Opisto 2012 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä 1 11. Sivuston taittaminen HTML:n avulla Sivuston taittaminen tarkoittaa

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

HTML5 & CSS3 perusteet

HTML5 & CSS3 perusteet Verkkokurssin tuotantoprosessi kurssin harjoitustyönä suunniteltu toteutettavissa oleva verkkokurssi. HTML5 & CSS3 perusteet Sisältö: 1. Ideointi 2. Tausta-analyysi 3. Sisällön suunnittelu 4. Pedagoginen

Lisätiedot

Hakukoneoptimoinnin ABC

Hakukoneoptimoinnin ABC Hakukoneoptimoinnin ABC Sisältö Mitä on hakukoneoptimointi? Miten hakukoneoptimointia tehdään? Miten valitset oikeat hakusanat? Miten pääsee Googlen hakutuloksissa ensimmäiselle sivulle? Mitä on hakukoneoptimointi?

Lisätiedot

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN Tämän tehtävän tarkoitus on tutustuttaa ympäristöön sekä tutustuttaa wwwdokumenttien tekoon php:llä. Alkutoimet Varmistetaan, että verkkolevyllä on kansio

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

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

3 WWW-hypermedian perusta: HTML

3 WWW-hypermedian perusta: HTML 3 WWW-hypermedian perusta: HTML Hypertext Markup Language HTML (Hypertext Markup Language) on tapa koodata (merkata) rakenteisia (teksti)dokumentteja WWW:ssä Esimerkki: Tästä kaikki alkaa

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

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 1 WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 10.4.2015 Lounea Oy Tehdaskatu 6, 24100 Salo Puh. 029 707 00 Y-tunnus 0139471-8 www.lounea.fi Asiakaspalvelu 0800 303 00 Yrityspalvelu 0800 303 01 Myymälät 0800 303

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012 Tiedostot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi työpöydältä raahata

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

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

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

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

MOODLE-OHJE: Linkin lisääminen tehtävänannon yhteyteen. Web-linkin lisääminen

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

Lisätiedot

Miten Internet toimii. Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2013

Miten Internet toimii. Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2013 Miten Internet toimii Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2013 Luennon sisältö 1. Esimerkki 1: nettiselailu 2. Esimerkki 2: sähköposti 3. Internetin protokollapino 2 ESIMERKKI 1: NETTISELAILU

Lisätiedot

2 Rakenteisten dokumenttien perusteet

2 Rakenteisten dokumenttien perusteet è è è Rakenteisten dokumenttien perusteet 2 Rakenteisten dokumenttien perusteet Kuten todettua, rakenteinen dokumentaatio tähtää tiedon mallintamiseen käytössä olevien välineiden mahdollisuudet huomioiden

Lisätiedot

ez Publish ja Toolbar yleisohjeet

ez Publish ja Toolbar yleisohjeet ez Publish ja Toolbar yleisohjeet SISÄLLYSLUETTELO: 1. Perustyökalut 2 1.1 Sivupohjan valinta ja sivun lisäys 2 1.2 Sivun muokkaus, siirto ja poisto 2 1.3 Puurakenne, aakkospainike, TR-painike ja F-painike

Lisätiedot

MOODLE-OHJE: Liitetiedoston lisääminen ja päivittäminen

MOODLE-OHJE: Liitetiedoston lisääminen ja päivittäminen etusivulta yläoikealta. Kirjauduttuasi sisään SAMK Moodleen, mene omalle opintojaksollesi ja siirry muokkaustilaan. Muokkaustila päälle painike löytyy opintojakson Kun muokkaustila on päällä, siirry sen

Lisätiedot

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita

Lisätiedot

/ * PROSESSORIN C-KIELINEN OHJELMA */

/ * PROSESSORIN C-KIELINEN OHJELMA */ / * PROSESSORIN C-KIELINEN OHJELMA */ #define AVR_ATtiny2313 #define F_CPU 12000000UL #include #include #include void InitUART (unsigned char baudrate); unsigned

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

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

Ylläpitoalue - Etusivu

Ylläpitoalue - Etusivu Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut

Lisätiedot

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

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

JSP (JavaServer Pages) tekniikka Lähde Arvo Lipitsäinen, JSP JavaServer Pages, 2003

JSP (JavaServer Pages) tekniikka Lähde Arvo Lipitsäinen, JSP JavaServer Pages, 2003 1(63) JSP (JavaServer Pages) tekniikka Lähde Arvo Lipitsäinen, JSP JavaServer Pages, 2003 mahdollistaa dynaamisen web-sisällön luonnin eli HTML-.DHTML-, XHTML- ja XML-dokumentit luodaan palvelimella dynaamisesti

Lisätiedot

TEEMA 2 Aineistot. Kirjautuminen Moodleen. Sisältö. Kirjaudut Moodleen sivulta http://moodle.pkamk.fi/. Voit vaihtaa kielen valikosta.

TEEMA 2 Aineistot. Kirjautuminen Moodleen. Sisältö. Kirjaudut Moodleen sivulta http://moodle.pkamk.fi/. Voit vaihtaa kielen valikosta. TEEMA2 Aineistot Sisältö Moodleen kirjautuminen...1 Aineistot (Lisää aineisto ) - Web-sivu...2 - Linkit ulkoisille sivuille...4 - Valmiit tiedostot...5 Etusivun näkymän jäsennys otsikoilla...7 Tiedostojen

Lisätiedot

WWW-sivujen tuottaminen (FrontPage 2000) Ali Omar, 2001

WWW-sivujen tuottaminen (FrontPage 2000) Ali Omar, 2001 WWW-sivujen tuottaminen (FrontPage 2000) Keskeisin sisältö Tavoitteet Peruskäsitteet Internet, HTML, WWW-sivun elementit WWW-sivuston tekemisen vaiheet FrontPagen peruskäyttö Motto: käytäntö opettaa! Tavoitteena

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

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista

Lisätiedot

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3

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

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

Sivupohjien täyttö suppeat sivupohjat

Sivupohjien täyttö suppeat sivupohjat Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat

Lisätiedot

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. Aulikki Hyrskykari JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti

Lisätiedot

Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen:

Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen: Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen: http://www.kamera73.fi/kuukaudenkuvaaja Kukin seuran jäsen voi laittaa

Lisätiedot

3 Verkkosaavutettavuuden tekniset perusteet

3 Verkkosaavutettavuuden tekniset perusteet 3 Verkkosaavutettavuuden tekniset perusteet Saavutettavuuden toteuttaminen edellyttää lähtökohtaisesti tietoa laitteista ja sovelluksista, käyttäjistä ja käyttötavoista, sekä tekniikasta. Tekniikasta on

Lisätiedot

Kirkkopalvelut Office365, Opiskelijan ohje 1 / 17 IT Juha Nalli 22.12.2015

Kirkkopalvelut Office365, Opiskelijan ohje 1 / 17 IT Juha Nalli 22.12.2015 Kirkkopalvelut Office365, Opiskelijan ohje 1 / 17 Oppilaat saavat vuoden 2016 alusta käyttöönsä oppilaitoksen sähköpostin ja muita palveluita Microsoftin Office365:sta. Oppilaiden sähköposti on muotoa

Lisätiedot

Windows Vistan varmuuskopiointi

Windows Vistan varmuuskopiointi Vaihtoehtoja varmuuskopiointiin 1 Windows Vistan varmuuskopiointi Sisällysluettelo mikko.kaariainen@opisto.hel.fi Windows Vistan varmuuskopiointi... 2 Ensimmäinen varmuuskopiointi ja asetukset... 2 Seuraava

Lisätiedot

Sisällys Clerica Web-sovellusten käytön aloittaminen 2

Sisällys Clerica Web-sovellusten käytön aloittaminen 2 Sisällys Clerica Web-sovellusten käytön aloittaminen 2 Kirjautuminen järjestelmään 2 Myyntilaskut 2 Ostolaskujen käsittely 4 Uuden laskun syöttö 6 Palkkailmoituslomake 8 Palkkailmoituksesta kopio 9 Henkilötietojen

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aineisto-valikon tai Add an activity or resource valikon (Asetukset lohko Activity chooser on toiminnon ollessa päällä). Valitse

Lisätiedot

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut.

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut. Kotisivu ohje Kotisivu - ohjelmisto on webbipohjainen kotisivujen julkaisujärjestelmä jossa käyttäjä ei tarvitse erityistaitoja kyetäkseen julkaisemaan webbisivuja. Jos osaat käyttää Microsoft Word tekstinkäsittelyohjelmaa,

Lisätiedot

SMART Board harjoituksia 17 - Notebook 10 Tiedostomuotoihin tallentaminen Yritä tehdä tehtävät sivulta 1 ilman että katsot vastauksia.

SMART Board harjoituksia 17 - Notebook 10 Tiedostomuotoihin tallentaminen Yritä tehdä tehtävät sivulta 1 ilman että katsot vastauksia. SMART Board harjoituksia 17 - Tiedostomuotoihin tallentaminen Yritä tehdä tehtävät sivulta 1 ilman että katsot vastauksia. http://www.kouluon.fi/ Harjoitus 1-17: NOTEBOOK muotoon tallentaminen Tee työpöydälle

Lisätiedot

CMS Made Simple Perusteet

CMS Made Simple Perusteet CMS Made Simple Perusteet 1. Hallintaan kirjautuminen Kirjautumisruutuun pääset lisäämällä osakaskuntasi www-osoitteen perään liitteen /admin. Käyttäjätunnuksena toimii onkija ja salasanana postitse saamasi

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

UpdateIT 2010: Uutisten päivitys

UpdateIT 2010: Uutisten päivitys UpdateIT 2010: Uutisten päivitys Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Uutisen lisääminen... 1

Lisätiedot

Ohjeet asiakirjan lisäämiseen arkistoon

Ohjeet asiakirjan lisäämiseen arkistoon Ohjeet asiakirjan lisäämiseen arkistoon 1. Jos koneellesi ei vielä ole asennettu Open Office ohjelmaa, voit ladata sen linkistä joka löytyy Arkisto => Asiakirjapohjat sivulta seuran kotisivuilta. Jos ohjelma

Lisätiedot

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola

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

Lisätiedot

Vaasan kaupungin nuorten kesätyöt haetaan Kuntarekry.fi työnhakuportaalin kautta.

Vaasan kaupungin nuorten kesätyöt haetaan Kuntarekry.fi työnhakuportaalin kautta. Mistä on kyse Lyhyt palvelukuvaus Vaasan kaupungin nuorten kesätyöt haetaan Kuntarekry.fi työnhakuportaalin kautta. Kuntarekry.fi on valtakunnallinen kunta-alan työnhakupalvelu ja kuntatyönantajien rekrytointipalvelu.

Lisätiedot

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1 Digitaalisen median tekniikat JSP ja XML 28.4.2004 Harri Laine 1 JSP hyvin lyhyesti JSP on Java-pohjainen skriptikieli JSP:llä laadittu sivu käännetään java-servletiksi (sivun toteutus vastaa servlettiluokan

Lisätiedot

HTML-ohjeet. Sivun perusrakenne