Monday, April 15, 2019

26 Browser

Found it.....
File:

<!DOCTYPE html>
<html>
<head>
<!-- My favorite browser was Waterfox, which is simply Firefox for a 64bit operating system.
However, it was discontinued a couple of years ago.
So, I have been focussing on Firefox (Default Linux browswer), Safari (Default Mac Os browser) or Google Chrome.
/!-->
<title> My prefered browser</title>

<style>
body {
background-color: lightblue;
}
h1 {
color: grey;
font-size: 90px;
}
h2 {
color: red;
font-size: 56px:
}
p {
 color: black;
 }
 .dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
h3 {
color: green;
font-size: 45px;
}
h4 {
color: yellow;
font-size: 50px;
}
 </style>
</head>
<body>
<h1> Back in the hey day of the internet circa 1990*</h1>
<p>There was<br>
  This</p>
  <div class="dropdown">
  <img src="https://d2bs8hqp6qvsw6.cloudfront.net/article/images/750x750/dimg/netscape-3.jpg" alt="Netscape Navigator" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://d2bs8hqp6qvsw6.cloudfront.net/article/images/750x750/dimg/netscape-3.jpg" alt="Netscape Navigator" width="300" height="200">
  <div class="desc">Netscape Navigator</div>
  </div>
</div><hr>
<br><br><br>
<h2> Then we went to...<h2>
 <div class="dropdown">
  <img src="https://s.yimg.com/ny/api/res/1.2/D1fZgQIlx68XGqPv_5LT8g--~A/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAw/http://l.yimg.com/cd/resizer/2.0/original/Zabt2xcL0OanZB0J8vjFbPBlif0" alt="Internet Explorer 1995-2015" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://s.yimg.com/ny/api/res/1.2/D1fZgQIlx68XGqPv_5LT8g--~A/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAw/http://l.yimg.com/cd/resizer/2.0/original/Zabt2xcL0OanZB0J8vjFbPBlif0" alt="Internet Explorer 1995-2015" width="300" height="200">
  <div class="desc">Internet Explorer 1995-2015</div>
  </div>
</div><hr>
<h3> And I got hooked on.....</h3>
<div class="dropdown">
  <img src="https://www.ghacks.net/wp-content/uploads/2017/11/waterfox-56.png" alt="Waterfox" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://www.ghacks.net/wp-content/uploads/2017/11/waterfox-56.png" alt="Waterfox" width="300" height="200">
  <div class="desc">Waterfox</div>
  </div>
</div><hr>
<h4>Got a Mac Mini in 2013...<h4>
<div class="dropdown">
  <img src="http://www.rawinfopages.com/mac/sites/default/files/field/image/safari-700.jpg" alt="Safari" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://www.ghacks.net/wp-content/uploads/2017/11/waterfox-56.png" alt="Safari" width="300" height="200">
  <div class="desc">Safari</div>
  </div>
</div><hr>
<h5>Went to linux predominently in 2015</h5>
<div class="dropdown">
  <img src="https://static.makeuseof.com/wp-content/uploads/2009/08/image81.png" alt="firefox" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://static.makeuseof.com/wp-content/uploads/2009/08/image81.png" alt="firefox" width="300" height="200">
  <div class="desc">firefox</div>
  </div>
</div><hr>
<h6>Now I'm using Win10 to learn coding...</h6>
<div class="dropdown">
  <img src="https://c.slashgear.com/wp-content/uploads/2012/02/resolve_static.png" alt="Chrome" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://c.slashgear.com/wp-content/uploads/2012/02/resolve_static.png" alt="Chrome" width="300" height="200">
  <div class="desc">Chrome</div>
  </div>
</div><hr>
</body>
</html>
Posted by at No comments:

38 IMDB 2015 movie table

The code contains some JS as well (designer's notes included in .html):

<!DOCTYPE html>
<html>
    <header>
        <script type="text/javascript">
//
// Description: Randomly change background color every 5 seconds
//
// NewcWare 1997
// Author: Scott Newcomer 3/1997
// Email: nuke@bright.net
//
function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
 ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;

}
</script>
<body onload="setbackground();">
    </header>
        <body>
            <h1 style="align: midlle; background-color: red;"> Here we are</h1>
           
