Summary of HTML Links and Anchors

Let's talk about links or anchors. You've all used websites and usually we click links and they go elsewhere. So that's called an anchor, okay, in HTML. Let's delete this list and let's say I want to go to my favorite website or whatever your favorite website is. So the tag is called the A tag, so less than A, then and then make sure you close it and in between it's what the user is going to see. Let's say go to my favorite website. Let's click run. You're going to see the tags go to my favorite website like a paragraph but obviously I need to tell it where I want to go and I click. Right now it's not going anywhere, I cannot click it. So we have to introduce you to a new concept called attributes. So every element they can get more information out of you via attributes. To add an attribute to an element, go to the opening tag and then to the right hand side of the name of the element add a space and then you can start writing attributes separated by space. Usually attributes always go this way. You have the property name or attribute name equal sign followed by double quotes and within the double quotes that's the value. So in this case I want to use the attribute called href and then the value I have to always say for the syntax of html equals sign, double quotes, double quotes and within the double quotes I have to say the value for this property. The value here has to be the URL or the link of where you want to go to. Typically that's what you see in the address bar in the browser. For example this one is that. So let's say I want to go to yahoo so I can say html here s colon slash yahoo.com. You can use whatever website you want. I'm going to click run. Now you can see visually the text became highlighted in this kind of blueish color with the underline or underscore. So if I click that you can see on the top left I know it's so small it says yahoo.com. So if I click that it's going to go to yahoo.com. Now if I do that I'm going to lose this page so I don't want to do that so I'm going to hold control in my keyboard and I'm going to click so that it goes to a new tab here. So you can see yahoo is now open there. All right so I'm going to close that. So that's how you make anchor tags or a lot of the known as links. So you can pretty much write an anchor tag anywhere. It can be beside that list that we wrote. It can be beside a paragraph wherever you want. Okay now you might notice when you go to websites typically when you click a link it either stays in the same window or to add tab in the browser or it opens a new one. Now I've just forced it to open a new one because I hold control in my browser but you can actually change the default behavior of an anchor tag to always go to a new window or tab no matter if I have the keyboard control key pressed or not and that's with another attribute called the target. So you can go to the anchor tag let's add another attribute. Now always go to the opening tag add some space after the name. Now you can either because there's already the href here I can either type the new attribute here to the left or to the right okay but always separate of the space. Okay let me write it to the right so I'm going to go to the right out of space. The attribute is target equals double quotes double quotes within the double quotes I'm going to say underscore blank. When I say underscore blank I'm saying whenever the user clicks this I want this to go to kind of like a blank page you know like a new tab or a new window. Let's click run. Now I'm going to click that and I'm not going to hold control here my hands no control. See it open in a new tab so that's the point of that.