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

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

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 Hive account@liberty-minded for such a cool gif and modified by Hive account@jimramones}

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

Hey! Did you know

Hive account@heyhaveyamet and

Hive account@steem-aide are partners with the

Hive account@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

Hive account@steempeak for the great banner

Making a Simple Post a Little Classier 2

Photos or Images

Images

Sourcing

Image + sourcing

Paragraphs