Bill Rosener: Also, Dr. Bell, welcome back in this video you learn how to insert various types of links into an HTML page. Let's start by taking a look at what you learn how to do, and then we'll go ahead and walk through it step by step. So here it is, the 1st one top the very top. I have a little text called Links, and we'll have one called Weather. When I press on it. It's going to simply go to weather.com.
Bill Rosener: Then the next one will change the font color, make it green. Then we'll change the font color to white with a green background. Then we'll make it 4th one here without an underline at all.
Bill Rosener: And if we notice that it's kind of keeping everything within the one tab here now the 5th one is going to open it up in its own separate tabs. When I press on that, notice how it opened up weather.com, and its own separate tab. So I can close this one out
Bill Rosener: and I'll come back here. Then we're gonna do 2 more. One is gonna go ahead and have an image hyperlinked to the weather channel.
Bill Rosener: And then finally, we'll create a link to a Pdf file. Well, now that we know what we're gonna do let's get started there.
Bill Rosener: So the very 1st step you want to do is open up some kind of editor. And I'm going to be using visual studio code, and hopefully you cannot follow along here.
Bill Rosener: I never thought I'd do this, but I've actually turned off so if I came here to settings, and if I come, press on that gear press on settings, I go to suggestions. I've actually turned this off because the thing was so smart. It was literally completing the whole thing before I even had a chance, because I'd actually worked on a similar document. And so I have turned this off. So I'm not going to get any automatic inline suggestions here.
Bill Rosener: So anyway, let me go ahead and close that
Bill Rosener: the very 1st step you wanna do is come up here to a file. I'm gonna choose new file.
Bill Rosener: and I'm gonna come right up here and I'm gonna call this one
Bill Rosener: assignment one dot HTML, and I'll go ahead and enter.
Bill Rosener: and sure enough, I'm just going to place this within A on the desktop, and a folder called a temp, and I'll go ahead and create that.
Bill Rosener: So, taking a look here, the very 1st step we wanted to do was create some text at the top. And that was just simply called links.
Bill Rosener: So I'm just gonna go ahead and type. You can type a header, one tag header to doesn't matter here. And you can see as soon as I type that is automatically close that. And I'm gonna type links. That's a header, one tag. And I've got some text. And I'll tell you. Let's just go ahead and save this. I'm gonna come up here to a file.
Bill Rosener: save
Bill Rosener: I now can right click right over here
Bill Rosener: and I can open in my default, browser, and the reason I can do that is because again, I've got open and browser as one of my extensions there.
Bill Rosener: So right click open in default. Browser, that's going to open it up in Firefox. And sure enough, that's all we've got so far there.
Bill Rosener: Okay, next step is, we're going to create a hyperlink to our weather.
Bill Rosener: So I'm gonna come on down here
Bill Rosener: and I'm gonna go ahead and type in a for anchor hypertext reference equal.
Bill Rosener: Then I'll enter the URL
Bill Rosener: and I'll type in weather.
Bill Rosener: Okay? So a for anchor hypertext reference equals the URL type. The text want to display it and then close that. So if you want to check it, just come into file, save
Bill Rosener: now I could dive now, once it's open here, I can just come right over here and I can hit the refresh button.
Bill Rosener: Answer. Enough weather is appearing so I can click on it.
Bill Rosener: And sure enough, it's going to weather.
Bill Rosener: Okay, moving on. The next one is going to be in green text.
Bill Rosener: And I'm going to put a little paragraph right there. You can put a paragraph
Bill Rosener: like, so, or you could even put, for example, line break there.
Bill Rosener: Okay, this one. I'm gonna go ahead and type A, and now I want the green text. I'm gonna put style equals
Bill Rosener: color pollen green.
Bill Rosener: And if you have more than one, you definitely that semicolon, I'm gonna go ahead and put the semicolon at the end there
Bill Rosener: and then we're going to have the Href equals.
Bill Rosener: weller.com.
Bill Rosener: Then what do I want to appear on? The screen?
Bill Rosener: Is weather
Bill Rosener: oops. So a for anchor style is, I'm gonna have it green.
Bill Rosener: Then I'm gonna have the URL the text and close the anchor. And I'm just gonna hit, save that I can hit
Bill Rosener: under file, save already, said control. S, from now on.
Bill Rosener: And sure enough, the text is green.
Bill Rosener: Okay, the next one. We're gonna kind of put the reverse video, we're gonna have white text within a green background.
Bill Rosener: So again, I'm going to put a paragraph break.
Bill Rosener: Okay, now, I'm going to type that a
Bill Rosener: or style equals.
Bill Rosener: Color is now going to be white.
Bill Rosener: and the background color
Bill Rosener: is going to be green.
Bill Rosener: Okay.
Bill Rosener: now, I'm going to go ahead and put my Href. And I could grab that from right above. Let's go and type this out again.
Bill Rosener: Okay? And the big thing here is a for anchor style. My text is going to be white, the background is going to be green. I've got the URL and what appears on the screen as weather, and then closing the anchor there.
Bill Rosener: I can save this control. S.
Bill Rosener: Come back to my whoops, my browser.
Bill Rosener: and sure enough, I've got the green background with the white text.
Bill Rosener: Okay, the next one is, we're gonna have it without any text, without any underlining.
Bill Rosener: And again, I'll put in our paragraph break.
Bill Rosener: and I'm gonna go ahead and put in
Bill Rosener: and style equals.
Bill Rosener: Now, it's going to be text decoration.
Bill Rosener: Hold on.
Bill Rosener: And then I'm gonna type in the URL Href. Equal
Bill Rosener: weather.com, and then again I'll have the word weather appear on the screen. So the big thing here is a for anchor style. Text decoration is none
Bill Rosener: the URL, what appears on the screen and closing that so I can hit control S
Bill Rosener: to save
Bill Rosener: a refresh. And sure enough, the top 3. While this, these have lines underneath them. This one does not.
Bill Rosener: Okay. Now, moving on
Bill Rosener: the next one here.
Bill Rosener: it's going to have a target.
Bill Rosener: a
Bill Rosener: target equals
Bill Rosener: blank. So it's gonna open it up in a new blank tab.
Bill Rosener: Then what do I want to appear on the screen?
Bill Rosener: And there we go. So a for anchor target equals blank and double quotes H. Reference equals. I've got the URL what's up here on the screen and the closing anchor, so I'll save that
Bill Rosener: refresh.
Bill Rosener: And now just take a look. I've actually got 2 tabs, and sure enough, now I've got 3 tabs. So in this case. If I close this, it's gonna come right back here.
Bill Rosener: Okay, now, take the next one is we're going to create a hyperlink to this image.
Bill Rosener: And probably the 1st thing you want to do is get that image in my buffer.
Bill Rosener: and if I take a look right over here, here's assignment one.
Bill Rosener: If I press on the assignment one folder
Bill Rosener: here is a weather channel.
Bill Rosener: dot. P. And G. What I'm gonna do is just simply copy this.
Bill Rosener: I'm now gonna come down here.
Bill Rosener: start off with a little P for a little paragraph break.
Bill Rosener: Okay, I'm gonna put my yeah URL
Bill Rosener: by one second. Actually, I believe, put 3 w's here
Bill Rosener: weather.com
Bill Rosener: close it.
Bill Rosener: And now what I want to do is kind of sandwich this within. So I've got my hyperx reference from the outside. And now, rather than putting the other ones, I'd be just typing weather here. What I'm going to do is put an image.
Bill Rosener: and it's in my cup, my clipboard, so I can just paste
Bill Rosener: and let me see if I can get this on maybe 2 lines here.
Bill Rosener: Okay, and there might be an extra space there, but that's fine. So I've got a for anchor hypertext reference sequel. It goes to weather.com image source. This is that long, URL, and then I'm gonna go ahead and close the anchor.
Bill Rosener: and let's go ahead and save that.
Bill Rosener: and I'll come along and
Bill Rosener: refresh.
Bill Rosener: And sure enough, there it is, and if I press.
Bill Rosener: it's going to go to weather.com.
Bill Rosener: Okay? Great.
Bill Rosener: Okay. The last one
Bill Rosener: was a link to a Pdf, file.
Bill Rosener: So I'm going to go ahead and highlight right here.
Bill Rosener: Actually, it's just resume template. Dot. Pdf, so I'm going to grab all this
Bill Rosener: just having to my buffer.
Bill Rosener: Okay? And now I'm gonna do is type in a H reference equals
Bill Rosener: ham
Bill Rosener: resume templates.
Bill Rosener: And now what I'm gonna do is paste that in here
Bill Rosener: and let me just check before I move on. Here.
Bill Rosener: Resume template. Dot. Pdf.
Bill Rosener: resume template dot. Pdf, maybe I'll put a enter here.
Bill Rosener: Okay, I think we're ready to check this out. I'm gonna give them up here to file. I'm gonna hit up save
Bill Rosener: come back to my
Bill Rosener: browser. I can hit
Bill Rosener: Use the keyboard shortcut or hit. You can see right there was control. R.
Bill Rosener: And now, sure enough, if I was to press on this.
Bill Rosener: It's going to open up
Bill Rosener: this resume template there.
Bill Rosener: Well, in this video, what do we do? Is we walk through inserting links? We started off with a link, just a normal link. We changed the font color. We changed the background. We had it without any underlining at all. This one is going to open up in a separate tab. This one is from an image, and this is to a PDF file there. And again, you're probably when you were typing, you were probably getting a lot more code. And the reason I
Bill Rosener: I I was to the point where almost all the code was being auto filled. So I wasn't even doing any type. And so then I thought, Well, let me turn that off. But if you find them that is distracting, just come up here to settings.
Bill Rosener: Go to suggestions, and I'll probably turn this right back on
Bill Rosener: inline suggestions. Leave that on.
Bill Rosener: Okay? Well, hopefully, in this video, you learned how to insert hyperlinks within an HTML page, and I'll catch you next. Video. Thanks a lot.