Session 2 Examples
Anchors | Linking to Other Documents | Linking to Other Sites | Other Common Link Types
To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here
Note that each <html> block has to be saved as a separate htm file.
Anchors
Use anchors to link to sections within a long document
<html>
<head>
<title>Using Anchors</title>
</head>
<body>
<a href="#first">First Section</a><br>
<a href="#second">Second Section</a><br>
<a href="#third">Third Section</a>
<!-- note the use of the hash mark (#) in the links, but not within the anchors -->
<h1><a name="first"></a>First Section</h1>
<!-- anchor referred to as #first in links -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<!-- this section uses an ID instead of an anchor for the link target -->
<h1 id="second">Second Section</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h1><a name="third"></a>Third Section</h1>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Linking to Other Documents
<html>
<head>
<title>Linking to other documents</title>
</head>
<body>
<p><a href="contact.htm">Contact Us</a></p>
<!-- contact.htm is within the same folder (no path, just a file name) -->
<!-- NOTE THAT ABSOLUTE LINKS WILL NOT FUNTION CORRECTLY ON YOUR DESKTOP COMPUTER - THEY MUST BE UPLOADED TO A SERVER TO WORK -->
<p><a href="/">Home Page</a></p>
<!-- no file name (just a slash) - so default document is loaded. Absolute -->
<p><a href="/gallery/">Photo Gallery </a></p>
<!-- the photo gallery is in a directory named gallery. Default document within gallery is loaded. Absolute -->
<p><a href="../bio/index.htm">Bio</a></p>
<!-- Up one folder level, then load the index.htm file within the bio folder. Relative -->
</body>
</html>
Linking to Other Sites
<html>
<head>
<title>Linking to other sites</title>
<base target="_self">
<!-- Options are _blank, _parent, _self, or _top (or a name of your own choosing) -->
</head>
<body>
<p><a href="http://www.google.com" target="_blank">Google</a></p>
<!-- Direct link to google's default home page. Opens in a new browser window -->
<p><a href= "http://www.jdhorn.com/student/html/index.htm"> Course Home</a> </p>
<!-- Links to the course's index.htm page -->
<p><a href= "http://www.jdhorn.com/student/html/examples01.htm#empty"> Empty Elements</a> </p>
<!-- Linking to a specific section within a document on another website -->
</body>
</html>
Other Common Link Types
(Right-click and save to your desktop)
<html>
<head>
<title>Other Common Link Types</title>
</head>
<body>
<!-- Linking via an image -->
<a href="http://www.vanaqua.org"><img src="jellyFish.jpg" width="79" height="119" border="0"></a>
<!-- If you don't set the border attribute to 0, the image will appear with a border (default behavior) -->
<!-- Email Link -->
<a href="mailto:someone@somewhere.com">someone@somewhere.com</a>
</body>
</html>