Making a Simple Post a Little Classier 2

in education •  2 months ago  (edited)

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

SteemTerminalBanner.jpg







Proud user of
steempeak_banner.jpg
Thanks @steempeak for the great banner

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for sharing your experience with us!
TIBLogo

You have been curated by @wesphilbin on behalf of Inner Blocks: 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.

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

Delegación: 50 SP, 100 SP, 500 SP.
teammexico (1).png

Muchas gracias @team-mexico!

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

Thanks @brittandjosie!!!

Pretty classy :P

@alliedforces curate 2

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

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

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

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

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.

This one is just for you mate!

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

  ·  2 months ago Reveal Comment

!trdo

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

"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

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

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

Sending tips with @tipU - how to guide.

@giphy curate

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


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

@untersatz curate

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%

Oh thanks for the tips - keep going

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

Hello!

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

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


helpiecake

Manually curated by @wesphilbin.


@helpie is a Community Witness.