Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot
|
|
|
- Tommi Niemi
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 HTML-kielen alkeet Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot ovat tavallisia tekstitiedostoja, jotka selain tulkkaa tietyllä tavalla ja näyttää sitten tulkintansa mukaan käyttäjälle. Eri selaimet voivat tulkita saman html-koodin hieman eri tavoin. Lisäksi selaimet saattavat tukea sellaisia komentoja, mitä toiset selaimet eivät tunnista ollenkaan. HTML-kieli koostuu siis komennoista, joita sanotaan tageiksi. Esimerkiksi, jos haluamme kirjoittaa kappaleen tekstiä, niin käytämme tagia nimeltä P (paragraph=kappale). Tagit kirjoitetaan merkkien < ja > väliin. Esim. <P>. Selaimelle pitää myös ilmoittaa, koska komento päättyy. Se tapahtuu laittamalla merkkien < ja > väliin merkki /. Esim. </P>. Kappale tekstiä saataisiin HTML-koodiin seuraavasti <P> Minun tekstii... </P> Jotkin tagit toimivat yksinään esim. rivivaihdon aiheuttava tagi <BR> HTML-koodi alkaa aina ilmoituksella että kyseessä on HTML-koodi <HTML> Sitä seuraa pää ja runko <HEAD> erilaisia määreitä, css-koodia ja javascriptiä </HEAD> <BODY> varsinainen websivun sisältö tulee tähän </BODY> </HTML>
2 Tageihin voi lisätä määreitä eli attribuutteja. Esim. kertoa millaista tekstiväriä tai pohjaväriä käytetään. Esim. Tahdotaan, että koko dokumentissa käytetään punaista pohjaväriä ja sinistä tekstiä Silloin lisätään BODY-tagiin lisämääreet BGCOLOR (taustaväri) TEXT (kirjoitusväri) <BODY BGCOLOR=RED TEXT=BLUE> Väreistä lisää tuonnempana. Muutamia käyttökelpoisia tagejä: Otsikkoja löytyy 6 eritasoista. H1,H2,H3,H4,H5,H6 (H1 pääotsikko eli suurin) Esim. <H1>Suurin otsikko</h1> Jos tahtoo tasata kappaleita ja/tai otsikoita voidaan se tehdä ALIGN lisämääreellä, joka voi saada arvot LEFT,RIGHT,CENTER,JUSTIFY Esim. otsikon keskittäminen <H1 ALIGN=CENTER>Suurin otsikko</h1> Lihavointi <B>Lihavoitua tekstii</b> Kursivointi <I>kursiivia tekstii</i> Alleviivattua <U>alleviivattua tekstii</u> Kirjoituskonetyyli <TT>Kirjotuskonetekstii</TT> Esimuotoiltua tekstiä saadaan <PRE> -tagillä. Siinä selaimen tekemät muotoilut ovat (lähes) samanlaiset kuin ne on itse koodin seassakin. Tehtäviä. 1. Tee opettajan mallin mukainen eka web-sivu. Sitä on hyvä käyttää pohjana. 2. Tee kirjoitelma muistiota (notepad) käyttäen, vaikka kesälomastasi tai mistä vain aiheesta. Otsikoi tarinasi, lisää tekijän nimi väliotsikkona. Valitse otsikkosi ja tekstisi. Valitse pohjaväri ja kirjoitusväri. Lisää tekstin lomaan alleviivausta, lihavointia yms. Kokeile PRE-tagin käyttöä. 3. Tutustu web-sivuun
3 HTML Viivat, listat, linkit toisiin dokumentteihin Viivat Viivoja saa piirrettyä <HR> tagillä. Sillä ei ole lopetustagiä. Attribuutteina voi antaa mm. ALIGN (tasaus), WIDTH (leveys), SIZE (paksuus), COLOR (väri) Esim. Piirretään leveys suunnassa keskelle 200px pitkä ja 5px paksu punainen viiva. <HR ALIGN=center WIDTH=200 SIZE=5 COLOR=red> Esim. Viivan leveys voidaan määrätä myös suhteellisesti esim. 80% ruudun leveydestä <HR ALIGN+center WIDTH=80%> Listat Listoja ja luetteloita voidaan tehdä seuraavasti Järjestämätön lista Esim. <UL> <LI>Kissa</LI> <LI>Koira</LI> <LI>Sika</LI> </UL> Tulos: Kissa Koira Sika
4 Numeroitu lista <OL> <LI>Eka</LI> <LI>Toka</LI> <LI>Kolmas</LI> </OL> Tulos: 1. Eka 2. Toka 3. Kolmas CSS-koodauksella saadaan listoihin mm. omat luettelomerkit. Niistä myöhemmin. LINKIT Linkit toteutetaan ns. ankkureiden avulla. Käytetään tagia <A> Esim. tekstin kohtaa Heippa! napauttamalla siirtyminen Tampereen kotisivuille. <P>Diipadaapadaa, <A HREF= >Heippa!</A></P> Esim. Kuvaa napauttamalla siirtyminen Tampereen kotisivuille <A HREF= ><IMG SRC= kuva1.jpg ></A> Ankkurin voi siis laittaa mihin tahansa sivun elementtiin. HREF määreeseen tulee linkitettävän dokumentin nimi tai web-sivun nimi. Jos web-dokumenttisi on pitkä (ei mahdu yhdelle ruudulle), niin voit haluta tehdä linkkejä dokumentin sisään. Esim. tahdotaan sivun alkuun tehdä linkki sivun lopussa olevaan kuvaan. Sivun lopussa: <A name= loppukuva ><IMG SRC= finaali.jpg ></A> Sivun alussa: <A HREF= #loppukuva >Tästä klikkaamalla sivun loppuun</a> Teksti linkeillä on kolme väriä: Vierailematon linkki LINK, Vierailtu linkki VLINK, Aktiivinen linkki ALINK (ollaan juuri painamassa linkkiä). Värit lisätään BODY-tagiin <BODY LINK=red VLINK=blue ALINK=yellow>
5 HTML4 Fontit, erikoismerkit, ylä- ja alaindeksit FONTIT FONT-tagillä voidaan muokata kirjasimen kokoa, lajia ja väriä Esim. Halutaan kirjoittaa Arial-fontilla, hieman suuremmalla fontilla ja värillä punainen. Nämä saadaan attribuuteilla FACE, SIZE, COLOR <FONT FACE= Arial SIZE=+2 COLOR=RED>Tekstini</FONT> Tekstini Erilaisia fonttilajeja, jonka voi olettaa toimivan kaikkialla ovat Arial, Courier, Times New Roman, Verdana myös paljon muita löytyy! Koolle SIZE voidaan antaa arvoja 1 7. CSS-koodauksen avulla fontit voidaan määritellä vielä tarkemmin ja toivottavaa olisikin että web-sivuilla ei käytettäisi FONT-tagiä kirjasimen muotoiluun. INDEKSIT Yläindeksin saa tagillä SUP ja alaindeksin tagillä SUB Esim. X<SUP>2</SUP>+T<SUB>x</SUB> 2 X + T x ERIKOISMERKIT Erikoismerkit mm. <, >, &, ä, å, ö ei voida kirjoittaa suoraan HTML-koodin sekaan, koska selaimen HTML-tulkki ei osaisi enää tulkita koodia. Sen sijaan käytetään & merkillä alkavia koodeja Esim. < saadaan web sivulle < koodilla x< y (tai x<) Näyttää websivulla x<y. Tältä sivulta voit etsiä erikoismerkkien koodeja
6 HTML5 Taulukoiden tekeminen HTML kielessä Taulukot voidaan muodostaa <TABLE> tagillä. Taulukon rivit tehdään <TR> tagillä Taulukon solut tehdään <TD> tagillä esim. 2x2 taulukko, jossa luvut 1,2,3,4 <TABLE> <TR> </TR> <TR> </TR> </TABLE> <TD>1</TD><TD>2</TD> <TD>3</TD><TD>4</TD> Tulos: Reunat saadaan lisäämällä BORDER attribuutti esim. <TABLE BORDER=2> Taulukon leveys saadaan määrättyä WIDTH attribuutilla esim. <TABLE WIDTH=80%> olisi taulukon leveys 80% sivusta. Taulukon korkeus saadaan määrättyä HEIGHT attribuutilla esim. <TABLE HEIGHT=200> olisi taulukon korkeus 200 pikseliä. Taulukon vaakasuora tasaus saadaan ALIGN määrellä esim. <TABLE ALIGN=RIGHT> Taulukon pystysuora tasaus saadaan VALIGN määrellä, joka voi saada arvot TOP, BOTTOM, MIDDLE esim. <TABLE VALIGN=MIDDLE>
7 Jos tahdot yhdistä soluja, niin riveillä se tapahtuu COLSPAN määrellä esim. <TD COLSPAN=3> tekee tästä solusta 3 solun levyisen sarakkeissa se tapahtuu ROWSPAN määreellä esim. <TD ROWSPAN=2> yhdistää tämän ja alemman solun CELLSPACING attribuutilla voidaan määrätä paljonko solujen väliin jää tilaa CELLPADDING attribuutilla voidaan määrätä paljonko solun reunan ja sisällön väliin jää tilaa Taulukon solujen taustavärin voi muuttaa BGCOLOR määrellä Tehtäviä: 1. Tee taikaneliö Taikaneliö Tee taulukko ja laita taulukon soluihin kuvia
8 HTML6 Median (musiikki, video flash-animaatio yms.) lisääminen web-sivulle. Media voidaan upottaa websivustoon EMBED-tagillä. Esim. Videotiedosto omaelokuva.avi liittäminen web-sivulle. <EMBED SRC= omaelokuva.avi > EMBED-tagiin voi liittää seuraavat määreet. WIDTH leveys HEIGHT korkeus HIDDEN vaihtoehdot TRUE/FALSE näkyykö esim. musiikin tapauksessa soitin. AUTOSTART vaihtoehdot TRUE/FALSE käynnistyykö media automaattisesti. LOOP montako kertaa media soitetaan/esitetään. VOLUME äänen voimakkuus CONTROLLER näytetäänkö soitin CONTROLS mitä soittimen ominaisuuksia voi käyttää vaihtoehdot VOLUMELEVER STOPBUTTON PAUSEBUTTON PLAYBUTTON SMALLCONSOLE CONSOLE <NOEMBED> Mitä näytetään vaihtoehtoisesti </NOEMBED> InternetExplorerissa saa äänen soimaan taustalla BGSOUND-tagillä <BGSOUND SRC= omamusa.mp3 LOOP=2> soittaa omamusa.mp3 kahdesti. LOOP=INFINITE olisi loputon.
9 Tavallisimpia mediatiedostoja (tiedostopäätteet) Ääni wav (Wave) mp3 (MPEG-1 Audio Layer 3) au Video wmv (Windows media) mpeg,mpg (Moving Picture Expert Group) avi (Audio Video Interleave) mp4 (MPEG-4) qt (Quicktime) rm (Realmedia) Flash swf (Shockwave Flash) Tehtäviä: 1. Etsi musiikkitiedostoja ja musiikinpätkiä tai mitä vain äänitiedostoja ja liitä omalle websivulle. (Googleen hakusananksi mp3 audio sample) Tiedostotyypit: wav, mp3, au 2. Etsi videoklippejä jotka voit liittää omalle websivulle. (Googleen hakusanaksi avi video sample) Tiedostotyypit: mpeg, avi, wmv 3. Liitä flashanimaatio tai flashvideoklippi websivullesi. Esim. Youtube. Tiedostotyyppi: swf
10 HTML7 Kohde ikkuna. Linkkien yhteydessä voidaan valita mihin ikkunaan linkki avataan. TARGET-attribuutti kertoo mihin ikkunaan linkki avataan. TARGET voi saada arvokseen Ikkunan nimen (linkki avataan kyseisen nimisessä ikkunassa) _blank(linkki avataan uuteen ikkunaan) _parent(linkki avataan ylempänä hierarkiassa olevaan kehykseen tai ikkunaan) _top(avaa ylimpänä hierarkiassa olevaan kehykseen tai ikkunaan) _self(linkki avataan kuten ilmankin target määrettä) Esim. Avataan linkki uuteen ikkunaan <A HREF= webbisivu.html TARGET= _blank >Klikkaa tähän</a> Kehykset Kehyksillä on tarkoitus jakaa ikkuna useampaan osaikkunaan (kehykseen). Pääsivu esim. Paasivu.html <HTML> <HEAD></HEAD> <FRAMESET COLS= 30%,70% > <FRAME NAME= ekakehys SRC= eka.html > <FRAME NAME= tokakehys SRC= toka.html > </FRAMESET> <NOFRAMES> <BODY> Selain ei tue kehyksiä. </BODY> </NOFRAMES> </HTML>
11 Ensimmäinen kehys voisi sisältää linkkiluettelon, josta klikkaamalla sivut aukeavat toiseen kehykseen. eka.html <HTML> <BODY> <A HREF= TARGET= tokakehys >Tampere</A><br> <A HREF= TARGET= tokakehys > Turku</A><br> <A HREF= TARGET= tokakehys > Helsinki</A><br> <A HREF= toka.html TARGET= tokakehys > Alkuun</A><br> </BODY> </HTML> Määreitä FRAMESET yhteydessä: COLS miten jaetaan pystysuoriin kehyksiin ROWS miten jaetaan vaakasuoriin kehyksiin FRAME yhteydessä: FRAMEBORDERS Tuleeko reunat kehyksiin (1 tai 0) SCROLLING Tuleeko vierityspalkit (YES, NO, AUTO) NORESIZE Voiko käyttäjä muuttaa kehysten kokoa (NORESIZE) IFRAME voidaan tehdä websivun sisään kehyksiä (kaikki selaimet eivät välttämättä tue) <IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> Selaimesi ei tue dokumentin sisäisiä kehyksiä </IFRAME>
12 HTML8 Lomakkeet. Lomakkeita muodostetaan FORM-tagillä. Lomakkeen elementteinä voivat toimia: Tekstilaatikot: Suorakulmainen alue johon voidaan kirjoittaa esim. salasana Tekstialueet: Suorakulmainen alue, johon voidaan kirjoittaa vaikkapa pitkä tarina Radionapit: Nappeja joista vain yksi kerrallaan voi olla valittuna Valittava laatikko: Rastitettavat ruudut Valikot: Laatikko, josta voidaan valita eri vaihtoehdoista hiirellä Reset painike: Lomakkeen tietojen tyhjennys Elementtejä lisätään INPUT-tagillä ja valikot SELECT-tagillä. Esim. <FORM name= lomake > <INPUT TYPE=TEXT NAME= tekstilaatikko MAXLENGHT=30 SIZE=15 VALUE= Kirjoita tähän ><BR> Salasanasi <INPUT TYPE=PASSWORD NAME= salasana MAXLENGHT=30 SIZE=15 VALUE= ><BR>
13 <TEXTAREA NAME= tekstialue ROWS=6 COLS=40 WRAP=OFF (muut vaihtoehdot soft ja hardl) VALUE= Kirjoita tähän paljon tekstiä >Kirjoita</TEXTAREA><BR> Punainen <INPUT TYPE=RADIO NAME= radionapit VALUE= Punainen > Vihreä <INPUT TYPE=RADIO NAME= radionapit VALUE= Vihreä > Sininen <INPUT TYPE=RADIO Tykkään rasteista NAME= radionapit VALUE= Sininen ><BR> <INPUT TYPE=CHECKBOX NAME= valintaruutu VALUE= Tykkään rasteista ><BR> <SELECT NAME= valikko > <OPTION VALUE= Punainen >Punanen</OPTION> <OPTION VALUE= Vihreä >Vihreä</OPTION> <OPTION VALUE= Sininen >Sininen</OPTION>
14 <OPTION VALUE= Musta SELECTED>Musta</OPTION> </SELECT><BR> <INPUT TYPE=RESET VALUE= Tyhjennä ><BR> </FORM> Painikkeita voidaan lisätä BUTTON-tagillä <BUTTON TYPE=BUTTON NAME= painonappi VALUE= Painettu >Tökkää nappia</button> Muita vaihtoehtoja Tiedoston valitseminen lähetettäväksi <INPUT TYPE=FILE> Kuvallinen painike <INPUT TYPE=IMAGE SRC= kuva.jpg ALT= Kuva ei näy, tästä painat > Tehtäviä: 1. Tee lomake, joka kyselee käyttäjältä Nimen, Osoitteen, Lempivärin, Salaisen tervehdyksen, Pyytää kertomaan itsestään sekä sisältää kuvallisen lähetä painikkeen, Tee myös muutama muu kysymys, johon voit käyttää rasti ruutuun menetelmää. Lomakkeessa on myös tyhjennys-painike. Valitse järkevät lomakkeen elementit.
15 HMTL META META-tagilla, annetaan yleistä tietoa HTML-dokumentista esim. hakukoneiden kuten google avuksi. META tagit sijoitetaan HEAD osaan dokumentissa. METAtagilla ei ole lopetustagia </META>. esim. <HEAD> <META name= description content= HTML OHJEITA > <META name= author content= Olli Opettaja > </HEAD> META-tagissa on kaksi määrettä name ja content eli name kerrotaan dokumentin ominaisuuden nimi ja content sisältää ominaisuuden. Lisää esimerkkejä: <meta name="content-language" content="fi"> <meta name="robots" content="index, follow"> <meta name="description" content="sivujen kuvaus omin sanoin"> <meta name="keywords" content="avainsanat"> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="pragma" content="no-cache"> <meta http-eguiv="expires" content="0"> <meta http-equiv="refresh" content="1200"> <meta http-equiv="expires" content="now"> <meta http-equiv="window-target" content="_top"> <meta name="copyright" content=" Copyright 2004, Etunimi Sukunimi"> <meta name="author" content="etunimi Sukunimi"> <meta name="publisher" content="etunimi Sukunimi"> <meta name="pagetopic" content="internet"> <meta name="pagetype" content="html-formular"> <meta name="audience" content="experts"> Käytetty kieli Robotit seuraavat linkkejä jotka ovat etusivullasi Sisältö omin sanoin Avainsanat jotka sivulla esiintyvät Sivujen tyyppi texti/html Sivu ladataan joka kerta uudestaan palvelimelta. (ei käytetä sivu välimuistia) Sivu ei tallennu välimuistiin (tuorein versio sivusta avautuu) Ladataan palvelimelta 20 minuutin välein kun sivu auki Vanhentumis aika Uusi sivu Tekijänoikeus Tekijä Julkaisija Sivujen kohde Sivutyyppi Kohderyhmä
16 Sivun avaustyylit content="blendtrans(duration=1.0)"> content="revealtrans(duration=1.0,transition=0)"> content="revealtrans(duration=1.0,transition=1)"> content="revealtrans(duration=1.0,transition=2)"> content="revealtrans(duration=1.0,transition=3)"> content="revealtrans(duration=1.0,transition=4)"> content="revealtrans(duration=1.0,transition=5)"> content="revealtrans(duration=1.0,transition=6)"> content="revealtrans(duration=1.0,transition=7)"> content="revealtrans(duration=1.0,transition=8)"> content="revealtrans(duration=1.0,transition=9)"> content="revealtrans(duration=1.0,transition=10)"> content="revealtrans(duration=1.0,transition=11)"> content="revealtrans(duration=1.0,transition=12)"> content="revealtrans(duration=1.0,transition=13)"> content="revealtrans(duration=1.0,transition=14)"> content="revealtrans(duration=1.0,transition=15)"> content="revealtrans(duration=1.0,transition=16)"> content="revealtrans(duration=1.0,transition=17)"> content="revealtrans(duration=1.0,transition=18)"> content="revealtrans(duration=1.0,transition=19)"> content="revealtrans(duration=1.0,transition=20)"> content="revealtrans(duration=1.0,transition=21)"> content="revealtrans(duration=1.0,transition=22)"> content="revealtrans(duration=1.0,transition=23)"> Avautuu pehmeästi 1 ssä Siirtymä reunoista neliönä 1 ssä Siirtymä keskeltä neliönä 1 ssä Siirtymä reunoista ympyränä 1 ssä Siirtymä keskeltä ympyränä 1 ssä Siirtymä alhaalta 1 ssä Siirtymä ylhäältä 1 ssä Siirtymä vasemmalta 1 ssä Siirtymä oikealta 1 ssä Pystysuuntaiset kaihtimet 1 ssä Vaakasuuntaiset kaihtimet 1 ssä Sakkiruudut vaakasuunnassa 1 ssä Sakkiruudut pystysuunnassa 1 ssä Satunnainen hajonta 1 ssä Siirtymä reunoista pystysuunnassa 1 ssä Siirtymä keskeltä pystysuunnassa 1 ssä Siirtymä reunoista vaakasuunnassa 1 ssä Siirtymä keskeltä vaakasuunnassa 1 ssä Sahalaita ylhäältä vasemmalle 1 ssä Sahalaita ylhäältä vasemmalle 1 ssä Sahalaita alhaalta vasemmalle 1 ssä Sahalaita ylhäältä oikealle 1 ssä Sahalaita alhaalta oikealle 1 ssä Viivat vaakasuunnassa 1 ssä Satunnainen 1 ssä
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
Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.
WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)
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
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
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
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.
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
ICT1TN004. Lomakkeet. Heikki Hietala
Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen
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
HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
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...
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ö,
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.
Tietosuoja-portaali. päivittäjän ohje
Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan
Digitaalisen median tekniikat xhtml - jatkuu
Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1 Kehykset IFRAME - elementti (inline frame) mahdollistaa kehysten upottamisen myös muihin kuin frameset.dtd:n mukaisiin dokumentteihin IFRAME toimii
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
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,
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
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
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
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,
HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...
HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...
Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014
Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina
Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä.
Lomakkeet Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeen tyylit kannattaa määritellä omaan, eriliseen,
KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN
KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN -Mene osoitteeseen keskustanuoret.fi/user - Kirjoita saamasi käyttäjätunnus ja salasana - Klikkaa yllä olevaa piirisi logoa niin
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
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
Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
Digitaalisen median tekniikat xhtml Harri Laine 1
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
Suvi 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ää
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.
UpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
KURSSIX: KURSSIEN HALLINTA -OHJELMA. Kurssix-ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3
1 KURSSIX: KURSSIEN HALLINTA -OHJELMA -ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3 Kurssin luominen Kurssin lisääminen 4 Kurssitietojen muuttaminen 5 Kurssin poistaminen 5 Kurssin opettajan määrittely
6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)
6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren
Tärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu...
Tärkeimmät toiminnot Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta Kun hiiren jättää kuvakkeen päälle vähäksi ajaksi Word selittää toiminnon Avaa tiedosto Tallenna Kumoa, nuolesta aiemmat
Kyläsivujen InfoWeb-ohje
Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina
Kuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
Digitaalisen median tekniikat xhtml - jatkuu
Digitaalisen median tekniikat xhtml - jatkuu 26.3.2004 Harri Laine 1 Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite
Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1
Digitaalisen median tekniikat xhtml - jatkuu 30.4.2004 Harri Laine 1 XHTML lomakkeet Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite
STS Uuden Tapahtuma-dokumentin teko
STS Uuden Tapahtuma-dokumentin teko Valitse vasemmasta reunasta kohta Sisällöt. Sisällöt-näkymä Valitse painike Lisää uusi Tapahtuma 1 Valitse kieleksi Suomi Välilehti 1. Perustiedot Musta reunus kieliversioneliön
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
Google-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
Editorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
Oma kartta Google Maps -palveluun
TAMPERE 1 (6) Oma kartta Google Maps -palveluun Google Maps palveluun on mahdollista luoda karttoja omilla paikkamerkeillä. Tilin luonti Google-palveluihin Tehdäksesi karttoja omilla paikkamerkinnöillä,
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
KÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla
GEOS 1 Ilmastodiagrammi Libre Office Calc ohjelmalla Libre Office Calc ohjelman saat ladattua ilmaiseksi osoitteesta: https://fi.libreoffice.org/ Tässä ohjeessa on käytetty Libre Office Calc 5.0 versiota
Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje
Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja Julkaisujärjestelmän ohje 2014 2 PM-Julk aisujärjestelmän perusohjeet Julkaisujärjestelmän käyttöönotto Julkaisujärjestelämän avulla voit itsenäisesti muokata
1 Dreamweaver MMX. 2 Tekstin muokkaus
1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta
Taulukot. 2002 Päivi Vartiainen 1
Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit
Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla
Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Avaa Paint.NET tuplaklikkaamalla sen pikakuvaketta. Paint.NET avautuu tämän näköisenä. Edessä on tyhjä paperi. Saadaksesi auki kuvan, jota aiot pienentää
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
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
EeNet materiaalit ohje
EeNet materiaalit ohje EeNetin materiaaleissa voidaan ladata ja jakaa materiaaleja sekä katsoa ja keskustella materiaaleista. Materiaalit voivat olla teksti-, kuva tai videotiedostoja. Videoihin voidaan
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)
Kurssin asetuksista Kurssin asetukset voidaan muuttaa Kurssin ylläpidon kautta. Moodle ( Mervi Ruotsalainen)
1 Moodle 21.9.2017 ( Mervi Ruotsalainen) Sisällys Kurssin asetuksista... 1 LOHKOT... 3 Sisällön tekemisestä... 4 Lisää aktiviteetti tai aineisto AIHEESEEN... 5 Tekstin ja kuvan, videon, äänitiedoston tai
HTML perusteita (ei julkiseen jakeluun)
HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä
Moodle 2.2 pikaohje. 1. Kirjautuminen ja omat kurssit (Työtilat) 1. Mene internet-selaimella osoitteeseen
Moodle 2.2 pikaohje 1. Kirjautuminen ja omat kurssit (Työtilat) 1. Mene internet-selaimella osoitteeseen https://moodle2.pkky.fi Kirjaudu omilla kuntayhtymän verkkotunnuksilla klikkaamalla Kirjaudu linkkiä
KÄYTTÖOHJE LATOMO VERSO
Kirjautuminen Kirjatuminen järjestelmään tapahtuu syöttämällä ylläpitäjältä (yleensä sähköpostilla) saatu käyttäjätunnus ja salasana niille varattuihin kenttiin. Jos olet unohtanut salasanasi voit syöttää
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
Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:
HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis
Sivueditorin käyttöohje
Sivueditorin käyttöohje Voit tehdä tyylikkäät nettisivut yrityksellesi sivueditorilla. Sivueditorin avulla on helppoa päivittää ja ylläpitää sivuja silloin, kun sinulle parhaiten sopii. Aloittaaksesi tarvitset
TAULUKKO, KAAVIO, SMARTART-KUVIOT
PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden
5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4
51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja,
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 5/8: Mediaelementit Edellinen
Kopiodaksesi, leikataksesi ja liittääksesi helpointa on käyttää näppäimistön pikavalintoja:
Ohjeita järjestöpankin käytön tueksi Huomioitavaa:... 1 1 Sisäänkirjautuminen... 2 2 Sivun/henkilökortin muokkaaminen... 2 3 Uutisen/sivun/tapahtuman, tms. lisääminen... 3 4 Uutisen/tapahtuman saaminen
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
1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut
1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...
SPORTTISAITTI KÄYTTÖOHJE
MUOKKAUSTILA Muokkaustilaan siirtyminen Siirry muokkaustilaan klikkaamalla copyright ( )- merkkiä omalla sivustollasi (esim. seurannimi.sporttisaitti.com). Merkki löytyy sivun alareunasta. Kirjoita käyttäjätunnus
Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome
Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn
VIENET 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:
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
Artikkelin lisääminen
Sisällys Artikkelin lisääminen...3 Artikkelin muokkaaminen...5 Kuvan lisääminen artikkeliin...6 Väliotsikoiden lisääminen artikkeliin...9 Navigointilinkin lisääminen valikkoon...10 Käyttäjätietojen muuttaminen...13
HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE
KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö
Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne
05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
Lappi.fi -pikaohje Kittilän kylille:
Lappi.fi -pikaohje Kittilän kylille: Tämän pikaohjeen avulla pääsette alkuun sivujenne tekemisessä, mutta suosittelemme täydellisten Lappi.fi -ohjeiden lukemista ennen sivujenne tekemistä. Ohjeet löytyvät
Päivitysperiaatteet: Verkkosivuja päivitetään selainpohjaisella WordPress-ohjelmalla, pikaohje seuraavilla sivuilla.
18.4.2017 KS2019-nettisivuston päivitysperiaatteet- ja pikaohjeet Nettisivujen www.ks2019.fi pääpäivitysvastuu: - maakuntauudistus-viestintä ja yleinen: Virpi Heikkinen, Keski-Suomen liitto - sote-viestintä:
Routa Markkinointi. Ohjeet päivitystyökalun käyttöön
Routa Markkinointi Ohjeet päivitystyökalun käyttöön 1 Kirjautuminen... 3 Sivujen päivitys... 3 Widgetit...3 Muutosten julkaiseminen tai tallentaminen... 4 Uuden sivun lisääminen... 5 Sivun poistaminen...
RATKAISUT SIVU 1 / 15. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa.
RATKAISUT SIVU 1 / 15 PowerPoint jatko Harjoitus 3.1-3.7: Harjoitus 3.1: Avaa ensin Harjoitustiedosto.pptx. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa. Valitse joka tapauksessa
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#
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.
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
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
Ensin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat
Microsoft Office 2010 löytyy tietokoneen käynnistä-valikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,
Uutiskirjesovelluksen käyttöohje
Uutiskirjesovelluksen 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 2 Sisällys Johdanto... 1 Päänavigointi...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;
Fotometal-studiojalustojen hinnasto
PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE
PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE IT-palvelut / Hannele Rajaniemi optima-support@jyu.fi www.jyu.fi/itp/optima-ohjeet 2 Sisältö Mikä on koosteen idea? Miten saan kooste-työkalun käyttööni? Miten luon koosteen?
1. HARJOITUS harjoitus3_korjaus.doc
Word - harjoitus 1 1. HARJOITUS harjoitus3_korjaus.doc Kopioi itsellesi harjoitus3_korjaus.doc niminen tiedosto Avaa näyttöön kopioimasi harjoitus. Harjoitus on kirjoitettu WordPerfet 5.1 (DOS) versiolla
SeaMonkey pikaopas - 1
SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston
Outlook Web Access 1(7) 9.9.2011 OUTLOOK WEB ACCESS (OWA) SÄHKÖPOSTIN KÄYTTÖ
Outlook Web Access 1(7) OUTLOOK WEB ACCESS (OWA) SÄHKÖPOSTIN KÄYTTÖ Pääset OWA-sähköpostiin selaimella (esim. Internet Explorer, Mozilla Firefox). Tässä ohjeessa on käytetty Internet Exploreria, jonka
ICT1TN004 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
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
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
Osaamispassin luominen Google Sites palveluun
n luominen Google Sites palveluun Mikä Osaamispassi on? Osaamispassi auttaa kertomaan taidoistasi, koulutuksestasi, työkokemuksestasi ja sinua kiinnostavista asioista työnantajalle kun haet työtä. Osaamispassi
KOTISIVUKONE ULKOASUEDITORI
KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen
H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet
H6: Tehtävänanto Taulukkolaskennan perusharjoitus Ennen kuin aloitat harjoituksen teon, lue siihen liittyvä taustamateriaali. Se kannattaa käydä läpi kokeilemalla samalla siinä annetut esimerkit käyttämässäsi