You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
1 year ago
|
<!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>
|