To link to a page outside of our own, or even to a section of our webpage, we use the <a> tag and the corresponding </a> element. Your link can go to any webpage you wish. For my example, I will create a link that goes to Facebook. Once you add the <a> tags to your page, any text you enter between these tags will become your link. In my example, I can enter “Facebook” or “FACEBOOK” or even “Click here to go to Facebook!”
Although you can type anything between these tags, there are some obviously incorrect things to type into this spot. For example, typing “Twitter” or “Instagram” would not make any sense, whatsoever. It is also known as entirely improper to write something along the lines of “CLICK HERE!” because the user has no idea where this link will take them.
Now that you have text between your tags, let’s go ahead and make this tag active. To do this we will add an attribute to your <a> tag. Attributes are modifiers of HTML elements. Attributes can change HTML elements in a number of ways. In our case, we are going to use the “href” attribute on our <a> tag. This attribute adds a hypertext reference to our element, allowing us to create a link to wherever we’d like to go. Although we add this attribute to our <a> tag, we don’t have to change anything to our </a> tag.
Attributes are each seperated by a space within the tag. However, the tagname must always come first. once we add our href attribute, we must set it to a value. For my example, I would add “href=”https://www.facebook.com”. Note that each attribute’s value must have either single or double quotes around it. If you’re not sure where you want your link to go yet, it’s always smart to set the hypertext reference to “#”. Once we add our <a> element and attribute, our code should look something like this:
NOTE: Excluding the “www.” from your link is not recommended, although your link will still work. However, if we remove the “http://” or “https://” from the beginning of our link, The browser thinks we are trying to access a file within our directories, and therefore our link stops working.
Now we can try to add an internal link! To do this, we must first create another HTML page. I recommend simply saving your file again, only changing your name to something different, such as “secondpage.html” You can make a duplicate file of your current one by simply going to “file-<Save as.” Be sure to save it in the same folder, but use a different name! Once you have done this, we are ready to create an internal link.
We start just as before. We will create an <a> tag and corresponding </a> tag. Now we add the attribute “href”. Once we have done this, we can set the value of the href to the name we gave our other HTML page. For example, your link may be:
NOTE: If your new HTML file is in a different folder, you can still access the file by simply defining the folder’s name, followed by a “/”. For example, if my file is multiple folders deep, my href may look something like “foldersampleone/foldersample2/secondpage.html”. On the same note, if my file is in folders above my first HTML file, I can signify that I want to move up folders by using “../” instead of the file name. For example, if my file is two folders above my current one, my href may look something like “../../secondpage.html”.
Once we have done this, we can learn how to add an image!
Previous Next