Home






Coding | HTML, Javascript & CSS | 1- Embedding an Image from the Internet | 2- Embed one of your Tweets: | 3- Embed an Educational YouTube Video | 4- Embed an Educational Webpage | 5- Simple HTML Formatting | 6- Multimedia Presentation | 7- Simple Javascript Apps | Arduino | App Inventor


Coding


HTML, Javascript & CSS

These are languages of the web! Students can use Wikispaces Classroom to test their code and see the results instantly. Codes can be pasted inside an HTML widget on a Wikispaces page.


1- Embedding an Image from the Internet



The code you need to embed an image (Use other html widget):
<img src="URL" width="pixels" height="pixels"/>
Replace URL with the image's URL and replace the pixels with a number. If you want the image to show in its original size remove the width and height tags. Keep the width to height ratio the same or your image gets distorted. Embed the image in 3 different sizes. Use a calculator to help you or instead you can enter a percentage for the width of the picture to embed.
<img src="URL" width="30%" />
 
You can put several image tags in the same widget as well as styled text like below:
<div align="center" style="border:12px solid gold">
<div align="center" style="border:6px solid black; background-color: red">
<div style="color:#EEEEAA; font-style:italic; font-weight:bold; font-size:22px; font-family:Arial">
 
<h1>Write Your Heading Here!</h1>
 
<img src="URL" width="6%" />
<img src="URL" width="12%" />
<img src="URL" width="18%" />
<img src="URL" width="24%" />
<img src="URL" width="30%" />
<img />
 
</div>
</div>
</div>
 

2- Embed one of your Tweets:


Right-click on "More" under a tweet and select "embed tweet". Copy the code and paste it in a widget here (Other HTML). To expand the tweet to see the whole conversation (thread), click on the time posted at the bottom of tweet above the media.


3- Embed an Educational YouTube Video


Embed a Science video from YouTube. It must be about a topic you have studied or will be studying this year.
Click on Share under the video and choose Embed. Copy the embed code and paste it in a widget here (Other HTML). This code can be used to embed a webpage as well (e.g., Wikipedia article). You can define the size of iframe.
<iframe width="560" height="315" src="URL" frameborder="0" allowfullscreen></iframe>
 

4- Embed an Educational Webpage


Embed an educational webpage about a topic you are learning (e.g., Wikipedia article). It is better to embed the mobile page if it is available because they are streamlined and easier to read. For example, Wikipedia mobile pages have an extra "m." in their address.

https://en.wikipedia.org/wiki/Tiger
https://en.m.wikipedia.org/wiki/Tiger

You can define the size of iframe. Use the code below.
<iframe width="100%" height="390" src="URL" frameborder="0"></iframe>
 

5- Simple HTML Formatting

The <h1> to <h6> tags are HTML headings. <h1> is the TOP, most important heading.
The <p> tag defines a paragraph.
The <div> tag creates a division in HTML to which you can apply formatting.


<h1>Write your TOP Heading here!</h1>
<h2>Write your Second Heading here!</h2>
<p>This is plain text.</p>
<div style="color:red; font-style:italic; font-weight:bold; font-size:18px; font-family:Arial">
<p>Write your styled text here!</p>
</div>
<p>Write your plain text here!</p>

6- Multimedia Presentation

The code provided here shows you how to embed Pictures, Videos, and Webpages (Wikipedia articles) within the same HTML widget. You can also write a summary of the information and include it in your presentation. The summary should be the most important information found in the video and article, but written in simple easy-to-understand English. Just replace the URL in the code with the address of the video and the article.

<div align="center" style="border:12px solid gold">
<div align="center" style="border:6px solid SaddleBrown; background-color: coral; font-size:24px; font-weight:bold">
<h1> The Title </h1>
<p> By: Student Name </p>
 
<img src="Pic_URL" width="60%" />
 
<div align="justify" style=" font-size:18px">
<p> Write your summary here! </p>
 
<iframe width="100%" height="600" src="WikiPedia_Article_URL" frameborder="0"></iframe>
 
<div align="center" style="border:12px solid black">
<iframe width="100%" height="501" src="YouTube_Vieo_URL" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
 

7- Simple Javascript Apps

The following code can be modified to do all kinds of calculations. The Javascript code below creates a variable that is a number between 1 and 1000 (for loop).
<div align="center" style="border:12px solid SkyBlue">
<div align="center" style="border:6px solid black; background-color: salmon">
<div style="color:red; font-style:italic; font-weight:bold; font-size:18px; font-family:Arial">
<p>Click the button to find doubles of numbers from 1 to 1000.</p>
<button onclick="myFunction2()">Doubles</button>
<div style="color:black; font-style:italic; font-weight:bold; font-size:18px; font-family:Arial">
<p id="doubling"></p>
<script type="text/javascript">
//<![CDATA[
function myFunction2() {
    var text = "";
    var i;
    for (i = 1; i < 1001; i++) {
        text += "2 X " + i + " = " + i*2 + "<br>";
    }
    document.getElementById("doubling").innerHTML = text;
}
//]]>
</script>
</div>
</div>
</div>
</div>

Arduino


Arduino Software (IDE) is used to write code and upload it to the Arduino board. The code can be as simple as turning an LED on and off or complicated commands to run a robot.
TBA

App Inventor

TBA