Beginner Basics: How to Format Your Posts (Using Markdown & HTML)

2년 전


Tutorial on how to format & align your posts to make them look nicer using the Markdown & HTML syntax.

Markdown

  • To italicize, enclose with *
  • To bold, enclose with **
  • Use *** to both italicize & make bold
  • Hyperlink using [text](link) and replace "text" with the text you want to hyperlink & "link" with the URL you want to hyperlink to
  • Create numbered lists using 1. 2. etc. and unordered lists using * followed by a space then your text
  • Remember to use the YouTube embed code when embedding videos in your post & placing them one line below your text (NOT adjacent to your text!)
  • Use the strikethrough feature on your words by enclosing them with ~~
  • Change titles to heading 1, 2, 3, etc. using # ## ### etc. followed by a space then your title
  • Quote others using blockquotes >

HTML

  • Center your text/images using <center></center>
  • Make your text bold with <strong></strong>
  • Italicize your text with <i></i>
  • Hyperlink text using <a href="link">text</a> and replace "text" with the text you want to hyperlink & "link" with the URL you want to hyperlink to
  • Hyperlink images using <a href="link"><img src="https://InsertYourOwnImageHere.com"></a> and replace "https://InsertYourOwnImageHere.com" with the picture's URL you want to hyperlink & "link" with the URL you want to hyperlink to
  • Change titles to heading 1, 2, 3, etc. using <h1></h1> <h2></h2> <h3></h3> etc.
  • Align pictures to the left/right of your text by using <p><div class=pull-left>link</div>text</p> and replace "text" with your own text, "link" with the picture's URL, and change "left" to "right" if you want to align the photo to the right of your text (otherwise leave this part as-is)

This video was recorded in collaboration with @world5list as per requested by @world-travel-pro for his father @yankee-statman. Check out the final product of René's post using the formatting skills he learned here: https://steemit.com/steemit/@world5list/introducing-steemit-journeys-another-hard-push

As mentioned in the video, here's a link to the cheatsheet I was referring to: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links

Check out my previous "Beginner Basics" post here: https://steemit.com/steemit/@theywillkillyou/beginner-basics-your-steemit-wallet-steem-vs-sbd-vs-sp-powering-up-and-cashing-out


▶️ DTube
▶️ IPFS
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!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

Thank you very much for this post, it is very helpful to me

·

My pleasure! I'm glad to be of service :)

Great post! Upvoted, resteemed and added to my favourites in chrome!

·

Glad to hear that you'll be able to use it for future reference :) Makes it worth all the work put into it!

thanks for shareing important post, i like Dtube

·

Thanks, I like it too!

·

Thanks, I like it too!

Great info! I am going to start dolling my posts up now! Thanks, following for more and upvoted/resteemed so others can improve their content creation!

·

Thanks for your support! I'm really looking forward to seeing your future dolled up posts :)

@theywillkillyou can you please teach me how to use dtube thanks

·

Gladly :) First visit https://d.tube/ and log in using your handle (gratefulayn) and your private posting key (Wallet > Permissions > Show Private Key). Once you're there, click on the upwards arrow at the top right corner of your browser to upload a video.

On the upload page, drag the video you want to upload into the center box. Then give your video a title, description, and tags. Click "Upload Snap" to upload a thumbnail. Once your video has been uploaded, click on the red "Submit" button at the bottom of the page & you're done!

Your write up is really helpful. I just need direction on how to upload a photo of mine as my display picture. Am finding it difficult and your guidance will be well appreciated

·

Sure thing! Click on "Post" at the top right corner of your browser (you won't actually be posting). Then upload a photo by click on the green "selecting them" button

Screen Shot 2018-03-05 at 10.22.59 AM.png

and select the photo you'd like to upload. Once it's uploaded, copy the URL that appears (make sure you delete everything else surrounding it).

Screen Shot 2018-03-05 at 10.24.24 AM.png

Then go to your blog page > Settings and paste the URL in the "Profile picture url" field. Click "Update" at the bottom of the page & voilà!

Saved this post to my bookmarks when I need reminder hot do to stuff on Steemit. Thanks!

·

Awesome! It really makes me happy to know you that find this a helpful resource you'll be able to keep referring to in the future :)

Newbies will certainly find this very useful. Thanks for sharing.

·

Yess im a newbie and it is very useful. Thanks 🙏

·

And thanks for checking it out as always my friend :)

