Lvl 4 Web Development 2019 by Chris Talbot: March 2019

Monday, March 25, 2019

28 DCC

The code:

	<!DOCTYPE html>

	<html>

	<body>

	<h2>New to Dunedin?</h2>

	<h2> Want to bug the council?</h2>
	<a href="https://www.dunedin.govt.nz/">
	<img src="https://www.nzherald.co.nz/resizer/dxdOtLzEeRJWTF9GiK--wVc5H00=/360x384/filters:quality(70)/arc-anglerfish-syd-prod-nzme.s3.amazonaws.com/public/BWDOY2UW6FFRVJTQUWV4PRI2PE.jpg" alt"Dunedin City Council">
	</a?


	</body>

	</html>

29 Image Map Solar System

The code

	<!DOCTYPE html>
	<html>
	<body>
	<img src="solar_system_menu.jpg" usemap="#image-map">

	<map name="image-map">
	<area target="" alt="Mercury" title="Mercury" href="https://space-facts.com/mercury/" coords="205,219,23" shape="circle">
	<area target="" alt="Venus" title="Venus" href="https://space-facts.com/venus/" coords="235,266,24" shape="circle">
	<area target="" alt="Earth" title="Earth" href="https://space-facts.com/earth/" coords="316,210,28" shape="circle">
	<area target="" alt="Mars" title="Mars" href="https://space-facts.com/mars/" coords="380,298,346,261" shape="rect">
	<area target="" alt="Jupiter" title="Jupiter" href="https://space-facts.com/jupiter/" coords="486,259,48" shape="circle">
	<area target="" alt="Saturn" title="Saturn" href="https://space-facts.com/saturn/" coords="554,151,55" shape="circle">
	<area target="" alt="Uranus" title="Uranus" href="https://space-facts.com/uranus/" coords="656,284,31" shape="circle">
	<area target="" alt="Neptune" title="Neptune" href="https://space-facts.com/neptune/" coords="755,185,30" shape="circle">
	<area target="" alt="Pluto" title="Pluto" href="https://space-facts.com/pluto/" coords="789,73,13" shape="circle">
	<area target="" alt="Asteroids" title="Asteroids" href="https://en.wikipedia.org/wiki/Asteroid" coords="389,110,361,147,440,212" shape="poly">
	<area target="" alt="Comets" title="Comets" href="https://en.wikipedia.org/wiki/Comet" coords="312,72,291,89" shape="rect">
	<area target="" alt="The Sun" title="The Sun" href="https://en.wikipedia.org/wiki/Sun" coords="0,136,175" shape="circle">
	</map>

	</body>
	</html>

Saturday, March 23, 2019

Wednesday, March 20, 2019

The <head> tag describes what the document is.
Okay, by this I mean 'It can' contain information (metadata) about the document;
The author, date of publication, Name of document...
And beyond that it can also contain the CSS style that the document will contain.

Meanwhile, the <body> tag is what is the the html that the browser displays to the user.
Full of <h...> (Headings) and <p> (Paragraphs) images and links.

Here is my Example .html script:

<!DOCTYPE html>

<html>

<head>

<title>What will appear in the browser tag</title>

<style>

h1 {

font-size: 56px;

}

p {

font-size: 122px;

}

</style>

</head>

<body>

<h1> The Beginning</h1>

</body>

</html>

Wednesday, March 13, 2019

My fav pet EXTERNAL

wolverine.css

<head>
<style>
body {background-color: green;}
h1 {color: red; margin-left: 40px;} 
</style>
</head>

The Html

<head>
<style>
body {background-color: green;}
h1 {color: red; margin-left: 40px;} 
</style>
</head>

Fav pet INLINE

<!DOCTYPE html>
<html>

<body>
<br>
<h1>The <u>Wolverine</u></h1>
<br>
<img src="https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/w/wolverine_thumb.ngsversion.1486962018155.adapt.1900.1.JPG" alt="a wolverine" style="width: 50%; height: 480;">
<br>
<p>Not</p>
<p><b>THIS</b></p>
<img src="https://static1.squarespace.com/static/51b3dc8ee4b051b96ceb10de/t/533f0ce9e4b02233d742e44d/1434444129978/actors-who-could-replace-hugh-jackman-as-wolverine10?format=2500w" alt="Hugh jackman as Wolverine" style="width: 50%; height: 480;">

</body>
<html>

