Verkkopedagogikka

HTML

HTML:n perusteiden ymmärtäminen on ensiarvoisen tärkeää. HTML:n opetteleminen luo pohjan kaikelle mikä liittyy www-sivujen tekemiseen. Lisäksi on syytä ihmetellä, että miksi asioita tehdään väärin tavalla jossa ongelman ratkaisu luo uuden ongelman. Vielä enemmän on syytä ihmetellä, että miksi sivut tehdään usein hankalasti editorilla kuten esim. Dreamweaver-ohjelmalla. HTML-koodin kirjoittaminen suoraan vaikka muistioon on nopeampaa ja sivut toimivat varmemmin kuin editorin koodauksen jälkeen. HTML:n opettelu vie hetken aikaasi, mutta palkitsee runsain mitoin jo viikon harjoittelun jälkeen.

Etkö ole koskaan kuullut puhuttavan HTML:stä? Jos aihe kuvataan lyhyesti, voidaan sanoa, että HTML on se, jota juuri parhaillaan katselet. Websivut näytetään lähes poikkeuksetta HTML-koodin avulla. Yksi www-sivu voi sisältää esim. tekstiä, ääntä, videota, animaatiota ja tekstejä. HTML määrittelee sivun rakenteen, se kertoo mihin kuvat sijoitetaan, mille sivuille linkitetään, missä otsikko, missä leipäteksti jne.

"HTML on liima, jonka avulla verkkosivuja kasataan." (IT Plus 2/2001, 89).

HTML on lyhenne sanoista HyperText Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään html-dokumentit sisältävät paljon muutakin kuin pelkästään tekstiä ja linkkejä. Nykyaikaiset www-sivut voivat olla varsin monipuolisia. Koska lähes kaikki web-sivut on tehty käyttäen HTML-kieltä, pidetään HTML:n hallitsemista yleisesti niin tärkeänä. Kyseessä ei kuitenkaan ole mikään varsinainen ohjelmointikieli vaan lähinnä HTML on sivunkuvauskieli. Ehkä juuri siksi HTML:n oppiminen on suhteellisen helppoa, koska ohjelmointitaitoja ei vaadita lainkaan. 

HTML-koodia tarvitaan, jotta www-selain voisi tulkita dokumentin sisällön. Selaimella tarkoitetaan ohjelmaa, jonka avulla tarkastelemme www-sivuja. Tunnettuja selaimia ovat Internet Explorer, Firefox, Sahara ja Opera. Jotta kaikki selaimet osaisivat näyttää sivut samalla tavalla, on luotu standardi. Tämän hetken standardi tunnetaan nimellä HTML 4.01.

HTML esimerkki

HTML-kielestä pääsee helpoiten jyvälle tarkastelemalla valmista koodia. Siksi esimerkki, mutta sitä ennen muutama perusasia.

1. html-tiedoston ääte on joko .htm tai .html 
2. html-sivuja luetaan selaimella (esim. Internet Explorer, Firefox, Chrome) 
3. html-koodi kirjoitetaan tageilla (esim tämä lihavoi <b>lihavaa tekstiä</b> 
4. html-koodia voidaan kokeilla omalla koneella
5. html-sivu näkyy netissä, kun se laitetaan jollekin palvelimelle

Tässä pieni esimerkki HTML-koodilla tehdystä sivusta. Ensin koodi.

Ja tässä alla lopputulos selaimen kautta katsottuna. 

HTML taipuu moneen

HTML oli aluksi pelkkää linkitettyä tekstiä. Pian kuvat tulivat mukaan, mutta paine kasvoi jatkuvasti uusien toimintojen saamiseksi mukaan. Tässä alla muutamia esimerkkejä siitä, että HTML:n kautta sivuille saadaan mm flashiä, videota ja javascritiä.

• Lumiukkopeli, joka on toteutettu Flash tekniikalla. Liikkuminen tapahtuu nuolinäppäimillä.
• Videot, Vidleristä videot haettu telkkariin
• Gamemakerillä tehty peli, mutta joka koneelta voi lähettää tuloksensa nettiin.
• Javascript, joka sekoittaa kirjainten järjestyksen.

Kuinka tarkastella HTML sivua?

Web-sivujen teko HTML-kielellä on kiitollista puuhaa siinä suhteessa, että näet helposti työsi jäljen vaikka et laittaisi sivua välittömästi nettiin. Nykyään jokaisessa tietokoneessa on selain, muuta ei sivun tarkastelemiseen tarvita. 

Kirjoita ensin pieni esimerkki HTML-kielellä vaikka tähän tapaan.

NoteTab Lightin kautta pääset tarkastelemaan lopputulosta painamalla maapallon kuvaketta, jossa on suurennuslasi.



Mutta katsotaan vielä kuinka homma hoituu selaimen kautta.

1) Avaa www-selain esim Internet Explorer.



2) Valitse Tiedosto ja Avaa.



3) Etsi tiedosto ja klikkaa "Avaa". Tässä tapauksessa tiedosto on koe3.htm.



4) Valitse ok.



5 )Katso lopputulos.


Tavallisia virheitä

HTML on helppo, mutta virheitä sattuu silti. Yksi tavallinen virhe on käyttää muistiota ja unohtaa tallentaa html-päätteellä. Silloin prosessi menee näin kuten alla.

 

Oikea tapa olisi tämä 

Millä HTML-sivuja tehdään?

HTML-sivun tekeminen onnistuu pelkällä muistiolla, jollainen apuohjelma löytyy jokaisesta koneesta. Windowsista Muistio löytyy apuohjelmista. HTML-koodia ei missään tapauksessa pidä kirjoittaa esim. Word-ohjelmalla, koska se tallentaa kaiken tekstiksi. HTML-koodia voidaan kirjoittaa millä tahansa editorilla, esim. juuri muistiolla. Toisaalta pelkkä muisto on huono ratkaisu. Nykyään on onneksi olemassa myös kunnollisia editoreita ja vieläpä ilmaiseksi. Hyvällä editorilla on oltava seuraavat ominaisuudet:

• syntaksin korostus (esim. eri väri)
• rivinumerointi
• mahdollisuus pitää monta ikkunaa auki yhtä aikaa.

Nuo kaikki edellä mainitut ominaisuudet puuttuvat muistiolta, joten siksi se on huono valinta. Suositeltavampia vaihtoehtoja on tarjolla, jopa ilmaiseksi. Alla lista ilmaisista editoreista. Erityisen suositeltavia ovat ne editorit, joissa doctypen määrittely on ominaisuutena ja löytyy helposti. Sellaisia tekstipohjaisia editoreita ovat Alleycode HTML Editor ja NoteTab Light.

• AceHTML (sekava)
• Alleycode HTML Editor (helppokäyttöinen ja suositeltava)
• Arachnophilia (klassikko vailla vertaa)
• Crimson Editor (monen suosikki, mutta kehitystyö loppunut?)
• EasyHTML (kotimainen, mutta onko jo liian sekava?)
• EditPad Lite (kätevä, mutta onko tarpeeksi toimintoja?)
• HTML-kit (paljon toimintoja, ehkä liikaakin)
• NoteTab Light (huippu ja suositeltava)
• MysticML (mielenkiintoisen hyvä ja kotimainen)
• Notepad++ (saatavilla myös suomeksi ja tällä hetkellä suosikkini) 

HUOM! Applelle on omat editorit. Katso esim linkkiä: Top 10 Free Mac OS Text Editors For Web Developers

On olemassa myös helpompia tapoja koodata www-sivuja kuin pelkät tekstipohjaiset editorit. WYSIWYG-editoreiden käyttö ei kuitenkaan ole suositeltavaa. Niillä voi pärjätä ihan hyvin, mutta jos ongelmia ilmenee, olet pulassa. Yleensä wysiwyg-editorit tekevät sekavaa HTML-koodia. Lisäksi jos tähtäät websuunnittelijaksi, unohda wysiwyg editorit ainakin hetkeksi. Tai jos ihan välttämättä haluat käyttää (ongelmia luvassa, älä kysy muilta miksei tämä sivu toimi) niin valitse jokin ilmaisversio.

"WYSIWYG on lyhenne englanninkielisistä sanoista What You See Is What You Get, suomeksi kutakuinkin mitä näet, sellaisen saat. Kyseistä lyhennettä käytetään tietynlaisissa tekstinkäsittely ohjelmissa ja erilaisissa editoreissa, joissa ohjelma esittää asiakirjan tai tiedoston kokoajan sellaisena miltä se tulee näyttämään kun asiakirja tulostetaan tai esim. miltä HTML-dokumentti näyttää kun se avataan selaimessa." (Wikipedia.)

Hyviä ilmaisia wysiwyg-editoreita ovat mm seuraavat:

• NVU (helppokäyttöinen)
• Kompozer (lupaava NVU:n jälkeläinen)
• Amaya (erikoinen käyttöliittymä, mutta hallitsee myös MathML:n)
• Selida
• PageBreeze
• Trellian (näyttää lupaavalta, selkeä ja paljon ominaisuuksia) 
• DynamicHTMLEditor

Kaupallisista ykkönen on Dreamweawer, perässä tulee GoLive ja sitten kolmantena Microsoftin Expression Web. Nykyään kaupalliset editorit alkavat jo olla aika hyviä, mutta verrattuna tekstieditoreihin varsin kömpelöitä. WYSIWYG-edotorit ovat kehittyneet pitkin harppauksin myös online palveluina. Siksi useimmat julkaisujärjestelmät ovat niin helppokäyttöisiä. Tunnetuimpia online WYSIWYG editoreita ovat FCK, CKEditor ja Tinymce.

HTML - HTML 4.0.1

