This tutorial is part of my project for the new users that I will manage to invite in the Bitshares Network.
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.
Stylize your post introduction.
My introduction will be short. It's way cooler to stylize your posts than plane writing.
Adding HTML tags in your posts.
I will include every example in each HTML tags that are available in STEEMIT for everyone to see how to use it.
The Header tag <h1>
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
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
The paragraph tag <p>.
<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.
The center tag <center>.
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:
The bold <b>, italic <i> and strikethrough <strike> tags.
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.
The div tag <div>
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.
Ex. of div with element class pull-right
<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.
Ex. of div with element 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:
In this part I added the tag <i> so that you can see the pull-right class easier. This can be use if you are writing a column.
Ex. Ex. of div with element class text-justify
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:
It will justify your paragraph to both sides making your posts more proportional.
The list tag <ul> unordered and <ol> ordered list;
This tag is used if you are listing something or ordering something in your post.
Ex. of unordered list tag
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
output:
- one
- two
- three
Ex. of ordered list tag
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
output:
- one
- two
- three
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:
- one
- one
- two
- three
- two
- three
The line break tag <br> and horizontal line tag <hr>
This tags are use to separate something in your post.
Ex. of line break tag.
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.
More example.
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.
Ex. horizontal line tag
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 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!"
Good code tutorial. Centering text is a good one.
Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://powerbi.microsoft.com/en-us/documentation/powerbi-service-share-unshare-dashboard/
@Cheetah are you sick today? Don't forget to take your medicine.
Truly yours,
Nem Dayao
This tutorial was very helpful. Thanks.