Welcome to the new version of HTML guide of community!
This guide works in AppPro, Kodular, MIT App Inventor, Thunkable & in all Discourse powered communities.
Changing size of your text with H1,H2,H3 etc.
<h1> Using Heading (h1, h2, h3 etc.) increases the size of text </h1>
Decrease the number after h
to decrease the size.
The text should be formatted like this
<h5> Post Text </h5>
Result :
H1 This is heading one
H2 This is heading two
H3 This is heading three
There are H4, H5, H6
Making Text Bold & Italic
To make a text bold, you will need to add <strong>
at start and </strong>
at end.
To make a text italic, you will need to add <em>
at start and </em>
at end.
<strong> This text is bold </strong>
<em> Italic Text </em>
Result :
Bold Text
Italic Text
Bold & Italic Text
Note the <b>
and <i>
is deprecated. It is strongly not recommended to use it.
Highlight Your Text
To make your text highlighted , you need to <del>
at start and </del>
at end.
<del> It's your highlighted text </del>
Result :
Highlighted Text
Making Big & Small
Use <small> & </small>
at the start and end of your text to make it small.
Use <big> & <big>
at the start and end to make it big.
Result:
Small Text Here
Big Text Here
Note: The big is deprecated and small tag might be usable for some browser but it’s obsolete. It is suggest avoid using it.
Hyperlinks
Code:
<a href="https://community.apppro.in/">Visit AppPro Community!</a>
Output/Result:
Visit AppPro Community!
Strikethrough
Code <Strike> strikethrough <strike>
Output:
strikethrough text
Alignment
To set the align of any element you want:
Left:
Code:
<div align ="left">
hello
</div>
Output:
Center:
Code:
<div align ="center">
hello
</div>
Output:
Right
Code:
<div align ="right">
hello
</div>
Output:
Making Tables
Code:
<table border="5">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Tony</td>
<td>Stark</td>
<td>50</td>
</tr>
<tr>
<td>Mateja</td>
<td>Srejic</td>
<td>12</td>
</tr>
<tr>
<td>Nisarga</td>
<td>Adhikary</td>
<td>13</td>
</tr>
</table>
Result :
Firstname | Lastname | Age |
---|---|---|
Tony | Stark | 50 |
Mateja | Srejic | 13 |
Nisarga | Adhikary | 13 |
Aligning in tables
To align text/objects in center, use center tag or use the alignment method stated above.
Example: <center>Hi, I am Ekansh </center>
Display Emojis With Code
Code :
<p>😀</p>
Output :
😀
List Of Various Emoji Codes https://www.w3schools.com/charsets/ref_emoji.asp
Adding a text break & deviders
To add a text break to your post:
Code:
<br>
Output :
To add a line to your post:
Code:
<hr>
Output:
Bonus: Markdown
Use of hash (#)
Using # To Increase And Decrease Your Text Size
Use # at the beginning only to change the size of your text.
Using #
One Hash
Using ##
Two Hashes
Using ###
Three Hashes
Using ####
Four Hashes
The more hashes you gonna add the more smaller your text size is gonna be.
You can only use 6 hash at most.
Create table with Markdown:
Instead of using HTML, you can create tables with markdown format. Of cource, the html one has much more functions, but markdown is more simple.
First line: header, use |
to separate every column
Second line: To tells when the element start. Use at least three hyphen ---
for each column.
Then you can add more content below.
Code:
Name | Age
--- | ---
Mateja | 12
Maayur | 18
Result:
Name | Age |
---|---|
Mateja | 12 |
Maayur | 18 |
Alignment of Markdown table:
To align the table, use colon :
to indicate it.
Left Align: :---
Centre Align: :---:
Right Align: ---:
Example:
Name | Age | Gender
:--- | :---: | ------:
Mateja | 12 | Male
Maayur | 18 | Male
Mary | 23 | Female
Result:
Name | Age | Gender |
---|---|---|
Mateja | 12 | Male |
Maayur | 18 | Male |
Mary | 23 | Female |
Note:
Escaping Pipe Characters in Tables
You can display a pipe ( |
) character in a table by using its HTML character code ( |
).
More Markdown: Markdown guide
Creating extra spaces before or after text
Use this code :
Example :
extra space
Result :
extra space
Added by @Salman_Dev
That’s it. More will be added soon. Please let me know if you find any mistakes and problems!
Credit
This topic is inspired by @rizul in Kodular Community