banner
Welcome to HTML.co.uk, the number one resource for all news, information, and happenings regarding HTML.

Updates: HTML.co.uk has just been relaunched. Subscribe to our RSS Feed to stay on top of HTML news and techniques.
May
6th

Referencing in HTML

Author: Editor | Files under HTML Basics, HTML Tutorials
Tags for this article: , , ,

As we know, HTML files consist purely of text. Nevertheless, many websites contain graphics, background graphics, multimedia elements, java applets, flash animations and more. In HTML, such elements are noted in the form of a reference to a specific data source. Even a link to your own website, or another site, is only executable if you name the link destination. Referencing is required in HTML for all these purposes.

There are also places in complement languages such as style sheets or JavaScript, where other data sources must be referenced.

The rules for referencing always stay the same. The reason for this is the central and universal web address system, which functions independently of the syntax from single operating systems and allows one to exactly specify any web address they desire.

Referencing with complete URIs

You must reference with fully complete URIs if you are not referencing data sources from you own website.

A URI (universal resource identifier) is something like http://www.html.co.uk/ or http://www.html.co.uk/12/defining-colour-in-html.html. Both web addresses are also simultaneously URLs (uniform resource locaters). And then there are also – in order to make the confusion complete – so-called URNs (uniform resource names). The last is conceived for distinctly naming data sources that do exist, yet are not accessible online through any known internet protocol. A URI describes both URLs and URNs, where URIs and URLs are typical web addresses, behind which concrete data is contained. URIs and URLs are also technically the same. However, in standard HTML the talk is of URIs.

Examples of URIs:

http://www.html.co.uk/

http://www.html.co.uk/about

http://www.html.co.uk/category/html-tutorials

http://www.example.com:8000/blah/

http://www.example.org/cgi-bin/search.cgi?expression=referencing

Explanation:

A complete URL consists of an internet protocol designation, for example either http or ftp, followed by a colon. Afterwards – depending on the protocol – additional information concerning the network name can be included. This designation is enclosed within two forward slashes “//”. Most addresses do not include such designations, which is why the two forward slashes simply stand there without any content in between.

The online address for the host’s computer, where the data source is located, follows thereafter. This can either be a domain name or a numerical IP address. The domain name in the above example is html.co.uk. The www before is typical for the internet and web servers can adjust the pre-setting for sub domains. A so-called port number can follow the domain name after a colon. This is always necessary when the data source isn’t reachable over the standard port of the entered protocol, such as http, but instead via another port. Port numbers are seldom used, but it is still good to know about them.

Then the local path designation to the data source follows. Regardless of the operating system – directory paths are always separated with a simple forward slash. It is the task of the server software, located on the computer, to correctly produce the path designation. As a result, you need not worry about what operating system the computer you are accessing is running.

One can access as many files and data sources as desired from the computer. The only requirement is that they are accessible from the protocol entered, such as http. Files are not necessarily the only accessible data. With a “#” followed by a name, one can access a specific destination anchor within a HTML file. We will describe later how to define such destination anchors. URIs can also be the execution of CGI scripts with parameters, like in the above search.cgi?expression=referencing example.

Characters, that aren’t contained within the ASCII table code or have a meaning in URIs (such as the forward slash, colon or percent character), must be masked within an URI. This occurs by entering a “%” with the hexadecimal value for the character.

Take Note:

The descriptions above are directed towards HTML learners and make no claims whatsoever to completeness. The concept of URIs is much more complex than has been presented here. If interested in learning more, you can read here for more information on URIs in a World Wide Web context, or here to learn more about the general syntax of URIs.

Reference to a base URL relatively with absolute path designations

You can opt for this form of referencing if the desired data source is located on the same host computer, and if it is accessible via the current protocol and the standard port. This sounds more complicated than it is. Within the complete URI http://www.html.co.uk/category/html-tutorials, the /category/html-tutorials part is an absolute path designation relative to the base http://www.html.co.uk URI. You can work with such path designations within your own website and domain or sub-domain.

An Example:

/
/index.htm
/index.htm#about us
/background.gif
/presentation.pdf

Explanation:

The first forward slash following the base URI stands for the internet service’s root directory. Typically it is not the same as the actual root directory on the computer or hard drive, from which the data is extracted. With web servers, for example, one can determine which actual directory the web directory should correspond to. Everything can follow after the base URI that we just discussed above.