WWW-sivujen teko

Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja:

  • sivujen määrä
  • alasivut (määrä, ulkonäkö, sisältö)
  • sisöltö (kuvia, tekstiä, multimediaa...)
  • ulkonäkö? (freimit, palstat, kehykset, sivun värimailma... Onko kaikki sivut samanlaisia?

Mieti myös paljonko laitat rahaa tähän projektiin.
Pärjäätkö ilmaisilla ohjelmilla voi pitääkö tuhlata maksulliseen softaan?
(minä suosin tuota ensimäostä vaihtoehtoa)

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tästä kohdassa WWW-sivun teko tarkemmin).
Valitse ohjelma myös sen mukaan millä kielellä haluat sivut tehdä. Hallitsetko HTML-kielen vai oletko FLASH-osaaja?
Koska tämä sivusto keskittyy tapaukseen jos html-kieli on ihan uusi sana sinulle...

Ilmaisista softista tykästyin ohjelmaan NVU, jolla näet koodin ja visuaalisen näkymän samaan aikaan, ja on saatavilla suomenkielisenä.
Hae se täältä http://www.mozilla.fi/wiki/Nvu
Suomen kielipaketti http://www.mozilla.fi/wiki/Kielipaketit#Nvu

Jos osaat jo perus asiat, kuten rakenteen ja tagien tarkoituksen, niin ehkä seuraavasta oppaasta on enemmän apua:
Laajempi Kari Lehtosen tekemä html-opas http://cs.stadia.fi/...

Sivun sisältö:
- Isot kuvat kannattaa editoida ja muuntaa .jpg (tai .gif) muotoon webbiä varten ja koko pidetään mieluiten alle 50kt
- Koko sivun koko on hyvänä pitää alle 100kt
Tätä varten käytä pieniä kuvia/linkkejä ja vain yksi iso kuva/sivu.

Testaus ja sivun koko:
Lähde siitä, että sivusto näkyy leveys-suunnassa kokonaan resoluutiolla 1024x768.
Huomaa että 1680x1050 ja muut suuret laajakuvat ovat yleistyneet, joten huomioi myös ne.
Muista testata sivujen toimivuus eri selaimilla kuten Firefox, IE ja Opera.

Mistä kotisivu tilaa?
www.heikniemi.net/

FTP
Tarvitse FTP-ohjelman jolla siirrät sivuston palvelimelle (eli sinne mistä sait kotisivutilaa)
www.download.fi/

 

WWW-sivun teko tarkemmin

 

Yleiset komennot:

Dokumentin tyyppi

<HTML></HTML>

dokumentin alussa ja lopussa

Otsikko

<TITLE></TITLE>

dokumentin nimi, tulee sijaita tunnisteessa

Tunniste

<HEAD></HEAD>

dokumentin kuvaus, esim. otsikko)

Runko

<BODY></BODY>

sivun sisältö

 

Tässä on esimerkki kuinka vaikeata on kirjoittaa HTML-koodia käyttäen ohjelmaa muistio:
sivun_teko1 sivun_teko2
Ylempänä on normaali .txt tiedosto ja alempana miltä se näyttää kun sen tallennetaan .html muodossa.

 

HTML-koodeja:

Rakenteellinen muotoilu:

Otsikkotaso

<H?></H?>

otsikkotasoja on kuusi (1-6)

Otsikon sijoittelu

<H? ALIGN=***></H?>

LEFT = vasemmalle
CENTER = keskelle
RIGHT = oikealle

Jako

<DIV></DIV>

 

Lainaus

<BLOCKQUOTE></BLOCKQUOTE>

sisennetty palsta

Korostus

<EM></EM>

yleensä kursiivi

Esimerkki

<SAMP></SAMP>

yhdessä <KBD> -komennon kanssa

Iso tekstityyppi

<BIG></BIG>

 

Pieni tekstityyppi

<SMALL></SMALL>

 

 

Sisällön muotoilu:

Lihavointi

<B></B>

 

Kursiivi

<I></I>

 

Alleviivaus

<U></U>

käytä harkiten

Yliviivattu teksti

<STRIKE></STRIKE>

käytä harkiten

Yliviivattu teksti

<S></S>

käytä harkiten

Alaindeksi

<SUB></SUB>

 

Yläindeksi

<SUP></SUP>

 

Esimuotoiltu teksti

<PRE></PRE>

näyttää tekstin sellaisena kuin se on

Keskittäminen

<CENTER></CENTER>

tekstille, kuville ja taulukoille

Kirjasinkoko

