Adding Elements to Html5 Documents Using Sublime Text

In today’s class we learn how to add HTML5 elements to how app. This is essential as it will enable your app to have more features such as buttons, image, different type of text (emphasized text, italicized text, bolded text, etc.), select menu, etc.

To start with, we should know that all elements should have a tag, some only have a closing tag while others both have an opening tag and a closing tag.

 

Every opening tag starts with the character <element’s_symbol> – without the apostrophes. Within the brackets is the element’s symbol. you want to use. The following illustrates the idea.

For a paragraph use                        <p>        – note there is no apostrophe.

For a button use                               <button>

For an image use                              <img>

Etc.

 

The closing tag of elements that should have a closing tag should be thus </element’s_symbol>.

Now let’s go forward and see how to add some and more of the elements.

Adding a new paragraph: This is for adding a text paragraph to be seen on any portion of your app.

1. Open your project using your favourite IDE (In this class the common IDE is sublime text).

we have learnt how to do this so I won’t teach how to do this today

2. In the order or position, you want to add the paragraph, type the opening tag together with the element symbol. Note: the good thing about sublime text is that once you start typing for new element it pops up suggestion(s) for you to choose. Once you choose the suggestion that you want it automatically closes the tag if the element needs a closing tag or it just leaves it showing that your element needs no closing tag.Use the down arrow key to move to which options of the suggested tag you want and ENTER.For <p + ENTER sublime text automatically gives you this <p></p>. (Still at code line 101)

   Having done that, the cursor is automatically placed in between the closing and opening tag

   (i.e. <p> CURSUR HERE </p). So, start typing what paragraph text you want or add other elements if you wish.

    

   Adding Buttons: Buttons are usually included for app users to click for app to do something based on user’s choice

   It is done in the same way as described above for adding paragraph. So try it out. The syntax for button is:

   <button> Name of Button/Action Here </button>

   Adding Option Menu: A kind of drop down list for users to choose from.

   Do as above but the element tag should go thus:

   Start typing <sel, choose the <select> and click enter for the below syntax to be generated automatically by sublime text.

   1. <select></select>

   Click ENTER again to make it look thus:

   <select>

    

   </select>

   In between the space between the opening and closing tag where sublime text places the cursor automatically, type and choose <option> for the below syntax to be generated by sublime text automatically.

   2. <option></option>

   Finally type the name of the options in between the opening and closing tag e.g. <option>Subscribe Now</option>

   You can also add more options in the same manner. E.g. for three options. Your syntax should look thus:

   <select>

   <option>option 1</option>

   <option>Option 2</option>

   <option>Option 3</option>

   </select>

   You can try to add and test other elements by typing and choosing any suggestion e.g. <b> for bold text, <i> for italicized text etc. When done, go to your browser and refresh to see the effect of each change you have made.

    

   We have come to the end of this class. Hope it was helpful? See you in the next class. Bye.