You may be learning about coding in CodeHS. And now, you may want to add a link in CodeHS, but you do not know how to do that. Here, I will tell you how to add a link in CodeHS.
If you want to know about links including about how to add a link in CodeHS, you are able to watch a Youtube video of CodeHS entitled Links. This video was uploaded on June 20th, 2019 and it has been watched more than 4k times. So, here is the explanation about adding links according to the video.
Links are also known as hyperlinks. These connect web pages together. Hyperlinks point to hypertext documents which is what web pages are and this is what permits viewers to click from page to page when they are browsing the internet.
For example, on the video you can see that he has a link and he can click on it and it takes him to the Google page. One of the nice things about hyperlinks is that they link together relevant web pages and it makes it very easy for an internet user to find out more information about whatever web page they are looking at.
Well, if you want to add a link, you need to know that there is the <a> tag where it permits us to define a hyperlink in HTML. In the video, you are able to look at the structure of a link. You can see that in the Structure of a link, there is the standard text “Click Me” and it is not actually a link yet. So, here, you have to turn it into a link. You have to add the <a> tag around the text “Click Me” as you can see in the video and it decorates “Click Me”. It annotates “Click Me” to turn it into a link. There are some important partshere that he wants to break down. First, inside the <a> tag, we have the actual text that is shown on the resulting web page. So, on the web page, you will see the text “Click Me”. Inside the tag, there is the address that the link actually takes you to. So, if you click on that link, it will take you to Google.com. You can see the structure of the link on the video is like this:
<a href=”https://google.com”>
Click Me
</a>
Then, he explains that this is something new and this is something we have not seen before. We are actually permitted to add text inside of an HTML opening tag. We do this with HTML attributes. It turns out tags can have tributes that tell us more information about the tag.
For example, we have an <a> tag. We can add an attribute to this tag to give us more information about what this <a> tag is doing. So, attributes go inside of the opening tag. There is a space after the tag name and then this whole thing is the attribute. So, attributes have both a name and a value. The name goes on the left side of the equals without quotes and the value goes inside double quotes. So, the general format is name equals value inside quotes.
<a href=”https://google.com”>
General format: name=”value”
Example: href=”https://google.com”
For example, on the video, you can see that there is href equals in quotes the URL for google.com as you can also see above. This is saying that this tag’s reference (href) is google.com. It links or points to google.com. So, if this link is clicked, it will take you to Google.com.
The idea here is just putting an <a> tag around “Click Me”. However, it is important for you to note that it is not enough information to make a full link. You have to add this attribute to actually tell the browser where this link should take you. So, if you add this <a> tah with the attribute, it will annotate to the Click Me text to turn it into a hyperlink to Google. So now, if you click on Click Me, it will actually take you right to the Google page.
In the video, he also shows that he has a simple web page that has a header which says “Welcome to CodeHS”. And, there is also the text right there saying “About CodeHS”. The thing that we want is that we want to be able to click the About CodeHS and it should take us to a page that gives us more information about CodeHS.
The thing that you have to do here is to turn the standard text into a link. So, to find the <a> tag, you have to go over to resources and there you can see your resources tags. There is <a> and also an image which we will get to later. As you can see in the video, he drags out the <a> tag below the header. And, inside the <a> tag, there is the text. He has what he wants the link to actually link to. If we run this, you can see that now it is a link, but it does not actually take you anywhere. So, you have to define where the link should take you. To do that, you need to give it an href attribute a reference. You want to reference the information page for CodeHS and that page is able to be found at https://codehs.com/info. Then, you can try this. When you try to click this link, you will see that it takes you to a brand new page. And now, you are able to learn more about CodeHS. Even on this page, you are able to see that you have some more links.
Well, that’s the explanation about how to add links on CodeHS according to CodeHS Youtube channel. You are able to watch the video on Youtube to see the steps of adding links clearly. The title of the video is Links and it is available on CodeHS Youtube channel.
