<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S04: HTML Attributes and Hyperlinks</title>
<style>
* {
scroll-behavior: smooth;
}
</style>
</head>
<body align="center">
<h2 id="top">HTML Attributes</h2>
<p>
<em>Modifiers of element behavior</em>
</p>
<h2>HTML Images</h2>
<p><em>
An image can be shown using the <img> tag along with its <strong>src</strong> attribute.
</em></p>
<!-- Image with absolute link -->
<a id="img" href="https://place-puppy.com"><img src="https://place-puppy.com/450x450" alt=""></a>
<br><code><https://place-puppy.com/450x450></code>
<br><img src="images/zuittlogo.png" alt="">
<br><code>
<img src="images/zuittlogo.png"></code>
</code>
<p>Valid Image extensions are the following</p>
<ol type="i" align="left" reversed>
<li>png</li>
<li>jpg</li>
<li>gif</li>
<li>svg</li>
<li>webp</li>
</ol>
<p>Take a look at the w3schools attribute references <a href="https://www.w3schools.com/" target="_blank">here</a>.</p>
<h2>HTML Links</h2>
<h4>Absolute Link</h4>
<a href="https://zuitt.co" target="_blank">I'm a Hyperlink</a>
<h4>Relative Link</h4>
<p>Go to <a href="./link.html">link.html</a> page.</p>
<p>Go to <a href="./images/index.html">images/index.html</a> page.</p>
<!-- Redirects to top -->
<p>Go back to <a href="#top">Top</a></p>
</body>
</html>