September 07, 2012

Html Adding Images To Our Pages Or Website


Now we know the text is very important, but it can only take you so far. I'm sure that up until now, if anyone has seen your pages they're asking "Where are the pictures?". Yeah, I know our visitor is dying to see the latest picture of us and the family on our website, so this tutorial is about adding images to our pages or in our website.

Putting our images on a web page is simple. It's probably even simpler than it was for you to get the certain image onto your computer.
 The <IMG>, or Image tag is used when we want an image on our web page. When we use <IMG>, we don’t need to close it with a </IMG>. To tell the browser where to load this image from, we use the SRC, or source, attribute. It looks a lot like this:

<IMG SRC="ourimage.gif">


Note we can make a link with the <A> tag, like SRC=”ourimage.gif" if the image was in the directory above the current one, or SRC="image/ourimage.gif" it is us if our images in the directory

Because some browsers don’t load images, and some people turn them off, we need a way to show them what this image is. 

The solution? The ALT attribute! ALT is an optional (but highly recommended) attribute. When a browser doesn’t load an image, or when they are turned off, the text in ALT will be shown instead. In our <IMG> tag it's used a little like this:


<IMG SRC="ourimage.gif" ALT="This is our picture you can check us ">


You need more control over your image's positioning? Try using the ALIGN attribute on it.
The ALIGN attribute can be used to put an image in the left, right, middle, top, or bottom of our  page. There is more choices than you're used to? Let me explain.

If we add ALIGN="top" to our <IMG> tag,
the browser will align the top of our image to the top of the current line. ALIGN="bottom" aligns the image to the bottom of the current line, and ALIGN="middle" aligns our image to the middle of the current line.
Aligning our image to the left or right aligns it to the left margin, or right margin of the page.
Do you Got it? Ok, here's a little quiz in our mind. What will the following code do?

<IMG SRC="ourimage.jpg" ALT="Our image!" ALIGN="left">


If you said it adds the image ourimage.jpg to the current page with alternate text "Our  image" and left aligns it, So are you following my tutorial? Is this correct? Well I’m continue that you can understand

All right! The image looks great but...Hey! What's this border doing around my picture?
Oh yeah! We forgot about the BORDER attribute!

The BORDER attribute takes a number as an argument. This number will be the width of the border around your image. Quick, how do we get rid of the border with the BORDER attribute? Easy, we just set


<IMG SRC="myimg.gif" BORDER="0">


Now we've got an image on the page. But wait: why does the browser wait to load the image before displaying the rest of the page? Well, the browser doesn’t automatically know how big your image is. You can give it this information (and make your pages load faster!) with the WIDTH and HEIGHT attributes. 


We give to the WIDTH and HEIGHT attributes the width and height of our image in pixels. So it looks like this:


<IMG SRC="ourimage.gif" ALT="Our Images" HEIGHT=120 WIDTH=200>


Another benefit of specifying the WIDTH and HEIGHT in the <IMG> tag is that you can make sure that the proper space is left for your image, even if the viewer has images turned off.

Is the space around your image a little cramped? Try adding the HSPACE and VSPACE attributes to your 
<IMG> tag. These attributes add horizontal and vertical spacing around your image.

Want an image for the background of your page? Try adding the BACKGROUND attribute to the <BODY> tag. It's used a little like the SRC attribute to the <IMG> tag. Here's some example:


<BODY BACKGROUND="ourbackground.gif">


This would take ourbackground.gif and tile it in the background of our page. Be warned though, use the wrong background image and your viewers may be straining to see your text!

Let start again in another part of tutorial
Return to:

If you like to see our Flash template Design/Template Page goes here:
See all: Our Template

No comments:

Post a Comment

Share Us

| Guideinfoyou (Guideline and Learning tactics) © 2008- 2014 w/blogger. All Rights Reserved | Designed by Virgil R. Toling Jr |