Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

Basic Web Page Writing Step 11
Adding An In-Line Graphic


In step 10 you saw how to insert a graphic image in your page. There are times when you may want the graphic image to be placed in a line of text.


This step will show you how to place an image IN-LINE with text and also use some new align commands to fine tune the position of your graphic image. You will also see how to modify an image for users who do not have a graphic browser.

Placing An Image In A Line Of Text

You will still use the <IMG SRC="..."> command, however you will just place it in the section of text where you want the graphic to appear. You can use the USFLAG.GIF for experimenting with this or use any other graphic you have.

By examining the following line, you should see how the In-Line options works.

This is a picture of the United States Flag. <IMG SRC="usflag.gif "> Home of the Free!!

Would produce the following...

This is a picture of the United States Flag. Home of the Free!!

Aligning The Image Within The Text

You can also specify how the picture and text line up. In the example above, the picture is ALIGNED with the bottom of the text. You can align the picture with the top or middle of the text as well.

The Options to use are:

Sample of the ALIGN=MIDDLE option:

This is a picture of the United States Flag. <IMG ALIGN=MIDDLE SRC="usflag.gif "> Home of the Free!!

Would produce the following...

This is a picture of the United States Flag. Home of the Free!!

Sample of the ALIGN=TOP option:

This is a picture of the United States Flag. <IMG ALIGN=TOP SRC="usflag.gif "> Home of the Free!!

Would produce the following...

This is a picture of the United States Flag. Home of the Free!!

The above examples should give you a good idea of each of the options available. The placement of the IMG SRC tag can be anyplace in the line of text, start, middle or at the end of the text.

Using the ALT Text option

There are some viewers of your page that cannot display graphic images. There are also some users who turn of the image loading feature of their browsers so that pages load faster. The ALT option is a way for you to tell the viewer what they are not seeing in these cases.

The ALT="..." option lets you specify text to be displayed instead of an image.

For example:

<IMG ALT="Picture of A Red Line" SRC="redline.gif ">

This would be displayed as

Picture of A Red Line

When the viewer clicked on the picture Icon, the Red Line would appear.

Try using in-line graphic images and test the Align and Alt options. Use any graphic image you have.


In step 12 you will get your first look at linking. You will see how to create a link to your e-mail address."

STEP 12 -- Address and E-Mail Links



Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

created by Larry Curreri,

© 1996 l_curreri@yahoo.com
Visit My Home Page

last modified: January 14, 2002

This page hosted by Get your own Free Home Page