<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML Attributes and Links</title>
</head>
<body>

	<h2 id="top">HTML Attributes</h2>
	<p align="center"><em>Modifiers of element behaviour</em></p>

	<h2>HTMLimages</h2>
	<p align="right">
		<em>An image can be shown using &lt;img&gt; tag along with its <strong>src</strong>attributes</em>
	</p>

	<a href="https://place-puppy.com/"><img id="dog" src="https://place-puppy.com/300x300" /></a>

		<!--we use target_blank in order to opena new tab and you cannot go back to your 
		current page it is a new tab. -->
	<a href="https://zuitt.co" target="_blank"><img src="./images/zuitt.png" /></a>

	<p>

		<!-- just to show in the browser that this is the code of your image-->
		<!-- the &; is the greater than and less than -->
		<code>
			&lt;img src="https://place-puppy.com/300x300" /&gt;
		</code>

	
	</p>

	<p>
		Valid image extension are the following:
	</p>

	<!-- the reversed will reversed the ordered list from a-e instead it will become e-a -->
	<ol type="a" reversed>
		<li>png</li>
		<li>jpg</li>
		<li>gif</li>
		<li>svg</li>
		<li>webp</li>
	</ol>
	<p>
		Take a look at w3school attribute reference<a href="https://www.w3schools.com/tags/ref_attributes.asp"
		target="_blank">here</a>
	</p>



	<h2>HTML Links</h2>

	<h4> Absolute Link</h4>

	<a href="https://zuitt.co">I'm a hyperlink</a>
	<h4>relative link</h4>
	<p>
		Go to <a href="./link.html">link.html</a>page.
	</p>
	<p>
		<!-- if you want to access on your current web page you need to put id and be 
		specific in putting the id. # is for only one page which is your current page-->
		Go to <a href="#dog">top</a>
	</p>


</body>
</html>