Kotisivuthttps://peda.net/id/7f0b0c4865e2017-09-12T07:48:16+03: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>
Harjoitus 1https://peda.net/id/305bd2109482016-10-17T20:49:22+03:001. Kirjoita/kopioi Aloitus-osiossa olevat koodit muistioon. Koodin perässä on kommentoitu, mitä kyseinen koodi tekee. <!-- Kommentin voi laittaa oheisten merkkien väliin --> Tutki ja korjaa koodiin alla olevat tiedot haluamallasi tavalla.<br/>
<br/>
<ul>
<li>Kotisivun nimi (välilehdellä näkyvä teksti)</li>
<li>Kotisivulle tuleva pääotsikko</li>
<li>Kotisivulle kirjoittaminen</li>
<li>Taustan värin muuttaminen</li>
<li>Tekstin värin muuttaminen</li>
<li>Listan tekeminen</li>
</ul>
<br/>
2. Tallenna muistio html-päätteellä omaan OneDriveen kansioon, jonka olet jakanut opettajan kanssa. <br/>
<br/>
3. Mene OneDriveen ja avaa tallentamasi tiedosto. Tutki, miltä sivusi näyttää ja tee haluamasi korjaukset.2016-10-17T20:14:40+03:00Aloitushttps://peda.net/id/ff9472649482016-10-19T19:38:17+03:00<div><HTML> <!--html-documentin aloitus--></div>
<div> </div>
<div><HEAD> <!--koko sivua koskevat määreet aloitus--></div>
<div> </div>
<div><TITLE> <br/>
KP:n sivusto<br/>
</TITLE> <!--otsikonlisäyskäskyt--></div>
<div> </div>
<div></HEAD> <!--koko sivua koskevat määreet lopetus--></div>
<div> </div>
<div><BODY BGCOLOR="#BEE3C2" TEXT="navy"> <!--sivun aloitus + sisämääreet taustaväri pinkki, tekstin väri tummansininen--></div>
<div> </div>
<div><H1><br/>
Kotisivuharjoitus<br/>
</H1></div>
<div> </div>
<div>Tässä käydään läpi:</div>
<div> </div>
<div><UL> <!--sisennetty luettelo pallukoilla--><br/>
<LI> joka documentissä esiintyvät peruskäskyt<br/>
<LI> body-käskys lisämääreet, taustaväri ja tekstin väri<br/>
<LI> listan lisääminen<br/>
</UL> <!--sisennetty luettelo pallukoilla--><br/>
<br/>
</BODY> <!--sivun lopetus--><br/>
<br/>
</HTML> <!--html-documentin lopetus--></div>
2016-10-17T20:06:09+03:00Harjoitus 2https://peda.net/id/3e3af1249492018-04-10T15:03:54+03:00<ul>
<li>Kun kotisivun tekemistä jatketaan seuraavan kerran, tallennettu tiedosto avataan painamalla hiiren oikeaa painiketta ja valitaan Avaa sovelluksessa.</li>
<li>Etsi sovelluksista muistio, jolla voit jatkaa kotisivujen tekemistä.</li>
<li>Toinen vaihtoehto on avata ensin tietokoneella muistio ja avata tallennettu tiedosto suoraan sitä kautta.</li>
</ul>
<br/>
Toisella harjoituskerralla läpikäytävät asiat:<br/>
<ul>
<li>Kuvan lisääminen</li>
<li>Kuvan koon muuttaminen</li>
<li>Taustakuvan lisääminen</li>
<li>Linkin lisääminen</li>
<li>Taulukon lisääminen</li>
</ul>
<br/>
<b>Kuvan lisääminen</b><br/>
<ul>
<li>Kirjoita/kopioi alla oleva koodi muistioosi.</li>
<li>Etsi kotisivuille haluamasi creative commons-lisensoitu kuva esimerkiksi wikimedia commons-sivustolta ja vaihda alla olevan koodin kuva omaasi (kopioi siis kuvan osoite).</li>
<li>Vaihda kuvan kokoa, WIDTH- tai HEIGHT- komennolla.</li>
<li>Kuvan koon voi antaa pikseleinä (px) tai prosentteina (%).</li>
</ul>
<br/>
<div><IMG SRC=<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Six_weeks_old_cat_%28aka%29.jpg/800px-Six_weeks_old_cat_%28aka%29.jpg" rel="nofollow ugc noopener">https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Six_weeks_old_cat_%28aka%29.jpg/800px-Six_weeks_old_cat_%28aka%29.jpg</a> WIDHT=200px> <br/>
<!--kuvan tulee olla tallennettuna samassa kansiossa, jossa itse muistio on tai kopioida kuvan osoite netistä--></div>
<div> </div>
</IMG><br/>
<br/>
<b>Linkin lisääminen<br/>
</b><br/>
Alla olevassa koodissa on kolme erilaista tapaa tehdä linkki.<br/>
<ul>
<li>Tutki, kuinka linkki näkyy kotisivuilla kullakin tavalla.</li>
<li>Vaihda linkit haluamallesi sivuille.</li>
</ul>
<br/>
<A HREF=<a href="https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk">https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk</a> ><br/>
Linkki atk-sivuille<br/>
</A><br/>
<br/>
<A HREF=<a href="https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk">https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk</a> ><br/>
<a href="https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk">https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk</a><br/>
</A><br/>
<br/>
<A HREF=<a href="https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk">https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk</a> ><br/>
<IMG SRC=<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Six_weeks_old_cat_%28aka%29.jpg/800px-Six_weeks_old_cat_%28aka%29.jpg" rel="nofollow ugc noopener">https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Six_weeks_old_cat_%28aka%29.jpg/800px-Six_weeks_old_cat_%28aka%29.jpg</a> width=200px> <br/>
<!--kuvan tulee olla tallennettuna samassa kansiossa, jossa itse muistio on tai kopioida kuvan osoite netistä--><br/>
</IMG><br/>
</A><br/>
<br/>
<b>Taustakuvan lisääminen<br/>
<br/>
</b>Ensimmäisessä harjoituksessa opittiin vaihtamaan kotisivun taustaa. Nyt harjoitellaan lisäämään kotisivuille taustakuva.<br/>
<ul>
<li>Vaihda BODY-käskyssä taustavärin BGCOLOR tilalle taustakuva BACKGROUND=</li>
<li>Liitä perään haluamasi kuvan osoite.</li>
</ul>
<br/>
<BODY BGCOLOR="#BEE3C2" TEXT="navy">2016-10-17T20:36:32+03:00Harjoitus 3https://peda.net/id/fa4d26149552017-03-22T14:56:07+02:001. Testaa kokeilemalla, mitä seuraavat kirjainyhdistelmät tekevät. Huom! BR ja HR käskyt vaativat vain aloitusmerkit <>, loput eivät vaadi edes aloitusmerkejä.<br/>
<ul>
<li>BR</li>
<li>HR</li>
<li>&gt;</li>
<li>&quot;</li>
<li>&#9827;</li>
<li>&#9786;</li>
</ul>
<br/>
2. Suurenna jokin koodaamistasi erikoismerkeistä:<br/>
<ul>
<li>Kirjoita ennen merkkiä <font size=20px> ja lopetus merkin jälkeen </font>.</li>
</ul>
<br/>
3. Etsi ja koodaa aurinko, sateenvarjo, lumiukko ja tähti. Huomaa, että erikoismerkit eivät tarvitse aloitusmerkkejä <>, vaan alkavat aina &#- merkeillä!<br/>
<br/>
4. Kokeile seuraavia muotoilukoodeja kirjoittamaasi tekstiin:<br/>
<ul>
<li>lihavointi <B> ja </B></li>
<li>kursivointi <I> ja </I></li>
<li>alleviivaus <U> ja </U></li>
</ul>
<br/>
5. <b>Taulukon lisääminen</b><br/>
<br/>
<ul>
<li>Katso <a href="http://opinnot.internetix.fi/fi/muikku2materiaalit/muut/ammatillinen/web/html/html_perusteet.pdf" target="_blank" rel="nofollow ugc noopener">oppaan</a> sivulta 62 ohjeet taulukon lisäämisestä ja luo taulukko. Esimerkkitaulukko alla.</li>
<li>Keskitä taulukko keskelle sivua.</li>
<li>Laita taulukolle taustakuva tai taustaväri.</li>
<li>Kokeile vaihtaa taulukon reunojen paksuutta.</li>
</ul>
<table>
<tbody>
<tr>
<td>Taulukko</td>
<td>Ensimmäinen<br/>
sarake</td>
<td>Toinen<br/>
sarake</td>
</tr>
<tr>
<td>Ensimmäinen rivi</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Toinen rivi</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>2016-10-18T21:23:33+03:00Harjoitus 4https://peda.net/id/0c0a47dca192016-11-09T20:41:42+02:00<div><b>Tekstin viimeistely</b></div>
<ul>
<li>Kirjoita kotisivuillesi haluamaasi tekstiä. Tekstin ulkoasua voit muokata kattavan <a href="http://opinnot.internetix.fi/fi/muikku2materiaalit/muut/ammatillinen/web/html/html_perusteet.pdf" rel="nofollow ugc noopener">html oppaan</a> luvussa 3.5. Kirjasimet eli fontit s. 23 olevien ohjeiden avulla.</li>
<li>Muokkaa tekstiin sopivat fonttikoot, värit ja fontit.</li>
</ul>
<b><br/>
Videon lisääminen <br/>
</b>
<ul>
<li>Lisää kotisivulle video kopioimalla videon upotuskoodi hiiren oikealla painikkeella ja liittämällä se kotisivun body-osioon</li>
</ul>
<br/>
<b>Alasivun linkittäminen kotisivulle<br/>
</b>
<ul>
<li>Tee uusi muistio, johon lisäät haluamasi käskyt ja sisällön aivan kuten varsinaiselle kotisivulle.</li>
<li>Tallenna muistio samaan kansioon, johon olet tallentanut kotisivusi.</li>
<li>Tee linkki kuten aikaisemminkin, mutta linkin osoitteen tilalle kopioi muistiosi nimi esimerkiksi tokasivu.html</li>
</ul>
<b><br/>
Kotisivun viimeistely</b><br/>
<br/>
<ul>
<li>Lopuksi tutki erilaisia nettisivuja ja pohdi, miten haluat asetella omalle kotisivuillesi luomasi asiat (nyt kuvat, linkin ja teksti ovat kaikki allekain sivuillasi).</li>
<li>Käytä tuotoksesi asetteluun taulukkokäskyä ja sijoita kuvat, linkit ja tekstit taulokkoon haluamallasi tavalla, jotta sivustosta tulisi mahdollisimman selkeä.</li>
<li>Halutessasi voit vielä muokata kotisivujasi omatoimisesti html-oppaan avulla.</li>
</ul>
<br/>
<br/>
2016-11-03T09:20:50+02:00