The Quick and Easy HTML Guide


What Are Tags?
Basic Structure
Basic Tags
Sample Page
Advanced HTML

HTML (HyperText Markup Language) is the programming language used to create Web pages. The HTML code creates a layout for the text and graphic images that make up the document. Text can be formatted for paragraph layout and for font style with bold, italic, underline, color and various sizes. HTML also is used to create hypertext, or linked text. The user clicks on the highlighted hypertext to connect to another web page (via an URL or Uniform Resource Locator), graphic image or multimedia file. Graphic images, or "Inline Images", can also be linked to other files. Using links, web authors can connect to pages of their own or pages created by others. The World Wide Web is made of millions of HTML documents all linked with hypertext.

What Are Tags?

The basic element that makes up HTML code is a tag. HTML tags consist of less than and greater than signs (< and >) enclosing the HTML code.

Example: <BR>

These tags tell the web browser how the text and images should appear. Most tags have opening and closing tags that surround text, marking where to begin a certain kind of formatting and where to end that formatting.

Example: <B>Text</B>

The slash (/) in the ending HTML tag denotes a closing tag and the point where text following will NOT be effected by the tag. The initial tag turns on a formatting command; the closing tag turns off this formatting command.

Not all HTML tags have closing tags. Some tags do not directly effect text but format the document layout with line breaks and markers, or internal structure comments unseen by the viewer. HTML code is not case sensitive.

Basic HTML Structure

All HTML documents contain certain elements, or tags, that define the major parts of the web page. These tags are:

  1. <HTML> </HTML> - These tags denote an HTML document, telling the browser that it is to be read as a Web page. All other text and tags go between the HTML tags.
  2. <HEAD> </HEAD> - Information enclosed in the HEAD tags is used by the browser to index the document. Most of this information is not seen by the viewer.
  3. <TITLE> </TITLE> - The TITLE tags are included between the HEAD tags. The title is viewed on the browser's titlebar near the top of the browser window. It is the title that is used as the bookmark when saved.
  4. <BODY> </BODY> - The body tags enclose the body (all text and graphic images, and corresponding tags) of the document. The bulk of your HTML code and text is located between the BODY tags. Whatever is contained within the BODY tags is shown by the browser as part of the Web page.

Here is the required order for the main HTML tags:

<HTML>

<HEAD> <TITLE>Title of the Web Page </TITLE> </HEAD>

<BODY> All the text and graphic images of the document </BODY>

</HTML>

Basic HTML Tags

Headings

Heading 1

- <H1>Text</H1>

Heading 2

- <H2>Text</H2>

Heading 3

- <H3>Text</H3>

Heading 4

- <H4>Text</H4>
Heading 5
- <H5>Text</H5>
Heading 6
- <H6>Text</H6>

Font Style

Paragraph Formatting

Hypertext

Graphic/Inline Images

Sample Web Page

Here is a simple HTML document:

<HTML>

<HEAD>

<TITLE>WR 227 Instructor</TITLE>

</HEAD>

<BODY>

<H6><A HREF="#links">Skip to Links</A></H6>

<BR>

<CENTER><IMG SRC="pcctitle.gif"></CENTER>

<Center><H1>WR 227 Technical Writing I</H1></Center>

<BR>

<Center><H2 >George Knox, Instructor/Writer/Web Author:</H2></Center>

<CENTER><IMG SRC="gkphoto.jpg"></CENTER>

<P>Knox has a Master of Arts in English from Portland State University with training in technical writing and editing, and web development. He has taught Career Development, Web Design and Writing through Portland Community College and Oregon State University.</P>

<P>For the past 10 years, George Knox has worked with the public and private sectors developing marketing, recruiting and educational programs and materials. He has experience in marcom, media, technical and grant writing. He has worked with a wide range of clients, but specializes in the high technology and engineering fields.</P>

<H2><A NAME="links">Links</A></H2>

<UL>

<LI><A HREF="http://www.pcc.edu/">Portland Community College Homepage</A>

<LI><A HREF="wrlinks.htm">Web Resources for Technical Writing</A>

</UL>

<P><FONT SIZE=-2><B>Instructor: </B>George Knox; <B>Phone: </B>503-977-4475; <B>E-mail: </B><A HREF="mailto:gknox@pcc.edu">gknox@pcc.edu</A>; <B>Office: </B>Sy CC 221</FONT> </P>

<CENTER><P><IMG SRC="4prule.gif" ></CENTER>

<BR>

<P><I>Last Modified: July 5, 1999.</I></P>

</BODY>

</HTML>

Click here to see what the web page looks like.

Advanced HTML & Other Ways to Web

There are many more HTML tags used for web pages. If you are interested in learning more about HTML and web design, or would like to create your own web page, check out Geo's Web Corner. There you will find tutorials, free downloads of useful web tools, and other resources to help you develop and publish web pages of your own. (You'll even find ways to build a page without knowing HTML.)



The Quick and Easy Guides for Writers


Written by: George Knox © 1999
E-mail: wordman@prontomail.com

Last Modified: July 5, 1999.