Toinen sivu

Tehdään sivustoon toinen sivu, joka tallennetaan nimellä smurffit.html. Valmiit sivut linkitetään toisiinsa.

Kotisivujen koodaamisessa saa käyttää ja pitääkin käyttää jo valmiita sivuja pohjana, joten käytetään äskentekemäsi etusivun koodia pohjana. Pohjana saa käyttää mitä tahansa sivua, kotisivun koodit eivät ole suojattu tekijänoikeuksilla.

Avaa etusivu (index.html) muistioon ja tallenna se uudelleen nimellä smurffit.html

Muuta koodiin seuraavat kohdat.

Ulkoinen otsikko Tämä sivu kertoo smurffeista

taustan väri blue
pääotsikko Smurffit
viivanväri silver ja leveys 60%

Loput BODY-elementin lopputagiin </BODY> asti voit pyyhkiä.

Tehdään sivulle 2 x 3 taulukko, jolla saamme kuvat ja tekstin vierekkäin.
Käy hakemassa kaksi smurffin ja yksi smurfiinan kuvat netistä. Tallenna ne kotisivu-kansioosi nimillä smurffi.jpg , smurfiina.jpg ja smurffihyppy.jpg.

Tee seuraava koodi (vasemman puoleinen sarake, oikean puoleisessa on selitetty mitä koodi tekee)

<tr>

<td> Smurffit ovat kuvitteellinen sinisten pikkuolentojen laji, joka elää paikassa nimeltään Taivaanäärelä.<p>

Smurffikylässä asuu 101 smurffia. Alunperin kaikki olivat miespuolisia, mutta Velho loi tyttösmurffin houkuttelemaan muut smurffit ansaan.</td>

</tr>

<tr>

<td> smurffiina on kylän ainoa tyttösmurffi</td>

<td> jekkusmurffi</td>
<td> hyppy smurffi</td>

</tr>

</table>

Taulukko alkaa <table>-tägillä. BORDER= reunaviivan paksuus

WIDTH taulukon leveys ikkunasta prosentteina

<tr>-tägi aloittaa taulukon rivin
<td>-tägillä alkaa sarake ja sarake päättyy </td>

Soluun tuleva teksti kirjoitetaan normaalisti. Olen vaihtanut riviä enterillä jotta se näkyisi koodissa paremmin.

<p> kappaleen vaihto

Seuraavaan soluun tulee kuva smurfiina.jpg

Rivi päättyy

Seuraava rivi alkaa

Tyhjä solu

kuvateksti seuraavaan soluun

rivin loppu

koko taulukon loppu

Tallenna sivu. Katso selaimessa.

Sivu ei näytä vielä kovin hyvältä. Parannellaan ulkonäköä pienentämällä kuvat samankokoiseksi, keskittämällä taulukko ja laittamalla taulukolle taustaväri. Lisätään loppuun vielä linkki etusivulle.

Kuvien koon määrittäminen:

Lisää kuvien nimen perään heittomerkkien ulkopuolelle, mutta ennen lopetus tagia > määreet WIDTH=”200” ja HEIGHT=”150”.

Nyt kuvat ovat samankokoisia, mutta kuvien mittasuhteet kärsivät vähän. Paras tapa on pienentää kuvat kuvankäsittelyohjelmalla.

Taulukon keskitys

Lisää taulukon aloitustagin eteen <center> ja lopetus-tägin jälkeen </center>

Taulukon väri

Lisää taulukon aloitustägiin määre BGCOLOR="yellow"

eli rivi näyttää nyt tältä:

Linkki etusivulle

Linki omille sivuille tehdään samaan tapaan kuin linkki internettiin

Kirjoita seuraava rivi taulukon alapuolelle.

<center><a href="index.html">Etusivu</a></center>

Lisätään etusivulle (index.html) vielä Aril-fontti ja väri sekä linkki smurffit sivulle.

Avaa sivu (index) muistioon.

Fontti ja väri

Lisää ennen tekstiä tagi

<font face="arial" color="red"> ja tekstin loppuun </font>

Tee linkki lisäämällä sivun loppuun eli juuri ennen </BODY>-tagiä.

<center><a href="smurffit2.html">Smurffi sivu</a></center>