[NEW] :apppro: AppPro Community HTML Guide (Tips & Tricks)

Welcome to the new version of HTML guide of :apppro: 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:

hello

Center:

Code:

<div align ="center">
hello
</div>

Output:

hello

Right

Code:

<div align ="right">
hello
</div>

Output:

hello

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>&#128512;</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 ( &#124; ).


More Markdown: Markdown guide


Creating extra spaces before or after text

Use this code : &nbsp;

Example :
extra &nbsp;&nbsp;&nbsp; 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

https://community.kodular.io/t/kodular-html-guide/69075

9 Likes

Special Thanks

@Mateja & @Maayur for their support.
@Mohamed_Tamer, @Wallpaperli & @KUMARASWAMY for pointing out the mistakes in my previous guide and passively pushing me to create a new guide.
@Techno_Vedang @rizul For his original idea.
@ADDYLIN for his appreciation

5 Likes

Why <button> does not works on apppro community

1 Like

That doesn’t work and even iFrame doesn’t works.

Can you make it a wiki? @moderators
@AppPro_Staff

It’s already a wiki

2 Likes

Really useful guide, Good job :+1: I’m really happy to know you made it your self :grin:

1 Like

Thank you for your support

1 Like

NICE AND GOOD GUIDE

PLS ADD
center tag to align things in center

i cant type u can tell me how to type tags. pm me i tell u how to use

I will add it soon. Thanks @Ekansh_dev for letting me know

2 Likes

The topic is wiki so you can add it yourself

i cant add code. i know many html tags like bootstrap too

I think due to your trust level

1 Like

no i mean i am wiki i can change but cant add tags . pls add it and then say it to me

2 Likes

Use and

2 Likes

means?

:face_with_raised_eyebrow:

2 Likes

Oh sorry it didn’t work

      `<center>`
`</center`
1 Like

what dint work tell me i will tell u

1 Like

Replying code :sweat_smile: