HTML perusteet

 

Teksti: Petri Pykil�
Julkaistu: 9.10.2000

Sis�llys:

  • Dokumentin rakenne
  • Otsikot
  • Kommentointi
  • Tekstin muotoilu
  • Tekstin korostus
  • Fontit

    Takaisin ohjelmointi-sivulle

    Dokumentin rakenne

  • HTML-dokumentti alkaa aina sivun m��rittelyll�, jota sitten noudatetaan. K�ytett�ess� esim. HTML4.0 m��rityksi�, tapahtuu se seuraavasti <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
  • Jokainen HTML-dokumentti alkaa komennolla <HTML> ja p��ttyy komentoon </HTML>.
  • HTML-dokumentin otsikkotiedot sis�llytet��n tagien <HEAD> ja </HEAD> v�liin.
  • HTML-dokumentin nimi kirjoitetaan tagien <TITLE> ja </TITLE> v�liin. Dokumentin nimi tulee n�kyviin selainikkunan otsikkoriville ja siten on suositeltavaa, ett� nimi kuvaisi mahdollisimman hyvin sivun sis�lt��.
  • Dokumentin sis�lt� (kuvat, linkit, tekstit yms.) sijoitetaan tagien <BODY> ja </BODY> v�liin. 
      <BODY>-tagin atribuutit

background = dokumentin taustakuva
bgcolor = taustav�ri
text = tekstin v�ri
link = linkin tekstin v�ri
vlink = k�ytetyn linkin tekstin v�ri
alink = aktiivisen linkin tekstin v�ri

    T�lt� n�ytt�� siis yksinkertainen kotisivu...

    <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>HTML PERUSTEET</TITLE>
</HEAD>
</BODY>
.
.
.
</BODY>
</HTML>

  • Otsikkotietoihin voi lis�t� META-informaatiota, joita mm.hakukoneet k�ytt�v�t indeksoidessaan kotisivuja. Atribuutit ovat
    • Author - kirjoittajan nimi
    • Description - Sivun kuvaus
    • Keywords - Sivun hakusanat
    • Refresh - Sivun p�ivitys (content-arvo on odotusaika sekunteina ja url-atribuutin sis�lt� osoite, jonne siirryt��n)

    Eli kokonaisuudessaan koodi n�ytt�isi t�lt� 

    <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>

<META NAME="author" CONTENT="Matti Meik�l�inen">
<META NAME="description" CONTENT="Heh..t�m�h�n on helppoa!">
<META NAME="keywords" CONTENT="Matti, Meik�l�inen, html, l�ytyy">
<META HTTP-EQUIV="refresh" CONTENT="5" URL="index2.html">

<TITLE>HTML PERUSTEET</TITLE>
</HEAD>
</BODY>
.
.
.
</BODY>
</HTML>

    [Yl�s] [Ohjelmointi-sivulle]

    Otsikot

    HTML:ss� on kuusi erilaista otsikkoa valmiina ja numerointi menee niin ett� pienin on isoin ja suurin numero on pienin otsikko. Otsikon j�lkeen tulee automaattisesti rivinvaihto. Tagi on muotoa <Hx>...</Hx>, jossa x tarkoittaa numeroa 1-6.

    <H1> otsikon koko

    <H2> otsikon koko

    <H3> otsikon koko

    <H4> otsikon koko

    <H5> otsikon koko
    <H6> otsikon koko

    [Yl�s] [Ohjelmointi-sivulle]

    Kommentointi

    My�s HTML-dokumenttiin voidaan lis�t� kommentointi. Kommentointi alkaa <!-- - merkill� ja loppuu --> merkkiin.

    esim.

    <!-- Hei, t�m�h�n ei n�y selaimessa! -->

    [Yl�s] [Ohjelmointi-sivulle]

    Tekstin muotoilu

    Teksti� voidaan muotoilla HTML-dokumentissa monella eri tavalla. Alla esitell��n k�ytett�viss� olevat muotoilutagit ja niiden muoto on <xx>...</xx>, jossa xx on tagi-elementti.

  • <ABBR>-elementti lyhennelmi� varten
  • <ACRONYM>-elementti akronyymej� varten
  • <BLOCKQUOTE>-elementill� merkit��n kokonaisen kappaleen lainaus
  • <CITE>-elementti sitaatteja varten
  • <CODE>-elementti� k�ytet��n esim. ohjelmointikoodin n�ytt�miseen
  • <DFN>-elementill� korostettua teksti� (m��rittelyihin)
  • <EM>-elementill� korostettua teksti�
  • <KBD>-elementill� korostetaan teksti�, jota selaajan tulisi sy�tt��.
  • <Q>-elementti lainauksia varten
  • <SAMP>-elementti esimerkkitulostusta varten
  • <STRONG>-elementti voimakkaampaan korostukseen
  • X<SUP>-elementti yl�indeksointiin
  • X<SUB>-elementti alaindeksointiin
  • <VAR>-elementill� korostetaan muuttujia yms.

    [Yl�s] [Ohjelmointi-sivulle]

    Tekstin korostus

    Alla on tekstin korostamiseen tarkoitetut tagit, jotka ovat muotoa <xx>...</xx>, jossa xx on tagi-elementti.

  • <B> - elementti n�ytt�� t�lt�
  • <BIG> - elementti n�ytt�� t�lt�
  • <I> - elementti n�ytt�� t�lt�
  • <S> - elementti n�ytt�� t�lt�
  • <SMALL> - elementti n�ytt�� t�lt�
  • <STRIKE> - elementti n�ytt�� t�lt�
  • <TT> - elementti n�ytt�� t�lt�
  • <U> - elementti n�ytt�� t�lt�

    [Yl�s] [Ohjelmointi-sivulle]

    Fontit

    <FONT> - elementill� m��ritell��n tekstin koko, v�ri ja fontti. Perusfontti voidaan muuttaa tagilla <BASEFONT>.

    Atribuutit: 
      size = Fontin koko
color = fontin v�ri
face = k�ytett�v� fontti esim. tahoma, arial yms.
    esim.
    <FONT SIZE="5" COLOR="blue" FACE="TAHOMA,ARIAL">....teksti� t�h�n.....</FONT>
    ja koodi n�ytt�� t�lt� selaimella...
    ....teksti� t�h�n....

    [Yl�s] [Ohjelmointi-sivulle]

    		•   
    Hosted by www.Geocities.ws

    1