HTML-opas

© Leena Ahrio 1995

Huom! Opasta ei ole päivitetty kymmeneen vuoteen, moni asia on muuttunut. Perusidea tietysti on sama, mutta nykystandardin mukainen tämä ei kyllä ole.

HTML-lyhenne muodostuu sanoista HyperText Mark-up Language eli suomennettuna hypertekstien merkitsemiskieli. Hyper-sana viittaa mahdollisuuteen tehdä erilaisia linkkejä dokumentteihin. Linkin tunnistaa esim. tekstin poikkeavasta väristä, joka on usein sininen. HTML-dokumentit sijaitsevat maailmanlaajuisen tietoverkon eri tietokoneilla ja niitä katsellaan erilaisilla selainohjelmilla. Hyperteksti dokumentin tunnistaa tiedostonimen perässä olevasta tunnisteesta, joka on .html tai .htm.

Html-dokumentti koostuu asiatekstistä sekä HTML-kielestä. Tiedostot tehdään ASCII eli tekstimuodossa. Tästä syystä kaikki muotoilut varsinaiseen asiatekstiin tehdään HTML:n omilla komennoilla ja niiden määreillä. Dokumenttien tekoon onkin mahdollista käyttää sellaista tekstinkäsittelyohjelmaa, jolla voi tallentaa ASCII tai text-only -muodosssa. Lisäksi joihinkin tekstinkäsittelyohjelmiin (esim. winword, winwp) on saatavilla omia kaupallisia ns. HTML-assistentteja, joiden avulla tekstin muuttaminen HTML-muotoon on vaivatonta. Monet käyttävät kuitenkin tiedostojen tekemiseen sitä varten suunniteltuja ja verkosta saatavia HTML-editoreja (esim. HTMLwrite, HTMLnote), jotka sisältävät monia koodausta helpottavia piirteitä.

Komennot kertovat selainohjelmalle (lukuohjemalle l. katseluohjelmalle) (Netscape, Mosaic, Lynx jne.) miten HTML-dokumentti tulee esittää. Komennnot siis muotoilevat tekstin. Niiden avulla teksti voidaan esimerkiksi lihavoida tai tehdä rivinvaihto. Selainohjelma ei huomioi tuntemattomia - eikä myöskään väärin kirjoitettuja - komentoja. Ota huomioon, että muut selainohjelmat eivät huomioi esimerkiksi Netscape-ohjeman laajennuksia kuten taulukoita ja kirjainten koon määrityksiä.

Komento eli tag ympäröidään kulmasuluilla <KOMENTO>. Komennoilla on yleensä aina myös lopetuskomento kauttaviiva </KOMENNON LOPETUS>.

Yhdelle komennolle voi antaa useita määreitä. Määre koostuu nimestä, yhtäsuuruusmerkistä = sekä määrelle annettavasta arvosta. Määreen arvo ympäröidään lainausmerkeillä " ".

esim. <IMG SRC="kuva.gif" ALIGN="TOP">

HTML-dokumentin perusrakenne on seuraava:

<HTML> HTML-dokumentti aloitetaan aina HTML -tunnisteella

<HEAD> otsikko-osuuteen sijoitetaan vain dokumentin nimi, joka näkyy selaimen ylälaidan otsikkopalkissa (ei varsinaisen tekstin joukossa)

<TITLE> dokumentin nimi, tieto, jonka esim. hakurobotit ensinnä tarkistavat

</TITLE> dokumentin nimen lopetuskomento

</HEAD> otsikon lopetuskomento

<BODY> tekstin runko, jonka sisään loput elementit sijoitetaan

</BODY> tekstiosuuden lopetuskomento

</HTML> HTML-dokumentti lopetetaan aina lopetuskomennolla

Asettelu | Linkit ja kirjanmerkit | Kuvat ja värit | Taulukot | Lisätietoja

Html-dokumentin kirjoittaminen

Kun kirjoitat tekstiä hyperdokumenttiisi, huomaa että lukuohjelmat muotoilevat itse tekstin lopulliseen muotoonsa lukijan kuvaruudulle sopivaksi. HTML-tiedostot kirjoitetaan siis toisin periaattein kuin nykyisin on totuttu esim. tekstinkäsittelyssä.

