This chapter discuss on HTML developing, its structure and its applications.
Developing an Dynamic HTML Document
This section develops a simple DHTML document, which has 5 major segments (designed using DIV tags). The first segment has one password box and a command button. This segment alone is visible when the document is loaded in browser and all other segments are invisible. When a user enters a password and clicks the command button, the script written for the command button’s click event, verifies the validity of the entered password. It is valid the first segment disappears and second segment appears, which has three option 9radio) buttons. The other three segments are designed for each option button and they are positioned at a same. Location. Because only visible and other two segments are made invisible. This DHTML is named as India. Htm, as it describes about Indian monuments and its listing is given below:
<HTML>
<HEAD>
<TITLE>
Indian Monuments
</TITLE>
<SCRIPT language = “VBScript”>
Sub Opt1_ onclick ()
divFor Opt1.Style. Visibility = “Visible”
divFor Opt2.Style. Visibility = “Hidden”
divFor Opt3.Style. Visibility = “Hidden”
End Sub
Sub Opt2 _ Onclick ()
divFor Opt1.Style. Visibility = “Visible”
divFor Opt2.Style. Visibility = “Hidden”
divFor Opt3.Style. Visibility = “Hidden”
End Sub
Sub Opt3 _ Onclick ()
divFor Opt1.Style. Visibility = “Visible”
divFor Opt2.Style. Visibility = “Hidden”
divFor Opt3.Style. Visibility = “Hidden”
End Sub
Sub cmdLogin_OnClick ()
If frm Login.txtPword.Value = “Indian” then
Msgbox “You are logged in”
divLogin.Style. Visibility = “Hidden”
divOptions.Style. Visibility = “Visible”
divFor Opt1.Style. Visibility = “Visible”
Else
Msgbox “password incorrect”
End if
End Sub
</SCRITP>
</HEAD>
<BODY background = “bacjgrd.fig”>
<CENTRE>
<DIV id = Login>
<FORM id = frm login>
<LABEL> password Id = txt pword>
</LABEL>
<INPUT type = button id = cmd login value = “Login”>
</FORM>
</DIV>
<DIV id = div options Style = “Position: Absolute;
Left;20 Top:90; Visibility: Hidden”>
Choose any one of monuments MBR>
To view its description
<DIV Style = “Position : Relative; Top:10; width:130; height:80;
background- color: Yellow”>
<FORM id =frm Options>
<INPUT type = Radio name = Monument Id = Opt1 checked > taj
mahal <BR>
< INPUT type = Radio name = Monument Id = Opt2 checked > qutub minar <BR>
<INPUT type = Radio name = Monument Id = Opt3 checked > Fatehpur siki <BR>
</DIV>
</FORM>
</DIV>
<DIV Id = divFor Opt1 style = “Visibility : Hidden”>
<IMG Scr = “C\Ragruam\Images\Tajmahal.GIF”
Style = “Position : Absolute; Left 275; top: 85;
<DIV Style = “Position: Absolute; left 20 top: 240: width 450; background-color:yellow”>
one among the 7 world wonders. Built by Shajahan at the river bank of Yamuna.
</DIV>
</DIV>
<DIV Id = divFor Opt2 Style = “Visibility : Hidden”>
<IMG Scr = “C\Ragruam\Images\Qminar.Gid”
Style = “Position : Absolute; left 275; Top: 85”>
<DIV Style = “Position: Absolute; Left 20 top 240: width 450;
background color:yellow”>
Astonishing tower with height 242 feet. Started by Quthuputheen and successfully completed by Eldhuthmish.
</DIV>
</DIV>
<DIV Id = divFor Opt3.Style = “Visibility : Hidden”>
<IMG Scr = “C\Ragruam\Images\FSikri.Gif”
Style = “Position : Absolute; left 275; Top: 85”>
<DIV Style = “Position: Absolute; Left 20 top 240: width 450;
background color:yellow”>
Instance for sculpting art. Nick named as love designed in stone. Built by great emperor Akbar.
</DIV>
</DIV>
</BODY>
</HTML>
When this HTML page is opened in the internet explorer it will prompt to enter the password as in figure.
Figure: India.htm – prompting the visitor to enter the password.
Enter the password Indian and click login button. Now the first segment in this document that contains the textfield button, will disappear and the other segments that describes about Indian monuments will appear as in Figure.
DHTML application in Visual Basic
So far, web pages are created in non visual environment (Notepad). Creating web pages in this method consumes much time and also positioning the controls and elements of web page at proper location will cause the developer’s eye turn to red. As so much of tags are used even to create simple web pages, there, is a chance that few tags may be misspelled. And it is difficult to trace out the error caused due to this misspelling.
Visual Basic 6.0 includes new project type called DHTML application, which provides visual environment to rapidly develop the DHTML applications.
Web pages VS. Forms
DHTML applications are structured differently than forms based Visual Basic applications. In a DHTML application, the user interface consists of a series of HTML pages rather than forms. An HTML pages is like a form in that it contains all the Visual elements that makes up the application’s user interface. Textbox, Image, radio button and check boxes can easily be placed on an HTML at desired locations.
An HTML page is stored in a htm file that is analogous to a frm file. The following table sums up the differences between forms based applications and web-based application.
Form – based application | Web – based application | |
User interface | Visual Basic forms | HTML pages |
File format | .frm files | .html or html files. Or generated from |
Visual Basic codeCreatorDeveloperWeb designer or developerRun timeVisual Basic runtime DLL, msvbvm60.dllWeb browser with msvbvm60.dll
Table: Difference between forms based application and web based application.
24.4 Structure of DHTML application
DHTML applications are mode up of the following pieces:
- One or more HTML pages
- Visual Basic code that handles the events generated from the HTML pages.
- A project DLL that contains Visual Basic code is accessed by the run time components garneted automatically when the application is compiled.
When a DHTML project is compiled, all HTML pages are stored in separate .htm file. The code that handles the events generated from the HTML pages are compiled in to a .dll files. The id of the .dll file is automatically included in the .htm files. So whenever and event rises from a .htm file, the code for that event in the .dll files is executed by the browser automatically.
Advantages of Visual Basic DHTML applications
Visual Environment HTML pages can be created in the familiar Visual Basic IDE. As it is a visual environment, control can be placed in the HTML page at the desired locations easily. Debugging tools can also be used to fix the bugs in VBscripts.
Code security When scripts are embedded with an HTML page, anyone can access the page, read the script, and make changes to it. S Visual Basic compiles the code into .dll the code is not part of the HTML file itself, and so it can’t be tampered.
The DHTML page designer
When a project of type DHTML is opened, Visual Basic Presents DHTML page designer as in Figure 5.4 which enables to:
- Create a new HTML page, or edit the contents of an existing page.
- Determine which elements on the page re programmable and explore all dynamic elements on the page.
- Access the code editor window to write code for each programmable element of the page.
The following sections brief the different areas of the DHTML page designer.
Figure: HTML Page Designer.
Tree view pane
Display a hierarchical representation of all of the elements. Within an HTML page. For each element, the page designer lists the ID (if one exists), the type of control and in some cases the beginning for the content for that element, Elements with IDs are indicated in bold. All elements in the tree view are children of the body element and the document object.
Detail pane
Present a drawing surface that enables to create a new page or edit the contents of an existing page. It provides a visual environment to add HTML to the page, position them, and set properties that control their physical appearance.
Format tool bar band
Contains buttons that are frequently used when formatting an HTML page in the designer. The items on this toolbar are available whenever a DIV element, or a hyperlink, or a piece for text, or the BODY or DOCUMENT object in the treeview or detail panes of the designer is selected.
When a toolbar button is clicked to carry out the action represented by the button, Visual Basic inserts the appropriate opening and closing HTML tags or tag attributes to the selection. These tags are not visible within the designer, but the result of formatting are rendered in the detail pane.
Element Toolbar band
Contains buttons that are fr4equently used when grouping the elements on the page such as by using DIV tag or working with tables. With the exception of the table operations icon, the options on this toolbar band are available only when some elements are selected. The table operations icon is always available.
Note: The HTML files created using DHTML page designer are stored in the files the extension |
.dsr. the actual .htm files are created only when the application is compiled.
Creating an DHTML application using Visual Basic
This section shows how to create a simple DHTML application, which contains three HTML pages.
The First HTML page has a hyperlink that leads to the second HTML page. The second page contains a command whose clicking leads to the third page using code. This is not a full fledged application. But the purpose of this section is to show how creation of the DHTML applications is simpler than by using HTML tags.
To create the DHTML application
- Choose File |New project open the New project dialog box
- Double click the DHTML application icon.
DHTML application icon
This will create a new DHTML application with default DHTML page (DHTML page)
- Choose project | Add DHTML page to add the second page.
- Repeat the above step to add the third page.
- Name the project as seas, DHTML page1 as Arabic sea, DHTML page2 as Bay of Bengal, and DHTML page3 as Indian ocean using properties window.
- In the project explorer window double click as Arabic sea to bring its design window front.
- In the format band select header 1 for the HTML block elements combo box and enter “Arabic sea” in the details pane.
- Hit enter and type the following:
Click me to go to bay of Bengal
- Select the word “me” and click the make selection into link icon in the element toolbar band.
- Right click on the word “me” in the popup menu that appears, choose properties. This will display the properties dialog box.
- Enter Bay of Bengal .htm in the link text box and leads to bay of Bengal in the popup text box as in figure 5.5 this text will appear in the browser window when the mouse pointer
- Moves over the hypertext “me” when it is clicked 4 Bay of Bengal .htm page will appear in the browser.
Figure: destination (through Link) and Popup text for the hypertext “Me”
The designed DHTML page Arabic sea should resemble the figure
Figure: Designed DHTML Page Arabic Sea.
- In the project explorer window double click the bay of Bengal to bring its design window front.
- In the Format band select Hander 1 from the HTML block elements combo box and enter “Bay of Bengal” in the details pane.
- Draw a button and set its caption as “Click me to go to Indian ocean”
The designed DHTML page Bay of Bengal should resemble the figure.
Figure: Designed DHTML Page Bay of Bengal.
- Write the following lines for the button’s (Click me to go…) click event procedure base window. Location .href = “Indian ocean .htm”
The above line assign the HTML file name “Indian ocean .htm” to the href (Hyper line reference) property of the location object of the base windows to jump to that file.
- In the project explore window double click the Indian ocean to bring its design window front.
- In the format band select header 1 from the HTML block elements combo box and enter “Indian ocean’ in the details pane
- Save the project and choose file |make seas.dll
l
- When the Visual Basic prompts the .dll file name accept the default file name seas. Dell
- When the Visual Basic prompts file name for each DHTML files, enter them as Arabic sea. Htm, Bay of Bengal. Htm, and Indian ocean respectively
- Open the Internet explorer and in its address text box type Arabic sea, htm with full path and hit enter. This will open the Arabic sea. Htm file in the internet Explorer.
- Test the hyperlink and button to jump to their destinations.