In this session, let us learn how to add links to a web page. for adding links, you need to use this anchor tag. This anchor tag is represented by angle bracket a. With the help of this anchor tag, you can move to a different website. Or you can move to a different web page in the same application or you can propagate to within the same page itself. Let us see one by one.

This anchor tag has got a mandatory attribute href. Within href, you need to specify the URL of the website and you need to specify the name of the webpage which you want to open. Let me explain you with an example. Say here, yay. href equal to I want to open Google so it is http colon slash slash ww ww google.co.in, then close this anchor tag. Now this anchor tag has got body content, you need to show the text, which the user will click.

So here I can just specify visit Google Slides. So if the user clicks this link automatically it will be taken to google.co.in. This is for the external location. What if they want to open a different page in the same application? In that scenario, I need to use a hex wrap equal to the page which I want to visit. So I'm just specifying it as courses dot html.

And I have to show a text to the user he can click scientist going to specify this as courses slash eight Okay, now first, let us understand this once and then we will see how to propagate in the same page using the anchor tag. I have created a HTML file as link demo dot html. Let me add the anchor tag itself equal to http colon slash slash www.google.com. Slash it. This is going to have body content services in which I'm specifying visit Google. Let me add a second one also, like using a head syrup equal to I want to move on to another webpage in the same application.

Already I have got IMG demo dot html. So let me give that IMG demo dot html show You mean this is the text which the user will see Next, let me save this right click open in browser. You can have a look it is just showing the links The second one is shown in purple color, because already that page is visited by yours. Now, let me click visit Google. What happens? The current page itself is getting changed to google.co.in.

Let me go back again. Let me click Show you make. Again here. Also, the current pages getting changed are the current windows getting replaced by IMG demo dot html. What if I want to open this web pages in a different tab? How to achieve this?

For that, you need to add one more attribute target. If you give target equal to underscore blank, then this page will be opened in a new tab. Let me save this. I'll go back to the browser and I will refresh. I'll refresh. Now let me click visit Google.

You can have a look the link demo still over there. Google pages getting opened in a new tab. So this is how you work with this anchor tag. If you want to open up a page how to propagate in the same page, let me explain you what is the meaning of propagating in the same page when you are going in for ecommerce websites for browsing through the products and if you are reaching the end of the page, if you want to go to the top of the page, you will be seeing a link at the top. When you click this link, automatically it will take you to the top of the page. Again, if you want to scroll down to the bottom, you don't have to do that you will be having again a linkers bottom when you click this link automatically it will take you to the bottom of the page.

How is this achieved? It is achieved with the help of this anchor tag. Let me explain you how this has to be done. Now what is the link name bottom follow I can give you a heads up equal to some name now brought up this is what I have given scientists specifying it directly as bottom. Now again for top what I have to specify a heads up equal to within double quotes something I need to specify this a stop and slash A. So automatically these two come will behave like a link they will have an underlined below them.

Okay, what is the extra value you put as an external link you will be giving the URL if it is an internal page you have to give the page name, but it isn't the same page. So, I need to give a name for a particular area. So far this area are for the top area, let me give the name of top hat Okay, so, here I need to specify this EA name equal to top. What is the meaning of it? This portion is called the top portion. Just like a web page is having a name this portion this portion assigning a name of stop same way the bottom portion I can give a different name.

So, I can just give you a name equal to and I can give any name as I told you. Now, I have given a name. So, this person is yen and this portion is stop. Now, what I want to do when I click stop automatically has to come to the top portion, how do you go to a club you need to use cash top what happens automatically it will come to the top portion when you click automatically it will go in for an area which is having the name of stop. Now here what he will give you when I click bottom it will go in search of an area which is having industry name. So this area is having the industry name.

It is not necessary that you need to have it in the bottom. You can just choose a location where exactly you want and you can just use the name Now, what we will do is, we will go back to sublime and we will try this. So to see this working, you need to have your web page which will be bigger so that you are having a scrolling but only with the help of a scrolling bar, you can see you can move from the bottom to top or from the top to bottom. Now I am in the same page, I have added more content that is I have copy pasted from this basic dot html into this link demo dot html. Now my page is a little bit bigger. Let me just run it first.

You can see that there is a scroll bar. Okay, now I'll come back to sublime. Here I need to give a name for this particular place. So I'm just giving me a name equal to top slash. Similarly for the bottom of the page, I need to give a name Yes, yay. Name equal to bottom slash bottom Aryan, we gave it a cn.

So let me have it as E and also here. Now let me just come to the top, when I click it, I have to go to the bottom of the page. So after this p tag, or after the image, let me add Yay, extra p equal to has n plus eight, go down. Right, same way, I need to add it to the bottom, or wherever you want, you can just add it, I'm just adding it in the bottom. So here it has to be hashed up. I'm just giving it a stop.

So when the user clicks stop, it will go to the top of the page. When the user clicks bottom, it will come to the bottom I mean, the end of the page. Let me go to the browser and refresh You can see go down is coming after the panda we don't have a br statement. So it is coming next to the panda image. Let me click this, it is going to the bottom of the page. And here I have got to stop in the end when I click this automatically to go to the top of the page.

So with the help of this anchor tag, either you can visit an external website or you can visit a web page in the same application Are you can propagate in the same page itself. So this is all about anchor tags.