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.

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:

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/)

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 @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:

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

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:

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>

</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

Proud user of

Thanks @steempeak for the great banner