Using Graphics in HTML

Using Graphics

Tags Covered

[Placing Images] - [Examples]

First, let me tell you...

Graphics are very good, when used moderately. Making your site look like a video arcade might seem cool to you, but to someone visiting your site and loading your page with ALL those graphics, it will seem awful. I know! I've hit the stop button in the middle of one of those pages and never went back to it. Graphics are great, but use them only when you feel it's necessary. You always want a fast loading page.

NOW...Let's have some fun!

Placing in-line images into your Web page is easy, we will add one like this:

Using your index.html file, it doesn't have to look like this,
but you should edit it to include the line in red:
<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>
<H1>Your Heading</H1>
<CENTER>Some very witty remarks,<BR>or very serious text here...<P>
<I><B>And some new text here...</B></I></CENTER>

<IMG SRC="test.gif">

</BODY>
</HTML>

This is the BASIC tag used to insert an in-line image! Notice this tag does NOT have an ending tag? It is a kind of "Place Holder" for your image.

Using your index.html file, it doesn't have to look like this, but you should edit it to include the line in red:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> <CENTER>Some very witty remarks,<BR>or very serious text here...<P> <I><B>And some new text here...</B></I></CENTER> <!-- In-Line Image start --> <IMG SRC="test.gif"> <!-- In-Line Image End --> </BODY> </HTML>

<IMG SRC="name of picture file">
Now, you WILL need the image in your folder (directory) before you'll be able to see it...so we made one for you to use. To save it to your system...put the cursor on the image below and "Right-Click". You will get a menu. Choose "Save Image As.." Or "Save Picture As.." from that menu, and find your folder (directory) with your HTML files...and save it there.

You may use the <CENTER></CENTER> tags around the image tag too! Like so...

<CENTER><IMG SRC="name of picture"></CENTER>

Now that you know how to place an image on your page...there are a few attributes for the IMG tag. You will include them within the Tag itself:


SRC="..." Specifies the image name or URL of the image.


ALT="..." A text string to be displayed on browsers that
              do not support in-line images.


BORDER="..." Specifies the width of the border around the
                 image in pixels.  If BORDER="0", no border
                 is displayed even around images used as links.


ALIGN="..." The alignment of the image.  With values of:
                LEFT or RIGHT which aligns the image to the
                specified side of the page, and any text is wrapped
                around the image.
                TOP, BOTTOM, MIDDLE, TEXTTOP, ABSMIDDLE, BASELINE,
                and ABSBOTTOM
                Indicates the vertical alignment of the image with
                respect to text or other items on the same line.


WIDTH="..." The width of the image...
                if it's not the actual width, the image will be
                scaled to fit the indicated value. The image size
                can be found by viewing the image in your browser.


HEIGHT="..." The height of the image...
                 will also scale the image if it's not the
                 actual height.

[Back to the TOP] - [Back to the Tutorial List]

Using those attributes are easy. Here are some examples:

ALIGN="Right"

<IMG SRC="test.gif" WIDTH="120" HEIGHT="120" ALIGN="Right" BORDER="0" ALT="Test GIF">

Test GIF Aligns the image to the right and what you type after it will wrap around it easily! This makes it look like newspaper and magazine publications. You can put a picture of yourself there and tell everyone about you, and what your hobbies and interests are. A picture of your pet, husband/wife, boyfriend/girlfriend, or even your computer! Use your creativity and play with your HTML positioning, and everything will fall into place! Sometimes, it DOES take a bit of time to make it just right. But stick with it, and if you have any questions, feel free to e-mail us and we will be glad to assist you.

ALIGN="Left"

<IMG SRC="test.gif" WIDTH="120" HEIGHT="120" ALIGN="Left" BORDER="0" ALT="Test GIF">

Test GIF Aligns the image to the left of your screen and what you type after the image will wrap around it just like it did above!

ALIGN="Top"

<IMG SRC="test.gif" WIDTH="120" HEIGHT="120" ALIGN="Top" BORDER="0" ALT="Test GIF">

Test GIF Aligns the text to the TOP of the image!

ALIGN="Middle"

<IMG SRC="test.gif" WIDTH="120" HEIGHT="120" ALIGN="Middle" BORDER="0" ALT="Test GIF">

Test GIF Aligns the image to the middle of your image!

ALIGN="Bottom"

<IMG SRC="test.gif" WIDTH="120" HEIGHT="120" ALIGN="Bottom" BORDER="0" ALT="Test GIF">

Test GIF Aligns the image to the bottom of your image!

[Back to the TOP]

[ Back to Tutorial List ] - [ Next Lesson ]

[ Home Page | HTML Bookstore | Free Web Graphics | Our Friend's Pages ]

[ E-Mail Us ]

This page hosted by

Get your own Free Home Page

This Site Created By JPWeb Consulting ©1996-2004 - All Rights Reserved

This Site Created By JPWeb Consulting
©1996-2004 - All Rights Reserved