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 theimages 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 andvspace 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.

Permanent link to this article: https://www.xenno.org/110/insert-picture-and-images-in-html/

21 comments

Skip to comment form

  1. I like that you put excellent content out that is clear and well-written.

  2. Its like you read my mind! Great Post 😉

  3. 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!

  4. Interesting take you have on this. What do you think of the comments above? Is he/she being serious?

  5. 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!

  6. Hi, I also have got mine own blog and I would like to write on it what I found on yours. You wrote interesting things and I want to use your words on my blog. Can I? Thanks.

  7. 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!

  8. Good afternoon that was a amazing post. I want to thankyou Because you publishing it. I’ll defenitely check back.

  9. I’m strongly about it and love learning more on this topic. When possible, since you gain expertise,keep writing and happy blogging!3$4

  10. 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="”>

  11. We are a group of volunteers and starting a new scheme in our community. Your site provided us with valuable information to work on.You have done an impressive job!

  12. this post is very usefull thx!

  13. 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!!

  14. 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.

  15. Hello, your weblog does not show correctly on the ipad2. Could you fix this?

  16. 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!

  17. 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!

  18. Heya, your recent Content concerning Insert Picture and Images in html XeNNo. Insightful info. All of the best. 🙂

  19. You could certainly see your enthusiasm in the work you write. The world hopes for even more passionate writers like you who aren’t afraid to say how they believe. Always go after your heart.

  20. Thanks for Sharing. I like it blog and yours articles ! I’m gonna share it on tweeter 🙂

Leave a Reply

Your email address will not be published.

CAPTCHA *

This site uses Akismet to reduce spam. Learn how your comment data is processed.