HTML on vanha keksintö ja siitä on olemassa useita versioita. Suosittelen kuitenkin, että keskityt pelkästään uusimman opetteluun eli version 4.0.1. HTML 4.0 otettiin käyttöön jo 1997. Seuraava versio eli 4.01 julkaistiin 24 joulukuuta 1999, mutta vieläkään kaikki selaimet eivät tue sen kaikkia attribuutteja.

Poistetut elementit

HTML 4.01:stä on poistettu kolme elementtiä kokonaan. Tosin ne on kaikki helppo korvata elementillä <pre>. Poistetut elementit ovat:

• listing
• plaintext
• xmp

Lakkautusuhan alla olevat elementit

Lakkautusuhan alla olevat elementit toimivat vielä, mutta jatkossa niiden tilalla tulisi käyttää CSS:ää. On kuitenkin huomioitava, etteivät kaikki selaimet välttämättä tue täysin HTML 4.0:aa. Siksi lakkautusuhan alla olevia elementtejä voi vielä käyttää ja kannattaa käyttää, kunhan vaan muistat käyttää oikeaa Doctypeä:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Lakkautusuhan alla ovat applet (object korvaa) ja isindex (input korvaa). Sitten on vielä basefont, center, font, strike ja u, jotka korvataan CSS:llä.

Uudet elementit

HTML 4.0 on tuonut mukanaan myös uusia elementtejä. Mikäli haluat tarkastella täsmällistä listaa katso se W3C:n sivuilta. Uusia elementtejä ovat esim. abbr - looginen lyhenne

<abbr>esim</abbr>, jos haluat kertoa, että kyse on suomenkielisestä lyhenteestä niin sitten näin:

<abbr lang="fi">m.m</abbr>

bdo - lukusunnta esim suomea luetaan vasemmalta oikealle.

• <bdo dir=rtl> </bdo> - oikealta vasemmalle

• <bdo dir=ltr> </bdo>- vasemmalta oikealle

del - muutos eli tekstiä poistettu:

<del>poistettu</del>

ins -lisätty jälkikäteen

<ins>lisätty jälkikäteen</ins>

Yhdistelmä elementeistä del ja ins voisi olla vaikka näin:

Uusi kilohinta on <del>49 euroa</del><ins>50 euroa</ins>

span - paikan merkitsijä CSS:ää varten

<span style="color: red">Punaista tekstiä</span> 

HTML-sivun rakenne

HTML-koodissa on seitsemän tagia, jotka määrittelevät pelkästään sivun rakennetta, ne ovat html, head, body, div ja span. Kaksi puuttuvaa ovat H ja P, joista myöhemmin lisää.

Html

Jokainen HTML-sivu alkaa tagilla <HTML> ja päättyy tagiin </HTML>. Sillä ei ole väliä kirjoiteaanko <html> vaiko <HTML>. HTML-on juurielementti ja sen tulisi sisältää elementit head ja body.

Head

Head-tagin sisään kirjoitetaan metatietoja, tyylitietoja ja skriptejä. Tärkein elementti sen sisällä on <title>, joka määrittää sivulle otsikon. Head-tagi päätetään juuri ennen body- tagia. HEAD-elementti on pakollinen ja sitä käytettään vain yhden kerran per sivu. Sivulla ei voi olla kahta head-tagia. Ei siis voi olla näin kuten alla olevassa kuvassa.

Body

Body tagin sisään tulee sivun kaikki sisältö. Body tagi alkaa välittömästi, kun head-tagi päättyy. Jokaisen sivun toiseksi viimeisen tagin tulisi olla </body>.

Div

Div-tagilla voidaan ryhmitellä lohkoelementtejä. Sitä käytetään esim. dokumentin tietyn osan fontin tai taustavärin tai sijoittelun apuna. Yleensä Div-tagit liittyvät css-muotoiluihin eli ne eivät tee itsessään mitään ulkoasumuunnoksia paitsi, että ne muodostavat kappaleen.

Span

SPAN ja DIV toimivat pitkälti samalla tavalla, mutta DIV aiheuttaa määrittämänsä alueen muuttumisen omaksi kappaleeksi. Yleensä sitä tarvitaan CSS:ää varten.

HTML:n osalta DIV ja SPAN voivat tuntua tarpeettomilta, koska ne eivät tee mitään näkyvää. Niistä saadaankin hyöty irti vasta, kun niihin lisättään CSS-tyylimäärittelyt. Tämän kurssin piiriin CSS ei kuitenkaan kuulu.

Rakenteellisesti oikein tehty HTML-sivu on esim. tällainen kuten alla olevassa kuvassa.

Kappaleet ja otsikot HTML:ssä

HTML-sivu ei olisi mitään ilman tekstiä. Nyt keskitytään siihen, että sivuille saadaan tekstiä, koska ilman tekstiä sivut olisivat aika kuivat.

P-tagia <p> tarvitaan lähinnä leipätekstiä varten. Sen avulla kappaleet erotellaan toisistaan. Tässä pieni esimerkki.

<p>Olen jalkapalloileva kasvatustieteilijä,  
jonka työpaikkana on Otavan Opisto. Jalkapalloa  
pelaan Mäntyharjun Jäntevässä. </p><p>Suuria saavutuksia  
en ole jalkapalloilijan uralla kokenut kuten ei  
Jänteväkään, mutta hauskaa on ollut joka kerta,  
kun olen laittanut pelikengät jalkaani.  
</p>

Selaimessa koodi näyttää kuten alla olevassa kuvassa, jossa selainikkunaa on tahallaan pienennetty.

 Otsikkotagien avulla sivulle luodaan rakennetta. Sivun tärkein otsikko merkataan yleensä koodilla H1. Seuraavan tason otsikko koodilla H2 ja kun siitä mennään taso alemmas käytetään tagia H3.

<h1>Jari Sarja</h1><p>Olen jalkapalloileva kasvatustieteilijä,  
jonka työpaikkana on Otavan Opisto. Jalkapalloa  
pelaan Mäntyharjun Jäntevässä. </p><p>Suuria saavutuksia  
en ole jalkapalloilijan uralla kokenut kuten ei  
Jänteväkään, mutta hauskaa on ollut joka kerta,  
kun olen laittanut pelikengät jalkaani.  
</p>

Selaimen kautta tarkasteltuna yllä oleva koodi näyttää kuten tässä alla ja taas selainikkunaa on kutistettu, jotta teksti mahtuisi yhteen kuvaan.

Tässä vielä esimerkki otsikoiden kokoeroista.

HTML-koodin syntaksi

1. Ei ole väliä kirjoitatko tagit isolla vai pienellä kirjaimella. XHTML:ää ajatellen olisi hyvä opetella kirjoittamaan tagit pienellä.

2. Tagit tulee aina päättää ja mieluiten oikeassa järjestyksessä.

3. Sivun rakenne on aina se, että ensin html, sitten head ja viimeisenä body.

Sivut toimivat vaikka rikkoisit edellä olevia sääntöjä. Olisi kuitenkin hyvä oppia alusta saakka kirjoittamaan hyvää HTML-koodia, koska siitä on hyötyä mm opeteltaessa XML:ää, XSL:ää, ASP-ohjelmointia ja PHP-ohjelmointia. Lisäksi on helppo muokata ja korjata sivuja, joiden koodin on itse luonut. Muutenkin hyvin koodatut sivut näkyvät aina oikein ja latautuvat nopeasti.

Harjoitustehtäväksi suosittelen yllä olevan kaltaisen sivun tekemistä ja tarkastelua omalta koneelta. Mikäli olet epävarma, voit tarkastella esimerkin [1] sivun tekemisestä (vaatii flash-pluginin).

Metatiedot

Metatiedot sisältävät tietoja HTML-dokumentista. Niitä ei ole pakko laittaa mukaan, mutta se erittäin suositeltavaa mm. hakukoneita ajatellen. Metatietoja ei kannata kirjoittaa aina uudestaan. Suosittelisin, että kopioit valmiin pohjaan [1] ja muokkaat sen itsellesi sopivaksi. (Helpointa tallentaa siten, että linkin päällä hiiren kakkospainike ja "Tallenna kohde nimellä").

Metatiedot kirjoitetaan aina head-osion sisään, poikkeuksen muodostaa DOCTYPE. Mikään metatieto ei sinällään ole pakollinen, mutta suositeltavaa olisi, että ainakin DOCTYPE olisi mukana.

HTML 4.01sisältää kolme erilaista DOCTYPE-määriittelyä: Strict, Transitional ja Frameset.

Strict DTD

Tätä käytetään, kun halutaan ehdottoman puhdasta koodia, jossa HTML-määrittelee vain rakenteen. Siinä tapauksessa Cascading Style Sheets (CSS) määrittelee sivun ulkoasun.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD

Transitional DTD sisältää myös muotoiluja, joiden W3C olettaa vähitellen siirtyvän hoidettavaksi CSS:n avulla. Tätä suosittelen käyttämään alkuvaiheessa ja nimenomaan tämän kurssin puitteissa. Se on se jota itse tässä vaiheessa käytän. Se sallii, että voin muotoilla ulkoasua HTML:n avulla niin halutessani. Lisäksi hyvä valinta, jos sivuja katsellaan vanhalla selaimella, joka ei tue CSS:ää.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

Frameset DTD:tä käytetään, kun sivuilla on nk kehysrakenne. Frameset DTD on samanlainen kuin Transitional DTD, ainut ero on, että frameset elementti korvaa body elementin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  
"http://www.w3.org/TR/html4/frameset.dtd">

Title

Titlen avulla määritellen sivulle otsikko, joka näkyy selaimen yläpalkissa. Titlen käyttö on erittäin suositeltavaa mm. siitä syystä, että hakukoneet painottavat tiitleä. Lisäksi kun sivu laitetaan suosikkeihin, se liitetään sinne juuri titlen mukaisella nimellä.

Tässä esimerkissä title on "::Monilajinen liikuntakerho::".

