HTML-OPAS

(Kattaa HTML:n version 3.2, IE ja Netscape)

Yleistä:

WWW-sivut ovat yleensä HTML (HyperText Markup Language)-dokumetteja, eli tavallisia tekstejä joiden sekaan on kirjoitettu HTML-kielen koodeja. HTML-koodi koostuu tageista, joiden väliin varsinainen teksti kirjoitetaan. Melkein kaikilla tageilla on aloitus- ja lopetustagi. ESIM. <H1>tekstiä</H1>. Tageilla kerrotaan selaimelle dokumentin rakenne ja mahdolliset tekstin muotoilut kuten lihavointi ja kursiivi.
HTML tarjoaa myös tavan esittää kuvia, ääntä ja animaatioita tekstin seassa. Lisäksi HTML:n avulla voi linkittää tekstin muihin HTML-dokumentteihin sekä muihin verkon resursseihin (FTP, News etc.).
HTML:ää voi kirjoittaa miltei millä tahansa tekstieditorilla. Windowsin NotePad käy tähän tarkoitukseen erinomaisesti. Skandinaaviset merkit näkyvät WWW-sivuilla oikein, jos tekstiä kirjoitettaessa on käytössä ollut ISO-Latin 1 -merkistö. Eri WWW-selaimet (Esim. Explorer ja Netscape) näyttävät HTML-tekstit eri tavalla, joten laajempaan käyttöön tarkoitetut tekstit kannattaa testata useilla eri selaimilla. Kannattaa ottaa myös huomioon , että eri käyttäjillä saattaa olla eri resoluutiolla toimivat näytöt.
Kun HTML-dokumentti on valmis se pitää tallentaa ja siirtää palvelimelle. HTML-dokumentin tunniste on htm tai html. Aloitussivun nimi on tavallisesti index.html .

ALKUUN | YLEISTÄ | RAKENNE | MULTIMEDIA | LINKIT | LISTAT | KEHYKSET | TAULUKOT | LOMAKKEET | TYYLIT | MUOTOILU | VÄRIKARTTA | MERKISTÖ | LOPPUUN

HTML:n Rakenne:

Määrittelee kommentin. Selain hyppää kaiken sen yli, mikä on näiden tagien välissä.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
Tämä on välttämätön ja ensimmäinen tagi jokaisen "HTML v3.2"-dokumentin alussa
<HTML>.....</HTML>
Nämä tagit sulkevat sisäänsä koko dokumentin
<HEAD>.....</HEAD>
Näiden tagien sisään tulee dokumentin alkuosa. Seuraavat tagit tulevat HEAD-tagien sisään:
1. <TITLE>.....</TITLE>
  Määrittelee dokumentin otsikon. Tämä otsikko näkyy selaimen ikkunan yläosassa. TITLE-tagit on oltava kaikissa HTML 3.2 dokumenteissa.
2. <BASE href="http://some.network/file.html">
  Määrittelee dokumentin perus URL-osoitteen
3. <BASE href="http://some.net/file.html" TARGET="...">
  Määrittelee myös kehyksen, johon kaikki linkit avautuvat. Katso kohta Linkit.
4. <META ominaisuus1 ominaisuus2>
  META-elementtiä voidaan käyttää määrittelemään dokumentille erilaisia nimi/arvo -pareja, jotka kertovat dokumentin ominaisuuksista. ESIM. internetin hakukoneet käyttävät näitä tietoja hyväkseen. Alla on muutama esimerkki:
  
  Jos haluat, että sivusi latautuu uudelleen joka 10. sekunti, käytä seuraavaa:
  <META HTTP-EQUIV="REFRESH" CONTENT=10 >
  
  Jos haluat jonkin muun sivun latautuvan joka 10. sekunti, käytä seuraavaa:
  <META HTTP-EQUIV="REFRESH" CONTENT=10 URL="http://some.address/file.html">
  
  Määritelläksesi sivullesi päättymisajan, jotta se latautuisi tietyn ajan jälkeen uudelleen, Käytä seuraavaa:
  <META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 1996 01:21:00 GMT">
  
  Määritelläksesi sivuillesi avainsanoja, joita jotkin hakukoneet käyttävät, käytä seuraavaa:
  <META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ...">
  
  Jos haluat kuvailla sivuasi (esim. mitä sivusi pitävät sisällään) käytä seuraavaa:
  <META HTTP-EQUIV="Description" CONTENT="Kuvailut tähän....">
5. <LINK attribute="..." HREF="..." >
  Toistaiseksi tätä tagia ei juurikaan tueta, mutta tulevaisuudessa selaimet tulevat käyttämään näistä tageista tehtyä listaa navigaatiopalkin tekemiseen.
  1. REL="..."--Määrittelee minkälainen suhde linkillä on sivulle. Mahdollisia arvoja ovat: "home", "toc" (table of contents), "index", "glossary", "copyright", "bookmark", "up", "next", "previous", and "help".
  2. REV="..."--Käytetään REL:n tilalla, määrittää käänteisen suhteen. Mahdollisia arvoja ovat: "made" (author, set HREF=email address) ja samat kuin REL:ssä.
  3. HREF="..."--Määrittää linkin osoitteen.
  4. TITLE="..."--Määrittää otsikon linkille.