Esimerkiksi teksti, joka on kirjoitettu HTML-tiedostostoon näin:

	Tämä teksti
	on kirjoitettu sisennettynä
	usealle eri riville.

Näkyy lukuohjelmassa näin:

Tämä teksti on kirjoitettu sisennettynä usealle eri riville.

Selainohjelma ei siis ota huomioon käyttämääsi rivinvaihtomerkkiä (enter) eikä myöskään mahdollisia tabulaattoreita tai ylimääräisiä välilyöntejä.

Tekstin ulkoasua on kuitenkin mahdollista rytmittää erilaisin kommennoin ja määrein.

Esimerkiksi rivinvaihto tehdään komennolla <BR> (lyhennys "break" -sanasta).

Tampere-talo<BR> Yliopistonkatu 55 <BR>33100 Tampere<BR>

Näyttää selainohjelmalla katsottuna tältä:

Tampere-talo
Yliopistonkatu 55
33100 Tampere

HTML-kielessä ei isoilla ja pienillä kirjaimilla ole komentotasolla eroa. Isoja ja pieniä kirjaimia voi siis käyttää mieltymystensä mukaan. Selkeyden vuoksi kannattaa kirjoittaa komennot isoilla kirjaimilla.

Ei siis ole merkitystä sillä kirjoittaako <br> vai <BR>.

Sen sijaan ne tiedostonimet ja -polut, joihin dokumentissa viitataan on kirjoitettava täsmälleen oikein eli pienet ja isot kirjaimet on huomioitava. Vertaa esimerkiksi:

	http://www.uta.fi/ohjeita/htmlopas.html
	http://www.uta.fi/Ohjeita/htmlopas.html

Ympäröimällä haluttu alue kulmasuluilla, huutomerkillä sekä kaksinkertaisilla tavuviivoilla voidaan tehdä merkintöjä, jotka eivät näy selaimella katsottaessa. . Huutomerkin taakse voidaan sijoittaa ohjeita, muistutuksia sekä väliaikaisia poistoja.

Esimerkiksi

<!-- Kun VR:n sivut saadaan verkkoon sijoita ne tähän>
<A HREF="http//:www.???>VR:n aikataulut</A>. -->

ei näkyisi ollenkaan selaimella.

Kirjoittaminen | Linkit ja kirjanmerkit | Kuvat ja värit | Taulukot | Lisätietoja

Tavallisimmat asettelukomennot

Kappale ja tekstityylit

Kappaleen alku merkitään komennolla <P>

komento lisää automaattisesti tilaa yläpuolelle

lopetuskomento </P> ei ole välttämätön

Kuten aiemmin todettiin rivinvaihto tehdään komennolla <BR>

lopetuskomentoa ei ole

kannattaa käyttää harkitusti, sillä selainohjelma rivittää automaattisesti ja sivun koko määräytyy katselijan näytön ja valintojen mukaan

Otsikot merkitään komennoilla <Hx>...</Hx>, missä x on numero 1-7 väliltä.

kirjaimen H (header) jälkeen tulee numero, joka kertoo otsikon koon

komento <H1> tekee suurimmat otsikot ja komento <H7> pienimmät.

<H1>Otsikko1</H1>

<H2>Otsikko2</H2>

<H3>Otsikko3</H3>

<H4>Otsikko4</H4>

<H5>Otsikko5</H5>

<H6>Otsikko6</H6>

<H7>Otsikko7</H7>

Erilaisia kappale- ja tekstityylejä ovat:

<ADDRESS>...</ADDRESS>	osoitetyyli eli kursiivi
<BLOCKQUOTE>... </BLOCKQUOTE>	lainaustyyli eli sisennetty
<PRE>...</PRE>	`alkuperäinen asettelu: välilyönnit ja rivivaihdot näytetään sellaisenaan, courier tms. tasalevyinen fontti`
<B>...</B>	vahvennetty (bold)
<I>...</I>	kursiivi (italics)
<CENTER>...</CENTER>	Keskitetty

Tehosteita voi myös yhdistää esim. <I><B>Lihavoitu kursiivi</B></I>.

Lisäksi on mahdollista tehdä erilaisia listoja

