How To HTML Code Images Pictures For Dummies

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.

More by this Author


Comments 4 comments

Darla 7 years 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 7 years ago from Adrian, Michigan

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!


Rickrideshorses profile image

Rickrideshorses 6 years ago from England

Thanks again, exactly what I'm looking for. Can you do some more on the next steps for HTML, please?


Johne604 2 years ago

reverse lookup cell phone free Your positions constantly have a decent amount of really kdbcdgakdfkk

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

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


    Click to Rate This Article
    working