.
Jätän tässä nyt kielenmäärittelyt väliin ihan selkeyden vuoksi.
Aloitetaan.
Aloitamme sivun <html>-tagilla. Laitetaan samalla loppuunkin lopetustagi jo valmiiksi.
Tagi lopetetaan </html>
- Koodi: Valitse kaikki
<html>
</html>
Nyt teemme head-"alueen" (<head>....</head>. Siellä määritetään mm. sivun otsikko ja css-tyylimäärittelyt.
Asetamme tässä samalla sivulle otsikon.
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<!--Kommentointi tapahtuu näin. Tämä ei vaikuta sivuun mitenkään. Sivun otsikko on nyt "Mallisivu"--->
</head>
</html>
Sitten varsinaiseen sisältöalueeseen (<body>...</body>). Tähän alueeseen laitetaan kaikki, minkä haluat näkyvän sivuilla.
Tässä vielä muutama tagi tekstin ulkoasun muokkaamiseen:
<h1>Teksti</h1> - Otsikoissa voidaan käyttää <h_> tagia. Korvaa _ numerolla 1-6 niin saat erikokoista tekstiä.
...
<h6>Teksti</h6> - 1 = isoin, 6 = pienein
<b>Teksti</b> - paksu
<u>Teksti</u> - alleviivattu
<i>Teksti</i> - kursiivi
<center>Teksti</center> - teksti keskelle
Muuta:
<br> - Rivinvaihto (pelkkä enter ei riitä).
<p>...</p> - Kappale
<a href="http://www.google.com">Googleen!</a> - Linkki
<a href="mailto:d-hunter@mbnet.fi">Email</a> - Emaillinkki
<img src="osoitekuvaan.jpg" alt=""> - Kuva
<font color="blue"></font> - sininen tekstin väri. Korvaa blue millä vain värillä. Tähän käyvät myös värikoodit.
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">Mallisivu</font></h2> <!--Tässä ”näyttävä” otsikko-->
</body>
</head>
</html>
Jotta saamme sivulle hieman näyttävyyttä ja selkeyttä, käyttäkäämme taulukoita(<table>...</table>.
Ne eivät todellakaan ole niin vaikeita, mitä voisi aluksi luulla.
Teen tässä ensin simppelin taulukon, ja kommentoin sitä oheella käytän selkeyden parantamiseksi termiä ”rivi”.
- Koodi: Valitse kaikki
<!---Aloitamme taulukon, ja määritämme että siinä ei ole näkyviä reunoja--->
<table border=”0”>
<!---<tr> aloittaa uuden vaakarivin--->
<tr>
<!---Teemme tähän em vaakariviin 2 pystyriviä (<td>...</td>). Toinen on leveydeltään 30% ruudun pinta-alasta, toinen 70%. Kirjoitamme toiseen paksulla Navigaatio ja toiseen Sisältö-->
<td width="30%" valign="top"><b>Navigaatio</b></td>
<td width="70%" valign="top"><b>Sisältö</b></td>
<!---Lopetetaan vaakarivi ja taulukko--->
</tr>
</table>
Nyt teemme vielä äsken tehtyjen pystyrivien sisälle toiset taulukot. Näin saamme 2 toisistaan riippumattomasti venyvää ”laatikkoa”.
- Koodi: Valitse kaikki
<table border=”0”>
<tr>
<!---Ensimmäinen pystyrivi--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%" valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
</tr>
</table>
Lisätkäämme taulukko nyt aiemmin tekemäämme sivuun.
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">Mallisivu</font></h2>
<table border="0">
<tr>
<!---Ensimmäinen pystyrivi--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%" valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
</tr>
</table>
</body>
</head>
</html>
Laitetaanpa vähän sisältöä sivuun. Teimme ne 2 laatikkoa edellisessä vaiheessa. Toinen navigaatiolle, toinen sisällölle. Mietitäänpä, mitä sivuja haluat sivuillesi. Tässä esimerkissä haluaisimme: Etusivu(index.htm), Päiväkirja(pkirja.html), Linkkilista(lista.htm).
Tehkäämme näin:
- Koodi: Valitse kaikki
<!---Ensimmäinen pystyrivi(eli se navigaatio)--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<td>
<a href="index.htm">Etusivu</a><br>
<a href="pkirja.htm">Päiväkirja</a><br>
<a href="lista.htm">Linkkilista</a><br>
</td>
</tr></table>
</td>
Lisätään tämä jälleen sivuumme:
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">Mallisivu</font></h2>
<table border="0">
<tr>
<!---Ensimmäinen pystyrivi(eli se navigaatio)--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<td >
<a href="index.htm">Etusivu</a><br>
<a href="pkirja.htm">Päiväkirja</a><br>
<a href="lista.htm">Linkkilista</a><br>
</td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%” valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
</tr>
</table>
</body>
</head>
</html>
Nyt on aika tallentaa sivu.
Tee vaikka työpöydälle kansio, johon tallennat tämän sivun nimellä index.htm.
Sen jälkeen kopioi tämä tiedosto 2 kertaa ja nimeä uudet tiedostot pkirja.htm ja lista.htm .
Enää on tehtävänäsi lisätä sisältöä sivuille!
Tässä nyt malliksi mahdollinen index.htm:
- Koodi: Valitse kaikki
<html>
<head>
<title>d-hunterin mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">D-hunterin mallisivu!</font></h2>
<table border="0">
<tr>
<!---Ensimmäinen pystyrivi(eli se navigaatio)--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<td >
<a href="index.htm">Etusivu</a><br>
<a href="pkirja.htm">Päiväkirja</a><br>
<a href="lista.htm">Linkkilista</a><br>
</td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%" valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td><h2>Tervetuloa sivuilleni</h2>
<p>Toivottavasti viidyt. Sivuillani on päiväkirja ja linkkilista.</p>
<p>Yritän saada vieraskirjaa, joten malttakaahan tovi</p></td>
</tr></table>
</td>
</tr>
</table>
</body>
</head>
</html>
Toivottavasti mukaan ei eksynyt virheitä.
Kommenttia sitten oppaan laadusta ja virheistä
tottakai ne voi vaihtaa sitten omaan sivuunsa -dh 
) 
