Tee oma web-sivu, osa 2


Kotisivua voi piristää kuvin sekä ulkonäköä parantaa esimerkiksi listoilla. Myös linkit ovat tärkeä osa kotisivuja. Linkeiksi voi kerätä vaikkapa omaan harrastukseen liittyviä muita sivuja.

Listat

Listoja löytyy kolmea eri mallista, eli tavallinen, numeroitu ja määrittelylista.

<UL> <LI> </UL>

Tavallinen lista (unordered list). Listarivien edessä on pallo, neliö, tms. riippuen siitä montako listaa on sisäkkäin.
Esimerkki:
<UL>
<LI>Tavallinen
<LI>Numeroitu
<LI>Määrittely
</UL>

Dokumentissa:

  • Tavallinen
  • Numeroitu
  • Määrittely

<OL> <LI> </OL>

Numeroitu lista (ordered list). Listarivien eteen tulee numerot.
Esimerkki:
<OL>
<LI>Tavallinen
<LI>Numeroitu
<LI>Määrittely
</OL>

Dokumentissa:

  1. Tavallinen
  2. Numeroitu
  3. Määrittely

<DL> <DT> <DD> </DL>

Määrittelylista (definition list). Normaalisti <DT> ja <DD> -tagien jälkeiset tekstit tulevat eri riveille. Lisäämällä <DL> -tagiin COMPACT -osan tekstit tulevat samalle riville mikäli kaikkien <DT> -tagien jälkeinen osa on vain muutaman merkin pituinen. Muussa tapauksessa käy kuten esimerkin 2 viimeisellä rivillä. Esimerkki 1:
<DL>
<DT>Matti<DD>Puheenjohtaja
<DT>Jukka<DD>Sihteeri
<DT>Kalervo<DD>Rahastonhoitaja
</DL>

Dokumentissa:

Matti
Puheenjohtaja
Jukka
Sihteeri
Kalervo
Rahastonhoitaja
Esimerkki 2:
<DL COMPACT>
<DT>Matti<DD>Puheenjohtaja
<DT>Jukka<DD>Sihteeri
<DT>Kalervo<DD>Rahastonhoitaja
</DL>

Dokumentissa:

Ari
Puheenjohtaja
Jukka
Sihteeri
Kalervo
Rahastonhoitaja

Linkit

<A HREF="osoite">nimi</A>

Linkit (anchor hyperlink) voivat osoittaa joko samalle sivulle eri kohtaan, saman henkilön eri sivuille, tai myös eri palvelimille. Linkit voivat myös osoittaa kuvaan, tai esimerkiksi pakattuun tiedostoon, jonka sivujen lukija voi noutaa koneelleen.

Linkkitagien väliin laitetaan lukijalle näytettävä linkin nimi, haluttu kuva tai molemmat. Samassa hakemistossa oleviin kuviin ei ole pakollista määritellä palvelimen nimeä eikä polkua. Samalla palvelimella eri hakemistossa oleviin taasen täytyy määritellä, polku mutta palvelinosan voi jättää pois.
Esimerkkejä:
<A HREF="http://www.verkkouutiset.fi">Verkkouutiset</A>

Dokumentissa:
Verkkouutiset


<A HREF="http://www.verkkouutiset.fi"><IMG SRC="gif/ARROW15.GIF"></IMG></A>

Dokumentissa:


<A HREF="http://www.verkkouutiset.fi"><IMG SRC="gif/ARROW15.GIF">Verkko.uutiset</IMG></A>

Dokumentissa:
Verkkouutiset


<A HREF=http://www.verkkouutiset.fi/arkisto/Arkisto_1998/6.helmikuu/WEB1.HTM">Artikkelisarjan ensimmäinen osa</A>

Dokumentissa:
Artikkelisarjan ensimmäinen osa


<A HREF="gif/ARROW15.GIF">Katso kuva</A>

Dokumentissa:
Katso kuva

Samalla sivulla eri kohtaan osoittavat linkit merkitään # -merkillä jonka perään tulee kohdan nimi. Kohtaan johon sivulla hypätään laitetaan "kirjanmerkki".
Esimerkki:
Hyppypaikan merkintä (ei näy käyttäjälle):
<A NAME="#alku"></A>

