Veppisivun tekemisen pikaohje

Käytä jotain editoria, jota osaat käyttää, vaikkapa NotePadiä (Muistio-ohjelmaa) tai Emacsia. Kirjoita sivu tiedostoon, joka nimi on muotoa nimi.html, missä nimi koostuu pienistä englannin kielen kirjaimista a - z ja tarvittaessa numeroista ja yhdysmerkeistä, esim. yleista.html tai toimkert2005.html.

Kirjoita alkuun
<title>ulkoinen otsikko</title>
missä ulkoinen otsikko on vapaamuotoinen mutta tietopitoinen teksti. Teksti ei tule näkyviin osana itse sivua, mutta selaimet ja muut ohjelmat käyttävät sitä moniin eri tarkoituksiin - usein silloin, kun itse sivua ei näy. Siksi tekstin pitäisi olla ymmärrettävä missä tahansa asiayhteydessä, myös ihmiselle, joka näkee sen sattumalta. Esimerkki:
<title>Höpsis ry:n vuoden 2005 toimintakertomus</title>

Kirjoita sitten sivun pääotsikko. Se ei ole pakollinen, mutta yleensä tarpeellinen:
<h1>pääotsikko</h1>
Pääotsikon on hyvä olla lyhyehkö. Se voi toki olla sama kuin ulkoinen otsikko. Kumpikin kannattaa kirjoittaa normaalitekstinä, ei HUUTAEN eli kokonaan isoin kirjaimin. Esimerkki:
<h1>Höpsis ry:n toiminta v. 2005</h1>

Kirjoita itse sisältö, yksi asia yhteen kappaleeseen. Merkkaa kappaleen alku <p>:llä ja loppu </p>:llä. Ensimmäisen kappaleen on hyvä olla sellainen, että se tiivistää koko sivun olennaisimman sisällön niin, että ihminen, joka lukee vain sen, vastaanottaa yhden keskeisen viestin. Lisäksi se auttaa lukijaa ratkaisemaan, onko sivu ylipäänsä häntä varten.

Näillä pääsee jo alkuun. Itse asiassa erittäin suuri osa veppisivuista paranisi paljon, jos ne siistittäisiin käyttämään vain edellä kuvattuja rakenteita!


Jos sivu on pitkähkö tai jos muuten tuntuu tarpeelliselta, jaa se osiin väliotsikoilla. Ne ovat samaa muotoa kuin pääotsikko, mutta h1:n tilalla on (alussa ja lopussa) h2. Kuten varmaan arvaat, voit käyttää myös alemman tason väliotsikoita eli h3-otsikoita jne.

Aiheen vaihdon voi osoittaa merkkauksella <hr>. Nimi johtuu sanoista "horizontal rule", joka heijastaa tyypillistä näkyvää esitysmuotoa. Tämä merkkaus on usein lähinnä vaihtoehto otsakkeiden käytölle ja sopii lyhyehköjen, otsikottomien osien erottamiseen toisistaan.

Kappaleen sisällä voi korostaa sanoja ja sanayhdistelmiä kirjoittamalla ne strong-merkkauksen sisään, esim. <strong>korostaa</strong>. Lievemmän korostuksen, joka sopii korostamaan sanaa lauseyhteydessä pikemminkin kuin näkyvänä osana koko sivua, saa aikaan em-merkkauksella, esim. <em>lauseyhteydessä</em>. Kohtuullisesti käytettynä korostukset ovat erittäin hyödyllisiä. Liiaksi käytettyinä ne pilaavat koko idean; joka korostaa kaikkea, ei korosta mitään.


Luetelma saadaan aikaan näin:
<ul>
<li>ensimmäinen kohta</li>
<li>toinen kohta</li>
...
<li>viimeinen kohta</li>
</ul>

Luetelma on tällöin numeroimaton. Jos haluat numeroidun, käytä ul:n tilalla ol:ää.


Kuva esitetään omana kokonaisuutenaan näin:
<div><img alt="korviketeksti" src="kuvatiedosto"></div>

Tässä korviketeksti on se, mitä halutaan esiintyvän kuvan tilalla, jos itse kuva puuttuu, esim. selaimessa, joka ei lainkaan näytä kuvia, tai puhesynteesissä. Ja kuvatiedosto on kuvan sisältävän tiedoston nimi tai yleisemmin veppiosoite.

Kuva voidaan myös liittää osaksi kappaletta, jossa on tekstiä. Tällöin rakenne voi olla esimerkiksi seuraavanlainen:
<p><img alt="korviketeksti" src="kuvatiedosto" align="right">Kappaleen tekstiosuus<br clear="all"></p>
Tällöin kuva näkyy tekstin oikealla puolella. Jos haluat sen vasemmalle, korvaa right sanalla left.


Tiivistelmä
title ulkoinen otsikko
h1 sivun pääotsikko
h2 2. tason otsikko
h3 3. tason otsikko
p kappale
hr aiheen vaihto
em korostus
strong vahva korostus
ul numeroimaton luetelma
ol numeroitu luetelma
li luetelman alkio
img kuva

Jos haluat tehdä yksinkertaista "tyylittelyä" sivullesi, esimerkiksi vaikuttaa kirjasinlajiin tai väreihin, kannattaa seuraavaksi lukea ohje Yksinkertaista tyylikkyyttä veppisivuille.

Lisäohjeita: Web-julkaisemisen opas. Siitä kannattaa ehkä ensiksi lukea luku Linkkejä peliin, sillä edellä kuvattujen rakenteiden jälkeen linkit ovat ehkä tärkein asia veppisivulla (Web-sivulla, WWW-sivulla, verkkosivulla).