The @steemph.antipolo Blogging Workshop - 05

in #steemp-antipolo6 years ago

This 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.


POST FORMATTING


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.

As a result, anything that appears after the </div> reverts back to the standard, non-justified text, which can be random lengths depending on the number of characters used on any given line, the width of the browser window, and the type of device used for viewing the content.


Likewise, we can also align the text to the right by placing it within a similar division where we only change the clas from "text-justified" to "text-right", as you cam see in this paragraph.

<div class="text-right">Our right aligned text here.</div>

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>
  1. Item 1
  2. 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.

Stay tuned for next weeks exciting workshop!


Banner Source

Sort:  

This post was shared in the Curation Collective Discord community for curators, and upvoted and resteemed by the @c-squared community account after manual review.

Thank you for the upvote and resteem @c-squared I really appreciate your support to this growing community.

Coin Marketplace

STEEM 0.33
TRX 0.11
JST 0.034
BTC 66598.01
ETH 3236.65
USDT 1.00
SBD 4.66