Tagi ja elementti
Dokumentin yleinen rakenne
Dokumentin määrittelyt
Tekstityypin, kappaleen ja rivinvaihdon määrittelyt
Kappale
Rivinvaihto
Tekstityyppi
Perusteksti
Loogiset kirjasintyylit
Fyysiset kirjasintyylit
Listat
Taulukko
Ankkuri eli linkki tai kirjanmerkki
Kuva
Kuvakartta (asiakaspohjainen kartta)
Lomake
Lomakkeen kentät
Syöte
Pudotusvalikko
Tekstikenttä
Painonappi
HTML-koodi koostuu tageista ja elementeistä. Elementit ovat muotoa <tagi></tagi>, jossa <tagi> tarkoittaa elementin vaikutusalueen alkua, </tagi> taas
loppua.
<html>
<head>
<title>Dokumentin otsikko</title>
</head>
<body>
Dokumentin runko. Teksti ja kuvat ym. tulee tänne.
</body>
</html>
FrontPage: Hiiren oikea nappi -> Sivun ominaisuudet...
Määrittely: <body></body>
Parametrit:
- Taustakuva: background="kuvan URL" esim. "kuva.gif"
- Taustan väri: bgcolor="väri" esim. yellow, "#ffff00"
- Tekstin väri: text="väri"
- Linkin väri:
- linkki: link="väri"
- vieraillun linkin väri: vlink="väri"
- aktiivisen linkin väri: alink="väri"
- Taustakuvan kiinnitys (vesileima): bgProperties="fixed"
FrontPage:
- Hiiren oikea nappi -> Kappale...
- Kirjoitus: enter
Määrittely: <p>kappaleen teksti</p> (FrontPage: enter)
Parametri:
- align="tasaustapa" tasaustapa=left, center, right
FrontPage: kirjoitus: shift+enter
Määrittely: <br> (FrontPage: shift+enter)
FrontPage: Hiiren oikea nappi -> Fontti...
Määrittely: <font></font>
Parametrit:
- color="väri"
- face="kirjasintyyli" (esim. face="Arial")
- size="koko" (koot 1-7, perusfontti 3. Voidaan myös ilmoittaa suhteellisena, esim.
size=+2)
<basefont> (vaikuttaa koko dokumentissa)
Parametrit:
- color="väri"
- face="kirjasintyyli"
- size="koko"
FrontPage: Tyylivalikko (ei kaikkia saatavilla)
- Otsikot 1-6: <h1>otsikko 1</h1> ... <h6>otsikko 6</h6> (parametri
align="tasaustapa" (left, center, right)
- Korostus: <em>teksti</em>
- Näppäiltävä teksti: <kbd>teksti</kbd>
- Termien määrittely: <dfn>teksti</dfn>
- Esimerkki: <samp>teksti</samp>
- Lainaus: <cite>teksti</cite>
- Ohjelmakoodi: <code>teksti</code>
- Ohjelman muuttujat: <var>teksti</var>
- Määrittelytyyli: <acronym>teksti</acronym>
- Korostus: <strong>teksti</strong>
- Osoitetiedot: <address>teksti</address>
- Lyhyt lainaus: <q>teksti</q>, parametri cite="lainattavan tekstin
URL-osoite"
- Lohkosisennys <blockquote>teksti</blockquote>, parametri cite="lainattavan tekstin
URL-osoite"
- Lisätty teksti: <ins>teksti</ins>, parametri datetime="päivämäärä", esim. <del
datetime="2001-11-05T08:15:00-05:00"> muuttuu teksti annettuna hetkenä normaalista alleviivatuksi.
- Poistettu teksti: <del>teksti</del>, parametri datetime="päivämäärä"
FrontPage: Muotoilutyökalurivi (ei kaikkia saatavilla)
- Lihavointi: <b>teksti</b>
- Kursivointi: <i>teksti</i>
- Alleviivaus: <u>teksti</u>
- Yliviivaus: <s>teksti</s>, <strike>teksti</strike>
- Yläindeksi: <sup>teksti</sup>, parametri align="tasaus"
- Alaindeksi: <sub>teksti</sub>, parametri align="tasaus"
- Leipätekstiä pienempi teksti: <small>teksti</small>
- Leipätekstiä suurempi teksti: <big>teksti</big>
- Vilkkuva teksti: <blink>teksti</blink> (Netscape)
- Vierivä teksti: <marquee>teksti</marquee> (Internet Explorer), parametrit
- align="tausaus" (left, center, right)
- behavior="vieritystapa" (scroll, slide, alternate)
- direction="suunta" (left, right)
- scrollamount="nopeus" (esim. 10)
- scrolldelay="viive" (viive millisekunneissa, 1 sekunti=1000ms)
- loop="toistokerrat" (esim. 5)
- infinite (ikuinen toisto, oletus)
- bgcolor="taustaväri"
- width="alueen leveys"
- height="alueen korkeus"
- hspace="alueen vaakamarginaali"
- vspace="alueen pystymarginaali"
- Konekirjoitusteksti: <tt>teksti</tt>
- Preformatoitu teksti: <pre>teksti</pre>, parametrit:
- width="leveys"
- cols="rivin merkkien määrä"
- suhteutus selainikkunaan: wrap
- Konekirjoitusteksti, jossa ei huomioida html-tageja: <xmp>teksti</xmp>
- Suora teksti: <plaintext>teksti</plaintext>
- Pieni konekirjoitusteksti: <listing>teksti</listing>
FrontPage: Muotoilutyökalurivi; hiiren oikea nappi -> Luettelon ominaisuudet..., Luettelon kohdan ominaisuudet...
- Numeroitu: <ol>listan jäsenet</ol>
- Parametrit:
- type="listan tyyppi" (A=isot kirjaimet, a=pienet kirjaimet, I=isot roomalaiset numerot, i=pienet roomalaiset numerot, 1=arabialaiset numerot)
- start="aloitusnumero" (numero, josta listan numerointi alkaa)
- Listan jäsenet: <li>eka listassa<li>toka listassa<li>jne...
- Numeroimaton: <ul>listan jäsenet</ul>
- Parametri: type="luettelomerkin tyyppi" (disc, circle, square)
- Listan jäsenet: <li>eka<li>toka<li>jne...
Esim.
<ol type="A" start="2">
<li>eka
<li>toka
</ol>
FrontPage: Työkalurivi; taulukko-valikko; hiiren oikea nappi -> Taulukon ominaisuudet..., Solun ominaisuudet...
- Taulukon määrittely: <table></table>
- Parametrit:
- align="tasaus" (left, center, right)
- width="leveys" (pistettä tai prosenttia, esim width="250" tai
width="50%")
- height="korkeus" (pistettä tai prosenttia)
- cellpadding="solun reunan ja sisällön väli" (pistettä)
- cellspacing="solujen väli" (pistettä)
- bgcolor="taustaväri" (esim. red, #ff0000)
- background="taustakuvan URL" (esim. background="kuvat/tauluntausta.jpg")
- border="kehyksen paksuus" (pistettä)
- bordercolor="väri" (kehyksen väri)
- bordercolorlight="väri" (kehyksen 1. väri)
- bordercolordark="väri" (kehyksen 2. väri)
- frame="taulukon reunus"
- above (yläosa)
- below (alaosa)
- border (kaikki reunat)
- box (kaikki reunat)
- lhs (vasen reuna)
- rhs (oikea reuna)
- void (ei reunoja)
- vsides (sivuilla)
- hsides (ylä- ja alapuolella)
- Talukon rivi: <tr></tr>
- Parametrit:
- align="vaakatasaus" (left, center, right)
- valign="pystytasaus" (baseline, bottom, middle, top)
- bgcolor="taustaväri"
- bordercolor="reunan väri"
- bordercolorlight="reunan 1. väri"
- bordercolordark="reunan 2. väri"
- Talukon solu: <tr></tr> tai <th></th>
- <tr> normaali solu
- <th> otsikkosolu
- Parametrit:
- align="vaakatasaus" (left, center, right)
- valign="pystytasaus" (baseline, bottom, middle, top)
- bgcolor="taustaväri"
- background="taustakuvan URL"
- colspan="vaakasuunnassa yhdistettävät solut" (kokonaisluku, esim. 2)
- rowspan="pystysuunnassa yhdistettävät solut"
- width="solun leveys" (pistettä tai prostenttia, esim. "200" tai "50%")
- height="solun korkeus" (pistettä tai prosenttia)
- nowrap (ei tekstin kierrätystä)
Esim. 2x2 taulukko
<table>
<tr>
<th>otsikkosolu 1. rivillä</th>
<td>toinen solu 1. rivillä</td>
</tr>
<tr>
<td>toisen rivin 1. solu</td>
<td>toisen rivin 2. solu</td>
</tr>
</table>
FrontPage: Hiiren oikea -> Hyperlinkki... , Hyperlinkin ominaisuudet... , Kirjanmerkin ominaisuudet... ; työkalurivi; Lisää-valikko -> Kirjanmerkki..., Hyperlinkki...
Määrittely: <a></a>
Parametrit:
- href="linkin kohde" (esim. joku.html, http://serveri.jossain.com/, #loppuun)
- name="ankkurin nimi", id="ankkurin nimi" (esim. name="loppuun")
- target="kohdekehys"
- _blank (avaa kohteen uuteen ikkunaan)
- _parent (avaa emoikkunaan)
- _self (nykyinen ikkuna)
- _top (avaa kohteen samaan, mutta kehystämättömään ikkunaan)
- tabindex="tabulaattorin ohjaus" (esim. tabindex="1". Tabulaattoria painettaessa valinta siirtyy ensin indeksiin 1, sitten 2 jne.)
Esim.
<a href="linkki.html#kirjanmerkki1">Tsekaa linkki</a>
<a name="kirjanmerkki1">Tämä on määritelty kirjanmerkiksi</a>
FrontPage: Työkalurivi; Lisää-valikko -> Kuva -> Clipart, Tiedostosta
Määrittely: <img>
Parametrit:
- src="kuvan osoite" (esim. "ukko.gif", "foto.jpg")
- lowsrc="heikkotasoisemman latauskuvan osoite" (esim. "ukko_lataus.gif")
- alt="oletusteksti" (esim. "ukkelin kuva")
- align="tasaus" (left, center, right, top, texttop, absmiddle,
middle, absbottom, bottom, baseline)
- width="kuvan leveys" (pistettä, prosenttia)
- height="kuvan korkeus" (pistettä, prosenttia)
- border="reunan paksuus" (pistettä)
- hspace="lisätila kuvan vas. ja oik. reunoilla" (pistettä)
- vspace="lisätila kuvan ylä- ja alareunoilla" (pistettä)
- usemap="asiakaspohjainen karttatiedosto" (ks. <map> elementti)
- ismap="palvelinpohjainen karttatiedosto"
- name="kuvan nimi"
(asiakaspohjainen kartta)
FrontPage: Valitse kuva -> kuvatyökalupalkki (kohdepisteet)
Kartan määrittely: <map></map>
Parametri: name="kartan nimi"
Kartan alueen määrittely: <area>
Parametrit:
- name="alueen nimi"
- coords="koordinaatit" (esim. laatikko: coords="0,0,199,99" (x1,y1,x2,y2), ympyrä:
coords="150,150,200" (x,y,säde), monikulmio: coords="x1,y1,x2,y2,x3,y3,...)
- shape="alueen muoto" (rect=laatikko, circle=ympyrä, poly=monikulmio,
default=koko kuva)
- href="linkki"
- nohref="linkki ei-määriteltyyn alueeseen"
- target="ikkunan nimi"
- alt="oletusteksti"
- tabindex="tabulaattorin indeksi" (ks. ankkuri eli linkki)
Esimerkki:
<map name="alue1">
<area href="linkki.html" shape="rect" coords="10,20,190,156">
</map>
<img src="linkkikuva.gif" usemap="#alue1">
Esimerkissä kuvassa linkkikuva.gif käytetään alue1-nimistä laatikkoa, joka määrittelee kuvasta alueen, jonka koordinaatit kuvan suhteen ovat (10,20)-(190,156), linkiksi.
FrontPage: Lisää-valikko -> Lomake -> Lomake
Lomakkeen määrittely: <form></form>
Parametrit:
- action="osoite" (esim. mailto:hemmo@osoite.com)
- method="lähetystyyppi" (get, post (post=oletusarvo))
- name="lomakkeen nimi" (esim. postilomake)
- target="kohdekehys"
Esimerkki:
<form action="mailto:hemmo@osoite.com" method="post">
...
</form>
FrontPage: Lisää-valikko -> Lomake -> Yhden rivin muokkauskenttä, Vieritettävä muokkausruutu, Valintaruutu, Valintanappi, Avattava luetteloruutu, Painike, Kuva, Selite
Lomakkeen kentät tulevat <form></form> alueen sisään, kuten koko dokumentti <body></body> alueen sisään.
Määrittely: <input>
Parametrit:
- type="syötteen tyyppi"
- button (nappi), parametrit name="napin nimi", value="napin teksti" (esim. <input type="button" name="nappi1" value="Paina nappia">)
- checkbox (valintarasti), parametrit: checked (ruutu rastittu), name="nimi" (esim. <input type="checkbox" name="ruksi1" checked>)
- image (kuva), parametrit: align="tasaus", name="nimi", src="kuvan osoite", border="kuvan kehys" (esim. <input type="image" border="4" src="../email.gif" name="kuva1">)
- text (teksti), parametrit: name="nimi", value="teksti", size="leveys", maxlength="maksimipituus syötteessä" (esim. <input type="text" name="teksti1" size="20" value="Tämä teksti näkyy">)
- password (salasana), kuten text-parametri
- radio (radionappi), parametrit: checked (valittuna), name="painikeryhmän nimi", value="nimi" (esim. <input type="radio" name="radioryhma1" value="nappi1" checked><input type="radio" name="radioryhma1" value="nappi2">)
- reset (lomakkeen tyhjäys), parametrit: name="nimi", value="napin teksti" (esim. <input type="reset" value="tyhjäys!" name="resetointi">)
- submit (lomakkeen lähetys), parametrit: kuten reset. Submit-nappi lähettää lomakkeen tiedot <form> tagissa method- ja action-parametreillä määritellyn mukaan. esim.
<form action="hemmo@osoite.fi" method="post" >
<input type="text" size="20" name="teksti">
<input type="submit" value="lähetä">
<input type="reset" value="tyhjennä">
</form>
Määrittely: <select><option></option>...<option></option></select>
- <select></select> määrittelee pudotusvalikon
- <option></option> määrittelee valikon valinnan
Parametrit (<select>):
- name="nimi" (nimi)
- multiple (monivalinta)
- size="rivien määrä"
- align="tasaus"
Parametrit(<option>):
esim.
<select size="10">
<option>valinta1</option>
<option>valinta2</option>
</select>
Määrittely: <textarea></textarea>
Parametrit:
- cols="kentän leveys merkkeinä"
- rows="kentän korkeus riveinä"
- size="fyysinen koko"
- name="nimi"
- align="tasaus"
- wrap (tekstin kierrätys reunoilta)
Esim. <textarea cols="20" rows="10" wrap>Tämä teksti on kentän sisällä</textarea>
Määrittely: <button></button>
Parametrit:
- name="nimi"
- value="napin arvo"
- type="napin tyyppi" (button, reset, submit)
Esim. <button type="button"><img src="kuva.gif"><b>P</b>aina <i>nappia</i></button>