Images make your pages more stimulating to browse. Most people like the colorful graphics. On the other hand, pages that have very large graphics, or too many graphics, take longer to load, particularly for users connecting to the Internet by modem. The trick is to strike a balance that will make your pages stimulating but will not make them take 5 minutes to load!
Graphics are not actually part of a web page; they are stored as separate files on the web server and sent to the browser to be displayed in the approriate part of the page.
What is put into the web page (which is a text document, remember) is a hypertext link which tells the browser where the image is and what it’s name is. The browser can then collect the image and display it.
The hypertext link which collects and display a graphic looks like this…
<IMG SRC=”image_URL “>
The part of the HTML tag displayed in red above, image_URL, is the part you will change to load a specific graphic.
Right, enough theory. Let’s do it!
Step 1 . Inside the webschool folder on your hard disc is a file called construction.gif. The graphic shows some construction items and can be used to illustrate the fact that the page which displays it is still under construction. The graphic is in GIF format (more about this later).
Move this so that it is in the same folder as the web page that you want to display it.
You can search the internet for a suitable web construction graphic if you want.
Step 2. In your web page, at the point where you want the image displayed, put this HTML tag; <IMG SRC=”construction.gif”>
Step 3. Preview your page. Bet you’re not satisfied, right? There are different ways of aligning graphics, that’s why. So you might want to change this in Step 4.
Step 4. You can configure the graphic to be aligned in many different places. You can use the <CENTER> and </CENTER> to CENTER your graphic. See below for 4 other ways to align your graphic.
<IMG SRC=”construction.gif” ALIGN=”CENTER”>
Click here to see an example using this tag.<IMG SRC=”construction.gif” ALIGN=”TOP”>
Click here to see an example using this tag.<IMG SRC=”construction.gif” ALIGN=”BOTTOM”>
Click here to see an example using this tag.<IMG SRC=”construction.gif” ALIGN=”LEFT”>
Click here to see an example using this tag.<IMG SRC=”construction.gif” ALIGN=”RIGHT”>
Click here to see an example using this tag.
Above you’ll notice that it doesn’t close off at the .gif”> but continues on saying align=”CENTER”>. The “>” is moved over and ends later in the command.
Step 5. One of the best sources of web compatible graphics is the web itself.
I have put some graphics on your floppy disk, ask your tutor how you load them..
