Basic HTML For Newbies Page Three

by Doghouse Dan

This page has some graphical stuff which may or may not be of use to you. Again,
it's all fairly basic html. So cut and paste then do much better.

(8a) Gif's and Jpg's:

Not going to say much here since I'm not an expert but a few things I've picked up.
There are two types of picture format...
... gif's which are mainly used as buttons and animated pictures.
... jpg's or jpeg's which are your main picture format.
The gif files are larger in byte-size than jpg files.
Gif files do however process faster than jpg files of the same size.
What this does to your bandwidth bill I don't know ... sorry.
Whatever the format - make it as small as possible!
Thumbs should be about 100 x 75 pixels.
Main pics are fine with a maximum of 505 pixels on the long side.

(8b) Picture and Text Placement:

This text has been aligned to the right by aligning the picture to the left

This text has been aligned to the left by aligning the picture to the right

This text has been centered on the picture

This text has been aligned to the left and shunted away from the picture by using "hspace=50". Note that the 50 pixel space is on the left and right of the pic.

This text is obviously on top

This text is obviously on bottom

basic html for newbies for more control this text and picture have been put into two different cells of a table. This is a lot easier for formatting your page I reckon. Leave the table borders or scrap them ... it's your choice.

The code for each one is in the text box below.

Or you can look at the code for this page.

(1)

<img align=left src="bloody_tourist.jpg" width=75 height=131 border=0 alt="basic html for newbies">
This text has been aligned to the right by aligning the picture to the left

(2)

<img align=right src="bloody_tourist.jpg" width=75 height=131 border=0 alt="basic html for newbies">
This text has been aligned to the left by aligning the picture to the right

(3)

<img align=center src="bloody_tourist.jpg" width=75 height=131 border=0 alt="basic html for newbies">
This text has been centered on the picture

(4)

<img align=right src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=50 alt="basic html for newbies">
This text has been aligned to the left and shunted away from the picture by using
"hspace=50". Note that the 50 pixel space is on the left and right of the pic.

(5)
This text is obviously on top
 
<img src="bloody_tourist.jpg" width=75 height=131 border=0 alt="basic html for newbies">
 
This text is obviously on bottom

(6)
<table width=500 cellpadding=5 cellspacing=0 border=1 bordercolor=white bgcolor="">
<td width=100 align=center>
<img src="bloody_tourist.jpg" width=75 height=131 border=0 alt="basic html for newbies">
</td>
<td width=400 align=center>

for more control this text and picture have been put into two different cells of a table.
This is a lot easier for formatting your page I reckon. Leave the table borders or scrap
them ... it's your choice.

</td></table>

(8c) Arranging Your Thumbs:

basic html for newbies

A simple little arrangement using "hspace" to spread the pics out horizontally

basic html for newbies

A simple little arrangement using "hspace" to spread the pics out horizontally and "vspace" to shift the horizontal thumb up between the two vertical ones.

basic html for newbies

This uses a table with two rows and six cells

The code for each one is in the text box below.

Or you can look at the code for this page.

(1)
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">

<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=30 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=30 alt="basic html for newbies">


A simple little arrangement using "hspace" to spread the pics out horizontally

(2)
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">

<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=131 height=75 border=0 hspace=20 vspace=30 alt="basic html for newbies">
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">


A simple little arrangement using "hspace" to spread the pics out horizontally and "vspace" to
shift the horizontal thumb up between the two vertical ones.

(3)
<table width=500 cellpadding=5 cellspacing=0 border=1 bordercolor=white bgcolor="">
<tr>
<td width=33% align=center>
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
</td>
<td width=34% align=center>
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
</td>
<td width=33% align=center>
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
</td>
</tr>
<tr>
<td width=33% align=center>
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
</td>
<td width=34% align=center>
This uses a table with two rows and six cells
</td>
<td width=33% align=center>
<img src="bloody_tourist.jpg" width=75 height=131 border=0 hspace=20 alt="basic html for newbies">
</tr></td>
</table>

Written and contributed
by Doghouse Dan

DHD's Webmaster Resources

Back to VNWR