More HTML Tips: DIV Tags

Hi, I'm Shelly from FotoDesign Shelly and today I'm happy to be doing a guest post for Living the Creative Life. Jennifer did a great post on the html coding basics last week, where she covers the basics of using html for your blog and in addition to this post I wanted to show you how to use a div tag.

First you need to know the difference between a <p> and a <div> tag. They sort of work the same but you use them for different purposes.

<p> stands for paragraph and can only be used for a paragraph or text.
<div> stands for division and is used for the layout. You can use it to style or position not only a paragraph but also other elements like images.

Example of text and images in a div:

Social Media Icons

Here's what the code would look like:
<div align="center" style="border: 2px dashed #2ad3d5; height: 100px; width: 250px; padding: 10px;">
    <p>Social Media Icons</p>
    <img src="IMAGE.JPG"> <img src="IMAGE.JPG"> <img src="IMAGE.JPG">
</div>

Place on your own blog:
Change IMAGE.JPG to the link of your own image. You can also change the border size, color or the height and width of the box to your liking. Now copy the edited code and place it anywhere on your blog. If you paste it in a post make sure you paste it in the html editing mode. If you want to place it in your sidebar, add a Html/Javascript gadget and paste the code in there.