Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

Platform Independence

A third design goal of HTML was to provide for the platform-independent display of information. The goal was not for documents to look exactly the same on all platforms, but to empower document authors to specify formatting rules that would ensure that documents looked their best on any platform.

For example, Listing 1 is the HTML code for a very simple data input form. The figures that follow illustrate how this Web page appears in Microsoft Internet Explorer Version 5.5 on a Windows 2000 client (see Figure 1) and in Netscape Navigator 4.x on a Unix client (see Figure 2).

Listing 1: An HTML Data Input Form

<html>
 <head>
  <title>Example Web Page</title>
 </head>
 <body>
  <h1 align="Center">Example Web Page</h1>
  <h3>Data Entry Form</h3>
  <form name="DataForm" action="input.asp">
   <b>Name: </b><input type="Text" Size="30" name="txtName"><br>
   <b>Address: </b><input type="Text" Size="40" name="txtAddr"><br>
   <b>City: </b><input type="Text" Size="20" name="txtCity"> &nbsp;
   <b>State: </b><input type="Text" Size="2" name="txtState"> &nbsp;
   <b>Zip: </b><input type="Text" Size="5" name="txtZip"><br>
   <br>
   <b>Member? </b><input type="Checkbox" name="cbMember" checked><br>
   <br>
   <input type="Submit" Value="Submit"> &nbsp;
   <input type="Reset" Value="Clear">
  </form> 
 </body>
</html>

This HTML code specifies several formatting rules for the textual elements, along with a number of interactive form elements.

Figure 1 The data input form in Internet Explorer.

Figure 2 The data input form in Netscape Navigator.

These figures illustrate how two different Web browsers interpret and display the same HTML code. Notice that although the resulting Web page looks somewhat different in the two figures, in both cases, the elements follow the general rules specified by the HTML code.

For example, the major heading "Sample Web Page" appears as the largest textual element on the page and is centered in the browser window. The next heading, "Data Entry Form," is smaller than the first heading but larger than the other textual elements. Finally, the form provides functional text boxes, buttons, and a check box.

The low-level code required to implement elements such as these would be drastically different on each of these two platforms. However, using HTML, the Web page author can assume that no matter what platform is used to view the page, the resulting output will follow the specified general rules and have the expected functionality.

  • + Share This
  • 🔖 Save To Your Account