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