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.


<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><center>Image credit:<a href="https://pixabay.com/users/dreamyart512893/">DreamyArt </a>from <a href="https://pixabay.com">Pixabay.com</a></center>

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 <a href="https://steempeak.com/heyhaveyamet/@jamerussell/making-a-simple-post-a-little-classier-1"> HERE </a>.

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: 
<center><img src="https://files.steempeak.com/file/steempeak/jamerussell/HpPPdv5r-image.png"></center>

They normally offer a choice of buying them coffee, or in other words, a donation:  
<center><img src="https://files.steempeak.com/file/steempeak/jamerussell/5YZNmfoH-image.png"></center>
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.

<div class=text-justify>
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. 
</div>
<br>

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

<div class=text-justify>
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.
</div>
<br>

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

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:

<center><img src="https://files.steempeak.com/file/steempeak/jamerussell/3PsptJgm-image.png"></center><center>Image credit:<a href="https://pixabay.com/users/dreamyart-512893/"> DreamyArt </a>from <a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/">Pixabay.com</a></center>

Now, in our credits, or attribution, we can add the HTML tags `<sup>` and `</sup>` , <div class=text-justify>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.
</div>
<br>

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: <a href="https://pixabay.com/users/dreamyart-512893/">DreamyArt 
</a>from<a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/"> Pixabay.com </a>`</sup></center>` in our code, and results in this:

<center><img src="https://files.steempeak.com/file/steempeak/jamerussell/3PsptJgm-image.png"></center><center><sup>Image credit:<a href="https://pixabay.com/users/dreamyart-512893/"> DreamyArt </a>from <a href="https://pixabay.com/photos/butterfly-nature-insect-wing-3054736/"> Pixabay.com </a></sup></center>


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

`</div>`

<br>

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

<center>https://steemitimages.com/0x0/https://cdn.discordapp.com/attachments/572063798630940682/631164562439143464/james4.gif </center><center><sup>Thanks to @liberty-minded for such a cool gif and modified by @jimramones</sup></center>
<br>

<center>https://cdn.steemitimages.com/DQmf55ciT8dXvM7JNhDvEazdEnAUAzE6LUpFFHwJGZY4bW2/jamesrussell.gif</center><center><sup>Thanks to @zord189 for the cool autograph gif</sup></center>
<br>

<div class=text-justify>
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.
</div> 
<br>



<center>[![SteemTerminalBanner.jpg](https://cdn.steemitimages.com/DQmRFHKzC9oeUzMWsV89KScur5G9AsCAuQcLezPrbGHXkRy/SteemTerminalBanner4.jpg)](https://discord.gg/XZGPGpz)</center>
<br>

<center><a href="http://www.thealliance.io" target=Top><img src="https://cdn.steemitimages.com/DQmdPNRLswihRn5tictuGcMSPu1UE5pABfWgbyqgEVQdhci/The_Alliance_Banner.png"></a></center>
<br>

<center><a href="https://discord.gg/BXQhptS"><img 
src="https://files.steempeak.com/file/steempeak/jamerussell/XHRMEIby-image.png"></a></center>
<br>

<center>
Proud user of
![steempeak_banner.jpg](https://files.steempeak.com/file/steempeak/heyhaveyamet/NzpVVPtE-steempeak_banner.jpg)
Thanks @steempeak for the great banner
</center>