Get
Sponsored
Get
Sponsored
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 alku (ja lopetus) tagit: <HTML>
Tähän osaan tulee sivun sisältö joka käsitellään seuraavaksi </BODY>
KuvatKuvatagi 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:
Esimerkkikuva näyttää tältä: Toinen esimerkkikuva näyttää tältä ilman ALIGN="right"
osuutta (ensimmäinen rivi on kuvan korkuinen):
LinkitLinkki <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 TaulukotTaulukko 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>
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>
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>
KuvakartatKuvakartoissa 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">
FrametFrameissa 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:
esimerkki 1: <FRAMESET COLS="170,*">
esimerkki 2: <FRAMESET COLS="170,*" BORDER=0 FRAMESPACING=0>
esimerkki 3: <FRAMESET COLS="170,*" BORDER=0 FRAMESPACING=0>
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>
Lempiruokasi:
<SELECT NAME="Lempiruoka">
</PRE></FORM>
| |||||||||||||||||||||||||||||||||
| Musta | #000000 | |
| Valkoinen | #FFFFFF | |
| Sininen | #000099 | |
| Punainen | #FF0000 | |
| Keltainen | #FFFF00 | |
| Vihreä | #009900 | |
| Oranssi | #CC6600 |