Sama teksti näkyy selaimen yläpalkissa (Sininen tausta).

Kun sivua lisätään suosikkeihin haetaan jälleen title.

Link

Link-tagin avulla kirjoitetaan head osioon sisään linkki ulkoiseen resurssiin. Useimmiten on kyse CSS-tiedoston linkittämisestä. Tässä pieni esimerkki, jossa html-tiedostoon on linkitetty CSS-tiedosto tyyli.css.

Metatagit

Metatageja tarvitaan lähinnä hakukoneita varten. Niiden avulla sivut löytyvät hakukoneisen kautta paremmin kuin ilman niitä. Ilman metatagejakin siis pärjää.

Tässä joitakin tunnettuja metatageja

Lisää metatageista löydät sivustolta Html sivujen metatietoa [2].

Netissä on sivustoja, jotka määrittelevät metatagit puolestasi. Tässä yksi esimerkki [3].

Tyylimäärittelyt ja scriptit

Head-osioon voidaan suoraan kirjoittaa CSS:llä tyylimäärittelyjä, jotka eivät tosin kuulu tämän kurssin piiriin. Esimerkki kuitenkin, että mistä on kyse. CSS koodi löytyy tagien style välistä.

Head-osioon voidaan myös sijoittaa scripteja eli esim. javascript-koodia. Tässä pieni esimerkki, joka läväyttää näytölle alertin.

Tekstin tehokeinot HTML:ssä

Tehokeinojen avuilla voidaan korostaa tai merkitä tiettyä osaa tekstiä. Kyse on mm tekstin lihavoinnista, kursivoinnista, mutta toisaalta myös tavasta kirjoittaa esim. lainaukset ja määritelmät.

Fyysiset tehosteet

Tavallisia fyysisiä tehosteita ovat lihavointi <b> ja kursivointi <i>. Mutta muitakin löytyy kuten käy ilmi alla olevasta taulukosta. Varsinkin matematiikassa tarvitaan yläindeksejä.

Loogiset tehosteet

Loogiset tekstitehosteet määrittelevät tehosteen antaman vaikutelman, mutta eivät sitä, miltä lopullinen teksti näyttää.

Esimerkki

Tässä pieni esimerkki, jossa on käytetty runsaasti tehosteita.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
/loose.dtd">
<html>
<head>
<title>Esimerkki tehosteitsa</title>
</head>
<body>
<H2>Haasteena muutos ja oppiminen</H2>
<P><B>Tietotekniikka</B> on maatiloilla arkipäiväinen juttu. 
<I>Lehmällä  on panta</I>, joka sisältää digitaalisessa muodossa tietoja lehmästä.
Pannan tietojen  perusteella tietokone osaa kertoa mitä lehmä on syönyt ja paljonko se luovuttaa 
maitoa lypsykertaa  kohti. Perinteisiäkin <B>navettoja</B> on vielä 
olemassa, joissa lehmät ovat parressa  ja lypsäminen sujuu kannukoneella. 
Ne ovat nykyaikaiselle maatalouslomittajalle eksoottisia harvinaisuuksia. Muutos on vaatinut 
<EM>maatiloilta</EM>, ja varsinkin  maatalouslomittajilta oppimista ja sopeutumista
tekniikan suomiin mahdollisuuksiin ja oikkuihin.  Jopa yleensä muutoksia karsastavat 
<B>lehmät</B> ovat oppineet uusille tavoille. 
</P>
<address>Jari Sarja, Mäntyharju</address>
</body>
</html>

Asemointi HTML:ssä

Asemoinnissa on käytössä kolme eli mahdollisuutta ihan kuin esim. Word-tekstinkäsittelyohjelmassa. Voit asemoida tekstin oikealle, vasemmalle, keskelle tai tasata sekä oikean että vasemman reunuksen mikä ei tosin webissä ole suotavaa puutteellisen tavutuksen vuoksi. Tässä alla kaikki asemointitavat esimerkin kera.

Fontit HTML:ssä

HTML 4.01 ei enään juuri fonteista piittaa. Oletus on, että fontit määritellään CSS:n avulla. FONT aiheuttaa monia ongelmia, joista hankalin on päivitettävyys. Jos HTML-sisältää paljon fonttimäärityksiä on sivujen päivittäminen todella hankalaa (tilanne jossa fontti halutaankin toisenlaiseksi). Mutta kyllä fontin määrittely on vielä mahdollista HTML:n avulla, siksi tässä muutamat esimerkit.

Font size eli fontin koko

Fontin koko määritellään tagilla <font size="x">. Fonttien koko ilmoitetaan asteikolla 1...7 tai suhteellisina arvoina, esim. SIZE="+1". Peruskoko on 3.

Tässä esimerkkejä.

Font color eli fontin väri

Väri ilmoitetaan joko RGB-arvona tai nimenä. Tässä pari esimerkkiä.

Font Face eli fontti

Fontteja määritellään face-attribuutin avulla. Tässä esimerkkejä.

<p><font face="Arial">Jari Sarja: Arial</font> </p>
<p><font face="Times">Jari Sarja: Times</font> </p>
<p><font face="Verdana">Jari Sarja: Verdana</font> </p>
<p><font face="Bookman">Jari Sarja: Bookman</font> </p>

Linkit

Linkkien avulla teksti alkaa elää omaa elämäänsä, sellaisesta tekstistä käytetään nimitystä hyperteksti. WWW-sivujen hypertekstit linkkisanoineen ovat monen ensi kosketus hypertekstiin. Kuitenkin monet perinteisistä perinteisimmät tekstit houkuttelevat käyttäjäänsä hyppimään kohdasta kohtaan, kappaleesta toiseen - tai vielä pitemmälle; lukijan omaan alitajuntaan. Hyperteksti antaa avoimesti lukijalleen luvan tulkintoja tehden, assosiaatioita seuraten ja rakennetta muokaten jälleenrakentaa tekstin mieleisekseen.

Kuinka linkki tehdään?

Linkki koostuu kahdesta osasta. Ensimmäisen osan muodostaa sivun osoite <a href="/joomla/osoite">. Toisen osan muodostaa linkkiteksti, jonka jälkeen linkkitagi suljetaan </a>

Linkityksen osoitteen osalta on olemassa kaksi tapaa kirjoittaa. On olemassa nk suhteellinen ja absoluuttinen tapa linkittää. Absoluuttisessa tavassa linkinosoite kirjoitetaan kokonaisena osoitteena. Suhteellisessa tavassa otetaan lähtökohdaksi kansio, jossa dokumentti linkkeineen sijaitsee ja viitataan ylöspäin tai alaspäin hakemistorakenteessa itsessään. Tämä tapa on yleisesti käytössä oman sivuston hakemiston sisälle linkitettäessä.

Esimerkki selventänee asiaa. Kyseessä on Monilajisen liikuntakerhon etusivu index.php. Sieltä sivulta pitää saada linkki sivulle index.htm, joka sijaitsee kansiossa ohjaajat.

FTP:n kautta tarkasteltuna kansiorakenne näyttää tällaiselta.

Mikäli linkki kirjoitetaan absoluuttisesti, on kirjoitettava koko osoite.

Mikäli linkki kirjoitetaan suhteellisesti on päästävä kansion sisään viittaamalla suoraan kansion nimeen.

Mikäli halutaan tehdä linkki toiseen suuntaan on hakemistorakennetta kiivettävä ylöspäin. Nyt teemme linkin kansiosta ohjaajat pääsivulle. Siihen tarvitsemme merkkejä "../", joilla päästään yksi taso ylöspäin hakemistorakenteessa. Kaksi tasoa päästään ylöspäin kirjoittamalla "../../".

Suhteellisissa viittauksissa on yksi hyvä etu verrattuna absoluuttisiin osoitteisiin. Jos joudut tai haluat vaihtaa sivustojesi tai sivustojen osien paikkaa tai palvelinta, ei linkkien osoitteita tarvitse vaihtaa tai ainakin vaihtotarve on paljon pienempi kuin absoluuttisia osoitteita käyttäen. Tällainen uudelleenjärjestely on yllättävän tavallista sivustojen muotoutuessa ja hakiessa muotoaan. Viittaus dokumentin sisälle

Varsinkin pitkissä dokumenteissa voi esiintyä tarvetta linkittää tiettyyn kohtaan dokumenttia. Silloin käytetään apuna ankkureita. Testiin kirjoitetaan ankkuri ja siihen voidaan viitata.

Ankkuri määritellään seuraavasti:

Siihen voidaan viitata seuraavasti:

Pitkissä dokumenteissa on yleensä kohteliasta laittaa alkuun sisällysluettelo, jolloin turha sivujen rullaaminen ylös ja alas voidaan välttää. Myös aakkosellinen hakemisto on mahdollinen ankkureilla toteutettuna. Tässä vielä esimerkkiä: [1]

Kuvat HTML:ssä

Kuvan lisääminen tekstin joukkoon käy IMG-koodilla. SRC-attribuutti kertoo kuvan sijainnin. Sijainti voi olla joko absoluuttinen tai relatiivinen. Olisi hyvä jos IMG-koodi sisältäisi SRC-attribuutin lisäksi vähintäänkin ALT attribuutin. ALT kertoo tekstin, joka näytetään, jos kuvaa ei pystytä näyttämään. Tekstin pitäisi kuvata mahdollisimman hyvin kuvan sisältö. Suositeltavaa olisi myös määritellä kuvan koko.

Esimerkki

Tämä on oikea tapa lisätä kuva.

HEIGHT ja WIDTH -atribuutit kertovat kuvan korkeuden ja leveyden. Tämä tieto on tärkeää graafisille selaimille, jotta ne osaavat varata kuville oikean kokoisen tilan ennen kuin kuva on haettu palvelimelta. Alt, sitä tarvitaan lähinnä, jotta sivuista tulisi esteettömät. Siitä asiasta myöhemmin lisää.

