Your first web page, a simple HTML tutorial. Basics, page construction. Saving and viewing.

Images

Basics | Formatting | Tables | Images | Linking | Resources | About | Examples | Exit Tutorial
Go to previous page

Go to next page

  Basics   Formatting   Tables   Images   Linking   Resources   About
  In the beginning...   Making your text look good   Positioning your text on the page   Adding images   to other pages and web sites   eBooks.
Free templates
  Info.
What next?
 

Images. Images as links. Background images.

The most important thing about images is their size.
Not the physical size of the image you see, but the actual size of the image file in kilobytes, (kb).

Big graphics will slow down the loading of a web page.
Most graphics tools will allow you to resize an image.
Generally, saving it to .jpg, will produce the smallest file.
With .gif files, however, you can also use background transparency.

Images are generally positioned on a web page using tables.
An image tag is placed within the table cell:

<table width="200" border="1" cellspacing="0" cellpadding="0" align="center">   Defines table
<tr>   Opens row
<td>   Opens cell
<img src="image_name.jpg">   Cell contents: image tag
</td>   Closes cell
</tr>   Closes row
</table>   Closes table

Example, (with no border)

Hi

The code:

<table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" width="50%">
<img src="images/webthing02.gif" width="73" height="42">
</td>
<td align="center" width="50%" valign="middle">
<font face="Arial, Helvetica, sans-serif" size="5" color="#FF0000"><b>
Hi
</b></font>
</td>
</tr>
</table>

Notes:
Images are usually kept in a sub directory, i.e.: images/
Specifying image size speeds loading.

Background images
If a small image is used as a background to a web page, it will be repeated in both vertically and horizontally across the page.
It is included in the Body tag, i.e.:

<body background="background.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


The are other options using Style Sheets.

 
Go to previous page top of page Go to next page
Building Web Pages
   
Basics | Formatting | Tables | Images | Linking | Resources | About | Examples | Exit Tutorial
build a web site, html tutorial, free html tutorial, html table tutorial, web page tutorial, html code tutorial, basic html tutorial, online html tutorial, tutorial on creating a web page, free online html tutorial, beginner free html tutorial, HTML tutorial, simple html tutorial, first web page, free web templates, web templates