<table style="width:100%">
  <caption>IMDB 2015 Top 5 Movies</caption>
  <tr>
    <th>Movie Name:</th>
    <th>IMDB Star rating</th>
  </tr>
  <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt3774694/?ref_=adv_li_i">Love</a></td>
    <td style="text-align: center;">6</td>
  </tr>
  <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt2395427/?ref_=adv_li_i">Avegers: Rise of Ultron</a></td>
    <td style="text-align: center;">7.3</td>
  </tr>
   <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt3170832/?ref_=adv_li_i">Room</a></td>
    <td style="text-align: center;">8.2</td>
  </tr>
   <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt1392190/?ref_=adv_li_i">Mad Max: Fury Road</a></td>
    <td style="text-align: center;">8.1</td>
  </tr>
   <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt3460252/?ref_=adv_li_i">The Hateful Eight</a></td>
    <td style="text-align: center;">7.8</td>
  </tr>
</table>

<img src="https://m.media-amazon.com/images/M/MV5BMTQzNDUwODk5NF5BMl5BanBnXkFtZTgwNzA0MDQ2NTE@._V1_UY268_CR4,0,182,268_AL_.jpg" alt="Love cover shot"><img src="https://m.media-amazon.com/images/M/MV5BMTM4OGJmNWMtOTM4Ni00NTE3LTg3MDItZmQxYjc4N2JhNmUxXkEyXkFqcGdeQXVyNTgzMDMzMTg@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Avengers 2"><img src="https://m.media-amazon.com/images/M/MV5BMjE4NzgzNzEwMl5BMl5BanBnXkFtZTgwMTMzMDE0NjE@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Room cover"><img src="https://m.media-amazon.com/images/M/MV5BN2EwM2I5OWMtMGQyMi00Zjg1LWJkNTctZTdjYTA4OGUwZjMyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Mad Max cover"><img src="https://m.media-amazon.com/images/M/MV5BMjA1MTc1NTg5NV5BMl5BanBnXkFtZTgwOTM2MDEzNzE@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Hateful 8 cover">
</body>
</html>
Posted by at No comments:

36 Color the caption?

Here is the code:

<!DOCTYPE html>
<html>
<header>

</header>
    <body>
        <h1 style="color:white; background-color: black;">Where am I going?</h1>
        <h2 style="color: gold; background-color: grey;">Is it with you?</h2>
        <p mark style="background-color: rgb(255,0,0);"><b>GO HERE!</b></p>
        <p style="line-height: 3.0; background-color: lightgreen; color: grey;"> Or here?</p>
        <p style="background-color: pink;">A sailor went to sea, sea, sea</p>
        <p style="background-color: lightblue;">To see what he could see, see, see</p>
        <hr>
        <p style="background-color: rgb(120,120,120);">But all that he could see, see, see</p>
        <p style="color: white; background-color: rgb(25,25,25);">Was the bottom of the deep blue sea, sea sea</p>
        <p style="background-color:#787878;">Twinkle, twinkle, little star</p>
        <p style="background-color:#aaaaaa;">How I wonder what you are"</p>
        <p style="background-color:#bbbbbb;">Up above the word so high</p>
        <p style="background-color:#cccccc;">Like a diamond in the sky</p>
    </body>
        </html>
Posted by at No comments:

Thursday, April 11, 2019

34 fav Hobby

This starts on the first page, which links to the second "main" page:


First:

