The Complete Beginners Guide to HTML




Posted in TechnologyWebsites

Introduction: The Complete Beginners Guide to HTML

This tutorial is written from the ground up for complete beginners to the world of programming. Obviously if you are familiar with some programming languages this will be somewhat easier.

If you are new to programming do not get discouraged. I myself tried Python a couple of times but I could never get past  my first tutorial. If you already know a programming language then this can also be useful. This tutorial aims to teach you how to make a simple website. Expect more tutorials on setting up a server.

BTW This tutorial is written for Windows users, I don't own any Apple device, but hey, it might happen someday! Also, most of the stuff should work for Mac.

Step 1: Getting to Know HTML

HTML (HyperTextMarkupLanguage) is a language used to make websites. Please remember that is a MARKUP Language it doesn't calculate anything, it only displays things. Markup languages format content. They change how the content looks.

Tags are ways to tell the computer what to display. You use tags to format the content that you want to display. I will explain...

Step 2: One Small Step...

To start off with HTML, you want to fire up good old Notepad. You can find this nifty program in XP under Start-->Run-->Notepad(type it in) and in Windows Vista/7 under Start-->Search programs and files(at bottom)-->Notepad(type it in)

Notepad should turn on and I introduce the first tag(all new tags will be bold for clarity). This tag is used to say, hey! this is and HTML document, here is where the HTML starts. It is usually placed at the very top of the document.


< html >
blah blah
< / html >

Why does it end with a /html? Otherwise the computer might interpret it as another start of a document. In HTML anything with a / is an ending.

Step 3: The Head Tag

The tag is placed after thetag. It includes things that aren't shown on the webpage itself. On Notepad simply type

< html >
< head >
< title >Fred< /title >
 < /head >
< /html >

The title tag is the thing you see at the top of the browser window. This is all we are going to place in thetag for now.
BTW The layout doesn't matter, you could just as easily write it...

Step 4: The Body Tag

Now we are going to concentrate on the <body> tag i.e. the stuff we see. There are many tags that we can put in the body but those will come later. Now...





As you can see It is after the head tag. There are many tags but I will introduce you to only the essential tags.

Step 5: Body Tags

The first tag is <h1. Interpret as heading 1. There are also other heading tags such as <h2>which, logically is smaller. Obviously I can't show you the effect but i can give you the code...



<h1>Its me Fred!!</h1>
<h2>But then I took an arrow to the knee</h2>
<h1>JK its overused!XD</h1>


Another tag is the <p>tag. This is a tag with which you just write stuff. Nothing fancy. Interpret as <paragraph>...



<h1>Its me Fred!!</h1>
<h2>But then I took an arrow to the knee</h2>
<h1>JK its overused!XD</h1>
<p>I <3 HTML</p>


From this you can deduce that I like Skyrim more than I like HTML, which itself is a crime. But my computer can't run Skyrim so it's OK!

Step 6: Nerd!!!!!

If you got through this much, you can probably keep going and learn HTML, CSS, PHP and Javascript. If you are curious, that's good. If not, you probably don't like Star Trek but please don't get discouraged. Let's continue...

Save the file as .html (name.html). and then open it. You should see what you typed. To edit right click-->Open with-->Notepad. You should see the code. Feel free to edit. Close Notepad and just double click. It should open up your webpage in your default web browser.

Await my next Instructable with undying impatience.



    • Spotless Contest

      Spotless Contest
    • Trash to Treasure

      Trash to Treasure
    • Pocket-Sized Contest

      Pocket-Sized Contest

    We have a be nice policy.
    Please be positive and constructive.




    I do encourage people making these -ables but like with another one I found on the same subject I couldn't help but notice the lack of a doctype.

    A doctype should be declared before the html tag on line 1, you should use it because this is the part that tells your client's browser which version html you are using.

    It won't matter in this example since you only use a few basic tags (h1,p) but as this is a 'basic html' instructable i feel doctypes are a part of that (W3schools has all the information you need).

    I do like the rest of your -able, it's to the point and clear but I feel people using this technique might have issues later on that could be easily prevented when they understand doctyping and the difference between html 4.01 datatypes and html 5.

    2 replies

    ...And then they say that sometimes the code glitches and doesn't do what it's suppose to.

    Code doesn't simply not work, it's not like Skynet.

    It's always because they leave out .

    I completely agree with you on this one. In the W3schools tutorial it's the first thing you learn.

    Oh, and it's more commonly referred to as an 'ible.

    Forgot that you can't put that in a comment. You know what I mean.

    I figured it out, on a Mac all I have is Textedit. Just in case anyone else out there is trying to do this, I'll explain. You have to format Textedit for programming, real simple. Go to Preferences> New Documents, and click "Plain Text" instead of "Rich Text", then go to Preferences> Open and Save, and click the first two boxes, "Ignore Rich Text commands in HTML" and "Ignore Rich Text commands in RTF files". Voilå! It works! :)

    Didn't work for me :( But I am on a Mac, so thats probably why. After I open it as a .html, it just shows the code in Firefox...

    Nice picture for the intro :)