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!
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.
<img src="painting.gif">
...
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.
<img src="painting.gif"
width=64 height=37>
...
HTML Img Code
Align Picture
The align modifier puts the picture where you want it. Your choices are LEFT, RIGHT or CENTER.
<img src="painting.gif" width=64 height=37 align=right>
...
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.
<img src="painting.gif" width=64 height=37 align=right alt="Palette of a great artist" title="Palette of a great artist">
...
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.
<img src="painting.gif" width=64 height=37 align=right alt="Palette of a great artist" title="Palette of a great artist">
See, I can make my own web page with web page graphics and text.<br>
...
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.
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?
<img src="alien.gif" width=75 height=125 alt="Portrait of the Author" title="Portrait of the Author">
...
