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.
71 lines
1.7 KiB
HTML
71 lines
1.7 KiB
HTML
1 year ago
|
<!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 <img> 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>
|
||
|
|
<img src="https://place-puppy.com/300x300" />
|
||
|
|
</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>
|