Web Page Basics

First Steps Essential Tags Paragraphs/Line Breaks Center & HR Headings Font Size Creating Links Creating Lists and Nesting Tables Images Backgrounds Naming and Uploading Design Tips Authoring Guides

While web authoring programs make learning HTML code unnecessary, completing a short exercise with the basic tags is a first step to understanding how the web editors (and the web itself) work. For more information, use the sites suggested under the last section: Authoring Guides. HTML (hypertext markup language) uses various tags to define how a page and its information appear on the Web. Think of tags as containers, displayed in angle brackets, which determine how text inside them will be displayed. Keep a simple word processor open as you read this page. You may copy and paste tags you need at the appropriate places on the page you're building. Once you've saved your HTML document, you may view it by selecting Open, then Browse (in Internet Explorer) under the File menu. All tags are hidden when the document appears on the Web. A useful tool for learning HTML is to select Source under the View menu on a Web page. You can see how tags are used on various documents. Quinsigamond Community College  | Student Writer's Web sbooth@qcc.mass.edu

First Steps

A. Begin by creating a folder for your web page where you will also place any graphic or other files you link to this main HTML page.

1. From the desktop. . .
   Mac users (classroom), double click the "User Documents" folder on the desktop to open it; then under File menu select New folder.
   In Windows, click the right mouse button, select New--folder.
2. Name the folder with your last name, all lower case, preferably eight letters or less.

B. Next you will open a browser and word processor and download a starter page to work with.

1. Open your browser and a basic word processor--Simple Text for Mac, NotePad for Windows. (Open NotePad by clicking Start>Programs>Accessories>NotePad.)
2. Change the window size of each application so that you can move back and forth between them. Click and drag from the lower right corner of the window.
3. Use the following link to access a template you will work on:
   http://www.qcc.mass.edu/booth/template.html

   Mac Users--see section below.

   ---

   WINDOWS USERS (steps 4-8)

4. Once the sample page has loaded, go to the View menu, select Source, or Page source in Netscape browser, and you will see the HTML code for "template." ( If you are now viewing the file in NotePad program, skip to step 7.) You may use keyboard shortcuts to select and copy this file to NotePad.
5. First, hold the Ctrl and A keys to select the text. Next, hold the Ctrl and C keys to copy. The information is now on the clipboard. Now close the source window by holding the Ctrl and W keys.
6. Activate NotePad by clicking on its window (or--if you minimized the program--click the icon on the taskbar). Under the Edit menu select Paste and the source file will appear. Warning: to make sure the text doesn't run beyond the window viewing area, pull down under either Edit or Format menu (depending on version of Notepad) and select "Word Wrap."
7. Save this file by selecting Save As under the File menu. In the Save As dialog box you must note three points before clicking the save command: the location of the file, how you name the file, and the type you choose for the file.

   a. In the "Save in" box use the down arrow (at the right of the box) to select the desktop, then the A drive for your floppy disk. (On your home computer you may use the C drive.) Now double click the icon for the folder you created to open it.
   b. In the "File name" box at the bottom of the Save As dialog box, type this file name:  index.html
   c. Now click the Save command.

8. Next, activate the browser, and open the file you just saved. Go to the File menu and (in Internet Explorer) select Open and in the pop up window select Browse. In Netscape Communicator, select Open Page, then Choose File. In the dialog box you must select the location (desktop or drive A or C) and the folder you created for the web page. Then select and open the .html file and the starter page will appear in the browser. Note that the page looks the same, but you're now viewing it from your own folder--not from the QCC server.

   ---

MAC USERS

• Once the sample page has loaded, go to the View menu, select Source, and you will see the HTML code for "template." You must now save the file to the folder you created.
• Save this file by selecting Save As under the File menu. In the Save As dialog box you must note three points before clicking the save command: the location of the file, how you name the file, and the extension you use for the file.
  a. At the top of the box select the desktop, then the backup folder, then the folder you created for your web files.
  b. In the "File name" box at the bottom of the Save As dialog box, you may change the name from template to index.html 
  Be sure to use the .html extension.
  c. Now click the Save command.

Next, from the browser, open the file you just saved in new web folder you created. Go to the File menu and select Open Page. In the dialog box you must select the location (hard drive or floppy) and open the folder you created for the web page. Then double click the "template.html" file (or whatever you named the file) and the starter page will appear in the browser. Note that the page looks the same, but you're now viewing it from your own folder--not from the QCC server. Now return to Simple Text by clicking its window and examine source file for the web page.

C. In the word processor file, notice the structure of the page. There is a header section with a title for the browser's title bar and another title--Sample Page-- which appears after the "body" section. You're now ready to use your own titles and develop the document.

