Steemit formatting for noobs!

[rigatone]

14 Commands you must know for an impact article!

 

Hi everybody! Here a mini tutorial about must-know codes to format your articles on Steemit
The guide is very simple and I covered all the basic things everyone should know. Shown codes are in markdown and HTML. I suggest to use, in general, markdown for Steemit and use HTML when no alternative is possible.
More, try to avoid that two codes, HTML and markdown, "touch" each other: for instance if a line contains a markdown code, then insert a blank line if the following one contains a HTML code. Same within the same line: if there are two commands in two different languages, then just insert a space between them, otherwise this will cause a conflict and your pc will melt down... no...probably that's excessive :-) .

Let's start with something very very simple that probably most of you already know. We will finish with very simple ideas which give a very positive impact to the reader.

---

Insert a picture in your article:

image markdown:

 ![name](source) 

HTML alternative:

<img src="source" alt="name">

 

---

Insert a link in your article:

Link - Markdown :

 [visible text to click](link) 

Link - HTML:

 <a href = "suorceName">link </a> 

 

---

Insert captions below a picture:

captions

<sub> text </sub>

example:

_test
 

---

Center the text:

<center> text </center>

 

---

This is my favorite command: it is simple and the article will look definitively tidier!

Text Justify:

<div class="text-justify"> text </div>

 

---

The following two commands will be helpful to create columns in your article

Pull the text or an image to the right:

<div class="pull-right"> text  </div>

 

example: text text text test text text

 

---

Pull the text or an image to the left:

<div class="pull-left"> text  </div>

 

example: text text text test text text

 

---

Add a New Blank Line:

This is particularly useful especially when you use HTML codes

&nbsp ;

---

Insert a Table:

This is very useful since each cell could be filled with text or images. The text will look more tidier. Look the examples at the end of the guide!

header first col|header second col
-|-
first row first col|first row second col
second row first col|second row second col

 

example:
 

header first col	header second col
first row first col	first row second col
second row first col	second row second col

 

---

Insert a Line:

 ___

 
To understand what a "line" is, look at the lines between each command of this guide. Is it not tidier?
For instance you can separate topics or paragraphs of an article with lines
 

---

Font Size

You can use different font sizes for the name of the paragraph

###### size 1 font
Text
##### size 2 font
Text
...
# bigger font size
Text

 

---

Markdown Italic

*text*

HTML Italic

 <i>text</i> 

 

 
 
 

example:
text

 

---

Markdown Bold

**text**

HTML Bold

 <b>text</b> 

 

 
 
 

example:

text

 

---

Don't forget to mix the codes!
Here some examples:

 

---

Left and right columns

some text some text some text some text some text some text some text

some text some text some text some text some text some text some text

 
 
 

<div class="pull-left">
some text some text some text some text some text some text some text 
</div>
<div class="pull-right">
some text some text some text some text some text some text some text 
</div>

 



Image as a Link






 




Try to open the link in a new window!
code:
 <a href = "google.it"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="googleLink"> 
</a>  
 



This is a Table


  
This is Google's logo 



This is a Table |
-|
<center> ![alt](https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) </center> |
<center><sub>This is the Google's logo</sub> </center> |

 



Image left, text right





  


some text some text some text 
some text some text some text 
some text some text some text 

 

<div class="pull-left">
<img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="googleLink">  
</div>
<div class="pull-right">
some text some text some text some text some text some text some text 
</div> 

 

That's the end!
I hope you enjoyed my mini guide and I hope you found my suggestions helpful!
For any question or doubts don't hesitate to ask me a question in the comments below!

Comments

[steemitboard]

Congratulations @rigatone! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes

_{Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP}

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - Resteem and Resteemed added

Support SteemitBoard's project! Vote for its witness and get one more award!

[aschatria]

---

This account curates for the @steemrepair and pulls two trails. You've been upvoted for your quality contributions to the Steemit community. To join this initiative follow Steemauto curation trail. Use tag #steemrepair to qualify for a possible reward upvote.

[steemitboard]

Congratulations @rigatone! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes received

_{Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP}

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - Resteem and Resteemed added

Support SteemitBoard's project! Vote for its witness and get one more award!

[steemitboard]

Congratulations @rigatone! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 400 upvotes. Your next target is to reach 500 upvotes.

_{Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP}

Do not miss the last post from @steemitboard:

The Meet the Steemians Contest is over - Results are coming soon ...

Support SteemitBoard's project! Vote for its witness and get one more award!

[steemitboard]

Congratulations @rigatone! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 500 upvotes. Your next target is to reach 600 upvotes.

_{Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP}

Support SteemitBoard's project! Vote for its witness and get one more award!

[steemitboard]

Congratulations @rigatone! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 600 upvotes. Your next target is to reach 700 upvotes.

_{Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP}

Do not miss the last post from @steemitboard:

Christmas Challenge - Send a gift to to your friends

Support SteemitBoard's project! Vote for its witness and get one more award!

[steemitboard]

Congratulations @rigatone! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 700 upvotes. Your next target is to reach 800 upvotes.

_{Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP}

Support SteemitBoard's project! Vote for its witness and get one more award!

[steemitboard]

Congratulations @rigatone! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

_{You can view your badges on your Steem Board and compare to others on the Steem Ranking}

Vote for @Steemitboard as a witness to get one more award and increased upvotes!