<BODY attribute1="..." attribute2="...">.....< /BODY>
Pitää sisällään HTML-dokumentin vartalon. Näiden tagien sisälle tulee sivun varsinainen sisältö.
1. ALINK="..."--Määrittää aktiivisen linkin värin.
2. BACKGROUND="..."--Määrittää taustakuvan.
3. BGCOLOR="..."--Määrittää taustavärin.
4. BGPROPERTIES=FIXED--Korjaa taustakuvan siten, että se ei rullaa. (IE)
5. LEFTMARGIN="n"--Määrittää sivun vasemman marginaalin koon. n on jokin kokaisluku. (IE)
6. LINK="..."--Määrittää linkkien värin.
7. TEXT="..."--Määrittää tekstin värin.
8. TOPMARGIN="n"--Määrittää sivun ylämarginaalin koon. (IE)
9. VLINK="..."--Määrittää niiden linkkien värin, joissa olet jo käynyt.
  
  HUOM!:Värit määritellään joko RGB-koodilla (Red Green Blue) tai värin nimellä. RGB-koodissa jokainen väri saa arvon välillä 0 ja 255. luvut annetaan heksadesimaaleina. ESIM, BGCOLOR=#FFFF00 (huomaa risuaita) määrittää taustavärin keltaiseksi. Saman voi tehdä kirjoittamalla: BGCOLOR="yellow". Värikartassa on esitetty kaikkien perusvärien nimet ja koodit. Internetin perusvärit.
<BASEFONT attribute="...">
Asettaa koko sivulle oletusfontin.
1. SIZE="..."--Asettaa fontille koon. kaikki numerot välillä 1 - 7 käyvät. Oletuskoko on 3. Fontin koon voi asettaa myös suhteellisesti ESIM. SIZE=+2 .
2. COLOR="..."--Määrittää fontille oletusvärin.
3. Name="..."--Määrittää oletusfontin nimen ESIM. Arial.
<Hn>...< /Hn>
Tällä tagilla voidaan määrittää eri tason otsikot. n on kokonaisluku välillä 1 - 6. H1 on suurin otsikko ja H6 pienin.
<ISINDEX>
Näyttää teksilaatikon, jota voidaan käyttää etsimiseen sivulta. Serverin on tuettava tätä toimintoa, jotta sitä voitaisiin käyttää.
1. ACTION="..."--Määrittää hakuohjelman sijainnin.
2. PROMPT="..."--Määrittää vaihtoehtoisen kehoitteen teksilaatikolle.

ESIMERKKI, yksinkertainen HTML-dokumentti

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML>
<HEAD>
<TITLE>Mun Kotisivut</TITLE>
<META HTTP-EQUIV="Keywords" CONTENT="Kotisivut, HTML, CSS">
</HEAD>
<BODY BGCOLOR=#ffffff>

<H1>Tähän otsikko</H1>
Tähän väliin tekstiä
Ja tähän kanssa
</BODY>
</HTML>

Multimedia:

<IMG attribute1 attribute2>
Asettaa sivulle kuvan. Tuettuja kuvaformaatteja ovat ainakin gif ja jpg.
1. SRC="..."--Määrittelee kuvan osoitteen.
2. DYNSRC="..."--Määrittää videoleikkeen osoitteen (IE)
3. CONTROLS--Lisää ohjaimen videoleikkeen alle. (IE)
4. LOOP="n"--Videoleikkeille, Määrittää toistokerrat. Arvot "-1" tai "INFINITE" saa videon pyörimään loputtomasti.(IE)
5. START="..."--Määritää milloin video alkaa pyöriä. Mahdollisia arvoja ovat: "FILEOPEN" (oletus), "MOUSEOVER", tai molemmat.(IE)
6. USEMAP="#map1" --Kertoo selaimelle, että kuva on klikattava kuvakartta nimeltään "map1"
7. ISMAP --Kertoo selaimelle, että kuva on klikattava kuvakartta
8. ALT="..."--Määrittelee tekstin, joka näytetään selaimissa, jotka eivät tue kuvia.
9. BORDER="..."--Määrittää kuvan ympärillä olevan kehyksen paksuuden.
10. LOWSRC="..."--Määrittää sen kuvan osoitteen, joka ladataan ennen kuin varsinainen kuva ladataan.
11. ALIGN="..."--Määrittää kuvan tasauksen.
  1. RIGHT tai LEFT--Tasaa kuvan sivun jommalle kummalle puolelle.
  2. TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, ja ABSBOTTOM--Määrittelee kuvan pystysuuntaisen tasauksenne.
12. VSPACE="..."--Määritelee tilan, joka jätetään kuvan ylä- tai alapuolelle.
13. HSPACE="..."--Määritelee tilan, joka jätetään kuvan oikelle tai vasemmalle puolelle.
14. WIDTH="..."--Määrittelee kuvan leveyden. Kuva skaalataan annettuun kokoon.
15. HEIGHT="..."--Sama kuin yllä, mutta määrittelee kuvan korkeuden.
ESIMERKKI, Kuvan lisääminen dokumenttiin.
<IMG SRC="kuvat\kuva.jpg" BORDER=0 ALT="Mun Kuva">
<MAP attribute>...< /MAP>
Määrittelee kuvassa tietyt kohdat linkeiksi, joita klikkaamalla voi siirtyä toiselle www-sivulle. AREA-tagi voidaan asettaa näiden tagien sisälle määrittämään linkki-kohdat.
1. NAME="..."--Määrittelee kuvakartan nimen, jotta siihen voidaan viitata myöhemmin.
<AREA attribute1 attribute2>...< /AREA>
Määrittelee kuvakartan linkki-kohdan muodon ja koon. Asetetaan MAP-tagin sisään.
1. SHAPE="..."--Määrittelee linkki-kohdan muodon. Mahdollisia arvoja ovat: RECT, RECTANGLE, CIRC, CIRCLE, POLY, tai POLYGON.
2. COORDS="..."--Määrittelee koordinaatit, jotka määrävät linkki-kohdan paikan. Nelikulmiolle (RECT) tarvitsee määrittää kaksi pistettä, Monikulmiolle (POLY) kolme tai enemmän ja ympyrälle (CIRC) yksi piste ja säde.
3. HREF="..."--Määrittlee URL-osoitteen, johon linkki-kohta viittaa.
4. NOHREF--kertoo, että tällä linkki-kohdalla ei ole osoitetta.
5. TARGET="..."--Määrittelee mihin ikkunaan tai kehykseen linkki avataan. On olemassa myös valmiiksi määriteltyjä avaamiskohteita:
  1. "_blank"--Avaa linkin uuteen ikkunaan.
  2. "_self"--Avaa linkin samaan ikkunaan. (oletus)
