Make your own free website on Tripod.com
Click Here to Visit Our Sponsor Get Sponsored

The kotisivu factoryn HTML-ohje v. 1.1

   Olen nähnyt tämän ohjeen tekemiseen paljon vaivaa, ja toivon että KUKAAN ei levitä tätä missään muodossa the Kotisivu factoryn ulkopuolelle.

Sisältö:


Päätagit

   HTML-dokumentti alkaa ja loppuu <HTML>-tagilla (<HTML> ja </HTML>). Näiden kahden tagin jälkeen tulee ensimmäiseksi <HEAD> tagit (<HEAD> ja </HEAD>) joiden sisään määritellään otsikko (<TITLE> ja </TITLE>) ja sivun näkyvyys hakupalveluissa.
   Sivun näkyvyys hakupalveluissa saadaan <META> tagien ja niiden NAME- ja CONTENT arvojen avulla. NAME arvot <META> tageissa on KEYWORDS ja DESCRIPTION. DESCRIPTION- arvoksi tulee laittaa teksti jonka haluaa sivun kuvaukseksi hakupalveluissa. KEYWORDS taas puolestaan määrittää minkälaisia sivuja haettaessa kyseinen sivu löytyy. Tähän kannattaa laittaa yksittäisiä sanoja kotisivuillansa olevista aiheista. META tagit eivät ole pakollisia laittaa mutta niistä on hyötyä kävijöiden saamisen kannalta.
   Kun HEAD-tagi on lopetettu alkaa sivun varsinaisen ulkoasun ja tekstien määrittely <BODY> tagien sisälle (<BODY> ja </BODY>). <BODY> tagiin määritellään taustan väri (BGCOLOR=""), taustakuva (BACKGROUND=""), tekstin väri (TEXT=""), linkin väri (LINK=""), vieraillun linkin väri (VLINK=""), aktiivisen eli painetun linkin väri (ALINK="") ja avauksen yhteydessä avautuvat javascript-ohjelmat (ONLOAD=""). Mikään näistä arvoista ei ole pakollinen koska kävijän selain käyttää näinä arvoina selaimen oletusarvoja. Oletusarvot ovat selain kohtaisia jonka takia sivusi saattaa näyttää erilaiselta muiden selaimilla.

Sivun alku (ja lopetus) tagit:

<HTML>
<HEAD>
    <TITLE>
Sivun otsikko</TITLE>
    <META NAME="DESCRIPTION" VALUE="
Kuvaus hakupalveluja varten">
    <META NAME="KEYWORDS" VALUE="Avainsanoja, chat, ruoka, pelit...">
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE">

Tähän osaan tulee sivun sisältö joka käsitellään seuraavaksi 

</BODY>
</HTML>
 

 Takaisin ylös 


Kuvat

Kuvatagi on yksiosainen <IMG SRC="">-tagi joka on varmaan koko HTML-kielen yksinkertaisimpia. Sen SRC-arvoksi asetetaan kuvan sijainti ja tiedostonimi esim. ../kuvat/esimerkkikuva1.gif. Kotisivuilla olevien kuvien tulee olla joko gif- tai jpg muodossa. Jos esimerkkikuva2.gif on vaikka kuva moottoripyörästäni (Harley Davidson :-) ja sen koko on leveydessä 200 pikseliä ja korkeudessa 100 pikseliä laitan WIDTH arvoksi 200 ja HEIGHT arvoksi 100. Äskeiset arvot nopeuttavat sivun latausta huomattavasti kun selaimen ei tarvitse ottaa selvää erikseen tiedoston mitoista. Kaikki selaajat eivät välttämättä halua ladata kuvia nopeuden vuoksi, ja sen takia on hyvä laittaa ALT tagi jossa kerrotaan kuvan sanoma. Kuvan sijainnin tekstiin nähden saa säädettyä ALIGN arvolla. Linkkiin laitetun kuvan ympärille tulee oletuksena 1 pikselin paksuinen kehys jonka saa poistettua kirjoittamalla BORDER=0

Esimerkkikuva:
<IMG SRC="esimerkkikuva1.gif" WIDTH="200" HEIGHT="100" ALT="Harley-mopedini" ALIGN="right">

Esimerkkikuva näyttää tältä: Harley-mopedini
Se on hyvä laittaa tekstin viereen niin että teksti menee sen vieressä usealla rivillä eikä niin että rivin kooksi tulee kuvan korkeus. Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä.

Toinen esimerkkikuva näyttää tältä ilman ALIGN="right" osuutta (ensimmäinen rivi on kuvan korkuinen):
Harley-mopediniTekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä.
 
 Takaisin ylös 


Linkit

