Simplest Ever HTML Tutorial

Emory Rowland, November 24th, 2007

Have you been searching the Internet for weeks looking for a free HTML tutorial and just haven’t been able to find one that’s easy enough no matter how hard you looked? The web abounds with free tutorials. Let this insultingly easy Simplest Ever HTML Tutorial prepare you for them.

Requirements:

Beginners and those afraid to begin ONLY
No knowledge of HTML
5 - 10 minutes
2 brain cells of any size and color

Insultingly Easy

What good is a free webmaster resources site that doesn’t offer a free HTML tutorial? This 9-step free crash course in HTML with no brakes, seatbelts or parachutes passes over some important points in the interest of getting to the objective: learning to create a simple HTML page. There’s no history, theory, or even a definition of HTML here. Just let the hands on style of the “Simplest Ever” approach reveal how easy it can be. Doing is learning.

Step 1 - Open Notepad

From your Windows Start Menu, click Start > Programs > Accessories > Notepad

Notepad - Text editor to code HTML

Notepad is the basic Windows text editor.

Step 2 - Type in Some Code

Type this in the blank Notepad document:

The Basic Structure of an HTML Document

The above code is the basic structure of an HTML document. The brackets around “html,” head,” title,” “body,” “h1,” and “p” indicate an HTML tag. There are two types of tags in HTML: start and end. Examples:

Start Tags	End Tags
<html>	</html>
<head>	</head>
<title>	</title>
<body>	</body>
<h1>	</h1>
<p>	</p>

Notice:

Both start and end tags are enclosed in brackets.
The only difference in start and end tags is the “/” that follows the bracket in the end tags.
The “/” in the end tag always immediately follows the “<” opening bracket.

Step 3 - Save as an HTML File

In Notepad, go to File > Save As

Save As

Step 4 - Name the File

Type the name “mypage.htm” in the file name field.

Type a file name

Little known secret: an HTML file is just a text file (.txt) saved with a “.htm” or “.html” extension.

Step 5 - Open the HTML File

Look on your Desktop and double-click on the file you saved called “mypage.htm.” Your browser should open up and you will see this:

View the Web Page

Notice:

The tags do not appear in the browser. Only the text between the start and end tags is visible.
The heading text is larger than the paragraph.
“Title Goes Here” does not show up in the page, but in the top left of your browser.

Step 6 - View the Source Code

View the source code. In your browser (Internet Explorer) go to View > Source. If the text you see looks familiar, that’s because it’s the same code you just typed into Notepad.

View Source Code

Step 7 - Change the Source Code

Go to your Desktop and highlight the file you created called “mypage.htm.” Right click, go to Send to > Notepad.

Edit the HTML Source Code

Change the text between the title, heading, and paragraph tags.

Step 8

Click File > Save in Notepad.

Save HTML Source Code

Step 9 - View Changes

Repeat Step 5 and view the changes. Experiment with changing the source code repeating steps 7 - 9. Try changing h1 to h2 or h3. Add another paragraph tag. Add some of the tags in the tag chart and see what effect they have.

By the way, you’ve just created an HTML document.

Common HTML Tags	Usage
<html>	The first tag in an HTML document
<head>	Head (data describing an HTML document goes here)
<title>	Title
<body>	Body
<h1> through <h6>	Headings (lower numbers most important, higher least important)
<p>	Paragraph
<table>	Table begin
<tr>	Table row
<td>	Table cell
<ol>	Ordered list
<ul>	Unordered list
<li>	List item
<img src=”myimage.jpg” mce_src=”myimage.jpg”>	Image
<a href=”http://www.mypage.com/” mce_href=”http://www.mypage.com/”></a>	Hyperlink
<b>	Bold
<i>	Italics
<u>	Underline
<br>	Page break
<hr>	Horizontal rule (or line)

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/digg_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/reddit_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/dzone_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/stumbleupon_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/delicious_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/blinklist_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/google_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/facebook_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/yahoobuzz_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/sphinn_48.png

http://www.clickfire.com/viewpoints/wp-content/plugins/sociofluid/images/mixx_48.png

Like that one? I dare you to check out...