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
.
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).