Hyper-linking and Adding Images to Webpage

Till Now we have learned some of the simple tags of HTML. Now it's time for creating hyper texts i.e. hyperlink in our HTML document.

What is HYPERLINK

Hyperlink is a reference to data that reader can directly follow by clicking or by hovering. In simple words it refers to another webpage having some information.

HyperText

Hypertext is text which contains link to other texts.

"Technosians"

Above we have the example of hyper text and by clicking on it you will redirected to the Technosians home page.

How To Create Hypertext

To create a hypertext you have to use <a> tag

<a> tag alone cannot be used. We have to use href attribute.

<a href="website url here"> Website Name</a>

Try this example

create an HTML document

<html>
<head>
<title> Testing Hypertext </title>
    </head>
   <body>
<h1> Hypertext</h1>
<p> Hello Today I will Learn Hypelinking.
<a href="http://www.technosians.com">Technosians</a>
</p>
</body>
</html>

Now I have got A Hypertext in my webpage and when I will hover mouse over
that text mouse will convert into a hand and my website name will be clickable.

How To make your Hyperlink open in Next tab

After creating a hypertext you will not want to move your audience from your main webpage.

For this you have to create hypertext having capability of opening hyperlink to a next tab.

To do this you just have to add "target" attribute to your <a> tag

<a href="website URL" target="next"> Website Name</a>

Now try this in your html document.

Adding Images To Your Webpage

Till Now We have boaring webpages having only text. Now to make your webpage alive you have to add some images.

For Adding images we use <img> tag
Now <img> tag needs information i.e. from where it will display image.

To accompany this we use "src" attribute

<img src="url or location where image lies.">

And One important thing is that <img> tag doesn't have a closing tag.

Add the below information to your html document.

<img src="https://www.google.co.in/images/srpr/logo11w.png">

This will add Google Image on your webpage.

Addding Alt Attribute to Img tag

You have a high speed internet connection. But your website visitors may not have. So in that case they must know about the image
which is not displayed to them.

To add more information we use alt attribute with our img tag.

<img src="https://www.google.co.in/images/srpr/logo11w.png" alt="Google">

Now update your webpage right now.

Making your Image As a Hyperlink

Hyperlinking is an easy task in HTML. You can make your image clickable.

To make your image as a hyperlink use img tag inside <a> tag

<a href="www.google.com" target="next"><img src="https://www.google.co.in/images/srpr/logo11w.png" alt="Google">

Now try this code now in your html document.

I hope you had learned how to use img element and hyperlink creation.

If you have more information reagarding to this topic then please comment here

Technosians