HTML document structure outlined.

Skeleton of an HTML Document

HTML stands for H yper T ext M arkup L anguage. HTML is one of the easiest programminglanguages to learn. One of the greatest things about HTML is nothing is sacred,meaning if you see someone’s page you like, you can view their source code andsee exactly how they made it (which is sometimes the best way to learn HTML).

HTML documents are made up of “tags”.A tag is a command enclosed in <, and > (i.e. ). There areopening and closing tags:

Notice how the closing tag has a “/”.Not all HTML tags need a closing tag, but if you’re not sure, it’s better toinclude one.

There are a few tags necessary for every HTMLdocument (the skeleton of an HTML document). The following will show you theformat of the skeleton and explain each tag:

NOTE: I numbered the skeleton to makeit easier to refer to each line, but DO NOT number your lines when you makeyour HTML document.

1.

The tag is the firsttag in your document. It tells the internet browser that it is reading an HTMLdocument (without it, the browser would think it was viewing a text document).

2.

We will not deal with the tag too much in this basic tutorial. It is used for frames, stylesheets, META tags, and scripts. But we will only use it for our title.

3.

This is the only tag we will usein the tag. It is used to make the title of the page (hence thename). The title of the page will appear in the blue bar across the top of youractive window (the title of this page is “DogGear.Net: Basic HTMLTutorial”). To use this tag, you type your title between the opening andclosing tags.

Example:

4.

This is the closing tag.

5.

The tag is where thebulk of your web site will be. You will put all your text, images, and linksbetween the opening and closing tags.

Before you add your text, image,and links you need to define some parameters inside the tag:

• TEXT – this will determine the colorof your text through-out your page.
• LINK – This will determine the colorof your links through-out your page.
• VLINK – This will determine the colorof your visited links through-out your page.
• ALINK – This will determine the colorof your active links through-out your page.
• BGCOLOR – This will determine thecolor of your background through-out your page.
• BACKGROUND – This will determine thebackground image you load through-out your page.

NOTE: None of these arerequired, if you do not set them the default is TEXT=black, LINK=blue,VLINK=purple, ALINK=red, and BGCOLOR=white. Also, when you define these, it isnot necesarry to use all of them. If you set a background image then you wouldnot need to define a background color etc…

Example using BGCOLOR:

Example using BACKGROUND:

NOTE: If you do notunderstand the “image.gif” from the BACKGROUND command, don’t worry,we will cover images in the Loading Images section.

6.

This is the closing tag for the tag.

7.

This is the closing tag for the tag. This should be the last line in your HTML document.

Now that you know the format of the skeleton,you’re ready to start making your web page. It is always a good idea to startout new HTML documents with the skeleton (opposed to just filling it in as youdo it). See if you can remember all the parts of the skeleton and go start yourHTML document now, or copy and paste the code below (as long as you memorize itlater).

Formatting Tags

Formatting tags are used to format your text.If you’ve ever used a word processor before, there are usually three buttons onthe top tool bar. The three buttons contain one letter each; B, I, and U (Bold,Italic, Underline). Formatting tags will let us perform those same functions,but with our web pages instead of our word processor documents.

We will start with Bold. Since you alreadyunderstand the concept of opening and closing tags, this won’t be hard.

Bold has it’s own tag: . It works thisway:

The text will become bold now and will stop being bold now.

Notice how everything between the and looks bold? That’s all there is to it, just enclose everything youwant bold in the bold tags.

The tag for italics is (theres apattern developing here). The same rules that applied to the bold tag apply tothe italics tag:

The text will become italicized now and will stop being italicized now.

The same thing happened. Everything enclosed inthe italic tag was italicized.

The last tag is the underline tag; (yes, youguessed it) . The same rules that applied to the bold and italic tagsapply to the underline tag:

The text will become underlined now and will stop being underlined now.

Once again, everything between the opening andclosing underline tag is underlined (I told you this was one of the easiestprogramming languages to learn).

Now that we know how to change the look of yourtext, lets learn how to change the size.

