6/10/2017 HTML Website
In the last lesson we've been asked to produce an artwork using HTML language.
I had a lot of fun with it really, but I wouldn't certainly call mine artwork.
I kind of created a fake website about cats, mainly because I wanted to experiment a lot of different possibilities using HTML.
Here's the script:
<html>
<head>
<title>Cats Website</title>
</head>
<body bgcolor=pink>
<p style="color:pink;"><h1><h1 style="border:2px solid DodgerBlue;">RANDOM CATS WEBSITE</h1>
Hello there ,
You're the millionth customer at <a href="https//www.w3scgools.com">www.rainbowcats.com</a>
<p>Welcome to this amazing website about cats.</p>
<button> Free cats</button>
<table border=70>
</table>
<button> Everywhere</button>
<table border=70>
</table>
<button> !!1</button>
<table border=70>
</table>
<img src="http://www.discoverfrome.co.uk/wp-content/uploads/2017/06/cat.jpg" alt="Little cat" style="width:304px;height:228px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cnKR9Ns6s6vrIxWzP-q3Ag70rjx6uJUjQPtFwgp8_Gq9W2rufiebW-xAXeLk9qHOk_Td3PSCOtu_LoKzYlmJq4x4l7e7S98_-b79i5HIeshYmp-jhXZYzbDMMd2qqg3ikFII5DAQ-n8/s1600/Brazilian+Shorthair+cat+breed_039.jpg" alt="Little cat" style="width:304px;height:228px;">
<p>Which gender would you like your new cat to have?</p>
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p>Amazing, now chose the colour:</p>
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cats">
<option value="white">White</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="rainbow">Rainbow</option>
</select>
</form>
</body>
</html>
<p>Now please, imput here your personal information so we can send you your cat.</p>
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
Address line 1: <input type="text" size="30"><br>
Address line 2: <input type="text" size="30"><br>
Credit card number (just to make sure you're a real person (-; ): <input type="text" size="30">
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Now click here and we'll send you your newborn kitten straight away!</p>
<button type="button" onclick="myFunction()">Meow</button>
<p id="demo">Waiting for confirmation...</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Sent!";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Have a look at the time, your kitten will be soon yours. </h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
</body>
</html>
As I really enjoyed it I will keep going and edit it until it becomes a supercool website full of stuff and pop ups that will brake the compter (-:
Eleonora
Images sources in the script.
I had a lot of fun with it really, but I wouldn't certainly call mine artwork.
I kind of created a fake website about cats, mainly because I wanted to experiment a lot of different possibilities using HTML.
<html>
<head>
<title>Cats Website</title>
</head>
<body bgcolor=pink>
<p style="color:pink;"><h1><h1 style="border:2px solid DodgerBlue;">RANDOM CATS WEBSITE</h1>
Hello there ,
You're the millionth customer at <a href="https//www.w3scgools.com">www.rainbowcats.com</a>
<p>Welcome to this amazing website about cats.</p>
<button> Free cats</button>
<table border=70>
</table>
<button> Everywhere</button>
<table border=70>
</table>
<button> !!1</button>
<table border=70>
</table>
<img src="http://www.discoverfrome.co.uk/wp-content/uploads/2017/06/cat.jpg" alt="Little cat" style="width:304px;height:228px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cnKR9Ns6s6vrIxWzP-q3Ag70rjx6uJUjQPtFwgp8_Gq9W2rufiebW-xAXeLk9qHOk_Td3PSCOtu_LoKzYlmJq4x4l7e7S98_-b79i5HIeshYmp-jhXZYzbDMMd2qqg3ikFII5DAQ-n8/s1600/Brazilian+Shorthair+cat+breed_039.jpg" alt="Little cat" style="width:304px;height:228px;">
<p>Which gender would you like your new cat to have?</p>
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p>Amazing, now chose the colour:</p>
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cats">
<option value="white">White</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="rainbow">Rainbow</option>
</select>
</form>
</body>
</html>
<p>Now please, imput here your personal information so we can send you your cat.</p>
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
Address line 1: <input type="text" size="30"><br>
Address line 2: <input type="text" size="30"><br>
Credit card number (just to make sure you're a real person (-; ): <input type="text" size="30">
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Now click here and we'll send you your newborn kitten straight away!</p>
<button type="button" onclick="myFunction()">Meow</button>
<p id="demo">Waiting for confirmation...</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Sent!";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Have a look at the time, your kitten will be soon yours. </h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
</body>
</html>
As I really enjoyed it I will keep going and edit it until it becomes a supercool website full of stuff and pop ups that will brake the compter (-:
Eleonora
Images sources in the script.
Comments
Post a Comment