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">
<HEAD>
<meta charset="utf-8">

<title></title>

</HEAD>

<BODY>

</BODY>

</HTML>

 

Put your page title in the Title tag.  This appears in people’s bookmarks or favorites as well as at the top of your page in the browser border.

 

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 recomened

 

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
  •  

Tables:

 

  • 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 hyperlinks

To a web site:

 

<A href=”http://www.yahoo.com”><font size=5>Click here for Yahoo!</font></a>

or to go to a page:

 

<A href=”pagename.htm”><font size=5>Click here for Yahoo!</font></a>

An image button hyperlink

To a web site:

 

<A href=”http://www.yahoo.com”><img src=”m6v3.gif” ALT=”Yahoo.com”> </a>

or to go to a page:

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