Basic HTML Tutorial
In this tutorial we will cover only the basics, just the esentials to get you and your site up and going.
Contents of site:
Skeleton of an HTML Document
HTML stands for Hyper Text Markup Language. HTML is one of the easiest programming languages 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 and see 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. <HTML>). There are opening 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 to include one.
There are a few tags necessary for every HTML document (the skeleton of an HTML document). The following will show you the format of the skeleton and explain each tag:
NOTE: I numbered the skeleton to make it easier to refer to each line, but DO NOT number your lines when you make your HTML document.
The <HTML> tag is the first tag in your document. It tells the internet browser that it is reading an HTML document (without it, the browser would think it was viewing a text document).
We will not deal with the <HEAD> tag too much in this basic tutorial. It is used for frames, style sheets, META tags, and scripts. But we will only use it for our title.
This is the only tag we will use in the <HEAD> tag. It is used to make the title of the page (hence the name). The title of the page will appear in the blue bar across the top of your active window (the title of this page is "WestHost: Basic HTML Tutorial"). To use this tag, you type your title between the opening and closing tags.
<TITLE>WestHost: Basic HTML Tutorial</TITLE>
This is the closing <HEAD> tag.
The <BODY> tag is where the bulk of your web site will be. You will put all your text, images, and links between the opening and closing <BODY> tags.
Before you add your text, image, and links you need to define some parameters inside the <BODY> tag:
- TEXT - this will determine the color of your text through-out your page.
- LINK - This will determine the color of your links through-out your page.
- VLINK - This will determine the color of your visited links through-out your page.
- ALINK - This will determine the color of your active links through-out your page.
- BGCOLOR - This will determine the color of your background through-out your page.
- BACKGROUND - This will determine the background image you load through-out your page.
NOTE: None of these are required, 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 is not necesarry to use all of them. If you set a background image then you would not need to define a background color etc...
Example using BGCOLOR:
<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple" BGCOLOR="yellow">
Example using BACKGROUND:
<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple" BACKGROUND="image.gif">
NOTE: If you do not understand the "image.gif" from the BACKGROUND command, don't worry, we will cover images in the Loading Images section.
This is the closing tag for the <BODY> tag.
This is the closing tag for the <HTML> 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 start out new HTML documents with the skeleton (opposed to just filling it in as you do it). See if you can remember all the parts of the skeleton and go start your HTML document now, or copy and paste the code below (as long as you memorize it later).
Formatting tags are used to format your text. If you've ever used a word processor before, there are usually three buttons on the 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 already understand the concept of opening and closing tags, this won't be hard.
Bold has it's own tag: <B>. It works this way:
The text will become bold <B>now and will stop being bold</B> now.
Notice how everything between the <B> and </B> looks bold? That's all there is to it, just enclose everything you want bold in the bold tags.
The tag for italics is <I> (theres a pattern developing here). The same rules that applied to the bold tag apply to the italics tag:
The text will become italicized <I>now and will stop being italicized</I> now.
The same thing happened. Everything enclosed in the italic tag was italicized.
The last tag is the underline tag; (yes, you guessed it) <U>. The same rules that applied to the bold and italic tags apply to the underline tag:
The text will become underlined <U>now and will stop being underlined</U> now.
Once again, everything between the opening and closing underline tag is underlined (I told you this was one of the easiest programming languages to learn).
Now that we know how to change the look of your text, lets learn how to change the size.
Changing the size of your text is similar to changing it's appearence. There are six diferent tags we will use, <H1> through <H6> (largest to smallest). They work exactly like the <B>, <I>, and <U> tags. Just enclose the text you want it to change with the opening and closing tags.
<H1>This would be the largest text</H1>
<H2>This would be the second largest text</H2>
<H3>This would be the third largest text</H3>
<H4>This would be the fourth largest text</H4>
<H5>This would be the smallest text</H5>
So now we know how to change the appearance and size of our text, the only formatting tags left to cover are the <P> and <BR> tags. These tags are different than the other formatting tags. These tags change the texts hard returns and spacing of sentences and paragraphs.
What I mean by this is that HTML does not pay attention to an editors hard returns and spacing (I know this sounds pretty confusing but it's not). This is best explained by example:
Notice how the line ended after the <BR> tag and a new line started. It basically performs the duties of the "Enter" or "Return" key in a word processor. Without that <BR> tag, 'Line two' would stay on the same line as 'Line one' (HTML editors do not recognize traditional formatting. You have to tell them when to end the line and when to start a paragraph).
NOTE: Your HTML Editor will "wrap" your text. That means your HTML editor will fit your text to the computer screen. You do not need to type a <BR> everytime you think that the text is getting too long for the screen, only when you need the line to stop.
<P>This is a new paragraph.</P>
The paragraph tag puts a blank space above and below the text enclosed in it's tags. It is not completely apparent in the example above, but if you look at the text through out this tutorial you will notice all the paragraphs have a blank line dividing them.
The ALIGN command can be used within the <P> tag. It has three options (LEFT, CENTER, and RIGHT. LEFT is the default.).
<P ALIGN="CENTER">This paragraph will be centered</P>
These are the only formatting tags we will cover in this basic tutorial, if you're interested in learning more formatting tags, visit our HTML Tag Reference Page for a growing list of HTML tags.
In this section we will show you how to make bulleted and numbered lists.
The HTML tag for bulleted lists is <UL>. It stands for Unordered List. The HTML tag for a numbered list is <OL>. It stands for Ordered List. Both the bulleted lists and the numbered lists need another HTML tag to work; the <LI> tag. It stands for List Item.
- 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 these are the two most supported ways. If you are interested in finding out the other ways to make lists you can find them in our HTML Tag Resource.
Up until now everything has made sense. The bold tag was <B>, the italic tag was <I>, and the underline tag was <U>. Naturally you would make the link tag <L> right? Wrong, the link tag is <A>. It stands for Anchor. Theres a good reason they made it an 'A' instead of an 'L'. The <A> tag is used for so much more than just making links, but making links is it's most popular use.
The <A> tag can be used with the commands:
- HREF - This is used as Hypertext Reference, and links an HTML document to another HTML document. This can be linked to a WWW address, HTML file, or NAME.
- NAME - This is used for making the anchor the target of a link.
We will start with the HREF command. The three most popular uses of the HREF command are links, E-mail links, and downloads. We will give an example of each:
To make the above link, we started the <A> tag and then put an HREF command seperated by a space. HREF stands for Hyper REFerence, so we defined our HREF command by adding an ="http://www.weshtost.com". By changing that address, you will change the destination of your link.
|<A HREF="mailto:email@example.com">John Doe</A>
To make an E-mail link, all you have to do is define the HREF command starting with the command 'mailto:' followed by the E-mail address (i.e. mailto:firstname.lastname@example.org).
To make a link download a file just define the HREF 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 trying to download it.
The only other command left for the <A> tag is NAME. The NAME tag is used with the HREF command (I know this sounds confusing, but it will make sense in a bit). The NAME tag turns the <A> tag into a target. This means you can link not only to a specific page, but a specific part of a page as well.
The best way to explain this is by example. This tutorial is just one big HTML page. At the top I have links to the different sections of the tutorial, when you click on the links they just scroll down to the section you clicked on. I accomplished this with the NAME command.
First we need to make a target:
NOTE - In this example I've targeted an image, 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 link to 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 the target and link so it is more aparent how the NAME command works. Just scroll down below all the blank spaces to test the target out.
Now click the arrow and it will jump up to the target. The NAME command is extremly useful in a large HTML document.
NOTE - I made the link an image. You don't have to use an image. The most popular is to use text.
You can link to targets that are in a different HTML page by just including the address followed by the pound sign and name of the target (i.e. http://www.DOMAIN_NAME.com#TARGET_NAME).
There are two formats of images you may use with the internet; GIF's and JPEG's. JPEG's are high quality, but usually have a 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 (<IMG>). Just like the <A> tag, the <IMG> tag has commands you must define inside of the tag:
SRC - This is the SouRCe of the image. This would be the image's name or location if not in the same directory as the HTML page that is calling it.
WIDTH - Use this command to define the width of the image in pixels.
HEIGHT - Use this command to define the height of the image in pixels.
BORDER - Use this command to set a visible border around your image (set it to zero when linking images if you don't want a visible border).
ALT - The ALT command stands for ALTernate text. Use this command to place a short description on the image (used for non graphical browsers and backup in case your image does not load).
ALIGN - By adding this tag 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 the commands, we can learn how to put it together:
|<IMG SRC="logo.gif" WIDTH="239" HEIGHT="70"
You do not need to have the image in the same directory as the HTML page to load it. You may place an absolute address in the source command and pull an image from another site:
WIDTH="112" HEIGHT="40" BORDER="0" ALT="MICROSOFT
Making Image Links
Now that we can make links and load images, we can combine the two and make Image links. Image links are just images that are hyperlinked to another internet site, E-mail links, or downloads.
To make image links, start with the <A> tag, define it just like you would a text link, but instead of typing text in between the opening and closing tags, load an image:
|<A HREF="http://www.westhost.com"><IMG SRC="logo.gif" WIDTH="239" HEIGHT="70"
To make an image link for E-mail or downloads just modify the <A> tag like the Making Links section specifies.
This section will answer some Frequently Asked Questions about HTML. If you have any questions that are not covered with this FAQ, please fill out the Contact WestHost Form.
Q: Is HTML case sensitive?
A: No. I have typed all of the tags in this tutorial in uppercase to help seperate them from the other text. This means that <HTML> is the same as <html>, <HtMl>, <hTmL>, etc... Even though it is not case sensitive, it is good practice to stay constant with what ever you pick through-out the HTML document.
Q: Does every 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 which ones don't, it's safer to include one if you don't know.
Q: Do you 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 there needs 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: Do you offer an advanced HTML tutorial?
A: No. But we do offer an HTML Tag Reference that explains most of the HTML tags, and we also have WestHost Weekly Featured Articles that show more advanced HTML tips & tricks.