Changing the size of your text is similar tochanging it’s appearence. There are six diferent tags we will use,

through

(largest to smallest). They work exactly like the ,, and tags. Just enclose the text you want it to change withthe opening and closing tags.

Example:

Thiswould be the largest text

This would be the second largest text

This would be the third largest text

This would be the fourth largest text

This would be the fifth largest text

This would be the smallest text

So now we know how to change the appearance andsize of our text, the only formatting tags left to cover are the

and
tags. These tags are different than the other formatting tags. Thesetags change the texts hard returns and spacing of sentences and paragraphs.

What I mean by this is that HTML does not payattention to an editors hard returns and spacing (I know this sounds prettyconfusing but it’s not). This is best explained by example:

Hard returns:

Line one

Line two

Notice how the line ended after the
tag and anew line started. It basically performs the duties of the “Enter” or”Return” key in a word processor. Without that
tag, ‘Linetwo’ would stay on the same line as ‘Line one’ (HTML editors do not recognizetraditional formatting. You have to tell them when to end the line and when tostart a paragraph).

NOTE: Your HTML Editor will “wrap”your text. That means your HTML editor will fit your text to the computerscreen. You do not need to type a
everytime you think that the textis getting too long for the screen, only when you need the line to stop.

Paragraphs:

This is a newparagraph.

The paragraph tag puts a blank space above andbelow the text enclosed in it’s tags. It is not completely apparent in theexample above, but if you look at the text through out this tutorial you willnotice all the paragraphs have a blank line dividing them.

The ALIGN command can be used within the

tag. It has three options (LEFT, CENTER, and RIGHT. LEFT is thedefault.).

Example:

This paragraphwill be centered

These are the only formatting tags we will coverin this basic tutorial, if you’re interested in learning more formatting tags,visit our HTML TagReference Page for a growing list of HTML tags.

---

MakingLists

In this section we will show you how to makebulleted and numbered lists.

The HTML tag for bulleted lists is

