PS299 - Beginning HTML

A Simple Introduction to HTML

This is a simple web page to help the beginner start learning to use HTML (HyperText Markup Language) to produce Web pages. The process is startlingly easy after you learn just a little. Some basics points.

All Web pages are ASCII Files. ASCII files are text files that are comprised of only letters (a..z, A..Z), the ten numerals (0..9) and some special symbols (+, -, =, /, <, >, :, ;, ', ", #, @, $. %, etc.) and are meant to be read exactly as they are. Most Word processor and spreadsheets are not ASCII files. Most Web pages are.
Web pages consist of the text that you wish to have appear, and a number of HTML tags that provide the browser information about how to display the text. These tags may be identified by the <..> symbols. Some tags have a beginning <..> and an end </..>.

In order to create web pages you have three basic choices:

Use Notepad (a simple text editor)
Use a WYSIWYG editor (like Visual Page) [WYSIWYG = Whay You See Is What You Get]
Use a sophistocated Editor - Microsaoft Frontpage, Dreamweaver

How to program in HTML:

All web page documents have a similar structure.
- A typical Web page will thus look something like this
  
  <HTML> <HEAD> <TITLE> and </TITLE> <HEAD> <BODY> One or more lines of text <BODY> <HTML>
- The Beginning ... and the End
  - The <HTML> - Starts document and </HTML> ends it.
- The Header
  - The header is contained between the <HEAD> and </HEAD> tags and contains various information abou the HTML document, such as:
    - <TITLE> and </TITLE> tags. These indicate the title of the page. This does not appear on the page in the browser, but is in the top bar of Netscape. This page's title is
```
	<TITLE>PS299 - Beginning HTML</TITLE>
```
- The Body
  - Everything between the <BODY> and </BODY> tags indicates the body of the Web page. All text which you wish to appear goes in this section
- Text Style
  - Headers: Several different levels (sizes) of fonts can be specified with text headers
    - This is Level 1 - <H1>...</H1>
    - This is Level 2 - <H2>...</H2>
    - This is Level 3 - <H3>...</H3>
    - This is Level 4 - <H4>...</H4>
    - This is Level 5 - <H5>...</H5>
    - This is Level 6 - <H6>...</H6>
  - Special Emphasis
    - <B>This is Bold Text</B>
    - <I>This is Italicized Text</I>
    - <U>This is Underlined Text</U>
    - <S>~~This is Strike-through Text~~</S>
    - <EM>This is Emphasized Tex</EM>
    - <STRONG>This is Strong Emphasis Text</STRONG>
  - Special Formating
    - This produces Centered Text <CENTER> ... </CENTER>
    - This produces a line break. <BR>
    - This produces a paragraph break, and skips a line. <P>
    - This produces a ruled line across the page. <HR>
      <HR>
    - This produces a ruled line halfway across the page. <HR WIDTH=50%>
    - ```
    <PRE>This produces preformated text.
    It will appear just as you type it, with a fixed width font like Courier.  And it will not automatically word wrap.</PRE>
```
- Special Tags
  - Links
    - Links are what make HTML Hypertext. Links provide the ability to click on a name, word, or phrase and go to that Web page.
      For Instance, <A HREF="http://www.polsci.wvu.edu/PolyCy Makes a link to my Guide to Political Science, Poly-Cy.
    - There are several type of Links
      
      HTTP:// - Links to Web pages
      GOPHER:// - Links to Gopher pages
      FILE:// - Links to a file
      MAILTO: - Invokes the e-mail fotware
  - Anchors
  - Images
- Special Features
  - Tables
    - <TABLE>...</TABLE>
    - <TH> ... </TH>
    - <TR> ... </TR>
    - <TD> ... </TD>
  - Frames
    - <FRAMESET> ... </FRAMESET>
    - <NOFRAMES> ... </NOFRAMES>

How to Use Notepad

Click Start > Programs > Accessories > Notepad

You then get the following window:

You may then type your text and HTML tags in window, and save it as a *.htm file.

That is now your web page.

How to Use Visual Page

Look for the Visual Page Icon

Doubleclick it to open Visual Page

This is Level 1 - <H1>...</H1>

This is Level 2 - <H2>...</H2>

This is Level 3 - <H3>...</H3>

This is Level 4 - <H4>...</H4>

This is Level 5 - <H5>...</H5>

This is Level 6 - <H6>...</H6>