Yleisimmät HTML-komennot

HTML-kielen komennoista löytyy kattava listaus esim. w3school -palvelun sivuilta. Käsittelemme tässä vain yleisimmät.

Tekstin muotoilu

<h1> teksti </h1> Pääotsikko, pienemmät otsikot (väliotsikot) <h2>, <h3>, <h4>, <h5>, <h6>
<p> teksti </p> Kappaleteksti (leipis)
<b> teksti </b> Tärkeä teksti, selain esittää sen yleensä lihavoituna, nykyisin yleensä käytään </strong> </strong> -komentoa.
<u> teksti </u> Selain esittää ko. tekstin alleviivattuna, nykyisin alleviivaus CSS-tyylien kautta.
<i> teksti </i> Selain esittää ko. tekstin kursivoituna, nykyisin kursivointi CSS-tyylien kautta.

Linkit ja kuvat

<a> linkkisana </a>

<a> -aloittaa aina linkkialueen. Komentoon lisätään myös minne linkki osoittaa. Se tulee href -määreellä. Voisi olla siis esim. <a href="http://www.validia-ammattiopisto.fi/"> tästä Validia Ammattiopiston sivuille </a>. Jos linkki halutaan avata uuteen ikkunaan, lisätään vielä määrite target="_blank", eli koko komento olisi

<a href="http://www.validia-ammattiopisto.fi/" target="_blank">

target määreitä on myös muita kuin _blank. Esim. _self avaa samaan ikkunaan (oletus). Muita vaihtoehtoja käytetään yleensä vain kehyksien (frames) kanssa. Niitä ei enää suositella käytettävän html:n kanssa, joten emme käsittele niitä. Linkki voidaan tehdä myös tiettyyn kohtaan sivua. Silloin siirryttävään kohtaan tehdään ns. ankkuri komennolla;

<a name="ankkurin_nimi"></a>

Tämän jälkeen ko. kohtaan voidaan linkittää

<a href="#ankkurin_nimi">linkkisana</a>, jos linkitetään toiselle sivulle, lisätään koko polku ennen #-merkkiä, eli esim. <a href="sivu2.html#ankkurin_nimi">
<img>

Komento voisi olla kokonaisuudessaan esim. seuraava:

<img src="images/kuntola.jpg" width="600" height="400" alt="kuvassa Kuntola">

src -määreellä kerrotaan mihin kuva on tallennettu, esimerkissä images -kansioon nimellä kuntola.jpg. width on kuvan leveys pikseleinä ja height kuvan korkeus. Lisäksi laitetaan alt="vapaamuotoinen teksti", joka näytetään kuvan tilalla jos kuvien näkyminen on estetty. Lisäksi esim. näkövammaisille tarkoitetut lukijat lukevat ko. tekstin kuvan kohdalla. <img> -komentoa ei tarvitse lopettaa.

Taulukko

<table> </table>

<table> komento aloittaa taulukon, </table> lopettaa sen. Komento voisi olla esim:

<table width="600" border="1" cellspacing="0" cellpadding="2">

Width on taulukon leveys pikseleinä, se voisi olla myös prosentteina, esim. 90%. Border -komennolla määritetään reunaviivan paksuus, arvolla 1 se on 1 px. Jos reunaviivaa ei haluta, annetaan arvoksi 0. Cellspacing määrittää taulukon solujen väliin tulevan tilan suuruuden pikseleissä ja cellpadding tekstin ja solun reunaviivan välisen etäisyyden. Cellspacing ja cellpadding ei ole enää HTML5 määrityksessä tuettuja, mutta silti yleisesti käytössä (niiden sijaan css -määritys border-spacing table komentoon tai padding solukomentoon).
<tr> </tr> Taulukon rivi. Rivejä voidaan myös yhdistää rowspan määreellä (katso lisää alempaa)
<th> </th> Taulukon otsikko solu (jos käytetään niin yleensä taulukon esimmäisellä rivillä, esitetään yleensä lihavoituna)
<td> </td> Taulukon solu. Soluja voidaan myös yhdistää colspan="x" määreellä (katso alempaa).

 

Alla esimerkki yksinkertaisen taulukon koodista:

<table width="600" border="1" cellspacing="0" cellpadding="2">
<tr>
<th colspan="3">Opiskelijamäärät vuosittain</th>
</tr>
<tr>
<td>2015</td>
<td>2016</td>
<td>2017</td>
</tr>
<tr>
<td>330</td>
<td>360</td>
<td>390</td>
</tr>
</table>

Ko. koodilla muodostettu taulukko näyttäisi tältä:

Taulukon soluja ja rivejä voidaan myös yhdistää colspan ja rowspan määreillä. Esim. alla oleva taulukko:

Tekstiä Myynnit
2015 2016
120 130

 

Syntyisi koodilla (kommentit punaisella):

<table width="50%" border="1" cellspacing="0" cellpadding="0"> - leveys 50%
<tr>
<td rowspan="3" valign="top">Tekstiä</td> - rowspan="3" yhdistää 3 päällekkäistä riviä, valign on pystytasaus
<td colspan="2" align="center">Myynnit</td> - colspan="2" yhdistää 2 vierekkäistä solua, align on vaakatasaus
</tr>
<tr>
<td>2015</td>
<td>2016</td>
</tr>
<tr>
<td>120</td>
<td>130</td>
</tr>
</table>

HTML5 ei tule enää monia määritteitä kuten bgcolor, height, width yms, joita ennen lisättiin taulukon soluihin. Nykyisin ne pitäisi määrittää CSS:n avulla.

Luettelomerkit

Luettelomerkit tai numerointi voidaan toteuttaa komennoilla <ol> (numeroitu lista), <ul> luettelomerkki ja <li> yksittäinen rivi luettelossa.

<p> Salaattiin voidaan laittaa esim: </p>
<ul>
<li>Appelsiini </li>
<li>Banaani </li>
<li>Omena </li>
</ul>

Salaattiin voidaan laittaa esim:

  • Appelsiini
  • Banaani
  • Omena

<p>Asennusjärjestys </p>
<ol>
<li>Tiivisteet </li>
<li>Kotelo </li>
<li>Ruuvit </li>
</ol>

Asennusjärjestys

  1. Tiivisteet
  2. Kotelo
  3. Ruuvit

Luettelomerkkien yms. muotoilu nykyisin CSS tyylien avulla.