XHTML :: Linking

Basic HyperLink
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="newpage.html"> This Is A Link </a>	How it looks in the browser This Is A Link

Basic Link with Title Attribute
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="newpage.html" title="The Title"> This Is A Link</a>	How it looks in the browser This Is A Link

Link with CSS Rollover
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} </style> </head> ..... <a class="one" href="newpage.html"> This link changes color </a>	How it looks in the browser This link changes color

Anchor Within A page
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="#anchor">content</a> .... later in the same page ..... <a name="anchor">content</a> Note: The "Anchor" name has to be exactly the same.	How it looks in the browser content .... later in the same page ..... content

Link using a Picture
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="page.html"> <img alt="button link" src="images/button_link.png" style="border: 0px solid ; width: 150px; height: 30px;"></a>	How it looks in the browser

Basic Email Link
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="mailto:you@yourdomain.com"> Email Me </a>	How it looks in the browser Email Me

Email Link with Subject
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="mailto:you@yourdomain.com? subject=Your_subject"> Email Me </a>	How it looks in the browser Email Me

Email Link using a picture
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ --> <a href="mailto:you@yourdomain.com"> <img alt="email button" src="email_button.png" style="border: 0px solid ; width: 150px; height: 30px;"> </a>	How it looks in the browser

Author - Alan Dunbar