Get started - Guide for beginners

Your first app

Welcome to HTML2 world! Let's start our journey through hundreds or thousands of lines of code! But first, you should create an HTML2 file.

Open the folder where you want to code and create a file, named "myfirstapp.html". Well done! Now, of course, you need to open this file.

Let's start our coding with announcement, creation, and configuration of the app:

  1. [html] create "My first app", set: {
  2. title: "My first app";
  3. };

You've just announced, created, and configured (a little bit) your first app! Let's look at it... [html] is tag, that sets your program, create - the verb, which "tells" the program that you are creating an app. After that comes the app's name, which is "My first app". Then, after the comma goes "set: {" - It reports to the program that you are setting this object (but the "set:" part is not necessary)

In new line we are creating our first property - title with value - "My first app". Remember - you can only use it with [html]! This changes the app's title in the top left corner.

Now let's add an icon to your app! You can add an icon with icon property.

  1.     icon: file("icon.png");

So here we see new thing - file(). It's a built-in function, meaning you don't need to connect anything to use this function. But what is it doing? Well, with this function is used to create a reference to a file, which is located where the file with your code is. Otherwise (when icon is in the special folder), you can write file('/images/icon.png'). If you have done everything correctly, the small icon that you made appeared alongside the title!

Now let's make a first object in your project! The [body] tag is used to interact with the program's "body" in HTML2.

  1. [body] create "My first object", class Text, set: {
  2.     text: 'Hello world!';
  3. }

And now let's look at this code! The "create" verb adds an object to the program's interface. "My first object" is, of course, the name of this object. Our new thing is the classes - they're types of created objects, which can vary from simple text, buttons, inputs, dropdowns (lists), and some other more complex classes. The "set: {" allows us to set up the object's properties, just like the program's properties

The next thing is our new property - text, which controls the object's text value.

So if you've done everything correctly, the text, which says 'Hello world!' should pop up. If not, don't worry! It's okay to make mistakes, so try again!

So now we'll create an input field and make our first lines of scripts!

  1. [body] create "My first input", class Input, set: {
  2.     text: 'Input text';
  3. }

Our new object is very similar to our previous object, but with a very big difference - the new Input class! The text property works similarly here.

If an object like this popped up, you've done everything correctly and are ready to go to the next stage - programming our objects!

In the next stage of our HTML learning, we are going to program our Input object to receive text changes and behave accordingly to the text written on it.

  1. [html] decode:

This is your new [html] verb - decode, which is responsible for coding your program. So let's start programming (keep in mind that coding in HTML would be a bit different)!

  1. html.input("My first input") {
  2. "My first object".changeProperty('text', "My first input".getProperty('text');
  3. }

Our first text changes when the text in our Input block changes. Now let's change our Input object depending on its value with some new and fresh properties!

  1. if "My first input".text == "Make it red!" {
  2. "My first input".changeProperty('color', "red");
  3. }