his week's Workshop was all about formatting our Steemit posts. After the introduction of our new "Daily Whale" initiative, I created a template that we can reuse every time, in order to maintain the same look and feel between all posts. As a result, I was asked to discuss in greater detail, how I pre-format my posts, and how any Steemian can create their own templates for consistency.

---

First and foremost, we discussed formatting the body text -- how do we justify or center text on a page?

To justify a paragraph, or several paragraphs, we need to use the <div> tag. If you will notice, this and the previous paragraphs are all justified, so they are placed inside of a division like so:

<div class="text-justify">Our justified text here.</div>

When you use the <div> tag, you most also close the division using </div> -- notice the "/" bracket before the word "div" which informs our browsers to close the division of content.

You may have also noticed the horizontal lines above and below, to separate the parts of text. These are known as "Horizontal Rules" and you make them simply by placing the proper tag -- <hr /> -- on the next line, and it creates an entire line running the full width of the content area.

Unlike the <div> tag, the <hr /> tag does not need to be closed, so we just add a space after the "hr" then ad the "/" bracket to close it. Another tag that works the same way, is the <br /> tag, or "Line Break" tag, which simply ends the current line of content, and places anything after on the next line below it.

---

Ok, so now lets talk about formatting the font itself. We can format text in bold or in italics in line by simply using the following tags:

<b>Bold Text Here.</b>
<em>Italicized text here.</em>

---

However, we cannot place "headers" in line, they must always be on their own separate lines, as they separate areas of content. There are a total of 6 levels of headers, which are created as follows:

<h1>First Level Header</h1>

<h2>Second Level Header</h2>

<h3>Third Level Header</h3>

<h4>Fourth Level Header</h4>

<h5>Fifth Level Header</h5>

<h6>Sixth Level Header</h6>

---

Next up we have ordered lists. Ordered lists are important as they attract readers through "Top Ten" posts, and are created as follows:

<ol> <li>Item 1</li> <li>Item 2</li> </ol>

Item 1 Item 2

But for unordered lists, or lists with just bullet points, we change the "ol" for "Ordered List" to "ul" for "unordered List" as follows:

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

Item 1 Item 2

---

I bet you noticed that I used a table to show the differences between the code used for lists, and their output by the browser, so next we shall dive into tables. We shall start with a simple table, without any headers, which looks like:

Row 1, Column 1 Data	Row 1, Column 2 Data
Row 2, Column 1 Data	Row 2, Column 2 Data

And the code to make it looks like:

<table>
<tr>
<td>Row 1, Column 1 Data</td>
<td>Row 1, Column 2 Data</td>
</tr>
<tr>
<td>Row 2, Column 1 Data</td>
<td>Row 2, Column 2 Data</td>
</tr>
</table>

The table must start with the <table> tag, and end with the </table> tag. The table is read from top to bottom, and from left to right. The first tag after the <table> tag, is the "Table Row" tag -- <tr>. and each of our cells of "Table Data" for each row are added to the row, using the <td> tag. Each <td> tag must be closed with the </td> tag before adding another cell, or before closing each tow out with the </tr> tag.

But wait... What about headers on your table?

We have you covered on that as well. Table headers can be on the first row, in the first column, or both. All we do is change the <td> and </td> tags to <th> and </th> tags

---

Last, but certainly not the least, is the formatting of blockquotes. These are done using their own unique tag as well.

<blockquote>Blockquoted text goes here.</blockquote>

This creates a blockquote that looks like:

Blockquoted text goes here.