Juha
Satu
Taru
Kati

Perheen tarina
Lasten albumi
Sivuston historia

Etusivu

Valid HTML 4.01!
Valid CSS!

HTML- opas

sisällysluettelo

yleistä

  • (HyperText Markup Language) on yksinkertainen kieli, jolla kuvataan tekstiä rakenteellisesti
  • käytetään eniten World Wide Web:ssä, mutta soveltuu muuhunkin
  • uusin versio on 4.01 - jää viimeiseksi versioksi, sillä XHTML tulee korvaamaan HTML-tekniikan
  • W3 -organisaation määrittelemä
  • Osa HTML:n ominaisuuksista hoidetaan nykyään CSS-tekniikalla mm. värien valinta, taulukoiden reunuksien koko, tekstin keskitys, fontti koon muuttaminen. CSS tuo myös uusia ominaisuuksia kuten marginaalien määrittämisen
  • käskyt kirjoitetaan < ja > -merkkien väliin
  • suurinosa käskyistä alkaa < ja > -merkeillä ja loppuvat </ ja > -merkkeihin esim. kursivointi <I>kursivoitua tekstiä</I>
  • voidaan luoda normaalilla tekstieditorilla (tiedoston pääte .html) » valmis dokumentti luetaan selaimella - edellinen esimerkki näyttää selaimessa tältä: kursivoitua tekstiä
  • <!-- tämä on kommentti HTML koodissa -->
  • HTML:ssä käytetyt termit:
    • <ELEMENTTI></ELEMENTTI>
    • <ELEMENTTI ATTRIBUUTTI1="arvo1" ATTRIBUUTTI2="arvo2"></ELEMENTTI>
  • HTML dokumentti alkaa tyypin määrittelyllä:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (Tiukka - ei salli vanhentuneita elementtejä/attribuutteja)
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (Laajennettu - sallii vanhentuneet elementit/attribuutit)
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framset//EN"> (Kehyksiä varten)

Rakenne:

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<HTML>
	<HEAD><TITLE>dokumentin nimi</TITLE></HEAD>
	<BODY>
		itse dokumentti
	</BODY>
	</HTML>

tekstit

otsikot

<H1>Otsikko 1 - ISOIN</H1>

<H2>Otsikko 2 - pienempi kuin edellinen</H2>

<H3>Otsikko 3 - pienempi kuin edellinen</H3>

<H4>Otsikko 4 - pienempi kuin edellinen</H4>

<H5>Otsikko 5 - pienempi kuin edellinen</H5>
<H6>Otsikko 6 - pienempi kuin edellinen</H6>
kappaleet

<P>näiden merkkien väliin kirjoitetaan tekstien kappaleet</P>

DIV-elementti

<DIV>toimii samoin kuten kappaleet, mutta ei aiheuta rivinvaihtoja</DIV>

esimuotoiltu teksti
<PRE>
Tässä   on   esimuotoiltua
	tekstiä!
	!
		!
</PRE>
korostettu teksti
<B>boldia</B>, <I>italicia</I>, <U>alleviivattua</U>, <S>yliviivattua</S>
muuta
HR-elementti tekee poikki viivan:
Pakotettu rivinvaihto saadaan BR-elementillä
x<SUP>2</SUP>alaindeksi<SUB>1</SUB>

luettelot

järjestetyt luettelot
<OL>
<LI>valitse
<LI>muokkaa
<LI>tarkista
</OL>
näyttää selaimessa seuraavalta:
  1. valitse
  2. muokkaa
  3. tarkista
<OL START=3 TYPE=A>
<LI>valitse
<LI>muokkaa
<LI>tarkista
</OL>
näyttää selaimessa seuraavalta:
  1. valitse
  2. muokkaa
  3. tarkista
TYPE-attribuutilla annetaan joko 1 / A / a / I / i
START-attribuutilla annetaan aina luku 1...n
järjestämättömät luettelot toimivat samalla tavalla kuin järjestetyt luettelot vain <OL> korvataan <UL>:llä
  • <UL TYPE=disc>
    • <UL TYPE=square>
      • <UL TYPE=circle>
      • luetteloa voidaan käyttää ilman määrättyä TYPE-attribuuttia, jolloin selain määrää käytettävän tyypin
      • luetteloja voidaan upottaa sisäkkäin, kuten yllä on tehty
määritysluettelot
luettelon käytössä käytetään DL-elementtiä, jonka sisään laitetaan otsikoita DT-elementeillä ja otsikoiden määritelmiä DD-elementeillä. Esimerkki määritysluettelosta:
<DL>
<DT>HTML
<DD>HyperText MarkupLanguage
<DT>HTTP
<DD>HyperText Transfer Protocol
</DL>

Selaimessa luettelo näyttää tältä:

HTML
HyperText MarkupLanguage
HTTP
HyperText Transfer Protocol

