Make Your Post Stylish- The Ultimate Guide To Markdown & HTML Code Guide for Beginners

in OCD5 years ago (edited)

Hello, Friends Today's post is for Those users who don't know how we use markup to make our post stylish and unique that attract the reader. This is a quick markdown reference with samples that I made for my own use. I want to share this with you so that it can help you to write Stylish and beautiful posts using HTML markup, Here we go.

Contents

  1. Headings
  2. Text Formatting
  3. Breaklines
  4. Lists (Order-List and Un-Order-List)
  5. Centralized Text
  6. Quotes
  7. Inline Code
  8. Block Code
  9. Text/image layout (Align the text/images left and right)
  10. Links and Images
  11. Tables
  12. Embedded Youtube Video


Src

1. Headings

1. Heading 1

# Heading 1

Heading 2

## Heading 2

Heading 3

### Heading 3

Heading 4

#### Heading 4
Heading 5

##### Heading 5

Heading 6
###### Heading 6

2. Text Formating

Guide how you can format your text, Decent, Stylish and Beautiful.

Bold

**Bold**
<strong>Bold</strong>
<b>Bold</b>
__Bold__

Bold
Bold
Bold
Bold

Italic

<i>Italic<i>
*Italic*
_Italic_

Italic
Italic
Italic

Strikethrough

~~Strikethrough~~
<strike>strikethrough</strike>

Strikethrough
strikethrough

Bold/Italic

We can use the bold tag along side with the italic tag so our text can get both attributes of bold and itlaic.

**_my username is @wajahatsardar_**
<b><i>My username is @wajahatsardar</i></b>
__*My username is @wajahatsardar*__

My username is @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar

Bold/Italic/Strikethrough

You can use these three combine with each other as follow.

**_~~My username is @wajahatsardar~~_**
<b><i><strike>My username is @wajahatsardar</strike><i></b> 
__*~~My username is @wajahatsardar~~*__

My username is @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar

3. Breaklines

Break lines are used to break the lines forcefully.

---
***
<br>
***
<hr>

4. Lists

Lists are of two types

  1. Order List
  2. Unorder List

Order Lists

An ordered list typically is a numbered list of items. It gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.

<ol>
<li>Item 1</li>
<li>Item 2></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

You can also make Order-list just like this and whatever number you will allot the list it will arrange it in order that's why it is known as Order-list. You can create simply Number then dot(.) than a word/sentence.
Example
1.Word/Sentence

1. Item 1
2. Item 2
2. Item 3
5. Item 4
5. Item 5
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Un-Order-List

<ul>
<li>Item 1</li>
<li>Item 2></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
  • Item 1
  • Item 2>
  • Item 3
  • Item 4
  • Item 5

You can also create Un_Order_list by adding +, -, * then space and then Word/Sentence

    • Item 1
      * Item 1
    • Item 2
      - Item 2
    • Item 3
      + Item 3

5. Center

<center> My user name is @wajahatsardar</center>

My user name is @wajahatsardar

Center/Bold/Italic/Strikethrough
<center>**_~~My username is @wajahatsardar~~_**</center>

My username is @wajahatsardar

6. Quotes

> My username is @wajahatsardar

My username is @wajahatsardar

7. Inline code

Use `Code` for Inline code 
`My username is @wajahatsardar`

My username is @wajahatsardar
Use Code for Inline code

8. Code block

 ```
 Code block
 ```

Surround your Code by triple backticks both beginning and at the end.

Code block

9. Text/image layout

<div class="justify-text">
Text or images go here.
</div>

---

<div class="pull-left">
Text or images go here.
</div>

<div class="pull-right">
Text or images go here.
</div>

---
Use div class justify-text

My username is @wajahatsardar I'm 23-Year-old working on Steem/Hive blockchain.


Use div class pull-left

My username is @wajahatsardar I'm 23-Year-old working on Steem blockchain.
https://steemit.com/@wajahatsardar

Use div class pull-right

My username is @wajahatsardar I'm 23-Year-old working on Hive blockchain.
https://hive.blog/@wajahatsardar.


10. [Links and Images]:

https://steemit.com/
https://steemit.com/

[Source](link of the image)

[Image src](https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg)

11. Tables

User|Posts|Steem Power|Hive Power
-|-|-|-
Wajahatsardar|1000|4500|4000
xyz|200|9000|30000
abc|38|288|2626|
UserPostsSteem PowerHive Power
Wajahatsardar100045004000
xyz200900030000
abc382882626

11. Insert Youtube video

https://www.youtube.com/watch?v=xAgZYCHi8MQ


src

  • Earn Passive Manna by simply signing up for it here. Manabase is a Universal Basic Income Cryptocurrency.
  • Earn Ecoin just by creating Account click Here. Ecoin current price

Sort:  

One step at the time