Tässä kuva laitetaan tekstin oikealle puolelle.

Tässä kuva laitetaan tekstin vasemmalle puolelle.

Kuvan asemoinnin suhteen ovat käytössä myös vaihtoehdot: bottom, top ja absmidle. Alla olevassa esimerksissä kuvasta tehdään linkki ja otetaan sininen kehys kuvan ympäriltä pois.

Esimerkki

ALIGN-attribuutilla vaikutetaan kuvan sijoittumiseen tekstin suhteen. BORDER-attribuutti määrittää kuvan ympärillä olevan kehyksen koon. Linkinä toimivan kuvan ympärille lisätään oletuksena kehys. Kehyksen saa pois BORDER=0 -määrityksellä. Tällöin on tehtävä käyttäjälle selväksi, että kuva toimii linkkinä, esim kuva tässä vieressä on tehty niin, että sininen kehys on näkyvissä - kuva on siis linkki.

HSPACE ja VSPACE attribuuteilla määritetään kuvan ympärille jätettävä tila. VSPACE kertoo ylä- ja alapuolelle, HSPACE oikealle ja vasemmalle puolelle jätettävän tilan.

USEMAP ja ISMAP kertovat, että kuva toimii kuvakarttana. ISMAP vaatii ohjelman www-palvelimella. USEMAP-attribuutti määrittää kuvaan käytettävän karttamäärityksen, joka tehdään MAP- ja AREA-koodein. USEMAP ei vaadi koodia www-palvelimelle. Mutta kuvakartoista asiaa myöhemmin. Kompastuskiviä

Kuvien kanssa tavallinen ongelma on, että kuvasta tehdään linkki. Kuvan ympärille tulee silloin kuitenkin sininen kehys. Ratkaisu on sama, joka on kerrottu jo yllä eli border=0.

Esimerkki

Tuossa oli mukana myös toinen kompastuskivi. Linkki voidaan avata entisen päälle tai uuteen ikkunan. Tälla kertaa valintana oli target=_blank, joka avaa uuden selainikkunan. Toinen tavallinen on target=_top, joka avaa entisen päälle ja silloin back-nappi toimii. Jos jättää määrittelemättä targetin niin uusi sivu avautuu entisen päälle. Erikoistapauksia ovat sitten kehykset, joista myöhemmin lisää.

Kolmas kompastuskivi liittyy hakemistorakenteeseen. Sivut siirretään nettiin ja sitten huomataan, että kaverin koneella kuvaa ei näy, vaikka omalla koneella kuva näkyy ok. Silloin on yleensä käytetty editoria, joka on rakentanut polun oman koneen hakemiston mukaan esim. näin:

Neljäs kompastuskivi liittyy hakemistorakenteeseen. Koodi ei silloin löydä kuvaa. Otetaan esimerkki. Jos kissa.jpg on samassa kohtaa hakemistorakennetta (samassa kansiossa) niin linkitys näin:

Jos se onkin saman kansion alakansiossa kuvat, silloin näin:

Jos se onkin hakemistorakenteessa yhden portaan verran ylempänä kansiossa kuvat niin sitten näin.

Listat HTML:ssä

Listat ovat tehokkaita esitettäessä tietoa tiiviissä muodossa. Kyseessä on ikään kuin webin ranskalaiset viivat. Listat sopivat erittäin hyvin luettelonomaisen tiedon esittämiseen. UL - Järjestämätön lista

UL-koodilla saa aikaan järjestämättömän listan, jossa LI-koodilla määritetyt kohdat erotetaan toisistaan.

Esimerkkejä

Listan tyylin voi vaikuttaa määreellä attribuutilla type. Katso esimerkki alla kuinka pallukasta saadaan esim. neliö.

OL - Järjestetty lista

Järjestetty lista saadaan aikaan koodilla <OL></OL>. Silloin pallukan tilalle tulee järjestysnumero. Tässä esimerkki.

Tyyliä voi vaihtaa atrrubuutilla type ja start kertoo mistä numerosta tai kirjaimesta aloitetaan.

TYPE=1|a|A|i|I, START=n

Tässä pieni esimerkki.

DL - Määritelmäluettelo <DL></DL>

DL-koodi määrittää määritelmäluettelon, jossa DT-koodilla ilmaistaan määriteltävä termi ja DD-koodilla määritelmä.

HTML lomakkeet

Lomakkeet antavat käyttäjälle mahdollisuuden lähettää tietoa www-palvelimelle. Lomake vaatii toimiakseen ohjelman, joka käsittelee lomakkeella välitetyn tiedon. Lomakkeen tietoja voi lähettää myös suoraan s-postiin, mutta se tapa ei ole suositeltava, koska:

• s-postiosoite lukee koodissa eli roskapostia on tiedossa
• lomakkeen voi lähettää vain koneelta, johon on asennettu s-postiohjelma ja s-postitili
• lomakkeen tiedot tulevat sähköpostiisi huonosti muotoiltuna

Tämä tapa, jonka esitän, ei ole suositeltava, mutta se on helppo ja osaamiseen riittää pelkkä HTML-koodin osaaminen.

<FORM METHOD=POST ACTION="mailto: This e-mail address is being protected from spambots. You need JavaScript enabled to view it " ENCTYPE="application/x-www-form-urlencoded">

Kun lomakkeen tiedot lähetetään ilmestyy varoitusilmoitus, jossa ilmoitetaan sähköpostiohjelman kautta tapahtuvasta lähettämisestä.

Ja kohta taas ilmoitusta. Näyttää siltä kuin kyseessä olisikin virus.

Ja tältä näyttää kun lomake tulee perille sähköpostiisi.

Ja kun liitteen saa viimein auki esim. muistiolla on jälki tällaista.

Ennen oli ohjelmia jotka korjasivat moisen sotkun ja on mahdollista itsekin sellainen rakentaa esim Wordin makrolla, mutta koska on parempia menetelmiä niin unohdetaan koko mailto ja keskitytään lomakkeisiin. Paremmista menetelmistä sen verran, että lomake lomake tehdään kuten ennenkin, mutta lomakkeenkäsittelyyn tarvitaan esim. PHP: llä ohjelmoitu ohjelma. Usein webhotelli tarjoaa valmista ratkaisua ongelmaan esim. cgi-ohjelman muodossa. Yksi vaihtoehto voisi olla SuperCgi, joka palvelee suomeksi. Huono puoli palvelussa on, että sinne pitää rekisteröityä. Tässä toinen: http://www.sivuille.net/postittaja/ohje.jsp 

Nykyään käytetään PHP:tä lomakkeiden käsittelyyn varsin yleisesti. Tässä yksi sivusto, joka opettaa html-lomakkeen käsittelyn PHP:llä: MVnet. Toinen hyvä sivusto, joskin englanninkielinen on Tectite. Itsekin voi tehdä ja silloin menee näin. Kokeile ensin, että palvelimesi kautta voi lähettää s-postia webin kautta. Tässä koodi, jolla voit sen tehdä, kunhan vaihdat oman s-postisi esimerkin tilalle.

<?php mail(" This e-mail address is being protected from spambots. You need JavaScript enabled to view it ", "Aihe", "Viestin sisältö..."); ?>

Kirjoita yllä oleva koodi (huom! oma s-postisi) esim. muistolla siirrä se palvelimelle ja mene kyseiseen osoitteeseen ja paina enter. Jos kaikki kävi hyvin sait s-postia lomakkeelta. Jos kaikki toimi niin voit jatkaa. Tehdään ensin HTML-lomake:

<html> <head> <title>Palautelomake</title> </head> <body> <form name="kontakt" method="post" action="koe.php"> Nimi: <input name="nimi" type="text" size="30"> Aihe: <input name="aihe" type="text" size="30"> sposti: <input name="sposti" type="text" size="30"> Viesti: <textarea name="viesti" cols="30" rows="5"></textarea> <input name="submit" type="submit"value="Lähetä palaute"> </form> </body> </html>

Sitten tarvitaan lomakkeenkäsittelijä eli tiedosto koe.php (ks. yllä).

FORM - Lomake

Nyt sitten varsinaiseen asiaan eli HTML-lomakkeen koodaamiseen. Lomake luodaan FORM-koodien sisään. ACTION kertoo lomakkeen käsittelevän ohjelman osoitteen. METHOD määrää tavan, jolla tieto lähetetään ja ENCTYPE tavan, jolla tieto koodataan.

<form action="vastaanota.php"method="post"enctype="multipart/form-data">
<p> 
<b>Täytä lomake</b>:<br> 
Nimi: <input type="text" name="nimi"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Lähetä">
</p> 
</form> 

INPUT - Syöttökenttä, nappi, yms.

INPUT-koodilla tehdään lomakkeelle syöttökenttiä. NAME-attribuutti nimeää kentän. Selain lähettää kenttien nimet tietojen mukana, jotta www-palvelimella toimiva ohjelma osaa tunnistaa tiedot. ALIGN vaikuttaa kenttien sijoittumiseen. Muut parametrit riippuvat TYPE parametrista:

TYPE=text|password

Tekee tekstinsyöttökentän. Password näyttää syötetyn tekstin tähtinä. MAXLENGHT määrittää kentän maksimipituuden ja SIZE kentän pituuden.

TYPE=checkbox

Tekee valintaruudun, joka voi olla joko valittu tai ei. CHECKED tekee ruudusta oletuksena valitun.

TYPE=radio

Tekee valintanapin. Napit ovat aina ryhmissä ja vain yksi ryhmän napeista voi olla valittuna. Samaan ryhmään kuuluvilla napeilla pitää olla sama NAME-määre ja eri VALUE-määre.

TYPE=submit

