A 10 minute quick HTML course

A 10 minute newbies course to HTML

So you want to learn HTML? Well the progress of learning how to successfully build website, from scratch and without any fancy programs can take quite a while, but it all starts with HTML.

HTML, or HyperText Markup Language, is the language in which web pages are built with.

What you're reading and looking at right now, this webpage, is exactly what HTML creates ... a webpage! This is the result of HTML "code". Code is the name given to the cryptic lines of programming which we will discover more in this quick course. This code is also often referred to has the SOURCE CODE.

Now what you need to do, is right click your mouse on an empty spot on this webpage. You will see a pop up menu appear. Within this menu, select the VIEW SOURCE option.

What will appear next is a new window with tons of lines of information. By viewing the source code you will see all the information needed for building a web page.

Each line creates various effects as to how the webpage will look like.

The key elements in a web page is the TAGS. These all appear in between the < and > characters. The secret to being able to create a webpage from scratch is to know what the various tags do. Once you know, all you have to do is load up a simple text editor and start typing away.

One thing you may have noticed is that the tags are repeated. For example, look at the top of the HTML source code of this page, you will see: <HTML> (a starting tag). Now if you look at the very end of the page, you will see: </HTML> (an ending tag). This basically means that everything after the begining tag, <HTML>, and the ending tag, </HTML>, is HTML.

This rule applies to nearly every tag that affects a certain length of space.

For example, if we would want text to be bold, we would type in:

This would look like this:

I want all of this to be bold!

Following is a list of the most common tags used for successfully building a web page. It would be a good idea if you fired up a text editor (notepad for Windows, SimpleText for Mac, Pico for Linux, etc) and type in these tags as you go, and then viewing the saved result with a browser. Or here is an excellent HTML editor we use Macromedia Dreamweaver

