create your own

How To HTML Code Images Pictures For Dummies - 30 Day Challenge 10/100

69
rate or flag this page

By Ding.A.Ling123

30 Day Challenge

This hub is part of my 30 day challenge. To learn more about the challenge search the hubpages forums.
This hub is part of my 30 day challenge. To learn more about the challenge search the hubpages forums.

HTML Coding Images

This is a basic guide for beginners and/or dummies to learn how to HTML code images into your blog or webpage.


Coding An Image

When you have a blog or website you have to be able to add pictures so knowing how to code images is a must!

So, let's get right to it...

An image code looks like this:

<img src="image source">

So, if you have an image that is hosted online, and the URL of the image is say: "http://www.photothing.com/12345" then your image code will look like this:

<img src="http://www.photothing.com/12345">

If your image is saved on your computer in this location; C/MyPhotos/Picture then your code will look like this:

<img src="C/MyPhotos/Picture">

Just remember, the code for images is image source but shortened down to "img src" and remember to close your code (>).

Changing The Size Of The Image

To change the size of your image you have a few options...

Your first option is to change the size of the image by percentage. Like this:

<img src="imagesource" width=45%>

Your next option is to change the image size by pixels. Like this:

<img src="imagesource" width=1000 height=1200>

Insert your "imagesource" and try this out with different percentages and pixels, and see how it changes and what you like.

Photo Alignment

You can change the alignment of your image by adding this tag; "align="

Such as:

<img src="imagesource" size="50%" align="center">

Test this out as well and see how it works for you.

You can align; center, left(default), or right.

Thanks

Thank you for reading my hub and good luck with your future web projects.

Please feel free to suggest/ask for new hubs on HTML coding, and keep an eye out for my new upcoming HTML hubs.

Print   —   Rate it:  up  down  flag this hub

Comments

RSS for comments on this Hub

Darla  says:
3 months ago

Hello,....I have a web site I built and published useing a host company. I built this in Publisher. ( the only web builder I have ) The web page loos nice and I have backround music. But now I want to learn how to make pictures fade in and out of eachother ( flash ) How and what codes can I use to do this from a publisher file. I center the page now by opening each page in notepad and re-editing the alliment codes in the body text. Can I do sorta the same for flashing pics?? Help

knlub2 profile image

knlub2  says:
6 weeks ago

TRYING to figure out how to add html to my blog... i get the code generated, copy and paste it into my blog, but when i click finish, all that comes up is the coding itself instead of the actual thing im trying to put in... dont get it!! am I putting the code in the wrong spot? is there a specific place for html coding? please help!! thanks!

knlub2 profile image

knlub2  says:
6 weeks ago

TRYING to figure out how to add html to my blog... i get the code generated, copy and paste it into my blog, but when i click finish, all that comes up is the coding itself instead of the actual thing im trying to put in... dont get it!! am I putting the code in the wrong spot? is there a specific place for html coding? please help!! thanks!

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

working