Friday 17 June 2016

Task 37

Here is a table I made of the top 5 films in 2012 as listed on IMDB and the star ratings of them.



1) The Dark Knight Rises (8.5/10)



2) The Hobbit: An Unexpected Journey (7.9/10)



3) The Avengers (8.1/10)



4) Brave (7.2/10)




5) The Amazing Spider-Man (7.0/10)





The HTML code for the graph:

<!DOCTYPE html>
<html>
<body>
<style>
table, th, td {
     border: 1px solid black;
     border-spacing: 2px;
     background-color: lightblue;
}
</style>

<table style="width:60%">
   <tr>
    <td></td>
    <td><b>Movies</b></td>
    <td><b>Stars</b></td>
  </tr>
 <tr>
    <td>1</td>
    <td>The Dark Knight Rises</td>
    <td>8.5/10</td>
  </tr>
  <tr>
    <td>2</td>
    <td>The Hobbit: An Unexpected Journey</td>
    <td>7.9/10</td>
  </tr>
  <tr>
    <td>3</td>
    <td>The Avengers</td>
    <td>8.1/10</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Brave</td>
    <td>7.2/10</td>
  </tr>
  <tr>
    <td>5</td>
    <td>The Amazing Spider-Man</td>
    <td>7/10</td>
  </tr>
</table>

</body>
</html>

Numbers Task 4 and 4.1

I generated a list of 200 random numbers between 1 and 100. The average of this list was 50, however this change when the list changes. I used a line chart to graph these numbers.




I generated a list of 100 random numbers between 1 and 1000. The average of this list was 774.5, however this change when the list changes. I used a line chart to graph these numbers.


Numbers Task 9

Here is another table showing the prime numbers up until 100 using the sieve of Eratosphenes.




The prime numbers are blue/underlined, the even numbers are all orange and all the other non-primes are grey. The only prime number that is not blue is 2 as it is also an even number.

Numbers Task 8

Using the sieve of Eratosthenes here is a list of all the prime numbers between 1 and 100.



The prime numbers are 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89 and  97.

Numbers Task 3.5

The Sieve of Eratosthenes is a simple algorithm for finding all prime numbers up to any given limit. It does this by striking out all the multiples of prime numbers such as 2, 3, 5 and 7. First we strike out the multiples of 2, then the multiples of 3, then the multiples of 5 and then the multiples of 7. What is left are the prime numbers.




The Prime numbers in this table have been underlined and the ones that are not prime and have been marked.

Numbers Task 10 and 11

Here is a list of prime numbers:



Visit this website to see more: Prime Number List.

The biggest known prime number so far is 274,207,281 − 1, a number with 22,338,618 decimal digits. It was found in 2016 by the Great Internet Mersenne Prime Search (GIMPS).

Task 25.3

Trying out all the formatting, quotation and citation tags at w3schools.





The HTML code:

<!DOCTYPE html>
<html>
<body>
<p><cite>WWF's</cite> goal is to: <q><mark><del>Build a future where people live in <i>harmony</i> with <em>nature</em>.</del></mark></q></p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
 For 50 years, <abbr title="World Wildlife"><b>WWF<b></abbr> has been protecting the future of nature.
The world's leading conservation organization,
<strong>WWF</strong> works in <sub>100</sub> countries and is supported by
1.2 million members in the United States and
close to <sup>5</sup> million globally.
</blockquote>
<address>
<small>WWF</small>-New Zealand<br>
 Level 6, Davis Langdon House<br>
 49 Boulcott Street<br>
 Wellington Central 6011<br>
 New Zealand<br>
</address>
<br>
<bdo dir="rtl">WWF's goal is to: <q>Build a future where people live in harmony with nature.</bdo>
</body>
</html>

Task 40.1

Doing the exercises at w3schools on Blocks and divs.

Exercise 1:



Exercise 2:



Exercise 3:



Task 38: Lists

Doing the exercises at w3schools on Lists.

Exercise 1:



Exercise 2:



Exercise 3:


Exercise 4:




Exercise 5:



Exercise 6:



Task 36

HTML tables at w3schools.


I added a border, changed the colour and the width.

Here is the code:

