Kodular HTML Guide

Kodular HTML Guide

Hello Koders, this guide is about using HTML in Kodular. This guide works on all Discourse powered communities. This guide is a Very Large guide. I am sorry if I make any mistakes. This guide will be updated regularly. So, let’s get started…

Kodular used HTML4, so HTML5 tags will not work here

What is HTML (Wikipedia)

Hypertext Markup Language ( HTML ) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript ans VBScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags , written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.[2]

To make these things work

To make these things work, you will need to check “HTML Enabled”, which is found in advance of the label in the designer section. If you don’t do this, this HTML will not work.
And write code in the text section Captuhre -⟶Capture

Things Available to use in a label

The tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <b>, <strong>, <del>, <em>, <i>, <small>, <sup>, <sub>, <ul>, <li> are available in label according to me. Other tags like <table>, <td>, <th>, <thead>, <ol> etc are not usable in label.

You cannot make lists & tables in a label.

Bold Text

To make a text bold, you will need to add <b> at the start and </b> at the end like the following code

<b>Bold Text</b>

Result: BoldText

You can also use <strong> at start and </strong> at the end. It’s your choice

<strong>Strong Text</strong>

Result: StrongText

Make text italic

To make a text italic, you will need to add <i> at start and </i> at end. For example:

<i>Italic Text</i>

Result: ItalicText

On the other hand, You can use <em> at the start and </em> at the end. It’s also your choice

<em>Em Text</em>

Result: EMText

Underline a text

To add an underline to a text, you will need to add <u> at the start and </u> at the end. For example:

<u>Underlined Text</u>

Result: UnderlineText

Add a line break to the text

If you want to add a line break to a text, you will have to use the <br> tag where you want to place the line break. For example:

<b>Bold<br>Text</b>

Result: BreakText

Note: You can also use <br/>

Make a paragraph

To make a paragraph, use <p> at the start and </p> at the end. The <p> tag makes a text like a paragraph. You should use it to make a paragraph like:-

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar est in nisl iaculis maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at lobortis sapien. Nullam risus neque, rhoncus eget libero congue, pretium dignissim est. Donec egestas lectus dui, at consequat nunc tempor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla dictum ullamcorper ipsum, quis blandit diam finibus eu. Donec ornare risus et elit convallis, nec mollis dui porta. Nulla facilisi. Aliquam sollicitudin ultrices odio, nec finibus erat. Etiam lacinia, nunc vel commodo sodales, tortor felis venenatis nisi, eu.</p>

Result: Sorry, will give it later

Make deleted text

If you have updated something and you ant to show users your edits, you should use <del> at start and </del> at end. For example:

<del>Deleted Text</del>

Result: WhatsAppImage2020-06-20at5.15.14PM

Make a text subscript

In order to make a text subscript, use <sub> at start and </sub> at the end. For example:

<sub>Subscripted Text</sub>

Result: Subscript

Make a text superscript

In order to make a text subscript, use <sup> at start and </sup> at the end. For example:

<sup>Subscripted Text</sup>

Result: Superscript Sorry, the text should be superscript

Make a text small

If you want to make a text small, you will need to use <small> at the start and </small> at the end like:

<small>Small Text</small>

Result: SmallT ext

If you want to make a text very small, you will need to use multiple <small> like:

<small><small>Very Small Text</small></small>

Result: VerySmallText

Make a text big

If you want to make a text big you will need to use <big> at the start and </big> at the end like:

<big>Big Text</big>

Result: BigText

If you want to make a text very small, you will need to use multiple <big> like:

<big><big>Very Big Text</big></big>

Result: VeryBigText

Make a text heading

To make a text heading you will have to use between the <h1> and <h6> tags

Heading 1

To make heading 1 you will have to use <h1> at start and </h1> at end like:

<h1> Heading 1 </h1>

Result: Heading1

Heading 2

To make heading 2 you will have to use <h2> at start and </h2> at end like:

<h2> Heading 2 </h2>

Result: Heading2

Heading 3

To make heading 3 you will have to use <h3> at start and </h3> at end like:

<h3> Heading 3 </h3>

Result: Heading3

Heading 4

To make heading 4 you will have to use <h4> at start and </h4> at end like:

<h4> Heading 4 </h4>

Result: Heading4

Heading 5

To make heading 5 you will have to use <h5> at start and </h1> at end like:

<h5> Heading 5 </h5>

Result: Heading5

Heading 6

To make heading 6 you will have to use <h6> at start and </h6> at end like:

<h6> Heading 6 </h6>

Result: Heading6

Change font color

To change font color use <font color="{color name}"> at start and </font> at the end. For example:-

 <font color="red">Your Text in RED</font>

Result: YourTextinRED

HTML Emojis

Emojis dont work in Kodular

Result:

Fractional Expressions

To write fractional expressions, you will have to use HTML Entities.
Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. A character entity looks like this:

& *entity_name* ;
OR
&# *entity_number* ;

–More things later–
For a list of all HTML Entities, click here

That is for today, more things will be added later as you guys recommend me to add things

Other things

i have used no blocks

Images

Images of HTML Result

Capture Capturey

Files

I thought to give the files to help better understand. So here they are:-

AIA: HTMLEverything.aia (3.6 KB)
AIS: HTMLEverything.ais (5.5 KB)
APK: HTMLEverything.apk (5.0 MB)

Credits

Thanks to @bodymindpower for her idea of <small>
Thanks to @bestprintsf for his idea of single and multiple <big>
Thanks to @Vaibhav for his idea of fractional expression ie. HTML entities
Thanks to @e_sorrentino72 for his idea of emojis
Thanks

Thank you

I hope you liked this guide. If you have any type of question. Feel free to ask me. I will try my best to answer your questions. I wish a reply from you about my guide. By the ways, thank you so much.

If this guide helped you, please like this guide

emphasised text
40 Likes

This is the better and more informative one. Good Job and keep it up!

1 Like

I will try my best to update these

3 Likes

You can add this to you guide:
Font color working in label, can check yourself
<font color="red">Your Text in RED</font>
Big Text
<big>Big Text</big> or
Extra Big Text
<big><big>Big Text</big></big>

1 Like

Also you can add this :point_down: to your list as mentioned there already

P.S: Why not make this post a wiki so that any one can edit/add the information

1 Like

Thanks bestprintsf & Vaibhav
I will give <big> extra <big> and fractional expressions today

ok bestprintsf

1 Like

Remenber slash to close the efect <big>Big Text</big> :wink:

2 Likes

Maybe you can show some blocks where those tags are used and how it looks.

2 Likes

Thank you Peter

Do I really look so masculine? :wink:

Is there really a difference whether you use <small> or <big> several times?

sorry for my mistake

sorry

There is a difference

Anyone with new things, please tell me

… and that would be?

Look at the image section

I can’t understand. Sorry, please tell me again

You can add, would be the reason to use this.
<font color="red">Your Text in RED. </font><font color="blue">Your Text in BLUE</font>

All in one label and result is:
Your Text in RED. Your Text in BLUE

This way you have multiple colors in one label

1 Like

He is not have tl3

2 Likes

It is a wiki now so anyone can edit it.

1 Like

Can this be used with colin tree list view

1 Like

Does ColinTree List view supports HTML? if yes then why not try it yourself? And then tell us if it works or not. :slightly_smiling_face:

If it doesn’t supports then obvious answer will be No :wink:

2 Likes