Introduction
Naming
Files Directories and Files Linking Files
File URL Cheat Sheet
Evaluate
this tutorial
PDF Handout
Download Adobe Reader
|
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 http://www.ischool.utexas.edu/.
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:
foldername/filename
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:
../index.html
For example, if you want to provide a link on your resume page to the
homepage, the link should read:
../index.html
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.
|
Watch the video

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