<!DOCTYPE html>
<html>
<body>
<style>
table, th, td {
    border: 1px solid black;
    background-color: pink;
    color: black;
}
</style>
<table style="width:80%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

Task 32 and 33

Here are some image maps.



This image map takes you to close up pictures of the planets when the planets are clicked on.

The code:

<!DOCTYPE html>
<html>
<body>
<p>Click on the planets to see close up pictures of each planet.</p>
<img src="http://www.planetsforkids.org/images/planets_image.jpg" width="622" height="287" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="99,919,20,280" alt="Mercury" href="http://www.fvalk.com/images/Space/Mercury/MERCURY2_MARINER10_BIG.GIF">
  <area shape="rect" coords="140,167,170,193" alt="Venus" href="http://fullhdpictures.com/wp-content/uploads/2016/04/Venus-Desktop.jpg">
  <area shape="rect" coords="186,142,221,170" alt="Earth" href="https://static.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
</map>
  <area shape="rect" coords="222,113,248,135" alt="Mars" href="http://media.salon.com/2015/09/mars-614x412.jpg">
</map>
  <area shape="rect" coords="280,106,354,166" alt="Jupiter" href="http://svs.gsfc.nasa.gov/vis/a010000/a012000/a012021/JupiterThumbnailSmall.png">
  <area shape="rect" coords="354,64,447,133" alt="Saturn" href="http://apod.nasa.gov/apod/image/0412/saturn_malmerCassini_5m.jpg">
  <area shape="rect" coords="437,42,622,287" alt="Uranus" href="http://space-facts.com/wp-content/uploads/uranus.jpg">
  <area shape="rect" coords="491,15,536,52" alt="Neptune" href="http://ste.india.com/sites/default/files/2015/12/16/442079-neptune.jpg">
  <area shape="rect" coords="247,3,622,287" alt="Pluto" href="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/07/14/pluto_color_beforeclosestapproach.jpg.CROP.original-original.jpg">
</map>
</body>
</html>


This image map will take you each of the planets Wikipedia pages when the planets are clicked on.

The code:

<!DOCTYPE html>
<html>
<body>
<p>Click on the planets to go to the wikipedia page for each planet.</p>
<img src="http://www.planetsforkids.org/images/planets_image.jpg" width="622" height="287" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="99,919,20,280" alt="Mercury" href="https://en.wikipedia.org/wiki/Mercury_(planet)">
  <area shape="rect" coords="140,167,170,193" alt="Venus" href="https://en.wikipedia.org/wiki/Venus">
  <area shape="rect" coords="186,142,221,170" alt="Earth" href="https://en.wikipedia.org/wiki/Earth">
</map>
  <area shape="rect" coords="222,113,248,135" alt="Mars" href="https://en.wikipedia.org/wiki/Mars">
</map>
  <area shape="rect" coords="280,106,354,166" alt="Jupiter" href="https://en.wikipedia.org/wiki/Jupiter">
  <area shape="rect" coords="354,64,447,133" alt="Saturn" href="https://en.wikipedia.org/wiki/Saturn">
  <area shape="rect" coords="437,42,622,287" alt="Uranus" href="https://en.wikipedia.org/wiki/Uranus">
  <area shape="rect" coords="491,15,536,52" alt="Neptune" href="https://en.wikipedia.org/wiki/Neptune">
  <area shape="rect" coords="247,3,622,287" alt="Pluto" href="https://en.wikipedia.org/wiki/Pluto">
</map>
</body>
</html>

Thursday 16 June 2016

Task 30 and 31

A picture as a link to a kiwi Wikipedia page and a iframe with a kiwi animation.


Task 29

Doing the exercises at w3schools.

Exercise 1:


Exercise 2:


Exercise 3:


Exercise 4:




Exercise 5:



Task 27.2

Changing the default colour of links in html.



The Script:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>

<p>Changing the default colours of links</p>

<a href="https://en.wikipedia.org/wiki/Horse" target="_blank">Wikipedia page about horses</a>

</body>
</html>

Task 27.1

This is an html script that contains two external links.



Task 25.2

Doing the exercises on w3schools.

Exercise 1:




Exercise 2:







Exercise 3:






Exercise 4: