MAKING YOUR CONTENTS LOOK GREAT WITH SIMPLE HTML CODES.

Source: Pixabay

Those codes up there shouldn't scare you. Trust me, it's very easy. You won't write that much.

Well, I’m sure you’ve read some great contents and you were marveled at the way it was constructed. Your interesting write-ups alone won’t draw your viewers; it has to be that great. You’ve seen Steemians create tables, align images anywhere on their blogs, use bulleted lists, do some design. I’m here to guide you on that.

You don’t need to know a programming language to create cool stuffs; all you need to know is how the HTML codes are used. Let’s play with images.

ALIGNING IMAGES

You’ve seen cool stuffs like this and you are wondering how it was done? It’s pretty easy. Just take a look at how the codes in the image are arranged. Then, you are good to go. “pull-right” simply drives the image to the right.

Oh! In case you are not cool with it being at your right hand side, you can also drive it to the left. The “pull-left” does that. Easy! Note: It has to be in a div. Opposite of what we did earlier.

We got that right?

Yes?

In case the images ain't clear, here is what I did:

<div class="pull-right'>Image here</div.>

then your text follows...
That's just it. Change the right to left when aligning it to your left hand side.


How about this?

Now, two images are placed side by side. Creating your gallery will be easy. Once you can place those images beside each other, then, there shouldn’t be a problem.

Just drive one to the left and take the other one to the right. Yes! same way we did above.

USING LISTS

I’ve read a lot of articles here, and most of the authors had problems with listing. You obviously don’t need to start numbering, all you need is a code to do that. Numbering it won’t give you a proper alignment. In fact, differentiating a coded list and the one being imputed manually is easy. How do you know? Proper aligning.



This is the output;

• I am Excited.
• I am super excited.
• Yes! I am excited.
• Okay, that's enough.

The "ul" tag means unordered list. That's why it was listed with bullets. If you prefer numbering, simply change the "ul" to "ol".

I changed it, and I got this.

1. I am Excited.
2. I am super excited.
3. Yes! I am excited.
4. Okay, that's enough.

Amazing right?
Neat?

On my next post, I'll focus on how to create a table and other cool stuffs you will be marveled at.

You can let me know what you will like to do on steemit in the comment section.

All images are owned by the author, @afolwalex.

Until then.....

Wait....

Have you heard of @steemiansarena?
Join the discord server here

Thanks for reading.