<HTML> and </HTML> :All web pages must have this tag, or else web browsers will be unable to read the webpage (in most cases). Everything within these two tags will contain the entire webpage.
<HEAD> and </HEAD> : The head tags will contain the TITLE tag (next description) and the STYLE tags (if added). The title tag will is simply that, the title of the web page. You can see the output of all title tags, on any webpage, by simply looking at the title bar of your web browser when you open up a webpage. It is not an essential tag, but it does help alot for search engine classifications and does add some style to a web page. STYLE tags add some eyecandy to a site. Basically you can use the STYLE tags to change the appearance of text and links depending on certain actions. For example, you can drag your mouse over the links in this webpage. You will see the link's color will change.
So to sum it up, the HEAD tag is basically invisible elements, but is a very important part of any page.
<BODY> and </BODY> : The body tag designates the visual content of the web page. The starting tag (<BODY>) must be placed before any other tags (with the exception of the head tag), and the ending tag (</BODY>) must be placed at the very end of the web page, just before the html ending tag. Correct usage of these tags will allow web browsers to correctly read the created web page. Within the Starting tag , you can insert different types of commands: <BODY TEXT="color code"> This will set all text within the page to the specified color, unless changed by a font tag (see below). <BODY BGCOLOR="color code"> This will set the background of the webpage to the specified color. <BODY LINK="color code"> This will set all hyperlinks (see below) in the page to the specified color, unless stated otherwise. <BODY BACKGROUND="image"> This will set the specified image to be the background. <BODY VLINK="color code"> This will set all links visited by the user to the specified color. <BODY ALINK="color code"> This will set any links within the page that points to the page the surfer is currently on to the specified color. Simply insert any or all of the above within the "<BODY>" tag. Feel free to expirement.
<CENTER> and </CENTER> : This tag allows any item inserted in between (an image or text for example) to be aligned in the center of the page. As you go along making pages you will notice that this tag is used quite often.
<H#> and </H#>: (Replace the # with a number ranging from 1 to 6). This is the headline tag. Any text inserted in between these two lines will become "headlines". Very effective to draw attention to a certain part of a webpage, or a good item to use to explain a page's content. Note that a <H1> anytext </H1> will produce the largest headline, while a <H4> anytext </H4> will produce a smaller tag, hence, the lower the number, bigger will the headline be. If you look at the very top of this page, the "Required Internet Basics Part III" is in a <H2> and </H2> tag.
<FONT> and </FONT>: This tag allows a person to change teh font of any text found within these tags. Here are a few ways to change the fonts with these tags: <FONT COLOR="colorcode"> This allows the specification of the text color. <FONT SIZE="#"> (replace the "#" with a number) This allows the specification of the font size. The biger the size number the bigger will the font be. <FONT STYLE="stylename"> This allows the specification of the font style. Using the correct style, the font can be Arial, Time New Roman, etc. Each of the above modification can be inserted in one tag to create combinations.
<I> and </I>: The italic tag, this allows any text inserted in between to be in the ITALIC style.
<B> and </B>: The bold tag, this allows any text inserted in between to be in BOLD style.
<U> and </U>: The underline tag, this allows any text inserted in between to be UNDERLINED.
<A> and </A>: This is the hyperlink tag. It allows whatever item placed in between to be linked to another location. There are several items that can be placed within the "<A>" (like in the above FONT and BODY>. I will explain the two most common. There is of course the "HREF". This allows to make a hyperlink to an other webpage. Look at the following:

<A HREF="http://www.yahoo.com"> anytext or an image can be here </a>. The text and/or image that you place in between the tags will be a direct link to Yahoo.com. Note that the URL must come after the HREF= and must be placed in between quotation marks.
There is the "NAME". This is a perfect tag to use for a table of contents for example. You can see this tag work by going at the very top of this page, and you can click on the three links to directly jump at the specified location. To corectly use this tag you must do two things. First, you have to specify a location to enter the "NAME" tag. Second you have to use the "HREF" in a special manner so anyone who follows the link will go directly to the name. Look at the following:

<A NAME="Chapter1">Chapter 1</A> This places a "NAME" tag at chapter one of a web book.
<A HREF="index.html#Chapter1">Click here to go to Chapter 1</a> Note the "#" then the following word (which is the value of the NAME tag). In this example, a use would click on the HREF tag to go to chapter 1 (since it says so), and would be brought to the NAME tag location.
The <IMG> tag: You probably noticed that there is no ending tag for this one. One is not really needed. This is the image tag, and it is used to show images on a webpage. Like in the above tags, you will need to use secondary tags within the <IMG> tag to specify the image. <IMG SRC="imagename"> Replace the "imagename" by the location of the image. This will allow the image to load in the webpage. <IMG BORDER="#"> (replace the "#" with a number) When an image is linked, a border will form around it, this tag will indicate how thick the border will be. If you enter "0" there will be no border. <IMG ALT="entertexthere"> This will allow and alternative text to "pop-up" when a user rest's their mouse over the image. <IMG WIDTH="pixels"> This will indicate what pixel width you wish your image to be on the webpage. <IMG HEIGHT="pixels"> This will indicate what pixel height you wish your image to be. Please note that without the "SRC" tag, none of the other tags will work (since there is no image source).
<HR> and </HR>: This will enter a horizontal line on your webpage (you can see one at the very bottom of this page).

At this point you might want to try and make your own sample webpage. By all means try, the above information is quite enough to create a simple webpage.

You may also have a web page designing program, such as FrontPage, or NetObject Fusion, HotDog, HomePage, etc. Some are quite good, while others are just plain useless. Whatever you use though, it's always important to proof read your HTML code. The easy to use graphical programs can be quite a time saver, but sometimes they can turn your HTML files into a terrible mess, and even sometimes create problems with your page that wasn't even foreseen by the HTML editor program you had. We use Macromedia products exclusively Macromedia Dreamweaver is our HTML editor. Macromedia Fireworks is our graphics editor Aand of course Macromedia Flash .

We have tons of other related links for HTML all over Webfreebees.

A good place to start would be our Page builder page, which provides a few designing tips, free servers to choose, where you can get content, etc.

You can also visit our HTML FAQ page where we list tons of really great sites that provide even more tips on designing and help with HTML, along with JavaScript and CGI.

Also don't forget our Webpages section of Webfreebees where we have compiled an incredibly huge list of free resources you can use to build your pages. Images, buttons, editors, tips, CGI, mSQL, Java and so much more.

To finish it up, once you have your website online you will want to get traffic. A great place to start to learn how to build TONS of traffic by using free advertising, is of course our Promotion and Free advertising resource page.

By the way, once you have your site built, and you used some of our resources, then don't be shy and submit it to us! We'll be glad to review it for possible addition to the Webfreebees.net index.

Please, help us grow and tell a few Friends.

Home Submit your site Report a dead Link Free Tech Help Message Posts Contact Easy Cash Contests Our Guestbook Friends Pages Promotion Tools Tutorials Freebie Site Links Fun Kids Stuff

We want to hear from you! Contact us!
Copyright (C) 1996-2007 Webfreebees
All rights reserved. This website may not be copied in part or in full without express written permission from the publisher. All violations will be prosecuted to the fullest extent of the law.