Harjoitus 2https://peda.net/id/c02f0462b2016-02-16T10:01:43+02:00https://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>
Kuvien ja hyperlinkkien lisääminenhttps://peda.net/id/eb467f40b2017-09-05T08:56:55+03:00Tuotetun dokumentin pitää olla hyvin muodostettu, ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.<br/>
<br/>
<em>Väärin:</em><br/>
<p>Tuotetun <strong>dokumentin pitää olla hyvin muodostettu.</p></strong><br/>
<br/>
<em>Oikein:</em><br/>
<p>Tuotetun <strong>dokumentin pitää olla hyvin muodostettu</strong>.</p><br/>
<ul>
<li>strong-elementti lihavoi tekstin.</li>
</ul>
<b> Ominaisuudet eli attribuutit<br/>
</b><br/>
Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät joitakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla:<br/>
<br/>
<a href="https://peda.net/p/henril/html/viikko-2/viikko-2/sieppaa-png2#top" title="Sieppaa.PNG"><img src="https://peda.net/p/henril/html/viikko-2/viikko-2/sieppaa-png2:file/photo/d55529f0eae3c71e879b2ea6699e3eecd588608a/Sieppaa.PNG" alt="" title="Sieppaa.PNG" class="inline" loading="lazy"/></a><br/>
<b>Hyperlinkit<br/>
<br/>
</b>a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman <br/>
dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.<br/>
<br/>
<a href="https://peda.net/p/henril/html/viikko-2/viikko-2/sieppaa-png3#top" title="Sieppaa.PNG"><img src="https://peda.net/p/henril/html/viikko-2/viikko-2/sieppaa-png3:file/photo/a116d4190990685e5f477815ad7e75235d8bfdb1/Sieppaa.PNG" alt="" title="Sieppaa.PNG" class="inline" loading="lazy"/></a><br/>
<a href="https://peda.net/p/henril/html/viikko-2/viikko-2/sieppaa-png4#top" title="Sieppaa.PNG"><img src="https://peda.net/p/henril/html/viikko-2/viikko-2/sieppaa-png4:file/photo/d3947d612fa63ba85c76e61bca4076a561ba7fb0/Sieppaa.PNG" alt="" title="Sieppaa.PNG" class="inline" loading="lazy"/></a><br/>
<b>Kuvan lisäys<br/>
<br/>
</b>Kuva täytyy tallentaa samaan kansioon, missä nettisivun tiedosto (index.html) sijaitsee. Kuva lisätään img-elementillä.<br/>
<br/>
<img src="traktori.jpg" alt="Traktori ajaa maantiellä" title="Traktori" /><br/>
<br/>
<ul>
<li><b>src</b>-ominaisuus. Ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistossa dokumentin kanssa.</li>
<li><b>alt</b>-ominaisuus. Attribuutti kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia.</li>
<li><b>title</b>-ominaisuus. Ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle.</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
2016-01-08T12:38:13+02:00Harjoitushttps://peda.net/id/420e915ab2017-09-10T18:33:38+03:001. Jatketaan samaa harjoitusta kuin viime tunnilla. Avaa XHTML-kansiosi.<br/>
<br/>
2. Tallenna netistä kuva Pasi-Anssista XHTML-kansioon.<br/>
<br/>
3. Lisää kuva uuden p-elementin sisään.<br/>
<br/>
4. Lisää kuvalle asiaankuuluva alt-ominaisuus.<br/>
<br/>
5. Lisää kuvalle asiaankuuluva title-ominaisuus<br/>
<br/>
6. Lisää yhteystietoihin Pasi-Anssin sähköpostiosoite (keksi se!). Tee sähköpostiosoitteesta mailto-linkki. mailto: on kirjoitettava itse viitetekstiin, kun kyse on sähköpostiosoitteista. Linkin pitäisi näyttää seuraavan kaltaiselta:<br/>
<span><br/>
<a href="mailto:henri.leinonen@laukaa.fi"> henri.leinonen@laukaa.fi </a><br/>
<br/>
</span>7. Tee Pasi-Anssin harrastuksista vähintään 3 eri linkkiä eri kotisivuille.<br/>
<br/>
8. Käytä vähintään yhdessä hyperlinkissä title-ominaisuutta.<br/>
<br/>
9. Tallenna tekstitiedosto ja tarkastele sitä Internet-selaimessa.<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/f6jgL4A0xJI?rel=0" allowfullscreen="allowfullscreen"></iframe><br/>
<br/>
<br/>
2016-01-11T12:51:24+02:00