Basic Links
Once you have the ability to create HTML pages, you’ll want to learn how to create links between them, so that you can start building a site. Links are the essence of HTML — they are what makes it unique.
While you learn links I’ll also teach you the fundamentals of site organisation and structure.
This page was last updated on 2012-08-21
First Links
Ok, you have a page that you learned how to write in the first lesson. Now, you’re going to need another page. It doesn’t have to be anything great, just a very basic page will do. You can copy the first page and just save it as a different name if you want. Just make sure you know the names of the two files and that they are in the same folder. Don’t forget to call your homepage index.html.
sourcetip: Always use lowercase letters when naming html files, images and folders. Most web servers (the computers you’ll eventually be putting your site onto) are case-sensitive, which means it matters to them whether your files use capital letters or not. When linking to pages or typing in URLs, you don’t want to have to remember the case of each letter, so if everyone uses small letters the problem goes away.
Link Structure
Like all tags, links follow a structure, and have start tags and end tags. Put this line of code on one of your pages.
Explanation:
a:astands for Anchor, which means Link. This is the tag that makes it all happen.href: Means Hypertext REFerence. Thehrefpart is another attribute, with the location of the other page as its value. Just change theotherpage.html to the name of the second file. Don’t forget the quotation marks!
Whatever you put inside the link tags will become a link, coloured blue and underlined. When you rest your mouse on it your cursor will turn into a hand and the URL of the page will appear in your browser’s status bar (at the bottom of the window). If you want to make links to other parts of your page (for example a link to the top of the page), set up some internal links. Changing the default colours of the links is dealt with in body attributes.
Linking to email addresses
If you want to let people email you by clicking a link, you use this code:
<a href="mailto:bruce@example.com">mail me</a>
to create this — mail me — which will open the users email program with your address in the To: box.
Linking to pictures
Linking to a picture file is practically the same as to a html file. Just include the name of the file, and do not forget the correct suffix — i.e. if it is a gif or a jpg. For a rundown on the file formats for images on the web, read this. If you want to use a picture as a link, read the next tutorial.
Linking to files
You link to a file just like a picture. The only difference is that it won’t open in a browser, but instead will download onto a specified place on the reader’s hard drive. An example:
<a href="ambient.mp3">download the song (2.6MB mp3)</a>
Embedding a file directly into a page is a different process. We have a page on Internet file formats too.
Absolute and Relative Links
Internet addresses closely follow the established hierarchy structure you’re probably familiar with on your computer’s file system. First comes the Internet domain, like www.example.com. Next comes the directories (folders) that contain the file and finally the file’s name, with the appropriate file type extension. Each segment of an url is separated with a forward slash. Always remember: on the Internet, all slashes go forwards.
There are two different ways to point your links to a file. “Absolute links” include the full website address, including the http:// and www. bits. “Relative links” are much shorter and more manageable, and can only be used to point to other pages on the same website.
For instance, say you have a page called page1.html in the “links” directory of your site. The absolute href to this page is http://www.example.com/links/page1.html. So, you put that link anywhere on any page, on any site and it will always go to that page on the web.
Relative links can only link to a page from the same site. The address is always relative to the position of the second file. If you were linking to that same page from a page in the same directory, the href would be just page1.html. If you were linking from your homepage, i.e., in the root directory, the link would read <a href="links/page1.html">, as you would have to go down into the directory first, and then get the file.
sourcetip: If you name files index.html in your directories, you can make links to these pages by just linking to the directory name. Your browser will always pick up index as the main page for that folder. This means you can condense href="folder/index.html" into href="folder/". The slash tells the browser it should look for a folder, and not a file. Don’t forget it!
Linkal Gymnastics
If you need to go up a directory, and then back down into another one, you’ll have to understand how your site is laid out. Using HTML Source as an example, we are now in the “myfirstsite” section. Have a look at your address bar to see. If we wanted to link relatively to the “images” section, we’d have to go upwards one directory and then down into the images directory. So the full relative href would be
"../images/index.html"
See the two dots? They mean “go up a directory”, towards your root. So no matter how deep into your site you are, you can always come all the way back with a couple of ../../’s. Just count the directories until you’re at the right level.
sourcetip: If you want to link to a page that is near the top of your site (not deep in directories), you can start the link with a slash. This means “start at the root directory”. So, the href above could just be /images/. This saves you having to put in loads of ../../s. A link back to your homepage is always href="/"
Outward Links
On outward links (links to other sites), you must always remember to prefix the address with http://. Otherwise, the link won’t work, the browser will look for a file called www.yourhtmlsource.com in your site. You will be linking to us, right? You’ll be my new best friend if you do, cheeky.
To do this correctly, you’re basically just offering an absolute link, like above. So, the correct address to link to would be http://www.yourhtmlsource.com/. Notice the ending slash? That only goes there for directories (i.e. folders) or domain names, as in this example. Don’t put a slash after a .html link, just for directories like a .com or an address without a suffix.
Site Structure
Without a simple game plan, your site could soon be very hard to find stuff in for you, what with all the files you keep piling into it. Thus, you should group pages of similar theme into folders (directories). Keep all your images in one folder too, away from your html files (call the folder “images” or “media” or something like that).
I would also advise you to work on a template of your design. It may not be important now, as your site may not have a distinctive design, but later having this file will save you hours of time. What you do is save a file with no content, just the layout of your pages as TEMPLATE.html in each directory of your site (capitals so it stands out), with the links all correct. Then when you’re adding a page to a folder, you just open this file and add your content into it, and save under a different name, leaving template.html empty, ready for another use. To see our template for this directory, see this. Check, we have one in each directory.
Say you had a site about the solar system (just say). Keep all the files about mars in a folder called “mars”, with all the pictures of mars in a directory called “images” in the directory called “mars”. And keep the pictures of Uran— ...no. I am above that.
Speaking of pictures....
