How to Add Links to Your Web Page on the Raspberry Pi

To enable visitors to find other web pages, you need to add links. To add a link to your web page on the Raspberry Pi, you write your text and then surround it with so-called anchor tags (abbreviated to just ‘a’ in HTML) like this:

<a href=”photos.html”>See my photos</a>

This HTML snippet shows the words See my photos onscreen, and when you click them, you are taken to the web page photos.html, which is stored in the same folder as the current web page. The link is usually shown as underlined text by default, but you can change its appearance using CSS.

Search engines use the text in links to understand what a web page you link to is about, and visually impaired web users sometimes summarize a page by just listening to the text of all the links on the page to hear what they can do. For those reasons, your link text must be meaningful and descriptive and not just say Click Here.

You can put the address of any web page or website in the href attribute, so you can create a link to the Google website like this:

<a href=”http://www.google.com”>Visit Google</a>

You can link to a specific page on a specific website too, like this:

<a href=”http://www.example.com/gallery.html”>Visit the gallery</a>

You can visit a page in your browser and then copy the address from the address bar (using Ctrl+C) to paste it into your HTML code (with Ctrl+V).

Don’t forget the http:// at the start: you don’t usually need it when you visit a page in your browser, but your links won’t work without it.

Sometimes you might want to use an image instead of text as a link. You can do that by wrapping your link tag around your image tag, like this example that turns the Amazon logo (stored in your website’s images folder) into a link to the Amazon website:

<a href=”http://www.amazon.com”><img src=”images/amazonlogo.gif” width=”150” height=”75” alt=”Visit Amazon” /></a>

If you want to invite people to send you their thoughts, you can create a link to open someone’s e-mail program with a blank message that’s already addressed to you. Use code like this:

<a href=”mailto:sean@example.com”>Email me!</a>

Just replace the fake e-mail address of sean@example.com with your own address. Note, though, that e-mail addresses on websites attract a lot of spam, so you are generally better off not sharing your main personal e-mail address.

blog comments powered by Disqus
Advertisement

Inside Dummies.com