| GRAPHICS & TABLES IN A HTML SCRIPT |
In this chapter is told how to put pictures/gifs and how to use tables in a homepage script. This is the tags covered here :
HTML supports two kinds of graphic files : .jpg and .gif (With a maximum of 256 colors). A gif animation, a gif picture or a jpg/jpeg picture found somewhere on the web can be download to a harddrive. Rightclick on the graphics and the select : 'save as ..'. It is a good idea to have a Image Viewer to cut/resize the picture/animation. Too many KB graphics is a really bad idea because of the loading time of the page. A moderate amount of graphics is therefore advised.
The right way to put a picture on a page is : Load the picture in a image viewer. Resize the picture to the size it is desired to have on the home page. Note the height and width of the picture and use those pixel#´s in the code. (The picture will load faster if the height and width of the picture are the same as written in the tag). Then upload the picture to the URL using FTP. The code of putting a picture/animation in a HTML script is this :
Note that if the picture is an animated gif (a mini cartoon a.like) to resize it or change it will destroy its animated capabilities.
Note that in Netscape Navigator it is necessary to redefine font/style inside of the table tags.
<img src="delfin.gif" border="3" width="50" height="50"
align="right" alt="A delfin">
This tag gives this result :
Even though it is possible to write this code without height/width try as a principal allways to use height and width. The rest of the tag is optional.
img src="......."
This is the name of the picture file.
border="...."
This is the thickness of the border on the rectangle that will be visible. (The color of the border in case of a link is decided in the body tag).
height="...."
width="...."
This is the size of the picture (% can be used too. For example : height="50%" width="50%" would make a picture 1/4 size of the screen).
align="right"
The following words can be used : left, right, middle, absmiddle, baseline, bottom, absbottom. Right/left/middle is the most commonly used codes but try experiment with them.
The code tell where the picture will be placed. If three pictures for example are desired to be on the same line : Write three of the picture tags one after another using "left" on the two first, and "right" on the last picture (or any other combination of the align="...." code) . These tags would result in this :
(This text is written right after the picture tags)(Text written right after a picture tag in a script will sometimes be written next to the graphics. If the text is supposed to be underneath the picture use the <br clear="all"> or <p> tags).
alt="...."
This gives the not loaded picture a text inside of it.
It is possible to put 'air' around a picture with a very simple code. The code must be put inside of the <img .......> tag.
To give horizontal 'air' write : hspace="...." (use a number (pixels))
To give vertical 'air' write : vspace="...." (use a number (pixels))
A word on TABLE tags : Table tags can be used in a million different ways. If the principle is understood there is nothing this tag can not create ! A few suggestions and some trouble shooting on the <table> tag can be found HERE. Two simple table tags :
<table border="5">
<tr>
<td>This is a text with a table around it !</td>
</tr>
</table>
<table border="3">
<tr>
<td>This is #1</td>
<td>This is #2</td>
</tr>
<tr>
<td>This is #3</td>
<td>This is #4</td>
</tr>
</table>
<tr> indicate the start of a horizontal line of boxes.
</tr> indicate the end of a horizontal line of boxes.
<td> indicate the number of boxes in this line. <td>.....</td> results in 1 box, <td>.....</td><td>.....</td> result in 2 boxes in a horizontal line, etc. To create a new horizontal line of boxes underneath the top line of boxes repeat the <tr> ..... </tr> tag with the <td> ..... </td> tags inside (View the tag shown above to understand the concept).
border="3"
Border indicate the thickness of the surrounding frame (1 - 15).
The tags from above looks like this :
| This is a text with a table around it ! |
| This is #1 | This is #2 |
| This is #3 | This is #4 |
In this example the table is automatically sized to match the words inside.
A preset size for the boxes can be set :