Simplest Ever HTML Tutorial

Simple

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)
Emory Rowland

Emory Rowland is editor and keeper of the flame at Clickfire. He's a fanatical blogger, entrepreneur and builder of Internet things from way back. Emory's love for social media and success with organic search led him to start a SEO consulting venture. Apart from the Internet, he could be considered by many as pretty worthless. More...

24 comments

  1. Harry

    Thank you for this great site for bloody beginners!

    Anyone who can help Asawa to develope his site ethio-tours.com is warmly welcomed to do so.

    Best regards,

    Harry

  2. D.Shehzad

    Thank You. Best Tutorial.

  3. Tammy

    WOW, I used to just copy and paste stuff, not I can actually understand it. WOW, you are awesome!!!

  4. Maria Broome

    Excellent tutorial. Easy to understand.

    I finally got it. I tried several tutorials but could never find what I typed. Until you had these clear samples and then I realized I never clicked twice on my file that was on my desktop. Keep up this good work.

  5. you the best!

    This was great to try out, just so I know the basics. I usually just copy paste, then edit myself, but it’s goo dto know the vital parts, so i can start doing it entirely by myself…one day.

    This whole website is awesome, such great help!!!

  6. thanks a lot for this code…

    i understand now how it works

  7. Fatimah

    wow, awesome. i am lovin this. didn’t know how to ‘run’ my source from notepad until now. thanks a mil

  8. Emory Rowland

    val, here’s the w3schools page that explains the code for putting a banner image on a Web site.

    w3schools.com/HTML/html_images.asp

  9. val

    can you tell me a easy way of putting a banner on my site.this what the guy said from my web host said.

    You would need to save the banner image and then upload that to your site and place it where you wish to use it. The banner you would want to link to your affiliate link.

    Here is some examples on image linking.

    w3schools.com/HTML/html_links.asp

    then i said what lol.can you help me,thanks …

  10. Nice tutorials. thanks

  11. Malvika

    Thank. Very Simple steps. Good lesson for foundation!!

  12. Taleb ahmed

    nice tutorials thanks

  13. nice tutorials i have the basics already but i would always forget! its nice to have blogs like these to refresh my memory ;)

  14. sanjay salunkhe

    thanks.very nice tutorial for begginers..

  15. william

    Xcellant tutorials! Much thanks.

  16. Lukas

    Hii..
    I wanna ask how to put templates in html? I tried to download templates but when I open it the template looks separate each other, I don’t understand?
    Thank’s

  17. Emory Rowland

    Lukas, what template are you referring to exactly?

  18. Gerald Lyons

    I am trying to work on this issue.I can’t get, or I should say, I don’t get the option to send to notepad when you reopen from My desk top

  19. Emory Rowland

    Gerald, glad you brought that up. I had to make a Windows shortcut to do the send to. Alternatively, you could just copy and paste to notepad, then save as.

  20. Thanks to @buzzedition for recommending your post. Great info, clearly written. Thank you for your well written articles.

  21. Karen Straka

    I’ve been lost on where to begin—& started 3 blogs just to try to get to my “paid” website. I really needed just a little push to start.

  22. manasa

    I HATED THIS TUTORIAL.THIS IS THE USELESS AND TIME WASTE TO STUDY THIS STEPS

    • Emory Rowland

      Sorry you feel that way, manasa :(

  23. bd

    Great tutorial, always wanted to learn a little about code writing.

Leave a comment