HTML Tutorial, How to Build a Web Site.

	\| Testimonials \| Network News \| Account Management \| FAQ \| Tutorials \| Templates \| Affiliates \|

HTML Tutorial, How to Build a Web Site.

How to Build a Web Site: HTML

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, <like this>. 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.)
<hr> marks a horizontal rule. (A line across the page.)
<img src=""> 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).
<h1> and </h1> for the biggest heading.
<ol> and </ol> for an ordered (numbered) list.
<ul> and </ul> for an unordered (bulleted) list
and for text font changes.
and for superscript text.
and for subscript text.
<a href=""> and </a> 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:

<html> marks the start of the document.
</html> marks the end of the document.
<head> marks the start of the header info; your page's title goes here.
</head> marks the end of the header info.
<body> marks the start of the text of the document.
</body> 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:

<html>

<head>
<title>My Page</title>
</head>

<body>
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!
</body>

</html>

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.

HTML Editing Programs

HTML editing programs are software you can purchase that will let you create a page using your mouse to pick out elements instead of typing out all the code.Almost every designer uses an editing program like Macromedia Dreamweaver. Adobe GoLive, or Micorsoft Frontpage. Most of these programs are fairly easy to start using right away, but they can take a while to master.

So why you ask do you need to learn HTML? Because, sometimes, the editors don't create a page that does exactly what you want it to do. Knowing HTML is like knowing how to change your own oil or change a flat tire -- it can save you a lot of time, money, and aggravation down the road. Plus, you will have a much better understanding of how to use all the features in an HTML editing program if you understand how HTML works and what it can do.

There are many HTML editing programs available. We recommend you try Macromedia's Dreamweaver MX. This is one of the most compehensive software packages available. Plus, Macromedia offers a very good online tutorial section that will explain how to put all the "bells and whistles" on your web site. Dreamweaver does take a little while to learn, and it is expensive (if you are a student or educator, you can get a discount or even use the program for free if you have access to a college computer lab). You can find out more information about about Dreamweaver from the link below.

Macromedia's Dreamweaver MX

If you're looking for inexpensive or even free HTML editing programs, visit Tucows or download.com.

- To read our graphic design tutorial, click here