How to make text a Hypertext

Link to my homepage
Link to engl 282 homepage

Tutorial for English 282 Assignment #2 links

This page gives code and examples for all of the types of hypertext used in English 282 Assignment #2.

How To Make text Hyperlink

This is the basic link. This is how to take text and make it link to an external webpage.

General Syntax

<a href="url"">Link text</a>

Example HTML

<a href=http://courses.washington.edu/hypertxt/engl282/ target="_blank">Engl 282 Homepage</a>

Example Output

Engl 282 Homepage

Note: target="_blank" opens the site in a new tab

How To link to secondary pages

If you want to provide a link to a page within your own website (directory) this is how.

General Syntax

<a href="url"">Link text</a>

Example HTML

<a href="page2.html">Spacer image file</a>

Example Output

Page2
 

How To link to a section on the same page

This is how to link to a different section within the same page using the # tag.

General Syntax

<a href="#name">Top of Page</a>

Example HTML

<a href="#top">Top of Page</a>

Example Output

Top of Page

"#name" the bookmarks anything you want and point a hyperlink to that name.

How To make tool tips

Tool Tips are graphic tools used when rolling over a link. Below is an example of the CSS and HTML code used to make a tool tip. Note the CSS is all a matter of personal style, you can make it look any way you want.

Basic Tool tip

HTML Syntax

<a href="url" title="title text">Link text</a>


Example HTML

<a href="www.google.com" title="this is a link to google">Google tooltip</a>


Example Output

Roll over the Google tooltip

My Custom Tool Tip


CSS Code
  1. a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
  2. a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
  3. a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
HTML Code
  1. Roll over the <a class="tooltip" href="#">Tooltip<span>You have rolled over the tooltip.</span></a>.
Example Output

Roll over the TooltipYou have rolled over the tooltip..

How To style links

If you would like to manipulate the look of the link and how it interacts when being visited, hovered, active etc. Below is an example of the CSS and HTML code used to style a link interactively.

CSS CODE
 
<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>


HTML Code  

<span class="a4"><a href="#">LOOK HERE</a> TO SEE</span>

HTML OUTPUT


LOOK HERE TO SEE


How to link to a section on other pages

If you want to link to another site and target a certain area, 'pre-scroll' it this is how.

General Syntax

<a href="url#headerID"">Link text</a>

Example HTML

<a href="http://en.wikipedia.org/wiki/HTML#Markup">Wiki HTML Mark up</a>

Example Output

Wiki HTML Mark up

 Related Articles
 
Top of Page