Web Design
Table of Contents
by Arnold Kling
First Assignment for JavaScript

The objective of this assignment is to help to organize your site about a hobby or interest (your first project) using JavaScript and CSS. You will be able to put the same header on every page of your site, and you will be able to change the header by changing code on a single JavaScript page.

  1. Make sure that all of the HTML pages for your project are in a directory or subdirectory called project. If they are not in such a directory, you may have to create that directory and move the pages. If you do have to move the pages, make sure that you change the link from your main index page, and make sure that all of the links within the project site still work (they should).

  2. Within the project directory, create a new file, and call it library.js. This will be a library of scripts that will be used throughout your site. Delete any html code that Angelfire puts onto this page, so that it is blank. Then add the following JavaScript code:

    function writeheader(){
    headercss = '<link rel = "stylesheet" href = '
    + '"projectcss.css" type = "text/css">';
    headertopright = '<div class = "topright">'
    + 'All About Othello<br>Arnold Kling</div>';
    header = headercss + headertopright;
    document.write(header);
    }

    Of course, you will want to change the name from All About Othello to the name of your site, and you will want to change my name to your name.

  3. Next, create a new file called projectcss.css. This will be the style sheet for your project. You can use this to help to provide formatting and color on your project pages. To begin with, we will use it to make sure that the name of the project and your name appear at the top right. On the style sheet, remember to delete the HTML code from the Angelfire editor so that you start with a blank page. Then put in:

    .topright{
    float: right;
    width: 25%;
    font-size: 125%;
    }

  4. Now, go to one of the pages on your project site, and insert the following code right under the <html> tag.

    <head>
    <script language = "JavaScript" src = "library.js">
    </script>
    </head>
    <body>
    <script language = "JavaScript">
    writeheader();
    </script>

    If below the above code there is still a <body> tag, then get rid of this second body tag. It is important that the reference to the file library.js be embedded in the <head></head> tags, or else the library.js file will not be found.

    This page is working when the name of your project and your name appear on the upper right of the page. At this point, you have an HTML page that links to a JavaScript function which in turn connects a style sheet back to your HTML.

  5. Next, try putting the code above (starting with <head>) onto every page on your project site. Test to make sure that the header now shows up on every page.

  6. Now, you can proceed to expand your header. For example, you could put the words "Web Design Class Project" underneath your name. Try doing this in the HTML code on one page. When it is working, cut the HTML code from your HTML page and paste it into the appropriate place in library.js. Doing this will cause the words "Web Design Class Project" to appear on every page on your site.