create account

STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT by alfren

View this thread on: hive.blogpeakd.comecency.com
· @alfren · (edited)
$2.78
STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT
![](https://steemitimages.com/DQmZFNRaEpfruij8Xb4g7gasazFkZcMu362J4bhRZqp5gVB/image.png)
I made this tutorial because many are asking how to do that, how to do it etc. So I finally decide to discuss some techniques to make your post design more attractive. Most of this techniques are made into basic Hypertext Markup Language or HTML. 

The syntax for this is always like this:  <b><[tagname]>content</[tagname]></b>
The contents are always between starting tags and ends tags which specify "/". 

<h4>THE "H" TAG</h4> "H" tag makes your text bolder and bigger depends on the number it was made of. H1 is the biggest font size and H5 is the smallest. Use this tag to some sub titles and highlights titles like the example below which I only use H4. You can try H1-5 to see which is better for your viewing.
![](https://steemitimages.com/DQmdhDBhBLAEBwYG6ktBtNaf9gvBGb5K6MYH7WPxwbdB5Rj/image.png)

<h4>THE "i" TAG</h4> "i" or italic tag can turn your font into <i>italic</i>. See my example below.
![](https://steemitimages.com/DQmdfUw5kXyHfJUHtaJMrNdjZ5Tzg6vNrDpAkpAbeAKoDGz/image.png)

<h4>THE "b" TAG</h4> "b" tag or bold tag can make your text bolder. See my example below.
![](https://steemitimages.com/DQmbXmdfAYW6JUKvs4svhJ72RR6dpP8aDd1S2HeGLJbED75/image.png)

<h4>THE "table" TAG</h4> "table" tag is one of the most effective designing on steemit. This is one of my favorite tag. This tag create a table with specific row and column. The "tr" or table row tag must be place between "table" and "/table" tag to create a row on the table. The "td" or table column tag must be place between "tr" and "/tr" tag to create a column on the table. The number of "td" and "/td" tag is also the number of columns you want to create in the row where the "td" tag is place. Same as "tr",  See example below.
![](https://steemitimages.com/DQmURaxBvbmVEpfkicMcha1dUjyokQq4ubMov1S6mM7aWf5/image.png)
Make sure that when you put the number of "td" inside "tr", the next "tr" has also the same number of "td" on it. Between the "td" and "/td" tag, you can put text or image on it just like this example below.
![](https://steemitimages.com/DQmesS65B8BSWy9uAdHXxWHf27sBqw1LrTvs72rctxZAB4o/image.png)

To make your post more attractive, you can make some combinations of tags, see example below. Make sure that the tag is inside another tag.
![](https://steemitimages.com/DQmUik4ZMZ1dvo3UqwMvt1CUdwFRTokgpnEd1TEWj8nZypk/image.png)

Hope that this info can help every steemians to create a beautiful designed for their post.

<h3>Other Hot Topics</h3><hr> 
<table>
     <tr>
          <td>
             <a href="https://steemit.com/news/@alfren/idg-foundation-bring-smiles-to-children-of-botolan-zambales"><h4>IDG FOUNDATION Bring Smile to Children</h4><img src="https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmbdU5hc7WgpMXW1eBXjNF7GxisgPSPHq1JJ1bEfCogvNB"></a>
          </td>
          <td>
<a href="https://steemit.com/untalented/@alfren/the-most-effective-way-to-saved-money"><h4>The Most Effective Way To Saved Money</h4><img src="https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmWHHCosuvV5VtSBRs2YcXEh7Nj9W71LaHNtx9i2UHmLPW"></a>
          </td>
          <td>
<a href="https://steemit.com/crypto/@alfren/idgcoin-one-of-the-best-altcoin-that-will-change-the-world-of-cryptocurrency"><h4>IDGCOIN: One of the best altcoin</h4><img src="https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmaKM1Coi2t4uPkLyX4bhmJgfZM7uuNKtgCpcb8ZJf94hw"></a>
         </td>
     </tr>
</table>

<hr> 
https://steemitimages.com/DQmThZavjZBWziNeSZrb8eX96yYkqaE3D1DUnHSiqkDS3cA/Picture3.png
Please follow and up-vote me on steemit @alfren.<br>
You can follow me on twitter @SibulAlfren and<br>
on facebook https://www.facebook.com/eyelefareen/
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authoralfren
permlinksteemit-tutorial-basic-html-that-can-be-apply-on-steemit
categorysteemit
json_metadata{"tags":["steemit","steemitfamilyph","steem","untalented","tutorial"],"users":["alfren","sibulalfren"],"image":["https://steemitimages.com/DQmZFNRaEpfruij8Xb4g7gasazFkZcMu362J4bhRZqp5gVB/image.png","https://steemitimages.com/DQmdhDBhBLAEBwYG6ktBtNaf9gvBGb5K6MYH7WPxwbdB5Rj/image.png","https://steemitimages.com/DQmdfUw5kXyHfJUHtaJMrNdjZ5Tzg6vNrDpAkpAbeAKoDGz/image.png","https://steemitimages.com/DQmbXmdfAYW6JUKvs4svhJ72RR6dpP8aDd1S2HeGLJbED75/image.png","https://steemitimages.com/DQmURaxBvbmVEpfkicMcha1dUjyokQq4ubMov1S6mM7aWf5/image.png","https://steemitimages.com/DQmesS65B8BSWy9uAdHXxWHf27sBqw1LrTvs72rctxZAB4o/image.png","https://steemitimages.com/DQmUik4ZMZ1dvo3UqwMvt1CUdwFRTokgpnEd1TEWj8nZypk/image.png","https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmbdU5hc7WgpMXW1eBXjNF7GxisgPSPHq1JJ1bEfCogvNB","https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmWHHCosuvV5VtSBRs2YcXEh7Nj9W71LaHNtx9i2UHmLPW","https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmaKM1Coi2t4uPkLyX4bhmJgfZM7uuNKtgCpcb8ZJf94hw","https://steemitimages.com/DQmThZavjZBWziNeSZrb8eX96yYkqaE3D1DUnHSiqkDS3cA/Picture3.png"],"links":["https://steemit.com/news/@alfren/idg-foundation-bring-smiles-to-children-of-botolan-zambales","https://steemit.com/untalented/@alfren/the-most-effective-way-to-saved-money","https://steemit.com/crypto/@alfren/idgcoin-one-of-the-best-altcoin-that-will-change-the-world-of-cryptocurrency","https://www.facebook.com/eyelefareen/"],"app":"steemit/0.1","format":"markdown"}
created2018-02-27 06:19:15
last_update2018-02-27 06:50:45
depth0
children18
last_payout2018-03-06 06:19:15
cashout_time1969-12-31 23:59:59
total_payout_value2.150 HBD
curator_payout_value0.626 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,758
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,791,211
net_rshares489,335,475,829
author_curate_reward""
vote details (40)
@almondb ·
helpful info..
properties (22)
authoralmondb
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t083437839z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 08:34:45
last_update2018-02-27 08:34:45
depth1
children2
last_payout2018-03-06 08:34:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length14
author_reputation15,368,717,274
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,814,960
net_rshares0
@alfren ·
Thank you
properties (22)
authoralfren
permlinkre-almondb-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180228t004132598z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 08:42:15
last_update2018-02-27 08:42:15
depth2
children1
last_payout2018-03-06 08:42:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,816,247
net_rshares0
@almondb ·
👍
properties (22)
authoralmondb
permlinkre-alfren-re-almondb-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t085058311z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 08:51:06
last_update2018-02-27 08:51:06
depth3
children0
last_payout2018-03-06 08:51:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1
author_reputation15,368,717,274
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,817,716
net_rshares0
@ankarlie ·
Thanks for this valuable guide when I do my next post I will try to use some of it.
properties (22)
authorankarlie
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t083119322z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 08:31:21
last_update2018-02-27 08:31:21
depth1
children1
last_payout2018-03-06 08:31:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length83
author_reputation20,844,864,303,785
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,814,357
net_rshares0
@alfren ·
Yes partner @ankarlie... try to build also a related links in the last part of your post like I did (see image below)
![](https://steemitimages.com/DQmbmy3kavEvQQxeLV1EwSBKoJYntU1BzwzNZ8YKzJncNdN/image.png)
properties (22)
authoralfren
permlinkre-ankarlie-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180228t004027060z
categorysteemit
json_metadata{"tags":["steemit"],"users":["ankarlie"],"image":["https://steemitimages.com/DQmbmy3kavEvQQxeLV1EwSBKoJYntU1BzwzNZ8YKzJncNdN/image.png"],"app":"steemit/0.1"}
created2018-02-27 08:41:09
last_update2018-02-27 08:41:09
depth2
children0
last_payout2018-03-06 08:41:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length206
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,816,083
net_rshares0
@arkstrikle ·
very informative
properties (22)
authorarkstrikle
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t074656190z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 07:47:00
last_update2018-02-27 07:47:00
depth1
children1
last_payout2018-03-06 07:47:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length16
author_reputation66,583,571,817
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,806,768
net_rshares0
@alfren ·
thanks
properties (22)
authoralfren
permlinkre-arkstrikle-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t235350749z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 07:54:36
last_update2018-02-27 07:54:36
depth2
children0
last_payout2018-03-06 07:54:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,808,041
net_rshares0
@cryptojeracks ·
thumbs up brother keep up the good work
properties (22)
authorcryptojeracks
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180228t223004243z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-28 06:34:00
last_update2018-02-28 06:34:00
depth1
children1
last_payout2018-03-07 06:34:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length39
author_reputation19,951,039,148
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,051,780
net_rshares0
@alfren ·
Thanks brother
properties (22)
authoralfren
permlinkre-cryptojeracks-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180301t232354159z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-03-01 07:24:39
last_update2018-03-01 07:24:39
depth2
children0
last_payout2018-03-08 07:24:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length14
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,316,051
net_rshares0
@dinmark09 ·
How did you put that "other hot topics" bro? The links
properties (22)
authordinmark09
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180303t042032203z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-03-03 04:20:51
last_update2018-03-03 04:20:51
depth1
children1
last_payout2018-03-10 04:20:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length54
author_reputation132,695,333,617
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,791,296
net_rshares0
@alfren ·
Combination of table tag
properties (22)
authoralfren
permlinkre-dinmark09-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180303t053332799z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-03-03 05:33:39
last_update2018-03-03 05:33:39
depth2
children0
last_payout2018-03-10 05:33:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length24
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,803,102
net_rshares0
@joebrochin ·
@alfren thanks for the quick lesson. Much appreciated.
properties (22)
authorjoebrochin
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t113749074z
categorysteemit
json_metadata{"tags":["steemit"],"users":["alfren"],"app":"steemit/0.1"}
created2018-02-27 11:37:48
last_update2018-02-27 11:37:48
depth1
children2
last_payout2018-03-06 11:37:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length54
author_reputation26,155,480,658,381
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,848,329
net_rshares0
@alfren ·
Thanks
properties (22)
authoralfren
permlinkre-joebrochin-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t114917533z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 11:49:21
last_update2018-02-27 11:49:21
depth2
children1
last_payout2018-03-06 11:49:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,850,393
net_rshares0
@joebrochin ·
No problem.
properties (22)
authorjoebrochin
permlinkre-alfren-re-joebrochin-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t124136746z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 12:41:36
last_update2018-02-27 12:41:36
depth3
children0
last_payout2018-03-06 12:41:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length11
author_reputation26,155,480,658,381
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,860,033
net_rshares0
@maverickinvictus ·
Very nice! Thank you for this information! Especially the table tag
properties (22)
authormaverickinvictus
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t101526998z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 10:15:24
last_update2018-02-27 10:15:24
depth1
children1
last_payout2018-03-06 10:15:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length67
author_reputation49,890,876,340,190
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,832,866
net_rshares0
@alfren ·
Welcome partner
properties (22)
authoralfren
permlinkre-maverickinvictus-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t114818865z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 11:48:21
last_update2018-02-27 11:48:21
depth2
children0
last_payout2018-03-06 11:48:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length15
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,850,229
net_rshares0
@wdoutjah ·
You forgot to include SUB, SUP and DEL

Steemit is <del>bad</del> cool

Steemit<sub>is cool</sub>

Steemit<sup>is cool</sup>
properties (22)
authorwdoutjah
permlinkre-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t064616719z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 06:45:00
last_update2018-02-27 06:45:00
depth1
children1
last_payout2018-03-06 06:45:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length124
author_reputation4,386,351,818,559
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,795,506
net_rshares0
@alfren ·
Thanks for the information partner
properties (22)
authoralfren
permlinkre-wdoutjah-re-alfren-steemit-tutorial-basic-html-that-can-be-apply-on-steemit-20180227t224528870z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-02-27 06:46:12
last_update2018-02-27 06:46:12
depth2
children0
last_payout2018-03-06 06:46:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length34
author_reputation2,822,786,990,858
root_title"STEEMIT Tutorial: Basic HTML that can be apply on STEEMIT"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,795,721
net_rshares0