<!DOCTYPE html>
<html>
<header>
<style>
body {  background-color: #cc0000;}
h1 { font-size: 140px; color: blue; text-align: center;}
h2 { color:red; text-align:left;}
h3 {color: rgb(255,234,12);}
p.fish {text-align: middle; font-size: 140px;}
p.dog {text-align: center;}
</style>
</header>
<body
<h1 style=""><b> Warhammer 40,000</b></h1></font>
<h2>In the future.....there is only WAR!!</h2>
<br>
<p><del>I choose you Pikachu...</del></p>
<p><small> let's try that again</small></p>
<p class=fish><br><a href="34 Warhammer.html" alt="The main page">The Blood Angels</a></p>
</body>



Second "main":
<!DOCTYPE html>
<html>
<header>
<style>
body { background-color: black;}
h1 {color: white; }
h2 { color: rgb(255,0,0) }
p { color: white; }
</style>
</header>
<body>
<img src="https://warhammerart.com/wp-content/uploads/2015/10/JB124-Blood-Angel-v-Orks.jpg" alt+"Blood Angels army" style="width: 45%; height: 320px;"align="middle">
<br>
<br>
<h1 align="middle">Warhammer 40,000</h1>
<h2 align="middle">Blood Angels</h2><br><hr><br>
<p style="text-color: white;"><strong>I started collecting models back in 1992. <sup>Age</sup><sub>12<img style= "float: right;" src="https://cdn.shopify.com/s/files/1/0973/0376/products/mail_c7af8081-32de-45c5-9bd0-ec8bebb089b9.jpg?v=1548114472"></sub></strong></p>
<p> although, I didn't really play the game till I turned <em>14</em> <i>('94)</i>.</p><br><br>
<p style="font-size: 60px;"><mark>I really started collecting after I turned 19.</mark></p>
<hr>
<h2>You start with an unpainted figure</h2>
<img src="https://www.picclickimg.com/d/l400/pict/113479209926_/Warhammer-40K-Space-Marine-Blood-Angels-Death-Company.jpg" alt="Unpainted Blood Angels Dreadnaught">
<br><p align="middle"><small>Which you then paint</small></p>
<img src="https://www.frontlinegaming.org/wp-content/uploads/2016/03/Death-Dread.jpg" alt="Blood Angels Death Company Dreadnaught">

<p align="middle"><ins>The pictures are Decals</ins></p>
<p><small>I wish I could paint like the pictures :(</small></p>
</body>
</html>
Posted by at No comments:

Wednesday, April 10, 2019

19 HTML Attributes exercises 1-4

Done the 4 exercises:


Posted by at No comments:

Monday, April 8, 2019

32 CSS exercises 1-4

:)

Had to reload the third exercise.
For some reason, even though I got the answer right on the second attempt,
it would not alter anything till I reload the exercise.
Posted by at No comments:

30 Polytechnic linking

Here's the code:

<!DOTYPE html>
<html>
<header>
OP Linked
</header>
<body>
<img src="LivingCampus-MAP3-10x.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="M block" title="M block" href="http://logicgroup.co.nz/wp-content/uploads/2018/12/IMG_8475-002-960x1442.jpg" coords="189,200,201,223" shape="rect">
    <area target="" alt="D block" title="D block" href="https://i.ytimg.com/vi/7cXEOWAStq4/maxresdefault.jpg" coords="123,223,158,257" shape="rect">
    <area target="" alt="F block" title="F block" href="https://www.odt.co.nz/sites/default/files/styles/odt_landscape_extra_large_21_10/public/story/2017/02/rainbow_hub_200217.jpg?itok=3lWQwBoA" coords="123,283,159,312" shape="rect">
    <area target="" alt="A block" title="A block" href="https://www.op.ac.nz/assets/infosheets/_resampled/FillWyIzMTciLCIyNDIiXQ/ABE-gen-Electrical-012-10x.jpg" coords="66,251,48,263,86,307,108,292" shape="poly">
    <area target="" alt="H block" title="H block" href="https://s3-media1.fl.yelpcdn.com/bphoto/2YGPDECwV8oPV-giKqKO4w/ls.jpg" coords="163,293,214,335" shape="rect">
    <area target="" alt="G block" title="G block" href="https://www.google.com/maps/uv?hl=en&amp;pb=!1s0xa82eac69c34b94c9:0x68a52f2e7d0736a3!2m22!2m2!1i80!2i80!3m1!2i20!16m16!1b1!2m2!1m1!1e1!2m2!1m1!1e3!2m2!1m1!1e5!2m2!1m1!1e4!2m2!1m1!1e6!3m1!7e115!4shttps://lh5.googleusercontent.com/p/AF1QipMfC52Tc8UikzPImK4vUu-lyxK4lrAxooiIH02P%3Dw239-h160-k-no!5sotago+polytechnic++Massage+Clinic+-+Google+Search&amp;imagekey=!1e10!2sAF1QipMfC52Tc8UikzPImK4vUu-lyxK4lrAxooiIH02P&amp;sa=X&amp;ved=2ahUKEwjjwvziicLhAhUQGKYKHQuvAlkQoiowCnoECA0QBg#" coords="219,251,202,286,221,290,238,258" shape="poly">
</map>
</body>
</html>
Posted by at No comments:
Subscribe to: Posts (Atom)