Site Management
Computing Resources >> Tutorials >> Web Development >> Site Management 


Naming Files

Linking Files

Evaluate this tutorial


Linking Files

When you design web pages, you need to know how to make links to other files located in different folders. Web designers usually use relative links when linking to other sections of the Web site that are under their control, and absolute links when they cannot control the site. For example, the relative link from your homepage to your resume page will be resume/index.html; the absolute link to our iSchool homepage is

Here we will focus on making relative links to Web pages within a site.

Linking Inside a Folder

To link to the folders from the main folder, the relative link would look like this:


For example, if you want to link to a graphic file in the images folder from the homepage, the link should be images/filename.jpg or images/filename.gif (depending on what file format it has). If you have a folder called resume which contains a PDF format of your resume, and you want to link to it from the main folder, the link should be resume/resume.pdf.

Linking Outside a Folder

Let's say your main folder is inside another folder and you want to link to a file outside. Your link would look like this:


For example, if you want to provide a link on your resume page to the homepage, the link should read:


Notice the .. /. That's a code that tells the browser it should get out of your folder one time and then access files in the folder where your folder is located. Every time you type ../, you're telling the browser to go up one level.

So lets say your link looks like this: ../../index.html. That means you're telling the browser to look for the file index.html - two folders outside yours (or up two levels).

This is important to remember because if your page is part of a larger project and you need to access a main interface, you'll need the ../ to get out of your folder.

Linking Files in Same Folder

If you want to link files that are located in the same directory, the link is simply the file name itself. For example, if you want to link from resume homepage to resume.pdf file, the link should read resume.pdf, because the resume page and resume.pdf file both are in the resume directory.

* Please notice that different file formats have different file suffixes. You need to pay attention to file suffix when you link different files. Please reference File Name Extensions in this tutorial.

next section >

Watch the video

choose format/speed
dial-up | broadband
dial-up | broadband
dial-up | broadband

Tutorial Transcript

© 2003 Nadalia Yuehong Liu| iSchool | UT Austin | webmaster