Please Vote for this Instructable in the Teachers Contest! That would be awesome.

HTML, if I remember correctly, stands for Hyper Tense Markup Language. Correct me if I am wrong. It is a basic, actually easy to learn coding language designed for creating basic websites, It is a fairly early form of coding and can be done on any computer OS. Macintosh, Windows, 98, XP, Vista, 7, Linux, Gecko, etc. It is the most open source and one that is quite widely used and known.

I'm going to show you how to make your first web page with HTML. I am also going to explain this as easily as possible. Today I tried to tackle learning Lua, a game scripting language, and oh man, I've never read something so hard to understand before. So I'm going to take it easy on you.

We will start with step one, which is the next and first step (duh). It will show you how to create the foundation of the website, the part you start with, or easier said, the template. Once you are ready, just scroll down to the next step.

Along the way, i'll also explain some good software you can use for HTML coding. Stuff like Firefox / Chrome extensions and things like that.

Oh man! That reminds me. System Requirements. Like anything in life, there are requirements. List of things you need:
Operating system, everything works.
A text editor. The ones I prefer are Aptana, or even simpler the built in Notepad on Windows.
Photobucket or other photo sharing website account.
Internet Browser (Preferably Google Chrome)
(optional) Firefox extensions: Web Developer Toolbar and Firebug extension.
(optional) Chrome Extensions: Notepad and Angry Birds (For when you get bored. Come on, everyone needs a break sometime).

Alright, now if you have all of those things, we are ready to start!

Step 1: Your Foundation

Every code starts somewhere. You don't just pick up and write down web pages. Oh, no. Lets try this out. Open up Aptana or whatever word editor you are using and paste this in, then save it as Instructables.html on your computer.

<html>
<head>


<title>I am learning HTML!</title>
</head>

<body>

<h1>Hello World!</h1>

<p>
This is my foundation. It was taught to me by some awesome dude named
Stephen Ritchie on Instructables.com. He is awesome!
</p>

</body>
</html>

There is your foundation! It's a good one, can't you tell? Let us dissect it a bit.
At the start and end of it are <html> and </html>. That tells it that the webpage is trying to run an HTML document. Inside of those is <body> and </body> where the stuff actually goes. There are the title tags, which render a pages information. It does different things. Look up at the top of your page right now. It probably says 'Beginning HTML' at the top. That is title! It can also give information. If I log into Facebook right now, it will probably say (3) Facebook.com' telling me I have three updates. That is a changing title. This involves applications that dynamically create documents. You can tell by the way that sounds that it is complicated, therefore it is unimportant and I won't be teaching you that.

The <h1> and </h1> tags make the font inside them bigger, making a headline or in-page title (hence the 'h'). <p> and </p> are paragraphs. That moves the font inside it down a space or two. After you save that .html file, go ahead and paste into your browser (view as a web page) and you'll see what I mean by all this. If you don't know how to do the first two, right click and choose 'Open With...' and select your internet browser.

There is your foundation! If you have not noticed, every tag ends with a '/'. That differentiates whether something is starting or ending, and obviously the slash is ending. Remember that <p>'s are paragraphs. Don't think they end by themselves, always add the extra 'p' and a slash at the end of your sentence.

If you can still understand anything I am saying, time to move on to the next step!

Step 2: Adding Images to Your Website

So, you have your first website there! Good looking one, too. Feel free to change what the title and text say. Even add more if you want. I would assume a bland 'Hello World!' and some text inquiring how awesome I am aren't very interesting to you. You probably want to add pictures, right? Your in luck; you can! Here is how.

