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:
[IMAGE: source]
HTML alternative:
<img src="source" alt="name">
Insert a link in your article:
Link - Markdown :
Link - HTML:
<a href = "suorceName">link </a>
Insert captions below a picture:
captions
<sub> text </sub>
example:
test
<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
  ;
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:
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
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 [IMAGE: https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png] This is Google's logo This is a Table <center> [IMAGE: 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>
