Basic HTML - Source tab

Basic HTML tutorial, enough to understand the Source tab.

HTML is a very simple language which makes it possible to view text and pictures through a browser in our computer using an Internet connection. The original HTML is rather old and basic, but most of it is still valid. So I will stick to only basic terms and how to use them.

The WYSIWYG editor in our site is set up to accept full HTML and has two tabs (sections):

The default (where the editor opens) visual tab (WYSIWYG=what you see is what you get) and the Source tab (HTML source)

When you write a small sentence in the visual tab and then apply some simple formatting using the available icons and open the Source tab you will see some strange things there. For example:

Let us suppose we write a few words, as we do now and using the icons we apply some basic formatting (same as you do in your home word processor) we are automatically generating HTML tags, let us see them:

Here they are (the above paragraph in HTML language):

<p>Let us suppose <strong>we write a few </strong><u><strong>words</strong></u>, as we do now and using the icons we apply some basic formatting (<span style="background-color: rgb(204, 255, 204);">same as you do in your home word processor</span>) we are automatically generating <span style="font-size: larger;"><span style="color: rgb(255, 0, 0);"><strong>HTML</strong></span></span> tags, let us see them:</p>

• You will notice that <strong>we write a few </strong> is shown in the visual form above as bold, anything included between <strong> and </strong> when written in the Source tab will be shown as bold.
• You will notice that <u><strong>words</strong></u> is bold and underlined, so it is obvious that anything included between <u> and </u> will be underlined. One thing to watch is that when there is more than one tag is used they much be closing in the same sequence as they started, i.e. in the above example <u><strong> must be closing as </strong></u> and not </u></strong>
• Check the other two examples of formatting and you will be tempted to open a new page, or forum topic, or book or anything and try as many combinations as you wish and keep your notes in a separate text editor. Basically you can write your own tutorial.
• Keep in mind that there are literally thousands of very good free tutorials, live on the Internet. Don't get carried away, you don't need to become an HTML programmer (no money anymore in this field)

We will add below some basic tags with a few words on how to use them. The list may become long, so come back here from time to time to check for more. For now just a few:

1. <p> must always be followed with </p> provides usually a double spacing between paragraphs. You may see in some areas under the Source tab the following:<p>&nbsp;</p> what this does is forcing a double space in an area. Sometimes this maybe undesirable, then you must manually use the:
2. <br /> Used for single spacing of paragraphs. It does not require closing and you need to try for the best location of it, especially when you replace the <p>&nbsp;</p> with <br /><br /> or more. Also if you are writing a long text in the visual tab and you do not wish too many double spaces, you can use the Shift Enter which will create a single spacing only (the equivalent of one <br />).
3. &nbsp; is not really a tag, but it is a special character indicating an empty space. Some times, in order to make thing show better you must use this character.
4. A table is formed in its basic form from <table> enclosing the full table</table>, <tr>enclosing a full row</tr> and <td>enclosing a full column</td>, but some times we need special features to our table, such as basic alignment, combining rows or columns ect.
5. More on the table, rows and columns:

A typical table if inserted from the icon above with 1 row and 2 columns will look like this:

<table cellspacing="1" cellpadding="1" border="1" width="100%">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

In the pop-up window for table construction you have the options to: change cellspacing and cellpadding, as well as, change the border size and the width which is shown as default 200 pixels, a rather small table. We changed in the above, the width to "100%", which means we want the table to fill 100% of the available space in our page (excluding the side bar). We left the border at the default 1, but you may find it nicer without a border and set border to "0". Then the way this table is setup both columns will be of equal width, or they may automatically adjust to the width of pictures and text inserted. I find it that it provides better control when we select the column width as shown below:

<table cellspacing="1" cellpadding="1" border="1" width="100%">
    <tbody>
        <tr>
            <td width="25%">&nbsp;</td>
            <td width="75%">&nbsp;</td>
        </tr>
    </tbody>
</table>

Now our table looks like this and let's try to use it by defining some of the table related attributes:

 As you can see, at least in my browser (Firefox) the border line despite the fact that I increase it to 2 is still missing, this is why my suggestion is to use border zero.

Note: If you would like to be brave and use various HTML tags, then you must add them in the proper location and under the Source tab. If you enter a tag in the visual tab, then it behaves like normal text entry, only if you switch to the Source tag and try to find it it will look totally different. For example <td> will look as &lt;td&gt; in the Source tab and it is meaningless.

Keep also in mind that if you use in the visual tab the icon to create a table, you must place your mouse cursor in the location that you wish the table to start. Otherwise it will all be mixed up. The same applies to pictures to be inserted. Most tags can be applied after the facts, i.e. after you wrote your text, you select the word(s) you wish to make bold and click on the B icon and so on. There is a problem that you may face from time to time, which needs your basic understanding of HTML. Suppose you, select a paragraph, from your already written text and decide to change the alignment to align center. Then all of a sudden the whole article (or more than one paragraph) become aligned center. You only option is to open the Source tab and find the beginning and end of the centering command, it will look something like this: <p style="text-align: center;">More to come....</p> and then pick up the <p style="text-align: center;"> and do a cut and paste it where it is supposed to be. You may have to do the same with the closing tag </p>. The more I write thae more I get the feeling that I sould write a more detailed HTML tutorial with the basic tags and all the problems that will be faced. Patience and I need your help with questions, suggestions and any input.

More to come....