This is the second part of "Making a Simple Post a Little Classier", and we'll go into just a little more detail on this post.

Image credit:DreamyArt from Pixabay.com

In this post we will be using these HTML tags:

<center> text or image </center>
<sup> </sup>(sup stands for superscript)
<div class=text-justify> </div> (div means division)
<br> (br means break)

In the first post we did not use the superscript or the division tags, but I am going to cover them in this post, it's just a matter of putting them in in the correct place.

Photos or Images

We covered picking an image out in our last blog post "Making a Simple Post a Little Classier 1" and you can see that HERE .

We are now going to cover an image from a site that offers free open source images to use, and most of them that I have come across state that no attribution is required:

They normally offer a choice of buying them coffee, or in other words, a donation:

In this case the author of our photo is going to be DreamyArt and we are going to use their name under our image as a sourcing or attribution.

As I normally cannot afford to give my money away, I choose not to, but do want to do something. And as I am a firm believer in doing to others what we would have them do to us, I would like to point out that I don't care who you are, it is nice if someone uses one of your photos or images and puts that credit or attribution out there with your name on it. It does not hurt anything and gets more recognition for whoever this author is.

Images

So the first thing I do is pick out the image I want to use, and copy the URL in the address bar. In this case it is:

![image.png](https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/)

Now that we have our image picked out, and have the author and the site that the image came from with it, we are going to enter it into our text editor and clean it up with some simple coding. I like to enter it and space it out so that we can easily see everything, much better for proofing if something goes amiss.

Second thing is to paste it into our editor, and remove the extra writing and the parenthesis:

![image.png]()

so that it becomes:

https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/

Now just leave space around it.

I will then code the page URL as a link for the information page on Pixabay like this:

<a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/"></a>

I will now right click and copy the image URL, and then code it like this:

<img src="https://files.steempeak.com/file/steempeak/jamerussell/n07lc9dW-image.png">

I will insert the image URL into the info page link so that it links to the information page on the Pixabay site and it becomes:

<a href="INFO PAGE URL"> <img src="PICTURE URL"></a>

and so it will become nice and clean thus becomes:

<center>

<a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/">

<img src="https://files.steempeak.com/file/steempeak/jamerussell/n07lc9dW-image.png">

</a>

</center>

in the editor with this kind of spacing so you can see any mistakes.

Sourcing

So at this point I then right-click on the author's linked name in that information page, and open another tab. Then I have the artist's or author's page. I copy off the URL:

https://pixabay.com/users/dreamyart-512893/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3054736W

Turns out that all this extra coding is for tracking purposes!PLEASE NOTE: I will now remove the extra letters and numbers to simplify, as I just learned this myself thanks to @thekittygirl, otherwise known as Kittypedia!!! Hehe!

It becomes:

https://pixabay.com/users/dreamyart-512893/

Now I code that link just below the image URL and have this:

<center>

<a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/">

<img src="https://files.steempeak.com/file/steempeak/jamerussell/n07lc9dW-image.png">

</a>

</center>

https://pixabay.com/users/dreamyart-512893/