Linkki <A HREF="sivu2.html" TARGET="_new">Mene sivulle 2</A> tekee sivulle tekstin Mene sivulle 2 jota klikkaamalla pääsee sivulle sivu2.html joka avautuu uudessa ikkunassa. Normaalissa linkissä TARGET arvo on jätetty kokonaan pois, jolloin uusi sivu avautuu edellisen tilalle. TARGET arvosta on hyötyä erityisesti frameja käytettäessä koska silloin voi tehdä esim toiselle sivulle valikon jonka avulla voi pääsivulla navigoida. <A> tagien väliin voi luonnollisesti laittaa kuvan joka toimii linkkinä. (ks. kuvat)


 
 Takaisin ylös

Taulukot

Taulukko aloitetaan <TABLE> tagilla ja se lopetetaan </TABLE> tagilla. Tablen sisään laitetaan TR tageja määrittelemään vaakasuoraan menevien solujen määrää ja TD tageja määrittelemään kuinka moneen osaan TR on jaettu. <TABLE> tagiin voi määritellä taulukon reunuksen koon (BORDER), solujen väliin jäävän tyhjän tilan (CELLSPACING ja CELLPADDING), koon (HEIGHT ja WIDTH). TD tageille voi antaa arvoiksi kyseisen solun koon koko taulukkoon nähden (HEIGHT ja WIDTH), vaakasuoraan sisällön sijainnin (ALIGN) ja pystysuoraan sisällön sijainnin (VALIGN). Lisäksi siihen voi määritellä solun taustan (BACKGROUND) ja solun koon viereisten solujen kokoon nähden (COLSPAN ja ROWSPAN).


 

    Esimerkki1:

<TABLE BORDER=7 WIDTH=400 HEIGHT=200>
<TR>
    <TD ALIGN="center">Ensimmäinen</TD>
    <TD ALIGN="right">Toinen</TD>
</TR>
<TR>
    <TD COLSPAN=2 VALIGN="bottom" ALIGN="center">Kolmas (iso)</TD>
</TR>
</TABLE>
Ensimmäinen Toinen
Kolmas (iso)


    Esimerkki2:

<TABLE BORDER=0 WIDTH=400 HEIGHT=200 CELLSPACING="0" CELLPADDING="0">
<TR>
    <TD ALIGN="center" BGCOLOR="#0000EE">Ensimmäinen</TD>
    <TD ALIGN="right" BGCOLOR="#551A8B">Toinen</TD>
</TR>
<TR>
    <TD COLSPAN=2 VALIGN="bottom" ALIGN="center" BGCOLOR="#FF0000">Kolmas (iso)</TD>
</TR>
</TABLE>
Ensimmäinen Toinen
Kolmas (iso)
 

    Esimerkki 3

<TABLE BORDER=0 WIDTH=400 HEIGHT=200 CELLSPACING="10" CELLPADDING="10">
<TR>
    <TD ALIGN="center" BGCOLOR="#0000EE">Ensimmäinen</TD>
    <TD ALIGN="right" BGCOLOR="#551A8B">Toinen</TD>
</TR>
<TR>
    <TD COLSPAN=2 VALIGN="bottom" ALIGN="center" BGCOLOR="#FF0000">Kolmas (iso)</TD>
</TR>
</TABLE>
Ensimmäinen Toinen
Kolmas (iso)
 Takaisin ylös


 

Kuvakartat

Kuvakartoissa rajataan yhteen kuvaan monta aluetta pikseleiden mukaan ja niistä pääsee normaalin linkin lailla toiselle sivulle. Kartan alueita voi olla RECT, CIRCLE ja POLYGON. RECT issä teet nelikulmion johon merkitset vasemman yläkulman ja oikean alakulman pikseleiden sijainnit. CIRCLE ssä määrität ympyrän keskipisteen ja matkan pikseleinä keskipisteestä ympyrän kehälle. POLYGON issa määrität jokaisen pisteen (kulman) erikseen.

<MAP NAME="kuvakartta">
<AREA SHAPE="RECT" COORDS="16,13,79,38" HREF="etusivu.html">
<AREA SHAPE="CIRCLE" COORDS="127,46,33" HREF="etusivu2.html">
<AREA SHAPE="POLYGON" COORDS="16,68,31,68,72,93,19,85,25,76" HREF="etusivu3.html">
</MAP>
<IMG BORDER=0 SRC="esimerkkikuva2.gif" USEMAP="#kuvakartta">


 
 Takaisin ylös


Framet