Tekee painikkeen, jota painamalla voi lähettää lomakkeen tiedot. Lomakkeella voi olla useita lähetä-painikkeita, mutta niillä tulee olla eri NAME-määre.

TYPE=reset

Tekee painikkeen, jota painamalla voi tyhjentää lomakeen.

TYPE=hidden

Tekee piilotetun kentän. SELECT - Valintalista

SELECT-koodilla saa aikaiseksi valintalistan, jossa useita vaihtoehtoja, joista käyttäjä voi valita yhden tai useamman. Valintalistan vaihtoehdot määritellään OPTION-koodein. NAME määrittää kentälle nimen, SIZE kerralla näkyvien rivien lukumäärän ja MULTIPLE mahdollistaa usean vaihtoehdon valitsemisen. VALUE-attribuutilla määrätään lähetettävän vaihtoehdon arvo.

TEXTAREA - Tekstinsyöttökenttä

<TEXTAREA NAME="string", ROWS=n, COLS=n> </TEXTAREA>

Tekee tekstinsyöttökentän, jolle voi syöttää useita rivejä tekstiä. NAME kertoo kentän nimen, ROWS rivien lukumäärän ja COLS kentän leveyden. Koodin sisälle kirjoitettu teksti näkyy tekstikentässä.

Esimerkki

Ja koodina sama menee näin:

Värit HTML:ssä

Värikoodi ilmaistaan HTML-sivulla heksadesimaalikulkuna. Lisäksi värin eteen tulee risuaita #. Kuvankäsittelyohjelmissa värit määritellään RGB-järjestelmän avulla (Red-Green-Blue). Kaksi ensimmäistä lukua kuvaavat punaista väriä, kaksi seuraavaa vihreää ja kaksi viimeistä kuvaavat sinistä. Värit muodostetaan sotkemalla keskenään kolmea em. väriä. Kuvankäsittelyohjelmassa suurin arvo kullekin värille on 255 ja pienin on 0. Heksadesimaalissa pienin luku on 0, mutta suurin on F.

