Creating Links - Chapter 7
Creating Links
Creating links with HTML is similar to adding an image in that you have to include an attribute within the appropriate element.
The <a> </a> (anchor) element is used to add a link to an HTML document. The World Wide Web is made up of links. In fact you could say if there weren’t any links, it wouldn’t be much of a web. You can now add a link to your index.html document like millions of websites do using HTML.
To add an link to your document, you would write the basic structure below, where <a> is the anchor element and href is the attribute; href stands for Hypertext Reference—it lets the browser know what to link to.
<a href=“URL”> Words you want to show up on the screen </a>
So if you wanted to display a link to BlackandEducation.com, you would write:
<a href=“https://searchblackandeducation.com ” > Black and Education</a>
It would show up on the screen as:
There is a default style that is applied to links by the browser that is used to view the webpage. You can change this styling, and we will, with CSS.
So you can add a link to other websites, you can even add a link to pages within your own website. That’s what a navigation bar contains, links to your own website!
Let’s see how this can be done.
As we discussed the Web is made up of lots and lots of links. Well, when you want to link to another page in your website, you can simply link to another file within your folder.
Let’s look at two ways of linking within the same website.
If you wanted to add a link to the bottom of a page that sent someone to the top of the same page, you could add a link that looks like this:
<a href=“#”> Back to top</a>
The # symbol defaults to the top of the page within which it is located. (There is also another very important use for this symbol, which we will take about when we get to CSS).
In order to make a link to another page, you have to create another page within your folder. Let’s create another page in our folder, we are going to call it: about_me.html. In order to link to it you would write:
<a href=“about_me.html”> About Me </a>
Write the filename in the value space of the href attribute and write whatever you want the page title to be in the space between the opening and closing tags.
So the format is:
<a href=“page.html”> Page Title </a>
If you wanted to create a navigation menu, you would create links to the pages in your website. We mentioned earlier that elements can be nested inside of other elements, many times a navigation menu consists of anchor <a> elements nested inside of an unordered <ul> list.
Let’s see what that would look like.
Navigation menu (sample)
<ul>
<li> <a href=“index.html”> Home </a> </li>
<li><a href=“about_me.html”> About Me </ a></li>
</ul>
Refer to the course booklet for the code for Exercise #7.