Creating Pages With HTML

HTML stands for "Hypertext Markup Language". It's a way for web browers to communicate/display information that you store on your web server. For example, in the English language you write with sentences and in HTML you write with tags.

Note: when you start working with HTML and if you don't have access to an HTML editing program (more on that later), you should use a plain text editor like Notepad, SimpleText, or BBEdit instead of a word processing program like Microsoft Word or WordPerfect. Why? Word processing programs add special, invisible commands to the text you type, and these commands will wreck your HTML code. Plain text editors don't add any extraneous commands -- what you type is what the browser will see and interpret.

HTML tags are used to tell the browser how you want to display graphics, tables and text.

Tags are enclosed in angle brackets, . Tags come in two varieties: single tags and paired tags. The difference is that a single tag works on its own, while a pair of tags must have an open and closing part. The closing part is just like the opening except that it is prefixed by a slash.

Single tags are used for separators or for inserting a single item. They do not have a matching closing tag. Some common single tags are:

• 
  marks the end of a line. (stands for line break.)

• ---

  marks a horizontal rule. (A line across the page.)
• inserts an image. (The location of the image on your server goes between the quotation marks)

Some common paired tags are:

• and

  to start and close a paragraph.
• and for bold.
• and for italics.
• and for emphasis (usually interpreted as italics by the browser).
• and for strong text (usually interpreted as bold by the browser).

• and

  for the biggest heading.
• and
  for an ordered (numbered) list.
• and
  for an unordered (bulleted) list
• and for text font changes.
• ^and for superscript text.
• _and for subscript text.
• and for a hypertext reference. (The link location goes between the quotation marks)

It is important to make sure that pair tags are always closed properly and that they are nested properly (e.g., that the tag that comes last is closed first and vice versa). For instance, if you wanted to create a section of red, bold text, you should write the code like this:

A sentence.

not:

A sentence.

Here are some other tags every HTML page must have:

• marks the start of the document.
• marks the end of the document.
• marks the start of the header info; your page's title goes here.
• marks the end of the header info.
• marks the start of the text of the document.
• marks the end of the text of the document.

Once you put the basic elements together, a very simple HTML page will look something like this:

This is a short paragraph of text, surrounded by paragraph tags. It could be anything you would like.

This line is broken

in two by a break tag.

Remember that fancy red, bold text? Here it is again!

Sometimes, you will need to create a special code in HTML such as a copyright mark. A full list of these codes can be found at: http://www.uni-passau.de/~ramsch/iso8859-1.html

In the meantime, here is a list of codes might need:

• & is the code for an ampersand (&) symbol; itÕs best to use the symbol code because a plain typed ampersand is interpreted as a special code by some browsers.
• " is the code for a quotation mark (").
• is the code for a non-breaking space.
• © is the code for a copyright symbol (©).
• ® is the code for a trademark symbol (®).

Now, all this might look a little confusing to you, if this is the first time you've seen HTML code. If you don't understand this example, don't worry; this will all make sense as you practice working with code.

If you're most comfortable learning from a book, we recommend finding a copy of:

HTML For Dummies®
by Ed Tittel, Steve James, Steven N. James, Stephen Nelson James

HTML For Dummies® will give you a great introduction to HTML and more of it's commands/syntax. Also, it will be a great reference book to have on hand.

Butif you're comfortable learning from web pages, there are many online HTML tutorials. We suggest checking out this link provided by Yahoo! It has over a 100 sites that will take you from basic to advanced HTML coding:

Yahoo!: HTML Resouce Link

Also, one of our favorite sites that has tons of great information about anything you can think of when it comes to web designing is Web Monkey.