« Koulutusresurssit

HTML-pikaohje

HTML-tulee sanoista "Hypertext Markup Language" - hypertekstin merkintäkieli. Merkintä on tapa lisätä dokumenttiin ohjeita tekstin muotoilusta, kuvien lisäämisestä ja hyperlinkkien muodostamisesta. Dokumentin muotoiluohjeet kirjoitetaan kulmasulkujen < > sisälle. Jotkut koodeista toimivat pareina, jolloin varsinainen tekstielementti jää koodien väliin: ensimmäinen koodi kertoo mistä määrittely alkaa ja jälkimmäinen mihin se loppuu, esim. <H1>Otsikko</H1>. Toiset koodit pärjäävät ilman paria, kuten kappaleenvaihto <P>. Seuraavassa joitakin yleisimpiä muotoilukomentoja.

OTSIKOT
<H1>Tämä on ylimmän tason otsikko</H1>
<H2>Tämä on toisen tason otsikko</H2>
<H3>Tämä on kolmannen tason otsikko</H3>
<H4>Tämä on neljännen tason otsikko</H4>
<H5>Tämä on viidennen tason otsikko</H5>
<H6>Tämä on kuudennen tason otsikko</H6>

LIHAVOINTI
<B>Tämä on lihavoitua tekstiä.</B>

KURSIVOINTI
<I>Tämä on kursivoitua tekstiä.</I>

KESKITYS
<CENTER>Tämä on keskitetty</CENTER>

RIVIN VAIHTO
<BR>

KAPPALEEN VAIHTO
<P>Tämä kappale jatkuu kunnes seuraava alkaa tai tämä kappale loppuu.</P>

VAAKAEROTIN
<HR>

LISTAT

HTML-koodi

Lista näyttää selaimessa seuraavalta:

<UL>
<LI TYPE=DISC>Appelsiineja
<LI TYPE=DISC>Mansikoita
<LI TYPE=DISC>Vadelmia
</UL>
  • Appelsiineja
  • Mansikoita
  • Vadelmia

 

<OL>
<LI>Appelsiineja
<LI>Mansikoita
<LI>Vadelmia
</OL>
  1. Appelsiineja
  2. Mansikoita
  3. Vadelmia

Luettelojen sisentäminen

<UL>
<LI>Sisennetty lista:
<UL>
<LI>Sisennetyn listan eka rivi.
<LI> Sisennetyn listan toka rivi.
</UL>
<LI>Listan toinen rivi
<LI>Listan kolmas rivi
</UL>
  • Sisennetty lista:
    • Sisennetyn listan eka rivi.
    • Sisennetyn listan toka rivi.
  • Listan toinen rivi
  • Listan kolmas rivi

VALMIS MUOTOILU
<PRE>Tämä teksti on valmiiksi muotoiltua: [...monta välilyöntiä, jotka säilyvät kun sivua katsotaan selaustilassa].</PRE>

KIRJASIMEN (FONTIN) KOON MÄÄRITTELY
<FONT SIZE=1>Tämä on pienellä painettua tekstiä </FONT>

KIRJASIMEN VÄRIN MÄÄRITTELY
<FONT COLOR="RED">Tämä on punaista tekstiä </FONT>

KIRJASIMEN TYYPIN MÄÄRITTELY
<FONT FACE="ARIAL">Tämä teksti on Arial-kirjasimella</FONT>

KUVAN SIJOITTAMINEN DOKUMENTTIIN
<IMG SRC="http://palvelimen nimi/hakemistopolku/kuvan nimi">

KUVAN TEKSTIN KIERRÄTYS
<IMG SRC="kuva" ALIGN="right">
<IMG SRC="kuva" ALIGN="left">
Jos tekstin kierto halutaan keskeyttää, annetaan komento <BR CLEAR=right> (joko left tai right)

KUVAN MARGINAALI
<IMG SRC="kuva"HSPACE=6 VSPACE=6> (kuvan ympärille tulee 6 pikselin levyinen tyhjä tila)

KUVAN KEHYS
<IMG SRC="kuva"BORDER=3> (komento piirtää kuvan ympärille kolmen pikselin levyisen, leipätekstin värisen kehyksen)

DOKUMENTIN LINKITYS
<A HREF="http://www.tievie.fi/"> TieVie-koulutuksen etusivu.</A>

SÄHKÖPOSTIOSOITTEEN LINKITYS
<A HREF="MAILTO:sähkö@posti.osoite">Linkkisana</A>

 

 

Virtuaaliyliopisto

Sivukartta

 Webmaster