Fav pet INTERNAL

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: red; }
h1 {color: green; display: block; margin-left: auto; margin-right: auto;}
p {color: grey;}
img {display: block; margin-left: auto; margin-right: auto; width:50%; height: 450px;}
</style>
</head>
<body>
<br>
<h1>The <u>Wolverine</u></h1>
<br>
<img src="https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/w/wolverine_thumb.ngsversion.1486962018155.adapt.1900.1.JPG" alt="a wolverine">
<br>
<p>Not</p>
<p><b>THIS</b></p>
<img src="https://static1.squarespace.com/static/51b3dc8ee4b051b96ceb10de/t/533f0ce9e4b02233d742e44d/1434444129978/actors-who-could-replace-hugh-jackman-as-wolverine10?format=2500w" alt="Hugh jackman as Wolverine">

</body>
<html>

24

Monday, March 11, 2019

23

	<!DOCTYPE html>
	<html>
	<body>

	<h1><u>Chris</u></h1>
	<h2>T</h2>
	<h3>A</h3>
	<h4>L</h4>
	<h5>B</h5>
	<h6>O</h6>
	<h1>T<h1>

	</body>
	</html>

22

	<!DOCTYPE html>
	<html>


	<p><img src="trippin.jpg" alt="trippin" style={float:right}"width:20px; height:20px;>
	This writing is not for oral consumption
	</p>
	<br>
	<br>
	<br><br><br>

	<style>
	img {float: left;}>

	</style>
	<p> <img src="https://media3.giphy.com/media/3oriNOzfsvR7u3csSI/200w.webp?cid=3640f6095c8721134454684251183ae4`"> EAT ME </p>




	</body>
	</html> Which gives:

21

	<!DOCTYPE html>

	<html>

	<body>

	<h2>New to Dunedin?</h2>

	<h2> Want to bug the council?</h2>
	<a href="https://www.dunedin.govt.nz/">
	<img src="https://www.nzherald.co.nz/resizer/dxdOtLzEeRJWTF9GiK--wVc5H00=/360x384/filters:quality(70)/arc-anglerfish-syd-prod-nzme.s3.amazonaws.com/public/BWDOY2UW6FFRVJTQUWV4PRI2PE.jpg" alt"Dunedin City Council">
	</a?


	</body>

	</html>

20

	<!DOCTYPE html>
	<html>
	<body>
	<h2><u>The site Giphy's idea of a wolverine.</u></h2>
	<img src="https://media1.giphy.com/media/jlrhs7Ewc0IW4/giphy.webp?cid=3640f6095c8240b979544c5663552fe2" alt"Hugh Jackman as wolverine">
	<br>

	<h1 style="color:blue">I</h1>
	<h2 style="color:green">mean</h2>
	<h1 style="color:red">THIS</h1>
	<br>
	<img src="https://i.imgur.com/UyoD2vi.gif?noredirect" alt="a wolverine">

	</body>
	</html>

18

	<!DOCTYPE html>
	<html>
	<body>

	<h1>This is a Heading using h1</h1>
	<h2>By Chris Talbot</h2>

	<p><u>Read</u> <b>between</b> the \|\| .</p>

	</body>
	</html>

17

	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>

	<h1>My First Heading</h1>
	<h2><b> Chris Talbot</b></h2>
	<p>My first paragraph.</p>

	</body>
	</html>

16

	<!DOCTYPE html>
	<html>
	<body>

	<h1><u>READ THIS</u></h1>
	<h2>By Chris Talbot</h2>

	<p>My first paragraph.</p>

	</body>
	</html>

Monday, March 4, 2019

The Railway

The bands
CHECK THIS OUT!!!

The Code:

	<!DOCTYPE html>
	<html>
	<header> My favorite band(s)</header>
	<body style = "background: url(https://themusicnetwork.com/wp-content/uploads/HOMEPAGE-FEATURE_07262017_GOODMAN_RAMONA_ROSALES_VV_TRENT_REZNOR-0106.jpg); background-size: 100% 100%; ">
	<h1> Trent Resnor is my favorite artist....<br>But he has two (three really) bands.</h1>
	<br>
	<img src="NIN.jpg" alt="NIN image"</img>
	<br>
	<p>Which he heads>>>> Which I saw at the Bog Day Out up in Auckland.</p>
	<br>
	<h2> And How to Destroy Angels</h2>
	<br>
	<img src="How to destroy angels.jpg" alt+"How to destroy angels image"</img>
	<br>
	<h4> His third, is his dealings with Atticus Ross. <br> Which has mainly been on movie soundtracks.<br> Such as:
	<br> <ol>Gone Girl<br> The Girl with the Dragon Tattoo <br> And others...</ol>
	<br>
	<br>
	<br>
	<h3> But I grew up with the sound of 'Syd' Barett leading the greatest band in the world...>/h3> <br><p>...</p><br><p>..</p><br>
	<h1> Pink Floyd</h1>
	<br>
	<img src="Syd Barett lead pink floyd.jpg" alt"Pink Floyd with Syd Barett"</img>
	</body>
	</html>

Dunedin Stadium

Lvl 4 Web Development 2019 by Chris Talbot