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!