2. Tagithttps://peda.net/id/7357260c0e02016-11-21T20:46:09+02:00https://peda.net/:static/535/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-koodaaminenhttps://peda.net/id/7357c03a0e02016-11-21T21:26:07+02:00HTML-koodissa komennot kirjoitetaan tageina. Tagit kirjoitetaan nuolisulkeisiin ja ne lopetetaan kauttaviivalla (/).<br/>
Esimerkiksi tekstikappaleen (<em>p</em>), jossa on yksi lihavoitu (<em>b</em>) sana, koodi menee näin:<br/>
<br/>
<span class="center medium"><a href="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/koodi1-png#top" title="koodi1.png"><img src="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/koodi1-png:file/photo/0dfd9cf44d85aa45ea906e6a1cc558641e50ff2b/koodi1.png" alt="" title="koodi1.png" class="inline" loading="lazy"/></a></span><br/>
Pohjatiedostossa on valmiina tagit <body> <em>...sisältö...</em> </body>. <span class="editor underline">Niiden väliin tulee kaikki sivuilla näkyvä sisältö.<br/>
<span class="center small"><a href="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/koodi2-png#top" title="koodi2.png"><img src="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/koodi2-png:file/photo/bf725fb12054c092dc93ef98ce99659cb13596e9/koodi2.png" alt="" title="koodi2.png" class="inline" loading="lazy"/></a></span></span>
<h3>Tarvittavia tageja</h3>
<br/>
<span><h1>...</h1> - <h6>...</h6> Otsikot<br/>
</span><p>...</p> Tekstikappale<br/>
<span><i>...</i> <em>Kursiivi</em></span><br/>
<span><b>...</b> <b>Lihavointi</b></span><br/>
<span><u>...</u> <span class="editor underline">Alleviivaus</span><br/>
<a ...>...</a> Ankkuri esim. linkeissä<br/>
</span><img... /> Kuva<br/>
<ul>...</ul> Järjestämätön lista<br/>
<span><ol>...</ol> Järjestetty lista<br/>
<li>...</li> Listan jäsen<br/>
<div>...</div> Sivun osiointi<br/>
<br/>
<b>Linkkilista</b> tehdään esimerkiksi näin:<br/>
<br/>
<span class="center medium"><a href="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/linkit-png#top" title="linkit.png"><img src="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/linkit-png:file/photo/d2e404647eac4b41ea06138d99f83aaed9acdc31/linkit.png" alt="" title="linkit.png" class="inline" loading="lazy"/></a></span><br/>
<br/>
<b>Kuvat</b> saa sivuille kun niihin viitataan kuvan nimellä. Mallissa sivulle piirtyisi kuva1. Kuvien tulee olla mielellään samassa kansiossa, jolloin niihin on helppo viitata.<br/>
<img src="kuva1.jpg" /><br/>
<br/>
<b>Listoista</b> on alla esimerkki.<br/>
<br/>
<span class="center medium"><a href="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/listat-png#top" title="listat.png"><img src="https://peda.net/siilinjarvi/ahmo/opiskelu/tietotekniikka/materiaali/html/5tehtava/tagit/html-koodaaminen/listat-png:file/photo/da6fb914167cdba5d7505e37abc3727b9c39dc13/listat.png" alt="" title="listat.png" class="inline" loading="lazy"/></a></span><br/>
Sivun <b>osiointi</b> käsitellään <a href="https://peda.net/id/735c66940e0">seuraavassa vaiheessa</a>.<br/>
</span><br/>
<br/>
2017-03-21T10:00:29+02:00