XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
|
|
- Katriina Auvinen
- 8 vuotta sitten
- Katselukertoja:
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" " tiedostotyyppi, mikä sisältää Strict tyypin lisäksi vanhentuneita tageja: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Tehtävä3: Valitse käytettäväksi jompikumpi edellisistä.
3 xhtml:n html-tagi Tehtävä4 lisää sivulle seuraava tagi: <html xmlns=" 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=" 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" " <html xmlns=" <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=" 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/
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ätiedotTutkitaan 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ätiedotProseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti
1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23
LisätiedotHTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
LisätiedotVerkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
LisätiedotAlkuun HTML5 peliohjelmoinnissa
Paavo Räisänen Alkuun HTML5 peliohjelmoinnissa www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida ja levittää ei kaupallisissa tarkoituksissa. Sisällysluettelo 1: Alkusanat 2: Alkuun 3: Pelinäkymä
LisätiedotVerkkojulkaiseminen Minna Väisänen. HTML5-tehtävä
Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.
LisätiedotLisätehtävät. Frantic 2015 sivu 1 www.frantic.com
Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan
LisätiedotTee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
LisätiedotSivupohja 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ätiedotHTML: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ätiedotHTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.
HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen
LisätiedotHTML5 & 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ätiedotSisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002
, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi
LisätiedotHakukoneoptimoinnin 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ätiedotCSS - tyylit. 13.11.2000 Seppo Räsänen
CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot
Lisätiedot3 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ätiedotVERKKOSOVELLUSTEN 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ätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
Lisätiedotez 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ätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotWWW-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ätiedotAT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.
AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)
LisätiedotSuvi 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ätiedotArtikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
LisätiedotMiten 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ätiedotOhjeistus 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ätiedotvalitsin on useimmiten html-elementti, jolle tyyli halutaan luoda
Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda
LisätiedotMOODLE-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ätiedotKotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
Lisätiedot2 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/ * 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ätiedotTEEMA 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ätiedotMOODLE-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ätiedot2. 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ätiedotYlläpitoalue - Etusivu
Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut
LisätiedotWWW-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ätiedotKirkkopalvelut 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ätiedotXML, 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ätiedotCode Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/
Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,
LisätiedotWWW-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ätiedotNotepad++ 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ätiedot1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
LisätiedotHTML5 -elementit jatkuu
HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"
LisätiedotETAPPI 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ätiedotOhjelman 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ätiedotSivupohjien 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ätiedotRATKI 1.0 Käyttäjän ohje
RATKI RATKI 1.0 Käyttäjän ohje Ohje 0.5 Luottamuksellinen Vastuuhenkilö Petri Ahola Sisällysluettelo 1. Yleistä... 3 1.1. Kuvaus... 3 1.2. Esitiedot... 3 1.3. RATKIn käyttöoikeuksien hankinta... 3 1.4.
LisätiedotJSP (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ätiedotKuukauden 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ätiedotUpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
LisätiedotM. Merikanto 2012 XML. Merkkauskieli, osa 2
XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao
Lisätiedot3 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ätiedotSMART 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ätiedotSisä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ätiedotWindows 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ätiedotLaajuus 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ätiedotUpdateIT 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ätiedotOhjeet 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ätiedotVaasan 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ätiedotJWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari
JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti
LisätiedotSuvi 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ätiedotCMS 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ätiedotHTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...
HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...
LisätiedotDigitaalisen median tekniikat. 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ätiedotXHTML 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ätiedotDigitaalisen median tekniikat. JSP ja XML
Digitaalisen median tekniikat JSP ja 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ätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotAndroid ohjelmointi Tunti 2. Käyttöliittymät ja resurssit
Android ohjelmointi Tunti 2 Käyttöliittymät ja resurssit Debug Log luokka mahdollistaa debug tulostamisen ADB:n kautta konsoliin (esim. DDMS:ään) esim. Log.println(Log.INFO, TAG, Tämä on println ); Voidaan
LisätiedotMainonnanhallinta Käyttöopastus. Tekniikka. Olli Erjanti. 8.4.2008 Mediareaktori
Mainonnanhallinta Käyttöopastus Tekniikka EmediateAd 3.7 Olli Erjanti Oppaassa käydään läpi seuraavaa: Mainospaikkojen luonti html-sivupohjaan Mainoskampanjan keskeytys teknisten tai muiden ongelmien vuoksi
Lisätiedot1 Johdanto. 2 Kirjautuminen. Sisällysluettelo. Kanakoirakerho - websivujen ylläpito
Kanakoirakerho - websivujen ylläpito 1 Sisällysluettelo 1 Johdanto... 1 2 Kirjautuminen... 1 2.1 Ylläpitovalikko... 2 3 Käyttäjien hallinta... 3 4 Sisällön muokkaaminen... 4 4.1 Editorin käyttäminen...
LisätiedotSuvi Junes Tietohallinto / Opetusteknologiapalvelut 2012
Aineistot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi tiedostot siirtää
LisätiedotHyperlinkin tekeminen artikkeliin
Hyperlinkin tekeminen artikkeliin 1 Hyperlinkit artikkelissa Ovat yleensä linkkejä PIKIn hakutuloksiin (yksittäinen teos tai hakutuloslista) tai PIKin muihin sivuihin Muihin tietolähteisiin: Wikipedia,
LisätiedotJoomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta.
Joomla pikaopas Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta. Paavo Räisänen www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida, tulostaa
LisätiedotVIESTIPOHJAT JA ASIAKIRJAPOHJAT
VIESTIPOHJAT JA ASIAKIRJAPOHJAT Koulutusmateriaali Tämä on luottamuksellinen ja salassapidettävä dokumentti. Tätä dokumenttia tai mitään osaa tästä dokumentista ei saa luovuttaa kolmansille osapuolille
LisätiedotFrontPage 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ätiedotHTML 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
LisätiedotVIESTIPOHJAT JA ASIAKIRJAPOHJAT
VIESTIPOHJAT JA ASIAKIRJAPOHJAT Koulutusmateriaali Tämä on luottamuksellinen ja salassapidettävä dokumentti. Tätä dokumenttia tai mitään osaa tästä dokumentista ei saa luovuttaa kolmansille osapuolille
LisätiedotVIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
LisätiedotJavascript 2: Ohjelmointikielen ominaisuudet. Jaana Holvikivi Metropolia
Javascript 2: Ohjelmointikielen ominaisuudet Jaana Holvikivi Metropolia HTML - sivun rakenne ja osiot HTML HEAD STYLE SCRIPT STYLEsheet Javascript file BODY Javascript
LisätiedotMITÄ JAVASCRIPT ON?...3
JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotOPPITUNTI 3 Ensimmäinen skripti
3. Ensimmäinen skripti 35 OPPITUNTI 3 Ensimmäinen skripti Kun olet asentanut PHP:n ja asettanut sen kokoonpanon, on aika laittaa ohjelmisto testaukseen. Tällä tunnilla luot ensimmäisen skriptisi ja tutkit
LisätiedotYH1b: Office365 II, verkko-opiskelu
YH1b: Office365 II, verkko-opiskelu Huom. Suosittelemme tämän harjoituksen 1b tekemistä mikroluokassa, jotta yliopiston mikroluokat tulevat edes hieman tutuiksi. Harjoituksen tavoitteet Harjoituksessa
LisätiedotMy easyfairs -palvelun käyttö
My easyfairs A palvelun käyttö Page 1 My easyfairs -palvelun käyttö Näytteilleasettajien opas My easyfairs A palvelun käyttö Page 2 SISÄÄNKIRJAUTUMINEN... 3 LOGON JA OSASTONIMEN LISÄÄMINEN... 5 YRITYSTIETOJEN
LisätiedotUlkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
Lisätiedotselector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård
selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS
LisätiedotOffice_365_loppukäyttäjän ohje. 15.5.2015 Esa Väistö
Office_365_loppukäyttäjän ohje 15.5.2015 Esa Väistö 2 Sisällysluettelo Kuvaus... 3 Kirjautuminen Office_365:een... 3 Valikko... 4 Oppilaan näkymä alla.... 4 Opettajan näkymä alla... 4 Outlook (Oppilailla)...
LisätiedotGALERIE EXHIBITIONS (13) 1 2 EXHIBITIONS 2
GALERIE EXHIBITIONS (13) 1 1 Table of Contents 2 EXHIBITIONS 2 2.1 YLEISTÄ 2 2.2 REGISTER EXHIBITION 3 2.3 UPDATE EXHIBITION 4 2.3.1 BASICS 5 2.3.2 ARTICLE 6 2.3.3 PUBLISH 6 2.3.4 REVIEW 7 2.4 REGISTER
LisätiedotKangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi
2015 Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 1 Sisällysluettelo 1. Sivustolle rekisteröityminen... 2 2. Yrityksen lisääminen... 3 2.1. Yritystiedot...
LisätiedotTyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 5 WWW-hypermedian perusta: HTML
Tyylien käyttö Tyylien (style) ideana on HTML:n tapauksessa erottaa toisistaan dokumentin rakenne ja ulkoasu Tavoitteena on, että dokumentin loogisen rakenteen ja ulkoasun koodaus erotetaan toisistaan
Lisätiedot1. Valitse käyttäjänimi 2. Kirjoita salasana 3. Anna sähköpostiosoitteesi 4. Keksi wikillesi nimi
WIKISPACES-WIKIN LUOMINEN Kirjoita selaimeesi osoite http://www.wikispaces.com 1. Valitse käyttäjänimi 2. Kirjoita salasana 3. Anna sähköpostiosoitteesi 4. Keksi wikillesi nimi Paina Join-painiketta Onneksi
LisätiedotSivuston tiedotmp3list.pro
Sivuston tiedotmp3list.pro Luotu Kesäkuu 06 2019 13:16 PM Pisteet52/100 SEO Sisältö Otsikko Download free music - mp3 songs and Pituus : 42 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus
LisätiedotVisma Econet -ohjelmat ActiveX on epävakaa -virheilmoituksen korjausohjeet
1 Visma Econet -ohjelmat ActiveX on epävakaa -virheilmoituksen korjausohjeet Microsoft on julkaissut Office-paketteihin tietoturvapäivitykset. Seuraavat päivitykset aiheuttavat Visma Econet -ohjelmissa
LisätiedotOPINNÄYTETYÖ. WWW-KOULUTUSSIVUSTON KEHITTÄMINEN Case Inspecta Oy
T A M P E R E E N A M M A T T I K O R K E A K O U L U OPINNÄYTETYÖ WWW-KOULUTUSSIVUSTON KEHITTÄMINEN Case Inspecta Oy Janne Leinonen Tietojenkäsittelyn koulutusohjelma Tammikuu 2008 Työn ohjaaja: Paula
LisätiedotSivuston tiedotpechaticentr.ru
Sivuston tiedotpechaticentr.ru Luotu Kesäkuu 03 2019 17:04 PM Pisteet59/100 SEO Sisältö Otsikko Изготовление печатей в Москве. Изготовление печати любой сложности. Pituus : 67 Täydellistä, otsikkosi sisältää
LisätiedotPäivitysohje Opus Dental
Päivitysohje Opus Dental 7.1.460 1. Päivitysohjelman lataaminen Avaa Opus Dental -internetsivu osoitteessa www.opusdental.com. Klikkaa etusivulta Suomen lippua avataksesi suomenkielisen sivuston. Valitse
LisätiedotICT1TN004 Hakukoneoptimoin p ti Heikki Hiet Hie ala t
ICT1TN004 Hakukoneoptimointi Heikki Hietala Hakukoneoptimointi Sivuston laatiminen on vain osa työtä Laadittu sivusto on saatava myös hyvin esiin hakukoneissa Tavoitteena on kasvattaa ns. luonnollista
LisätiedotPikaohjeet A&O oppimisympäristön käytön aloittamiseen
Pikaohjeet A&O oppimisympäristön käytön aloittamiseen 1. Kirjaudu A&O-ympäristöön Verkkopalvelun sisällöntuotanto kurssilla käytettävä A&O alusta löytyy verkko-osoitteesta: http://ao4.ee.tut.fi/hypermedia/
LisätiedotMoodle-oppimisympäristö
k5kcaptivate Moodle-oppimisympäristö Opiskelijan opas Sisältö 1. Mikä on Moodle? 2. Mistä löydän Moodlen? 3. Kuinka muokkaan käyttäjätietojani? 4. Kuinka ilmoittaudun kurssille? 5. Kuinka käytän Moodlen
Lisätiedot