How To Add Images With HTML

I wanted to talk about the image service Flickr in some detail as a way to store images, but that generated a lot of questions.  While Flickr is a great service to store and insert images into a blog, it will autogenerate some HTML code for you to embed.  SO let's talk about that code, that you can write yourself to insert photos or graphics in any blog or website.

Images can be used to make a blog more unique.  They're a great way to add understanding, context, value or visual impact to a blog or post, and readers really respond to images.

The HTML code for inserting an image is the same, regardless of if it's a picture, photograph, or animated image like a GIF.  Let's say we have an image of a puppy, and let's say it's called something like "puppypicture.jpg."  Here's how to put it on your blog.

1.  Get the file onto a web server somewhere, so it's online, instead of just on your computer.  We'll talk more about services like Flickr later.

2. The HTML code is something similar to this:

<img src="http://www.yourwebsite.com/puppypicture.jpg" width="400px" height="400px" alt="my puppy dog" />

The SRC tag tells your web browser where to find the image and what it's called.  The HEIGHT and WIDTH tags specify the size of the image in pixels, and the ALT tag provides a text description that browsers can see

You can find images for your website in a lot of ways.  You can use a digital camera to take your own pictures, or you can use some stock photography on the internet.  iStockphoto is a great place to look for great images, and it's very affordable.

If you want to know more about digital cameras, you can check out some of our how to guides over at the digital magazine, Ions

If you liked this article, then please subscribe to our YouTube Channel for our Blogger and WordPress video tutorials. You can also find us on Facebook, and Twitter