Conquer HTML Ep[6]: Adding Links and Images to your website

You are currently viewing Conquer HTML Ep[6]: Adding Links and Images to your website

Links:

While browsing the web, you might have come across blue underlined texts that take you to a target page when clicked. These are called as links and they are placed in websites using HTML <a> tag. HTML allows you to add links to anything from images, texts or buttons. In this episode we will learn how to add links to an HTML page.

Syntax:

<a href="https://terminalstack.com">Terminal Stack</a>

Links are enclosed inside <a> tags, href is an attribute that specifies the destination URL of the link.

In the above example, wew have enclosed the text “Terminal Stack” inside <a> tag, thus that text will be displayed on the browser webpage.

Note: Often, we want the user on our website to get external links in a new tab so that he spends maximum time on our website. This is where we add target=”_blank” inside the <a> tag, which then opens the link in a new tab and our website stays open.

Example: 

<a href="https://terminalstack.com" target="_blank">Terminal Stack</a>

URLs don’t always lead to an external website, they can also contain links to other pages of the same website. Links that lead to external websites are called Absolute urls and links that lead to another page of the same website are called Relative urls.

Example:

Absolute URL:

<a href="https://terminalstack.com">Terminal Stack</a>

Relative URL:

<a href="category/cybersecurity.html">Terminal Stack</a>

Images:

Now that we know how to add links in your HTML website, let’s take a look at how to add images to your website and make it more appealing!

Images are added to a page using <img> tag. The basic syntax of an image is as follows:

<img src="link to image" alt="text2">

<img> tags use two attributes, alt and src. 

The link to the image is stored inside the src attribute. It can contain both external or internal links. The other attribute, alt, is used to store image description, it’s the text that will appear when an image is hovered with a cursor. Alt text also appears when the image is not properly loaded due to poor connectivity or some other error.

You can also use width and height attributes to give custom dimension to the image but it is much better to use CSS for this purpose.

Arpit Pandey

Hey there! I am Arpit Pandey, a full stack web developer, SEO specialist, C++ programmer and Co-Founder of this blog. I love to code and write articles!

Leave a Reply