Insert Picture and Images in html

This post is also available in: Romanian

Pictures may be the element you most wish to insert into your web pages other than text. Whether it is a photo or a graphic image, the HTML tag to do it is the same. Here’s an example of the <img> tag with its often used key attributes:

<img src=”images/my” alt=”MyPicture” width=”160″ height=”120″ hspace=”10″ vspace=”10″ align=”left” border=”0″ />

The SRC Attribute You specify the path of the image to be displayed by the <src> attribute. It can be a full URL such as

http://www.mywebsite.com/images/mypicture.jpg

or a location relative to the web page that displays the image. If the web page is

http://www.mywebsite.com/mywebpage.htm

then the relative path of the same image at the full URL is

images/mypicture.jpg

If the web page is

http://www.mywebsite.com/myfolder/mywebpage.htm

then the path of the same image relative to the page becomes

../images/mypicture.jpg

where “../” instructs the webserver to go up one folder level out of myfolder  and then into the images folder to obtain the picture.

The ALT Attribute Some browsers provide users the preference of turning off loading images, and your visitors may have chosen to do that. If you do not want to miss out communicating a key message conveyed by an image on your web page, you use the alt attribute to provide the text to be displayed by the visitor’s browser.

The Size Attributes The visitor’s browser will display your web page more quickly if you specify the image’s dimensions by the width and height attributes. You may specify values other than the actual size to scale the image. Normally you should not do this. Scaling up does not improve a picture, and scaling down does not reduce its size.

The ALIGN Attribute If you want text to wrap around the image instead of appearing just before or after, set this attribute to either left or right. Insert the img tag BEFORE the text that should wrap around the image. If you set the attribute value to left, the image appears on the left with the text on its right. Once the text flows past the bottom of the image, it will continue on as usual across the full width of the text column. If you want to break text wrapping before reaching the bottom level of the image and start new text under it, insert the line break tag

<br clear=”all” />

where you want the break to occur.

The Space Attributes Very likely you don’t want the image almost touching the text that wraps around it. You can easily add comfortable space around an image by setting the hspace and vspace attributes.

The BORDER Attributes If you want to add a black border around an image, include this attribute and set it to a number above zero. The value sets the border thickness. You may leave out this attribute or give it a zero value to remove the border. There is a difference between these two options, however. If you use an image as a hyperlink label, leaving out the border attribute will still put a blue border around the image to indicate that it is a link. Setting the attribute to zero removes the blue border.

Several Tips To ensure your web pages load quickly, the first thing you do is to optimize the images. Use the JPEG format for photos and GIF for graphics. Do not make them bigger than necessary. You may enclose an image by the <p> </p> tags to have it well separated from text above and below it. If you simply want to add a horizontal line between blocks of contents to introduce a more visible break, you don’t need to create an image. Just use this HTML tag:

<hr align=”center” width=”100%” size=”1″ noshade />

This adds a horizontal rule, 1-pixel thick, across the full width of the text column, centered and without shading. If you want the width to be 100 pixels, leave out the “%” symbol. The line will be shaded if you leave out the word noshade.

20 thoughts on “Insert Picture and Images in html”

  1. FINALLY!!!
    Just came to this site from Yahoo, and not going to lie, it’s just brilliant – JUST what i’ve been trying to look for!

    Really hope you’re going to keep this place updated – just made a note so i can look again soon 😀

    Thank you again mate – sorry if the english doesnt make any sense, I am Belgian natively but trying to improve my English so THANK YOU!

  2. You make blogging look like a walk in the park! I’ve been trying to blog daily but I just cant find writing material.. you’re an inspiration to me and i’m sure many others!

  3. I dont know what to say. this is definitely one of the better blogs Ive read. Youre so insightful, have so much real stuff to bring to the table. I hope that more people read this and get what I got from it: chellolls. Great job and great site. I cant wait to read more, keep em comin!

  4. Nice blog :), We Like to Honor it by Linking to it from Our Blog. Here is a Quality Page You Might Find Interesting that we Encourage You to Check Out: <a href="”>

  5. You are so funny!!! I’ve become obsessed with your website and I spend most of my work hours reading all your archives. And I made an account JUST to post comments. I wish I’d found you sooner, and I wish you posted as much as you used to! You must be constantly busy now though because you are so famous!!

  6. Generally I don’t learn post on blogs, but I wish to say that this write-up very compelled me to check out and do so! Your writing taste has been amazed me. Thanks, very great post.

  7. It’s appropriate time to make some plans for the future and it’s time to be happy. I have read this post and if I could I want to suggest you few interesting things or advice. Maybe you can write next articles referring to this article. I wish to read even more things about it!

  8. You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complex and extremely broad for me. I am looking forward for your next post, I’ll try to get the hang of it!

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.