<BGSOUND attribute1 attribute2> (IE)
Määrittelee musiikkitiedoston soivan aina sivun latautuessa. Tuettuja musiikkiformaatteja ovat .wav, .au ja .mid.
1. SRC="..."--Määrittelee soitettavan äänitiedoston sijainnin.
2. LOOP="n"--Määrittelee toistokerrat. Arvot "-1" tai "INFINITE" saavat musiikin soimaan loputtomiin.
<MARQUEE attribute1 attribute2>...< /MARQUEE> (IE)
Asettaa dokumenttiin rullaavan teksin.
1. ALIGN="..."--Määrittelee rullaavan tekstin ympärillä olevien tekstien tasauksen. Mahdollisia arvoja ovat: "TOP", "MIDDLE", tai "BOTTOM".
2. BEHAVIOR="..."--Määrittelee rullaavan tekstin käyttäytymisen. Mahdollisia arvoja ovat: "SCROLL" (oletus), "SLIDE" tai "ALTERNATE".
3. BGCOLOR="..."--Määrittelee rullaavan tekstin taustavärin.
4. DIRECTION="..."--Määrittelee rullaussuunnan. Mahdollisia arvoja ovat: "LEFT" (oletus) tai "RIGHT".
5. HEIGHT="..."--Määrittelee rullaavan tekstin korkeuden pikseleinä tai prosentteina näytöstä.
6. HSPACE="n"--Määrittelee oikean ja vasemman marginaalin. n on jokin kokonaisluku.
7. LOOP="n"--Määrittelee toistokerrat. Arvoilla "-1" tai "INFINITE" teksti rullaa loputtomiin.
8. SCROLLDELAY="n"--Määrittelee rullauksen aikavälin millisekunneissa.
9. VSPACE="n"--Määrittelee ylä- ja alamarginaalin.
10. WIDTH="..."--Määrittelee rullaavan tekstin leveyden.
<APPLET attribute1 attribute2> parameter1 parameter2 ... < /APPLET>
Asettaa dokumenttiin JAVA-APPLETIN. Selaimen on tuettava JAVAA. JAVA on internet- ympäristössä käytetty ohjelmointikieli.
1. ALIGN="..."-- Määrittää tekstin tasauksen objektin ympärillä. Mahdollisia arvoja ovat: "LEFT", "RIGHT", "TOP", "MIDDLE", tai "BOTTOM".
2. ALT="..."-- Määrittää tekstin, joka näkyy selaimissa, jotka tunnistavat tagin mutta eivät tue JAVA-appletteja.
3. CODE="..."--määrittää JAVA-appletin koodin nimen.
4. CODEBASE="..."--Määrittää Apletin perus-osoitteen. toisin sanoen hakemiston, missä appletti sijaitsee.
5. DOWNLOAD=n --Määrittää kuvien lataamisjärjestyksen.
6. HIGHT="..."--Määritää appletin korkeuden.
7. HSPACE="n"--Määrittää appletin oikean ja vasemman marginaalin.
8. NAME="..."--Määrittää Appletin nimen.
9. VSPACE="n"--Määrittää appletin ala- ja ylämarginaalin.
10. WIDTH="..."--Määrittää appletin leveyden.
<EMBED attribute1 attribute2>< /EMBED>
Lisää upotetun multimedia objektin, kuten äänitiedoston tai videoleikkeen sivulle. Tulevaisuudessa OBJECT-tagi tulee korvaamaan tämän.
1. AUTOSTART="..."--Määrittää käynnistyvätkö tiedostot heti. Mahdollisia arvoja ovat: "TRUE" tai "FALSE".
2. HIGHT="..."--Määrittää näytöksen korkeuden.
3. LOOP="..."--Määrittää toistetaanko tiedostoa. Mahdollisia arvoja ovat: "TRUE" tai "FALSE".
4. NAME="..."--Määrittää objektin nimen.
5. SRC="..."--Määrittää tiedoston sijainnin.
6. WIDTH="..."--Määrittää näytöksen leveyden.
<SCRIPT attribute> ...koodia... < /SCRIPT>
Scriptit ovat yleensä lyhyitä JAVA-ohjelmia, jotka kirjoitetaan suoraan HTML-dokumenttiin SCRIPT-tagien sisään. Jotta sellaiset selaimet, jotka eivät tue scriptejä eivät sekoaisi, laita SCRIPT-tagit kommenttitagien () sisään.
1. LANGUAGE="..."--Määrittää mitä ohjelmakieltä käytetään, ESIM. "VBScript" tai "JavaScript".
2. SRC="..."--Määrittää sen tiedoston sijainnin, jossa scriptin koodi sijaitsee. Voidaan käyttää, jos et halua, että scriptin koodi sijaitsee samassa dokumentissa kuin scripti.
<NOSCRIPT> ... < /NOSCRIPT>
Näiden tagien sisään laitetaan kaikki se, jota haluat näytettävän selaimissa, jotka eivät tue scriptejä. Nämä tagit tulevat SCRIPT-tagien sisään.

Linkit:

<A attribute="...">...< /A>
Kun attribuuttina käytetään HREF-attribuutia, näillä tageilla ympäröity teksti muuttuu linkiksi. Kun käytetään NAME-attribuuttia, toimivat tagit kirjanmerkkinä.
1. HREF="..."--Määrittää URL-osoitteen, johon linkki viittaa.
2. NAME="..."--Määrittää kirjanmerkin nimen.
3. onClick="--Määrittää sen scriptin nimen, joka käynnistyy, kun linkkiä klikataan.
4. onMouseOver="--Määrittää sen scriptin nimen, joka käynnistyy, kun hiiren ositin on linkin päällä.
5. REL="..."--Määrittää suhteellisen yhteyden.
6. REV="..."--Määrittää käänteisen yhteyden.
7. TARGET="..."--Määrittää mihin ikkunaan tai kehykseen linkki avataan.
8. TITLE="..."--Määrittää otsikon, joka näkyy, kun linkkiä painetaan.

