images

Images

Inserting an Image

Adding Horizontal Rules

Resizing an Image

Adding a Title to Your Image

<HTML>
<HEAD>
<TITLE>My Tutorials Page</TITLE>
</HEAD>
<BODY>
<IMG SRC="rainbow.gif" BORDER="0">
</BODY>
</HTML>

To insert an image on your page place the bold words in the textarea below anywhere you want an image to be. Add a <P> or <BR> before the image code to make it start on it's own line.

<HTML>
<HEAD>
<TITLE>My Tutorials Page</TITLE>
</HEAD>
<BODY>
<IMG SRC="rainbow.gif" TITLE="Glitter Rainbow" BORDER="0">
</BODY>
</HTML>

When a visitor points their cursor at the image your title will appear. Kind of like a tooltip that is in Windows. To add a title or alt to your image just place this title="your description" inside your <img> tag as shown in the code below.

<HTML>
<HEAD>
<TITLE>My Tutorials Page</TITLE>
</HEAD>
<BODY>
<IMG SRC="rainbow.gif" BORDER="0" width="70" height="45">
</BODY>
</HTML>

You can change the size of an image just by specifying a new height and width in pixels. To resize an image type width="a number" height="a number" in the <img> tag as shown in the code below.

<HTML>
<HEAD>
<TITLE>My Tutorials Page</TITLE>
</HEAD>
<BODY>
<HR SIZE="4" WIDTH="80%" COLOR="#FF51AC" ALIGN="CENTER" NOSHADE>
</BODY>
</HTML>

One graphic element that is completely supported by the majority of the browsers is the horizontal rule.
It's great using for a divider or whatever you'd like to use it for.

You can add a border to your image if you want to by copying the bold text into your image code as shown below. You can change how big your border is by changing the number 1px to 2px etc. Also you can change the border from being solid, dotted, ridged, and so on. You can also change the color #000000 to whatever color you want.

Adding a Colored Border to Your Image

SIZE=4 - where 4 is the rule's height in pixels.
WIDTH=80% - where 80% is the width of the rule as a percentage of the document's width.
COLOR="#000000 - where #000000 is the color of your rule.
ALIGN=CENTER - where center is the alignment of your rule.
NOSHADE - to create a solid bar, with no shading.

<HTML>
<HEAD>
<TITLE>My Tutorials Page</TITLE>
</HEAD>
<BODY>
<IMG SRC="rainbow.gif" style="border: 1px solid #000000">
</BODY>
</HTML>