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.

EXAMPLE

< 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...

<html>

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

<body>
</body>

</html>

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...

<html>

<head>
<title>Ibles</title>
</head>

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

</html>

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

<html>

<head>
<title>Ibles</title>
</head>

<body>
<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>
</body>

</html>

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.

ShopBot Challenge

Participated in the
ShopBot Challenge