ESIMERKKI, Linkit.

Linkki TKK:n sivuille.
<A HREF="http://www.hut.fi">Teknillinen Korkeakoulu</A>

Kuvasta linkki:
<A HREF="http://www.hut.fi"><IMG ALT="HUT" BORDER=0 SRC="kuva.jpg"></A>

Kirjanmerkki.
<A NAME="html"></A>

Kirjanmerkkiin viitataan näin:
<A HREF="#html">HTML</A>

Listat:

<LI attribute>
Käytetään tekstin määrittämiseksi listoiksi. listatyypit: <DIR>, <MENU>, <OL>, tai <UL>.
1. TYPE="..."--Määrittä listan edessä olevan merkin tyypin. Mahdollisia arvoja ovat: DISC, CIRCLE, SQUARE, A, a, I, i, 1.
2. VALUE="..."--Määrittää lista-alkion numeron.
<DIR>...< /DIR>
Asettaa <LI>-tagilla merkityt tekstit hakemistolistaksi.
<MENU>...< /MENU>
Asettaa <LI>-tagilla merkityt tekstit valikkolistaksi.
<OL attribute>...< /OL>
Asettaa <LI>-tagilla merkityt tekstit numeroiduksi listaksi.
1. TYPE="..."--Määrittää numeroinnin tyypin. Mahdollisia arvoja ovat: A, a, I, i, 1.
2. START="..."--Määrittää aloitusarvon.
<UL attribute>...< /UL>
Asettaa <LI>-tagilla merkityt tekstit merkityksi listaksi.
1. TYPE="..."--Määrittää merkin tyypin. Mahdollisia arvoja ovat: DISC, CIRCLE, SQUARE.
<DL>...< /DL>
Luo määrittelulistan. <DT> Määrittää määrittely termin ja <DD> Määrittää määrittelyn.

ESIMERKKI, Listat.

rivi1
rivi2
rivi3

yllä oleva lista tehdään näin:
<OL TYPE=1>
<LI>rivi1
<LI>rivi2
<LI>rivi3
</OL>

rivi1
rivi2
rivi3

yllä oleva lista tehdään näin:
<UL TYPE=circle>
<LI>rivi1
<LI>rivi2
<LI>rivi3
</UL>

Kehykset:

<FRAMESET attribute1="..." attribute2="...">...< /FRAMESET>
Määritää sarjan kehyksiä, joista WWW-sivut muodostuvat. FRAME- ja NOFRAMES-tagit sijoitetaan näiden tagien sisään. Jos kehyksiä käytetään, niin FRAMESET-tagi korvaa BODY-tagin. Voit kuitenkin laittaa BODY-tagin NOFRAMES-tagien sisään sellaisia selaimia varten, jotka eivät tue kehyksiä. Kehyksistä esimerkkinä on nämä minun kotisivuni. Tummanoranssi alue on toteutettu kehyksin.
1. BORDER="..."--Määrittää kehyksien reunan paksuuden pikseleinä.
2. COLS="..."--Luo kehykset sarakkeina ja määrittää sarakkeiden leveydet. Sarakkeiden leveys voidaan määrittää prosentteina (%), pikseleinä tai suhteellisena kokona (*). ESIM. Jos haluat kehyksinä olevan aina kolme yhtä leveää saraketta niin voit käyttää: COLS="33%,33%,*"
3. FRAMEBORDER="..."--Määrittää näytetäänkö 3D reunat kehyksissä. Mahdollisia arvoja ovat: 0 (ei reunoja) tai 1 (oletus).(IE)
4. FRAMESPACING="..."--Määrittää pikseleinä tilan, joka on kehyksien välissä.
5. ROWS="..."--Luo kehykset riveinä ja määrittää rivien korkeuden. Korkeus voidaan määrittää prosentteina (%), pikseleinä tai suhteellisena kokona (*). ESIM. jos haluat pienen kehyksen sivujesi ylälaitaan ja yhden ison sen alle voit käyttää: ROWS="15%,*"
6. SCROLLING="..."--Määrittää näytetäänkö vierityspalkki kehyksien reunalla. Mahdollisia arvoja ovat: "yes", "no" tai "auto".
<FRAME attribute1="..." attribute2="...">
Määrittää yksittäisen kehyksen kehyssarjan (frameset) sisällä.
1. BORDER="..."--Määrittää kehyksien reunan paksuuden pikseleinä.
2. FRAMEBORDER="..."--Määrittää näytetäänkö 3D reunat kehyksissä. Mahdollisia arvoja ovat: 0 (ei reunoja) tai 1 (oletus).(IE)
3. MARGINHEIGHT="..."--Määrittää ala- ja ylämarginaalin kehyksessä.
4. MARGINWIDTH="..."--Määrittää oikean ja vasemman marginaalin kehyksessä.
5. NAME="..."--Määrittää kehyksen nimen.
6. NORESIZE--Määrittää, että käyttäja ei pysty säätämään kehyksen kokoa.
7. SCROLLING="..."--Määrittää näytetäänkö vierityspalkki kehyksien reunalla. Mahdollisia arvoja ovat: "yes", "no" tai "auto".
8. SRC="..."--Määrittää kehyksen lähdetiedoston sijainnin.
<IFRAME attribute1="..." attribute2="...">< /IFRAME> (IE)
Määrittää kelluvan kehyksen. Tätä ei tarvitse sijoittaa FRAMSET-tagien sisään.
1. ALIGN="..."--Määrittää kelluvan kehyksen tasauksen. Mahdollisia arvoja ovat: TOP, MIDDLE, BOTTOM, LEFT tai RIGHT.
2. FRAMEBORDER="..."--Määrittää näytetäänkö 3D reunat kehyksissä. Mahdollisia arvoja ovat: 0 (ei reunoja) tai 1 (oletus).
3. HEIGHT="..."--Määrittää kelluvan kehyksen korkeuden.
4. MARGINHEIGHT="..."--Määritää ala- ja ylämarginaalien koon pikseleinä.
5. MARGINWIDTH="..."--Määrittää vasemman ja oikean marginaalin koon.
6. NAME="..."--Määrittää kelluvan kehyksen nimen.
7. NORESIZE--Estää käyttäjää säätämästä kehyksen kokoa.
8. SCROLLING="..."--Määrittää näytetäänkö vierityspalkki kehyksien reunalla. Mahdollisia arvoja ovat: "yes", "no" tai "auto".
9. SRC="..."--Määrittää kelluvan kehyksen lähdetiedoston sijainnin.
10. WIDTH="..."--Määrittää kelluvan kehyksen leveyden.
<NOFRAMES>...< /NOFRAMES>
Asetetaan FRAMESET-tagien sisään. Näiden tagien sisällä oleva teksti näkyy vain selaimissa, jotka eivät tue kehyksiä.

