Linking Web Files for Web Design

written by

Posted April 1st, 2010

Linking Web FilesIn my previous web design article, HTML Tags for Web Design, I covered HTML tags and browsers for web design.

This time, I’ll tell you more about linking to make your website more usable; another important consideration in web design:

  1. Absolute versus Relative Links
  2. Linking pages to other pages, files, or sites
  3. Bringing in images from other directories, or sites

Absolute versus Relative Links

What is an Absolute URL?

An absolute URL is a full path in a URL (Uniform Resource Locator) to an exact destination or file.  Here are some examples:

  • http://domain-name.com
  • http://domain-name.com/directory/
  • http://domain-name.com/directory/sub-directory/file.extention

You’d use absolute links if you were:

  • linking to website
  • linking to a file on website
  • theming a CMS (Content Management System) that requires absolute links

What is a Relative URL?

A relative URL is a path to a destination or file relative to the location that the link is being called from.  Here are some examples:

  • /directory/
  • /directory/file.extention
  • /images/logo.gif

You’d use a relative link if you were:

  • linking to files within your site
  • linking to pages within your site

Linking pages to other pages, files or sites

Now that you know when to use an absolute URL and when to use a relative URL, I can show you how hyperlinks are made to make a website more usable.

From my previous web design post, the HTML tag for a link is  <a href=”destination-here”>Text Here</a>

What this is doing is opening an anchor tag <a></a>, giving it a destination href=, and telling what the anchor text will be. Anchor text is the actual text making up the link, it can be an image as well. For SEO purposes use keywords when creating anchor text.

Examples using HTML Links:

Link to another site:
<a href=”http://twitter.com/kennywharper”>View my Twitter</a>

Link to a file located in the same directory:
<a href=”myfile.doc”>Check out this document</a>

Link to another site and open another tab/window:
<a href=”http://youtube.com/keytheory/” target=”_blank”>My YouTube Page</a>

Link to another page in a directory (named chocolates) on the same site:
<a href=”chocolates/myfile.htm”>My YouTube Page</a>

“/” will take you to the root directory:
<a href=”/”>Go to index</a>

“../” will take you to a directory higher.
<a href=”../”>Go to directory above</a>

Bringing in images from other directories or sites.

Would you like to see how to add images to your document?

The HTML image tag is <img src=”mypicture.jpg” />

Img stands for image, src for source, you can also put other attributes such as an alt tag or size dimensions:
<img src=”mypicture.jpg” alt=”Description of image for seo & vision impaired” border=”0″ />

This technique is used code images into your HTML page.

(Different mark up is used for embedding Flash, Videos or Scripts.)

Note: You can also use CSS (Cascading Style Sheets) to bring images into a web design. Using CSS is actually the best practice when building a website.

Examples coding images into HTML pages:

Use links to get an image into your page from somewhere else; you just need to correctly identify the source.

Code in image from another site: (absolute)
<img src=”http://img383.imageshack.us/img383/3066/ss35450qf7.jpg” />

Code in image from the directory named “images” located in the same directory: (relative)
<img src=”images/myimage.jpg” />

Posted in: Marketing, Web Design | Tags:

Related Posts