Code Bank

The following XHTML code is provided so you can quickly copy and paste hypertext elements into pages you are constructing. As we begin learning Dreamweaver, however, you will find you no longer need to rely exclusively on such code, as Dreamweaver generates most XHTML tags automatically.

But in your beginning stages as a Web site developer, it is essential that you learn the basic fundamentals of XHTML so that you can tweak the code generated by WYSIWYG (What You See Is What You Get) editors such as Dreamweaver. Such programs don't always generate clean XHTML code, and it is sometimes essential for you to use the code editor within these programs to correct their mistakes.

Additional snippets of code will be added throughout the semester.

Basic XHTML Code

<html>
<head>
<title>Title Text</title>
</head>

<body bgcolor="white" link="purple" vlink="red">

<h1>Header 1 Text</h1>

<p>Body text</p>

<p>Body text</p>

<p>Body text</p>


</body>
</html>

Hyperlink Structure

Absolute Link

Class Homepage

<a href="http://www.public.iastate.edu/~honeyl/313/">Class Homepage</a>

Relative Link

Class Homepage

<a href="homepage.html">Class Homepage</a>

Mail Link

honeyl@iastate.edu

<a href="mailto:honeyl@iastate.edu">honeyl@iastate.edu</a>

Image Tag Structure

Simple Image Tag

<img src="name.jpg" />

Full Image Tag

<img align="left" src="name.jpg" width="100" height="100" alt="Descriptive Name" />

Low Res/High Res Image Tag

<img align="left" lowsrc="namebit.gif" src="name.jpg" width="100" height="100" alt="Descriptive Name" />

Basic Table Structure

Visible Table

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

<table border="1">
<tr>
<td>Cell 1</td> 
<td>Cell 2</td> 
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td> 
<td>Cell 5</td> 
<td>Cell 6</td>
</tr>
</table>

Invisible Table

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

<table border="1">
<tr> 
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr> 
</table>