Learn Basic HTML  


        Home   |   About   |   Archives   |   Links   |   Contact          >> Join the free newsletter


Table of Contents
The Basics
Web Graphics
Web Promotion
Web Design Tips
Analysis and Case Studies
Web Safe Color Chart
 - - -
Buy The Book
Day 2 - Basic HTML

Today is an exciting day, you will build your very first Web page.

First, let us discuss HTML. It is the language used to build Web pages. It is relatively easy to understand HTML, all Web pages follow the basic structure. For example, a simple Web page called index.html, shown below:

<title> Place your page title here </title>

HTML Elements
To explain, items in between the < > symbols are called HTML elements (e.g. html, head, title, body).

When an element is enclosed in < >, for example <body>, the term for this is a tag. Note <body> is an opening tag, and </body> is a closing tag. The / symbol is added to denote a closing tag.

To explain the <html> tag defines the document to be an HTML document. The <head> defines an area where we can define page <title> and <meta> tag. Do not worry about this for now.

The <body> element defines the region of white space on your Web browser. It is in between the body tags where we define most of the content of our Web page.

Let us look at the example below:
basic html structure for a web page

Ok, it is time for you to try. First, open Notepad. Type in the text as seen in the figure above. Include the items in red. Then save the file as:

File name: index.html

Save as type: All files

Encoding: ANSI

Note that you must change the value in "Save as type" to indicate "All files."

Also note the location on your PC where you are going to save the file.

To view your very first Web page, open your Windows file manager or Explorer, look and click on the file index.html. A Web browser should open showing your Web page. Success!

And finally, to understand a basic HTML line:

basic html line of code

Note two new terms, the attribute and value. Basically, a single HTML element can have multiple attributes, and each attribute must have a single value. But this is advanced stuff, do not worry about this.

If you are comfortable with today's lesson, then we can move on to day 3.

p - paragraph
b - bold text
h1 - most important heading
h6 - least important heading

Tip 1
Almost all html elements are defined as pairs (i.e. a start tag and an end tag)

Some tags that do not need a closing tag are:
<br> - line break
<hr> - horizontal line

Tip 2
Windows Explorer and Windows Internet Explorer are two different things. The first is used to display files on your computer, the second is used to display Web pages.

     Copyrightę 2002 Joel Mangilit  :  (632) 522-6912  :  (0917) 539-0450  :  joel@webphil.com  :  www.webphil.com