<!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>