2. Tagit
HTML-koodaaminen
HTML-koodissa komennot kirjoitetaan tageina. Tagit kirjoitetaan nuolisulkeisiin ja ne lopetetaan kauttaviivalla (/).
Esimerkiksi tekstikappaleen (p), jossa on yksi lihavoitu (b) sana, koodi menee näin:
![koodi1.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/koodi1-png:file/photo/0dfd9cf44d85aa45ea906e6a1cc558641e50ff2b/koodi1.png)
Pohjatiedostossa on valmiina tagit <body> ...sisältö... </body>. Niiden väliin tulee kaikki sivuilla näkyvä sisältö.
<h1>...</h1> - <h6>...</h6> Otsikot
<p>...</p> Tekstikappale
<i>...</i> Kursiivi
<b>...</b> Lihavointi
<u>...</u> Alleviivaus
<a ...>...</a> Ankkuri esim. linkeissä
<img... /> Kuva
<ul>...</ul> Järjestämätön lista
<ol>...</ol> Järjestetty lista
<li>...</li> Listan jäsen
<div>...</div> Sivun osiointi
Linkkilista tehdään esimerkiksi näin:
![linkit.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/linkit-png:file/photo/d2e404647eac4b41ea06138d99f83aaed9acdc31/linkit.png)
Kuvat saa sivuille kun niihin viitataan kuvan nimellä. Mallissa sivulle piirtyisi kuva1. Kuvien tulee olla mielellään samassa kansiossa, jolloin niihin on helppo viitata.
<img src="kuva1.jpg" />
Listoista on alla esimerkki.
![listat.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/listat-png:file/photo/da6fb914167cdba5d7505e37abc3727b9c39dc13/listat.png)
Sivun osiointi käsitellään seuraavassa vaiheessa.
Esimerkiksi tekstikappaleen (p), jossa on yksi lihavoitu (b) sana, koodi menee näin:
![koodi1.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/koodi1-png:file/photo/0dfd9cf44d85aa45ea906e6a1cc558641e50ff2b/koodi1.png)
Pohjatiedostossa on valmiina tagit <body> ...sisältö... </body>. Niiden väliin tulee kaikki sivuilla näkyvä sisältö.
![koodi2.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/koodi2-png:file/photo/bf725fb12054c092dc93ef98ce99659cb13596e9/koodi2.png)
Tarvittavia tageja
<h1>...</h1> - <h6>...</h6> Otsikot
<p>...</p> Tekstikappale
<i>...</i> Kursiivi
<b>...</b> Lihavointi
<u>...</u> Alleviivaus
<a ...>...</a> Ankkuri esim. linkeissä
<img... /> Kuva
<ul>...</ul> Järjestämätön lista
<ol>...</ol> Järjestetty lista
<li>...</li> Listan jäsen
<div>...</div> Sivun osiointi
Linkkilista tehdään esimerkiksi näin:
![linkit.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/linkit-png:file/photo/d2e404647eac4b41ea06138d99f83aaed9acdc31/linkit.png)
Kuvat saa sivuille kun niihin viitataan kuvan nimellä. Mallissa sivulle piirtyisi kuva1. Kuvien tulee olla mielellään samassa kansiossa, jolloin niihin on helppo viitata.
<img src="kuva1.jpg" />
Listoista on alla esimerkki.
![listat.png](https://peda.net/jyu/it/koulutusteknologia/opintojaksot/TIES461/ah/harjoitusty%C3%B6t/heikkij/ohjelmointikokonaisuus2/tehtavat/5tehtava/tagit/html-koodaaminen/listat-png:file/photo/da6fb914167cdba5d7505e37abc3727b9c39dc13/listat.png)
Sivun osiointi käsitellään seuraavassa vaiheessa.