In this tutorial I will teach you how to use html tags to add style in your post.
Before we start I would like to thanks all my supporters specially @johnsmith,
@vortac,
@steempower,
@oldtimer,
@fminer05, and special thanks to
@tt-dogg and
@bitshares76.
THANK YOU SO MUCH! This will help me improve more and continue my journey in helping my fellow Filipinos.
My introduction will be short. It's way cooler to stylize your posts than plane writing.
I will include every example in each HTML tags that are available in STEEMIT for everyone to see how to use it.
This tag is mainly used for something you want emphasize such as headers, announcement, and titles.
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
output
<p>I am a paragraph.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
Output:
I am a paragraph.
The quick brown fox jumps over the lazy dog.
Note: This tag will automatically add break lines on start and end of the tag.
Center tags are used to center format your post
Without center tag:
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network. This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
Adding center tag in your post:
<center>This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network. This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.</center>
output:
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network. This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
This tags are used for emphasizing something in your sentence like names, quotes, or mistakes.
Sample:
The <i>quick</i> brown fox <b>jumps</b> over the <strike>lazy</strike> dog.
output:
The quick brown fox jumps over the lazy dog.
This tag is use to control a segment of your post. This tag has three different class elements pull-right, pull-left and text-justify.
<div class="pull-right">
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
</div>
output:
As you can see the section inside the <div class="pull-right"> will be pulled to the right side of your post.
Note: this div class is tricky this is mostly used with div class pull-left.
<div class="pull-left">
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
</div>
output:
I will show you now how to use it with div class pull-right.
<div class="pull-left">
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
</div>
<div class="pull-right">
<i>This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.</i>
</div>
output:
Without <div class="text-justify">
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network. This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
With <div class="text-justify">
<div class="text-justify">
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network. This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
</div>
output:
This tag is used if you are listing something or ordering something in your post.
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
output:
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
output:
Note: You can also combine this like the div class.
<ol>
<li>one</li>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<li>two</li>
<li>three</li>
</ol>
output:
This tags are use to separate something in your post.
This tutorial is part of my project for the new users<br> that I will manage to invite in the Bitshares Network.
output:
This tutorial is part of my project for the new users
that I will manage to invite in the Bitshares Network.
This tutorial is part of my project for the new users<br><br> that I will manage to invite in the Bitshares Network.
output:
This tutorial is part of my project for the new users
that I will manage to invite in the Bitshares Network.
The more line break you add the more it will be separated from where you've placed it.
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
<hr>
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
output:
This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
This will add a horizontal line to your post.
I hope this tutorial help you my next tutorial will be about using markdown. I made this tutorial because some tags are not included in markdown codes. Such as <div> <center>.
That's me trading on Bitshares DEX
I'm Nem Dayao,
Your Bitshares Enthusiast.
"I am currently accepting donations for my project to spread information about Bitshares Network and it's market assets. If you want to help me considering donating some in my Bitshares wallet: doc-mac18
Thank you!"