Website Archive

Simple Startup to HTML Coding

The first basic thing that you need to learn about coding HTML is simply this, if you get frustrated walk away. I have found that many times in the past 5 years of coding that if I just walk away and come back five or even ten minutes later refreshed then you will often see the solution pop up right in front of you. Be patient with your project you will get no where fast rushing through a HTML or any other type of page/site that you are building. Yes you could simply use one of those programs that automatically generates all your code for you with the pretty drag and drop type interfaces. But lets face it, at times it is easier to drive the car if you understand whats under the hood. You also should know the exact process of what you’re doing by learning how to visit the resources you’re going to use to help you carry out your duty. If you are like me and are very curious about how things work then lets get started with this simple project

First you are going to need the following for my tutorial – Notepad which is found under Start  gt; Programs  gt; Accessories and a web browser like Mozilla Firefox, Internet Explorer or Google Chrome and a Windows O/S. Chances are that if you are reading this you already have a web browser.

Step one of your tutorial is you are going to want to create a folder somewhere easily accessible for your project. I prefer mine to be under the root of my main drive or data storage. A example would be underneath C: Create a folder named “html” and open it up. When you are in the folder simply right click in the empty space and go to New  gt; Text Document. Open your new text document and lets begin. Also while going through this tutorial and you are typing your examples do nor leave spaces in your tags. I simply did this so that you can view it easier. So it would be Less than symbol with no space in between.

First you are going to want to open your html page using this  lt; html  gt; that way any browser you open the file with will know automatically that it needs to read it in a HTML format. Second you are going to need to create the what we like to call Body of your page. Open it with this ” lt; body  gt;” now anything that you type in this area will be displayed on your page. You should now have something that looks something like this:

 lt; html  gt; lt; body  gt;

Got it? Perfect! Now your next step is to say something on your new web page. Lets try the old standby in coding “Hello World”, but we do not want just a regular size text to be on the page we want to make it larger and more outspoken. To do this we create what is called a “Header” tag. It is very simple and looks like this  lt; h1  gt; There are others as well h2 h3 that make the header smaller and less pronounced.  lt; h1  gt; will do fine for your purposes. So what we need to do is enclose Hello World inside of the tag It will look like this  lt; h1 gt; Hello World  lt; /h1  gt;Now do you see the following

 lt; html  gt; lt; body  gt;

 lt; h1  gt;Hello World  lt; /h1 gt;

If you have this lets continue. We are now going to make a paragraph using the  lt; p  gt; tag. This will be very useful in creating simple paragraphs on the fly. Lets try it now  lt; p  gt; Paragraph that says nothing once again we will close the paragraph using That way the browser know the paragraph is finished. You should now have this:

 lt; html  gt; lt; body  gt;

 lt; h1  gt;Hello World  lt; /h1  gt;

 lt; p  gt;Paragraph that says nothing  lt; /p  gt;

Ok we are now close to finishing! Now we will close the body of the page and close the HTML tag using the following tags,  lt; /body  gt; and  lt; /html  gt; we have to close the body first and we need to close the HTML tag LAST. This way the browser knows to stop reading the language. We should now have a product that looks like this:

 lt; html  gt; lt; body  gt;

 lt; h1 gt;Hello World  lt; /h1 gt;

 lt; p  gt;Paragraph that says nothing  lt; /p gt;

 lt; /body  gt; lt; /html  gt;

Now to save and view your first web page! Go to the File option on the Notepad menu and click “Save As” this next step is crucial, change the drop down box to “All Files”. Now name your HTML document “index.html” make sure to take off the .txt portion if it is still there. Make sure you save the file to the folder you created. After that close notepad and double click on your index.html file. It should now open in your default web browser and you will be able to view your first web page!