Pallukkalistat (unordered) tehdään komennoilla <UL>...</UL>

jokainen listan kohta merkitään komennolla<LI>
<LI> ei vaadi loppukomentoa

Edellinen lista tehtäisiin seuraavasti:

<UL> <LI> jokainen listan kohta merkitään komennolla <LI> <LI> <LI> ei vaadi loppukomentoa </UL>

Numeroidut listat (ordered list) tehdään komennoilla <OL>...</OL>

jokainen listan kohta merkitään komennolla <LI>
<LI> ei vaadi loppukomentoa
lukuohjelma numeroi kohdat automaattisesti

HTML- dokumenteissa käytetään usein tekstin rytmittämisessa sivun poikki meneviä viivoja.

Poikkiviivat tehdään komennolla <HR> (horizontal ruler). Netscape -ohjelmia käytettäessä on poikkiviivoilla mahdollista antaa erilaisia arvoja.

Viivan paksuutta voi säätää määreellä SIZE, jolle annetaan halutun suuruinen numeerinen arvo
On myös mahdollista määritellä viivan pituus WIDTH joko prosentteina tai pikseleinä.
Lisäksi voidaan määritellä poikkiviivan sijainti ALIGN="left/center/right".

Esimerkiksi

<HR SIZE="5" WIDTH="50%" ALIGN="LEFT" NOSHADE>

Kirjoittaminen | Asettelu | Kuvat ja värit | Taulukot | Lisätietoja

Ankkurit

Linkit

Html-dokumentit sisältävät linkkejä toisiin dokumentteihin. Linkin kohdalla kursori muuttuu 'kädeksi". Linkki näkyy kuvaruudulla yleensä korostettuna sanana. Korostustapa riippuu katseluohjelmasta. Graafisissa lukuohjelmissa linkki voi olla alleviivattu tai poikkeavan värinen sana (yleensä sininen). Linkkeinä voivat toimia myös kuvat. Tyypillisiä kuvalinkkejä ovat erilaiset nuolet ja kotimökin kuvat, joiden avulla käyttäjä voi liikkua tietyn sivukokonaisuuden sisällä.

Linkki tehdään komennolla <A HREF> ja päätetään komentoon </A> (anchor hypertext reference).

Esimerkiksi

<A HREF="http://www.uta.fi/verkkopalvelut/wwwref.html"> WWW-dokumentteja </a>

Komentojen välissä oleva teksti näkyy dokumentin lukijalle linkkinä - WWW-dokumentteja - jonka hän voi halutessaan valita.

Lainausmerkkien välissä oleva teksti on dokumentin URL, eli Universal Resource Locator. Se kertoo dokumentin sijainnin. Ylläoleva URL osoittaa Tampereen yliopiston palvelimella olevaan verkkopalvelut hakemiston tiedostoon wwwref.html.

URL näyttää seuraavanlaiselta:

http://koneennimi/polku

Ensimmäisenä tuleva sana http (HyperText Transfer Protocol) viittaa hyperdokumenttiin. Sen jälkeen tulee kahden kauttaviivamerkin jälkeen koneennimi, esimerkiksi Tampereen kaupungin palvelin www.tampere.fi. Tämän jälkeen tulee hyperdokumentin sijaintia osoittava polku.

http://www.tampere.fi/elke/mato/

Joka viitaa Tampereen kaupungin matkailutoimistoon.

Kun haluat viitata kotihakemistossasi olevaan hyperdokumenttihakemistoosi (public_html), laita polkuun ensimmäisenä ~käyttäjätunnus.

Esimerkiksi URL

http://www.uta.fi/~la19672/linkit.html

osoittaa la19672:n kotihakemistossa olevaan tiedostoon public_html/linkit.html. WWW- palvelin pystyy lukemaan tiedostoja ainoastaan alihakemistosta nimeltään public_html.

Sähköpostin lähettäminen onnistuu yksinkertaisesti. Normaaliin linkin määreeseen lisätään "mailto:", joka viittaa sähköpostin lähettämisen hoitavaan ohjelmaan.

<A HREF="mailto:la19672@uta.fi">la19672@uta.fi</A>

Selaimella edellinen näyttäisi tältä

la19672@uta.fi

Kirjanmerkit