1. Change both titles by highlighting and then typing over the text between the tags. Be careful not to delete the tags or angle brackets.
2. Next, save (under File menu, select save) any changes you make to the source file and then in the browser view your page by clicking the Refresh or Reload button on the toolbar. Each time you want to see your changes, remember to save the word processor file and then click the refresh button in the browser to view the revised web document. You may need to check the location window in the browser to be sure you're viewing the right file.
3. Continue to change or delete text and add graphics and colors as explained below.
4. As you follow this guide, be aware that the spacing and indenting in the HTML is used to easily view the tags, but it is not needed. HTML will not recognize the tab or return commands you use in a word processor. You must enter the correct tags for these features.

Top of page

Essential Tags

The following tags are used on any html page. Note that tags usually appear in pairs, they are enclosed in angle brackets, and the ending tag includes the forward slash. Tags may be upper or lower case.

<html>

<head>

<title> Place your title here. </title>

</head>

<body>

Place the body of your page here.

</body>

</html>

Top of page

Tags for Paragraphs and Line Breaks

<p></p> These tags signify the beginning and end of each paragraph. If you have more than one paragraph in your text, you only need the end tag after the last paragraph.

<br> This single tag creates a line break. If you wish to create a space between lines, you need to use the paragraph tag or repeat the line break tag: <br><br>

Top of page

Tags for Centering and Horizontal Rule

<center></center> These tags center both text and images.

Use the single horizontal rule tag <hr> to create simple divisions in your document. You may also control its thickness by inserting "size=n" as size 5 shown below.

<hr size=5>

In addition to thickness, you may also make the line black or colored and control the width by using a percentage. If you want the line to appear red, size 2, and extend only 65%, type the following:
<hr size=2 width=65% color="red">

Top of page

Tags for Headings

Heading tags include H1 through H6 and they determine the size of headings.  <hn>...</hn>.

Sample size for <h1>...</h>

Sample size for <h2>...</h>

Sample size for <h3>...</h>

Sample size for <h4>...</h>

Sample size for <h5>...</h>

Sample size for <h6>...</h>

• Note that all headings appear in bold and the default size is around H3 or H4. (The exact size depends on the browser.)

Top of page

Tags for Font Size

There are seven sizes:

<font size=n>.... 

Sample size 1 <font size=1>...</font>
Sample size 2 <font size=2>...</font>
Sample size 3 <font size=3>...</font>
Sample size 4 <font size=4>...</font>
Sample size 5 <font size=5>...</font>
Sample size 6 <font size=6>...</font>
Sample size 7 <font size=7>...</font>

• Note that 3 or 4 is the default size.

Top of page

Creating Links

Links to other documents

The linking tag, <a href="the_URL">Name of Linked Document</a> allows you to create a jump to another document by clicking on the Document Name. The words you substitute for "Name of Linked Document" are all that will appear on your page as the underlined hypertext link. Be sure to copy the URL exactly and test your link.

For example, you would use the following tags to make a link to the QCC home page:

<A HREF="http://www.qcc.mass.edu">Quinsigamond Community College</A>

Links within your document

To facilitate reading a web document, you often want to provide a link that jumps to another part of the same page. Below is the tag you would use to jump back to the top of a page.

<A HREF="#Top of page">Top of page</A> Place this anchor link tag at the spot where you wish to "jump" Top of page.

<A NAME="Top of page"></A> Place this (hidden) anchor point tag at the top of the page.

These tags may also be used for explanatory information at the end of a document or to jump to various sections of a long document. Simply substitute another term for top of page in each link.

Top of page

Creating Lists

Two ways of making lists are using tags for unordered lists and ordered lists.

In an unordered list you indent and place a bullet at the beginning of each line of the list.

If you write the following HTML:

<ul>

<li>Item one.

<li>Item two.

<li>Item three.

</ul>

The result in the browser will be:

• Item one.
• Item two.
• Item three.

In an ordered list, you indent and place a number at the beginning of each line of the list:

If you write the following HTML:

<ol>

<li>Line one.

<li>Line two.

<li>Line three.

</ol>

The result in the browser will be:

1. Line one.
2. Line two.
3. Line three.

A third way to list is the definition list for a glossary of terms. First write the term <dt>, then the definition of the term <dd>. For example, if you write the following HTML

<dl>

<dt>First term.

<dd>The definition of the first term.

<dt>Second term.

<dd>The definition of the second term.

<dt>Third term.

<dd>The definition of the third term.

</dl>

You will see this result on a browser page:

First term.

The definition of the first term.

Second term.

The definition of the second term.

Third term.

The definition of the third term.

Be aware that the spacing and indenting in the HTML is used here to easily view the tags but is not needed. You may combine or nest the listing tags for various results. Here is one example:

<ul>

<li>Item number one.

<ol>

<li>Item number one A.

<li>Item number one B.

</ol>

<li>Item number two.

<li>Item number three.

</ul>

• Item number one.
  1. Item number one A.
  2. Item number one B.
• Item number two.
• Item number three.

Top of page

Making Tables

Tables are an effective way to organize and display information on your page. The entire table must be surrounded by these tags: <table> . . . </table>

Next you may use the caption tag, which is optional: <caption> . . . </caption>

Next create rows with <tr> . . . </tr> tags.

