Links and alignment

In the column 'Container tags' we began investigating online links, which enable you to 'click through' to another Web site that is live on the Internet. For example:

<A href="http://www.pcworld.idg.com.au">Click here</A> for PC World

It is important that the address includes 'http://', because this is how the browser recognises that an online address is being referenced. If you omit the 'http://' the browser will incorrectly look for the page on your local computer.

Local links

Create three Web pages: index.html (the homepage), contacts.html and products.html. Linking between the three is simply a matter of adapting online links.

<A href="contacts.html">Contacts Page</A>

You will notice in the above instance that 'http://' was omitted, on purpose. This is because we don't want the browser to go online to find the appropriate page - it should be sitting in the same local folder as all the other images and HTML pages we created.

When your Web site is uploaded to the Internet, the relationship between your files remains the same. As long as index.html, contacts.html and products.html live in the same folder, your local links will function perfectly.

Inline links

Think of a page in which clicking on a link takes you to another location on the same page - these are inline links. A commonly used example is with FAQ (frequently asked question) pages.

With both online and local links, there is a reference point to link to - the filename. 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 script similar to the following:

<a name="reference">Reference Point Here</a>

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

In the code in attached figure, the value of 'a href' is preceded by a hash (#online). As with 'http://', this lets the browser know where to search for the given reference point; in this case, it searches within the document itself.

Mail links

Almost every Web page you see has e-mail links, which, when clicked, fire up your e-mail client and automatically fill in the TO: address in a new message. The code below demonstrates how to do this:

<a href="mailto:heidi_woof@idg.com.au">E-mail me</a>

The same anchor command is used as with other links, but this time the property is a combination of the words 'mailto:' and the e-mail address.

Graphical links

So far, all the links have been textual, i.e., users click on text to activate a link. Links also can be activated by clicking on a graphic. Last month, you saw how to insert an image using code like this:

<img src="yahoo.gif" border="0" alt="Yahoo Link">

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

<A href="http://www.yahoo.com.au"><img src="yahoo.gif" border="0" alt="Yahoo Link"></A>

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

Tips

1) By hovering the mouse over any link, the specified address will appear in the bottom left corner of your browser.
2) Any text inserted within tags is invisible to the browser.

Alignment

So far, this column has explained how to format text, insert images and create links. To align those elements to the centre or to either side of a page, check the following examples and explanations of the different types of alignment options.

<P align="right"> If I insert the align property and value with 'P', then the entire paragraph will be aligned accordingly, and a '/P' tag is required to end the alignment.</P>

<CENTER> This centres the text between the aptly named commands - note the American spelling. </CENTER>

<BLOCKQUOTE> The Blockquote command indents the text from each margin. </BLOCKQUOTE>

<DIV align="right"> This is similar to using alignment with P, except that no paragraph breaks are inserted </DIV>

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Cool Tech

Breitling Superocean Heritage Chronographe 44

Learn more >

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

David Coyle

Brother PocketJet PJ-773 A4 Portable Thermal Printer

I rate the printer as a 5 out of 5 stars as it has been able to fit seamlessly into my busy and mobile lifestyle.

Kurt Hegetschweiler

Brother PocketJet PJ-773 A4 Portable Thermal Printer

It’s perfect for mobile workers. Just take it out — it’s small enough to sit anywhere — turn it on, load a sheet of paper, and start printing.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?