Achievement 4: basic use of markdown// by @shahzadmushtaq

in Newcomers' Community3 years ago (edited)
Asslam-o-alaikum to all, i hope you all are well. Today in this post i am going to tell you about some basic uses of markdown.

photo-1621839673705-6617adf9e890.jpeg
Source

Let start with headings


If you are a computer student and if you are programmer you know about or atleast you hear about html. Here on steemit you use two methods to define your headings.

heading by html


Here by using html tags you can wright your headings like as:

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Preview of these codes is:

heading 1


heading 2


heading 3


heading 4


heading 5

heading 6

second method by using #

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

preview of these code is

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

use some more tags for text

for italic text

<i>italic</i>

Preview:
italic

for bold text

<h3>bold</h3>

Preview:

bold

center text

<center> center </center>

Preview:

center

line on text

~~line on text~~

Preview:
line on text

justify your text

<div class="text-justify">
Here you wright your text which you to justify. As show in preview.
</div>

Preview:

Here you wright your text which you to justify. As here show

without justify

Here you wright your text which you to justify.As here show

use text in two cell

<div class="pull-right"> This text in right because i write code to set it in write side</div>
This text in left side as you see below in preview to understand it.

Preview:

This text in right because i write code to set it in write side
This text in left side as you see below in preview to understand it.

Next use image with text


image at right side of text

<div class="pull-right">

![IMG_20210601_184623_051.jpg](https://cdn.steemitimages.com/DQmdnGMfXqt1jXLD8BuYC74eck6BXZjj9s6Mik1FERWbLdy/IMG_20210601_184623_051.jpg)
</div>
Here you can wright text  about your image. 

Preview:

IMG_20210601_184623_051.jpg

Here you can wright text about your image.

left side image

<div class="pull-left">

![IMG_20210601_184623_051.jpg](https://cdn.steemitimages.com/DQmdnGMfXqt1jXLD8BuYC74eck6BXZjj9s6Mik1FERWbLdy/IMG_20210601_184623_051.jpg)
</div>
Here you can wright text  about your image. 

Preview:

IMG_20210601_184623_051.jpg

Here you can wright text about your image.

Source of image

![photo-1621839673705-6617adf9e890.jpeg](https://cdn.steemitimages.com/DQmQc7Xkc5JjzjBWCnFU2Z7SZNj9nmhfoRf1JVJcajbo1Qv/photo-1621839673705-6617adf9e890.jpeg)
[Source](https://unsplash.com/photos/_t-l5FFH8VA)

Preview:
photo-1621839673705-6617adf9e890.jpeg
Source

lists


Here you can also use html to make list like as:

Order list:
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

Preview:

  1. item 1
  2. item 2
UnOrder list:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
  • item 1
  • item 2
Here👆🏻👆🏻 we make list by using html

Here we use * and number to make list

Ordered list
1. Item1
2. Item2

Preview:

  1. Item1
  2. Item2
UnOrdered list
* Item1
* Item2

Preview:

  • Item1
  • Item2

Table by html

<table >
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    
  </tr>
</table>

Preview:

Heading 1 Heading 2
Cell 1 Cell 2

Table

Header 1 | Header 2
--------- | ----------
Cell 1 | Cell 2

Preview:

Header 1Header 2
Cell 1Cell 2

Here i use some markdown with their code and preview. Thanks!

Sort:  

You have been verified for this task and you may proceed to the next achievement task at your convenience.
Note:

Curators Rate: 2

Please continue to read and prepare from @cryptokannon Achievement tasks resources

 3 years ago 

Hi, @shahzadmushtaq,

Your post has been supported by @tarpan from the Steem Greeter Team.

Coin Marketplace

STEEM 0.18
TRX 0.16
JST 0.029
BTC 77191.63
ETH 2961.40
USDT 1.00
SBD 2.63