Within each row you can have any number of cells marked by the <td> . . . </td>
or <th> . . . </th> tags. (The th makes the data bold and centered.)

--You may also use a border around your table with the following initial tag:
<table border=3> (Increase or decrease the number to change the border thickness.)

• As an example use the following tags:

  <table border=4><caption>Assignment Schedule</caption>
  <tr><td>Week One<td>Chapter One</td></tr>
  <tr>Week Two<td>Chapter Two</td>
  </table>

  To display the following table:

  Assignment Schedule

  Week One	Chapter One
  Week Two	Chapter Two

You may also combine tags within the table to create links (see Links within document) to parts of your page.

• For example, these tags in table cells would create links to sections of your page:

  <table border=2>

  <td><A HREF="#syl">Syllabi<td><A HREF="#hours">Office Hours</A></table>

• Remember you would add the appropriate anchor point tag at the spot you wish to jump to:

  <A NAME="syl"></A> and <A NAME="hours"></A>

The table with anchor links above would appear like this in the browser:

Top of page

Using GIFs or Inline Images

To use a GIF formated image on your page use the image tag, <img src="the_image.gif">

If your GIF image has the file name "email.gif" use the following tag to show the image:

<img src="email.gif">

• Note that you have to include the extension ".gif" and make sure the file is in the same folder as your home page document.
• You can control the placement or alignment of the image when it's combined with text:
  <img src="the_image.gif" align=top, middle, bottom>.
• For example, if you write
  <img src="email.gif" align=middle> The text appears in the middle.

  The result will be:

  The text appears in the middle.

View sample web images and learn how to copy and save them.

Top of page

Using Backgrounds

Use backgrounds to add color, texture, or depth to your page. Remember, you may need to change the text color to make it visible on a dark background. Also, colors may not appear the same on different browers and different monitors.

You may simply write some names of colors rather than the numbers, including white, black, red, yellow, blue, green, purple, brown.

• The following tag gives a white background:

  <BODY bgcolor="#FFFFFF">

• This tag creates a black background:

  <BODY bgcolor="#000000">

• This tag will make the text color white:

  <body text="#FFFFFF">

• Try the following combination for blue background, white text and link, and gold visited link:

  <body bgcolor="blue" text="white" link="white" vlink="gold">

• Use the following tag for a GIF background, substituting the appropriate term for "name":

  <BODY BACKGROUND="name.gif">

View sample GIF and JPEG backgrounds which you may save and use.

Top of page

Naming and Uploading Your Document

It's best to keep file names lower case and remember to use the extension the browser recognizes (see your browser Preferences) including .htm or .html for html documents, .gif or .jpg for graphics. Keep in mind that some of your audience may not have access to the software for sound and movie files.

If you wish to convert a document that's already been saved in a word processor, and you don't have the "save as html" feature in the software, first resave your file as a plain text document. Choose "text only" or "ASCII text" as the format in your word processor.

To publish your work, see Uploading Files.

Top of page

Design Tips for Your Web Page

1. As for any publication, define your purpose and audience.
2. Begin with a simple but easily expandable plan. Simplicity will facilitate access for your audience and maintenance for you.
3. Plan your organization around the way your reader will use the page. A site map will help you envision the best arrangement.
   • Use page size divisions.
   • Use appropriate navigational links.
   • Consider technique of tables (without borders) to create pleasing look and efficient organization
4. Include author identification, both individual writer and institution if appropriate), the date, and --if you wish--a copyright notice -- ©. (In code use the ampersand followed by the word copy and a semicolon.)
5. Provide a consistent look in your design. (FrontPage Themes, under the Format menu of the program, allow you to create this site consistency.)
6. Create balance and clarity in placing text and graphics and allow white space.
7. Consider page weight which affects download time for graphics and other non-text files for modem users.
8. To avoid pitfalls:
   • Don't format for a particular browser or monitor.
   • Use spell checkers and proofread.
   • Remember to view all pages on the site after uploading.

Top of page

Web Authoring Guides

December, John. Web Development. December Communications. April 2007. <http://www.december.com/web/develop.html>

HTML Home Page. World Wide Web Consortium. Feb. 2003. <http://www.w3.org/MarkUp/> 

Lynch, Patrick, and Sarah Horton. Web Style Guide, 2nd Edition.  Nov. 2002. Updated July 2005. <http://www.webstyleguide.com/>

Nielsen, Jakob. Writing for the Web. Sun Microsystems. 1994-2003. <http://www.sun.com/980713/webwriting/>

Raggett, Dave. Adding a Touch of Style World Wide Web Consortium. 8 April 2002. 
<http://www.w3.org/MarkUp/Guide/Style.html>
A short guide to using Cascading Style Sheets and HTML alternatives to avoid problems caused by differences between brands and versions of browsers.

Web Authoring Software

Expression Web Microsoft's web editor (replacing FrontPage)

GoLive Adobe's web editor

Guides to Web Authoring | Top of page