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.
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
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
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.
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
-
a:hover {background:#ffffff;
text-decoration:none;}
/*BG color is a must for IE6*/
-
a.tooltip span {display:none;
padding:2px
3px; margin-left:8px;
width:130px;}
-
a.tooltip:hover
span{display:inline;
position:absolute;
background:#ffffff; border:1px
solid #cccccc;
color:#6c6c6c;}
HTML Code
-
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..
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
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
|
Easy CSS Tooltip
HTML Links
Hyperlinks
My Assignment #2
|
|
|
|
Top of Page
|
© Copyright 2005 -
2010 Gold Coast Web Design
|
