Tips for HTML based Content Marketing

When creating content in places that allow both links and images, you can place images in your textual content to break it off and lead people to products which are related to your articles.

Image Styling and Linking

The following are some useful styles you can use when placing images:

float: (left | right)

Makes the image float to the left or right of the text near it.

<img src="URL" style="float: left;" />

<img src="URL" style="float: right; padding-right: 0.5em; padding-bottom: 0.25em;" />

padding-left: 0.5em;

padding-right: 0.5em;

padding-bottom: 0.25em;

Padding attributes create a buffer of space around your images.

When using float: left; be sure to add padding-right: #.#; if necessary

When using float: right; be sure to add padding-left: #.#; if necessary

Padding bottom will prevent text from running right up against the edge of an image.

If you want an equal buffer around all sides of an image, use padding: #.#;

margin-left: 0.5em;

margin-right: 0.5em;

margin-bottom: 0.25em;

Margin attributes create a buffer of space around your images.

When using float: left; be sure to add margin-right: #.#; if necessary

When using float: right; be sure to add margin-left: #.#; if necessary

Margin bottom will prevent text from running right up against the edge of an image.

If you want an equal buffer around all sides of an image, use margin: #.#;

The difference between padding and margin is that padding is space considered to be within the block of an item while margin is external to it.

If you want a color around an image, give your image a background-color and a margin. If you want space between the color around your image and everything else, add a margin as well.

As you can see, this image is floating to the left of this text. Placing multiple images floating in different ways can be problematic between browsers, though the easy way to do so and have it look right is to place each section in div tags.

The problem with that is your text then may not look the way you want it to either.

This time, our image is floating to the right side of the displayed text. For longer articles, you might place an image floating one way near the front of the title and an image floating another way near the end of it.

Making your image into a link:

When you place your images, you can turn them into links.

If you place an item you sell on a page, you might make it into a link to that item on your store.

<a href="URL"><img src="URL" style="float: right;" />

<a href="URL"><img src="URL" style="float: left;" />

Since I don’t sell beer online currently (now that is a good idea!), I’ve instead decided to include an image of an old slide I have lying about which appears to be an authentic slide from the making of Star Wars: Empire Strikes Back. Additionally, I have added a title tag to the link so that when someone places their mouse over the image they see what it is.

Being no expert, I couldnt say for sure…but if it is a fake, someone went through a good deal of trouble to make it.

Now that you know how to place arbitrary images into html text, I would like to point out that you can do the same thing with blocks of text.

The easiest way is to place a floating div inside of your content.

Floating Divs

<div style="float: right;">Some Text</div>

That will create a block of text and float it to the right side of the page.

You can place informational blurbs, links, lists, and just about anything else inside of it that you want.

Some good attributes to place in the style tag of your floating div:

width: 200px;

The width in pixels to make the div

border: 1px solid #000000;

Width of the border, style of the border, color of the border

padding: 1em;

How far to place internal text away from the edge of the containing div

margin: 1em;

How far away from external content ( in character widths ) to keep the div

background-color: #DEDEDE;

The color to fill the background in with

color: #000000;

The color to make the non hyperlink text within the box

If you find yourself using floating divs a lot, you might want to create a style for them in your style sheet ( or add one to your CSS Inserts if you use Atahualpa ) that defines the typical settings you want. Then you only have to set the ones that you want to be different than normal when you create them.

For example, you could set all of the above in a style called co-right.

To place the div, you would use <div class="co-right">Your Text</div>

TO override a particular style, you would add a style="" section with only the overridden style set.

As you can see, the box floats to the right side of this text. As with images, be sure to use padding if your text is running right into your bordered divs.

The div box is a container which can hold other html items within it. In fact, it is used by most modern WordPress themes to display different sections of pages.

If you have a large display, resize your window a few times and see how the divs react. They can be a bit erratic and hard to get just right when you first start using them…at least on large display areas.

However, if you have a maximum width or fixed width set for your page, then this becomes a lot less problematic.

You can place images inside of divs to help position them a bit more reliably.

You can also use styled divs ( or even styled paragraph tags ) for callouts:

A Styled Paragraph Callout

The above paragraph uses the following styles:

• text-align: center;
• border: 1px solid #000;
• font-weight: bold;
• color: #D00;
• background-color: #EEE

The #XXX notation is shorthand for #RRGGBB, which each single digit being repeated so #FFF stands for #FFFFFF.

And again, you could create a class so that you only had to enter class="whatever" rather than each style attribute every time.

.whatever {

text-align: center;

border: 1px solid #000;

font-weight: bold;

color: #D00;

background-color: #EEE;

}

That is how you would add such a style to your style sheet or CSS Insert.