| HTML-dokumentin (-sivu)
määrityksillä määritellään muun muassa dokumentin taustan, tekstien
jne. värit. Eli määritykset, jotka ovat voimassa sivulla olevalle tekstille, jos
tekstin joukossa ei erikseen määritellä muuta. Asiaa voi verrata Microsoft
Wordin oletusfonttiin eli tekstin tyyli, koko ja väri on jotakin, ellei muuta
määritellä.
Dokumentin määritykset alkavat käytetyn HTML-version
määrityksellä. Kaikki selaimet eivät tätä määritystä käytä
hyväkseen ja sivut näkyvät ilmankin alussa tehtävää määritystä. Alla
olevat mallit voivat näytön työpöydän koosta riippuen rivittyä kahdelle
riville. Kirjoita ne kuitenkin samalle riville koodatessasi HTML-dokumenttia.
Strict-määrityksellä dokumetista pitää
jättää pois kaikki virallisen HTML-määrityksen vastaiset elementit ja
attribuutit
<!DOCTYPE HTML "-/ /W3C/DTD HTML 4.0/ /EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
Loose-määrityksellä dokumenttiin voidaan
sisällyttää myös ei-suositeltavia elementtejä ja atrribuutteja.
<!DOCTYPE HTML "-/ /W3C/DTD HTML 4.0/ /EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Frameset-määrityksellä dokumenttiin voi
sisällyttää myös Loose-määrityksessä mainittujen asioiden ohella
kehykset. Kurssin harjoituksissa käytä tätä tapaa.
<!DOCTYPE HTML "-/ /W3C/DTD HTML 4.0/ /EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
Määrityksen jälkeen aloitetaan HTML-dokumentti HTML-elementillä.
Elementin lopetus </HTML>kirjoitetaan aivan viimeiseksi riviksi.
HTML-elementin jälkeen sijoitetaan
HEAD-elementti. HEAD-elementin väliin sijoitetaan vähintään
TITLE-elementti. Myös mahdolliset tyylimäärittelyt ja erilaisten
skripti-kielten komennot sijoitetaan HEAD-elemettiin.
TITLE-elementti pitää sisällänsä sivun
otsikon. Tämä ei tarkoita normaalia otsikkoa sivun tekstin yläpuolella, vaan
tekstiä, joka tulee näkyviin selainten otsikkopalkkiin. Nytkin voit katsoa
selaimesi sinistä otsikkopalkkia. Siellä näkyvä teksti on sijoitettu
tämän dokumentin TITLE-elementtiin. TITLE-elementti on siitä merkittävä,
että sen teksti jää myös näkymään suosikki-/bookmark-listaan. Samoin
monet hakupalvelut indeksoivat sivusi käyttämällä TITLE-tagia hyväksi.
esimerkki: <TITLE>otsikkoteksti</TITLE>
HEAD-elementin sisälle sijoitetaan myös mahdolliset META-elementit.
META-elementeillä voidaan määritellä sivun tekijä, käytetty editori,
hakusanoja, luokitus sivun aihealueesta ja sivun automaattinen vaihtaminen.
META-elementille ei ole lopetusta, vaan pelkkä META...... riittää.
Esimerkit:
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
Merkistön määrittely. Pakollinen validin HTML-koodin mukaan.
<META NAME="keywords" CONTENT="hakusanoja, joita, voi,
olla, paljon, pilkulla, erotettuna"> Eli hakusanat, joilla
kuvittelet käyttäjien etsivän sivuasi. Sanat erotetaan pilkulla toisistaan.
<META CONTENT="description"
CONTENT="Verkko-opetus"> Eli lyhyt kuvaus aihealueesta,
joihin sivut kuuluvat.
<META NAME="Author" CONTENT="Roy Viitanen">
Eli sivun tekijä
<META http-equiv="refresh"
content="6;URL=http://www.rpkk.fi"> Eli sivun automaattinen
vaihtaminen. Esimerkissä content-kohdan määritykset ilmoittavat selaimelle,
että kuuden sekunnin kuluttua siirry sivulle, jonka osoite on URL-kohdan
perässä. Tällä tavalla voit luoda vaikka PowerPoint-tyyppisen jatkuvasti
pyörivän esityksen. Sivulta 1 siirrytään sivulle 2, sivulta sivulle
3,............, sivulta 20 sivulle 1.
BODY-elementti pitää sisällänsä varsinaisen
sisällön, jota haluat sivulla esittää. BODY-elementtiin sisällytetään
attribuutit, joilla määritellään mm. sivun tausta, tekstin väri, linkkien
väri.
Malli HTML-dokumentista.
<! DOCTYPE HTML "-/ /W3C/DTD HTML 4.0/ /EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Mallisivu HTML:stä</TITLE>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<META NAME="Author" CONTENT="Roy Viitanen">
</HEAD>
<BODY>
Tämä osa on siis se varsinainen sisältö, mitä haluat muille
käyttäjille esittää.
</BODY>
</HTML>
BODY-elementin määritykset. Seuraavat
määritykset ovat aikaisempien HTML-versioiden mukaisia. Nykyään
suositellaan, että määritykset tehdään tyylipohjien avulla.
Atrribuutit:
BGCOLOR - Sivun taustan väri, joka on värikoodilla merkitty tai värin
englannin kielisellä nimellä esim. BGCOLOR="#FF0000" tai
BGCOLOR="red"
TEXT - Sivulla olevan tekstin värin määrittely. Periaate sama kuin
taustalle eli TEXT="#00FF00" tai TEXT="green"
LINK - linkkien värin määrittely, periaate edelleen sama kuin
edellä.
VLINK - linkkien väri silloin, kun ne vievät sivulle, jossa olet
käynyt juuri sillä tietokoneella ja selaimella tietyn ajan sisällä (IE
oletus 20 päivää ja Netscape oletus 9 päivää). Määritykset samalla
tavalla kuin edellä.
ALINK - linkkien väri silloin, kun painat hiiren korvan pohjaan linkin
päällä. Määritykset samalla tavalla kuin edellä.
BACKGROUND - Sivun taustakuva. BACKGROUND="kuva.gif" tai
BACKGROUND="kuva.jpg" eli sitaattien sisälle taustakuvan
tiedostonimi, jota haluat käyttää sivun taustalla. Edellytyksenä on se,
että olet tallentanut kuvan samaan kansioon htm-dokumentin kanssa. Jos haluat
järjestää palvelimelle erilaisen rakenteen kansioiden avulla eli vaikka
tehdä kuville oman kansionsa, niin katso kohta Linkit ja
hakemistot
Taustakuvamalleja
HUOM!. Kun BODY-elementillä määritellään
värejä, tulee elementtejä vain yksi sivulle eli elementin pituus
kasvaa, jos määrittelet useamman asian. Sama koskee myös kaikkia muitakin
määrityksiä, joita voit tehdä yhdelle elementille.
<BODY BGCOLOR="red"
TEXT="blue" LINK="green">
| Kooste: |
| Elementti |
Attribuutit
/ selitykset |
| <!DOCTYPE.....> |
Käytettävän
HTML-version määrittely. Ei lopetuselementtiä. |
| <HTML>
- </HTML> |
Dokumentin
aloitus ja lopetus |
| <HEAD>
- </HEAD> |
Dokumentin
otsikkolohko, sisältää TITLE-elementin, META-elementit ja skriptit |
| <TITLE>
- </TITLE> |
Dokumentin
otsikko. Näkyy selaimen otsikkopalkissa ja tallentuu Suosikit /
Bookmark-listaan. Sijoitetaan HEAD-elementtien väliin. |
| <META.....> |
Erilaisten
META-tietojen esittely dokumentissa. Ei lopetuselementtiä. Sijoitetaan
HEAD-elementtien väliin |
| <BODY>
- </BODY> |
Dokumentin
runko-osa. Näkyy selainikkunassa.
text - sivulla olevan tekstin väri
bgcolor - sivun taustan väri
link - sivulla olevien linkkien väri
alink - aktiivisen linkin väri
vlink - vieraillun linkin väri
background - sivun taustalle sijoitettava kuva |
|
![[IMAGE]](opasotsi2.gif){kind=small}