taulukot

<TABLE BORDER=1>
<TR><TH COLSPAN="4">Solujen otsikko</TH></TR>
<TR><TH ROWSPAN="3">tässä</TH><TD>solu</TD><TD>toinen</TD><TD>kolmas</TD></TR>
<TR><TD>solu</TD><TD>toinen</TD><TD>kolmas</TD></TR>
<TR><TD>solu</TD><TD>toinen</TD><TD>kolmas</TD></TR>
</TABLE>
näyttää tältä:
Solujen otsikko
tässäsolutoinenkolmas
solutoinenkolmas
solutoinenkolmas
pelkkä TABLE-elementti ilman BORDER-attribuuttia
Solujen otsikko
tässäsolutoinenkolmas
solutoinenkolmas
solutoinenkolmas
<TABLE BORDER=1 CELLPADDING=8>
Solujen otsikko
tässäsolutoinenkolmas
solutoinenkolmas
solutoinenkolmas
<TABLE BORDER=1 CELLSPACING=8>
Solujen otsikko
tässäsolutoinenkolmas
solutoinenkolmas
solutoinenkolmas
<TABLE BORDER=1 WIDTH=400>
Solujen otsikko
tässäsolutoinenkolmas
solutoinenkolmas
solutoinenkolmas
<TABLE BORDER=1 WIDTH="50%">
Solujen otsikko
tässäsolutoinenkolmas
solutoinenkolmas
solutoinenkolmas

kuvat

kuvien lisääminen tekstiin:
<IMG SRC="kuva.jpg">
<IMG SRC="pict.gif" ALT="latausteksti">
<IMG SRC="kuva.jpg" ALT="tätä kuvaa ei ole palvelimella!!!" HEIGHT="160" WIDTH="120">
tätä kuvaa ei ole palvelimella!!!
kuvakartat:
<img border=0 src="kuvakartta.gif" width="200" height="116" alt="Kuvakartta" ismap usemap="#kuva">
<map name="kuva">
<area shape="rect" href="kuvakartta-1.txt" alt="Linkki 1" coords="40,3,153,40">
<area shape="rect" href="kuvakartta-2.txt" alt="Linkki 2" coords="6,56,92,114">
<area shape="rect" href="kuvakartta-3.txt" alt="Linkki 3" coords="94,56,180,114">
</map>
Kuvakartta Linkki 1 Linkki 2 Linkki 3

linkit

Linkki HTML:stä kuvaan: <A HREF="kuva.jpg">linkkisana</A>
Linkki kuvasta kuvaan: <A HREF="kuva.jpg"><IMG SRC="linkkikuva.jpg"></A>
Linkki HTML:stä HTML:ään: <A HREF="dokumentti.html">linkkisana</A>
Halutessa linkki HTML:n toiseen kohtaan <A HREF="#dokumenttin_kohta">linkkisana</A>
HUOM! Risuaita HREF:n jälkeen!
Tarvitaan myös halutussa kohdassa määrittely: <A NAME="dokumenttin_kohta"> tekstiä... </A>
Linkki HTML:stä toisen HTML:n tiettyyn kohtaan: <A HREF="dokumentti.html#kohta">linkkisana</A>

lomakkeet

Lomakkeissa on käyttökelpoista käyttää taulukoita siistin ulkoasun saamiseksi:

<FORM ACTION="lomake_ok.txt" METHOD=get>
<TABLE BORDER=0>
<TR><TD>Tunnus:</TD> <TD><INPUT TYPE=text NAME=id SIZE=20></TD></TR>
<TR><TD>Otsikko:</TD> <TD><INPUT TYPE=text NAME=hd SIZE=35></TD></TR>
<TR><TD>Viesti:</TD> <TD><TEXTAREA NAME=msg ROWS=8 COLS=35></TEXTAREA></TD></TR>
</TABLE>
<INPUT TYPE=submit VALUE=OK>
</FORM>

Tunnus:
Otsikko:
Viesti:

kehykset

Kehyksiä ei suositella käytettäväksi, koska niiden kanssa joudutaan mm. seuraavaan ongelmaan: kävijä voi tulla sivulle johonkin kehykseen, jolloin hänen navigointi kehys ei näy => kävijä toteaa, että onpa suppeat sivut ja poistuu. Kehykset koostuvat useasta dokumentista, jossa yksi HTML-tiedosto kertoo miten muut dokumentit esitetään ruudulla. Tämä dokumentin "emo dokumentti" näytti jossain vaiheessa tältä:
  1. <HTML>
  2. <HEAD>
  3. <TITLE>HTML-opas</TITLE>
  4. </HEAD>
  5. <FRAMESET COLS="11%,89%">
    • <FRAME SRC="HTML_.html" NAME="HTML_">
      <FRAME SRC="HTML.html" NAME="HTML">
  6. </FRAMESET>
  7. </HTML>

    Rivit 1-4 ovat kuten kaikissa HTML-dokumenteissa, mutta rivillä viisi on FRAMESET-elementti, joka on korvannut BODY-elementin.