I like to keep them spaced out to see the whole enchilada (hahaha, aren't you hungry now: tacos and enchiladas?)

Now we can take the other two credits, and work them separately:
We take and add our code and the author's name to this URL:

<center> Image credit: <a href="https://pixabay.com/users/dreamyart-512893/">DreamyArt </a>from

And that is our author part, now for the website part:

<a href="https://pixabay.com">Pixabay.com </a></center>

Notice that I did not include the </center><center> in between the two parts, because the sourcing will become on sentence.

Image + sourcing

So now I just work the coding in on the image first:

<center><a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/"> <img src="https://files.steempeak.com/file/steempeak/jamerussell/n07lc9dW-image.png"> </a></center>

And it will look like this in the editor and be a link to the information page in Pixabay:

Now we simply close up the spacing between all of that and we have a nice tucked up attribution, and it should look like this with it all together:

<center>Image credit:<a href="https://pixabay.com/users/dreamyart512893/">DreamyArt</a>from<a href="https://pixabay.com">Pixabay.com</a></center>

And will result in:

Image credit: DreamyArt from Pixabay.com

Now, in our credits, or attribution, we can add the HTML tags <sup> and </sup> ,

it will make the writing smaller and tucked in if we so desire, or we could have inserted them in at the broken down stage, or not used them at all and left it large. If you remember I had made a statement about these specific tags, as it renders the writing really small for mobile users who may not be able to read it.

This is the result of the <sup> and </sup> tags being inserted in our credits:

<center><img src="https://pixabay.com/users/dreamyart-512893/"><sup> Image credit: DreamyArt
from Pixabay.com </sup></center> in our code, and results in this:

^{Image credit: DreamyArt from Pixabay.com}

Also be advised to be considered "correct sourcing", it doesn't need to go to this extreme: for me it is amusement purposes of a freakin' perfectionist!!!

Paragraphs

So this is where we will use the tags <div class=text-justify> and </div> at the end of the paragraph to make it even on the edges and look better.

<div class=text-justify>

So now I am going to close this part off, this is part 2 of making a classier post, please remember that I find this extremely fascinating, and with these small additions one can click on the picture or image to go to the actual full information page, or click on the author, which in this case goes to the author's page in Pixabay, or click on the Pixabay itself to go to the actual home page of the website for Pixabay.com.

</div>

I sincerely hope you all enjoyed reading this post, and I know there are some of you who already knew this, but to me, it was like making notes to myself, and I thoroughly enjoyed writing it for you.

Keep on Steeming!!!
James

^{Thanks to @liberty-minded for such a cool gif and modified by @jimramones}

^{Thanks to @zord189 for the cool autograph gif}

Hey! Did you know @heyhaveyamet and @steem-aide are partners with the @steemterminal? And hey! Did you know they also sponsor the #rally100 and the #rally500 there as well, along with numerous other contests and challenges? They provide for the growth of the new Steemians and the beginnings on the road to Steemdom.

Proud user of

Thanks @steempeak for the great banner

Sort:

Trending

[-]

innerblocks (62) 5 years ago

Thanks for sharing your experience with us!
TIBLogo

Inner BlocksYou have been curated by @wesphilbin on behalf of : a community encouraging first hand content, with each individual living their best life, and being responsible for their own well being. #innerblocks Check it out at @innerblocks for the latest information and community updates, or to show your support via delegation.

$0.02

1 vote

team-mexico (64) 5 years ago

Comunidad mexicana / hive-174683 ¡Te esperamos!Votado por el trail @team-mexico

Delegación: 50 SP, 100 SP, 500 SP.

$0.00

jamerussell (62) 5 years ago

Muchas gracias @team-mexico!

brittandjosie (76) 5 years ago (edited)

Gonna share this beauty in rally 100 and 500 and I don’t mean the blue steem butterfly

Thanks @brittandjosie!!!

enginewitty (76) 5 years ago

Pretty classy :P

@alliedforces curate 2

alliedforces (50) 5 years ago

Keep up the great work and join us in The Castle sometime!
^{@enginewitty and @untersatz.The #spreadlovenotwar curation campaign is under the guidance of witnesses}You got some love from a member of @thealliance family!^{Current VP: 94.85%}

$0.18

Thanks @enginewitty! I tried, but was in no hurry to post, but did all at once and forgot I wanted to put the Spanish on the same post down below like I did on the first one. OOPS!!!

wesphilbin (67) 5 years ago

Another great post as well as example of creating positive content on the Blockchain my friend! Off topic, hope you have a great hatch day today !tip

Thank you @wesphilbin!!!

mllg (70) 5 years ago

I have to practice it, because I was having a hard time pinpointing the sources in the images.
Thank youVery useful this publication dear @jamerussell

Thank you @mllg, I want to try and get someone to translate this into Spanish, I may attempt it, but forgot to set it up from the beginning to implement it.

Well, I think I understood everything.
Just I have a little problem with my new computer, because I didn´t find some commands
Your post will help me,
Thanks.

jackmiller (68) 5 years ago

This one is just for you mate!

Hahahahahahaha!!!! Thanks Jack @jackmiller! Only in our own minds!!!

!trdo

trendotoken (58) 5 years ago

4.99377150 TRDO3.32918100 TRDO curation in 3 Days from Post Created Date!Congratulations @wesphilbin, you successfuly trended the post shared by @jamerussell! @jamerussell will receive & @wesphilbin will get

"Call TRDO, Your Comment Worth Something!"

^{To view or trade TRDO go to steem-engine.com

Join TRDO Discord Channel or Join TRDO Web Site}

@giphy curate

@alliedforces curate

@untersatz curate

untersatz (54) 5 years ago

This post has been upvoted by witness @untersatz. You've done a great job!
^{The @untersatz witness and manual curation is under the guidance of @contrabourdon and @organduo.}^{Current VP: 96.7%}

helpiecake (55) 5 years ago

Hello!

This post has been manually curated, resteemed
and gifted with some virtually delicious cake
from the @helpiecake curation team!

Keep up the great work!Much love to you from all of us at @helpie!

Manually curated by @wesphilbin.

_{Community Witness.

@helpie is a}

tipu (67) 5 years ago

Check out @wesphilbin blog here and follow if you like the content :)

Sending tips with @tipU - how to guide.

🎁 Hi @jamerussell! You have received 0.1 STEEM tip from @wesphilbin!

c-squared (60) 5 years ago

This post was shared in the Curation Collective Discord community
community witness. Please consider using one of your witness votes on us here for curators, and upvoted and resteemed by the @c-squared community account after manual review.@c-squared runs a

sgt-dan (65) 5 years ago

Outstanding tutorial! This is great for everybody! Resteemed and Tweeted!

russia-btc (64) 5 years ago

Oh thanks for the tips - keep going

florianopolis (-9)(1) 5 years ago

Reveal Comment

Making a Simple Post a Little Classier 2

Photos or Images

Images

Sourcing

Image + sourcing

Paragraphs

Delegación: 50 SP, 100 SP, 500 SP.

"Call TRDO, Your Comment Worth Something!"