10. HTML Tietokone koodi muotoilu https://peda.net/id/c5a3104e134 2016-05-06T11:06:21+03:00 https://peda.net/:static/533/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> HTML elementti <samp> tietokonekoodin julkaisua varten https://peda.net/id/ec42b234134 2016-05-06T08:28:51+03:00 <p>HTML elementti <strong>&lt;samp&gt;</strong> määrittää tekstin näkymään tietokonekoodin samplena:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>samp<span>&gt;</span></span><br/> demo.example.com login: Apr 12 09:10:17<br/> Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189<br/> <span><span>&lt;</span>/samp<span>&gt;</span></span></div> <p>Lopputulos:</p> <div class="w3-code notranslate">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<br/> <br/> <h2>HTML elementti &lt;code&gt; ohjelmointikoodin näyttöä varten </h2> <p>HTML elementti <strong>&lt;code&gt;</strong> näyttää sivuillasi ohjelmointikoodia:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>code<span>&gt;</span></span><br/> var x = 5;<br/> var y = 6;<br/> document.getElementById(&quot;demo&quot;).innerHTML = x + y;<br/> <span><span>&lt;</span>/code<span>&gt;</span></span></div> <p>Lopputulos:</p> <div class="w3-code notranslate"><code>var x = 5; var y = 6; document.getElementById(&quot;demo&quot;).innerHTML = x + y;<br/> <br/> </code></div> </div> <p>Muista kuitenkin että &lt;code&gt; elementti ei säilytä ylimääräisiä tyhjiä rivejä sekä rivinvaihtoa.</p> <p>Korjataksesi tämän voit laittaa &lt;code&gt; elementin <strong>&lt;pre&gt;</strong> elementin sisälle:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>pre<span>&gt;</span></span><br/> <span><span>&lt;</span>code<span>&gt;</span></span><br/> var x = 5;<br/> var y = 6;<br/> document.getElementById(&quot;demo&quot;).innerHTML = x + y;<br/> <span><span>&lt;</span>/code<span>&gt;</span></span><br/> <span><span>&lt;</span>/pre<span>&gt;</span></span></div> <p>Lopputulos:</p> <div class="w3-code notranslate"> <pre>var x = 5; var y = 6; document.getElementById(&quot;demo&quot;).innerHTML = x + y;</pre> </div> </div> </div> </div> 2016-05-06T08:18:09+03:00 HTML elementti <var> muuttujille https://peda.net/id/ef75e8c0134 2016-05-06T08:32:34+03:00 <p>HTML elementti <strong>&lt;var&gt;</strong> määrittää muutujan.</p> <p>Muuttuja voi olla matemaattinen ilmaisu, tai muuttuja ohjelmointi koodissa:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh">Einstein kirjoitti: <span><span>&lt;</span>var<span>&gt;</span></span>E<span><span>&lt;</span>/var<span>&gt;</span></span> = <span><span>&lt;</span>var<span>&gt;</span></span>m<span><span>&lt;</span>/var<span>&gt;</span></span><span><span>&lt;</span>var<span>&gt;</span></span>c<span><span>&lt;</span>/var<span>&gt;</span></span><span><span>&lt;</span>sup<span>&gt;</span></span>2<span><span>&lt;</span>/sup<span>&gt;</span></span>.</div> <p>Lopputulos:</p> <div class="w3-code notranslate">Einstein kirjoitti: E = mc<sup>2</sup>.</div> </div> 2016-05-06T08:32:34+03:00 HTML kielen tietokone koodi muotoilu https://peda.net/id/a3b99df2134 2016-05-06T08:16:08+03:00 <p>HTML kieli joskus käyttää vaihtelevia kirjainkokoja ja rivivälejä.</p> <p>Tätä ei haluta jos meinaat esittää sivuillasi esimerkiksi tietokone koodia</p> <p>HTML kielen elementit <strong>&lt;kbd&gt;</strong>, <strong>&lt;samp&gt;</strong>, ja <strong>&lt;code&gt;</strong> tukevat kaikki erilaisia rivinvälejä ja kirjainkokoja</p> <h3>HTML elementti &lt;kbd&gt; omaa näppäimistö syötettä varten</h3> <p>HTML elementti <strong>&lt;kbd&gt;</strong> määrittää miten naputtelet tekstin omalla tavallasi (Eli saat käyttää mitä tahansa erikoismerkkejä ja ne näkyvät oikein sivustollasi:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>kbd<span>&gt;Tiedosto</span></span> | aukesi...<span><span>&lt;</span>/kbd<span>&gt;</span></span></div> <p>Lopputulos:</p> <div class="w3-code notranslate">Tiedosto | aukesi...</div> </div> 2016-05-06T08:16:08+03:00