Colors, images, pictures, and graphics bring a lot of flavors to a web page. As you already know, a web page is in fact a text file equipped with HTML tags that a browser is asked to analyze, interpret, and render a result. Unlike in a word processor, a picture cannot be included on a web file. Instead, you tell the browser where the image is located, the browser will try to find it and then display it. This, of course means if you provide the wrong address, I mean if you don't clearly state where the picture is located, or if the browser doesn't find the picture where you said it was, there would be an error on your page.
There are two primary sources you can use to direct the browser as to where the picture is: the graphics could be on your server or on another server on the Internet. Either way you have to clearly provide the address.
If you will use a picture on your server, you should store it first. There are various ways you can collect picture for your web pages. You can get them from various pages on the Internet. You can use a (commercial) graphics software to create your own pictures. You can buy a graphics package that ships with a lot of pictures ready to be used. Make sure the picture is in a format (it has a file extension) that the browser can read (supports).
Once you have the picture, or to use a picture on your web page, you use the <img
src="Location"> combination tags.
The Image Source
The first and most important information the browser needs to know about the image you want to insert is its (physical) location. To provide it, you give the source with <img
src="URL">. URL means the name of the image you provide, including its extension
Here is an example:
The ALT Attribute
The image tag uses a lot of attributes to give it particular specifications.
Since the graphics you use usually download relatively slowly depending on the machine used by your visitors, it is recommended to provide an alternative text to let the user know what is coming up. This alternative text also helps in case your source is not correct or the image is not available. This same alternative text pups up when a user places the mouse pointer on the image.
To provide the alternative text, you use the ALT attribute. Here is an example:
<img src="image.jpg" alt="Real Madrid">
The ALIGN Attribute
When you type a text close to the graphic you use, sometimes you want the text to have a particular relative position with respect to the image. That's when you use the ALIGN attribute. You can relatively align your text to the top, middle, bottom, right, or left. I encourage you to experiment with all of them. Here is an example:
<img src="image.jpg" align="top">
The Image Dimensions
You have probably realized that when a web page with undocumented graphics downloads on your browser, the text seem to animate, that's because the browser doesn't know and can't predict the height and the width of your image. To help the browser, you specify the height and the width of the image, in pixels.
Here is an example: <img src=image.jgp" height="48" width="34">.
The BORDER Attributes
You can surround your image with a border specified in pixels. Here is an example: <img
4. Background Graphics: You can also use an image or graphics as a background for your web page.
Let's say we want to use this graphics as our background. First make sure you know the directory where this image is stored. Then you need to specify it in the <body> tag with <body
If you don't want the background graphics to move when the user scrolls down and up, provide a bgproperties attributes as "fixed".
An example is: <body background="bgimg.jpg" bgproperties="fixed">