COMM 223 -
Introduction to Web Site Design and Construction

COMM 223 Resources


Basic HTML Tags

Almost all simple HTML pages have these common required parts.

<HTML lang="en">
<meta charset="utf-8">







Put your page title in the Title tag.  This is what appears in people’s bookmarks or favorites, if they save the page, as well as at the top of your page in the browser border or tab.


Background color can be established in the “body” tag like this:

<BODY bgcolor="FF00CC">


All your page’s visible information must be in between the two “body” tags.

“Enter” doesn't work in HTML to make a new line so…

Creating line breaks: <br> no close needed

Creating paragraphs: <p> close required


Space can't make more than one space (unless using the <pre> tag) so... Use this weird symbol for extra spaces &nbsp;

Controlling text meaning (and size, at first):

<h1> - <H6> close required


Aligning object/paragraph on page:

To center align -<div align=”center”></div> close required

To right align -<div align=”right”></div>close required


Controlling font weight


<strong> or <B> bold, close required

<em> or <i> italic, close required

<u> underline, close required (never use this)


Controlling font face

<font face=”arial”> close required; just </font>


Controlling font color

<font color=”FF00FF” face=”arial”> close required; just </font>(notice how color and face are combined)


Making lists


  • Unordered (bulleted list) - <ul> close required
  • Ordered (numbered list) - <ol> close required
  • each list item <li> no close required



  • Open and close with <table> </table> tags
  • Control border size with <table border=”1”>
  • Each row is started and closed with <tr></tr>
  • Each column is created with <td></td>


Embedding images

<img src=”imagename.gif”>


Creating hyper-links

To a web site:


<a href=””>Click here for Yahoo!</a>

or to go to a page:


<a href=”pagename.html”>Click here to see the page</a>

An image button hyper-link

To a web site:


<a href=””><img src=”m6v3.gif” ALT=””> </a>

or to go to a page:

<a href=”pagename.html”><img src=”m6v3.gif” ALT=”Click here to see the page”> </a>

To have any page open in a new window, add this target line to the code as shown.



<a href=”” target="_blank"><font size=5>Click here for Yahoo!</font></a>