Tutorial: Understanding HTML Block

-

Tutorial: Understanding HTML Block

HTML is the acronym of Hyper Text Markup Language. It is the base of a website. In JavaScript Block Editor app, we've provided block programming for HTML too.

This tutorial lets you know how to use block specs for HTML.
 This website is also made with JavaScript Block Editor app and we used block programming for HTML!

Prerequisites


➤JavaScript Block Editor app
 Click to download this app

Tutorials:
Open this app and create a project. You will be redirected in a new screen like below.

Here, main is the main room of HTML. It cannot be deleted. When you want to run your project, click RUN. If you want to go to the bottom of specs, click 🔽. Click 🔼 for going to the top of block specs. Editable line is the line after which, spec should be added. For example, if you have 10 lines in your HTML and Editable line is 3; new line will be added in line number 4. And Editable line will be 4 after then. Click 🗃 for viewing and selecting Child Room. You can collapse it by clicking it once again. If you want to add Child Room, click it first and then click +ADD, name and confirm!
If you click GO TO JS, you will be redirected to JavaScript Editor from HTML Editor. Pencil in a circle is the storage of block specs. Click here to get all spec elements.

Let's start practically

Click on pencil. This will appear.

Add a ProgressBar.

For example, enter its id (unique identifier for element; here ProgressBar is an element) , value and maximum value.

Click on 🗃.

Click +ADD to add a child room.

Clidroom cr1 is added.

Add two elements here. We added an EditText and a Button.

Click 🗃 and then click main. You're in now main room.

Add element Horizontal Scroller and name its Child Room cr1.


Now RUN the project.

In first line, a 'ProgressBar with its value' appears. And in the second line, an EditText and a Button appear.
However, now go back and click ⏬ of line 1. Editable line is now 1 this means new spec will be added in line number 2. So let's we ad an element: CheckBox.


Wow! This CheckBox is added in line 2! Now RUN the project.

A CheckBox is shown after the ProgressBar in first line. Now click ❎ of line 1 to delete the ProgressBar. Okay, RUN now.

The ProgressBar has been deleted from here.
So developers, this was the primary tutorial of HTML Block for this app. We'll be coming soon with tutorials for every elements like TextView, Button, CheckBox etc.

Comments

Post a Comment

Popular posts from this blog

SeekBar JavaScript (I)

-
Image
✪ Luminous Organisation JavaScript SeekBar (I) Contents Chapter I What is SeekBar Calling a default SeekBar Setting minimum, maximum and value Getting progress Chapter II Setting progress programmatically Important lifecycle event: On Touch End Importance of SeekBar Wait a minute 1. What is SeekBar ❝A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level❞ — Android Developers. You all know about ProgressBar which displays the current progress of any event. Usually ProgressBar displays progress at a percentage value, such as — downloading (87%) . Like ProgressBar, SeekBar has its current value, minimum and maximum range. We can say ProgressBar an output element, whereas SeekBar is an input element, where user can alter the value within a preset range. Here is an example of SeekBar. Its range is between 80 to 100 and value is 85 by default. Get Progress S...
Read more

Image Editing / Element Filtering | JavaScript Block Editor

-
Image
Image Editing / Element Filtering | JavaScript Block Editor You can add either an ImageView or any other elements such as Button, TextView etc. We have added a Button to edit. 🏞️ 🏞️ The first one is real and the second one is edited by the filtering property of JavaScript. Let's know about it. Prerequisites Download   JavaScript Block Editor  App  HTML Add either an ImageView or any other element such as Button, TextView etc . Hence we can say that this property is not only for an ImageView. Make sure you provide a unique id for that element. Optionally add CSS to that element. For instance you can enlarge the size of that element for a better vision. JS Click ImageView > Edit Image . Provide element id properly. Edit the element in your own way by enhancing filtering effects: Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate, Sepia. Understanding subspecs (!important) Filter effects Effect Default Value Values...
Read more

YouTube Embedding In HTML

-
Image
YouTube Embedding In HTML YouTube Embedding Tutorial Using JavaScript Block Editor Android Application YouTube is one of the most useful tool in the world of technology. If you publish a website, it will be incomplete if you don't link it with your own YouTube channel. Imagine, if anyone leaves your website for watching your video(s) and does not come back to your website, or forgets your context — then what's the opportunity of linking "a href" for YouTube? The solution is — YouTube Embedding . You can embed your video(s) and/or playlist(s) in your website! Users/readers do not have to leave your website. It is a tool provided by Google ; and you, now, can use this tool in JavaScript Block Editor app, too. We also used "YouTube Embedding" in this website! Let's learn how to embed!! Prerequisites YouTube Channel YouTube Public Video(s) or Playlist(s) Allow Embedding from YT Studio Copied Link of Video/Playlist JavaScript Block Editor App St...
Read more