New in Steemit?
Do you want to learn how to use HTML codes to bring your posts to life?

In this simple guide you’ll find some
basic codes needed to modify how your posts look.

All you need to do is copy and paste this codes wherever you need them and replace the sample text with the desired one.

TEXT FORMAT

To add an italic effect.

<i>desired text here</i>

To add a bold effect.

<b>desired text here</b>

To add both italic and bold effects.

<i><b>desired text here</b></i>

To change the size of the text.

To make headers.

To emphasize a paragraph.

Gigant.

<h1>desired text here</h1>

A bit smaller.

<h2>desired text here</h2>

We keep on going smaller.

<h3>desired text here</h3>

Even more.

<h4>desired text here</h4>

Small.

<h5>desired text here</h5>

Tiny.

<h6>desired text here</h6>

TO INSERT LINKS

Go to @gabrielalentes’s profile.

[text to be shown here](desired link here)

PARAGRAPH AND IMAGES FORMAT

In case of an image, insert the link of the image instead of a paragraph.

To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph. To justify the paragraph.

<div class="text-justify">desired text here</div>

To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph. To center the paragraph.

<center>desired text here</center>

To create different columns. To create different columns. To create different columns. To create different columns. To create different columns. To create different columns. To create different columns. To create different columns.

<div class=pull-left>desired text in column 1 here</div>
<div class=pull-right>desired text in column 2 here</div>

ADD IMAGES’ CAPTIONS

desired text here

<center>link of the desired image here<br/><em>desired text here</em></center>

MIXING THINGS UP A LITTLE BIT

By using the code:

<div class=pull-left><center>link of primary image<br/><em>This example caption has words with an <i>italic effect</i>, <b>bold effect</b> and <i><b>both.</b></i></em></center></div>
<div class=pull-right><h1>This title is aligned to the right of the primary image, without being centered.</h1>
<h3><center>This subtitle is aligned to the right of the primary image, being centered.</center></h3>
<div class="text-justify">This paragraph is aligned to the right of the primary image and justified. Even with an <i>italic effect</i>, <b>bold effect</b> and we will even insert a secondary image.</div>
<div class=pull-right><center>link of the secondary image<br/><em>This secondary image is aligned to the right of the text, that is at the same time aligned to the right of the primary image.</em></center></div>  
<div class=pull-left>This paragraph is aligned to the left of the secondary image, without being justified.</div>  
<div class=pull-left><div class="text-justify">This paragraph is justified. This paragraph is justified. This paragraph is justified.</div>

We’ll have:

This example caption has words with an italic effect, bold effect and both.

This title is aligned to the right of the primary image, without being centered.

This subtitle is aligned to the right of the primary image, being centered.

This paragraph is aligned to the right of the primary image and justified. Even with an italic effect, bold effect and we will even insert a secondary image.