ESIMERKKI, Kehykset.

Esimerkkinä näytän miten näiden sivujen kehykset on tehty. Sivut on jaettu kolmeen kehykseen. Ensin sivu on jaettu kahteen sarakkeeseen ja sen jälkeen toinen sarake on jaettu kahteen riviin. Ensimmäisessä kehyksessä on vasemmalla oleva valikko. Toisessa kehyksessä ylhäällä on kello ja kolmannessa kehyksessä kellon alla on tämä teksti. Kehykset on tehty näin:

<FRAMESET COLS="140,*" BORDER=0>

<NOFRAMES>
<BODY>
<H2>Selaimesi ei tue kehyksiä, joten olisi varmaan aika päivittää se uuteen.</H2>
</BODY>
</NOFRAMES>

<FRAME SRC="valikko.html" MARGINHEIGHT=0 MARGINWIDTH=0 NAME="menu" NORESIZE>
<FRAMESET ROWS="50,*">
<FRAME SRC="top.html" NAME="top" SCROLLING=no NORESIZE>
<FRAME SRC="main.html" NAME="main" NORESIZE>
</FRAMESET>
</FRAMESET>

Taulukot:

<TABLE attribute1="..." attribute2="...">...< /TABLE>
Luo taulukon, jossa voi olla mielivaltainen määrä rivejä.
1. BORDER="..."--Määrittää taulukon ympärillä olevien reunojen paksuuden. arvolla 0 reunoja ei näy.
2. BACKGROUND="..."--Määrittää taustakuvan.(IE)
3. BGCOLOR="..."--Määrittää taulukon taustavärin.
4. BORDERCOLOR="..."--Määrittää taulukon reunojen värin.
5. BORDERCOLORLIGHT="..."--Määrittää vaalean värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
6. BORDERCOLORDARK="..."--Määrittää tumman värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
7. WIDTH="..."--Määrittää taulukon leveyden.
8. CELLSPACING="..."--Määrittää taulukon solujen välisen tilan.
9. CELLPADDING="..."--Määrittää tilan, joka jää taulukon reinojen ja taulussa olevan tekstin väliin.
10. FRAME="..."--Määrittää mitkä taulukon ulkoreunat näytetääm.(IE)
  1. VOID--Reunoja ei näytetä.
  2. ABOVE--Näytetään yläreuna.
  3. BELOW--Näytetään alareuna.
  4. HSIDES--Näytetään ylä- ja alareuna.
  5. LHS--Näytetään vasemman puoleinen reuna.
  6. RHS--Näytetään oikean puoleinen reuna.
  7. VSIDES--Näytetään oikean ja vasemman puoleinen reuna.
  8. BOX--Kaikki reunat näytetään.
  9. BORDER--Kaikki reunat näytetään.
11. HEIGHT="..."--Määrittää taulukon korkeuden.
12. RULES="..."--Määrittää mitkä taulukon sisäpuolisista reunaviivoista näytetään. (IE)
  1. NONE--Sisäreunaviivoja ei näytetä.
  2. GROUPS--Näytetään taulukkoryhmien väliset viivat. ESIM. THEAD, TFOOT, TBODY ja COLGROUP.
  3. ROWS--Näytetään rivien väliset viivat.
  4. COLS--Näytetään sarakkeiden väliset viivat.
  5. ALL--Näytetään kaikki sisäviivat.