Kirjanmerkkejä käytetään siirryttäessä tiettyyn kohtaan dokumenttia. Niiden avulla voidaan tehdä sekä dokumentin sisäisiä linkkejä että niihin voidaan viitata myös dokumentin ulkopuolelta.

Kirjanmerkkejä käytetään ‘pitkissä’ dokumenteissa linkkeinä tiettyyn kohtaan sivua kuten esimerkiksi paluuna sivun alkuun.

Ensinnä kohtaan, johon halutaan ‘hypätä’ tehdään seuraava merkintä:

<A NAME="kirjanmerkin nimi">

Toiseksi kohtaan, josta halutaan siirtyä kirjanmerkin osoittamaan paikkaan merkitään tiedostonimen perään # ja kirjanmerkin nimi:

<A HREF="doku.html#kirjanmerkin nimi">Se ja se kohta dokumentissa</A>

Esimerkiksi

<A HREF="htmlopas.htm#sivun alku">Takaisin alkuun</A>

Kun kirjanmerkkiin viitataan toisesta hakemistosta kirjoitetaan linkin nimeen täydellinen URL-osoite.

Kirjoittaminen | Asettelu | Linkit ja kirjanmerkit | Taulukot | Lisätietoja

Kuvat ja värit

Voit lisätä tekstiisi myös kuvia. Kuvien tulee olla joko gif- tai xbm-formaatissa. Uusimmat lukuohjelmat - kuten Netscape - ymmärtävät myös jpeg-formaatissa olevia kuvia. Kuva lisätään komennolla <IMG SRC>(image source).

Kuvan tiedostonnimi tulee lainausmerkkeihin komennon jälkeen eli <IMG SRC ="kuva.gif">.

Jos kuva sijaitsee eri hakemistossa tai vaikka toisella puolella maapalloa, on kuvan nimeen liittettävä koko tiedostopolku palvelimella.

Esimerkiksi

<IMG SRC ="http://www.tampere.fi/tampere-talo/kuva.gif">.

Kuvan pitäisi näkyä tekstissä sillä kohdalla, missä komento on. Jos WWW-palvelin ei pysty lataamaan kuvaa, sen paikalle tulee näkyviin pieni ikoni. Jos selainohjelma ei jostain syystä pysty avaamaan kuvaa, näkyy kyseisen kuvan paikalla 'särkynyt' ikoni

Jos selainohjelma ei löydä kuvaa, näkyy 'hukassa' olevan kuvan tilalla kysymysmerkki-ikoni.

Tarkista tällöin tiedostonimi, kuvan lukuoikeudet ja sen formaatti.

Älä laita dokumenttiisi kovin isoja kuvia. "Suurten" kuvien siirtäminen vie kohtuuttomasti verkon kapasiteettia sekä lukijan aikaa ja rahaa. Sopiva kuvakoko on alle 50 kilotavua.

Määrite ALT kertoo tekstin, joka näytetään kuvan sijasta tekstipohjaisia ohjelmia käytettäessä.

Esimerkiksi:

<IMG SRC="http://www.tampere.fi/tampere-talo/logo.gif" ALT="Tampere-talo">

Pohjakuviot ja -värit sekä tekstivärin määrittely

HTML-dokumenttien taustakuvio tai väri on mahdollista valita. Määrittely tehdään <BODY> -tagiin seuraavasti. Jos taustakuvioksi halutaan oma kuvatiedosto esimerkiksi logosta liitetään BODY-tunnisteeseen määrite BACKGROUND="tiedoston URL". Internetistä löytyy myös paljon valmiita taustakuvioita.

Esimerkiksi <BODY BACKGROUND="tausta.gif">

Pohjavärin sekä tekstin sekä linkkien värin voi tehdä myös heksadesimaalista värikoodia käyttäen. Tosin tällä hetkellä kaikki selainohjelmat eivät tue tätä piirrettä. Taulukoita, jotka kertovat millä koodilla mikin väri syntyy on tarjolla www-sivuilla. Koodit muodostuvat erilaisista kuuden numeron ja kirjaimen yhdistelmistä. Esimerkiksi FFFFFF -viittaa valkoiseen väriin.

