Basics of HTML Links
If you’re following the series of posts, you will have created two basic html web pages so far, one called “index” and one called “music”.
If you haven’t been following the posts, you can read them from here if you want…
You do not need to follow these posts, if you want to specifically read about HTML links you can read this post as standalone, but if you want to follow the series, you will end up with a website created on your desktop….. for FREE!!
HTML Links
If I asked you what an anchor is, you would probably explain it to me as something that is dropped from a ship that drops to the sea bed and prevents the ship from drifting away.
Now that you are a HTML-guru work-in-progress you are about to find out about the anchor tags <a></a>.
Rather than keeping you where you are, the anchor tags contain all the information needed to move to another page/site.
I always meant to find out why these were called anchor tags, but then I realise I don’t really need to worry why, but just to make sure they work, maybe some day I will get motivated enough to look into this further.
The Elements of HTML Links
As well as the opening and closing anchor tags, the links also include
- href=: Short for the hypertext reference, this tells the browser that a web address is about to follow
- The web address that the browser is to go to if clicked. This should be in quotes.
- The text to display. You don’t have to have the web address showing as the link, you may see something like “Read more…”, “Click Here”, or at the top of this post I have included links to two other posts, but the text you see in these links is not the web address. You can show whatever text you want by typing it into this section of the link.
Next we will look at creating links to another website entirely and also to pages within our website.
If you are following my series of posts, open “index.html” now in your text editor and also in your browser.
The code should look like this….
HTML Links to other sites
First, we will add a link to another website, we will use my blog site as the web address we want to go to.
The code we will type is in red below and the explanation beside each section
- <a Our opening anchor tag
- href= Telling the browser that a web address is about to be given
- “http://blog.thejaytray.com” This is the web address that we want to go to, note it is between double apostrophes (quote marks)
- > The closing bracket comes after the web address
- click here to go to the best blog site ever This is the text that will appear to the user and that the user will click on
- </a> Our closing anchor tag
You can include a link mid sentence, it does not have to be a standalone item. Within a paragraph tag, we will have the text “If you would like to know where I learned how to do this ” followed by the html link to the blog site, but the user will see “click here to go to the best blog site ever” and this will be followed by ” and try it yourself.”.
We will enter this paragraph at line 10, just after our h2 heading “Hello World”.
Without the html link, our code would be
We can add the opening anchor tag, href and web address to the above code just before “click here” and then the closing anchor tag after “site ever”. This gives us
Notice that part of our text has changed to blue and underline. This is now a hyperlink and clicking on this brings you to the web address.
Save your text editor file and refresh the page in your browser and you should be able to click on your new html link.
HTML Links to other pages
If you wanted to add a link to another page on your website, this is what is called a relative reference.
The HTML link code looks very similar to the last code, the difference here is that you only have to reference the page and not the whole web address.
The code assumes that the page is within the same web address.
We are working on our index.html page but we also have a music.html page in our folder. While we are working on a folder on our desktop, the parent folder itself is like our main web address or domain (think of it as website.com) and each html file in the folder is a page on that website (website.com/index.html and website.com/music.html).
We will add a link to the music.html page, but we do not need the http://website.com/ part of the link.
Our paragraph text will be “We have a second page created called music”. The word music will be the text displayed in our link.
Next…
Next time we will add some pictures and video and then we will finally get around to making things look fancy!
[grwebform url=”http://app.getresponse.com/view_webform.js?wid=4307503&u=CucD” css=”on”/]