<CAPTION attribute1="...">...< /CAPTION>
Määrittää Taulukon otsikon.
1. ALIGN="..."--Määrittää otsikon paikan. Mahdollisia arvoja ovat: LEFT, RIGHT, BOTTOM, tai TOP.
<TR attribute1="..." attribute2="...">...< /TR>
Määrittää taulukossa rivin.
1. ALIGN="..."--Määrittää vaakasuuntaisen tasuksen rivissä. Mahdollisia arvoja ovat: LEFT, RIGHT, ja CENTER.
2. BGCOLOR="..."--Määrittää rivin taustavärin.
3. BORDERCOLOR="..."--Määrittää rivin reunaviivan värin.
4. BORDERCOLORLIGHT="..."--Määrittää vaalean värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
5. BORDERCOLORDARK="..."--Määrittää tumman värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
6. VALIGN="..."--Määrittää rivin pystysuuntaisen tasauksen. Mahdollisia arvoja ovat: TOP, MIDDLE, BOTTOM ja BASELINE.
7. HEIGHT="..."--Määrittää solun korkeuden.
<TH attribute1="..." attribute2="...">...< /TH>
Tekee solusta taulukon otsikon.
1. ALIGN="..."--Määrittää vaakasuuntaisen tasauksen. Mahdollisia arvoja ovat: LEFT, RIGHT ja CENTER.
2. NOWRAP--Estää tavutuksen.
3. BGCOLOR="..."--määrittää solun taustavärin.
4. BACKGROUND="..."--Määrittää taustakuvan.(IE)
5. BORDERCOLOR="..."--Määrittää solun reunaviivojen värin.
6. BORDERCOLORLIGHT="..."--Määrittää vaalean värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
7. BORDERCOLORDARK="..."--Määrittää tumman värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
8. VALIGN="..."--Määrittää pystysuuntaisen tasauksen solussa. Mahdollisia arvoja ovat TOP, MIDDLE, BOTTOM tai BASELINE.
9. ROWSPAN="..."--Määrittää moneenko riviin solu jaetaan.
10. COLSPAN="..."--Määrittää moneenko sarakkeeseen solu jaetaan.
11. WIDTH="..."--Määrittää solun leveyden.
12. HEIGHT="..."--Määritäää solun korkeuden.
<TD attribute1="..." attribute2="...">
Nämä tagit laitetaan TR-tagien sisään. Ne määrittävät taulukon sarakkeet.
1. BACKGROUND="..."--määrittää taustakuvan. (IE)
2. BGCOLOR="..."--Määrittää solun taustavärin.
3. BORDERCOLOR="..."--Määrittää solun reunaviivojen värin.
4. BORDERCOLORLIGHT="..."--Määrittää vaalean värin reunoille, jotta aikaan saataisiin 3D-reunat.Määrittää monee.(IE)
5. BORDERCOLORDARK="..."--Määrittää tumman värin reunoille, jotta aikaan saataisiin 3D-reunat.(IE)
6. ALIGN="..."--Määrittää vaakasuuntaisen tasauksen. Mahdollisia arvoja ovat: LEFT, RIGHT ja CENTER.
7. NOWRAP--Estää tavutuksen.
8. VALIGN="..."--Määrittää pystysuuntaisen tasauksen solussa. Mahdollisia arvoja ovat TOP, MIDDLE, BOTTOM tai BASELINE.
9. ROWSPAN="..."--Määrittää moneenko riviin solu jaetaan.
10. COLSPAN="..."--Määrittää moneenko sarakkeeseen solu jaetaan.
11. WIDTH="..."--Määrittää solun leveyden.
12. HEIGHT="..."--Määritää solun korkeuden.
<COLGROUP attribute1="..." attribute2="...">(IE)
Määrittä yhden tai useamman sarakkeen ominaisuudet. Tämä tagi sijoitetaan heti TABLE-tagin jälkeen.
1. ALIGN="..."--Määrittää tekstin sijainnin sarakkeen soluissa. Mahdollisia arvoja ovat: CENTER, LEFT, RIGHT, BOTTOM tai TOP.
2. SPAN="..."--Määrittää niiden sarakkeiden lukumäärän, joihin nämä attribuutit vaikuttavat.
<COL attribute1="..." attribute2="...">(IE)
Käytetään COLGROUP-tagin kanssa. Tämä määrittää yhden sarakkeen ominaisuudet.
1. ALIGN="..."--Määrittää tekstin sijainnin sarakkeen soluissa. Mahdollisia arvoja ovat: CENTER, LEFT, RIGHT, BOTTOM tai TOP.
2. SPAN="..."--Määrittää niiden sarakkeiden lukumäärän, joihin nämä attribuutit vaikuttavat.
<TBODY>...< /TBODY>(IE)
Määrittää taulukon vartalon.
<TFOOT>...< /TFOOT>(IE)
Määrittää taulukon alatunnisteen.
<THEAD>...< /THEAD>(IE)
Määrittää taulukon ylätunnisteen.

ESIMERKKI, Taulukko.

solu1	solu2	solu3
solu1	solu4	solu5
solu6	solu7	solu8

yllä oleva taulukko tehdään näin:
<TABLE BORDER=1>
<TR BGCOLOR="#48D1CC">
<TH ROWSPAN=2>solu1</TH>
<TD>solu2
<TD>solu3
</TR>
<TR BGCOLOR="#4169E1">
<TD>solu4
<TD>solu5
</TR>
<TR BGCOLOR="#48D1CC">
<TD>solu6
<TD>solu7
<TD>solu8
</TABLE>

lomakkeet:

<FORM attribute1="..." attribute2="...">.....< /FORM>
Määrittelee lomakkeen. Lomakkeita voidaan käyttää tiedon lähettämiseen serverille NAME/VALUE pareina.
1. ACTION="..."--Määrittelee käytettävän osoitteen, kun lomake on toiminnassa. Yleensä CGI-tiedoston osoite. Voidaan määrittää myös MAILTO-osoite, jotta lomakkeen tiedot postitettaisiin suoraan sinulle. Ota selvää tukee serverisi CGI-tiedostoja.
2. METHOD="..."--Määrittelee metodin, jolla serveri lähettää lomakkeen tiedon. Mahdollisia arvoja ovat: POST tai GET. Kun käytetään arvoa GET, niin serveri lisää argumentit ACTION-osoitteen perään. Kun käytetään arvoa POST, niin tieto lähetetään HTTP postitoimintona.
3. TARGET="..."--Määrittelee mihin ikkunaan tai kehykseen lomakkeen tulokset ladataan.
4. ENCTYPE="..."--Tulevaisuudessa. Määrittelee millaista koodausta käytetään.
<INPUT attribute1="..." attribute2="...">
Määrittelee tiedon syöttöalueen lomakkeelle.
1. ALIGN="..."--Jos TYPE on IMAGE, niin tämä määrittelee tavan jolla teksti kiertää kuvan. Mahdollisia arvoja ovat: TOP, MIDDLE, BOTTOM, LEFT tai RIGHT.
2. CHECKED--Tätä atribuuttia käytetään RADIO- tai CHECKBOX-tyyppien kanssa. Tämä saa aikaan sen, että nämä kohdat ovat valmiiksi valittuina.
3. MAXLENGTH="..."--Määrittelee maksimipituuden tekstille.
4. NAME="..."--Määrittelee nimen syöttöalueelle. (osa NAME/VALUE paria)
5. SIZE="..."--Määrittelee syöttöalueen koon.
6. SRC="..."--jos TYPE on IMAGE, niin tämä määrittelee kuvan osoitteen.
7. VALUE="..."--määrittelee arvon, joka yhdistetään tiettyyn syöttöalueeseen. (osa NAME/VALUE paria). Määrittelee oletustekstin TEXT-tyypille. RESET- ja SUBMIT-tyypille se määrittelee tekstin, joka näkyy nappulassa.
8. TYPE="..."--Määrittelee syöttö kontrollin tyypin.
  1. CHECKBOX--Luo valintalaatikon.
  2. HIDDEN--Selain ei näytä kontrollia, mutta sen tiedot lähetetään serverille.
  3. IMAGE--Kuin tyyppi SUBMIT. Eli kuvaa käyttää nappulana.
  4. PASSWORD--Luo yhden rivin tekstikentän, johon voi kirjoittaa salasanan.
  5. RADIO--Luo radiolistan, jonka vaihtoehdoista voi valita vain yhden.
  6. RESET--Luo 3D nappula, joka tyhjentää koko lomakkeen.
  7. SUBMIT--Luo 3D nappulan, joka lähettää lomakkeen tiedot serverille.
  8. TEXT--Luo yhden rivin tekstikentän.
