All images are in my /Documents/My webpages/ folder....
Link to Wordpress page: http://easterhead.home.blog/author/badtabnz/
If you click the home page l;ink, I had no part in creating the home page...
Photo:
Monday, May 27, 2019
57 Wordpress SUCKS
Word press is so limiting in what you can do......now I know html/css/JS
All images are in my /Documents/My webpages/ folder....
Link to Wordpress page: http://easterhead.home.blog/author/badtabnz/
If you click the home page l;ink, I had no part in creating the home page...
Photo:
All images are in my /Documents/My webpages/ folder....
Link to Wordpress page: http://easterhead.home.blog/author/badtabnz/
If you click the home page l;ink, I had no part in creating the home page...
Photo:
Wednesday, May 22, 2019
just playing with color blends and max-height / width
File is: blank.html
If I try to color blend the body, the page becomes lined.
If I leave it as a <div> then it works fine...
code:
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css"
</head>
<body>
<div><p style="text-align: center;">Here we go<br> A short look at wolverines<br> not the damn cartoon character<br>I mean the vicous little beasts that will take on great odds to defend their territory<br>or just for the hell of it<br>The Irish and Scottish of the beast world</p></div>
</body>
</html>
common.css:
body { margin:0 auto; background: #4dc3ff;}
div {
min-width: 80vh: min-height: 80vh; max-width: 90vw; max-height: 90vh;
color: white;
background: linear-gradient(to bottom right, #3333ff 0%, #990000 100%)
}
If I try to color blend the body, the page becomes lined.
If I leave it as a <div> then it works fine...
code:
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css"
</head>
<body>
<div><p style="text-align: center;">Here we go<br> A short look at wolverines<br> not the damn cartoon character<br>I mean the vicous little beasts that will take on great odds to defend their territory<br>or just for the hell of it<br>The Irish and Scottish of the beast world</p></div>
</body>
</html>
common.css:
body { margin:0 auto; background: #4dc3ff;}
div {
min-width: 80vh: min-height: 80vh; max-width: 90vw; max-height: 90vh;
color: white;
background: linear-gradient(to bottom right, #3333ff 0%, #990000 100%)
}
Monday, May 20, 2019
54 Header tags
The file is: 54.html
The code is:
<!DOCTYPE html>
<html>
<head>
<title>Head details</title> <!-- Title -->
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials"> <!-- Text information for the document -->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!-- search engine references -->
<meta name="Chris Talbot" content="Same guy"> <!-- my name / who made the site -->
<style> body {background-image: URL("https://images.unsplash.com/photo-1496396543879-72dd3ec34186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");}
</style> <!-- Background image from https://unsplash.com/collections/651580/webpage-backgrounds -->
<script> <!-- JavaScript -->
function myFunction() {
document.getElementById("demo").innerHTML = "A fish can swim!";
}
</script>
</head>
<body>
<br><p>All meta information goes before the body.</p><br>
<h1>My Web Page</h1>
<p id="demo">A Paragraph of great importance</p>
<button type="button" onclick="myFunction()">Press to reveal</button>
</body>
</html>
The code is:
<!DOCTYPE html>
<html>
<head>
<title>Head details</title> <!-- Title -->
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials"> <!-- Text information for the document -->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!-- search engine references -->
<meta name="Chris Talbot" content="Same guy"> <!-- my name / who made the site -->
<style> body {background-image: URL("https://images.unsplash.com/photo-1496396543879-72dd3ec34186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");}
</style> <!-- Background image from https://unsplash.com/collections/651580/webpage-backgrounds -->
<script> <!-- JavaScript -->
function myFunction() {
document.getElementById("demo").innerHTML = "A fish can swim!";
}
</script>
</head>
<body>
<br><p>All meta information goes before the body.</p><br>
<h1>My Web Page</h1>
<p id="demo">A Paragraph of great importance</p>
<button type="button" onclick="myFunction()">Press to reveal</button>
</body>
</html>
56 CSS boxes?
File is: 56.html
Code is:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>This text <del>is the content of the box.</del>Dunedin is cold: the wind is cold. The rain is cold. The hail is cold. Bugger this for a joke; I'm moving to Invercargill</div>
</body>
</html>
Code is:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>This text <del>is the content of the box.</del>Dunedin is cold: the wind is cold. The rain is cold. The hail is cold. Bugger this for a joke; I'm moving to Invercargill</div>
</body>
</html>
55 Layouts
File is: 55.html
Code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chris's Dunedin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>Dunedin</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Places to see</a></li>
<li><a href="#">Things to eat</a></li>
<li><a href="#">What to do</a></li>
</ul>
</nav>
<article>
<h1>Where to go</h1>
<p>I'd personally recommend Queenstown;</p>
<p>Although, if you have to come to Dunedin: Try the Museum, catch an event at the Frans-Bar stadium, Inflatable world, the skating rink, The Octogon, a park...WHATEVER</p>
</article>
</section>
<footer>
<p>Footer ?? Like... Duh!</p>
</footer>
</body>
</html>
Code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chris's Dunedin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>Dunedin</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Places to see</a></li>
<li><a href="#">Things to eat</a></li>
<li><a href="#">What to do</a></li>
</ul>
</nav>
<article>
<h1>Where to go</h1>
<p>I'd personally recommend Queenstown;</p>
<p>Although, if you have to come to Dunedin: Try the Museum, catch an event at the Frans-Bar stadium, Inflatable world, the skating rink, The Octogon, a park...WHATEVER</p>
</article>
</section>
<footer>
<p>Footer ?? Like... Duh!</p>
</footer>
</body>
</html>
Wednesday, May 15, 2019
53
Code so far:
<!DOCTYPE html>
<html>
<head>
<title>Wolverine css dimensions</title>
<style>body {background-color: green;} </style>
</head>
<body style=" margin:0 auto;" >
<div></div> <!-- Mason helped me to understand the max- commands.. -->
<div style=" max-width: 650px; height; 20px; width: 80vw; background-color: red;"><p>They smell REALLY bad</p></div><br>
<div style=" max-height: 60vh; height: 80vh; width: 50vw; border: dotted; background-color: powderblue;"><p>They will eat nearly anything they come across, plane or animal</p></div><br>
<div style=" 50px
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Wolverine css dimensions</title>
<style>body {background-color: green;} </style>
</head>
<body style=" margin:0 auto;" >
<div></div> <!-- Mason helped me to understand the max- commands.. -->
<div style=" max-width: 650px; height; 20px; width: 80vw; background-color: red;"><p>They smell REALLY bad</p></div><br>
<div style=" max-height: 60vh; height: 80vh; width: 50vw; border: dotted; background-color: powderblue;"><p>They will eat nearly anything they come across, plane or animal</p></div><br>
<div style=" 50px
</body>
</html>
52
Three padded sentences
File 52.html
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div { padding: 70px 100px 20px 10px; border: 1px dotted #4CAF50;}
h1 { padding: 10px 200px 10px 50px; border: 5px inset red;}
h2 { padding: 10px; border: 3px outset #AAAAAA;}
</style>
</head>
<body>
<h1>The Wolverine is an evil bastard to fight</h1>
<div>The Wolverine is a territorial animal</div>
<h2>They a solo hunters</h2>
</body>
</html>
File 52.html
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div { padding: 70px 100px 20px 10px; border: 1px dotted #4CAF50;}
h1 { padding: 10px 200px 10px 50px; border: 5px inset red;}
h2 { padding: 10px; border: 3px outset #AAAAAA;}
</style>
</head>
<body>
<h1>The Wolverine is an evil bastard to fight</h1>
<div>The Wolverine is a territorial animal</div>
<h2>They a solo hunters</h2>
</body>
</html>
51 three pics file paths different
The file is located and based in the .../Documents/My Web Sites/51 directory.
Where you will find a file called 51.html and the first image used as the background image.
Image 2 is in the 51/images folder.
Image 3 is in the My Web Pages folder 1 folder up.
The code:
<!doctype html>
<html lang="en">
<head>
<title>3 Images</title>
<style>
body { background-image: URL("images-5.jpg")}</style>
</head ><body>
<h1 style=" background-color: red;"> Image 2</h1>
<img src="image/Big_smile.png" alt="Big smile">
<h2 style=" background-color: red;">Image 3</h2>
<img src="../smiley face.jpg" alt="smiley face">
</body>
Where you will find a file called 51.html and the first image used as the background image.
Image 2 is in the 51/images folder.
Image 3 is in the My Web Pages folder 1 folder up.
The code:
<!doctype html>
<html lang="en">
<head>
<title>3 Images</title>
<style>
body { background-image: URL("images-5.jpg")}</style>
</head ><body>
<h1 style=" background-color: red;"> Image 2</h1>
<img src="image/Big_smile.png" alt="Big smile">
<h2 style=" background-color: red;">Image 3</h2>
<img src="../smiley face.jpg" alt="smiley face">
</body>
Monday, May 13, 2019
49 JS'ing
My first code is a simple delay timer.
The original code I gathered is within the JQ trial1.html
The second JS is a transitional effect:
The original code is in JS trial 2.html
In 49.html
Click bands to see them appear.
Click run and hid to see the...run and hide
The code:
<!doctype html>
<html lang="en"> <!-- JS both from jquery.com -->
<head>
<meta charset="utf-8">
<title>delay effect</title>
<style>
div {
position: absolute;
width: 220px;
height: 160px;
float: left;
}
.first {
background-image: url("NIN.jpg");
left: 0;
}
.second {
left: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>The bands</button></p>
<div class="first"></div>
<div class="second"><img src="Syd Barett lead pink floyd.jpg" usemap="#image-map">
<!-- had help from Nabeel to do this-->
<map name="image-map">
<area target="" alt="Syd Barret Pink Floyd" title="Syd Barret Pink Floyd" href="" coords="2,2,239,205" shape="rect">
</map></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><input type="button" value="Run and hide"></p>
<div></div>
<script>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
jQuery.fx.interval = 100;
$( "input" ).click(function() {
$( "div" ).toggle( 3000 );
});
</script>
</body>
</html>
The original code I gathered is within the JQ trial1.html
The second JS is a transitional effect:
The original code is in JS trial 2.html
In 49.html
Click bands to see them appear.
Click run and hid to see the...run and hide
The code:
<!doctype html>
<html lang="en"> <!-- JS both from jquery.com -->
<head>
<meta charset="utf-8">
<title>delay effect</title>
<style>
div {
position: absolute;
width: 220px;
height: 160px;
float: left;
}
.first {
background-image: url("NIN.jpg");
left: 0;
}
.second {
left: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>The bands</button></p>
<div class="first"></div>
<div class="second"><img src="Syd Barett lead pink floyd.jpg" usemap="#image-map">
<!-- had help from Nabeel to do this-->
<map name="image-map">
<area target="" alt="Syd Barret Pink Floyd" title="Syd Barret Pink Floyd" href="" coords="2,2,239,205" shape="rect">
</map></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><input type="button" value="Run and hide"></p>
<div></div>
<script>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
jQuery.fx.interval = 100;
$( "input" ).click(function() {
$( "div" ).toggle( 3000 );
});
</script>
</body>
</html>
Wednesday, May 8, 2019
48 JS sharing
15 Useful Code Sharing Websites for Web Developers: https://www.designbombs.com/code-sharing-websites/
Dabblet: http://dabblet.com/
Liveweave: https://liveweave.com/
hmm...not really JavaScript sharing pages......Although I do love Liveweave...
Try:
TogetherJS at https://togetherjs.com/ ???I can't seem to find useful information in this site...Just me...
But it seems non-noob user friendly.
CAA script at https://www.cssscript.com/tag/social-share/
Straight on the front page I can see options to go share stuff... Just looks friendlier.
Dabblet: http://dabblet.com/
Liveweave: https://liveweave.com/
hmm...not really JavaScript sharing pages......Although I do love Liveweave...
Try:
TogetherJS at https://togetherjs.com/ ???I can't seem to find useful information in this site...Just me...
But it seems non-noob user friendly.
CAA script at https://www.cssscript.com/tag/social-share/
Straight on the front page I can see options to go share stuff... Just looks friendlier.
Plus the great sit jquery.com
My favorite is the one I have already used: It changes the background color randomly every 5 seconds. Obtained at: https://www.computerhope.com/javascript/random-color.htm
Monday, May 6, 2019
47 div classes with margins
File =: 47.html
Learned points... w3schools listed Margin-top margin-bottome margin-right and margin-left. However, when short cutting it goes Margin: Top Right Bottom Left.
I took a while getting my .c div right :)
Code:
<!DOCTYPE html>
<html>
<head>
<title> 47 Wolverine facts</title>
<style>
.a {border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue;}
.b { background-color: red; border: 5px solid blue; margin: 100px 100px 150px 70px;}
.c { border: 3px dotted blue; margin: 25px 550px 80px 100px;}
.d { color: white; background-color: black; border: 10px solid red; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left:30px;}
</style>
</head>
<body>
<div class="a">
<p>The wolverine lives in the remote Arctic and sub-Artic regions of the world.</p>
</div>
<div class="b">
<p>The wolverine is a powerful animal that resembles a small bear but is actually the largest member of the Mustelidae (weasel) family.</p>
</div>
<div class="c">
<p>Wolverines have an average lifespan between 7 and 12 years in the wild.</p>
</div>
<div class="d">
<p>Wolverines live primarily in isolated regions of northern Canada, Alaska, Siberia, and Scandinavia.</p>
</div>
</body>
</html>
Learned points... w3schools listed Margin-top margin-bottome margin-right and margin-left. However, when short cutting it goes Margin: Top Right Bottom Left.
I took a while getting my .c div right :)
Code:
<!DOCTYPE html>
<html>
<head>
<title> 47 Wolverine facts</title>
<style>
.a {border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue;}
.b { background-color: red; border: 5px solid blue; margin: 100px 100px 150px 70px;}
.c { border: 3px dotted blue; margin: 25px 550px 80px 100px;}
.d { color: white; background-color: black; border: 10px solid red; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left:30px;}
</style>
</head>
<body>
<div class="a">
<p>The wolverine lives in the remote Arctic and sub-Artic regions of the world.</p>
</div>
<div class="b">
<p>The wolverine is a powerful animal that resembles a small bear but is actually the largest member of the Mustelidae (weasel) family.</p>
</div>
<div class="c">
<p>Wolverines have an average lifespan between 7 and 12 years in the wild.</p>
</div>
<div class="d">
<p>Wolverines live primarily in isolated regions of northern Canada, Alaska, Siberia, and Scandinavia.</p>
</div>
</body>
</html>
46 iframes youtube
All are Autoplay and looped. 2nd has controls disabled
File = 46.html
Code is:
<!DOCTYPE html>
<html>
<header>
<title>You tuding</title>
</header>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MhzxEfYR_nk?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h1><b> Next vid has no controls</b></h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iJhMen5H9KM?playlist=ithw-xIyd_8&loop=1&autoplay=1&showinfo=0&controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<iframe controls; width="560" height="315" src="https://www.youtube.com/embed/VeAK7Bv4F1o?playlist=ithw-xIyd_8&loop=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body></html>
File = 46.html
Code is:
<!DOCTYPE html>
<html>
<header>
<title>You tuding</title>
</header>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MhzxEfYR_nk?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h1><b> Next vid has no controls</b></h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iJhMen5H9KM?playlist=ithw-xIyd_8&loop=1&autoplay=1&showinfo=0&controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<iframe controls; width="560" height="315" src="https://www.youtube.com/embed/VeAK7Bv4F1o?playlist=ithw-xIyd_8&loop=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body></html>
43 Surreal animals PLUS a ordered list
The file: 43.html
The code:
<!DOCTYPE html>
<html>
<head>
<title>Surreal Animals</title>
<style>
body {background-color:blue;}
table{ color: red;}
h1 {color: red;}
</style></head>
<body>
<h1>top 5 Surreal animals and where to find them<h1>
<table>
<tr><th>Number</th><th>Animal</th><th>Location<th></tr>
<tr><td>10</td><td>The White wale</td><td>Off Mexico's coast</td></tr>
<tr><td>9</td><td>Stiletto Snake</td><td>Guinea/Liberia</td></tr>
<tr><td>8</td><td>Melting Fish</td><td>Atacama Trench</td></tr>
<tr><td>7</td><td>The Lagoon Blob</td><td>Vancouver</td></tr>
<tr><td>6</td><td>Football-Sized Isopods</td><td>Gulf of Mexico</td></tr>
<tr><td>5</td><td>Blue Lobster</td><td>A science center</td></tr>
<tr><td>4</td><td>An Enormous Bee</td><td>Bacan Islands</td></tr>
<tr><td>3</td><td>Arachnid with Rabbit ears</td><td>Amazon Rain Forest</td></tr>
<tr><td>2</td><td>Rainbow Squirrel</td><td>Indian Peninsula</td></tr>
<tr><td>1</td><td><i>Pyrosoma</i> Colony</td><td>White Island (NZ)</td></tr>
</table>
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/3-arachnid-with-rabbit-head.jpg" alt="Rabbit eared Arachnid" title="Rabbit eared? Wolf faced?">
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/4a-wallaces-giant-bee.jpg" alt="Wallace bee" title="But does it make honey float="right">
<br><h1 style="font-size: 80px;">My own preference:</h1>
<ol style="color: red;"> <!-- added code -->
<li>Arachnid with Rabbit ears - IT LOOKS LIKE A WOLF</li>
<li>Rainbow Squirrel - <b>It's a RAINBOW</b> pity it is not a breed of flying squirrel</li>
<li>Blue Lobster - Does it taste different?</li>
<li>An Enormous Bee - Does it produce honey? And if so, does it taste good?</li>
<li><i>Pyrosoma</i> Colony - Fellow kiwi's :)</li>
</ol>
</body></html>
The code:
<!DOCTYPE html>
<html>
<head>
<title>Surreal Animals</title>
<style>
body {background-color:blue;}
table{ color: red;}
h1 {color: red;}
</style></head>
<body>
<h1>top 5 Surreal animals and where to find them<h1>
<table>
<tr><th>Number</th><th>Animal</th><th>Location<th></tr>
<tr><td>10</td><td>The White wale</td><td>Off Mexico's coast</td></tr>
<tr><td>9</td><td>Stiletto Snake</td><td>Guinea/Liberia</td></tr>
<tr><td>8</td><td>Melting Fish</td><td>Atacama Trench</td></tr>
<tr><td>7</td><td>The Lagoon Blob</td><td>Vancouver</td></tr>
<tr><td>6</td><td>Football-Sized Isopods</td><td>Gulf of Mexico</td></tr>
<tr><td>5</td><td>Blue Lobster</td><td>A science center</td></tr>
<tr><td>4</td><td>An Enormous Bee</td><td>Bacan Islands</td></tr>
<tr><td>3</td><td>Arachnid with Rabbit ears</td><td>Amazon Rain Forest</td></tr>
<tr><td>2</td><td>Rainbow Squirrel</td><td>Indian Peninsula</td></tr>
<tr><td>1</td><td><i>Pyrosoma</i> Colony</td><td>White Island (NZ)</td></tr>
</table>
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/3-arachnid-with-rabbit-head.jpg" alt="Rabbit eared Arachnid" title="Rabbit eared? Wolf faced?">
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/4a-wallaces-giant-bee.jpg" alt="Wallace bee" title="But does it make honey float="right">
<br><h1 style="font-size: 80px;">My own preference:</h1>
<ol style="color: red;"> <!-- added code -->
<li>Arachnid with Rabbit ears - IT LOOKS LIKE A WOLF</li>
<li>Rainbow Squirrel - <b>It's a RAINBOW</b> pity it is not a breed of flying squirrel</li>
<li>Blue Lobster - Does it taste different?</li>
<li>An Enormous Bee - Does it produce honey? And if so, does it taste good?</li>
<li><i>Pyrosoma</i> Colony - Fellow kiwi's :)</li>
</ol>
</body></html>
Wednesday, May 1, 2019
42 Surreal animals
The file is called 42 Weird table.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>Surreal Animals</title>
<style>
body {background-color:blue;}
table{ color: red;}
h1 {color: red;}
</style></head>
<body>
<h1>top 5 Surreal animals and where to find them<h1>
<table>
<tr><th>Number</th><th>Animal</th><th>Location<th></tr>
<tr><td>10</td><td>The White wale</td><td>Off Mexico's coast</td></tr>
<tr><td>9</td><td>Stiletto Snake</td><td>Guinea/Liberia</td></tr>
<tr><td>8</td><td>Melting Fish</td><td>Atacama Trench</td></tr>
<tr><td>7</td><td>The Lagoon Blob</td><td>Vancouver</td></tr>
<tr><td>6</td><td>Football-Sized Isopods</td><td>Gulf of Mexico</td></tr>
<tr><td>5</td><td>Blue Lobster</td><td>A science center</td></tr>
<tr><td>4</td><td>An Enormous Bee</td><td>Bacan Islands</td></tr>
<tr><td>3</td><td>Arachnid with Rabbit ears</td><td>Amazon Rain Forest</td></tr>
<tr><td>2</td><td>Rainbow Squirrel</td><td>Indian Peninsula</td></tr>
<tr><td>1</td><td><i>Pyrosoma</i> Colony</td><td>White Island (NZ)</td></tr>
</table>
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/3-arachnid-with-rabbit-head.jpg" alt="Rabbit eared Arachnid" title="Rabbit eared? Wolf faced?">
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/4a-wallaces-giant-bee.jpg" alt="Wallace bee" title="But does it make honey float="right">
</body></html>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Surreal Animals</title>
<style>
body {background-color:blue;}
table{ color: red;}
h1 {color: red;}
</style></head>
<body>
<h1>top 5 Surreal animals and where to find them<h1>
<table>
<tr><th>Number</th><th>Animal</th><th>Location<th></tr>
<tr><td>10</td><td>The White wale</td><td>Off Mexico's coast</td></tr>
<tr><td>9</td><td>Stiletto Snake</td><td>Guinea/Liberia</td></tr>
<tr><td>8</td><td>Melting Fish</td><td>Atacama Trench</td></tr>
<tr><td>7</td><td>The Lagoon Blob</td><td>Vancouver</td></tr>
<tr><td>6</td><td>Football-Sized Isopods</td><td>Gulf of Mexico</td></tr>
<tr><td>5</td><td>Blue Lobster</td><td>A science center</td></tr>
<tr><td>4</td><td>An Enormous Bee</td><td>Bacan Islands</td></tr>
<tr><td>3</td><td>Arachnid with Rabbit ears</td><td>Amazon Rain Forest</td></tr>
<tr><td>2</td><td>Rainbow Squirrel</td><td>Indian Peninsula</td></tr>
<tr><td>1</td><td><i>Pyrosoma</i> Colony</td><td>White Island (NZ)</td></tr>
</table>
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/3-arachnid-with-rabbit-head.jpg" alt="Rabbit eared Arachnid" title="Rabbit eared? Wolf faced?">
<img src="http://listverse.wpengine.netdna-cdn.com/wp-content/uploads/2019/04/4a-wallaces-giant-bee.jpg" alt="Wallace bee" title="But does it make honey float="right">
</body></html>
40 Borders
5 facts about the Wolverine...with different borders...
File = 40 Borders.html
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.m {border-style: dotted dashed double solid;}
p.do {border-style: dotted;}
p.out {border-style: outset;}
p.is {border-style: inset;}
p.gr {border-style: groove;}
</style>
</head>
<body>
<h1 style="color: red; font-size: 120;">The Wolverine<h1><br>
<p class="out">Known as the 'Protector of the North.'</p><br>
<p class="gr">Will take on any fight regardless of ability to win.</p><br>
<p class="do">They are known for their horrible smell.</p><br>
<p class="is">Unlike most animals, they have a large territory they roam constantly. Upto 20+ Miles.</p><br>
<p class="m">Like the comic book character, they are small animals. About the same size as a badger, which they are commonly mistaken for.</p>
</body>
<html>
File = 40 Borders.html
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.m {border-style: dotted dashed double solid;}
p.do {border-style: dotted;}
p.out {border-style: outset;}
p.is {border-style: inset;}
p.gr {border-style: groove;}
</style>
</head>
<body>
<h1 style="color: red; font-size: 120;">The Wolverine<h1><br>
<p class="out">Known as the 'Protector of the North.'</p><br>
<p class="gr">Will take on any fight regardless of ability to win.</p><br>
<p class="do">They are known for their horrible smell.</p><br>
<p class="is">Unlike most animals, they have a large territory they roam constantly. Upto 20+ Miles.</p><br>
<p class="m">Like the comic book character, they are small animals. About the same size as a badger, which they are commonly mistaken for.</p>
</body>
<html>
Subscribe to:
Posts (Atom)