Frameissa tehdään ensin yksi sivu, joka jakaa selainikkunan montaa sivua varten niin että monta sivua näkyy samassa selainikkunassa. Frame komennoissa COLS jakaa sivun pystysuorassa ja ROWS vastaavasti vaakasuorassa. FRAMESET tagit määrtiiävät jokaisen osion koon, ja FRAME jokaisen osion kohdalla näkyvän sivun. RAMESET tagiin voi määritellä sivujen väliin tulevan viivan (BORDER) ja sivujen väliin jäävän tyhjän tilan (FRAMESPACING). FRAME tagiin voi määritellä nimen jolla ruudun osaa kutsutaan esim. linkeissä (NAME), koon muutettavuuden (RESIZE) ja vierityspalkit (SCROLLBARS). Jotkut ikivanhat selaimet eivät tue frameja, jonka takia on hyvä laittaa <NOFRAMES> ja </NOFRAMES> tagien väliin teksti joka näkyy näillä selaimilla. Frame-sivuun laitetaan normaalisti HTML- ja HEAD tagit mutta HUOM:
Jos dokumentti sisältää <BODY> tagin joka on <NOFRAMES> tagien ulkopuolella koko sivu ei näy! (kuulemma jotkut selaimet näyttävät sivun silti mutta en tiedä mitkä). Tämän takia kannattaa pitää <BODY> tagi kokonaan poissa frame dokumentistä.

esimerkki 1:

<FRAMESET COLS="170,*">
    <FRAME NAME="sivu1" SRC="sivu1.html">
    <FRAMESET ROWS="360,*">
        <FRAME NAME="sivu2" SRC="sivu2.html">
        <FRAME NAME="sivu3" SRC="sivu3.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Tämä sivu käyttää frameja, mutta selaimesi ei tue frameja. <A HREF="http://www.netscape.com">Hanki uusi selain!</A>
</NOFRAMES>



esimerkki 2:

<FRAMESET COLS="170,*" BORDER=0 FRAMESPACING=0>
    <FRAME NAME="sivu1" SRC="sivu1.html" NORESIZE SCROLLING="NO">
    <FRAMESET ROWS="360,*">
        <FRAME NAME="sivu2" SRC="sivu2.html" NORESIZE SCROLLING="NO">
        <FRAME NAME="sivu3" SRC="sivu3.html" NORESIZE SCROLLING="NO">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Tämä sivu käyttää frameja, mutta selaimesi ei tue frameja. <A HREF="http://www.netscape.com">Hanki uusi selain!</A>
</NOFRAMES>



esimerkki 3:

<FRAMESET COLS="170,*" BORDER=0 FRAMESPACING=0>
    <FRAME NAME="sivu1" SRC="sivu1.html" NORESIZE SCROLLING="NO">
    <FRAMESET ROWS="360,*">
        <FRAME NAME="sivu2" SRC="sivu2.html" NORESIZE SCROLLING="NO">
        <FRAMESET COLS="*,100" BORDER=0 FRAMESPACING=0>
            <FRAME NAME="sivu3" SRC="sivu3.html" NORESIZE SCROLLING="AUTO">
            <FRAME NAME="sivu4" SRC="sivu4.html" NORESIZE SCROLLING="NO">
</FRAMESET>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Tämä sivu käyttää frameja, mutta selaimesi ei tue frameja. <A HREF="http://www.netscape.com">Hanki uusi selain!</A>
</NOFRAMES>



Jos sivua 1 halutaan esimerkiksi käyttää valikkona ja sivu 3:sta pääsivuna laitetaan sivulle 1 normaalisti linkki jossa on linkin TARGET arvona sivu3:n NAME arvo esim. <A HREF="sivu5.html" TARGET="sivu3">Linkkiteksti</A>
 
 Takaisin ylös

Lomakkeet (Forms)

Lomakkeella on alkutagi <FORM> ja lopputagi </FORM>. Alkutagiin tulee vähintään METHOD ja ACTION arvot. Yleisin METHOD arvo on POST jolloin lomake lähettää täytetyt tiedot CGI/Perl ohjelmaan tai sähköpostilaatikkoon. ACTIONiksi laitetaan CGI ohjelman osoite tai mailto:email@osoite.fi jolloin tiedot lähetetään jompaan kumpaan. Lomakkeen sisällä käytetään INPUT tageja joilla on eri arvoja käyttötarkoituksesta riippuen. Jos TYPE arvo puuttuu input toimii yksirivisenä tekstikenttänä jolle voi antaa arvot VALUE (oletusarvo), SIZE (koko), MAXLENGHT (maksimipituus) ja NAME (nimi). Jos TYPE on BUTTON voi sille antaa VALUE (teksti), NAME (nimi) ja ONCLICK (tapahtuma klikkauksessa) arvot. TYPE="SUBMIT" toimii nappina joka lähettää tiedot ACTION arvoksi asetettuun osoitteeseen. SUBMITille voi antaa VALUE arvon jolla voi määrittää napin tekstin. TYPE="RESET" luo napin joka tyhjentää kaikki lomakkeen tiedot (tai palauttaa ne oletuksiinsa). RESETillekin voi antaa VALUE arvon joka määrittää tekstin. Jos INPUTille antaa CHECKBOX arvon se toimiirastitettavana boxina joka lähettää eteenpäin VALUE-arvonsa. Sille voi antaa myös CHECKED ominausuuden joka laittaa boxin oletukseksi rastitetun. TYPEksi voi laittaa myös RADIO jolloin käyttäjä voi valita voi valita vain yhden saman nimisistä (NAME) RADIO valinnoista. RADIOta käytettäessä lomake lähettää valitun RADION VALUE arvon eteenpäin. FORMiin voi laittaa myös monivalintoja (SELECT) josta käyttäjä voi valita yhden OPTIONIN jonka VALUEn lomake lähettää. TEXTAREA tagin avulla saat ison monirivisen tekstikentän johon käyttäjä voi kirjoittaa esim. palautteensa. TEXTAREAn aloitus- ja lopetustagien väliin voit määrittää oletusarvon, ja NAMEksi nimen.

