HTML/Koodinäited

Tüüpiliselt on veebis arvutikoodi esitamiseks kasutatud pre elementi, mis tagab meile eelvormindatud teksti:

<pre>
for (int i=0; i&lt;max; i++){
    print i;
}
</pre>

Kuid HTML sisaldab ka elemente, mis on mõeldud just lähtekoodi jms tarbeks:

code - programmitekst. Näiteks regulaaravaldis <code>/^[a-z]+.[0-9]{2-8}/i</code>, funktsiooni nimi <code>preg_replace()</code> või ka pikem koodilõik <code>body { font-family: Verdana, Arial, Tahoma, sans-serif; color: white; background: url(/img/pat.png) repeat-x #f8c; }</code>.
kbd - (keyboard) kasutaja sisestatav tekst. Selleks võib olla näidistekst, mis kirjutatakse mõnda sisend-kasti <kbd>Leopold Lill</kbd>, käsureale kirjutatav käsk <kbd>ping 127.0.0.1</kbd> või ka lihtsalt klaviatuutil vajutatav klahv või nende kombinatsioon <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>.
samp - (sample) programmi vms näidisväljund. Näiteks võib elektronkella manuaalis olla kirjas: Kui ekraanile ilmub <samp>--:--</samp> vajavad kella patareid kohest vahetamist. Märksa tüüpilisem on selle elemendi kasutamine aga juhul, kui on tarvis demonstreerida mõne käsurealt töötava programmi väljundit - näiteks võib hädasolev isik kirjutada Mida tähendab veateade <samp>NameError: name 'close' is not defined</samp>?

Peamine erinevus pre elemendist on see, et neid saab kasutada ka muu teksti sees - nagu oli juba näha ka ülaltoodud näidetest. Kuid erinevalt pre-st ei loeta code, kbd ja sample sees sisalduvaid mitmekordseid tühikuid oluliseks. Näiteks kirjutades järgneva koodi:

Et saada tekst ekraani keskele, lisa koodi algusesse
rida tühikuid: <code>print "         Tekst";</code>

Brauseris kuvatakse seda aga topelt-tühikuid arvestamata:

Et saada tekst ekraani keskele, lisa koodi algusesse rida tühikuid: print " Tekst";

Sellisel juhul on kindluse mõttes vast parem kasutada pre elementi. Kuid seejuures võime ikkagi lisada ka code märgendid, et tähistada teksti kui programmikoodi. Võime aga minna veelgi kaugemale ja kirjutada sellise jutu:

<p>Salvestame faili "hello.sh"
järgneva koodijupi:</p>

<pre><code>
#!/usr/bin/bash

echo "Hello, world!";
</code></pre>

<p>Seejärel anname failile käivitamisõigused
(<kbd>chmod +x hello.sh</kbd>), ning paneme oma
tuliuue skripti käsurealt käima:</p>

<pre><samp>bash $ </samp><kbd>./hello.sh</kbd>
<samp>Hello, world!
bash $</samp>
</pre>

Tulemus:

Salvestame faili "hello.sh" järgneva koodijupi:
#!/usr/bin/bash

echo "Hello, world!";
Seejärel anname failile käivitamisõigused (chmod +x hello.sh), ning paneme oma tuliuue skripti käsurealt käima:
bash $ ./hello.sh
Hello, world!
bash $