Useful HTML Code for Bloggers to Work with Images

 

As bloggers, it is so important to work with images on your blog post. Today, we will talk about HTML code for bloggers to work along with images. If you are a newbie, you will find this super helpful, cause when I first started blogging, I wished someone would have a post just like this!  

HTML code for images for bloggers-04
HTML code for images for bloggers-04

Adding an image

Include an image in your post. Replace the image URL with your own URL. You will need to have this image uploaded somewhere online. Describing your image helps with SEO

<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/>

Image with links

For adding a link to a certain image. Replace the image URL and link with your own

<a href="http://www.yourlink.com"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

Image link to open in a new window

<a href="http://www.yourlink.com" target="_blank"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

Insert a floating image

Want your image to the left or right of a paragraph? Use this and edit the align=”right” with align=”left” if required.

<img title="title text" src="http://yourimageurlhere.com/image.gif" alt="alt text" width="100" height="150" align="right" />

Aligned image within text

By default, an image placed with text will align with the bottom. Alternatively you can choose “top” or “middle”.

<img title="title text" src="http://yourimageurlhere.com/image.gif" alt="alt text" width="100" height="150" align="top" />

Image with width and height

You can change the width and height of the image if you need to, however it’s usually best to resize your image prior to adding it to your site. You can specify the width and height below for browser compatibility. Change the width and height values to those of your actual image

<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image" width="450" height="600"/>

Align Image to Left or Right of Paragraph

If you want to place your image to the left or right of a paragraph, use the following code, replacing “left” with “right” if you like

<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image" align="left"/>

Now that you are a pro in using images for your blog now! You can rock the online world with your coding skills!! Woohooo!

 
Code+DesignArpitha Sylvester