HTML Tutor Image

Include the Best Web Page Graphic In Your Web Page

    The old saying "a picture is worth a thousand words" is really true when you make your own web site. Web page graphic images add so much to your web page, without taking up too much space (if you do it right).

    Web page graphics can cause problems. If your webpage takes forever to load, people leave. This usually happens when a graphic is just too large. Can you make the web page graphic smaller with the same effect? If you can, it loads faster.

    Plan your graphics and definitely get a good computer graphic program. The default size of your web page graphic should fit in your page without adjustments. Make sure your web graphic or picture is appropriate with your text!

more about images...



HTML Code for Pictures

    The <img> tag puts a web page graphic image on your web page. All it really needs is a filename with the SRC modifier. The graphic file can be in .GIF, PNG or .JPG file format. The JPG has more flexibility with colors, while the GIF can do transparent images and animated graphics.

index.htm - Notepad
...


<img src="painting.gif">


...
GIF image 64x37 - BrowserName





more about images...



HTML Img Code
Setting Dimensions

    Dimensions load your web page faster. Each time a page loads, your browser has to set aside space for each web page graphic. If it isn't defined, it guesses. Then, if it's wrong, it re-configures the screen space allowing for the web page graphic image, then moves everything around again.

    Your web page graphic size should match your dimensions for speed. This keeps the browser from having to calculate different dimensions. You can distort your picture if you use the wrong dimensions.

index.htm - Notepad
...

<img src="painting.gif"


  
width=64 height=37

>

...
GIF image 64x37 - BrowserName





more about images...



HTML Img Code
Align Picture

    The align modifier puts the picture where you want it. Your choices are LEFT, RIGHT or CENTER.

index.htm - Notepad
...

<img src="painting.gif" width=64 height=37


align=right

>

...
GIF image 64x37 - BrowserName





more about images...



HTML Img Code
Alternate/Title Text

    The alternate text does two things. First, if you hold your mouse over the graphic, your alt text pops up over your picture. Sure is cool HTML code. This worked well until the last few years, then the TITLE modifier replaced it.

    The second and probably most important, is to make sure someone with an older non-graphic browser also knows what is there. This modifier makes your page ADA compliant for our blind web surfers (or some of us 'iconically' challenged).

    Another side benefit; the Search Engines do not recognize your web page graphic, but will recognize your alt text and index it.

index.htm - Notepad
...

<img src="painting.gif" width=64 height=37 align=right


  
alt="Palette of a great artist"

  
title="Palette of a great artist"

>

...
GIF image 64x37 - BrowserName
Palette of a great artist




more about images...



Wrap text around your web page graphic

    There are several ways to wrap text around your graphic. The simplest method (by far), is to set the image tag with an alignment, then, without a code for line break, start typing your text.

index.htm - Notepad
...

<img src="painting.gif" width=64 height=37 align=right alt="Palette of a great artist" title="Palette of a great artist">


&nbsp;&nbsp;&nbsp;&nbsp;

See, I can make my own web page with web page graphics and text.<br>



...
GIF image 64x37 - BrowserName
Palette of a great artist
    See, I can make my own web page with web page graphics and text.



    The text wraps around the graphic rather nicely, doesn't it? If the text gets a little too close to the image, you can use an HSPACE modifier to add a little space in between the two.

more about images...



HTML Code for Animated Graphic

    When you read something, you often get a picture in your mind of the author. I wonder how many of you thought I would look like this?

index.htm - Notepad
...


<img src="alien.gif"

  
width=75 height=125

  
alt="Portrait of the Author"

  
title="Portrait of the Author">


...
GIF image 64x37 - BrowserName
Portrait of the Author


    How do we make a motion graphic? This is an animated graphic. All of the motion is contained within a single web page graphic file. This GIF file contains several pictures (16 in this case) and flips through them at a programmed rate. I use .

more about images...



Create New Folder