COP2500 Assignment 1

Deliverables: To complete this assignment you must perfom three tasks --
1.) Write your name and email on the sign-in sheet being passed around.
2.) Show the lab instructor the source code and visible web pages named "hello_world.html", "hello_me.html", and "commands.html".
3.) Either print out your html code in the lab and turn it in to your lab instructor, OR email your html documents to your lab instructor before midnight tonight. Note: you can only turn in a printed version during the lab.

Introduction: The goal of this assignment is to allow you to become familiar with writing simple HTML documents and HTML with JavaScript.

As discussed in class, HTML uses tags to instruct the browser on how to display things. The HTML tags you will use today are the basic ones required to structure the HTML document ( <html> <head> <title> and <body> ) plus a few simple formatting tags such as <br> (line break) and <hr> (horizontal rule). You will also practice using the standard font sizes defined for use within HTML ( <H1> , <H2> , ... , <H7> ). There are many many more tags available, and learning HTML is simply a matter of finding the right tag to do the right thing.

In addition you will write some very simple JavaScript scripts. The scripts you write today will consist of a series of output statements. Javascript uses the command document.write( "text" ); to send text to the browser. The browser then interprets the text as part of the HTML document and displays the result on the screen. You will then learn a few simple JavaScript commands. Using JavaScript allows for web pages to become dynamic and sophisticated. See the links page on the course web site for examples.

Procedures:
PART 1:

  1. Open a text editor on your computer. You will want to use either Notepad or Wordpad. They both should be found by clicking Start/Programs/Accessories.
  2. Using your text editor create a new document. You are going to write your first html document for this course. Do not close out the window until after the lab instructor has had time to verify your work.

    Write the following in the document:
    <html>
    <head>
    <title> Put your name here </title>
    <!-- This is a comment line - ignored by the browser -->
    <!-- Name: Put your name here -->
    <!-- Email: Put your email here -->
    <!-- Lab 01 -->
    </head>
    <body>
    <h1> Hello, World! </h1> <br>
    <h3> Hello, World! </h3> <br>
    <h7> Hello, World! </h7> <br>
    <hr>
    JavaScript uses a function called document.write to write things to the screen. <br>
    <script language="JavaScript">
    document.write(" <h1> Hello, World! </h1> <br> ");
    document.write(" <h3> Hello, World! </h3> <br> ");
    document.write(" <h7> Hello, World! </h7> <br> ");
    </script>
    </body>
    </html>

  3. Save the file on the computer as "hello_world.html". You probably want to save the file on the Desktop so that it is easily found.
  4. Open a browser and verify that the file displays properly. Keep this window open until the instructor has had time to verifiy your work (go on to part two while waiting for him).
PART 2:
  1. Open another text editor window.
  2. Create an html document that display the following using only the JavaScript document.write() function. You will still need the four basic HTML tags of course, but put the JavaSCript in the body using the <script> tags.
  3. Save this file as "hello_me.html" and open a browser to verify that the page displays correctly. If the page does not look right, then look through the file for small errors - commas used where semi-colons should be and such. Correct the file and re-save until it displays properly. Keep both the editor window and browser window open until the instructor can verify your work.
PART 3:
  1. Open a third text editor window.
  2. Create an html document and name it "commands.html", then type the following script in it.
    <script language="JavaScript">
    var x;
    var y;
    var z;
    x = 17;
    y = 42;
    z = x + y;
    document.write("TEXT CAN BE CREATED FROM MULTIPLE WRITE STATEMENTS:<br>"); document.write("The sum of x + y =");
    document.write( z );
    document.write("<br>");
    document.write("OR ONE WRITE COMMAND CAN CONTAIN MULTIPLE PARTS OF THE TEXT:<BR>");
    document.write("The sum of x + y =" + z + "<br>");
    document.write("THE WRITE STATEMENT CAN EVEN CONTAIN MATH EXPRESSIONS:<BR>");
    document.write("The sume of x + y =" + (x + y) + "<br>");
    document.write("<p>Just for thought - notice how the plus sign meant two different things in the example above?<br>");
    document.write("Let's explore that a little more.<br>");
    document.write("If x and y are integers, then x + y =" + (x + y));
    document.write(" (standard math addition)<br>");
    x = "Hello, ";
    y = "World!";
    document.write("If x and y are text, then x + y =" + (x + y) );
    document.write(" (concatenation of text)");
    </script>