jump over header and navigation menu
Arizona State UniversityInformation Technology at the West campus
 
ASU.EDU | ASU Interactive | myASU | Directory | Maps

ATTENTION: The West IT website will be taken down and archived at the end of the 2008 Spring Semester on Wednesday May 7th 2008.

Please go to http://techbase.asu.edu and update your bookmarks.

Web Link Syntax

There are 3 ways of writing links in html: Relative, Absolute, and Server-Relative.

  • Absolute links are the full Web address (URL) of the target file. The target file could be on any Web server on the Internet. Examples: http://www.west.asu.edu/it/start/web_tools/index.htm, http://www.google.com/.
  • Server-Relative links assume the file is on the same server and the link address eliminates the server segment of the URL. Server-Relative links must start with a “/” followed by the full directory path. Examples: /it/start/web_tools/index.htm, /asuw2/students.shtml. I the first example, the “it” directory is just off the Web root and the same is true for the “asuw2” directory in the second example. (Most people don’t know about this one. It's very useful if you have code you want to be easily transferable from one page to another without change, even if the pages are in different directories.)
  • Relative links are navigational directions from the “calling” file (usually a Web page) to the “target” file (usually another Web page or an image). The target file must be on the same Web server. The link syntax will be saying in effect “from this spot, go down the street 3 blocks, turn right and knock on the second door on the left”. Real life example: to link from this page (Web Link Syntax, URL = “http://www.west.asu.edu/it/start/web_tools/linksyntax.htm”), and link to the Recommended Software page (URL=“http://www.west.asu.edu/it/software/recsw.htm”), the link would be written “../../software/recsw.htm” What this says is “go up one level to the start directory, go up another level to the it directory, find the software directory and inside that find the recsw.htm Web page”.
Table of Relative Link Syntax Examples
(see the sample file structure at the bottom of this page)
  Link Type Example Link Syntax
1 Same directory index.html to p1page1.html,
both in project1 directory		 Just type the file name:
“p1page1.html”
2 Down one level
(away from the root)		 index.html in the root to p1page1.html in the project1 directory “project1/p1page1.html”
3 Up one level
(towards the root)		 p1page1.html in the project1 directory to index.html in the root “../index.html”
“../” means to go up one level in the directory structure
4 To another subdirectory at the same level p1page1.html in the project1 directory to picture1.jpg in the images directory “../images/picture1.jpg”
up one level, find the images directory and then find picture1.jpg

 

The following diagram is the basis for, and the numbers correspond to, the relative link syntax examples in the table above.

Sample file structure image for the Relative Link Syntax above.

 
Copyright Arizona Board of Regents   Contact: IT at the West Campus