.It stands for U nordered L ist. The HTML tag for a numberedlist is
. It stands for O rdered L ist. Both thebulleted lists and the numbered lists need another HTML tag to work; the
1. tag. It stands for L ist I tem.

   Bulleted Lists:

   Code:	Example:
   Item one Item two Item three Item four Item five	Item one Item two Item three Item four Item five

   Numbered Lists:

   Code:	Example:
   Item one Item two Item three Item four Item five	Item one Item two Item three Item four Item five

   There are other ways to make lists, but theseare the two most supported ways. If you are interested in finding out the otherways to make lists you can find them in our HTML Tag Resource .

   ---

   MakingLinks

   Up until now everything has made sense. Thebold tag was , the italic tag was , and the underline tag was. Naturally you would make the link tag right? Wrong, thelink tag is . It stands for A nchor. Theres a good reasonthey made it an ‘A’ instead of an ‘L’. The tag is used for so muchmore than just making links, but making links is it’s most popular use.

   The tag can be used with thecommands:

   • HREF – This is used as HypertextReference, and links an HTML document to another HTML document. This can belinked to a WWW address, HTML file, or NAME.
   • NAME – This is used for making theanchor the target of a link.

   We will start with the HREF command. The threemost popular uses of the HREF command are links, E-mail links, and downloads.We will give an example of each:

   Link
   Code:	Example:
   DogGear.Net	DogGear.Net

   To make the above link, we started the tag and then put an HREF command seperated by a space. HREF standsfor H yper REF erence, so we defined our HREF command byadding an=”http://www.weshtost.com”. By changing that address, youwill change the destination of your link.

   E-mail Link
   Code:	Example:
   John Doe	John Doe

   To make an E-mail link, all you have to do isdefine the HREF command starting with the command ‘mailto:’ followed by theE-mail address (i.e. mailto:john@doe.com).

   Download
   Code:	Example:
   DogGear.Net Logo	DogGear.Net Logo

   To make a link download a file just define theHREF command with the file name. If the browser can’t read a certain extension(i.e. zip files, exe files, and some image files) it will think you are tryingto download it.

   The only other command left for the tag is NAME. The NAME tag is used with the HREF command (I know this soundsconfusing, but it will make sense in a bit). The NAME tag turns the tag into a target. This means you can link not only to a specific page, but aspecific part of a page as well.

   The best way to explain this is by example. Thistutorial is just one big HTML page. At the top I have links to the different sections of the tutorial, when you click on the linksthey just scroll down to the section you clicked on. I accomplished this withthe NAME command.

   Example:

   First we need to make a target:

   

   NOTE – In this example I’ve targeted animage, but you can target whatever you like. The most popular is text.

   Next we need to make a link to the target.Linking to a target is a little different than making a regular link. To linkto a target you must include the pound sign (#) before the name of the target.Since our targets name is TARGET the link would be #TARGET.

   I have to create some blank space between thetarget and link so it is more aparent how the NAME command works. Just scrolldown below all the blank spaces to test the target out.

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   

   Now click the arrow and it will jump up to thetarget. The NAME command is extremly useful in a large HTML document.

   NOTE – I made the link an image. Youdon’t have to use an image. The most popular is to use text.

   You can link to targets that are in a differentHTML page by just including the address followed by the pound sign and name ofthe target (i.e. http://www.DOMAIN_NAME.com#TARGET_NAME).

   ---

   Loading Images

   There are two formats of images you may usewith the internet; GIF’s and JPEG’s. JPEG’s are high quality, but usually havea large file size (making them slower to load). GIF’s have a smaller file size,but you give up some image quality (making them faster to load).

   To load images you use the image tag(). Just like the tag, the tag has commandsyou must define inside of the tag:

   SRC – This is the S ou RC e of the image. This would be the image’s name or locationif not in the same directory as the HTML page that is calling it.

   WIDTH – Use this commandto define the width of the image in pixels.

   HEIGHT – Use this commandto define the height of the image in pixels.

   BORDER – Use this commandto set a visible border around your image (set it to zero when linking imagesif you don’t want a visible border).

   ALT – The ALT commandstands for ALT ernate text. Use this command to place a shortdescription on the image (used for non graphical browsers and backup in caseyour image does not load).

   ALIGN – By adding thistag you will make the text wrap around the image. There are three options(left, right, and center).

   Now that we know the IMG tag and all thecommands, we can learn how to put it together:

   Code:	Example:

   You do not need to have the image in the samedirectory as the HTML page to load it. You may place an absolute address in thesource command and pull an image from another site:

   Code:	Example:

   ---

   Making Image Links

   Now that we can make links and load images, wecan combine the two and make Image links. Image links are just images that arehyperlinked to another internet site, E-mail links, or downloads.

   To make image links, start with the tag, define it just like you would a text link, but instead of typing text inbetween the opening and closing tags, load an image:

   Code:	Example:

   To make an image link for E-mail or downloadsjust modify the tag like the Making Links section specifies.

   ---

   FAQ

   This section will answer some F requently A sked Q uestions about HTML. If you have anyquestions that are not covered with this FAQ, please E-mail them tomsupport@DogGear.Net .

   Q: IsHTML case sensitive?

   A: No.I have typed all of the tags in this tutorial in uppercase to help seperatethem from the other text. This means that is the same as, , , etc… Even though it is not casesensitive, it is good practice to stay constant with what ever you pickthrough-out the HTML document.

   Q: Doesevery tag require a closing tag?

   A: No.As I mentioned earlier in this tutorial, not every tag requires a closing tag,but since there is no pattern to which ones require a closing tag and whichones don’t, it’s safer to include one if you don’t know.

   Q: Doyou have to enclose all parameters with quotes (“ ”)?

   A: No.There isn’t a pattern for this either, so once again, if your not sure if thereneeds to be quotes around something or not, it’s safer to put the quotes. Also,it’s good practice to stay constant with whatever you choose.

   Q: Doyou offer an advanced HTML tutorial?

   A: No.But we do offer an HTML TagReference that explains most of the HTML tags, and we also have DogGear.Net WeeklyFeatured Articles that show more advanced HTML tips & tricks.