Esimerkki: palautelomake

<FORM METHOD="POST" enctype="text/plain" ACTION="mailto:koskinen@iname.com?subject=Postilomake kotisivulla"><PRE>
Nimesi                 <INPUT NAME="Lähettäjän nimi">
Sähköpostiosoitteesi   <INPUT NAME="Lähettäjän email">
Kotisivusi osoite      <INPUT NAME="URL" VALUE="http://">

Lempiruokasi:          <SELECT NAME="Lempiruoka">
<OPTION VALUE="pasta">Pasta</OPTION>
<OPTION VALUE="hernekeitto" CHECKED>Hernekeitto</OPTION>
<OPTION VALUE="pizza">Pizza</OPTION>
<OPTION VALUE="nauravat nakit">Nauravat nakit</OPTION>
</SELECT>
Lempijuomasi:          <INPUT TYPE="RADIO" NAME="juoma" VALUE="sprite">Sprite
                       <INPUT TYPE="RADIO" NAME="juoma" VALUE="kokis">Kokis
                       <INPUT TYPE="RADIO" NAME="juoma" VALUE="jaffa" CHECKED>Jaffa
                       <INPUT TYPE="RADIO" NAME="juoma" VALUE="fanta">Fanta
Parhaat ravintolat     <INPUT TYPE="CHECKBOX" NAME="ravintola" VALUE="reino">Reino's restaurant
                       <INPUT TYPE="CHECKBOX" NAME="ravintola" VALUE="fille">Fille's fastfood
                       <INPUT TYPE="CHECKBOX" NAME="ravintola" VALUE="bruno" CHECKED>Brunon baari
                       <INPUT TYPE="CHECKBOX" NAME="ravintola" VALUE="keijo">Keijon kotikeittiö
Miksi juuri nämä:      <TEXTAREA ROWS="6" COLS="20" NAME="koska">Koska: </TEXTAREA>
<INPUT TYPE="submit" VALUE="   Lähetä    "><INPUT TYPE="reset" VALUE="Tyhjennä">

</PRE></FORM>


    Edellinen koodi näyttää tältä:

Nimesi                 
Sähköpostiosoitteesi   
Kotisivusi osoite      

Lempiruokasi:          
Lempijuomasi:          Sprite
                       Kokis
                       Jaffa
                       Fanta
Parhaat ravintolat     Reino's restaurant
                       Fille's fastfood
                       Brunon baari
                       Keijon kotikeittiö
Miksi juuri nämä:      

 Takaisin ylös


Muita komentoja

Nimi               | Toiminto


<CENTER></CENTER>  | keskitys
<TT></TT>          | tekstin yksinkertaistus
<HR>               | vaakasuoraan menevä viiva
<BLINK></BLINK>    | tekstin vilkkuminen
<UL></UL>          | "tavulaattori"
<H1></H1>          | pääotsikko
<H2></H2>          | toinen otsikko
<H3></H3>          | kolmas otsikko (jne...)
<BR>               | määrätty rivinvaihto
<U></U>            | tekstin alleviivaus
<B></B>            | tekstin lihavointi
<I></I>            | tekstin kursivointi
<!--   -->         | kommentti (ei näy selaimilla)

 Takaisin ylös


Päävärit

 
Musta  #000000  
Valkoinen  #FFFFFF  
Sininen  #000099  
Punainen  #FF0000  
Keltainen  #FFFF00  
Vihreä  #009900  
Oranssi  #CC6600  
Copyright © Teemu Koskinen 1998
Kaikki oikeudet pidätetään

HYPER! KLIK!