Website Construction Summary (Cont.)
  1. Creating Web Pages Using HTML
    2.  HTML stands for Hyper Text Markup Language, which is a markup language for describing web pages. Create a new folder such as 
       ~/public_html/demo/OracleJSON/
    on your account at the server undcemcs02.und.edu, where the tilde slash (~/) is the beginning of a path to a file or directory below the user’s home directory. In the OracleJSON/ folder, use Emacs (or any other text editor) to create the following three HTML files named:

    • index.html, the homepage,
    • Students.html, the data page, and
    • About.html, about the developer.

    ~/public_html/demo/OracleJSON/index.html 
     <!DOCTYPE html>
 <html>
  <head>
   <title>Our Class</title>
   <link href="Site.css" rel="stylesheet">
  </head>

  <body>
   <nav id="nav01"></nav>
   <div id="main">
    <h1>Welcome to Our Class</h1>
    <h3>Web Site Main Ingredients:</h3>
    <p>Pages (HTML)</p>
    <p>Style Sheets (CSS)</p>
    <p>Computer Code (JavaScript)</p>
    <p>Live Data (Files and Databases)</p>
    <footer id="foot01"></footer>
   </div>
   <script src="Script.js"></script>
  </body>
 </html>

    ~/public_html/demo/OracleJSON/Students.html 
    <!DOCTYPE html>
<html>
 <head>
  <title>Our Class</title>
  <link href="Site.css" rel="stylesheet">
 </head>

 <body>
  <nav id="nav01"></nav>
  <div id="main">
   <h1>Students</h1>
   <div id="id01"></div>
   <footer id="foot01"></footer>
  </div>
  <script src="Script.js"></script>
  <script>
   var xmlhttp = new XMLHttpRequest( );
   <!-- The complete path does not work. Don't know why. -->
   var url = "../../cgi-bin/demo/OracleJSON/Students.cgi";
   xmlhttp.onreadystatechange = function( ) {
    if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
     myFunction( xmlhttp.responseText );
    }
   }
   xmlhttp.open( "GET", url, true );
   xmlhttp.send( );

   function myFunction( response ) {
    var arr = JSON.parse( response );
    var i;
    var out  = "<table><tr><th>Name</th>" +
               "<th>City</th>" +
               "<th>Country</th></tr>";
    for ( i = 0; i < arr.length; i++ ) {
     out += "<tr><td>"  + arr[i].Name +
            "</td><td>" + arr[i].City +
            "</td><td>" + arr[i].Country +
            "</td></tr>";
    }
    out += "</table>"
    document.getElementById( "id01" ).innerHTML = out;
   }
  </script>
 </body>
</html>

    ~/public_html/demo/OracleJSON/About.html 
     <!DOCTYPE html>
 <html>
  <head>
   <title>About</title>
   <link href="Site.css" rel="stylesheet">
  </head>

  <body>
   <nav id="nav01"></nav>
   <div id="main">
    <h1>About Us</h1>
    <p>Department of Computer Science, UND</p>
    <footer id="foot01"></footer>
   </div>
   <script src="Script.js"></script>
  </body>
 </html>




      Good things come to those who wait.