10. HTML Tietokone koodi muotoilu

HTML elementti <var> muuttujille

HTML elementti <var> määrittää muutujan.

Muuttuja voi olla matemaattinen ilmaisu, tai muuttuja ohjelmointi koodissa:

Esimerkki

Einstein kirjoitti: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

Lopputulos:

Einstein kirjoitti: E = mc².

HTML kielen tietokone koodi muotoilu

HTML kieli joskus käyttää vaihtelevia kirjainkokoja ja rivivälejä.

Tätä ei haluta jos meinaat esittää sivuillasi esimerkiksi tietokone koodia

HTML kielen elementit <kbd>, <samp>, ja <code> tukevat kaikki erilaisia rivinvälejä ja kirjainkokoja

HTML elementti <kbd> omaa näppäimistö syötettä varten

HTML elementti <kbd> määrittää miten naputtelet tekstin omalla tavallasi (Eli saat käyttää mitä tahansa erikoismerkkejä ja ne näkyvät oikein sivustollasi:

Esimerkki

<kbd>Tiedosto | aukesi...</kbd>

Lopputulos:

Tiedosto | aukesi...

HTML elementti <samp> tietokonekoodin julkaisua varten

HTML elementti <samp> määrittää tekstin näkymään tietokonekoodin samplena:

Esimerkki

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

Lopputulos:

demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

HTML elementti <code> ohjelmointikoodin näyttöä varten

HTML elementti <code> näyttää sivuillasi ohjelmointikoodia:

Esimerkki

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

Lopputulos:

var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y;

Muista kuitenkin että <code> elementti ei säilytä ylimääräisiä tyhjiä rivejä sekä rivinvaihtoa.

Korjataksesi tämän voit laittaa <code> elementin <pre> elementin sisälle:

Esimerkki

<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>

Lopputulos:

var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;