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>
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 http://www.sivut.org/html/
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
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= http://www.tampere.fi >Heippa!</A></P> Esim. Kuvaa napauttamalla siirtyminen Tampereen kotisivuille <A HREF= http://www.tampere.fi ><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>
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 http://personal.inet.fi/koti/petri.vuorenmaa/html/uml.html
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: 1 2 3 4 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>
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ö 2 7 6 9 5 1 4 3 8 2. Tee taulukko ja laita taulukon soluihin kuvia
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.
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
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>
Ensimmäinen kehys voisi sisältää linkkiluettelon, josta klikkaamalla sivut aukeavat toiseen kehykseen. eka.html <HTML> <BODY> <A HREF= http://www.tampere.fi TARGET= tokakehys >Tampere</A><br> <A HREF= http://www.turku.fi TARGET= tokakehys > Turku</A><br> <A HREF= http://www.helsinki.fi 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>
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>
<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>
<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.
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-8859-1"> <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ä
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ä