Recent

HTML / HTML5 Tutorial Part 4: Links and Images

How to add Links and Images in your Webpage

Learn html links and images tags with ComputerZila
In this tutorial you will learn how to add Images and Links in your Website using the HTML tags. in Hyper Text Markup Language i.e. HTML, you can add the the links using anchor tag, which starts from <a> and ends with </a> as it as an container tag, while adding image in a webpage is done by using <img> as it is an standalone tag so you do not need to add any closing tag with it. first we will learn how to add links.

Links

We use links when we want to refer our user to some other file or web page in the website, like you want your user to go to your Facebook page and like it, so for that purpose you will add the Link by using anchor tag, or let's say you are writing a review about Latest I-Phone on your website and want your viewers that they can also visit the I-Phone Mobiles details on their official website so you can also use the links, in short links are the most important part of your webpage, almost every page contains the links.
to add the links we use following code.

<a href="https://www.theprotec.com" target="_blank" title="Click to Open The ProTec">Open The ProTec Website</a>

Output

Open The ProTec Website

Code Explained

here href="https://www.theprotec.com" is the attribute which is used to give the link of the page you want to open in your webstie
target="_blank" is attribute is used to tell the browser to open the link in new tab, if you don't use the target attribute it will open the page in same tab in which you are currently it, normally when we are referring to external sites we use to add target attribute and normally we don't add target attribute when we are referring to our own website.
you can also use target="_self" to open the link in the same frame. target="_top" to open the page in current body. target="_parent"to open the page in parent frame, or target="Frame Name"to open in the frame you want.
Note: to use target attribute you have to use frames to see their effects, otherwise only target="_blank" effect will be visible. to view the complete working example visit View the Links Example
title="Click to Open" is the attribute used to describe the user that what is the purpose of link here, it will show when the user's mouse hovers over it, it is good Search Engine Optimization (SEO) practice to add title attribute in your links.

Images

Adding an Image in a website is an important feature in HTML, you can use the <img> tag to add an image in webpage, remember <img> is an standalone tag so you don't need to use closing tags for it.
<img src="https://www.theprotec.com/img/logo.png" alt="The ProTec Logo" height="200" widht="200">

Output

The ProTec Logo

Code Explained

here src="https://www.theprotec.com/img/logo.png" is the attribute used to add the source of the image, if you want to add the image, you have to add the source of it, this attribute tells the browser from where it have to take the image.
alt="The ProTec Logo" this attribute is used to add the alternate text for your image, in case if your image is not loaded due to any reason either it is deleted or connection lost to the internet, then it will show up the text so the user can assume what type of image was loading.
height="200" and width="200" are the attributes used to add the height and width for image, if you used these attributes this will set the height and width for the image.


No comments