<SELECT attribute1="..." attribute2="...">< /SELECT>
Luo alasvetolistan. Listan nimikkeet määritellään OPTION-tagilla, joka sijoitetaan SELECT-tagien sisään.
1. MULTIPLE--Määrittää, että useamman kuin yhden nimikkeen voi valita.
2. NAME="..."--Määrittelee listan nimen (Osa NAME/VALUE paria).
3. SIZE="..."--Määrittelee kuinka monta nimikettä näkyy kerrallaan.
  
  <OPTION value="...">item</OPTION>
  Määrittelee alasvetolistaan nimikkeen.
  1. VALUE="..."--Määritteleen palautettavan arvon (Osae NAME/VALUE paria).
  2. SELECTED--Määrittää onko nimike valmiiksi korostettuna.
<TEXTAREA attribute1="..." attribute2="...">...< /TEXTAREA>
Luo monirivisen tekstilaatikon. Teksti, joka kirjoitetaan näiden tagien sisään näkyy oletus tekstinä laatikossa.
1. COLS="..."--Määrittelee kuinka leveä laatikko on.
2. ROWS="..."--Määrittelee kuinka korkea laatikkoa on.
3. NAME="..."--Määrittelee tekstilaatikon nimen.
4. WRAP="..."--Määrittelee kuinka teksti tavutetaan. Mahdollisia arvoja ovat: "HARD", "SOFT" tai "NONE".

ESIMERKKI, Lomakkeet.

yllä oleva lomake tehdään näin:
<FORM METHOD="post" ACTION="cgi-bin/mailto">
<CENTER>
viesti:
<BR>
<TEXTAREA NAME="viesti" COLS=20 ROWS=4 WRAP=none>HELLO WORLD!!</TEXTAREA>
<BR>
<INPUT TYPE="submit" VALUE="lähetä"></INPUT>
<INPUT TYPE="reset" VALUE="tyhjennä"></INPUT>
</CENTER>
</FORM>

yllä oleva lomake tehdään näin:
<FORM>
<CENTER>
Lista:<BR>
<SELECT NAME="lista" SIZE=3>
<OPTION VALUE="1">Tämä on rivi1</OPTION>
<OPTION VALUE="2">Tämä on rivi2</OPTION>
<OPTION VALUE="3">Tämä on rivi3</OPTION>
<OPTION VALUE="4">Tämä on rivi4</OPTION>
<OPTION VALUE="5">Tämä on rivi5</OPTION>
</SELECT>
</CENTER>
</FORM>

Tyylit:

CSS-oppaastani

Tekstin muotoilu:

<ADDRESS>.....< /ADDRESS>
Tämä on esimuotoilu sähköpostiosoitetta varten.
Näyttää tältä:
jmerikan@cc.hut.fi
<B>...< /B>
Lihavoi tekstin.
Näyttää tältä: Tämä on lihavoitua tekstiä.
<BIG>...< /BIG>
Tekee tekstistä ison kokoista.
Näyttää tältä: Isoa tekstiä
<BLINK>.....< /BLINK>(NetScape)
Saa tekstin vilkkumaan.
Näyttää tältä: Vilkkuva teksti
<BLOCKQUOTE>.....< /BLOCKQUOTE>
tekee tekstistä viittauksen.
Näyttää tältä:
viittaus tekstiä
<BR>
Tekee rivinvaihdon.
1. CLEAR="..."--Lopettaa tekstin kellumisen kuvan ympärillä.
  Mahdollisia arvoja ovat: RIGHT, LEFT tai ALL.
