Etusivu>Työhuone>Tietokoneen abc>Internet >Kotisivun teko

HTML kielen peruselementit

peruselementit taustakuva tekstin määritys listat kuvien sijoitus
linkit sähköposti

Yleistä HTML kielestä

HTML ei ole varsinaisesti koodausta, vaan tapa kuvata sivun rakennetta. HTML -tagit sisältävät aina vastiparin <>, jonka väliin teksti, kuvat ja animaatiot sijoitetaan. HTML -tagit näyttävät salaperäiseltä merkkikieleltä, mutta tarkempi tarkastelu osoittaa sen olevan varsin loogista. HTML -koodit voidaan kirjoittaa muistiossa tai Wordpadissa. Sivu kannattaa tallentaa kuvaavalla nimellä .html muodossa. Valmista sivua voidaan tarkastella selaimella avaamalla sivu File - Open.

Alkuun

HTML -sivun peruselementtejä ovat HTML, HEAD ja BODY.

<HTML>-koodilla kerrotaan sivun olevan HTML -dokumentti. Sivun loppuun tulee päätöstagiksi </HTML> Tämä tagiparin sisälle tulee kaikki sivulla olevat elementit.

<HTML>-koodin jälkeen tulee <HEAD></HEAD>koodipari, jossa ilmoitetaan mm. <TITLE></TITLE> eli sivun otsikko. Lisäksi <HEAD> tagien sisään voidaan laittaa myös ns. <META> koodit, joilla ilmoitetaan sivujen tekijä ja avainsanoja, jotka helpottavat sivujen löytymistä hakuroboteilla (esim. Altavista)

Esim. <META NAME="description" CONTENT="kuvaus"><META NAME="keywords" CONTENT="avainsanat">

<HEAD> koodien jälkeen seuraa varsinainen sivulla näkyvä osio eli sivun "vartalo" <BODY></BODY>

Esimerkki HTML -kielestä:

<html>
<head>
<title>Sivun otsikko, joka näkyy ylälaidassa</title>
</head>

<body>Tämä osa näkyy jo sivulla. Tekstin sekaan voi helposti lisätä kuvia</body>

</html>

Alkuun

BODY -koodien sisällä

BODY -tagilla voidaan määritellä sivun taustakuvia, värejä, tekstin värejä, fontteja, linkkien värejä ym.
Taustoissa ja teksteissä käytettävät värit ilmoitetaan RGB -väreistä muutettuina heksadesimaaleina. 16 perusväriä voidaan myös ilmaista englanninkielisin nimin esim. <BODY BGCOLOR=white TEXT=black LINK=red>

Perusvärit:
Black="#000000"
White="#FFFFFF"
Silver="#C0C0C0"
Gray="#808080"
Maroon="#800000"
Red="#FF0000"
Purple="#800080"
Fuchia="#FF00FF"
Green="#008000"
Lime="#00FF00"
Olive="#808000"
Yellow="#FFFF00"
Navy="#000080"
Blue="#0000FF"
Teal="#008080"
Aqua="#00FFFF"

Alkuun

Jos sivulle halutaan taustakuva, näyttää <BODY> -tagi esim. tältä:

<BODY BACKGROUND="kuva.gif">

Sivuilla näkyvään tekstiin voidaan vaikuttaa tietyin rajoituksia. Tekstin kokoa, väriä ja leikkausta (fonttia) voidaan muuttaa. Fonttia muutettaessa on syytä muistaa se, että määrittelemäsi fontti näkyy vain jos surffaajan omalla koneella on sama fontti! Mikäli haluat ehdottomasti käyttää tiettyä fonttia täytyy se tehdä kuvaksi. Voit myös määritellä useita fontteja, jolloin surffaajan selaimessa näkyy toivottavasti ainakin joku valitsemistasi fonteista.

Esimerkki tekstin määrittelemisestä

<FONT FACE="times new roman, times, helvetica" SIZE"+4" COLOR="#009900">

Näillä määrityksillä teksti näyttää tältä:

Esimerkki

Lisäksi tekstiä voidaan lihavoida <STRONG></STRONG> tageilla. Tai kursivoida <I></I>

Alkuun

Listat

HTML -koodilla voidaan tehdä myös Wordista tuttuja luetteloita. Esimerkki listasta:

<UL>
<LI>eka
<LI>toka
<LI>kolmas
<LI>neljäs
</UL>

Lista näyttää selaimessa tältä:

  • eka
  • toka
  • kolmas
  • neljäs

Kuvan sijoittaminen tekstiin

Kuvat sijoitetaan sivuille -tagin avulla. Esimerkki kuvan sijoittamisesta:

<IMG SRC="kuva.gif> Kuva voi olla myös .jpg päätteinen. Align tarkentimella voidaan määritellä tekstin sijainti suhteessa kuvaan, vaihtoehtoina on TOP, MIDDLE tai BOTTOM <IMG SRC="kuva.gif ALIGN="top">

Alkuun

Linkkien määrittäminen

Tekstien sisäiset linkit tehdään ns. ankkurien avulla. Aluksi määritellään kohta, johon linkistä pääsee, esim. tekstin lopusta alkuun. Tällöin tekstin alkuun sijoitetaan tagit.

<A NAME="alkuun">Otsikko</A>

Toinen tagi sijoitetaan kohtaan, josta siirtyminen tapahtuu eli tässä tapauksessa sivun loppuun.

<A HREF="#alkuun">Alkuun</A>

Muille sivustoille linkki liitetään samankaltaisella tagilla. Mutta linkin poluksi tulee kirjoittaa sivun koko osoite mikäli linkki siirtyy pois samalta sivustolta.

<A HREF="http://www.sooda.com">Linkki Soodaan</A>

Sähköpostin määrittäminen

Halutessasi vaikkapa palautetta omaan sähköpostiisi tulee linkkiin laittaa seuraavasti <A HREF="MAILTO:nimi@postiosoite.fi">Meiliä mulle</A>


>>Taulukot Alkuun

Etusivu>Työhuone>Tietokoneen abc>Internet >Kotisivun teko