The Idiots' guide to html code (2)

This page will deal mainly with images, backgrounds, sound, tables, and frames. It will be updated as I have time.

Images

So, you want to use images? Good idea. Images are simple. The code is simply <IMG SRC="XXXX" WIDTH="YYYY" HEIGHT="ZZZZ">. XXXX is the source for your image (the name.gif or .jpg, etc.), YYYY is the width value in pixels, and ZZZZ is the height value in pixels. So, to have an image of the World Champions' logo, I would insert the code <IMG SRC="wchampslogo.jpg">, and it would turn out like this:

Notice on my code, I didn't input the height or width. If you don't input these numbers, the image will be the default size. Also notice that I didn't have to put the entire address for my image (e.g. http://www.fortunecity.com/tattooine/bester/101/wchampslogo.jpg). It is only necessary to type in the file name (e.g. wchampslogo.jpg). Also keep in mind that you can't have an image on your computer show up just because you input its file name. In order to transfer an image on your computer to your web site, you will have to use the upload option, available on most servers.


Backgrounds

You probably don't want to have just one solid color for a background; a background image enhances the web site. In order to put a background image on your page, use the code <BACKGROUND="XXXX">, where XXXX is the file name of the desired background. This code usually goes with the BODY BGCOLOR, TEXT, LINK, and VLINK codes. It does matter which order these codes go in. I have found that some ways of ordering these codes don't work. But I have found a good way of ordering the codes. This web site has the code: <BODY BGCOLOR=#000000 TEXT=#38B0DE LINK=#32CD99 VLINK=#FFFFFF BACKGROUND="slate.gif">


Sounds

Sounds are fun to play around with on the computer. There are two main ways to have sound on your page. One way is to have it play as a background sound, the other is to create a link to your sound. The second way is more popular for those who have complete sound pages; the first way is popular when you want a sound to automatically start up upon loading. Okay, the first method: Playing background sounds. Use these codes: <EMBED src="WWWW" autostart="XXXX" width="YYYY" height="ZZZZ"><bgsound="WWWW">. The EMBED SRC (WWWW) is the filename for your sound, as is the BGSOUND (WWWW). The autostart is whether or not you want the sound to automatically play upon loading. If you want it to automatically play, type in "true" for the XXXX. If you don't, type in "none" for the XXXX. The width and the height are optional and only tell your browser how big the player is going to be if you have the correct plugin. I recommend 140 for the width and 60 for the height. Here is an example of the first method, without having it automatically play:

Now onto the second method. This is good if you have a sound page. All you have to do is create a link, as learned in My previous HTML code page. For example, type in <a href="http://www.fortunecity.com/tattooine/bester/101/mission1.wav">We're on a mission from God</a> in order to create this link:

We're on a mission from God

This link will load up faster than the previous sound. This is only because your browser has already cached the previous sound; on a normal page, it won't be any faster. So now you know all there is to know about sounds.


Tables

I am going to try to the best of my ability to explain how to make tables. If you are more of a visual learner like I am, you can see demonstrations of tables HERE.

The <TABLE> and </TABLE> tags place a table into your html document. Within the two codes you can place the following tags:

<ALIGN> This specifies the alignment of the table in the browser's window. This does to a table the same thing that the <P ALIGN> tag does to text. Example: <ALIGN=right>
The <WIDTH> tag specifies the width of the table in pixels. Example: <WIDTH=120>
The <BORDER> tag specifies the width of the border around the table in pixels. Example: <BORDER=10>
The <CELLSPACING> tag is the spacing between the cells, again in pixels. Example: <CELLSPACING=12>
The <CELLPADDING> tag places space between the cell and its contents so that they aren't too close together. Example: <CELLPADDING=8>
The <BGCOLOR> tag is the color of the table's background. It uses the same color definitions as the regular background color. Example: <BGCOLOR=#FFFF00>
The <BORDERCOLOR> tag defines the color of the border, using the same color codes as the <BODY BGCOLOR> and <BGCOLOR> tags.

The <TD> and </TD> tags change the settings within each cell of the table. You can add the following tags within the <TD> tag.

The <ALIGN> tag specifies the horizontal alignment of the cell's content. Example: <ALIGN=left|center|right>
The <VALIGN> tag specifies the vertical alignment of the cell's content. Example: <VALIGN=top|bottom|baseline>
The <COLSPAN> is the number of rows spanned by the cell. Example: <COLSPAN=2>
The <ROWSPAN> is the number of rows spanned by the cell. Example: <ROWSPAN=3>
The <TR> tag defines a table row. It goes inside the <TABLE> tag.
The <TH> and the </TH> tags define a header cell in a row of a table. It goes inside the <TR> tag.

For examples on tables, go to a Table Examples Page.


Back to the Dave Continuum