<CENTER>.....< /CENTER>
Keskittää tagien sisällä olevat elementit (tekstin, kuvat, taulukot jne.)
<CITE>.....< /CITE>
Tekee tekstistä sitaatin (esim. kirjan nimi).
Näyttää tältä: Sitaatti tekstiä
<CODE>.....< /CODE>
Esimuotoilu ohjelmointikoodia varten.
Näyttää tältä: Esimerkki koodia
<COMMENT>.....< /COMMENT>
Tekee tekstistä kommentin. Teksti tagien sisällä ei näy selaimella. Sama vaikutus kuin tageilla
<DFN>.....< /DFN>
Esimuotoilu määritelmille.
Näyttää tältä: Tämä on määritelmä
<DIV ALIGN=">...< /DIV>
Määrittää tagien sisällä olevien elementtien tasauksen. Voidaan käyttää dokumentin jakamiseen osiin, jotka on tasattu erilaisesti.
1. ALIGN="..."--Määrittää tasauksen. Mahdollisia arvoja ovat: "center", "right" tai "left".
<EM>...< /EM>
Korostaa tekstin.
Näyttää tältä: Korostettua tekstiä
<FONT attribute=">...< /FONT>
Asettaa tekstille ominaisuuksia.
ESIM.
<FONT COLOR="red" FACE="arial" SIZE="+2">Muotoiltua tekstiä</FONT>
Muotoiltua tekstiä
1. SIZE="..."--Määrittää fontin koon välillä 1-7. Suhteellisia kokoja voidaan myös käyttää (esim. SIZE=-2).
2. COLOR="..."--Määrittää fontin värin.
3. FACE="..."--Määrittää minkä nimistä fonttia käytetään. Voidaan määritellä lista fonteista (erotellaan pilkulla) ja selain käyttää ensimmäistä, joka tietokoneesta löytyy.
<HR attribute1="..." attribute2="...">
Lisää vaakasuoran viivan.
1. SIZE="..."--Määrittää viivan paksuuden.
2. COLOR="..."--Määrittää viivan värin.(IE)
3. WIDTH="..."--Määrittää viivan pituuden prosentteina näytön leveydestä (esim. WIDTH=90%).
4. ALIGN="..."--Määrittää viivan tasauksen. Mahdollisia arvoja ovat: RIGHT, LEFT tai CENTER.
5. NOSHADE--Viivaan ei piirretä varjostusta.
<I>...< /I>
Kursivoi tekstin.
Näyttää tältä: Kursivoitua tekstiä
<KBD>...< /KBD>
Esimuotoilu tekstille, joka on syötetty näppäimistöltä.
Näyttää tältä: Näppäiltyä tekstiä
<LISTING>.....< /LISTING>
asettaa kirjaimet vakio etäisyydelle toisistaan. Tämä tagi on jo vanhanaikainen. --käytä PRE-tagia mieluummin.
Näyttää tältä: Tämä on tehty LISTING-tagilla
<MULTICOL>.....< /MULTICOL>
Asettaa tekstin sarakkeisiin.
1. COLS="..."--Määrittää sarakkeiden lukumäärän.
2. GUTTER="..."--Määrittää pikseleiden määrän, joka jää sarakkeiden väliin.
3. WIDTH="..."--Määrittää sarakkeen leveyden.
<NOBR>.....< /NOBR>
Estää rivinvaihdon.
<P attribute>...< /P>
Määrittää dokumenttiin kappaleen.
1. ALIGN="..."--Määrittää kappaleen tasauksen. Mahdollisia arvoja ovat: "center", "left" tai "right".
<PLAINTEXT>.....< /PLAINTEXT>
Esittää tekstin vakio leveyksisenä. Vanhanaikainen -- Käytä mieluummin PRE-tagia.
<PRE>.....< /PRE>
Näyttää tekstin siten, kuin se on kirjoittu editorilla. Esim. useammat välilyönnit näkyvät.
Tämä taulukko on tehty PRE-tagilla ja se näyttää NotePadissä juuri tältä:
```
		Sarake1		Sarake2		sarake3
		---------------------------------------
		Solu1		Solu2		Solu3
		Solu4		Solu5		Solu6
		Solu7		solu8		solu9
		
```
<S>.....< /S>
Yliviivaa tekstin
Näyttää tältä: ~~Yliviivattu teksti~~

<STRIKE>...</STRIKE>
Myöskin yliviivaa tekstin.
<SAMP>...</SAMP>
Tätä voi käyttää esimerkki tekstinä esim. lomakkeen tulostuksesta.
Näyttää tältä. Esimerkki tekstiä
<SMALL>...< /SMALL>
Tekee tekstistä pientä.
Näyttää tältä: Pientä tekstiä
<SPACER attribute>...< /SPACER>(Netscape)
Lisää HTML-dokumenttiin tyhjää tilaa sinne missä sitä tarvitaan.
1. ALIGN="..."--Kun TYPE=BLOCK, niin tämä määrittelee miten ympäröivä teksti tasataan
  1. RIGHT tai LEFT--Määrittelee vaakasuuntaisen tasauksen.
  2. TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE ja ABSBOTTOM--Määrittelee pystysuuntaisen tasauksen.
2. HEIGHT="..."--kun TYPE=BLOCK, niin tämä määrittelee blokin korkeuden.
3. SIZE="..."--kun TYPE=HORIZONTAL tai VERTICAL, niin tämä määrittelee tilan koon.
4. TYPE="..."--Määrittelee tilan tyypin.
  1. HORIZONTAL--Lisää tyhjää tilaa sanojen väliin.
  2. VERTICAL--Lisää tyhjää tilaa rivien väliin.
  3. BLOCK--Lisää nelikulmaisen tilan.
5. WIDTH="..."--Kun TYPE=BLOCK, niin tämä määrittää blokin leveyden.
<STRONG>...< /STRONG>
Korostaa tekstin.
Näyttää tältä: Korostettua tekstiä
<SUB>...< /SUB>
Tekee alaindeksin.
ESIM. X₂₂₂
<SUP>...< /SUP>
Tekee yläindeksin.
ESIM. X²²²
<TT>...< /TT>
Tekee tekstistä kirjoituskoneella kirjoitetun näköistä.
Näyttää tältä: Tämä on kirjoitettu kirjoituskoneella
<U>...< /U>
Alleviivaa teksin. Vältä tätä, sillä alleviivattu teksti tarkoittaa yleensä linkkiä.
Näyttää tältä: alleviivattua tekstiä
<VAR>...< /VAR>
Esimuotoilu muuttujia varten.
Näyttää tältä: VAR on lyhenne sanasta variable
<WBR>
Jos teksti on NOBR-tagien sisällä, saa tämä aikaan sen, että rivinvaihto tehdään vain tarvittaessa.
<XMP>...< /XMP>
Teksti näytetään selaimessa siten, kun se on kirjoitettu.
Vanhanaikainen -- Käytä mieluummin PRE-tagia.