Saturday, January 14, 2012

#6 - xHTML Guide : Hyperlinks



Want to show your friends some cool sites on your website but don’t know how?
You’ve come to the right place, read on…
Have a look at the code below and see if you can guess what I am doing before I
explain it.



********************************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> Hyperlinking 101 </title>
7 </head>
8 <body>
9 <h2> Example look below </h2>
10 <h4> Click on one of the names to view that guide. Enjoy! </h4>
11 <p><a href = "http://www.Google.com">Google</a></p>
12 <p><a href = "http://www.yahoo.com">yahoo </a></p
13 <p><a href = "http://www.makeuseof.com/pages/the-internet-guide-audiophile/">The      Internet
14 Audiophile</a></p>
15 <p><a href = "http://www.makeuseof.com/pages/free-torrent-guide/">Free Torrent Guide</a></p>
16 </body>
**********************************************************************



That’s right, I’m creating hyperlinks to some great and useful sites. Basically to
hyperlink to a certain web page that has a web address you simply use the below
syntax:
<a href = " [URL/Filepath] " > [what you want to hyperlink] </a>
Doesn’t seem very difficult does it? You could quite easily just put text in there like
the example code above. However, there is no reason why you couldn’t use
something else like an image. Just for a bit of extra information: a URL is a Uniform
Resource Locator, basically the web address.


































HyperLinking A Image


*****************************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> Hyperlinking Images </title>
7 </head>
8 <body>
9 <p><a href = "http://www.makeuseof.com">
10 <img src = "button.jpg" width = "70" height = "55" alt = "a button" />
11 </a>
12 </body>

******************************************************************


I’m sure if you’re read the previous parts of this section that you release that this is
simply mixing creating images and hyperlinks. The syntax is set to have the
hyperlinking on the outside and the image on the inside, whereby placing a
hyperlink of the inserted image.


Hyperlinking to an email address: 


This is simply a repeat of the last part, but if you haven’t been paying attention that
much then just have a look at the code below:


**********************************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> Email Hyperlinking </title>
7 </head>
8 <body>
9 <p>In technical peril and your computer hates you? Send me an email:</p>
10 <a href = "mailto:ghostbusters@makeuseof.com">Ghostbusters@MakeUseOf.com</a>
11 <p>
12 Click the address and your default email client will appear with my email in
the To: field
13 </p>
14 </body>
15 </html>
************************************************************************
Instead of using a URL (eg. http://www.something.com) here I’m using an email
address which involves putting the following syntax after the equals sign:


"mailto:[youremailaddress]"


Line 10 is the basic example of this concept. So who are you going to email?
Ghostbusters!







0 comments:

Post a Comment