Thanks! I need this :)

·

Glad to be of service my friend :)

So Helpful! Thank you Angelo!

·

My pleasure :) Hope you & @yankee-statman were able to use some of the info!

Thanks will use some of it next time for my blogs

·

My pleasure, I'm looking forward to reading it!

Thank you. I have another post I have saved to help me as I begin formatting, and this will go nicely with it. So far I have gotten down centering and source citation. I found your post in my feed thanks to Aggroed resteeming you.

·

@aggroed is a great guy! @world5list & I actually just finished an AWESOME interview with him for a new Steemit-based project we're starting :)

And I'm glad you were able to find this useful. It's my goal to provide as much value/help to the community as possible, so if you have any questions in the future when moving forward, please don't hesitate to reach out!

·
·

Thanks for responding. Yeah, I find @aggroed is a good source for finding others who are helpful. Guessing it is the water rises to its own level principle. I will check out @world5lists blog too.

please explain to an 80year -old.
italicise, enclose with a *. what do you enclose it with? [] or( ) or maybe {}
is there a space? between the bracket?

To bold, enclose with **. what are they enclosed in as above, I presume the answer is the same.

Hyperlink??? what is that???? maybe under a different name,
where would I use it???

Create numbered lists using 1. 2. etc. and unordered lists using * followed by a space then your text ????
Use the strikethrough feature on your words by enclosing them with ~~
Why? just delete the word
For the youngies that might mean something, for the doddery it just BS
please simplify so I can apriciate your work

·

I'm more than happy to explain it :)

italicise, enclose with a *. what do you enclose it with? [] or( ) or maybe {}
is there a space? between the bracket?

So by placing a * before & after a word (no spaces), it will write the word with italics. Ex: *hello* appears as hello. Same goes for making a word appear bolder/thicker.

Hyperlink??? what is that???? maybe under a different name,
where would I use it???

A hyperlink is when you can click on a word so that it takes you to another website, like this :). By clicking on like this you'll be taken to Google.com. You would use it so that you're not leaving a huge link like this: https://steemit.com/history/@len.george/vought-corsair-f4-u-nz-5501-to-nz-5550-1944-to-1949-part-7

Instead, it would appear in a shorter form.

Create numbered lists using 1. 2. etc. and unordered lists using * followed by a space then your text ????

Sometimes lists are necessary to:

  1. make things appear in a more organized form, and
  2. sort out your ideas in a cleaner, easier-to-read format.
  • You can also use regular bullet points like these rather than number!

Why? just delete the word
For the youngies that might mean something, for the doddery it just BS
please simplify so I can apriciate your work

Some writers like to use LOVE to use this effect as a means to publicly/openly correct themselves in front of their readers ;)

·
·

Thank you for taking your time to explain things.
will resteem it so I can find it in the future.

Very useful guide you arranged here, kapatid! I was fortunate enough to have memorized markdown for a different blog a while back, so I didn't have any trouble transitioning here. The markdown used here is even limited, the more expanded version gives users the ability to assign links variables so that you can easily reuse them anywhere. Image resizing, etc.

Might I add the use of ![placeholder](link-to-image)for easier images. Steemit does make it easy by formatting images by just puttinf the link to it though.

·

Great point! And it's always important to title your image properly so that it appears as the ![placeholder], which acts as metadata & helps immensely with SEO ;)

·
·

Gotta watch out for dem SEO caveats haha!

I use MarkdownPad 2 for writing markdown text. It's really helpful, because you can click and view the result immediately.

·

Is it available on android?

·

Oh wow I wasn't aware of that. Thank you so much for your contribution!

·
·

You're welcome.

I don't think it's available for other than Windows, @samirich. Not MarkdownPad 2 at least, but some other program might be.