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 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.

 

 

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): Remember that H tags are read by many non-human readers/bots and should be used in a hierarchical manner.

<h1> - <H6> close required

 

CSS stylesheet link: <link href="style.css" type="text/css" rel="stylesheet">

Making lists

 

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

Tables: (Only used to lay out data like a matrix. Not for layout!

 

  • 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=”http://www.yahoo.com”>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=”http://www.yahoo.com”><img src=”m6v3.gif” ALT=”Yahoo.com”> </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=”http://www.yahoo.com” target="_blank"><font size=5>Click here for Yahoo!</font></a>