My dear, in this Tutorial 3b, I will show u an extention to what we have learned last week, concerning putting images. Last week we learned the "img" tag, and inside the tag we also learned how to make a border, and to align it either left or right. This week, first, we will study the "vspace" and "hspace" attributes of the img tag. "hspace" refers to the horizontal space, and "vspace" refers to the vertical space. Study the page together with the coding.


This is putting 2 images together without any "hspace" or "vspace" attributes. So u see, they'll all join together.



This is putting the same 2 images together with "hspace" attribute. The value of the hspace here is 3, and u can increase/decrease the values. The value 3 refers to the space from all the borders of one pic, and that means that the space in between the two pics is 6. "hspace" is mostly used to separate pics that is on the same row.




This is putting the same 2 images together with "vspace" attribute. The value of the vspace here is 4, and u can increase/decrease the values. The value 4 refers to the space from all the borders of one pic, and that means that the space in between the two pics is 8. "vspace" is mostly used to separate pics that is on 2 or more rows.


Look at the following example using a combination of "hspace" and "vspace" attributes. Take note of the usefulness of these attributes in separating the pics. Refer coding for more understanding on how it's done.



NOTE: The "hspace" and "vspace" attributes are particularly useful when u need some space in between 2 or more images put together, or if u need some space in between the image and the wordings/paragraph.


Next, also regarding images, we will study abt the resizing of images, that is to make the image bigger or look smaller on the page. Please remember that if we change the size of the image, we are not changing the actual image that we keep in our angelfire account, but instead, we are only changing the size of how it should look on the page. (To change the size of the actual image, we need to use imaging programs like Adobe Photoshop, Photo Editor, etc. All these I can teach you separately if u have the programs at home. But we'll leave that for later.)
OK, take a look at this image, it look small isn't it?


Now we change one attibute of the image, either the width or height. Change one attribute enough, the other attribute will automatically change itself to match the 'width : height ratio'. Look at the coding and the image below after change.

Now the image becomes bigger, but becoz it's naturally smaller and not so high quality, so when it's enlarged it won't look clear. And on the contrary, if we make an image to become smaller, it will become clearer. ;)

Note: Like drawing lines with "hr" tag, we can also use pixel concepts to give values to the height and width attributes. For example, "height=263", or "width=197". But since u are not using the imaging programs, I suggest u leave this pixel concept out. Use only the percentage concept.


Umm, ok for this part dear? ;) Just study the coding, then everything will be easier to understand. OK, I'll continue with next part, 3c. Anh Yêu Em~!!!