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.
- Beginners and those afraid to begin ONLY
- No knowledge of HTML
- 5 – 10 minutes
- 2 brain cells of any size and color
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 is the basic Windows text editor.
Step 2 – Type in Some Code
Type this in the blank Notepad 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:
- 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
Step 4 – Name the File
Type the name “mypage.htm” in the file name field.
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:
- 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.
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.
Change the text between the title, heading, and paragraph tags.
Click File > Save in Notepad.
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
|<html>||The first tag in an HTML document|
|<head>||Head (data describing an HTML document goes here)|
|<h1> through <h6>||Headings (lower numbers most important, higher least important)|
|<img src=”myimage.jpg” mce_src=”myimage.jpg”>||Image|
|<a href=”http://www.mypage.com/” mce_href=”http://www.mypage.com/”></a>||Hyperlink|
|<hr>||Horizontal rule (or line)|