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.


5 comments:

  1. Who is Great Lakes? Great Lakes is a non-profit student loan servicer that owns millions of federally backed loans across the United States. great lakes student loans According to the Great Lakes Student Loans is a student loan servicer that contracts with the U.S. Department of Education. As a servicer, the company is responsible for helping. Who is Great Lakes? Great Lakes is a non-profit student loan servicer that owns millions of federally backed loans across the United States.

    ReplyDelete
  2. This specific SEO PowerSuite audit gives you an inside and out data with the advantages and highlights given by SEO PowerSuite.
    https://ryancameron.me

    ReplyDelete
  3. Unit still photographers require solid camera and gear to endure the weighty responsibility.
    amazon photo editing service

    ReplyDelete
  4. I work in a field that is very closely related to vector images. And sometimes it's very hard to find a steampunk vector Image searches take a lot of time, but recently I found an interesting site where everything is on different topics and of good quality.

    ReplyDelete
  5. Computers support the development of mobile apps. Llimink triple monitor

    ReplyDelete