https://peda.net/id/8539368c3d3 2017-05-20T11:58:41+03:00 https://peda.net/:static/532/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/9e36bf743d3 2019-03-12T08:54:46+02:00 <table class="layout"><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="layoutbox1"> <table class="module m2975083 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>1. Johdanto - Aloitustehtävä</h3> </td> </tr> <tr> <td class="modulecontent">Netistä löytyy monenlaisia www-sivuja, toiset tyylikkäämpiä, toiset vähemmän tyylikkäitä.<br/> <br/> <b>Tehtävä 1:</b> Tutustu erilaisiin www-sivuihin. Mikä tekee sivusta mielestäsi hyvän? Millainen on huono sivu?<br/> Listaa molemmista sekä hyvistä että huonoista <b>8</b> esimerkkiä otsikoiden &quot;Hyviä yksityisten www-sivuja&quot; ja &quot;Huonoja yksityisten www-sivuja&quot; sekä &quot;Hyviä organisaatioiden www-sivuja&quot; ja &quot;Huonoja organisaatioiden www-sivuja&quot; alle. <br/> <br/> Merkitse sivuista<br/> a) Sivuston nimi/tekijä<br/> b) www-osoite hyperlinkkinä<br/> c) Perustelut, miksi sivu on hyvä/huono<br/> <br/> HUOM! Liitä työhösi myös <b>kuvankaappaukset</b> jokaisen kohdan <b>viidestä</b> parhaimmasta/huonoimmasta sivusta. Kuvankaappauksia tulee työhösi siis 4x5 kpl = 20 kpl!<br/> <br/> HUOM! Samalta www-sivustolta (Esim. MikroBitin käyttäjät) saat poimia maksimissaan kaksi eri sivua listaasi.<br/> <br/> <b>Tehtävä 2.</b> Listaa <b>ilmaisia</b> www-palveluja, joissa on mahdollista tehdä omia www-sivuja. Asennettavat ohjelmat eivät siis kelpaa. Kerro jokaisesta löytämästäsi sivustosta nimi, www-osoite sekä mahdollisimman paljon yleistä tietoa. Otsikoi tämä osa &quot;Ilmaisia www-palveluja nettisivujen tekoon&quot;.<br/> <br/> Tallenna nimellä <b>oma_nimi_www-sivut_johdantoa.</b><br/> <br/> - - - - - - - - - <br/> <br/> <b>Lisätehtävä 1.</b> www-sivujen tekoon löytyy <b>ilmaisia</b> ohjelmia. Tee mahdollisimman kattava lista em. ohjelmista.<br/> <br/> <b>Lisätehtävä 2.</b> Omakohtaiset www-sivujen teko-kokemukset. Kerro itse tekemistäsi www-sivuista. Miten teit? Mistä sait ohjeita? Mitä ominaisuuuksia sivuillasi on? jne. jne.<br/> <br/> <span>- - - - - - - - - </span><br/> <br/> <b>2. Aiheen valinta ja tiedonkeruu</b><br/> <br/> <br/> 1. Selaile erilaisia www-sivuja sinua kiinnostavista aiheista.<br/> <br/> 2. Valitse aihe.<br/> <br/> 3. Mieti sivustosi alaotsikot ja listaa ne. Alaotsikoita tulee olla <b>6 kpl</b>.<br/> <br/> Esim.<br/> Aihe: Iron Maiden<br/> Alaotsikot: Historia, Julkaisut, ....<br/> <br/> <b>Tallenna nimellä oma_nimi_www-aihe.docx</b><br/> <br/> <br/> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975084 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Tiedonkeruu</h3> </td> </tr> <tr> <td class="modulecontent">Hae materiaalia (tekstiä, kuvia jne.) valitsemastasi aiheesta. Jaottele tieto jo hakuvaiheessa eri alaotsikoiden alle (ks. aloitustehtävä).<br/> <br/> HUOM! Tallenna kuvat <b>kuvatiedostoina</b> omaan kansioosi!<br/> <br/> HUOM! Merkitse ylös jokainen sivu, jolta haet jotakin materiaalia www-sivuillesi.<br/> <br/> <b>Tallenna nimellä oma_nimi_www-materiaali.docx</b></td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975085 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Johdantoa</h3> </td> </tr> <tr> <td class="modulecontent"> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975086 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>www-sivuja</h3> </td> </tr> <tr> <td class="modulecontent"> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975088 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Yleisiä vinkkejä - LUE HUOLELLA!</h3> </td> </tr> <tr> <td class="modulecontent"><br/> <b>HUOM!</b> Tee navigointi käyttäen suhteellista (ei absoluuttista) linkkiä/viittausta! Näin sivustosi on siirrettävissä mille tahansa palvelimelle.<br/> <br/> <b>HUOM!</b> Kannattaa suunnitella ensin yksi hyvä sivupohja (etusivu) ja siihen navigointi. Tämän jälkeen muiden sivujen kopiointi resurssienhallinnassa (Win+E) on helppoa ja nopeaa. Kopio etusivu ja liitä se useaan kertaan ja nimeä uudelleen. TAI: sivupohjan voi kopioida myös NVU-ohjelmassa valitsemalla File --&gt; Save As ja antamalla nimeksi uuden sivun nimen.<br/> <br/> Katso loistava esimerkki: <a href="http://koti.mbnet.fi/jusylin/XHTML/esimerkkisivu01/" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://koti.mbnet.fi/jusylin/XHTML/esimerkkisivu01/</span></a><br/> Esimerkkejä muistiolla tehdyistä tätä tehtävää vaatimattomammista kotisivuista löytyy osoitteesta: <a href="http://www.peda.net/veraja/uurainen/koulukeskus/oppiaineet/vuosiluokat79/tietotekniikka/oppilastoita/html" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://www.peda.net/veraja/uurainen/koulukeskus/oppiaineet/vuosiluokat79/tietotekniikka/oppilastoita/html</span></a><br/> TUTUSTU! Pääset katsomaan sivujen lähdekoodia valitsemalla <b>Näytä --&gt; Sivun lähdekoodi</b> tai <b>Näytä --&gt; Lähdekoodi</b>.<br/> <br/> Esimerkki käsintehdystä sivustosta, jossa on käytössä CSS-tyylitiedosto, on: <a href="http://koti.mbnet.fi/jusylin/" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://koti.mbnet.fi/jusylin/</span></a><br/> <br/> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <br/> <br/> <br/> <br/> <table class="module m2975089 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>OHJE OPETTAJALLE</h3> </td> </tr> <tr> <td class="modulecontent">&lt; ja &gt; -merkkien lisäys Pedaan<br/> <br/> Jos haluat lisätä tekstimoduuliin erikoismerkkejä kuten, &lt;, käytä alla näkyvää koodia sitä varten.<br/> <br/> <br/> Merkki Koodi<br/> <br/> </td> </tr> <tr> <td>&lt;</td> <td>&amp;lt;</td> </tr> <tr> <td>&gt;</td> <td>&amp;gt;</td> </tr> <tr> <td>&amp;</td> <td>&amp;amp;</td> </tr> </tbody> </table> </td> <td class="v_filler"> </td> <td class="layoutbox2"> <table class="module m2975092 type_folder" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Vinkkejä HTML-kieleen.</h3> </td> </tr> <tr> <td class="modulecontent"> <table><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://www.peda.net/img/portal/2975092/HTML-opetus.doc?cs=1389181083" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">HTML-opetus.doc</span></a></div> <div class="contentinfo">43 kt 18.04.</div> Muutama vinkki HTML-kielen käytöstä Word2003-muodossa. Kannattaa lukea</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975093 type_links" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Linkit</h3> </td> </tr> <tr> <td class="modulecontent"> <table><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://koti.mbnet.fi/ugo/johdanto.html" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Johdanto kotisivujen tekemiseen</span></a></div> Toimivat sivut lyhyt oppimäärä.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://www.peda.net/veraja/kotka/aikuislukio/ideat/softa/www" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Linkkejä kotisivujen tekoon.</span></a></div> Linkkejä kotisivujen tekoon.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://www.flash-gear.com/index.php?a" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Flash-työkaluja</span></a></div> Kaikkea kivaa ja näyttävää Flashin avulla.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://www.mvnet.fi/index.php?osio=Kotisivun_teko&amp;sivu=Kotisivujen_toteutus" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Kotisivujen toteutus</span></a></div> Ohjeet aloittelijalle: WYSIWYG-editorit</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975094 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Linkkejä</h3> </td> </tr> <tr> <td class="modulecontent">HTML-opas: <a href="http://cs.stadia.fi/~lehtonen/html.html" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://cs.stadia.fi/~lehtonen/html.html</span></a><br/> HTML: <a href="http://www.sivut.org/html/" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://www.sivut.org/html/</span></a><br/> pudotusvalikko: <a href="http://www.sivut.org/javascript/" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://www.sivut.org/javascript/</span></a><br/> jippoja: <a href="http://personal.inet.fi/koti/petri.vuorenmaa/html/jippoja/index.html" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://personal.inet.fi/koti/petri.vuorenmaa/html/jippoja/index.html</span></a><br/> JavaScript jippoja: <a href="http://koti.mbnet.fi/~merkka/js.html" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">http://koti.mbnet.fi/~merkka/js.html</span></a><br/> <br/> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975095 type_links" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Linkit - www, HTML, CSS, Java</h3> </td> </tr> <tr> <td class="modulecontent"> <table><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://www.w3schools.com/" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">W3Schools</span></a></div> THE LARGEST WEB DEVELOPER'S SITE ON THE NET.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://weppipakki.com/js/js1.htm" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Weppipakki</span></a></div> JavaScript-esimerkkejä. Myös CSS + HTML.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="https://addons.mozilla.org/fi/firefox/addon/60" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Web Developer</span></a></div> Firefoxin lisäosa, jolla voi esim. muokata minkä tahansa sivuston CSS-tyylitiedostoa.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="https://www.google.com/accounts/ServiceLogin?service=pages&amp;continue=http%3A%2F%2Fpages.google.com%2F&amp;ltmpl=yessignups" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Google Page Creator</span></a></div> Google Page Creator is a free online tool that makes it easy for anyone to create and publish useful, attractive web pages in just minutes.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://cooltext.com/" target="_blank" rel="nofollow ugc noopener"><span class="editor underline">Cool Text</span></a></div> Cool Text is a free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 2017-05-20T11:59:22+03:00