Links and alignment

You are viewing the article: Links and alignment at

In the “Container Tags” section, we began examining online links that allow you to “click through” to another website that is active on the Internet. For example:

Click here for PC World

It is important that the address contains “http://”, because this is how the browser recognizes that it is an online address. If you omit “http://”, the browser incorrectly searches for the page on your local computer.

Local Connections

Create three web pages: index.html (the home page), contacts.html, and products.html. Linking between the three is simply a matter of customizing online links.

contact page

You’ll notice that in the above case, “http://” is intentionally omitted. This is because we don’t want the browser to go online to find the relevant page – it should be in the same local folder as all the other images and HTML pages we’ve created.

When your website is uploaded to the web, the relationship between your files remains unchanged. As long as index.html, contacts.html, and products.html are in the same folder, your local links will work fine.

inline links

Imagine a page where clicking on a link takes you to another place on the same page – these are inline links. A commonly used example is FAQ (Frequently Asked Questions) pages.

With both online and local links, there is a reference point to refer to – the file name. If the links are within the same file (and therefore have the same file name) as inline links, alternative reference points must be created. This is done with a script similar to the following:

reference point here

october01shot - Links and alignment

Using this code, clicking a reference point link will take you to that reference point.

In the code in the attached figure, the value of “a href” is prefixed with a hash (#online). As with ‘http://’, ​​this tells the browser where to look for the given reference point; in this case the search is in the document itself.

mail links

Almost every webpage you see has email links which, when clicked, will launch your email client and automatically insert the TO: address into a new message. The following code shows how to do this:

email me

It uses the same anchor command as other links, but this time the property is a combination of the words “mailto:” and the email address.

Graphic links

Previously, all links were textual, meaning users click on text to activate a link. Links can also be activated by clicking on a graphic. Last month you saw how to insert an image with the following code:

Yahoo link

To create a graphic link, replace the text object with an image object:

yahoo link

With this code, clicking on the image would take a user to the Yahoo website.


1) When you hover your mouse over any link, the given address will be displayed in the lower left corner of your browser.
2) Any text inserted in it Tags is invisible to the browser.


So far this column has explained how to format text, insert images and create links. To align these elements to the center or both sides of a page, see the following examples and explanations of the different types of alignment options.

If I paste the align property and value with ‘P’ the entire paragraph is aligned accordingly and a ‘/P’ tag is required to end the alignment.

This centers the text between the aptly named commands – note the American spelling.

The blockquote command indents the text from each margin.

This is similar to P alignment, except that paragraph breaks are not inserted

See more new articles in category: GUIDES
Leave a comment