Hokusai: Great Wave

WEB-sivun rakentaminen

Tämän ohjeen tarkoitus on kertoa aloittelevalle sivun tekijälle, että homman voi tehdä helpollakin.

Esimerkiksi MS Word tai Netscape Composer ovat aivan kohtuullisia WEB-editoreja aloittelijalle. Wordissä talletus pitää tehdä HTML-muotoisena. On kuitenkin suositeltavaa tutustua mahdollisimman pian HTML-kieleen, koska kotisivun tekeminen tageinä on todella helppoa ja nopeaa parin kokeilun jälkeen. Lisäksi useimmilla WYSIWYG editoreilla on pahana tapana tehdä suhteettoman pitkää koodia. Esim Wordin tekemän sivun koodia voi käsin editoimalla tiivistää melkein 90%.

Koodin oppimisen jälkeen Notepad on jo riittävä työkalu ja Archanophilia suorastaan loistava. (Itse käytän vanhempaa 4.0 -versiota .)

HTML-kielen käyttöön löytyy hyvät ohjeet esim:
http://werbach.com/barebones/download.html

Käytännössä välttämättömien tagien määrä on varsin pieni:
<title>..</title> Otsikko- eli yläpalkki
<html>..</html> HTML-koodi näiden väliin
<body background=..>..</body> Näiden välissä varsinainen sivu
<h3>..</h3> ja <h1>..</h1> ; Funttikoko
<b>..</b> <i>..</i> Bold ja italic
<br> <p> <hr> rivinvaihto ja kappaleenvaihto
<table width=.. border=..> Taulukko alkaa
<tr><td colspan=.. rowspan= align=..>..</td></tr> Rivin alku, solun alku
</table> Taulukko loppuu
(Taulukon Minimimuoto: <table><tr><td>..</td></tr></table>
<img src=".."> Kuvan liittäminen sivuun
<a href="http:\\..">..</a> Linkki toiselle sivulle
<a href="mailto:..">..</a> Taattu tapa hankkia roskapostia itselleen !
<pre>..</pre> Esimuotoiltu teksti
<OL> , <li></OL> Numeroitu lista
<UL> , <li></UL> Pilkullinen lista
<DIR> , <li></DIR> Numeroitu lista, käytä mieluummin UL

Tässä ne olivatkin lähes tärkeysjärjestyksessä. Käytössä pitää muistaa, että osa tageista on kaksiosaisia <Tagi alkaa>..</Tagi loppuu>. Useimpiin tageihin voi, mutta ei ole pakko liittää lisämäärittelyitä. Esimerkiksi taulukon solun leveys <td width=200>.
Tehokkain muotoilutyökalu on taulukko <table>, kunhan muistaa, että taulukon solut voivat sisältää muutakin, kuin tekstiä Esimerkiksi tällä sivulla on käytetty taulukkoa tekstin asenteluun. (raamit on jätetty tarkoituksella näkyviin). Toisaalta kaikkea ei kannata koittaa ratkaista taulukon väliseinillä. Esimerkiksi vaakasuora viiva ( <HR> ) helpottaa muotoilua.

Pienenä lisäyksenä vielä: Jos teet taulukoita MS Officen Excelillä, varaudu siihen, että HTML-sivuista tulee valtavia, jolloin niiden siirto hitaan modemin kauttaa saa asiakkaasi raivoihinsa. Jos haluat pieniä ja tiiviitä tiedostoja, voit joko editoida Excelin tekemästä taulukosta pois kaiken turhan tai käyttää jotain muuta ohjelmaa. Esimerkiksi 602pro tuottaa hyvin tiivistä taulukkoa. 602pro ja Excel muotoilevat lopputuotteen omilla tavoillaan, joten niiden käyttöön pitää totutella. Esimerkkiä alla kaksi taulukkoa. Ensimmäinen on tehty Excelillä ja sen koko on 7kB, alempi on tehty 602Pro:lla ja sen koko on alle 1kB

Excel

602Pro

Hauskoja temppuja

Allaolevien tagien käyttö vaatii, että html-sivu talletetaan shtml-päätteellä ja että web-serverissä on sallittu CGI-scriptit sekä SSI . Myös hakemistojen ja tiedostojen suojaukset pitää virittää. Nämä temput edellyttävät kuitenkin niiden käyttäjältä perustasoa laajempaa perehtyneisyyttä.

Jos haluat sivulle näkyviin, koska sitä on viimeksi käsitelty, voit kokeilla tätä:
<!--#config timefmt="%A %B %d, %Y" -->
Last modified: <!--#flastmod file="OMASIVU.shtml" -->
Ensimmäinen rivi asettaa ajan muodon, toinen rivi kertoo viimeisen muokkaushetken.

Monesti on tarvetta käyttää sivun osana jotain toista tiedostoa. Esimerkiksi silloin, kun jokin palvelimen ohjelma tuottaa tälläisiä. Tiedosto voi sisältää myös HTML-koodia. Tähän voi käyttää seuraavaa tagia:
<!--#include file="file.txt"-->

Ylläolevat tagit ovat tiedon ylläpitoon liittyviä, joten niitä on turha sijoittaa itse sivulle. Myös yläpalkkia (title) voi käyttää !

Taulukoista

Muista, että taulukko on yksi tehokkaimmista muotoiluvälineistä !
Tässä muutamia tapoja muotoilla taulukkoa:

< TABLE rules=RR frame=FF bordercolor=CC cellspacing=CS cellpadding=CP width=W height=H align=A hspace=HS vspace=VS>
Alla on hieman esitetty eri vaihtoehtoja.

RR NONE / ALL / COLS / ROWS / GROUPS (sisäkehykset)
FF VOID / BOX / BORDER / ABOVE / BELOW / LHS / RHS / HSIDES / VSIDES (raamit).
CC RED / BLUE / GREEN / . . . / #0E0E0E0E (raamien värit)
CS solujen välinen tyhjä tila
CD solun sisäinen tyhjä tila
W taulukon leveys 60% / 700
H taulukon korkeus
HS vaakasuora etäisyys tekstistä
VS pystysuora etäisyys tekstistä
A LEFT / RIGHT Asettelu sivuilla olevaan tekstiin nähden

Have fun !

Hyviä linkkejä

HTML-tageja
PERL 4
PERL 5
PERL
PTMUSTA at UTU.FI