BGCOLOR="#RRGGBB"	Taustaväri
TEXT="#RRGGBB"	Tekstiväri
LINK="#RRGGBB"	Linkkiväri
VLINK="#RRGGBB"	Vieraillun linkin väri

Esimerkiksi <BODY BGCOLOR="#RRGGBB" TEXT="#RRGGBB" LINK="#RRGGBB" VLINK="#RRGGBB">

Läpinäkyvät eli transparentit kuvat

Ulkonäöllisten seikkojen vuoksi sivuilla käytetään läpinäkyviä kuvia. Tällaisia kuvia on mahdollista tehdä ohjelmilla - esim. PaintShopPro ja Lview - jotka pystyvät tallettamaan kuvia 89 gif- muodossa. Internetistä löytyy myös paikkoja, joissa muokkauksen voi tehdä. Periaatteessa jokin kuvan väreistä - tavallisimmin taustaväri - määritellään siten, että sivun taustaväri tai -kuvio näkyy valitun värin tilalla.

Kuvien sijoittelu dokumentissa

Määrite ALIGN säätää kuvan horisontaalisesti suhteessa ikkunaan. Sen avulla on mahdollista tehdä joitakin suuntaa-antavia viitteitä tekstin sijoittelusta.

<ALIGN="TOP">
<ALIGN="MIDDLE">
<ALIGN="BOTTOM">
<ALIGN="LEFT">
<ALIGN="RIGHT">

Esimerkiksi näin:

<IMG align="right" SRC="flower.jpg" ALT="Kukka">

Kuvien sijoittelu kannattaa kuitenkin tehdä taulukoiden avulla. Niistä kerrotaan seuraavassa.

Kirjoittaminen | Asettelu | Linkit ja kirjanmerkit | Kuvat ja värit | Lisätietoja

Taulukot

Läheskään kaikki selainohjelmat eivät tunnista taulukkokomentoja, joten niitä on käytettävä harkiten. Taulukoita käytetään HTML-dokumenteissa "oikeiden" taulukoiden lisäksi dokumentin osasten sijoitteluun näytöllä. Niiden avulla on mahdollista parantaa dokumentin visuaalista ilmettä.

Taulukko määritellään komennoilla <TABLE>... </TABLE>

Taulukon tekemiseen käytetään seuraavia komentoja

<CAPTION>...</CAPTION>	taulukon otsikko
<TH>...</TH>	sarakkeen otsikko
<TD>...</TD>	uusi solu, jokainen solu määritellään erikseen
<TR>...</TR>	uusi rivi, rivin lopetus

Taulukkokomentojen lisämääreet

BORDERin avulla määritetään näkyvätkö solujen rajat vai eivät. Arvolla ="0" taulukon solujen rajat eivät näy. Arvolla ="1" taulukon solujen rajat näkyvät.

WIDTH kertoo solun pituuden. Voidaan ilmaista prosentteina tai pikseleinä esim. WIDTH="50%" tai "660"

HEIGHT kertoo solun korkeuden. Voidaan ilmaista prosentteina tai pikseleinä esim. HEIGHT="50%" tai "660""50%"

COLSPAN määrittelee kuinka monta saraketta tietty solu vie, oletusarvona on yksi

ROWSPAN määrittelee kuinka monta riviä tietty solu vie, oletusarvona on yksi

ALIGN säätää solun sisällön sijaintia solussa horisontaalisesti:

ALIGN="LEFT"
ALIGN="CENTER"
ALIGN="RIGHT"

Määrite VALIGN säätää solun sisällön sijaintia solussa vertikaalisesti:

VALIGN="TOP"
VALIGN="MIDDLE"
VALIGN="BOTTOM"

Esimerkki

<TABLE BORDER="1"> <CAPTION>Otsikko</CAPTION> <TR><TD ROWSPAN="3"><IMG SRC="flower.jpg"></TD> <TR><TD ALIGN="LEFT" VALIGN="TOP"><I>Vasemmalla ylhäällä</I></TD></TR> <TR><TD ALIGN="CENTER" VALIGN="MIDDLE"> <I>Keskellä keskellä</I></TD></TR> <TR><TD ALIGN="RIGHT" VALIGN="BOTTOM"> <I>Alhaalla oikealla</I></TD></TR> </TABLE>