Find an image you want on the internet. If you want to use your own, upload it to a photo sharing site like Photobucket. Once you have a picture you like, right click and choose "Copy Image URL..." (on Windows. I wouldn't know about other OS).
After you have copied image URL, add this into the body of your website:

<img src=IMAGE URL GOES RIGHT HERE>

Hence the big letters, you paste the image URL in the middle there.
TIP:If you are sitting here wondering what a URL is, type in www.Instructables.com. That is a URL! A web address.

That is pretty much it. I could go into a discussion about image editing about now, but due to the fact this is an Instructable about HTML, I can't do that. Maybe in a separate Instructable.

If everything went right, your webpage should be like the one above. A picture inside of it. Another thing that commonly happens, as you can also see in the picture, is an '<' beside the picture. If this happens, just remove the '<' from beside 'img src='. If your image disappears, consult a doctor.

Congratulations, you are a beginning web developer! Time to move on to step two!

Step 3: Enable File Extensions

This is a short step, necessary if you want to save or view a bunch of .html files on your computer. A lot of programs need to recognize a file as .html, and if it can't see that, it might have a hard time. You also wont be able to save html files, just text files. For example, open up notepad and write a blank file and save it. does it have .txt at the end? If so, go ahead and skip this step. You don't need to read any of this.

BUT, if it doesn't say that, this is a simple fix. By default, windows usually hides these things from the user to make the computer look better. But trust me, nothing is going to make an XP look better than a Mac or Ubuntu OS.

Here is how you fix this problem:

Open up file manager.
(My Computer or Computer in Windows). It is pretty easy. Open your start menu or go to your desktop and it will be there in plain sight. Right near your trashcan.

Choose Tool > Folder Options.
Open up the Tools folder, then go into Options (You can tell we are getting technical). A dialog box should appear. After this, select the tab at top that says 'View'. Don't see it? Go into Control Panel and folder options should be there.

Don't hide the Extensions.
In the dialog box you should see a lot of check boxes. Just deselect the right one. It should say something like 'Hide extensions for known file types' in Windows.

You are done with that! Sorry if you had to go through all that mess. Just a necessity all programmers need to do. Time to skip on over to step Four!

Step 4: Getting Your Software

As you see, a lot of HTML involves preparation. Software can be a necessity for developers at times. Things they desperately need. Notepad or Aptana, as I mentioned, is one of them. You can do these following things to get up and running:

Install an HTML Word Processor.
Microsoft Word is bad! Maybe good for writing books or documents, but not web pages. Go with Aptana, Notepad, Wordpad, or even start trying online with Google Docs or Wordpress / Blogger.

Get the best of the World Wide Web.
You will need a really good web browser. The best one for open content is Firefox, it is a developers dream browser. But it is a bit complex. For a better viewing experience and speed, go with Google Chrome. Use anything BUT Windows Explorer and Safari.

Make sure you un-hide file extensions.
Don't know what this means? If you don't, you aren't paying attention. Go back to step three.

Add Shortcut to your Desktop.
The desktop is where everything important goes, so make sure you add all of your software goes there!

(Optional Things) Apps and Software.
Add things like Web Developer Toolbar (Firefox & IE) or Notepad and Google Docs (Google Chrome) to all your browsers for extra ease of use when programming.

Are you ready? Let's start coding again, move on to step five: Embedding videos!

Step 5: Embedding Videos

Now we will add more essential components to your website. Who likes pictures and text? Sure it is great, but after a while it get's boring. Let's add videos! I will show you how to embed from YouTube. Luckily, YouTube has an amazing service allowing you to copy and paste a video right into your webpage, like this:

Find a video you like.
Christina Grimmie just uploaded her version of Silent Night? No way! Oh, right. Once you find a video you like, just click on it and then go to the next step down below this one.

Copy the EMBED Code.
There will be a 'Share' button underneath the video (For the new YouTube). Click that then click the button that says 'Embed'. Copy the code, now go back to your HTML Web page and paste it in the body.

Well, would you look at that? There is a big video inside your web page now! How awesome is that? So far you have Embedded Videos, Uploaded pictures, downloaded software and made text come to life in a .txt file converted to HTML. Looks like we have covered the basics! Want to continue this adventure? I'll be posting a part 2 HTML sometime, Moderate HTML.

See you next Instructable!