HTML Basics

Tutorial on how to make a web page.

You can also see a listing of all HTML tags if you wish to just research a specific HTML tag.

In this HTML tutorial you will find out how to write and use basic HTML tags... here's the deal. To make a web page using HTML you need a text editor of some sort. To make this page I used notepad, feel free to use whatever the hell you want to make yours. Before I start I would like to specify that even though I use small caps in all my examples, capital letters may be used as well. If you're feeling artistic you may even use BotH tYpEs aT oNcE with no penalty to your final web page result.

You see that? that's the skeleton of a basic web page. I will refer to statements contained between brackets as TAGS, much like everyone else on the internet. Most HTML tags come in sets of two ; the opening tag and the closing tag. Both tags are identical except for one thing... the closing tag contains a SLASH before its name as you see here in the blown up TITLE TAGS. Allow me to walk you through what these different tags do.

HTML TAGS : The HTML tag always finds itself at the top of every page to indicate to the web browser that the following text will be HTML code, or in simple terms, a web page. Every page must also end with the closing HTML tag to tell the browser that the HTML coding ends there. Your entire web page will be coded between those two tags.

HEAD TAGS : Everything nested between the HEAD tags will be loaded into the browser before anything else. This comes in handy later when you incorporate different elements such as style sheets to your HTML. As a beginner you will have very little use for the HEAD tags. However, between the HEAD tags you will find the TITLE tags.

TITLE TAGS : The text you put between these tags will appear in the blue bar at the top of your browser window. For this web page I entered "RoadDust.org" between the TITLE tags. You should be able to see it if you look in the little blue bar at the top of your browser window.

BODY TAGS : The BODY tags contain the bulk of your web page. All the text you wish to share with the rest of the world will be typed in between these tags.

Your First Web Page

Tutorial on how to make a web page.

Now I will tell you how to display your first web page into the web browser. First you must type up the text you see to the left of this paragraph into your text editor. As you may have noticed, it's the same as the web page skeleton I showed you in the first part of this tutorial. The only difference is that I entered a TITLE which will appear in the blue bar atop your browser, and I added text in between the BODY tags which will be displayed inside the web page. Once you wrote the coding exactly as it appears in the white box, you must save it as whatever.html The .html extension is extremely important because without it, your web browser will not see the file as a web page. Once this is done you're all set. Double click on your HTML file and it should open in your browser. As an alternative you can select the FILE icon at the top of your web browser window. Then select OPEN. When the open box appears, click on browse and retrieve your .html file.

How Tags Work

Tutorial on html tags for your web page.

Now that you're an expert at making a basic web page, I will show you how tags work. As I mentioned earlier, most tags come in sets of two. Everything in between those two tags is immediately affected by them. In this next example "Blah blah blah" is italicized because of the effect of the tags.

If you open this page on your web browser the text you put in between the tags will be italic. This same principle can be used for many other tags. Take a moment to try the different tags listed here and view their effects on your text. Not only can all those tags be used in the same manner, they can also be stacked.

Adding Pictures

Tutorial on how to add pictures to a web page.

Adding pictures is a very simple task. You can add a picture anywhere on your web page by placing an IMG tag where you would like the picture to appear. Once this is done you must specify the name of the image you would like to add. The example provided here should be self explanatory.

As you can see this is the same web page only I aded a tag named IMG. The IMG tag has no closing tag. Inside the tag I added the SRC command which calls upon the image. For the image I used the .gif extension but you may have a .jpg. In this example the image would appear directly at the end of the text since that's where it was placed. In the next example I added an align command, this command will allow you to stack the picture to the left or right of the screen. One of the big advantages of this is that all following text will surround the picture. I then added a height and a width command, with these you can regulate the size of the picture in pixels. If you place both your picture may be distorted as the height and width may not be in proportion, if you wish to keep your picture's proportions use only one of the two, the computer will set the other to the appropriate size.

Go ahead and try this on your own, after all... that's the best way to learn. If you do not have any pictures to try this with, just right click on any picture you find on the web and click on "save as".

Creating HTML Links

Tutorial on links to other web pages.

Amongst the HTML tags, one of the most important is the "A" tag. This HTML tag allows you to create links to other HTML pages. The syntax for this tag is fairly simple as you may have noticed in the coding to the right. Allow me to explain... The opening and closing tags are a simple "A" followed by an HREF="whatever.html". This HREF command tells the web browser to change the displayed HTML page for the one between the brackets, in this example this would be "whatever.html". The name of this fictional HTML file is only italicized to emphasize that it may be named anything you wish. WARNING: The HTML file you refer to must be inside the same folder as the one making the reference. Otherwise, the file will not be found and a message saying the web page cannot be displayed will appear. Type up this page as is and create another HTML document called whatever.html. Run the first, you will see Blah blah blah written on the screen. If you click on this text, your second page will appear.