MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES. by afolwalex

View this thread on: hive.blog | peakd.com | ecency.com

steemiteducation · @afolwalex · Apr 21 '18 (edited)

$3.86

MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES.

<center>
![code-1076533_1920.jpg](https://steemitimages.com/DQmXuMfeGQBZ42BmgQjVVDx6ULujEmcfZ5jJgHKoCQZRTFp/code-1076533_1920.jpg)
Source: [Pixabay](https://pixabay.com/en/code-html-digital-coding-web-1076533/)
</center>
Those codes up there shouldn't scare you. Trust me, it's very easy. You won't write that much.

Well, I’m sure you’ve read some great contents and you were marveled at the way it was constructed. Your interesting write-ups alone won’t draw your viewers; it has to be that great. You’ve seen Steemians create tables, align images anywhere on their blogs, use bulleted lists, do some design. I’m here to guide you on that.

You don’t need to know a programming language to create cool stuffs; all you need to know is how the HTML codes are used.  Let’s play with images.

<center>**ALIGNING IMAGES**</center>
<div class="pull-right">

![20180418_220647_0001.png](https://steemitimages.com/DQmWtDjFnB8eEPbSDusshXhQeo6FjgffA8Ju8WtFUzNGYSp/20180418_220647_0001.png)

</div>

<p>You’ve seen cool stuffs like this and you are wondering how it was done? It’s pretty easy. Just take a look at how the codes in the image are arranged. Then, you are good to go. “pull-right” simply drives the image to the right.</p> 
                                                                  
<div class="pull-left">

![20180418_220906_0001.png](https://steemitimages.com/DQmQAUfRkBPLS5E7uHiThmiMscEJ2m33JkYsVfgBJjJXnPL/20180418_220906_0001.png)
</div>
Oh! In case you are not cool with it being at your right hand side, you can also drive it to the left. The “pull-left” does that. Easy! Note: It has to be in a  <i>div</i>. Opposite of what we did earlier.<br><br>
<p>We got that right?</p>

Yes?

In case the images ain't clear, here is what I did:
<center><div class="pull-right'>Image here</div.> <br>
then your text follows...</center>
That's just it. Change the right to left when aligning it to your left hand side.<br><br>
How about this?

<center>
<div class="pull-right">

![20180418_220414_0001.png](https://steemitimages.com/DQma57M2hA3KKupVfHu5hajC8dndJu3u1zLSPw6wsgaodth/20180418_220414_0001.png)
</div>
<div class="pull-left">

![20180418_221253_0001.png](https://steemitimages.com/DQmctSS27T3T6XCaXS73W9YunX2UXzUKnHnBtD1cwauaDmM/20180418_221253_0001.png)

</div>
</center><br>
<p>Now, two images are placed side by side. Creating your gallery will be easy. Once you can place those images beside each other, then, there shouldn’t be a problem.</p>
Just drive one to the left and take the other one to the right. 
Yes! same way we did above.

<center>**USING LISTS**</center>
I’ve read a lot of articles here, and most of the authors had problems with listing. You obviously don’t need to start numbering, all you need is a code to do that. Numbering it won’t give you a proper alignment. In fact, differentiating a coded list and the one being imputed manually is easy. How do you know? *Proper aligning.*
<center>
![20180418_220508_0001.png](https://steemitimages.com/DQmRZhHCXd7KBsWsnEXxNvTS5jDaUKf68qAjaVn7ZWuRh7Y/20180418_220508_0001.png)
</center>
This is the output;
<ul>
<li>I am Excited.</li>
<li>I am super excited.</li>
<li>Yes! I am excited.</li>
<li>Okay, that's enough.</li>
</ul>

The "ul" tag means unordered list. That's why it was listed with bullets. If you prefer numbering, simply change the "ul" to "ol".

I changed it, and I got this.
<ol>
<li>I am Excited.</li>
<li>I am super excited.</li>
<li>Yes! I am excited.</li>
<li>Okay, that's enough.</li>
</ol>

 Amazing right?
 Neat? 

On my next post, I'll focus on how to create a table and other cool stuffs you will be marveled at. 

You can let me know what you will like to do on steemit in the comment section.

*All images are owned by the author, @afolwalex.*

Until then.....  

Wait....

Have you heard of @steemiansarena?
Join the discord server [here](https://discord.gg/GVNC8aY)


Thanks for reading.

👍 neoxian, geke, hr1, airhawk-project, steemiansarena, oluwoleolaide, officialfuzzy, minnowsupport, peaceandwar, cabelindsay, linkyourlife, bigtom13, nat5an, tolustx, hetty-rowan, mr-aaron, blackmagic, steemrepair, warpedpoetic, samest, ssimkins9, akumar, aschatria, tolarnee, ninyea, airhawk-exchange, tosyne2much, debbietiyan, jade56, bozz, dreamchasser, udezee, ninjadroidx, coolguy123, motivatorjoshua, rasamuel, whack.science, zizymena, artpetra, jubreal, mirfaner, nathalie13, emekacollins, intellectualsoul, brainz, cheryldavis, hadebaryor, akiyoshispartan, ammyluv, marvelking, wrpx, farhan007, aideedavies, farha, ronikarain, saintopic, omarfaruk7, mrxplicit, afolwalex, mirkosche, nonsqtr, bimijay, ekjosh, gwys, and 152 others

`author`	afolwalex
`permlink`	making-your-contents-look-great-with-simple-html-codes
`category`	steemiteducation
`json_metadata`	{"tags":["steemiteducation","programming","esteem","stach","airhawk-project"],"users":["afolwalex","steemiansarena"],"image":["https://steemitimages.com/DQmXuMfeGQBZ42BmgQjVVDx6ULujEmcfZ5jJgHKoCQZRTFp/code-1076533_1920.jpg","https://steemitimages.com/DQmWtDjFnB8eEPbSDusshXhQeo6FjgffA8Ju8WtFUzNGYSp/20180418_220647_0001.png","https://steemitimages.com/DQmQAUfRkBPLS5E7uHiThmiMscEJ2m33JkYsVfgBJjJXnPL/20180418_220906_0001.png","https://steemitimages.com/DQma57M2hA3KKupVfHu5hajC8dndJu3u1zLSPw6wsgaodth/20180418_220414_0001.png","https://steemitimages.com/DQmctSS27T3T6XCaXS73W9YunX2UXzUKnHnBtD1cwauaDmM/20180418_221253_0001.png","https://steemitimages.com/DQmRZhHCXd7KBsWsnEXxNvTS5jDaUKf68qAjaVn7ZWuRh7Y/20180418_220508_0001.png"],"links":["https://pixabay.com/en/code-html-digital-coding-web-1076533/","https://discord.gg/GVNC8aY"],"app":"steemit/0.1","format":"markdown"}
`created`	2018-04-18 21:53:21
`last_update`	2018-04-21 09:09:48
`depth`	0
`children`	5
`last_payout`	2018-04-25 21:53:21
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	3.004 HBD
`curator_payout_value`	0.851 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	3,901
`author_reputation`	29,131,187,545,815
`root_title`	"MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	50,831,105
`net_rshares`	724,931,366,733
`author_curate_reward`	""

properties (23)vote details (216)

voter	rshares	pct
hr1	52,099,062,444	0.02%
officialfuzzy	27,769,001,214	5%
neoxian	250,282,612,277	5%
ubg	305,334,630	1%
cabelindsay	10,976,387,595	50%
geke	86,972,958,021	100%
yourseldom	105,405,231	50%
aschatria	2,656,013,665	50%
theodosis63	426,280,440	100%
steemitboard	327,603,271	1%
oluwoleolaide	34,301,040,257	50%
cryptophunk	270,238,107	50%
herfie	101,336,837	50%
ninyea	2,353,662,949	100%
jade56	1,931,370,073	50%
pipks	241,922,533	50%
minnowsupport	24,719,509,817	0.5%
saintopic	537,386,082	50%
akiyoshispartan	653,468,745	50%
blackmagic	3,795,671,832	100%
samest	3,394,232,706	100%
dayramsazahara	110,955,798	50%
emekacollins	898,254,038	100%
dreamchasser	1,515,262,912	50%
sippi601	239,656,197	50%
odibezeking	248,049,832	100%
danchenios	54,234,625	100%
intellectualsoul	777,103,411	100%
mr-aaron	4,323,427,022	100%
biplob12	139,400,189	50%
safril21	217,760,191	50%
sukro	149,798,786	50%
davealemana	245,203,006	50%
erikkun28	171,584,458	50%
tolarnee	2,503,673,873	50%
collennes	113,703,863	25%
bobtucks	214,486,117	50%
peaceandwar	11,182,922,869	50%
anonymous13	258,136,333	100%
isaganicabrales	382,139,620	50%
hasim5164	210,902,282	50%
airhawk-project	52,096,744,371	100%
nat5an	5,151,435,825	25%
passionate-star	159,827,575	35%
mslily	214,858,221	50%
g2wnlove	162,710,922	50%
coolguy123	1,349,582,708	10%
omarfaruk7	508,874,105	100%
masud222	207,854,548	50%
kimaben	72,035,808	25%
nathalie13	925,105,027	100%
ekjosh	451,732,559	100%
mirfaner	926,241,484	100%
brainz	732,414,936	10%
motivatorjoshua	1,146,473,211	100%
hadebaryor	678,558,312	10%
abbykane	122,784,669	20%
caesar2341	221,426,271	50%
buti95	214,163,053	50%
chullbull	248,171,124	50%
enjoyy	413,452,734	50%
spark92	252,355,974	50%
hasan086	436,035,999	50%
tighilt	153,945,387	10%
handfree42	97,909,091	50%
ilovekrys	214,183,263	50%
williams-owb	294,694,605	100%
tolustx	4,884,495,619	100%
family.app	105,416,448	100%
mounire	71,084,786	10%
harkushi	241,956,333	50%
akumar	2,685,767,984	100%
artbob	61,273,768	10%
giftedwords	281,589,642	50%
rasamuel	1,086,715,914	50%
tosyne2much	2,246,036,773	50%
hetty-rowan	4,394,814,801	50%
notoriousrebel	413,186,402	100%
ninjadroidx	1,354,675,031	100%
layanmarissa	208,303,686	50%
proffgodswill	55,176,656	10%
atare	61,439,936	10%
aideedavies	561,879,853	100%
bimijay	454,967,313	100%
udochi	391,283,379	100%
gwys	450,679,807	50%
marvelking	595,366,973	100%
cathvanlael	140,529,562	50%
airhawk-exchange	2,310,598,617	50%
clonlost	428,263,808	100%
mrxplicit	502,803,678	100%
aduragbemi	337,893,759	50%
zizymena	1,040,135,420	100%
patatesyiyen	65,377,983	12.5%
dynamicrypto	238,105,618	1%
addempsea	411,774,502	20%
bazooka	153,560,736	25%
horlaide	370,945,269	50%
cheesom	258,052,752	50%
indrajeet	236,389,020	50%
farhan007	567,070,411	100%
ssimkins9	3,313,697,021	50%
ichie1	386,729,353	50%
tegasweet	142,959,463	50%
debbietiyan	1,975,876,479	50%
charlemajne	433,222,500	100%
hashas120	295,136,988	50%
warpedpoetic	3,401,395,185	25%
shahabshah	213,971,977	50%
bigtom13	7,369,511,780	25%
udezee	1,460,393,512	22.5%
used-lessboy	208,288,144	50%
imbigdee	306,755,761	100%
ilukzymoore	211,013,718	50%
matadonis	429,820,732	100%
sylinda	214,047,140	50%
liltom	251,642,200	50%
princefizzy	290,389,164	50%
bozz	1,734,835,211	50%
mirkosche	465,072,590	100%
andiepumpgun	238,504,851	50%
artpetra	1,033,673,678	50%
whack.science	1,057,856,668	25%
new.diak	267,324,709	50%
soykatherine	208,027,650	50%
basir92	238,847,136	50%
rheyss08	214,786,860	50%
farha	553,740,846	100%
ronikarain	553,377,368	100%
wrpx	579,512,423	50%
nightdragon	219,306,206	50%
teechizzy	226,399,768	50%
sir.skillful1	238,441,812	50%
steemdragon	208,091,476	50%
nickiechua	257,206,832	50%
zombieslayer	214,546,293	50%
steemrepair	3,679,982,130	100%
deewon56	250,723,921	50%
anam01	107,241,588	100%
beni96	244,547,472	50%
zeshanjaved	141,352,193	50%
flinter	159,377,232	50%
jubreal	959,046,146	50%
bushu	269,044,080	50%
mesutkrgln	153,774,435	50%
cheryldavis	716,980,203	50%
donjyde	211,179,774	50%
nonsqtr	458,133,096	50%
prechyrukky	261,166,319	50%
aidenpearce	113,360,515	20%
carloniere	200,406,922	100%
muzzlealem	189,520,722	50%
omairqazi	231,134,398	50%
kenn24	300,133,747	50%
jayo	199,239,526	50%
pepememes	150,666,414	50%
linkyourlife	7,486,003,372	50%
surviveyourstory	295,678,960	50%
barutundefteri	224,419,527	50%
ammyluv	620,143,991	50%
afolwalex	496,457,735	100%
ahmad097	218,276,371	50%
mbahtutorial	244,564,839	50%
kelvo	256,885,040	50%
jacksondavies	296,562,759	50%
wealth4good	280,785,050	5%
musicman99	303,348,268	50%
viktor1414	281,618,852	50%
kejora05	199,226,344	50%
prayzz	265,932,815	50%
musicbot	97,812,437	100%
mellissamartz	85,764,672	15%
opluke	229,728,016	50%
t-flames	187,639,544	50%
dinaislamdina	259,949,363	50%
rextyge	399,113,466	50%
ernoldlvb	127,399,043	50%
loladelolz	91,725,416	50%
geezyweezy	450,479,622	100%
oyelekan	275,920,659	50%
dontador	300,322,148	50%
masterofdisaster	239,062,486	50%
crashbandicoot	233,413,175	50%
nazmulrana	208,467,971	50%
josoft	236,670,583	50%
allyberry	299,856,568	50%
dave-verreault	409,064,723	50%
simplewole	61,414,539	50%
nickeychan	287,347,375	50%
okipeter	299,580,569	50%
techsfair	88,717,276	50%
aksapphires	201,832,279	50%
trigar12	295,352,435	50%
shumuel	287,514,266	50%
jaber-hossain70	232,852,185	50%
gnaimul	208,003,898	50%
finite-clothings	83,022,063	15%
gpwebers	238,886,997	50%
zephyr119	214,610,520	50%
devitech	223,118,504	50%
timalex1	53,242,108	10%
akeenze13	258,086,055	50%
elpriist	217,277,531	50%
joker33	303,096,982	50%
jumpup	260,079,676	50%
caleb96	300,296,136	50%
steemiansarena	41,081,613,211	100%
afromit	299,896,537	50%
udywriter	294,117,667	50%
kabeertijani	443,231,855	75%
doodlebl	212,502,609	50%
pharao20	150,256,516	50%
simaoatb	300,902,568	50%
galihtruff	211,797,949	50%
femidada	210,995,437	50%
olakunle	299,674,679	50%

@aschatria · Apr 19 '18

I am trying to use less html in my Steemit posts, but it is pretty hard, because I have too many banners on the posts' footer.
HTML is handy but Markdown is simpler.

properties (22)

`author`	aschatria
`permlink`	re-afolwalex-making-your-contents-look-great-with-simple-html-codes-20180419t101531687z
`category`	steemiteducation
`json_metadata`	{"tags":["steemiteducation"],"app":"steemit/0.1"}
`created`	2018-04-19 10:15:00
`last_update`	2018-04-19 10:15:00
`depth`	1
`children`	0
`last_payout`	2018-04-26 10:15:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	165
`author_reputation`	39,132,042,091,697
`root_title`	"MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	50,917,262
`net_rshares`	0

@minnowsupport · Apr 20 '18

<p>Congratulations!  This post has been upvoted from the communal account, @minnowsupport, by afolwalex from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows.  Please find us at the <a href="https://discord.gg/HYj4yvw"> Peace, Abundance, and Liberty Network (PALnet) Discord Channel</a>.  It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.</p> <p>If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=102530.639667%20VESTS">50SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=205303.639667%20VESTS">100SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=514303.639667%20VESTS">250SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=1025303.639667%20VESTS">500SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=2053030.639667%20VESTS">1000SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=10253030.639667%20VESTS">5000SP</a>. <br><strong>Be sure to leave at least 50SP undelegated on your account.</strong></p>

properties (22)

`author`	minnowsupport
`permlink`	re-making-your-contents-look-great-with-simple-html-codes-20180420t062901
`category`	steemiteducation
`json_metadata`	""
`created`	2018-04-20 06:29:03
`last_update`	2018-04-20 06:29:03
`depth`	1
`children`	0
`last_payout`	2018-04-27 06:29:03
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,705
`author_reputation`	148,902,805,319,183
`root_title`	"MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	51,067,888
`net_rshares`	0

@steembottrackerr · Apr 19 '18

<center>https://steemitimages.com/200x200/https://s-media-cache-ak0.pinimg.com/originals/81/28/3c/81283c6aed7bdb5b9f8ad73b8ce62c2f.jpg</center>
---
<center>Hello @afolwalex , Congratulations ✅ . Your content began to appear in the hot section.
I am the information account of "SteemBotTracker" site.
</center>
---
<center>
Your Informations
Total SBD: 2.481
Total STEEM: 7.648
</center>
---
<center>
I recommend to increase this;
You can make "Resteem" and advertise to the followers of the whale accounts.
"Resteem Bot" for you;
✅ The most profitable Resteem Whale @hottopic  has 18.500 Followers + 5200 Sp + Upvote with min +45 accounts. 
</center>
---
<center>
You can purchase "upvote" by bid bots.
"Upvote Bot"
✅ The most profitable whale in the last round. @postpromoter
</center>
---
<center>
I'm taking this message once. You need to use the #steembottrackerr tag for more information.
Those who "upvote" this interpretation will be awarded a "UpVote" prize of 100 Sbd per week per person.
I am a bot, I can not answer the comment. I hope I could help. Good luck. Sorry if I disturbed you.
</center>

properties (22)

`author`	steembottrackerr
`permlink`	20180419t042743394z
`category`	steemiteducation
`json_metadata`	{"tags":["advice"],"app":"steemjs/test"}
`created`	2018-04-19 04:27:48
`last_update`	2018-04-19 04:27:48
`depth`	1
`children`	0
`last_payout`	2018-04-26 04:27:48
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,136
`author_reputation`	-1,493,369,324,060
`root_title`	"MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	50,876,479
`net_rshares`	0

@steemiansarena · Apr 18 '18

Your post has been upvoted by the @steemainsarena community trail. Our goal is to support minnows on steemit to help them grow.  You can join our discord server here; https://discord.gg/V5hJwJn
You can support us by donating steem/sbd or delegating sp to steemainsarena trail to acknowledge our mission.

properties (22)

`author`	steemiansarena
`permlink`	re-afolwalex-making-your-contents-look-great-with-simple-html-codes-20180418t224739380z
`category`	steemiteducation
`json_metadata`	{"tags":["steemiteducation"],"users":["steemainsarena"],"links":["https://discord.gg/V5hJwJn"],"app":"steemit/0.1"}
`created`	2018-04-18 22:47:45
`last_update`	2018-04-18 22:47:45
`depth`	1
`children`	0
`last_payout`	2018-04-25 22:47:45
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	303
`author_reputation`	137,168,100,986
`root_title`	"MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	50,836,872
`net_rshares`	0

@steemitboard · Apr 19 '18

Congratulations @afolwalex! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/posts.png)](http://steemitboard.com/@afolwalex) Award for the number of posts published

Click on any badge to view your own Board of Honor on SteemitBoard.

To support your work, I also upvoted your post!
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> Upvote this notification to help all Steemit users. Learn why [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)