HTML Tutor:  By B. Nikhil Baliga

Introduction

Welcome to HTML and Blaze Tutorial. The main objective of this page is to help you learn HTML and also to learn how to use Blaze Editor

(even in Composer... Note: Now Blaze Composer 3.0 has been released, however, this tutorial refers to Composer 2.0.0. Blaze 3.0 is far more powerful than all other versions.) The main reason I put up this page is because of the numerous requests I received from people who liked Blaze but were not able to enjoy it to the maximum because of their ignorance of HTML. So here is an attempt to teach you HTML without delving too much into the depths, but to provide with you with a solid foundation. The entire tutorial is based on the adage - "Example is better than precept"

HTML is used to design web pages. It stands for Hyper Text Markup Language. You can enter HTML codes in any text editor like notepad or NikPad, but I recommend you use Blaze Editor. Open your editor, and start entering the following code. You can also use edit box.

Let's start off...
 Now, if you already know a bit of HTML, and you want to directly jump to some topic, you can go to the sitemap, and look up for the desired topic there.

<html>

</html>

These are called as the HTML tags. The <html> indicates that an HTML page has started, and a </html> indicates that the page has ended. I'll tell you about the tags a little later. Now let's proceed to the next step. Add this:

<html>
<body>

</body>
</html>

Like the HTML tags, these are called as the body tags. <body> says that body tag has started, and </body> says that body tag has ended. Notice the similarity between the two. A / indicates the end of the tag. Now let's see what have we done so far.

The <html> is an indication to the browser that we have started an HTML page. Anything that's between these tags becomes a prt of HTML. Anything that comes between the body tags will appear in the browser. Let's test this. Add the following.

<html>
<body>
My first page is finally here.
</body>
</html>

Saving your page, and viewing it:
 This is a piece of text we have entered. Now, just save this file as first.html or first.htm. If you don't know how to do this, Blaze, Notepad and NikPad users can go to the file menu, and navigate to the save option. Click. Choose the destination folder (Preferably your own folder. For example: C:\html\first.html). Enter first.html in the file name space, and click OK. That's it!!! Your first html page is ready. Now, open your browser (Internet explorer, Netscape Navigator, Mozilla, Opera are some very popular ones, but for the time being, anything will do)

Now, in the address bar, enter the full path of your page. For example: C:\html\first.html  and press enter.

Blaze users can just press F5. Your page will open, and you will see the text, My first page is finally here.  You see? Any text that's entered will appear as it is.

White Spaces:

 Now try this with all the spaces:

<html>
<body>
My           first

page
is      finally              here.
</body>
</html>

Remember, every time you alter your page, you must save it so that the changes can take effect. Save it as before, and preview as before. What do you see? No change? Don't bother saving your file again. Another point to remember, in HTML, white spaces (Such as carriage return, space, tab) have got no value. So what if we want spaces and new lines? We'll see that a little later. Till then, let's have some fun. Let's go to our standard page again.

<html>
<body>
My first page is finally here.
</body>
</html>

Let's begin formatting:
 Now, let's learn some formatting and have some fun. Suppose we want to make some text bold, then we have to use the bold tags. The bold tags are <b> and </b>, Again, the <b> tag says that text following this is to be made bold till the end of bold, </b> is encountered.

<html>
<body>
My <b>first</b> page is finally here.
</body>
</html>

Again, save your page, and watch the preview. The effect is this:

My first page is finally here.

Tag: (Well, you are not it...)
 Now I hope you understand what a tag is. A tag is a code which tells the browser what to do. Every tag starts and ends with < and > respectively. The text with these angular brackets is the actual command. The / before the tag says that the tag has ended. Now, not all tags need to have an ending tag. We'll see these in a while. Till then, let's see how to italicise and underline text. Italicising and underlining work just like the bold tags. The italics tags are <i> and </i> and for underline, it's <u> and </u>. Let's take a quick example and see how it works.

<html>
<body>
My <b>first</b> <u>page is</u> <i>finally</i> here.
</body>
</html>

And of course, the output is :

My first page is finally here.

Note:
If you are using the "Composer" interface  of Blaze Composer 3.0 or Blaze Composer 2.0.0, then you'll find that the WYSIWYG interface will not teach you much about white spaces. Any white space in the composer will be reflect as-is in the real page too, since it is the "What You See Is What You Get" interface.

Nesting of tags:
 Now, suppose we want to add multiple effects to the same word, phrase or sentence, how do we proceed. For this, we use a simple method called as nesting. Nesting is used to avoid confusing the browser. Without nesting the effects might show just the way you wanted it to, but this is not the case everytime.

Nesting is closing tags in the reverse order we opened them The following example will illustrate it better.

<html>
<body>
My <b><i><u>first</u></i></b> page is finally here.
</body>
</html>

Notice the bold tag opened first and closed last. This tag will bold, italice and underline the word first. This will yield the output as:

My first page is finally here.

The following is an incorrect way of writing the code. It might still produce the same result, but please avoid its usage.

<html>
<body>
My <b><i><u>first</b></i></u> page is finally here.
</body>
</html>
Note:
For Blaze users, just select text to be made bold, or italicised or underlined, and press the appropriate button. You'll see that the tags are automatically enclosed in the beginning and the end - This wrapping will save you a lot of time.

Next >>

1