It's important to note that your html page is merely a set of directions telling the browser what to display and where to find elements of your page, like links and images.

There are two types of links, absolute and relative. Absolute links use the entire URL. If you would like to link to the School of Information home page, you would include http://www.ischool.utexas.edu, since that is the absolute position of the iSchool home page. Relative links point the browser to a file or image within your web directory. School of Information students can relatively link to anything in the public_html directory. Say you have an image called test.jpg in an images folder in your public_html directory, you would include the relative path to that image in your page or images/test.jpg. Let's try it.

I'll add a line break after the unordered list and before the closing body tag. Then I'll enter the code to link to the iSchool homepage,
< a href="http://www.ischool.utexas.edu"> which means I am anchoring a hypertext reference in my page. Then I type the text the page will display as the link, in this case I'll put "The School of Information at the University of Texas at Austin". Then I close the anchor </a>. The browser is reading the directions between the carats and displaying the text between the open and close tags. That's our first absolute link.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body bgcolor="FF9900">
<h1>HTML by Libby & Chad</h1>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<font color="#FF0000"><p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p></font>
<hr>
<b><i>The issues</i></b>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<b><i>The ideas</i></b>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
<br>
< a href="http://www.ischool.utexas.edu"> The School of Information at the University of Texas at Austin</a>
</body>
</html>

Now that we've added a link to a webpage, let's include a link with your email address that will open the viewer's default email client when they click on it. You will use the same tag as the link, but add "mailto" - no spaces – and your email address, instead of the absolute link. I'll add a link to my email address.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body bgcolor="FF9900">
<h1>HTML by Libby & Chad</h1>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<a href="mailto:libby@ischool.utexas.edu">Email me!</a>
<font color="#FF0000"><p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p></font>
<hr>
<b><i>The issues</i></b>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<b><i>The ideas</i></b>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
<br>
< a href="http://www.ischool.utexas.edu"> The School of Information at the University of Texas at Austin</a>
</body>
</html>

In this case, all the viewer will see is the text "Email Me!" The rest is just directions.

Images can be tricky, but practice makes perfect! You must save any images you wish to use in your public_html directory or a directory therein. Once you've done this, you're ready to link to it. I have an image called "test.jpg" inside a folder called "images" inside my public_html folder. I'm going to make a link to the image relative to where my page will eventually live. Because I know my page will live inside public_html and NOT in any other folder inside public_html, I will set the relative path as "images/test.jpg". So, I'll add a line break after the link to the School of Information home page and insert the tag <img src="images/test.jpg">.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body bgcolor="FF9900">
<h1>HTML by Libby & Chad</h1>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<a href="mailto:libby@ischool.utexas.edu">Email me!</a>
<font color="#FF0000"><p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p></font>
<hr>
<b><i>The issues</i></b>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<b><i>The ideas</i></b>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
<br>
< a href="http://www.ischool.utexas.edu"> The School of Information at the University of Texas at Austin</a>
< br>
< img src="images/test.jpg">
</body>
</html>