{"id":155,"date":"2019-06-19T09:07:06","date_gmt":"2019-06-19T06:07:06","guid":{"rendered":"https:\/\/esamksupport.samk.fi\/ohje\/?page_id=155"},"modified":"2024-07-18T08:53:28","modified_gmt":"2024-07-18T05:53:28","slug":"moodle-opettaja-kurssilla-html","status":"publish","type":"page","link":"https:\/\/esamksupport.samk.fi\/ohje\/moodle-opettaja-kurssilla-html\/","title":{"rendered":"Moodle &gt; Opettaja &gt; Kurssilla &gt; HTML"},"content":{"rendered":"\n<p>Kaikkialla uudessa Moodle4-ymp\u00e4rist\u00f6ss\u00e4 editorin ollessa k\u00e4ytett\u00e4viss\u00e4 voidaan aktiviteetteihin, keskusteluihin, teht\u00e4v\u00e4nantoihin, k\u00e4yt\u00e4nn\u00f6ss\u00e4 mihin tahansa kentt\u00e4\u00e4n tai teksti-ikkunaan lis\u00e4t\u00e4 HTML-koodia. HTML-koodilla voidaan mm. upottaa ohjeteksti-aktiviteettiin tai tekstilohkoon esim. Facebookin sy\u00f6tteit\u00e4, kokonaisia verkkosivuja tai osia kolmannen osapuolen verkkosivuista.<\/p>\n\n\n\n<p><strong>Facebook-upotus:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mene sivulle <a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/page-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.facebook.com\/docs\/plugins\/page-plugin\/<\/a><\/li>\n\n\n\n<li>Lis\u00e4\u00e4 kohtaan &#8221;Facebook Page URL&#8221; haluamasi Facebook-sivun verkko-osoite.<\/li>\n\n\n\n<li>M\u00e4\u00e4rit\u00e4 tarpeen mukaan leveys ja korkeus Facebook-ikkunalle (esim. jos teet lohkopalkkiin, niin pit\u00e4\u00e4 olla kapea alle 300 px), otsikon koko (Header -valintaruksi).<\/li>\n\n\n\n<li>Paina alempaa kohdasta &#8221;Get code&#8221;<\/li>\n\n\n\n<li>Kopioi molemmat koodilohkot leikep\u00f6yd\u00e4lle (maalaa tekstit ja Ctrl+C):<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"470\" src=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html1-714x470.jpg\" alt=\"\" class=\"wp-image-2888\" \/><\/figure>\n\n\n\n<p>Liit\u00e4 koodi Moodlessa ollessa verkkoeditorissa kohtaan &#8221;Muokkaa HTML-koodia&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"287\" src=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html2-894x287.jpg\" alt=\"\" class=\"wp-image-2889\" srcset=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html2.jpg 894w, https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html2-768x246.jpg 768w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<p>Poista v\u00e4list\u00e4 kohta &#8221;Step 2..&#8221; ja paina &#8221;P\u00e4ivit\u00e4&#8221;. T\u00e4m\u00e4n j\u00e4lkeen tallenna ja n\u00e4yt\u00e4<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"629\" src=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html3-744x629.jpg\" alt=\"\" class=\"wp-image-2890\" \/><\/figure>\n\n\n\n<p>T\u00e4lt\u00e4 Facebook-upotus n\u00e4ytt\u00e4\u00e4 (t\u00e4m\u00e4 upotettu nyt ohjeteksti-aineistoon). Huomaa, ett\u00e4 koska en m\u00e4\u00e4ritellyt sopivaa leveytt\u00e4 upotusikkunalle, t\u00e4m\u00e4 j\u00e4i v\u00e4h\u00e4n kapeaksi kyseiseen lohkoon n\u00e4hden<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html4-1024x499-2.jpg\" alt=\"\" class=\"wp-image-2892\" style=\"width:1024px;height:499px\" srcset=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html4-1024x499-2.jpg 1024w, https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html4-1024x499-2-768x374.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Sivuston upotus:<\/strong><\/p>\n\n\n\n<p>Moodleen voidaan upottaa jopa kokonaisia sivustoja k\u00e4ytt\u00e4m\u00e4ll\u00e4 editoria. Sivuston upottaminen tapahtuu k\u00e4ytt\u00e4m\u00e4ll\u00e4 ns. iframe-kehystinelementti\u00e4, johon pit\u00e4\u00e4 m\u00e4\u00e4ritell\u00e4 v\u00e4hint\u00e4\u00e4n src, mutta my\u00f6s n\u00e4m\u00e4 voidaan m\u00e4\u00e4ritt\u00e4\u00e4:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>src<\/td><td>Sivun osoite (URL)<\/td><td>Mik\u00e4 sivu tuodaan iframen sis\u00e4lle<\/td><\/tr><tr><td>height<\/td><td>Esim. 200px<\/td><td>iframe-ikkunan korkeus<\/td><\/tr><tr><td>width<\/td><td>Esim. 200px<\/td><td>iframe-ikkunan leveys<\/td><\/tr><tr><td>frameborder<\/td><td>1 tai 0<\/td><td>n\u00e4kyyk\u00f6 iframe-ikkunassa reunukset<\/td><\/tr><tr><td>align<\/td><td>left, right, top, middle, bottom<\/td><td>ikkuna sijainti<\/td><\/tr><tr><td>scrolling<\/td><td>yes, no, auto<\/td><td>Jos tuotu sivu on isompi, kuin iframe-ikkuna, niin sallitaanko scrollaus-s\u00e4\u00e4timet<\/td><\/tr><tr><td>name<\/td><td>vapaavalintainen<\/td><td>iframe-ikkunan nimi<\/td><\/tr><tr><td>marginheight<\/td><td>Esim. 10px<\/td><td>Yl\u00e4- ja alamarginaalin koko iframen sis\u00e4ll\u00f6lle<\/td><\/tr><tr><td>marginwidth<\/td><td>Esim. 10px<\/td><td>Vasemman ja oikean marginaalin koko iframen sis\u00e4ll\u00f6lle<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Iframe-kehys n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/p>\n\n\n\n<p>&lt;iframe width=&#8221;700&#8243; height=&#8221;500&#8243; marginheight=&#8221;0px&#8221; scrolling=&#8221;yes&#8221; border=&#8221;1&#8243; src=&#8221;<strong>T\u00c4H\u00c4N VERKKO-OSOITE<\/strong>&#8221;&gt; &lt;\/iframe&gt;<\/p>\n\n\n\n<p>Voit m\u00e4\u00e4ritell\u00e4 korkeuden ja leveyden itse (px eli pikselein\u00e4 lasketaan nuo numeroarvot). T\u00e4m\u00e4 liitet\u00e4\u00e4n kanssa HTML-koodin kohdalle editorissa kuten Facebook-upotuksessa. <strong>JOS upotettava sivu n\u00e4kyy valkoisena laatikkona, on verkkosivulla k\u00e4yt\u00f6ss\u00e4 ns. x-headeri, joka est\u00e4\u00e4 upotuksen toisaalle. T\u00e4ll\u00f6in sivua ei voi upottaa. <\/strong>(x-headerissa sivustolle on m\u00e4\u00e4ritetty ns. x-frame-options -vastausprotokolla, joka tunnistaa pyynn\u00f6n kehyst\u00e4\u00e4 sivun toisaalle ja t\u00e4m\u00e4 voi olla asetettuna asentoon &#8221;deny&#8221; (kiell\u00e4).<br><\/p>\n\n\n\n<p><strong>Youtube-upotus:<\/strong><\/p>\n\n\n\n<p>Voit my\u00f6s upottaa Youtuben videosoittimen Moodlen opintojaksolle.<\/p>\n\n\n\n<p><strong>Tekij\u00e4noikeuksista:<\/strong> Youtube-videoita saa lis\u00e4t\u00e4 opintojaksolle siin\u00e4 tapauksessa, ett\u00e4 t\u00e4m\u00e4 on tarkoitettu ep\u00e4kaupalliseen voittoa tavoittelemattomaan k\u00e4ytt\u00f6\u00f6n ja on tarkoitettu opetustarkoitusta varten. Muussa tapauksessa pit\u00e4\u00e4 olla lupa videon omistajalta. Suomen tekij\u00e4noikeusj\u00e4rjest\u00f6t m\u00e4\u00e4rittelev\u00e4t kohtuullisen k\u00e4yt\u00f6n yleens\u00e4 tapauskohtaisesti, mutta Yhdysvalloissa opetusk\u00e4ytt\u00f6 on aina kohtuullista.<\/p>\n\n\n\n<p><strong>TLDR;<\/strong> Jos videossa on mainittuna k\u00e4ytt\u00f6lupana &#8221;Normaali k\u00e4ytt\u00f6lupa&#8221;, on t\u00e4m\u00e4 julkaistu Creative Commons -k\u00e4ytt\u00f6luvan mukaisesti. N\u00e4in esim. videon upottaminen oppimisymp\u00e4rist\u00f6\u00f6n on sallittua, kun t\u00e4t\u00e4 ei julkisesti esit\u00e4 oppitunnilla.<\/p>\n\n\n\n<p>Tuosta aiheesta lis\u00e4\u00e4: <a href=\"https:\/\/operight.fi\/artikkeli\/verkkoymparistot\/saako-youtube-videon-upottaa-suljettuun-oppimisymparistoon-jos-videolla\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/operight.fi\/artikkeli\/verkkoymparistot\/saako-youtube-videon-upottaa-suljettuun-oppimisymparistoon-jos-videolla<\/a><\/p>\n\n\n\n<p>Kun haluat upottaa videon opintojaksolle kohtaan x, navigoi ensin Youtubessa videolle ja paina Jaa -kohdan kautta l\u00f6ytyv\u00e4\u00e4 Upota -nappia<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"294\" src=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html5-1024x294-1.jpg\" alt=\"\" class=\"wp-image-2893\" srcset=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html5-1024x294-1.jpg 1024w, https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html5-1024x294-1-768x220.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Aukeavassa ikkunassa paina &#8221;Kopioi&#8221; alaoikealta, jolloin upotuskoodi siirtyy leikep\u00f6yd\u00e4llesi. Palaa Moodleen verkkoeditoriin ja liit\u00e4 leikep\u00f6yd\u00e4lt\u00e4 koodi HTML-koodin paikalle painamalla Ctrl-V.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1293\" height=\"496\" src=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html6.jpg\" alt=\"\" class=\"wp-image-2894\" srcset=\"https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html6.jpg 1293w, https:\/\/esamksupport.samk.fi\/ohje\/wp-content\/uploads\/sites\/3\/2021\/09\/moodle_html6-768x294.jpg 768w\" sizes=\"auto, (max-width: 1293px) 100vw, 1293px\" \/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Kaikkialla uudessa Moodle4-ymp\u00e4rist\u00f6ss\u00e4 editorin ollessa k\u00e4ytett\u00e4viss\u00e4 voidaan aktiviteetteihin, keskusteluihin, teht\u00e4v\u00e4nantoihin, k\u00e4yt\u00e4nn\u00f6ss\u00e4 mihin tahansa kentt\u00e4\u00e4n tai teksti-ikkunaan lis\u00e4t\u00e4 HTML-koodia. HTML-koodilla voidaan mm. upottaa ohjeteksti-aktiviteettiin tai tekstilohkoon esim. Facebookin sy\u00f6tteit\u00e4, kokonaisia verkkosivuja tai osia kolmannen osapuolen verkkosivuista. Facebook-upotus: Liit\u00e4 koodi Moodlessa ollessa verkkoeditorissa kohtaan &#8221;Muokkaa HTML-koodia&#8221; Poista v\u00e4list\u00e4 kohta &#8221;Step 2..&#8221; ja paina &#8221;P\u00e4ivit\u00e4&#8221;. T\u00e4m\u00e4n j\u00e4lkeen tallenna ja n\u00e4yt\u00e4 T\u00e4lt\u00e4 Facebook-upotus n\u00e4ytt\u00e4\u00e4 (t\u00e4m\u00e4 upotettu nyt ohjeteksti-aineistoon). Huomaa, ett\u00e4 koska en m\u00e4\u00e4ritellyt sopivaa leveytt\u00e4 upotusikkunalle, t\u00e4m\u00e4 j\u00e4i v\u00e4h\u00e4n kapeaksi kyseiseen lohkoon n\u00e4hden Sivuston upotus: Moodleen voidaan upottaa jopa kokonaisia sivustoja k\u00e4ytt\u00e4m\u00e4ll\u00e4 editoria. Sivuston upottaminen tapahtuu k\u00e4ytt\u00e4m\u00e4ll\u00e4 ns. iframe-kehystinelementti\u00e4, johon pit\u00e4\u00e4 m\u00e4\u00e4ritell\u00e4 v\u00e4hint\u00e4\u00e4n src, mutta my\u00f6s n\u00e4m\u00e4 voidaan m\u00e4\u00e4ritt\u00e4\u00e4: src Sivun osoite (URL) Mik\u00e4 sivu tuodaan iframen sis\u00e4lle height Esim. 200px iframe-ikkunan korkeus width Esim. 200px iframe-ikkunan leveys frameborder 1 tai 0 n\u00e4kyyk\u00f6 iframe-ikkunassa reunukset align left, right, top, middle, bottom ikkuna sijainti scrolling yes, no, auto Jos tuotu sivu on isompi, kuin iframe-ikkuna,&hellip;<\/p>\n<p> <a class=\"more-link\" href=\"https:\/\/esamksupport.samk.fi\/ohje\/moodle-opettaja-kurssilla-html\/\">Lue Lis\u00e4\u00e4<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-155","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/pages\/155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/comments?post=155"}],"version-history":[{"count":3,"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/pages\/155\/revisions"}],"predecessor-version":[{"id":3851,"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/pages\/155\/revisions\/3851"}],"wp:attachment":[{"href":"https:\/\/esamksupport.samk.fi\/ohje\/wp-json\/wp\/v2\/media?parent=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}