https://peda.net/id/30de5318d 2016-02-11T21:25:38+02:00 https://peda.net/:static/539/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> https://peda.net/id/b361db46d 1970-01-01T02:00:00+02:00 <!--filtered tag: <article--><!--filtered attribute: id="uuid-267b85c2-f19c-11e5-8fa8-bc5ff4fb02f9"--><!--filtered attribute: class="link document uuid-267b85c2-f19c-11e5-8fa8-bc5ff4fb02f9 enclose"--><!--filtered attribute: data-id="267b85c2-f19c-11e5-8fa8-bc5ff4fb02f9"--><!--filtered attribute: data-draft-type="published"--><!--&gt;--><!--filtered tag: <header--><!--&gt;--><h1><!--filtered attribute: class="link"--><a href="http://www.w3schools.com/css/default.asp" title="http://www.w3schools.com/css/default.asp (avautuu uuteen ikkunaan)" target="_blank" rel="nofollow ugc noopener">CSS-tyylit (w3schools.com)</a></h1> <!--filtered end tag: </header>--><div class="main"></div> <!--filtered tag: <footer--><!--&gt;--><!--filtered end tag: </footer>--><!--filtered end tag: </article>--> <!--filtered tag: <article--><!--filtered attribute: id="uuid-bf206740-d3ae-11e5-9cb4-bc5ff4fb02d1"--><!--filtered attribute: class="link document uuid-bf206740-d3ae-11e5-9cb4-bc5ff4fb02d1 enclose"--><!--filtered attribute: data-id="bf206740-d3ae-11e5-9cb4-bc5ff4fb02d1"--><!--filtered attribute: data-draft-type="published"--><!--&gt;--><!--filtered tag: <header--><!--&gt;--><h1><!--filtered attribute: class="link"--><a href="http://www.w3schools.com/tags/default.asp" title="http://www.w3schools.com/tags/default.asp (avautuu uuteen ikkunaan)" target="_blank" rel="nofollow ugc noopener">HTML-tagit (w3schools.com)</a></h1> <!--filtered end tag: </header>--><div class="main"></div> <!--filtered tag: <footer--><!--&gt;--><!--filtered end tag: </footer>--><!--filtered end tag: </article>--> 2016-02-15T08:38:19+02:00 https://peda.net/id/ce8acad6f1a 2016-03-24T11:43:04+02:00 <p>Mikäli ä ja ö näkyvät sivulla erikoisen näköisinä, niin kirjoita allaoleva koodi <b>head</b>-elementtien sisään.</p> <p>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;</p> 2016-03-24T11:43:04+02:00 https://peda.net/id/30e0d336d 2016-02-11T11:42:57+02:00 Suunnittele ja tee yksinkertainen www-sivu (kuten CHL-esimerkkisivu mestareiden liigasta), käytä mielikuvitustasi. Sivu voi olla esim.<br/> <ul> <li>SM-Liigasta tai muutamasta sen joukkueesta, Englannin valioliigasta, salibandyliigasta tai jostain urheiluseurasta</li> <li>Moottoripyöristä</li> <li>Muutamasta bändistä, artistista tai vaikka kitaroista</li> <li>Mieliharrastuksistasi</li> <li>Laivoista</li> <li>Merkittävimmistä keksinnöistä</li> <li>jne. mitä mieleen tulee.</li> </ul> <br/> Tallenna sivu omaan kansioosi .html -muodossa kuvaavalla nimellä (esimerkiksi chl.html).<br/> <br/> <h3>Sivulla täytyy olla...</h3> <ul> <li>Eri otsikkotasoja (<b>h1,h2,h3</b>) ja kappaleita (<b>p</b>). Huom! Kappaleissa täytyy olla myös tekstiä (saat etsiä myös netistä, mutta sen täytyy olla sivustoon sopivaa ja oman näköistä)</li> <li>Vähintään 1 kuva. Huom! Kuvien tulee olla tallennettuna samaan kansioon kuin html-tiedostosi. (Muokkaa kuvia tarvittaessa esim. Irfanview-ohjelmalla)</li> <li>Vähintään 1 linkki</li> <li>Tekijän tiedot (esim. nimi ja päivämäärä) address-elementillä</li> </ul> <h3>Sivun täytyy olla...</h3> <ul> <li>Hyvin suunniteltu <ul> <li>Esim. otsikointi on järkevästi tehty ja sivun rakenne on selkeä</li> <li>Suunnittele sivun runko ensin paperille</li> </ul> </li> <li>Visuaalisesti tyylikäs ja hillitty <ul> <li>Esimerkiksi fonttien värit täytyy olla valittu siten, että ne erottuvat hyvin taustasta</li> </ul> </li> </ul> 2016-02-11T21:25:20+02:00 https://peda.net/id/30e1b936d 2016-02-11T20:57:42+02:00 <span class="medium"><a href="https://peda.net/kuopio/p/puijonsarvi/oppiminen/luokat-ja-oppiaineet/tietotekniikka/8-lk/www-sivut-html/hp/perusrunko-jpg2#top" title="perusrunko.jpg"><img src="https://peda.net/kuopio/p/puijonsarvi/oppiminen/luokat-ja-oppiaineet/tietotekniikka/8-lk/www-sivut-html/hp/perusrunko-jpg2:file/photo/d47b16bf08b5be35d670cc0631139aa401470c79/perusrunko.jpg" alt="" title="perusrunko.jpg" class="inline" loading="lazy"/></a></span> 2016-02-11T21:25:20+02:00 https://peda.net/id/30e42270d 2016-02-11T11:53:52+02:00 Tee sivuillesi otsikkotasot <br/> <ul> <li>&lt;h1&gt;<span>Näiden tagien sisään s</span>uurin otsikkotaso&lt;/h1&gt;</li> <li>&lt;h2&gt;<span>Näiden tagien sisään t</span>oiseksi suurin otsikkotaso&lt;/h2&gt;</li> <li>&lt;h3&gt;<span>Näiden tagien sisään k</span>olmanneksi suurin otsikkotaso&lt;/h3&gt;</li> </ul> <br/> ja tekstit <br/> <ul> <li>&lt;p&gt;Näiden tagien sisään tekstit. &lt;/p&gt;</li> </ul> 2016-02-11T21:25:20+02:00 https://peda.net/id/30e4dc4cd 2016-02-11T21:22:48+02:00 Tee head-elementin sisään style-elementti, jonne määritellään tyylit. Esimerkin tyylit ovat alla olevan kuvan mukaiset (tässä muotoiltu vain siis taustaväri, h1 ja h2, muut ovat oletusarvoilla). Mieti itse omat värit, fontit, keskitykset ja muut tyylit, kysy tarvittaessa apua.<br/> <br/> <span class="medium"><a href="https://peda.net/kuopio/p/puijonsarvi/oppiminen/luokat-ja-oppiaineet/tietotekniikka/8-lk/www-sivut-html/3mco/style1-jpg2#top" title="style1.jpg"><img src="https://peda.net/kuopio/p/puijonsarvi/oppiminen/luokat-ja-oppiaineet/tietotekniikka/8-lk/www-sivut-html/3mco/style1-jpg2:file/photo/9be4bc39b57bd08d7eba2b4a6606032428de082b/style1.jpg" alt="" title="style1.jpg" class="inline" loading="lazy"/></a></span> 2016-02-11T21:25:20+02:00 https://peda.net/id/30e71b24d 2016-02-14T23:06:18+02:00 &lt;a href=&quot;Tähän kirjoitetaan osoite, jonne linkki vie.&quot;&gt;Näiden tägien sisään kirjoitetaan teksti, joka näkyy sivulla linkkinä.&lt;/a&gt; 2016-02-11T21:25:20+02:00 https://peda.net/id/30e7b4d0d 2016-02-14T23:04:23+02:00 Tallenna kuvatiedosto esim. <strong class="editor red">kuva.gif</strong> samaan kansioon html-tiedoston kanssa.<br/> <br/> Lisää kuva sivullesi seuraavalla tagilla.<br/> <br/> &lt;img src=&quot;<strong class="editor red">kuva.gif</strong>&quot; alt=&quot;Tähän kirjoitetaan teksti, joka kertoo, mitä kuvassa on, niille, jotka kuvaa eivät näe.&quot;&gt; 2016-02-11T21:25:20+02:00 https://peda.net/id/30e8467ad 2016-03-17T11:41:09+02:00 <a href="https://peda.net/kuopio/p/puijonsarvi/oppiminen/luokat-ja-oppiaineet/tietotekniikka/8-lk/www-sivut-html/6lot/address-jpg#top" title="address.jpg"><img src="https://peda.net/kuopio/p/puijonsarvi/oppiminen/luokat-ja-oppiaineet/tietotekniikka/8-lk/www-sivut-html/6lot/address-jpg:file/photo/723b4677b386b966b5b5aaf9348465cf4d22fc2e/address.jpg" alt="" title="address.jpg" class="inline" loading="lazy"/></a> 2016-02-11T21:25:20+02:00 https://peda.net/id/30e8e74cd 2016-02-11T21:23:53+02:00 2016-02-11T21:25:20+02:00