The "M" Squad :: Basic HTML

This is the second part of our guide to HTML! This will tell you a lot of other basics, like the best ways to display images, how to align your texts and images, and creating lists.

<UL>
<LI><A HREF="http://www.acoolsite.com"> A Cool Site</a></li>
<LI><A HREF="#LINKS"> See my other links</a></li>
</UL>

About the "A HREF" tag

This tag lets you link to other files on the Web, other files in your directory, or even other parts of the page you're on! To link to other files on the Web you need a full URL, like the http://www.acoolsite.com we used in the sample box above. To link to pages in your directory, just enter the filename, and put "quotation marks" around it, to show that the file is in your directory.

How to jump further down or up on a page

This is another way to use the "A HREF" tag. First you must go to where the link will jump to, and name it. So if you want the jump to go to your Links for instance, then go down to the links part of your page and put in <A NAME="LINKS">, or whatever you want to call it. Then, to make a link to it on another part of the page, just type <A HREF="#LINKS"> Go to my links</A>. Be VERY sure to include the # sign before the name!

About the "CENTER" tag

The CENTER tag places EVERYTHING on the page so it is centered. This includes all pictures and every line of text inside the tag. It usually looks nice to have graphics centered, but sometimes texts that are centered can look sloppy or unattractive, so be careful when you use this. You can end centering with </center>.

About the "IMG SRC" tag

IMG SRC stands for Image Source. You can display images using this tag. All you have to do is list the picture source after "IMG SRC=". You can load pictures in 2 ways! You can load a picture from your own directory, and for that you just put quotation marks around the filename, so if the image was called picture1.jpg, then your tag would say <IMG SRC="picture1.jpg">.

There is another way to load a picture, but it is a LOT slower and it eats up other people's bandwidth, so we DO NOT suggest you use this unless the page author tells you to specifically. (Some authors DO allow it for link buttons and banners or things like that!) To load a picture remotely, you need a WHOLE URL of the image before you can load it. If the file was at http://www.anywhere.com/anyone/picture1.jpg, then your tag would say <IMG SRC="http://www.anywhere.com/anyone/picture1.jpg">.

Here are different parts of the IMG SRC tag:

About the "border" tag
If you use a picture as a link, it will have a border around it. When you use the "border" tag with your picture, you can change the size of the border, or turn off the border completely.

About the "width" tag
With this you can tell the browser how wide your image is, by number of pixels. This is good to use because if you specify the dimensions of an image, then the browser can reserve that space on the page for the picture, and figure out how the texts and other contents will load with that picture. This way people can start reading your pages sooner, and they do not have to wait for every single thing to load. But you HAVE to use both width and height tags on images to make that loading work!

About the "height" tag
This lets you tell the browser how tall your image is, also by number of pixels. To find out why this is good to use, read about it under width.

About the "align" tag
This is a way to load a picture in a certain place on your page. If you want your picture to line up on the left or the right side of the page, then put "left" or "right" after the "align=" and the picture will load there, with the text wrapping around it.

About the "alt" tag
This tag lets you enter a text description of your picture, and that text will show before the picture is loaded. This is good to use because it tells people what the picture is, and they do not have to wait for everything to load to know what each item is.

About the "UL" tag

UL means Unordered List. This tag lets you create a bullet list of items. You end the list with </UL>. Your bullet list will look something like this:

Sailormoon
Chibimoon
Tuxedo Kamen

If you replace "UL" with "OL" (Ordered List), then you will get a list with numbers instead of bullets, like this:

Sailormoon
Chibimoon
Tuxedo Kamen

About the "LI" tag

LI is the abbreviation for Line Item. This is how you mark each item in your list. This works for Unordered (bullet) Lists AND Ordered (numbered) Lists. You close the tag with </li>.

We remind you again to tell us what need to see! If you feel something was not covered here that should be here or if you feel that one of these could be explained better then E-mail us and tell us what you need!

Basic HTML :: Page Tips

Contents and designs � 1998, The "M" Squad.