Lesson 4   

Basic Tags

                                     At the end of this session,   you will be able to:

Ø   Use  Basic  Tags

Ø  Insert  Images

The steps  given  in  this  session  are detailed,  comprehensive  and  carefully  thought  through.

This has been done so that the learning objective are met the understanding of the tool is complete. Please follow the steps carefully.

In order to execute the programs follow the steps given below:

1.      Create a folder, HTML-DHTML-JS- Examples under D:\ and save all the .html files in this folder only. (If you don’t have D drive, create the folder under C :\)

2.      Invoke Notepad application by clicking on the “Start” button and then “Accessories”.

3.      Type the code mentioned in Part 1.

4.      Click on the files, Save As option.

5.      Save the file as .html in D:\HTML-DHTML-JS-Examples directory. Give an appropriate name to the file.   Or save it in your login directory.

6.      Invoke Internet Explorer or any browser.

7.      Click on the file, Open option, select Browse and choose the file from D:\HTML-DHTML-JS-Examples directory.

HTML code to place the heading at the center of the browser

                    The following Figure 4.1 illustrates the output the above code.

Figure 4.1: Output

The tags used in the above HTML code are:

Ø  <TITLE>   ……  </TITLE>

Text within the Title tag is displayed as the title of   the browser   window.

Ø  <P>      …….     </P>

To  create  paragraphs,  the  <P>  tag   needs  to  be  used.</P>  tag  can  be  neglected  from end   of  the   paragraph. The  logical  beginning   of  a  new    paragraph  will  be  the  end  of  the  previous   paragraph.

Ø  <FONT>

          For  the  fires paragraph,  Times  New  Roman  and  the  font  size  of  5  is  applied.  For  the  second  paragraph  Arial  and   the  font  size  of  4  is  applied.

Ø  <B>    and   <I>

         The   above  tag  is  applied  only  to  the  first    paragraph  that  appears  bold  and  italic.

Ø  <CENTER>

          The  tag  is  associated   with  the  second  paragraph   that   displays  it  in  the  center.

          Note  the  use  of  special  characters   in  the  code  to  display  the  actual  of  the  browser.

Figure  4.2 shows  then   output  in  the   browser  with  the  implementation  of  paragraph  settings.

Figure 4.2: Output

                                      Write HTML code to right align a block of text using DIV tag

Figure 4.2: Output

                                      Write HTML code to right align a block of text using DIV tag

                           The output of the above code in the browser is as shown in the Figure 4.3.

                                                     Figure 4.3: output

            Create a line, which is half the size of the window and with a thickness of 5 pixels

                                 The output is as displayed in figure 4.4.

                                                             Figure 4.4: output

                     Create an ordered list that starts from C and is an uppercase sequence list

 The HTML code will display a list in Capital letters since the type attribute has a value “A” and the sequence start from “C” because the start value is 3. That is, the list should start from the third letter onwards.

                                Figure 4.5 display the output of the code above.

                                                             Figure 4.5 Output

                                    To insert an image into HTML document

                                 

                       Figure 4.6 displays the output of the above code.

                                                    Figure 4.6 Output