William Rosener: Hello this is Dr. Bill, welcome. In this video, you'll learn how to insert various types of hyperlinks into a webpage using HTML HyperText Markup Language
William Rosener: Let's talk about take a look at what you create, and then we'll get started. So take a look here at the very top or and it has some text just called Link's
William Rosener: Then we're going to insert links to the Weather Channel using various approaches. One is just a typical normal link here that will change the color implicit kind of in a reverse video
William Rosener: I'll show you how to do it, then, with our underlining warm turn around and adding in line, but then we'll create a link from an image and then finally a link to a PDF file.
William Rosener: But now that we know we want to do. Let's get started. So the very first step you want to do is open up some basic editor, like Notepad or Word Pad.
William Rosener: Which or if you're on a Mac could use text, edit, which you're not going to want to do is not a like Microsoft Word.
William Rosener: In this case are several reasons. One is it uses a lot of special characters. And just as an example. Nice different place that devil code here because this was a little bit closer there. I can see them double quotes going that direction.
William Rosener: And I put a space. It's going this way, this direction here. So it's trying to use smart quotes and those will not work on an HTML document, there is a regular basis points there so I'm just soaking up some basic editor Notepad Word pad or text at it now.
William Rosener: Let's take a look up here. Here's what we're going to be recreating this right here and I'm actually going to seven and the director called a temp. I can see why we just got done looking at was a one finished and we're not going to be. Go ahead.
William Rosener: Over here on the complete URL or going to be recreating this document here.
William Rosener: Okay, so come right back here. Here's my Basic Editor. I'm just going to use a header or use the header to tag not links and I'm going to close my head or to tag.
William Rosener: So there are six types of headers had a one of the largest header 60 and the smallest or basic kind of a large 100 to over started
William Rosener: Out syntax and this slash this close by to tag. Let's go ahead and start by taking by saving this will take a look at in the browser. So I haven't come up here to file. I'm going to go to save as
William Rosener: I'm just going to be seven mind on the desktop in this folder here called a town me go ahead and give us the name
William Rosener: Assignment one dot HTML and make sure it's a text document. So make sure you know where you're saving it ends, give it the name Assignment one period.
William Rosener: HTM or HTML, it has to end that extension HyperText Markup Language and make sure to text I can we got all three things done. Go ahead and press Save.
William Rosener: Okay, now I come back here. I can see it right here. I can right click on it and I'm just going to go open with now use Firefox and here it is.
William Rosener: OK, so now coming back. Take a look here. We're going to be
William Rosener: Out in a link to the Weather Channel whether website here, I'm just going to go ahead and start off, I'm going to type in may or may not know that URL. Actually, I do. But let's say I typed in HTTP.
William Rosener: And I thought this was the correct
William Rosener: This is going to get me their
William Rosener: Personal offline. Before I take a look at this URL. So we have an anchor.
William Rosener: hypertext reference equal HTTP colon slash URL, whether this is just a text that gets displayed. You can be any text and then I'm going to close my anchor. So start my anchor.
William Rosener: Put the URL in there and your text and then close it. So I'm gonna come right up here to file. I'm going to save or if you want, you could hit to control us and they're going to come back to my browser.
William Rosener: And I can see a little icon right here and depend on your browser. I can also hit control are to refresh that
William Rosener: Good. Let's take a look here. I'm going to go ahead and press on. I can see down at the bottom. I think it's going to weather com
William Rosener: But it's actually going to get redirected. This is a secure website. So it's going to go to HTTPS and it's weather com somebody go ahead and ever since slightly modified that so I want to make sure
William Rosener: Otherwise, it's actually going through a redirect and it's going to slow it down ever so slightly them so placed in the correct URL there are now hit save. I can come back.
William Rosener: refresh this, and now if I take a look down at the bottom there in the bottom left, I can see it wants to go to HTTPS weather.com and sure enough,
William Rosener: That's where it's gone. Okay, I'll take a look here. Next step is we're not going to add this exact same thing just simply using some green text them.
William Rosener: Okay, so I'm gonna go ahead and put a maybe a little paragraph break and just say, Well, time. I'm just going to go ahead and copy that.
William Rosener: And paste and the only thing I want to do different is only used in cascading style sheets here and also specify the color just going to be the property. And I'll just go with green
William Rosener: So you're going to specify property colon, then its value semi colon, and you can see in the later on we'll get to some that have multiple properties are but we just got one here. We're gonna be specifying the color has green. So let's go ahead and save that.
William Rosener: Take a look at it in my browser just hitting the refresh and shirt out. It's now in green. Okay, next one is going to be the reverse video
William Rosener: And if you have any troubles. Just keep staring at your code. And if you're missing a con vs double quotes accepted there, there's a good chance or code will not work.
William Rosener: And again, I'm gonna save a little time, I'm going to copy that information and paste it.
William Rosener: Okay, now rather than specifying the color are working to do not to. I'm gonna put a background.
William Rosener: Dash color as green background color, color green. Okay. Let's go and take a look at that. I'm going to File, Save come back to my browser.
William Rosener: It's a reload and here it is. Okay, this the green. The blue or purple isn't working. Very good. So we're going to go ahead and change that color too wide.
William Rosener: So what I'm going to do here is simply put color colon number type them wide, so get them over to have like an avid reader property.
William Rosener: Now you semi colon color on and value someone to save this. You can I get to control us to save it right and come up here to File, Save come back to my browser and hit refresh.
William Rosener: And when I look at that. It's kind of tied. I went on having a little extra margin around the outside of that this actually referred to as padding. So if you want you to come out here and I could type in padding.
William Rosener: And maybe I could put like three pixels. So now we've actually got three different properties Cascading Style Sheets there been specified for this one link here.
William Rosener: So take a look here, refresh that and now, but just a little breathing room around that tax. OK, next one is we're going to be turned in love texts off.
William Rosener: And I'll just go ahead and grab all this code again here.
William Rosener: And paste
William Rosener: Okay. So, on this side. Maybe I'll go ahead and delete this information. And so now what we're gonna do is, I'm going to type in text.
William Rosener: Decoration and I want to put down none.
William Rosener: Okay.
William Rosener: Go ahead and say that
William Rosener: Take a look at my browser.
William Rosener: Refresh. And sure enough, now there is no underlining and sometimes you may find that is your default theme. So that's your default. And then you actually may want to do the opposite.
William Rosener: And the opposite then would be rather than saying, none, you would say, underline
William Rosener: Which is, in this case, my browser is the default
William Rosener: And there we go.
William Rosener: Okay, so now taking a look. The next step we want to do is increase that insert a link to the Weather Channel from an image so that if I press on this image, I go to the Weather Channel.
William Rosener: Okay, that's going to be very similar. So I'm gonna go ahead and grab all this code.
William Rosener: Copy it paste it when it's a little bit higher on the screen. And let me go ahead and delete this information kind of gives us a little bit simpler.
William Rosener: So here's what we've got. Is it a per acre. I've got the URL. I've got some text and I'm going to close it. So I'm actually going to delete the text.
William Rosener: Rather than
William Rosener: Place in text there, we're going to insert an image.
William Rosener: And it's always a good idea to put an alt tag for people that are visually impaired.
William Rosener: So here's what we've got going, I need to actually insert a URL or but I got a for anchor hypertext reference equal
William Rosener: I placed the image kind of sandwich it in there and then close like maker. So now we're going to get the URL, and I'm going to show you a couple ways of doing this. One is
William Rosener: Here's the patient working on. I could go to the weather website.
William Rosener: And I can right click on one of these images. I think I came up here earlier. And I'm going to go to a pressed on the three little bars here.
William Rosener: And this website option is going to change over time. So the time you guys get to this may have changed. So I'm gonna go to severe alerts and nothing's come down here I can see some images here.
William Rosener: And I'm just going to go ahead and right click on maybe this one right here. You can actually click on any image.
William Rosener: Building which may not want to be careful. So if you clicked on over here. This is an ad and I come back five minutes from now, there's a good chance that ad will not be there and maybe
William Rosener: The image points to won't even be there so I could right click on this and this is going to depend on your browser. I can hit View image. So right click and so right click and view image I can come up here and position my cursor there and the URL, I can just hit the control see
William Rosener: I could come back to my documents and I can paste it right there kind of very long URL. So now I'm going to hit the Save.
William Rosener: And now let me come back.
William Rosener: More time. And here is the page of working out. So now I've got an image here.
William Rosener: And I can go ahead and click on it and sure enough, it's going to take me to the weather page.
William Rosener: Okay, let me give you one other option there because again, these images, keep changing on the Weather Channel and maybe depend on your browser you're not here to have a little trouble there. Another option is come here to assign them one
William Rosener: There was a little link here and you could write, you can actually click here on the Weather Channel.
William Rosener: And grab this image, I could then come up this way I handle this image is always going to be here. I could copy this URL or the path.
William Rosener: I can then come back in here. I'll tell you what, I'll go ahead and I'm only both of you. So I'm just going to voluntarily paste that. So I'm going to go ahead and copy this information.
William Rosener: They stood me put a paragraph right here.
William Rosener: And I need to close.
William Rosener: Okay, so this exact same thing here.
William Rosener: Here is the first approach. I started off by a per acre architectural principle I close it and I've been sort of an image.
William Rosener: And again, this image. Look at that URL, there's a good chance that if you come back tomorrow this image may not be here. I know this image is going to be here because I'm like, I personally
William Rosener: Personally, I don't know that image, but I have control over that. And until I believe it's going to stay there. So actually, not need to come here and grab this information. I could have actually grabbed the entire thing right here probably would have made sense.
William Rosener: That's going to grab this
William Rosener: And paste it.
William Rosener: There.
William Rosener: Okay, so either approach here I can use one of the images on their website, or I can link to an image that I know will exist here for several months. So now I'm going to go ahead and say that
William Rosener: Come back to my work here hit reload and now I've got two options. I can press on this image, or I can press on this one. And the other one is going to take me to the weather com
William Rosener: Okay. Last step we need to do is
William Rosener: PDF. But before doing a lot of times I like to have a little breathing room at the bottom, someone come back over here. Yeah, I'm just going to come down here and had some line breaks
William Rosener: Free to put as many as you want here on the put five
William Rosener: I'm not going to come back and hit reload or refresh. And now, no difference here is I've got a little breathing room not kind of
William Rosener: Right here, and it's like, I want to, like, is that something below there or not. And it's like, Okay, I clearly see there is some a blank screen now them. Okay. So, finally, the last step is sort of the link to a
William Rosener: PDF far that's going to be very similar. Here I'm just going to go a four acre hypertext reference equal
And
William Rosener: Then I'm going to go ahead and type in resume template.
William Rosener: Okay, so just like we did earlier, we have a for anchor hypertext reference equal. I'm going to insert a URL here I've got some texts that appears on the screen and close the anchor here. And so if I come back here to
William Rosener: Assignment one I press on the sign of one folder right here it is resume template. So I can now come right up here control. See the copy that.
William Rosener: Come down here position my cursor within the double quotes and paste and I know it's kind of a long URL to download. Now I'm going to go ahead and save this.
William Rosener: Come back to my document. I'm working on and hit refresh. And so now if I press on resume template, it's actually going to open up a PDF file.
William Rosener: So just kind of in summary here.
William Rosener: Started off with a header to tag or a header tag syntax. Then we inserted links using various approaches different colors within created a
William Rosener: Hyperlink an image. And then finally, with a link here to the PDF file and I'm going to have a separate video that walks you through uploading this thought this information.
William Rosener: But at this point, you now have got this this assignment finished, not just the process of uploading it to your web server. So take a look there should be a link here to a video that walks you through that as well. Okay, I catch the next video. Thanks.