In our previous lessons we've learnt the ways of creating and modifying an HTML document, inserting headings and paragraphs, making alignments and indentations and also inserting inline graphics and images in your HTML document using the <img src> tags. And by now you must have understood that creating a basic web page is not so difficult, as you might have thought it to be. You have persevered this far, have faith guys, you do have the capability to move further.
This lesson has been designed to help you learn and know about "anchoring" i.e. crafting a local hypertext link within your document clicking on which the viewers will be re-directed to a second page. These are known as the “local” links, just because of the simple reason that the anchor is not virtually located, and is placed in the very same place as your working document.
Welcome to Lesson 9 (a) – Creating Hypertext Links at Different Levels
HTML anchoring, I admit, is a bit difficult a subject to grasp in the very first instance, but work through the lesson and you’ll get a hold of what actually needs to be done in this context. Aimed to keep the lesson short, precise, easy-to-read and simple-to-understand, we have divided it into four comprehensive segments:
- Creating a link to an HTML document.
- Creating a link to an image file.
- Linking a file that is virtually located.
- Reorganising the web structure.
Now let's discuss them one-by-one.
Creating link to an HTML document
Creating links to local files is by far one of the simplest forms of anchoring. In case of local anchoring, the browser interprets the command to open up a second HTML file placed within the same subfolder as the working doc. The general HTML format for local linking is: <a href="filename.html">name of the web page to be opened</a>, where "a" is the anchor link, "href" connotes "hypertext reference" and "filename" refers to the second document with similar extension names as your working document, and the text segment enclosed within the <a…</a> tags appear "hypertext".
Take a section of this very document for example. Follow the below-mentioned steps to build an anchor link in your HTML document to a local file:
- Open your working HTML document in the text editor.
- Following the heading ‘Welcome to Lesson 9 (a) .....” go to this section of the document and add another small line:
Aimed to keep the lesson short, precise, easy-to-read and simple-to-understand, we have divided it into four comprehensive segments: Create a link to an HTML document, Create a link to display a graphic image, Create a link to a file in a different directory and Reorganize the structure of your web, detailed discussion of which is provided in the later parts of our lesson.
- Below the heading “Welcome .....” enter:
Aimed to keep the lesson short, precise, easy-to-read and simple-to-understand, we have divided it into four comprehensive segments: Create a link to an HTML document, Create a link to display a graphic image, Create a link to a file in a different directory and Reorganize the structure of your web, <a href="link.html">detailed discussion</a> of which is provided in the later parts of our lesson.
The text "detailed discussion" appears underlined, in blue and "hyper" that anchors the viewer to a second HTML document – link.html. This new file link.html will however be created in steps 5 and 6.
- Once you are done with inserting the <a href ...> tag, save and close the HTML file
- Now, we will create our new file link.html. To do so, open a new document in the text editor.
- Enter the following text in the new window:
<html>
<head>
<title>HTML Anchoring</title>
</head>
<body>
<h1>Linking to Files</h1>
Creating local anchors is the very first step in creating a hypertext link to a second web page. These links are called "local" as they are placed in the same subfolder as our working document.
</body>
</html>
- Save this file as link.html in the same folder as your working HTML file.
- Reload your HTML document in your web browser.
- Test the hypertext link for the words "detailed discussion". When selected, it should connect you to the new page on HTML anchoring.
This ends our discussion on creating links to an HTML document within the same directory as your working file.
Creating link to an image file
Remember our topic of discussion in lesson 8 (a)? It was all about inline images and image alignment, their heights and widths and the alt=" " attribute. Here we'll learn of yet another approach of displaying a graphic file on your web page. Sounds interesting, huh? Well, it is with the use of the anchor tag that you can also create a link to display a graphic file. When your site viewers select the anchor link, the image file gets downloaded and displayed in your web browser. The general format for linking an image file is: <a href="filename.gif">responsive text</a>, where filename.gif is the name of a GIF image file. How to add a link to graphic file? Follow these steps to create the same in your HTML document:
- First of all download a copy of a GIF image to be displayed on your web page.
- Open the link.html file in the text editor.
- Make subtle modifications to the text to insert the image link.
Local anchoring is by far the very first step to creating a hypertext <a href="html.gif">link to a second web page</a>.
- Save the link.html file and reload the doc in the browser window.
- Click on the newly created link.
- A picture of a hypertext link will be displayed.
Next we’ll discuss about creating links to files that are virtually located.
Linking a file that is virtually located
Similar to creating links to local files and graphic images, links can also be created to an HTML document or graphic file that is virtually located. Professional web authors usually sort all graphic files and images and maintain them in an ‘images’ folder. And if seen from a logical perspective, as the creation of HTML files start getting more and more, maintaining a separate folder for images and linking them to your document as necessary and appropriate, makes the entire thing all the more organised. Let's find out the way to implement the same:
- First of all, create a new folder - 'images' – and place it in the same location where your working file is stored.
- Now, move the html.gif file to this new folder.
- Open the link.html file in your text editor.
- Edit the anchor tag for the graphic to read:
Local anchoring is by far the very first step in creating a hypertext <a href="images/html.gif>link to a second web page</a>.
The " / " character commands the browser window to open a document or a graphic file in a subfolder at a lower level. The web browser interprets the command to point to a subfolder called ‘images’.
- Once you’re done, save the HTML document and reload in your web browser.
And now as you’re well-versed in commanding your web browser to open a document or a graphic files at lower level directory, we can go ahead and discuss the ways of anchoring the higher level directories as well. So here we go!
Reorganising the web structure
Based on our previous discussions of linking to local and remote files, till now, our work was restricted to "relative" links – links (within the <a href=...> tag) based on which our browser friend interprets and builds the entire URL, and displays the necessary document and graphic file. This is undeniably one of the most powerful of all potentials of HTML, thus allowing you to design your web pages on one computer, test them on the same computer and subsequently shift them to a different machine with all links remaining intact!
In this very lesson, and to be more precise in the very previous section, we have learnt the ways of anchoring documents placed in a lower level folder than the working HTML page. Links can also be called by your working document from a higher level directory as well. Following is the HTML format to construct links to a higher directory: <a href="../../home.html">Home Page</a>.
Note: The "../" commands the web browser to access a higher level folder in comparison to the folder of the current page; with "../" the browser checks two directory levels and searches the necessary file for display purpose. In our example, had 'images' folder been residing at a higher level, then what would have been the scenario? Refer to our previous example of the HTML format: <img src="images/html.gif">. Now, with a reorganized structure of the web the ‘images’ is sitting there at a higher level folder. So now the link needs to be modified to: <img src="../images/html.gif">
With this HTML command, your web browser now starts searching for the folder at a higher level. And now it's time that we work on re-organising our web page. How do we do it? Here's the solution:
- Create a new folder 'html' (file name to be in lower case).
- Shift the two HTML files – the working document and the link.html in this folder.
- Also move the images folder over here.
- Now the entire work frame directory comprises of two subfolders – the older with the HTML files and the folder with the pictures.
- With the shifting, it is important that we make the changes to our anchor links as necessary and appropriate. Go to the section that reads:
Local anchoring is by far the very first step to creating a hypertext <a href="images/html.gif>link to a second web page</a>.
And change it to:
Local anchoring is by far the very first step to creating a hypertext <a href="../images/html.gif>link to a second web page</a>.
- Once you're done with the editing, save your file, return to your browser and reload your document. The image file should be displayed as it was being displayed previously.
This completes our lesson on creating links to files – local or virtual; a lot of study and work has been done. So let's postpone our discussion on using HTML for linking to resources over the Internet.
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 27/05/2009
