What is href how to add html link using a tag?

-

What is href how to add html link using a tag?

In HTML we usually use "anchor or a tag" to link some sort of page, website and portion/section. It is normally assigned to (anchor) tag. When we have to use some link in HTML we use a tag to open that particular link in new page, same page etc. Anchor tag is represented by "a" with less than and greater than sign and the most important part of a tag is it's attribute which has it's own importance and that attribute is "href". Href attribute tells the browser that where we want to move or link. It makes a relation between two sources. It can either take you to a specific page or take you to a specific portion of the website. It is also called html link that make some connection with external or internal resource.

How does a tag and href look like?


<a href="http://www.google.com"> Google < /a">

In above example, what we are doing is, assigning a Name to a tag that is Google and when Google will be visible on our page, upon clicking it will take us to Google's main website. So what did "href" actually do here. It is actually redirecting us to a page that is Google’s main page so it makes the connection or relation between the pages.
                                                   
It is an inline element means it has the default property that is display: inline in css will be available in one line. Suppose if we have multiple a tags and there is no css applied on it then these anchor tags will be visible in one line. But if we want to make it float: left we can do it by applying some CSS and also if we want to apply display: inline-block and display: block then we have to change the CSS property as per our need. We can change it's color, font style, font-size, line height etc with the use of CSS.

Have a look of this image for more clarification:

Image Description

After saving this we need to update our style sheet:

Image Description

Here are few things that we need to discuss, you can see i have mentioned here the example of display: inline-block. Actually i have to assign width and height to anchor tag and without giving display: inline-block, float: left or display block i can't do this correctly. One more thing i have mentioned text-decoration: none; what is this? Actually as it is an anchor so it has default value of text-decoration: underline. What i mean is whenever we will use tag it will show underline at the bottom of the text. So i removed it from the current state and i used a new example that is :hover. Whenever we will move our cursor to the Google text it will show us the text-decoration : underline on Google word. This is what the hover effect is that makes the link more beautiful. We can style it as per our needs.

Now the last screen is the result;
Image Description

Upon hover it will look like this:

Image Description

Location: Lahore, Pakistan

Comments

Post a Comment

Please leave your comments or feedback at here....

Popular posts from this blog

What is Heading in html and how to add h1 in a web page or post?

-
Image
What is Heading in html and how to add h1 in a web page or post? Heading is the most important part of our website. It helps us in search engine optimization. It shows that there is some title to specific post. It behaves like a name to some post. It also express that what may be the article downwards or what can be the content that will be under it. It summarize the content. Like if someone come and open google and type there "List of restaurants in NY", Google will show the details about the particular search and will show a list of pages which will have the same text in their title. This was the simplest example for heading, which clearly shows that headings play an important role in getting traffic. List of Heading Tags h1 - The biggest heading in font size and line height h2 - Smaller than h1 h3 - Smaller than h2 h4 - Smaller than h3 h5 - Smaller than h4 h6 - Smaller than h5 We can utilize these headings like this; <h1>Your Heading</h...
Read more

What is the difference between HTML4 and HTML5?

-
Image
What is the difference between HTML4 and HTML5? The main difference in HTML4 and HTML5 are the document types. HTML4 has three different document types whether HTML5 has only one document type. The example of HTML4 document types are as follow; 1- Transitional Doctype: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" 2- Frameset Doctype: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd" 3- Strict Doctype: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" HTML5 is the latest revision of XHTML that supports the latest browsers. It is quite helping for browsers to understand the latest techniques like flash, animations, audio and videos etc. HTML5 is also said to be the semantic coding that is helpful in SEO. It's mostly using...
Read more

What is img tag and how to add src (source or path) in html website?

-
Image
What is img tag and how to add src (source or path) in html website? Images are the best option to increase the SEO and the importance of your website. The text you type may be consists of hundreds and thousands words but a small picture can illustrates all the meaning to your post. It is really very simple to add images using "img tag". Image has some compulsory attributes that includes, width, height, src and alt as well. These are the mandatory attributes for showing an image in your website. You can assign width, height and also add the path in img src using src attribute which demonstrates the location of your image. We use image tag to include an image to the post or a page. This image tag consists of “src, width, Height and Alt” attribute that gives the identity to the image that how much the width and height this image contains and what is the alternate text of the image. Alternative text is very important for SEO (search engine optimization) purposes. There ...
Read more