Lesson 2.1

Introduction and Hyperlink

The steps given in this session are detailed, comprehensive and carefully   thought through. This has been done so that the learning objectives are met and the understanding of the tool is complete. Please follow the steps carefully.

In order to execute the programs follow the steps give 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 File, Save As option.

5.     Save the file as.html in D:\HTML-DHTML-JS-Example directory. Give  an appropriate name to the file, for Example, lab11 (Lab 11 indicates Example 1 from Lab Guide 1 ) or  save it in login directory

6.     Invoke Internet Explorer.

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

HTML code to illustrate an anchor tag

Note: Before you run the above code, the file, TEST.HTML, must exist. It has  the following  content(type these contents in  a   new Notepad  file  and save the file as TEST.HTML in the  same folder as  the  other HTML source  files):

   

The syntax is:

                                    <A HREF=”TEST.HTML”>CLICK HERE</A>

It will create “CLICK HERE” as  the hyperlink  and on clicking  this  link  it  will take  you  to  the  page TEST.HTML.

The output of the code above is shown in Figure 2.1a and Figure 2.1b.

                                  Figure 2.1 a: Output (before clicking on the link)

Figure 2.1b: Output (after clicking on the link)

Scrolling to a location in the same document

In the code given below four anchor references are defined as follows:

Ø  Overview

Ø  Benefits

Ø  Features

Ø  Technical  Specifications

                                 The output of the code above is shown in Figure2.2.

Figure 2.2 a: Output

Figure 2.2: Output (after clicking on   Overview)

Figure 2.2 c: Output (after clicking on Benefits)

Figure 2.2 d: Output (after clicking on Features)

Figure 2.2 d: Output (after clicking on Technical Specifications)

                            

Using Special Characters   in the HTML document

                                                                       Figure 2.3: Output 

Figure 2.4: Output

When the  above  the page  is  displayed  in  the  browser, notice  the  status  bar. The  page  gets refreshed  after every 2  seconds.