tags indicate two rows and the three opening | tags on each line represents three data cells (or three columns).
Adding Table Borders
Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:
Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example. So now your table will look like this:
A B C
X Y Z
Changing a Table's Border Color
You can change the color of a table border by simply adding the bordercolor attribute.
And here's what it would look like...
A B C
X Y Z
Adjusting Table Cell Spacing and Cell Padding
You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes.
The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.
This is what the table would look like now...
A B C
X Y Z
See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell.
Specifying a Table Width
You can specify the width of a table by using either a percentage or a pixel width.
Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly. Here's what it would look like.
A B C
X Y Z
As we mentioned, you can also set the table width using pixels instead of percentages. So instead of setting it to 100%, you could set it to 300 pixels:
The table would look like this:
A B C
X Y Z
Setting Column Widths
Sometimes you may not always want your columns to be the same size. If this is the case, you need to set values on your table data | cells. Again, you can set them by using percentages or pixel widths.
This is what this table would look like.
A B C
X Y Z
See how the column width for the first column in both rows is set to 70%. Notice there is no value set for the other 2 columns. If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space and they'll share it equally.
Since the table width is set to 300 pixels, and the first column is instructed to take up 70% of those 300 pixels (roughly 210 pixels), the other 2 columns divide the remaining 30% of the table (roughly 45 pixels a piece).
You could also have expressed the column widths of this table in pixels instead of percentages. The code would have looked like this:
A B C
A B C
See how the width of the columns in each row add up to 300 (210 + 45 + 45) -- which is the width of the table.
What's the Difference Between Using Percentages and Pixel Widths
Many people prefer to express their table width and column widths in percentages because that will ensure that the table takes up the same amount of screen no matter how big or small the screen resolution is.
If someone is using a 21 inch monitor to view your site and you have a table width set to 300 pixels, the table will show up very small on their screen. However if you set the table width to 70%, it will take up 70% of the screen no matter what size the person is using.
So it's really up to you to decide what's the best layout for your tables.
Specifying a Table's Height
You can also set the table height by adding the height tag to the table code.
Which will produce the following table:
A B C
A B C
Horizontally Aligning the Content Inside Tables
The content inside a cell is left aligned by default, but you can also center or right align the text as well by using the align attributes.
A B C
A B C
See how the first column is aligned to the center? You can also right align the columns by using the align="right" inside the | cells.
Vertically Aligning the Content Inside the Table Cells
So far we've kept the table cell alignment at the default, which is the middle. Notice in the above table that the A, B, and C are all three aligned in the middle of their cells. Well you can change their alignment to either top, bottom, or middle by using the valign (which stands for vertical align) tag:
A B C
A B C
I've set the table height to "250" so the alignment would be more noticeable. Notice that the A in both rows are aligned to the top. You can also align to the "bottom" or the "middle".
Creating a Left Navigation Layout With Tables
As we mentioned earlier, most left and right navigations are created using tables. All you do is create a table with one row, two columns and no border. Then align both of your columns to the top (using the valign tag) so your text will start in the top of the columns, not the middle. Then depending on if you're going to have a right or left navigation, you'll make one column significantly smaller than the other.
Here's a simple left navigation layout:
| Left Nav Links Here | Body Here |
And here's what it would look like:
Left Nav Links Here Body Here
Notice I set the border to "0" but it's still showing in the example. I just did that to show how the layout would look. If you set your border to "0" you won't see any lines around your table.
So there ya have it! That's a general overview of tables. There's so much more you can do with them, but if you can understand the basic layout, you'll be able to do so much with the design of your web site.
Don't forget to try the auto HTML table generator!
Return to Index | Download Tutorial | 12,000 MB Hosting - $7/mo
Inserting Images
Once you have the image you want to use you can insert it into your web page.
Next you’ll need to do is upload the graphic to your web server. Your web hoster will either provide the environment for you to upload your images or you'll have to use an FTP program.
If you need help with FTP, click here.
When you upload the graphic, make sure you pay attention to what folder you’re putting it into because that will affect how you write the HTML.
Let’s say you upload the graphic called "apple.gif" to your "images" folder on your web server. The image folder is located inside your "root" directory.
Your HTML code will look like this:
Now let’s say you have uploaded the graphic to the "fruit" folder/directory that is located inside of the images folder then the code would appear as:
The Alt Tag
If you want text to pop up when you run the mouse over the graphic, then you need to add the alt tag.
Specify Height and Width
If you want to adjust the height and width of the image then you need to use the height and width tags:
It is recommended that you always include the height and width of your images because it makes your pages load faster.
Adding a Border
To add a border to your image need the "border" attribute. It’s very simple:
The 5 represents the thickness of the border. The higher the number, the thicker the border. The number 0 is equivalent to no border. Or you could just leave the border attribute out if you do not want one.
Multiple Attributes
Let’s say you want your graphic to have a border of 2, be 100 x 250 pixels (height x width) and have an alt tag:
Please note that it does not matter what order you put the attributes in (border, alt, etc.). Just make sure you do not leave out any of the punctuation.
"Help, My Graphic Won’t Show!"
If your graphic does not show up and you receive the "broken image" icon, check the following:
Make sure the file is uploaded and is actually in the directory you are pointing to in your HTML code.
Check the case of the actual filename. If you saved the file as "APPLE.gif" but typed "apple.gif" in the HTML code then the image will not show. Case does matter.
Check your HTML code and make sure you have included all the punctuation.
Creating a Clickable Image
Linking images is helpful if you have buttons or banners on your site and you want the visitor to be taken to another web page or site when they click on the image. To accomplish this, use the following code:
The first part of the code tells the browser which site to go to and the second part, of course, tells it where the image is located.
Return to Index | Download Tutorial | 12,000 MB Hosting - $7/mo
Inserting a Background
If used properly, backgrounds can really enhance your site. If used incorrectly, they can make your site very difficult to read.
If you plan to use a "loud" background that you think is cool, be sure to keep your visitors in mind. Even though you may love it, it may be distracting for the average visitor and you certainly do not want a background that takes away from your text.
In general, try to use light backgrounds on dark text.
To insert a background color on your web page, use the following code INSIDE your tag:
You can specify any color, or you can use a hex value.
Inserting a Background Image
If you want an image for your background then you would use the background and image tag together:
Keeping in mind that "images/weave.gif" is the location of the graphic. So you’re telling the browser that the graphic is located in your images folder off the root/main directory. You can also use the absolute path to your image. For example, http://www.yourdomain.com/images/weave.gif
Return to Index | Download Tutorial | 12,000 MB Hosting - $7/mo
Understanding Hex / Color Values
Hex values are used for generating colors other than the standard reds, blues, greens, yellows, purples, etc. As you learned above, to specify a purple font you just use the tag .
But HTML doesn't understand colors like "sky blue" or "pea green" so if you want these kinds of colors, you need to specify a hex color value.
Understanding hex values is easy if you can grasp the basics. Just remember that the individual colors you will mix are always red, green, and blue and always in that order.
So with the 6-character hex code the first two characters represent the amount of red, the second two characters represent the amount of green, and the last two represent the amount of blue. Take a look at the chart below for the percentage breakdown.
0% = 00 60% = 99
20% = 33 80% = cc
40% = 66 100% = ff
So the hex color of ff3333 means 100% of red (ff), 20% of green (33) and 20% of blue (33)
So you'd use to specify this color on your page.
If you wanted all white then the hex color would be ffffff.
If you wanted a color that was mostly blue with a hint of red and green you could use the hex code of 3333ff (20% of red, 20% of green and 100% of blue).
Now if this is too confusing, or you simply do not care to learn how to mix colors, you can always use a hex color code chart to produce the colors you need.
View the HTML color code chart for a list of all the hex colors.
Return to Index | Download Tutorial | 12,000 MB Hosting - $7/mo
Inserting Bullets
You can insert bullets into your pages by simply using the (unordered list) and - (list item) codes.
- Bullet 1
- Bullet 2
- Bullet 3
The above code will create the standard, round bullet that looks like this:
Bullet 1
Bullet 2
Bullet 3
If you would like an open-circle bullet, you can change the code slightly by adding an attribute to the tag. See below:
- Bullet 1
- Bullet 2
- Bullet 3
This will create an open-circle bullet. See below:
Bullet 1
Bullet 2
Bullet 3
Return to Index | Download Tutorial | 12,000 MB Hosting - $7/mo
Indenting Text
To indent your text about an inch to the right, simply use the open and closing tag around the text you want to indent.
This text will be indented indented
See how the code makes the text in the paragraph below behave:
sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
This text will be indented indented
Return to Index | Download Tutorial | Free Web Software
Special Characters
Code Symbol Description
™ ™ Trademark
& & Ampersand
® ® Registered trademark
© © Copyright
† † Dagger
» » Right pointing double angle quotation mark
« « Left pointing double angle quotation mark
— — Em-dash
° 30° Degree
¼ ¼ Quarter
½ ½ Half
¾ ¾ Three quarters
· · Middle dot
¡ ¡ Inverted exclamation mark
Setting Horizontal Line Width, Size and Color
To set the width of your line, simply add a "width" attribute. For example,
will create a line that is 250 pixels wide. See below...
--------------------------------------------------------------------------------
You can also set the size of the line by inserting a value. So if you wanted a line that is 250 pixels wide and 6 pixels thick, you'd use the following code:
This will produce the line below:
--------------------------------------------------------------------------------
Lastly, you can control the color of the line by inserting the color attribute:
--------------------------------------------------------------------------------
You may also use hex colors to define the color of the line
HTML Code for Forms
Once the FormMail file is in place on your server, all you have to do is create a page with the form code to make it work.
Below you'll find the code for creating a form in which your visitors can fill out and the results will be emailed to your email address.
The form has the following fields:
Text box
Password Field (hidden text)
Check Box
Radio Buttons
Here is what the form will look like and below you will find the HTML code. You will need to change some variables (in red) to customize it to your own needs.
Your Name:
Password:
Please Place me on your mailing list:
What's Your Gender? Male Female
How Old Are You? 0-25 26-50 51 and Over
Comments:
You can insert default text here if you wish
Here's the code for the form you can copy and paste. Feel free to remove the HTML code for fields you don't need or adjust the various values to fit your liking.
Notice the red text. This is what you need to edit to customize the form.
1) The 1st line should be changed to the address of the FormMail script on your server.
2) The 2nd line should be the address of the page the user views after they submit the form. You may need to create this page.
3) The 3rd line is the email address the form results will be sent to.
4) The 4th line is the subject of the email when the form is sent to your address.
Drop Down Menus for Navigation
You can create a drop down navigation menu by using the code below. Simply copy the code into a text editor and edit the links accordingly.
When you're done, the drop down menu will look something like this:
Select an Option MSN Hotmail Google
Form BUTTON HYPERLINKS
Form Buttons can be used in place of Text and Image hyperlinks. However, NOTE; there are still many browsers in use (and therefore, visitors) that will not enable multiple forms on the same page - the choice is yours.
Referring to the samples below, all you have to do is insert your own URL or Relative Path in place of mine.
This form will take you to the top of the page.
This form button will open a page in another window, leaving this one on the screen (close the second window once you have viewed it).
Form buttons can also be used with JavaScript for a variety of results.
The Transition # list:
0 - Shrinking Box Changes Screen
1 - Growing Box Changes Screen
2 - Shrinking Circle Changes Screen
3 - Growing Circle Changes Screen
4 - Wipes Up to Clear Screen
5 - Wipes Down to Clear Screen
6 - Wipes Right to Clear Screen
7 - Wipes Left to Clear Screen
8 - Right Moving Stripes Clear Screen
9 - Downward Moving Stripes Clear Screen
10 - Right Moving Boxes Clear Screen
11 - Downward Moving Boxes Clear Screen
12 - Pixels "Dissolve" screen
13 - Horizontal Curtain Closing
14 - Horizontal Curtain Opening
15 - Vertical Curtian Closing
16 - Vertical Curtian Opening
17 - Strips away previous screen going Left-Down
18 - Strips away previous screen going Left-Up
19 - Strips away previous screen going Right-Down
20 - Strips away previous screen going Right-Up
21 - Horizontal Bars "Dissolve" screen
22 - Vertical Bars "Dissolve" screen
23 - Random Effect
A full example:
|