Kuinka voidaan tehdä useampi ikkunoita ROWS ja COLS attribuuteilla?
Miten dokumentti voidaan näyttää ruudulla vaikkei selain tue kehyksiä?
  • <FRAMESET ROWS="30%,70%">
    • <FRAMESET COLS="20%,80%">
      • <FRAME SRC="xx.html" NAME="xx">
        <FRAME SRC="yy.html" NAME="yy">
      </FRAMESET>
      <FRAME SRC="zz.html" NAME="zz">
    <NOFRAMES>
    • <BODY>
      • Tämä teksti näkyy vain, jos kehyksiä ei voida näyttää!!!
      </BODY>
    </NOFRAMES>
    </FRAMESET>
Linkkiä klikkattaessa toisessa kehykseksessä vaihtuu dokumentti/dokumentin kohta:
  • <HTML>
    <HEAD>
    <TITLE>HTML-oppaan linkit</TITLE>
    </HEAD>
    <BODY BGCOLOR=silver>
    <H2>HTML-opas</H2>
    <UL>
    • <LI><A TARGET=HTML HREF="HTML.html#yleista">yleistä</A>
      <LI><A TARGET=HTML HREF="HTML.html#tekstit">tekstit</A>
      <LI><A TARGET=HTML HREF="HTML.html#luettelot">luettelot</A>
    </UL>
    </BODY>
    </HTML>
HUOM! linkkien kohde kehys on kerrottu TARGET-attribuutilla (nimi määritellään "emo dokumentissa")
Kehyksistä päästään eroon laittamalla TARGET-attribuuttiksi teksti "_top"
<A TARGET="_top" HREF="../index.html">POIS KEHYKSISTÄ</A>

symbolit

  &nbsp; välilyönti, jota ei saa katkaista kahdelle riville
å &aring;
ä &auml;
ö &ouml;
Å &Aring;
Ä &Auml;
Ö &Ouml;
© &copy; copyright
® &reg; registered
& &amp;
" &quot;
§ &sect;
™ &trade;
 
Matemaattisia merkintöjä:
ƒ &fnof; funktio
< &lt;
> &gt;
± &#177; +/- merkki (toimii!!!)
¼ &frac14;
½ &frac12;
¾ &frac34;
¹ &sup1;
² &sup2;
³ &sup3;
µ &micro; mikro
× &times; kertomerkki
÷ &divide; jakomerkki
Ø &Oslash; tyhjä joukko
∅ &empty; tyhjä joukko (virallinen)
ℑ &image;
ℜ &real;
∀ &forall;
∃ &exist;
∈ &isin;
∉ &notin;
∋ &ni;
√ &radic;
∞ &infin;
∠ &ang;
∧ &and;
∨ &or;
∩ &cap;
∪ &cup;
∫ &int;
∼ &sim;
≅ &cong;
≈ &asymp;
≠ &ne;
≡ &#8801;
≤ &le;
≥ &ge;
⊂ &sub;
⊃ &sup;
⊄ &nsub;
⊆ &sube;
⊇ &supe;
⊥ &perp;
⋅ &sdot;
‰ &permil;
° &deg;
 
Kreikkalaisia kirjaimia:
Α &Alpha; α &alpha;
Β &Beta; β &beta;
Γ &Gamma; γ &gamma;
Δ &Delta; δ &delta;
Ε &Epsilon; ε &epsilon;
Ζ &Zeta; ζ &zeta;
Η &Eta; η &eta;
Θ &Theta; θ &theta;
Λ &Lambda; λ &lambda;
Μ &Mu; μ &mu;
Ξ &Xi; ξ &xi;
Π &Pi; π &pi;
Ρ &Rho; ρ &rho;
Σ &Sigma; σ &sigma;
Τ &Tau; τ &tau;
Φ &Phi; φ &phi;
Ψ &Psi; ψ &psi;
Ω &Omega; ω &omega;
 
Nuolet:
← &larr; ⇐ &lArr;
↑ &uarr; ⇑ &uArr;
→ &rarr; ⇒ &rArr;
↓ &darr; ⇓ &dArr;
↔ &harr; ⇔ &hArr;
↵ &crarr;
« &laquo;
» &raquo;
 
Muita Symboleja:
¡ &iexcl;
¢ &cent;
£ &pound;
¤ &curren;
¥ &yen;
¦ &brvbar;
¨ &uml;
ª &ordf;
¬ &not;
­ &shy;
¯ &macr;
´ &acute;
&para;
· &middot;
¸ &cedil;
º &ordm;
¿ &iquest;
€ &euro;