Varsinainen hyppylinkki:
<A HREF="#alku">Sivun alkuun</A>

Dokumentissa:
Sivun alkuun

Kuvat

<IMG SRC="kuva">mahdollinen nimi</IMG>

Kuvien (image) määrittelyyn pätee samat säännöt kuin linkkeihin mitä tulee palvelimen ja polun määrittelyyn. Tagien väliin voi halutessaan laittaa selitystekstin, joka tulee kuvan viereen. Kuvatagin sisään on mahdollista liittää myös seuraavia attribuutteja:
ALT="Kuva kodistani"
Teksti, joka näytetään mikäli kuva ei lataudu tai käyttäjän selain ei tue kuvia.

ALIGN=" "
Kuvan sijoitus tekstin suhteen, vaihtoehdot:

  • TOP => Teksti tulee kuvan yläreunan tasalle
  • MIDDLE => Teksti tulee kuvan keskitasolle
  • BOTTOM => Teksti tulee kuvan alareunan tasalle
  • LEFT => kuva sijoittuu sivun vasempaan reunaan ja teksti sijoittuu sen vierelle kuvan rajoja seuraten.
  • RIGHT = kuva sijoittuu sivun oikeaan reunaan ja teksti sijoittuu sen vierelle kuvan rajoja seuraten.
BORDER=
Kuvan reunaviivan paksuus pikseleinä.

WIDTH=
Kuvan leveys pikseleinä. Nopeuttaa kuvan latautumista joillakin selaimilla.

HEIGHT=
Kuvan korkeus pikseleinä. Nopeuttaa myös kuvan latautumista joillakin selaimilla.

Esimerkkejä:
<IMG SRC="gif/ARROW15.GIF"></IMG>

Dokumentissa:

<IMG SRC="gif/ARROW15.GIF" ALIGN="TOP">Kuva</IMG>

Dokumentissa:
Kuva

<IMG SRC="gif/ARROW15.GIF" ALIGN="BOTTOM" BORDER=4>Kuva</IMG>

Dokumentissa:
Kuva

<IMG SRC="olematon.GIF" ALT="Kuva jota ei ole"></IMG>

Dokumentissa:
Kuva jota ei ole

Sivuja, joilta löytyy sopivia kuvia kotisivulle laitettavaksi on useita, esimerkiksi Lasse Kiviluodon sivut, jotka sisältävät taustakuvia, animoituja gif-kuvia, viivoja, nappuloita ja ikoneita.

Kuvat on mahdollista myös imuroida itselleen zip-pakattuna pakettina. Myös Haksun Huumorisivujen kuva-osasto sisältää pienen valikoidun kuvavalikoiman, joista suurin osa on anomoituja gif-kuvia.

Värit ja taustakuva

<BODY> </BODY>

Body -tagien väliin tulee varsinainen dokumentti, mutta <BODY> - tagiin voi liittää myös määrityksiä, joilla muokataan sivun värejä. Mikäli kaikki body - tagissa käytettävät määritykset ovat käytössä on tuloksena seuraavanlainen rivi:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF" ALINK="#FFFF00" VLINK="#00FF00" BACKGROUND="taustakuva.gif">

  • BGCOLOR => Sivun taustaväri, näytetään mikäli taustakuvaa ei voi ladata tai sitä ei ole määritelty.
  • TEXT => Tekstin väri
  • LINK => Linkin väri mikäli sivulla, johon se osoittaa ei ole käyty.
  • ALINK => Linkin väri sillä hetkellä, kun linkkiä painetaan
  • VLINK => Linkin väri, kun sivulla, johon se osoittaa, on käyty.
  • BACKGROUND => Kuva, joka ladataan taustakuvaksi. Kuva kopioituu tarvittaessa sekä sivu- että korkeussuunnassa siten, että koko dokumentin pohja peittyy.
Kaikkia edellämainittuja määrityksiä ei ole pakko käyttää, vaan niistä voi valita haluamansa. Värien määrittely tehdään RGB-koodilla, jotka löytyy esimerkiksi Markku Kiesin värikarttasivulta. Taustakuvia löytyy suuri valikoima Juha Koivusen sivuilta.

MARKO HAKALA
13.2.1998

AJASSA -SIVULLE