<FONT SIZE=?></FONT>

kokoja on seitsemän (1-7)

Kirjasinkoon vaihto

<FONT SIZE="+|-?"></FONT>

 

Kirjasimen väri

<FONT COLOR="#$$$$$$"></FONT>

katso värikoodit täältä

Palstoitus

<MULTICOL COLS=?></MULTICOL>

 

 

Linkit ja kuvat:

Linkki

<A HREF="URL"></A>

 

Linkki kohteeseen

<A HREF="URL#***"></A>

toiseen dokumenttiin

Linkki kohteeseen

<A HREF="#***"></A>

samassa dokumentissa

Kohdeikkuna

<A HREF="URL" TARGET="***"></A>

_BLANK = uuteen ikkunaan
_SELF = pääikkunaan
_PARENT = nykyiseen ikkunaan
_TOP = samaan, mutta kehystämättömään ikkunaan

Kohteen nimeäminen

<A NAME="***"></A>

tämä tulee # merkin kanssa oleviin linkkeihin

Näytä kuva

<IMG SRC="URL">

 

Kuvan sijoittelu

<IMG SRC="URL" ALIGN=***>

TOP = ylös
BOTTOM = alas
MIDDLE = keskelle
LEFT = vasemmalle
RIGHT = oikealle

Kuvan korvaava teksti

<IMG SRC="URL" ALT="***">

jos kuva ei näy

Liitä objekti

<EMBED SRC="URL">

upottaa objektin sivulle

Objektin koko

<EMBED SRC="URL" WIDTH=? HEIGHT=?>

WIDTH = leveys
HEIGHT = korkeus

 

Jakajat:

Kappale

<P></P>

yleensä kaksi rivinvaihtoa

Tekstin sijoittelu

<P ALIGN=***></P>

LEFT = vasemmmalle
CENTER = keskelle
RIGHT = oikealle

Rivin lopetus

<BR>

rivinvaihto

Vaakaviiva

<HR>

 

Viivan sijoittelu

<HR ALIGN=***>

LEFT = vasemmalle
RIGHT = oikealle
CENTER = keskelle

Viivan koko

<HR SIZE=?>

 

Viivan leveys

<HR WIDTH=?>

? = pikseleinä
?% = prosentteina sivun leveydestä

Varjostamaton viiva

<HR NOSHADE>

 

Rivinvaihdon esto

<NOBR></NOBR>

 

 

Listat:

Järjestämätön lista ("ranskalaiset viivat")

<UL><LI></UL>

<LI> tulee ennen jokaista viivaa

Tiivistetty järjestämätön lista

<UL COMPACT></UL>

normaalia tiiviimpi lista

Numeroitu lista

<OL><LI></OL>

<LI> tulee ennen jokaista numeroa

Tiivistetty numeroitu lista

<OL COMPACT><OL>

normaalia tiiviimpi lista

Aloitusmerkki

<OL START=?>
<LI VALUE=?>

koko listalle
tälle ja seuraaville

Valikkolista

<MENU><LI></MENU>

<LI > tulee ennen jokaista kohdetta

Tiivistetty valikkolista

<MENU COMPACT></MENU>

normaalia tiiviimpi lista

 

Taustat ja värit:

Taustakuva

<BODY BACKGROUND="URL">

osoite esim. http://www.kuvan/osoite.gif

Taustaväri

<BODY BGCOLOR="#$$$$$$">

värit järjestyksessä punainen/vihreä/sininen

Tekstin väri

<BODY TEXT="#$$$$$$">

 

Linkin väri

<BODY LINK="#$$$$$$">

 

Käydyn linkin väri

<BODY VLINK="#$$$$$$">

 

Aktivoidun linkin väri

<BODY ALINK="#$$$$$$">

 

 

Erikoismerkit:

<

&lt;

 

>

&gt;

 

&

&amp;

 

"

&quot;

 

å

&amparing;

 

Å

&ampAring;

 

ä

&ampauml;

 

Ä

&ampAuml;

 

ö

&ampouml;

 

Ö

&ampOuml;

 

Rekisteröity tuotemerkki

&reg;

®

Copyright -merkki

&copy;

©

Tyhjä tila

&nbsp;

 

 

Tässä on pieni malli esimerkki:

Tein sivun jolla näet sen rakenteen vasemmalla, ja html version oikealla.
Katso tekemäni malli

 

Takaisin alkuun

Versio: 1.0

 

Sivu on päivitetty: 31.7.2010.

Tulosta sivu |

 
Kävijälaskuri