Tässä esimerkki kuinka "Photo Filtre" ilmoittaa värit sekä RGB-arvoina että heksadesimaalilukuina. Väri on valittu pipetillä ja oikealla alhaalla näkyvät kyseisen piekselin väritiedot (R=127, G=57, B=145 ja heksadesimaaleina #7F3991.

Tarkastellaan vielä värejä taulukon avulla esimerkkien kera.

Vinkkejä väreihin

Kymmenlukujärjestelmästä voi olla hankala muuttaa lukuja päässä laskien heksadesimaaliluvuiksi. Onkin syytä muistaa, että tietokoneen laskimesta on apua.

Avaa laskin

Valitse "Funktiolaskin" (Näytä ->Funktiolaskin).

Kirjoita RGB-arvo.

Paina painiketta "Hex". RGB arvo 255 on siis heksadesimaalilukuna FF.

On myös ohjelmia, jotka ilmoittavat värikoodin mistä tahansa (klikkat vaan kyseistä kohtaa). Yksi suositeltava vaihtoehto on ilmaisohjelma Hex Color Finder 3.0 [1], josta vielä kuva alla.

Kehykset

"Kehykset ("freimit", engl. frames) ovat selainikkunan osia, jotka toimivat joissakin suhteissa itsenäisinä ali-ikkunoina. Kehyksen sisällä näkyy yleensä HTML-dokumentti, mutta siellä voi olla myös kuva, pelkkä tekstitiedosto tms. Kehyksen sisällys voi olla vieritettävissä (skrollattavissa) ylös ja alas, kenties myös vaakasuunnassa, kuten normaali dokumentti normaalissa selainikkunassa on. Kehykset ovat suorakulmaisia: ikkuna voidaan jakaa kahteen tai useampaan suorakulmaiseen osaan vaakasuunnassa tai pystysuunnassa. Näin saatuja osia voi vielä jakaa edelleen. "(Korpela.)

Korpelan mukaan kehysidea lienee peräisin siitä, että useissa ohjelmissa on mahdollista katsella isohkoa dokumenttia siten, että vasemmalla on kapeassa ali-ikkunassa sisällysluettelo ja oikealla isommassa ali-ikkunassa kulloinkin katsottavan osan sisältö. Seuraavassa on tästä esimerkkikuva, jossa Acrobat Readerillä luetaan sen omaa käyttöohjetta.

Tällaisella esitystavalla on useita etuja. Käyttäjä voi siirtyä vasemmassa kehyksessä eli "navigointikehyksessä" haluamaansa kohtaan ja valita klikkaamalla haluamansa kohdan. Jos hän huomaa, ettei se sisältänytkään sitä mitä hän etsi, hän voi saman tien valita toisen kohdan. Erityisesti hakuteostyyppisissä dokumenteissa tämä voi olla näppärää. (Korpela.)

Kehykset olivat muotia ajanjaksolla 1998-2002. Nykyään kehyssivuja näkee erittäin harvoin. Niiden käyttöä ei suosittele kukaan, en minäkään. Nykyään on parempia tapoja tehdä sivuja - mutta aihe esillä, koska saatat törmätä kehyksiin siksi esittelen tämän tavan tehdä sivuja.

Miksi kehykset sopivat Webiin huonosti?

Kehyksiin liittyy itse ideasta johtuviakin ongelmia kuten se, ettei esim kirjassa ole koko ajan valikkoa näkyvillä, eikä ole muuten telkkarissakaan. Mutta niiden aiheuttamat sotkut Web-sivuilla johtuvat kuitenkin pääosin seuraavista syistä:

• osoitteettomuus
• niitä useimmiten käytetään päin seiniä, siis vielä paljon huonommin kuin voisi.
• kaikki selaimet eivät tue kehyksiä.
• Hakupalveluilla on erittäin suuri merkitys Webissä. Yksi osa niiden teknistä perustaa ovat ns. indeksointirobotit eli järjestelmät, jotka käyvät automaattisesti läpi Webiä seuraamalla sivuilla olevia linkkejä. Jos sellainen löytää kehikkosivun, jolla ei ole noframes-osaa, se ei ehkä löydä mitään seurattavaa.

Kuinka rakentaa kehykselliset www-sivut?

Jos haluat tehdä kehykselliset www-sivut on sinun toimittava seuraavan kaavan mukaan.

• luo sivu, joka sisältää kehyksen määrittelyn (frameset)
• luo sivut, jotka tulevat kehyksiin (kehysten sisään)

Kehysten avulla tehty sivu voi olla rakenteeltaan kuten tässä alla. Siinä on kapea vasen reuna ja leveämpi oikeanpuoleinen osa on vielä pilkottu kahtia.

Katsotaan vielä pala palalta.

Yllä oleva saadaan aikaan tällä:

Tähti (*) kertoo, että loppuosa on sitten se mitä jää jäljelle, kun vasen osa on 120 pikseliä.

Sitten haetaan sisältö kahteen jo määriteltyyn kehykseen.

Jos haluat, ettei määriteltyjä kehyksiä voi siirrellä laita käsky "noresize".

Kehyksiä käytettäessä on linkkien kanssa oltava tarkkana. Ongelmaksi muodostuu esim., että sivut avautuvat kehyksen sisään. Käytettävät perusvaihtoehdot ovat:

• _blank avaa uuden selainikkunan
• _self lataa sivun samaaan ikkunaan
• _top avautuu entisen päälle..

Lisätietoja kehysten käytöstä

Frames-osuus oppaassa HTML Code Tutorial: [1]

Frames-luku virallisessa HTML-spesifikaatiossa: [2]

HTML-kurssi

Luokka: HTML

Näkymät

Henkilökohtaiset työkalut

• Kirjaudu sisään tai luo tunnus

Valikko

• Etusivu
• Kahvihuone
• Ajankohtaista
• Tuoreet muutokset
• Satunnainen sivu
• Ohje

Haku

 

Työkalut

• Tänne viittaavat sivut
• Linkitettyjen sivujen muutokset
• Lisää tiedosto
• Toimintosivut
• Tulostettava versio
• Ikilinkki

Taulukot

Taulukoita käytetään kotisivuilla kahdesta eri syystä:

• Taulukoiden avulla voidaan esittää informaatio havainnollisesti.
• Taulukoita käytetään usein myös kotisivun ulkoasun muokkaamiseen. Silloin taulukon ääriviivat ovat näkymättömiä.

Tällä hetkellä vielä aika monen www-sivun taitto perustuu näkymättömien taulukoiden käyttöön. Tässä muutamia esimerkkejä 1.1.2006.

Sonera, Dna ja MTV3. Lähdekoodi paljastaa, että table-tagia on käytetty ahkerasti, vaikka sivulla ei näy ainuttakaan taulukkoa.

Otetaan vaikka viimeisen eli MTV3 sivuston koodi tarkasteluun. Koodissa näkyy tageja kuten <table>, <td>ja<tr>. Tässä pätkä ihan sivun alusta.

"http://www.avkymppi.net//wiki/index.php?title=Kuva:Taulukko_004.gif" src="/joomla/../wiki/images/3/3d/Taulukko_004.gif" alt="Kuva: Taulukko_004.gif" width="529" height="116" />

Ulkoasun määrittelemisen lisäksi taulukoilla voi tehdä ihan tavallisia taulukoita. Alun perin olikin tarkoitus, että html-taulukoilla esitettäisiin vain dataa tai palstoitettaisi tekstiä. Mutta hyvin pain websuunnittelijat keksivät hyödyntää taulukkoa www-sivujen taittoon. Nyt tosin ollaan siirtymässä pois siitä tavasta. Korvaavassa tavassa taitto hoituu XHTML:n ja CSS:n kera.

HTML-kurssi

Haettu osoitteesta http://www.avkymppi.nethttp://www.avkymppi.net//wiki/index.php?title=Taulukot

Haettu osoitteesta http://www.avkymppi.nethttp://www.avkymppi.net//wiki/index.php?title=Taulukot

Luokka: HTML

Taulukot 2

Taulukon määrittely aloitetaan tagilla <table>. Voit laittaa sivuillesi minne tahansa taulukkotagin, kunhan muistat päättää sen merkillä </table>. Yksinkertaisimmillaan taulukko olisi tällainen.

<table></table> 

Tällaisesta taulukosta ei kuitenkaan ole mitään hyötyä, koska siitä puuttuvat rivit ja sarakkeet. Rivi lisätään koodilla <tr> ja sarake koodilla <td>. Tehdään yksinkertainen esimerkki, jossa kaksi riviä ja kaksi saraketta.

<table> 
<tr> 
<td>eka rivi ja eka solu</td><td>eka rivi ja toinen solu</td> 
</tr> 
<tr> 
<td>toka rivi ja eka solu</td><td>toka rivi ja toinen solu</td> 
</tr></table>

Selaimen kautta tarkasteltuna yllä oleva koodiesimerkki näyttää tältä:

Muokataan koodia ottamalla mukaan myös taulukon reunaviivat sekä määritellään taulkon leveydeksi 300 pikseliä.

<table width="400" border="1"> 
<tr> 
<td>eka rivi ja eka solu</td><td>eka rivi ja toinen solu</td> 
</tr> 
<tr> 
<td>toka rivi ja eka solu</td><td>toka rivi ja toinen solu</td> 
</tr></table>

Nyt taulukon ulkoasu on hieman muuttunut.

[muokkaa] Tablen ominaisuudet

Taulukoa ja sen soluja sekä rivejä voidaan määritellä mm koon ja värin suhteen. Taulukolla eli tagilla <table> voi olla seuraavanlaisia ominaisuuksia.

 

Taulukon rivillä <TR> ja sarakkeellla <TD> voi olla seuraavanlaisia ominaisuuksia.

Taulukon solulla <TD> voi olla seuraavanlaisia ominaisuuksia.

Esimerkki

<table width="300" cellpadding="2" border="1"> 
<tr> 
<td width="100" >eka rivi ja eka solu</td><td width="200"> 
eka rivi ja toinen solu</td> 
</tr> 
<tr> 
<td bgcolor="#666666"> 
toka rivi ja eka solu</td><td>toka rivi ja toinen solu,  
jossa eniten tekstä och samma på svenska</td> 
</tr> 
</table>

Esimerkki 2

Tässä esimerkissä yhdistetään rivin kaksi solut yhdeksi soluksi käyttäen tagia colspan ( <td colspan="2">).

<table width="300" border="1"> 
<tr> 
<td width="100" valign="top" height="100"> 
ensimmäinen solu</td> 
<td>toinen solu</td> 
</tr><tr> 
<td colspan="2">kolmas solu</td> 
</tr> 
</table>

Ääni HTML:ssä

Websivuille voidaan liittää tekstiä, linkkejä ja kuvia - niitä on jo esitelty aiemmin. Sivuille voidaan myös lisätä liikkuvaa kuvaa sekä ääntä. World Wide Webin alkuaikoina selaimet tukivat vain tekstiä. Myöhemmin tulivat selaimet, jotka osasivat näyttää myös kuvia. Äänen, animaatioiden ja videoitten käsittely vaihtelee eri selaimien välillä. Jotkin elementit käsitellään suoraan selaimessa, välillä tarvitaan pluginia, joskus jopa ActiveX on tarpeellinen.

Taustalla olevan äänen kauhistus

Ääntä saa kyllä sivuille taustamusaksi, mutta en suosittele. Tässä joitakin syitä siihen, etten suosittele.

• moni haluaa ainoastaan lukea sivuja ja katsella kuvia
• jotkut surffailevat öiseen aikaan, jolloin muu väki nukkuu. Yksi kaks hiljaisuuden rikkookin yllättävä taustamusa.
• vaikka musa olisi kaunista, lakkaa se soimasta, kun henkilö vaihtaa toislele sivulle. Taustamusa ei kulje samalla tavalla mukana kuin taustaväri.
• kaikki selaimet eivät tue sivuille upotettua ääntä

MIDI-tiedostot

MIDI (lyhenne englannin kielen sanoista Musical Instrument Digital Interface) tarkoittaa musiikkisoittimien digitaalista liitäntää tai rajapintaa. Se on tiedonsiirtojärjestelmä, joka on suunniteltu välittämään viestejä sähköisten musiikkilaitteiden välillä. MIDI-tiedostot ovat hiljattain alkaneet tulla kaikkien kuluttajien ihmeteltäviksi uusimpien matkapuhelinten soittoäänien ominaisuudessa. (Mikä on MIDI?.)

Internet Explorerissa esim juuri MIDI-tiedoston saa taustaääneksi alla olevalla komennolla.

Kokeile [1]

Muita selaimia (esim Firefox) ajatellen seuraava tapa olisi parempi.

Kokeile [2]

Autostart tarkoittaa, että käynnistyykö ääni automaattisesti vai ei. Attribuutit width ja height määrittelevät ohjauspanelin koon. Lopuksi on vielä koodia siitä, että entäs jos selain ei tue tagia embed.

Tosin em mainittu tapa on hankala validoinnin suhteen (ks myöhemmät luvut). Suositeltavinta olisi käyttää tagia <object>, koska silloin validaattorikin pitää koodistasi.. Tosin siinäkin on ongelmia eri selaimet pitää ottaa huomioon.

Kokeile [3]

Mp3

MP3 on lyhenne, joka tulee sanoista MPEG audio layer 3. MPEG on puolestaan tapa pakata aineistoa pieneen tilaan, samalla kuitenkin menetetään osa alkuperäisestä aineistosta. MP3 on "lähes CD-tasoista ääntä." Kun alkuperäinen ääni on ollut CD-tasoista, 44kHz näytetaajuudella otettua 16-bittistä stereoääntä, on tästä äänestä poistettu asioita, joita ihmiskorva ei helposti erota. Näin äänitiedoston koko on saatu kahdenteentoista osaan alkuperäisestä koostansa. Mp3 on nykyisin erittäin suosittu formaatti äänelle. Tässä ei kuitenkaan ole tarkoitus tehdä esitystä äänikurssista.

Lopuksi kuitenkin pari esimerkkiä suositusten kera tietenkin. Taustaääni ei ole koskaan hyvä vaihtoehto. Parempi on laittaa musa linkin taakse.

Kokeile [4]

Tässä olisi malli siitä kuinka homma tehdään viimeisen päälle, jos halutaan taustaääni. Tosin validaattorista tämä ei mene läpi, mutta kaikilla selaimilla pitäisi toimia.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<title>::Koe::</title>
</HEAD>
<object id="mediaPlayer" width="0" height="0"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" uiMode="invisible">
<param name="fileName"  value="01_stone_cold.mp3">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="false">
<param name="uiMode" value="none">
<param name="loop" value="true">
<embed type="application/x-mplayer2" width="0" height="0" visible="false"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
id="mediaPlayer2" name="mediaPlayer" displaysize="0" autosize="false"
src="/joomla/01_stone_cold.mp3"
playCount="9999" autostart="true" designtimesp="5311" loop="true"></embed>
</object>
<div style="font-size: 65%">
Eikö musiikki kuulu? Lataa se <a href="/joomla/01_stone_cold.mp3">tästä</a>.
</div>
</body>
</html>

Kokeile [5]

Videot HTML:ssä

Muistutan heti alkuun, ettei HTML-sivuilla alunperin ollut tarkoitus esittää multimediaa. Entistä parempien nettiyhteyksien vuoksi ovat videot kuitenkin lisääntyneet netissä. Selaimet eivät kuitenkaan tue videoita suoraan. Videoitten katseluun tarvitaan erilliset katseluohjelmat tai pluginit kuten esim. Windowsin mediaplayer, Quick time tai RealPlayer. Videomateriaali kannatta editoida ennen kuin sen laittaa www-sivuille. Varsinaisesti videoitten editointia kuvaillaan/harjoitellaan opintokokonaisuudessa elokuva (esim. Windows Moviemaker).

Kun videon haluaa laittaa nettiin saataville, on ensin huolehdittava videon koosta. Kiinteät, nopeat nettiyhteydet ovat vielä suhteellisen harvinaisia, joten video olisi hyvä saada mahdollisimman pieneen tilaan, jotta sen kopioiminen ei kestäisi iäisyyksiä. Normaali, kamerasta saatava ja editoitu DV-muotoinen video vie noin 3,6 megatavua sekunnissa, mikä on aivan liikaa jopa parhaille ADSL- tai kaapelimodeemiyhteyksille.

Koodekilla koko pienemmäksi

Video for Windows -formaatin tunnistaa .AVI -tiedostopäätteestä. AVI toimii alustana video- ja ääni-informaatioille, jotka voi pakata erilaisilla koodekeilla. Applen vastaava alusta on QuickTime, jonka tiedostopääte on .MOV.

Mikäli videota ei katsella selainikkunassa on linkki hyvä vaihtoehto.

Takavuosien suosikki ja nettivideon pioneeri on RealMedia, jota käytetään vieläkin runsaasti, mutta huonoina puolina ovat oman soitto-ohjelman tarve ja keskinkertainen laatu. DVD-levyiltä tuttu MPEG-2, joka antaa hyvän kuvanlaadun, mutta tiedostot kasvavat isoiksi ja katsomiseen tarvitaan myös erillisiä ohjelmia tai maksullisia koodekkeja.

Uusin ehdokas on MPEG-4, jonka standardeista on vastikään päästy yhteisymmärrykseen. MPEG-4 tarjoaa parhaan kuvanlaadun ja pienet tiedostokoot. Varaslähdön tämän tekniikan pariin otti epävirallinen DivX. Myös Microsofin oma Windows Media Video perustuu samantapaiseen tekniikkaan. DivX vaatii oman koodekin asentamisen, mutta WMV toimii suoraan Windowsin Media Playerissa.

Videotiedoston kokoa voi pienentää vähentämällä kuvan pistetarkkuutta. Jos esimerkiksi täyden DV-videon vaaka- ja pystytarkkuudet puolittaa (720 x 576 -> 360 x 288) pienenee yhden kuvan pikselimäärä neljännekseen. Televisiota varten suunnitellussa DV-kuvassa on 25 kuvaa sekunnissa eli lomiteltuna 50 puolikuvaa. Tietokoneella katsottavassa videossa voi kuvataajuutta pudottaa selvästi pienemmäksi. Jopa 12,5 kuvaa sekunnissa riittää useimpiin tarkoituksiin ja tiedostokoko puolittuu jälleen. Tietokoneen näyttö ei ole lomiteltu, joten videolle kannattaa tehdä deinterlace-toiminto, joka eliminoi liikkuvista kohteista sahalaidat ja helpottaa koodekkien pakkausalgoritmeja. Kuvan värisyvyyttä voi myös pienentää 24-bittisistä täysväreistä vaikkapa 16-bittisiksi. Ääni kannattaa muuttaa stereosta monoksi sekä näytetaajuutta ja dynamiikkaa voi laskea. Äänenkin voi pakata formaatin sallimilla koodekeilla.

Upotetut videotiedostot

Tavallisille www-sivuille voidaan upottaa videooita. Silloin ohjelma avautuu ikään kuin www-sivun sisään. Tämä on hyvä tapa siinä mielessä, ettei selaaja joudu pois sivuiltasi kesken kaiken. Tämä tapa on yleinen esim suositussa Youtubessa. Videotiedostojen upotus noudattaa samoja periaatteita kuin äänenkin upotus. Oikea koodi olisi <object>, mutta muutkin selaimet on otettava huomioon. Siksi tähän tapaan.

CLASSID kertoo Microsoftin selaimelle, että lataapas QuickTime ActiveX control: clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B. CODEBASE tarvitaan tilanteisiin, joilla käyttäjillä ei ole käytössään pluginia QuickTime.

• Katso esimerkki RealMedia-tiedostosta [1], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.
• Katso esimerkki MPEG-4 tiedostosta [2], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.
• Katso esimerkki DivX-tiedostosta [3], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Saatat lisäksi tarvita DivX-koodekin. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.
• Katso esimerkki wmv-tiedostosta (Windows Media Video) [4], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.

Valmista Koodia saat täältä: [5]

HUOM! Kun video upotetaan niin, että se toimii kaikilla selaimilla rikotaan samalla HTML:n perussääntöjä. Validoinnin kannalta upotus ei ole hyvä. Muista lisäksi, että laitat nettiin vain pieniä hyvin pakattuja ja leikattuja videotiedostoja.

Flash HTML:ssä

Yhtenä vaihtoehtona Javan käytölle on Macromedian Flash-tekniikka. Flash-tekniikan perusidea on sama kuin Javassa ainakin siinä mielessä, että HTML-dokumenttiin "upotetaan" toiminnallisesti erillinen osa. Flashin yhteydessä käytettävä dataformaatti on Shockwave Flash (SWF). Flash-ohjelma tekee automaattisesti myös Flash-toteutuksen sisältävän HTML-tiedoston, jota on tarvittaessa helppo muutella omiin tarkoituksiin sopivaksi.

Katso esimerkki: [1]

Flash ohjeita yms.: [2]

Java HTML:ssä

Java-Applet on Java-ohjelmointikielellä tehty pieni ohjelma, jota voidaan käyttää www-sivuilla. HTML-dokumentissa määritellään, mikä applet suoritetaan ja millaisena se suoritetaan (sijainti ja koko www-sivulla, muut ominaisuudet). Java-Applettien katsomiseen tarvitaan Java-yhteensopiva selain. Java-yhteensopiva selain tarkoittaa selainta, jossa on Sunin kehittämä erikseen Internetistä ladattava Java Plug-in tai useimmissa selaimissa jo valmiina oleva Java-virtuaalikone. Nykyään appletteja käytetään www-sivuilla harvoin, koska FLASH on syrjäyttänyt ne ainakin osittain.

Jotta appletti voitaisiin testata appletviewer-ohjelmalla tai WWW-selaimella, täytyy rakentaa applettia käyttävä HTML-dokumentti. HTML-kielessä appletti ladataan <APPLET>...</APPLET>-tageilla.

<center>
<applet code="lake.class" width="300" height="280">
<param name="image" value="norja.jpg">
<param name="href" value="http://www.ibdprince.com/java.shtml">
</applet>
</center>

Katso esimerkki: [1]

Lisää Java efektejä tuolta: [2]

Sivujen tarkistus

Valitettavan yleinen käsitys on, että oletetaan sivujen olevan oikein koodattuja, jos tavallisimmat selaimet näyttävät sivut oikein. Voidaan sanoa, että nykyajan selaimet osaavat kiusallisen hyvin korjata kaiken maailman virheitä html-koodista. Siksi osa pahoistakin virheistä saattaa sivujen tekijältä jäädä huomaamatta. Yleensä virheet aiheuttavat jossain vaiheessa kiusallisia ongelmia. Sivut näyttävät erilaisilta joka selaimella. Silloin on syynä huono koodi, se ei noudata standardeja. Helpointa on tehdä koodistaan standardin mukaista. Toinen tapa olisi kokeilla joka ikisellä selaimella ja aina muokata koodia, mutta se tie on hankala eikä läheskään aina johda hyvään lopputulokseen.

Sivujen validointi

Sivujen oikeellisuuden tarkistamista kutsutaan validoinniksi. Sen avulla tutkitaan noudattaako html-koodi asianmukaisia standardeja. Kuinka validointi sitten tehdään? Se on varsin helppoa, koska maailmalla on ilmaisia työkaluja siihen hommaan.

• W3C HTML Validation Service: Tunnetuin HTML-koodin validoija. [1]
• Web Design Group HTML Validator: HTML-validointia hyvän käyttöliittymän kera. [2]
• Page Valet: HTML-validointia selkeän esitystavan kera. [3]

Esteettömyys

 "Esteetön Web-sivu tai muu verkkopalvelu on erilaisten ihmisten käytettävissä erilaisissa tilanteissa ja erilaisilla laitteilla. Erilaisuus voi merkitä esimerkiksi hyvin suurta tai hyvin pientä kirjasinlajia, hiirettömyyttä, mustavalkonäyttöä, kämmenmikroa tai hidasta Internet-yhteyttä. Osalle ihmisistä "erilainen" käyttötapa on välttämätön." (Tieke.)  

Esteettömyydestä hyötyy moni netin käyttäjä. Se hyödyttää niin kuuroja, värisokeita, heikkonäköisiä ja näkövammaisia. Lisäksi se hyödyntää webiä mobiilitekniikalla käyttäviä henkilöitä.

Tieken mukaan estettömyyden pikavinkit:

1. Rakenne: tee sivu sellaiseksi, että se alusta loppuun luettuna on toimiva, mm. tärkeimmät asiat ovat ensin.
2. Kieli: käytä yksinkertaisinta kieltä, jonka sisällön luonne sallii.
3. Tekniikat: käytä yksinkertaista ja loogista HTML-merkkausta, ja virittele ja sommittele ulkoasu ensisijaisesti CSS:llä.
4. Linkit: nimeä linkit sisältöä kuvaaviksi, ei esimerkiksi "klikkaa tästä".
5. Multimedia: tarjoa kaikelle kuva-, ääni-, video- yms. aineistolle tekstivaihtoehto.
6. Taulukot: huolehdi, että taulukot ovat mielekkäitä myös riveittäin luettuina.
7. Ohitettavuus: tarjoa mahdollisuus ohittaa ne aineistot, jotka voivat olla esteellisiä, kuten isot taulukot.

HTML-kurssi

Haettu osoitteesta http://www.avkymppi.nethttp://www.avkymppi.net//wiki/index.php?title=Esteett%C3%B6myys

Luokka: HTML

Leiskan leikkaus

Leiska: MäJä

Leiskan leikkaamisessa on kyse siitä, että kuinka yksittäisestä kuvasta eli leiskasta tehdään toimiva www-sivu. Tietysti kaiken voisi tehdä grafiikkaana eli pelkkinä kuvina. Sellaiset sivut olisivat kuitenkin äärimmäisen raskaat, latautuisivat ikuisuuden. Lisäksi sellaisten sivujen päivittäminen olisi hankalaa, koska kaikki muutokset pitäisi tehdä kuvankäsittelyohjelmalla.

Websivuston tekeminen kuvina aiheuttaisi myös hankaluuksia normaaleille webin toiminnoille, kuten esim tekstin suurentaminen ja pienentäminen. Eikä sivut suostuisi millään skaalaantumaan. Lisää ongelmia ilmenisi, kun sivuille haluttaisiin dynaamisuutta.

Leiskan leikkaaminen aloitetaan avaamalla PhotoShop ja avaamalla leikattava leiska. HUOM! PhotoShopin versiossa 5 ei vielä ole ositustyökalua. Tässä ohje FLASH-muodossa - toimii ainakin IE:llä. HUOM! Tässä toinen uudempi ja parempi ohje FLASH-muodossa - pelkkä flash ja siksi toimii paremmin. Lisäksi tuo eka versio taitaa lopussa olla viallinen.

Leikkaus eli ositus tapahtuu käyttäen puukkoa eli ositus-työkalua (ks. kuva alla). Valitse puukko ja sen jälkeen hiiri pohjaan ja irti, kun piirrät ositettavan eli puukotettavan alueen.

Tässä esimerkissä leikkaus menee kuten alla olevassa kuvassa. Leiska on ositettu eli leikattu tai jonkun mielestä puukotettu neljään osaan. Mikäli osia tulee enemmän, eivät linjat kohtaa eli jonnekin jää 1 pikselin kokinen suikale. Korjaa tilanne valitsemalla puukon kohdasta valintatyökalu (sama työkalu), aktivoi alue ja vedeä linjat kohdilleen.

Seuraava vaihe onkin tallentaminen eli laitetaan ohjelma tekemään työt. Ohjelma pilkoo leiskan erillisiksi kuviksi ja rakentaa samalla html-taulukon. Leiska muuttuu kuvasta html-tiedostoksi. Tämän toiminnon saat käynnistettyä valinnalla "Tallenna Webiä varten".

Sitten on edessä valinta, että missä muodossa kuvat tallennetaan. Tässä esimerkissä tallennetaan jpg-muotoon, koska on epäilys värisävyistä. Ja tällä kertaa en pakkaa jpg-tiedostoa, koska olen jo tehnyt sen aiemmin. Usein sivuntekijät suosivat gif-muotoa eli sitä kannattaa kokeilla, jos leiskassa ei ole paljon eriliaisia värisävyjä. JPG-kuvista tulee helposti suttuisia eli sikäli gif-kuvilla on puolensa varsinkin piirroksissa.

Seuraavaksi valitaan minne html-tiedosto ja kuvat tallennetaan jamillä nimellä. Suosittelen, että nimeksi laitetaan index.htm eli ei html-päätettä.

Siinä se sitten olikin eli leikkaus on suoritettu. Lopputulos on nähtävissä kansiosta, jonne tallensit tiedostot. Siellä on tiedosto index.htm sekä kansio kuvat, jossa kaikki leiskasta leikatut kuvat ovat.

Avaa tiedosto index.htm selaimeen ja näet, että homma toimi.

Ja tältä se näyttää.

Katso vielä lähdekoodi, jotta näet mitä sait aikaiseksi.

Materiaalia verkossa

http://myy.helia.fi/~atk86d/kuva/materiaalit/ositus/ositus.html

http://www.depiction.net/tutorials/photoshop/layoutslicing.php

http://www.entheosweb.com/photoshop/slice.asp

http://www.heathrowe.com/tuts/slices.asp

http://www.tutorialbus.com/slice/

http://www.tutorials007.com/index.php/from-photoshop-to-dreamweaver/

http://www.youtube.com/watch?v=DVfxe4pqvo8

HTML-kurssi

Haettu osoitteesta http://www.avkymppi.nethttp://www.avkymppi.net//wiki/index.php?title=Leiskan_leikkaus

Luokka: HTML

HTML:n runko

HTML-koodia voidaan kirjoittaa miten sattuu ja silti selain näyttää kaiken oikein. Se johtuu siitä, että silloin selain toimii "quirksmodessa" eli korjaa tekemäsi virheet. Parempi tapa on tehdä sivut oikeiksi ilman, että selain hoitaa työn puolestasi. Lisäksi eri selaimet suorittavat korjaukset eri tavoin, voit joutua kierteeseen jossa sivut näkyvät eri selaimilla aina eri tavoin. Varmin tapa saada sivut näkymään oikein kaikilla selaimilla on tehdä sivuista standardien mukaiset. Lisäksi se on ainut kestävä tie. Hyvin tehdyt sivut läpäisevät validaattorin tarkastuksen ja siksi ne toimivat kuten pitää ja jopa nopeammin kuin kökkökoodatut sivut, joiden muokkaaminen on yhtä tuskaa.

Kaikkein ensimmäisenä on valittava Doctype. Tässä esimerkissä se on HTML ja Transiotional. Eli esim näin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

NoteTab lightista valinnan voi tehdä valitsemalla HTML-begin.

Lisäksi sivuilla on aina oltava osat HTML ja BODY eli rungoltaan kunnollinen oikein tehty HTML-sivu on tällainen kuten alla olevassa kuvassa.

Tässä vielä sama koodina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Jarin sivu</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Älä koskaan unohda titleä. Eli jos olet leikannut leiskan osiin esim Photoshopilla niin tarkista, että sivu alkaa oikein ja jos ei ala niin muokkaa koodi sopivaksi. Yleensä siellä on virheitä juuri Doctypen osalta. Leikattu koodi alkaa näin:

<HTML>
<HEAD>
<TITLE>janteva</TITLE>

Lisäksi siellä on turhaa tekstiä kuten nämä kaksi:

<!-- ImageReady Slices (janteva.jpg) --> <!-- End ImageReady Slices -->

Tämä on jo sitten oikein.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Jarin sivu</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=761 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2>
<IMG SRC="kuvat/index_01.gif" WIDTH=761 HEIGHT=60 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="kuvat/index_02.gif" WIDTH=121 HEIGHT=527 ALT=""></TD>
<TD>
<IMG SRC="kuvat/index_03.jpg" WIDTH=640 HEIGHT=21 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="kuvat/index_04.gif" WIDTH=640 HEIGHT=506 ALT=""></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Maalaa kyseinen koodi ja kopioi se (CTRL+C) ja liitä se validaattoriin tarkistettavaksi. Lopputulos kuten alla eli puhdasta ja täydellistä koodia.

 

http://vesa.piittinen.name/?page=doctype (loistava opas ja asiaa paljon)

http://en.wikipedia.org/wiki/Quirks_mode

HTML-kurssi

Haettu osoitteesta http://www.avkymppi.net/wiki/index.php?title=HTML:n_runko

Luokka: HTML

Koodin siistiminen

Kun leiska on leikattu ja laitettu vielä rakenteellisesti oikein eli siinä on Doctype, Head ja body on aika siirtyä siistimään koodia. Sivut olisivat leikkauksen jälkeen ihan toimivia, mutta ovat vielä kuvina. Niitä olisi sen vuoksi hyvin hankala päivittää. Siksi koodia on muokattava eli käytännössä poistamme kuvat ja laitamme tilalle HTML:ää. Emme toki poista kaikkia kuvia kuten esim yläpalkkia.

Jatketaan samalla esimerkillä eteenpäin. Tärkein osa poistettavaksi on se kuva, joka sisältää kaiken tekstin. HUOM! Älä poista solua eli koodia TD. Lisäksi kuvan leveys on otettava talteen eli tässä tapauksessa WIDTH=640.

<TD>
<IMG SRC="kuvat/index_04.gif" WIDTH=640 HEIGHT=506 ALT="">
</TD>

Tuon kohdan tulisi muokattuna olla tällainen

<TD WIDTH=640>
Tähän tulee tekstii
</TD>

Mikäli katsot sivua tässä vaiheessa selaimella on se oudon näköinen. Osa elemnteistä tippuu. Eli sivu näyttää kutakuinkin tällaiselta.

Syynä moiseen on se, että solun sisältö ei ala yläreunasta vaan oletusarvon mukaisesti keskeltä. Tilanne kojaantu laittamalla solun sisään tagi valign="top".

Molemmat korjattuna näin:

<TD ROWSPAN=2>
<IMG SRC="kuvat/index_02.gif" WIDTH=121 HEIGHT=527 ALT=""></TD>
<TD valign="top">
<IMG SRC="kuvat/index_03.jpg" WIDTH=640 HEIGHT=21 ALT=""></TD>
</TR>
<TR>
<TD WIDTH=640 valign="top">
Tähän tulee tekstii
</TD>

Vieläkin irvistää ja pahasti. Syyn siihen saat selville kun kirjoitat tablen reunalle arvoksi yksi.

<TABLE WIDTH=761 BORDER=1 CELLPADDING=0 CELLSPACING=0>

Siksi käymmekin seuraavaksi navigaation kimppuun. Kyseessä on tämä koodi.

<TD valign="top">
<IMG SRC="kuvat/index_03.jpg" WIDTH=640 HEIGHT=21 ALT="">
</TD>

Tuosta on kuva otettava pois, koska luomme siihen CSS-navigaation. Nyt on tärkeää määritellä myös korkeus, koska juuri tuo korkeuden määrittelemättä jättäminen rikkoo sivuston ulkoasun. Koodi menee näin:

<TD WIDTH=640 HEIGHT=21 valign="top">
Tähän tulee navigaatio
</TD>

Nyt onkin sitten HTML-osuus melkein valmista. Yläpalkkiin emme koske, koska se on täysin ok. Sivupalkki on sen sijaan aikamoinen ongelma, koska siinä on kuvio. Kaikki toimisi, jos sivua ei koskaan tarvitsisi vierittää. Siksi teemme kyseiselle solulle taustakuvan, joka toistuu ja toistuu, jos sivu venyy.

Tuon laitamme koodiin näin:

<TD ROWSPAN=2 valign="top" background="tausta.jpg">
<IMG SRC="kuvat/index_02.gif" WIDTH=121 HEIGHT=527 ALT="vasen reuna">
</TD>

Sen jälkeen sivu voi venyä kuinka paljon vaan ja tausta on sama keltainen kuvio.

Mikäli kokeilet esimerkkiä validaattorissa. Saat virheilmoituksen. Syynä siihen on, ettei td:lle hyväksytä taustakuvaa. Toisaalta kyllä se toimii eli hätätilassa noinkin voi tehdä. Korjataan virhe kuitenkin CSS:n avulla.

Line 14, Column 40: there is no attribute "BACKGROUND".

Lähteet

IT Plus (2001). Oikea työkalu: HTML. IT Plus(2), 89.

Mikä on MIDI? [Online: http://www.henrin.net/musiikki/tekniikka/midi], luettu 21.1.2007.

WYSIWYG. Wikipedia.[Online: http://fi.wikipedia.org/wiki/WYSIWYG] Luettu 14.2.2007.