Creating a web site involves linking pages together using hyperlinks. Hyperlinks are created with anchor tags and can link to other pages within the same site using relative paths or to external resources using absolute paths and URLs. Images and email addresses can also be linked. Attributes like target and title can provide additional functionality or information for links. Inline styles allow styling elements directly in the HTML code.

1. Creating a Web Site
Image from: http://ataconsultingllc.com/

2. Creating Hypertext Links
To link 3 pages, each
document needs links to
the other 2 pages
Use the anchor tag
<a href=“pagename”>Page Name </a>
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

3. Specifying Folder Paths
 Absolute Path – specifies exact location
 Relative Path – specifies location relative to the
page with the link
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

4. Linking Within Your Site
Within A Page Between
Pages
Linked Images

5. Linking Within A Page
Using <id>
• ID a section of your document:
<a id=“sec1”>Section One</a>
• Link to the section:
Go to <a href=“#sec1”>Section One</a>
NB: the # in a link means “stay on this page”

6. Linking Between Pages
Use the anchor tag (<a>)
Use a relative address since the
linked-to page is within your site
<a href=“newpage.html”>new page </a>

7. Linked Images
Insert an image, nest a link
around the image
<a href=“linkedpage.html>
<img src=“mypic.jpg” alt=“my picture” />
</a>

8. Linking to Resources on the „Net
URLs – Uniform Resource
Locator
Use the absolute path name
in your link
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

9. Linking to Email Addresses
Use “mailto” protocol:
<a href=mailto:emccarron@bentley.edu>Email Me!</a>
Allows you to add information to the e-mail, including the subject
line and the text of the message
• mailto:address?header1=value1&header2=value2& ...
• mailto:ghayward@camshotscom?Subject=Test&Body=
This%20is%20a%20test%20message
To preserve information about blank spaces, URLs use escape
characters

10. Working with Hypertext Attributes
Open link in a new window:
Browser-dependent!
<a href=“url”
target=“_blank”>
content</a>
Creating a Tooltip:
<a href=“url”
title=“text”>
content</a>
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

11. 1. Inline Styles
Applied directly to an element using the style
attribute
Easy to interpret because they apply directly to
elements they affect
Cumbersome, have to make changes on lots of
pages if something like font face changes
<p style="color:sienna;margin-left:20px">This is a
paragraph </p>

12. Using Color
3 Ways to Use Color
Color Hexadecimal
RGB triplets
Names value