HTML/JS

CIS 273 Lab Assignment 10 Business Website

This assignment consists of three (3) sections: a narrative, a storyboard, and a business Website. You must submit all three (3) sections for the completion of this assignment. The assignment is to be submitted in a single compressed folder (zip file) to the online course shell. Section 3 must contain all .htm files, along with any other files that may be necessary for your project to run (ex: text files, images, etc.). When saving the compressed folder (zip file), it should be saved as Techincal Project_Last name_First initial.zip. For example, if your name is Mary Smith, the file for submission should be saved as Techincal Project_Smith_M.htm
Select a business that you are interested in. (e.g., pet store, travel site, fishing gear, appliances, automobiles, housewares, furniture, etc.). Imagine that you have just been hired to create a four (4) page hierarchical Website for the business you selected.

Section 1: Narrative
Write a half (1/2) page paper in which you:
1. Create a narrative that describes the site to your prospective client.

Section 2: Storyboard
Imagine that your narrative has been approved. Use Word, Visio, or Dia to:
2. Create a storyboard diagram depicting the layout of your Website.

Section 3: Business Website
In order to receive full credit for this section, you will need to submit:
1) One (1) screen shot of your emailed data from the guestbook.
2) One (1) CSS style sheet.
3) Four (4) Web pages.

3. Create your Website based on the following requirements:
a. Create a Cascading Style Sheet (.css) for all pages, which:
i. Applies a background color.
ii. Applies style to font.
iii. Changes the ordered list markers to anything other than the default.
iv. Changes the unordered list markers to anything other than the default.
v. Applies style to a copyright footer.

b. Include:
i. A graphic or logo on the home page.
ii. A navigation bar with links to every other page on the home page.
iii. A guestbook registry on the home page using the mailto: tag with an entry field for:
a. A person’s name.
b. An email address.
iv. A piece of JavaScript on the home page.

c. Create a submit button for the guestbook registry that will email the information to your email address. Note: Test the function and take a screen shot of the emailed information you receive. You must submit the screen shot in your zipped file of deliverables as proof.

d. Create three (3) sub pages that include:
i. The same graphic / logo.
ii. A navigation bar with links to every other page.
iii. An ordered list of at least two (2) items, and then at least two (2) unordered list entries under each ordered list item where one (1) of the items must be a hyperlinked to a Website (the hyperlink should not show the address printed on the page).
Note: Each of the three pages should have unique lists.
Example:
A. Food
? Dry food
? Wet food
? Canned food
B. Toys
? Indoor
? Outdoor

The specific course learning outcomes associated with this assignment are:
1) Describe the structure of the World Wide Web as interconnected hypertext documents.
2) Create and validate HTML documents.
3) Create presentations using Cascading Style Sheets and DHTML.
4) Write clearly and concisely about Web design and development using proper writing mechanics and technical style conventions.

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 14 Case 2 JSWorks

Data Files needed for this Case Problem: js.css, jslogo.png, modernizr-1.5.js, nodestxt.htm, tree.css, treetxt.js

JSWorks Jorge Soto is the owner and administrator of JSWorks, a Web site containing JavaScript tutorials, tips, and specialized apps. Jorge is working on a multipage tutorial concerning the creation and use of document nodes. You are helping Jorge maintain his Web site. You've volunteered to work on his Web page that describes the appearance of the document node tree. Jorge would like you to include a node tree that is based on the article he's writing so that visitors to his site can see the complete appearance of the node tree for a sample HTML fragment. Figure 14-67 shows a preview of the Web page you'll complete for Jorge.

The JavaScript program you'll design will need to use recursion to navigate through the entire structure of Jorge's article. As it proceeds through the article, it will record each element, attribute, and text node and display those nodes in a nested list alongside the article text. The CSS styles for the nested list already have been created for you; your only job will be to generate the HTML code of the nested list. Jorge also wants your code to keep a running count of the total number of nodes, element nodes, attributes, and text nodes, including text nodes containing only white space.
Complete the following:
1. Using your text editor, open nodestxt.htm and treetxt.js from the tutorial.14\case2 folder. Enter your name and the date in the comment section, and then save the files as nodes.htm and tree.js, respectively.
2. Go to the nodes.htm file in your text editor and add a link element to connect the document to the tree.css style sheet. Also add a script element to connect the file to the tree.js JavaScript file.
3. Take some time to study the contents and structure of the document and then close the file, saving your changes.
4. Go to the tree.js file in your text editor. Declare the following global variables: nodeCount to keep a running count of all of the nodes in the source document; elemCount to count the element nodes; attCount to count the attribute nodes; textCount to count the text nodes; and wsCount to count the text nodes containing white space only. Set the initial value of all of these variables to 0.
5. Insert a command to run the setup() function when the page is initially loaded by the browser.
6. Create the writeElemLI() function. The purpose of this function is to create a single list item for the node tree diagram based on the contents of an element node. The structure of the list item is shown in Figure 14-68.
The function has two parameters: elemNode, which represents the element node from the source document on which the list item is based, and nestedList, which represents the nested list that the list item will be appended to. Add the following commands to the function:
a. Create a list item element named liElem containing the text string +--.
b. Create a span element named spanElem. Set the class attribute of the span element to elemLI. (Hint: Use the className property to set the value of the class attribute.)
c. Declare a variable named elemText setting its initial value to the text string <elem where elem is the node name of the element specified in the elemNode parameter.
d. Next you'll examine all of the attribute nodes for the element specified by the elemNode parameter. Create a for loop to go through the nodes in the attributes collection for the elemNode parameter. Each time through the loop increase the value of the nodeCount and attCount variables by 1. Also add the following text string to the value of the elemText variable att='value'
where att is the node name of the attribute node and value is the node value of the attribute node.
e. After the for loop completes, append the text string > to the value of the elemText variable.
f. Create a new text node named elemTextNode containing the text of the elemText variable.
g. Append elemTextNode to spanElem; append spanElem to liElem; and finally, append liElem to nestedList.
7. Create the writeTextLI() function. The purpose of this function is to create a single list item for the node tree diagram based on the contents of a text node. The structure of the list item will be one of the two structures shown in Figure 14-69.
The function has two parameters: textNode, which represents the text node from the source document on which the list item is based, and nestedList, which represents the nested list that the list item will be appended to. Add the following commands to the function:
a. Create the liElem variable for a list item element node containing the text string +--.
b. Create the spanElem variable for a span element node.
c. Store the node value of the textNode parameter in the variable textString.
d. Jorge has provided a function named isWhiteSpaceNode() to determine whether
a text node represents white space or not. Call the isWhiteSpaceNode() function using textString as the parameter value.
e. If the isWhiteSpaceNode() function returns the value true, then: i) increase the value of the wsCount variable by 1; ii) set the class name of spanElem to wsLI; and iii) set the inner HTML of spanElem to the text string #text.
f. If the isWhiteSpaceNode() function returns the value false, then: i) set the class name of spanElem to textLI; and ii) set the inner HTML of spanElem to the value of the nodeValue property for the textNode parameter.
g. Append the spanElem node to the liElem node, and then append the liElem node to the nestedList parameter.
8. Create the makeTree() function. The purpose of this function is to recursively generate all of the nested lists contained in the node tree diagram. The function has two parameters: sourceNode, which represents the current node in the source document being added to the node tree diagram, and nestedList, which represents the nested list in the tree diagram that is being written. Add the following commands to the function:
a. Increase the value of the nodeCount variable by 1.
b. Using the nodeType property, determine whether sourceNode represents an element node or a text node. If it represents an element node, increase the value of the elemCount variable by 1 and call the writeElemLI() function using sourceNode and nestedList as parameter values. If it represents a text node, increase the value of the textCount variable by 1 and call the writeTextLI() function using sourceNode and nestedList as parameter values.
c. Use the childNodes.length property value to determine whether sourceNode contains any child nodes. If it does, then do the following: i) declare the newList variable containing an element node for the ol element; ii) store the text string | in newList; iii) loop through all of the child nodes for sourceNode, and for each child node call the makeTree() function using the child node and newList as the values for the sourceNode and nestedList parameters; and iv) after the loop has finished, append newList to nestedList.
9. Create the setup() function. The purpose of this function is to set up the node tree diagram and report the results. The function has no parameters. Add the following commands to the function:
a. Declare the sourceNode variable referencing the article element with the id main in the current document.
b. Declare the treeBox variable containing an aside element node. Set the id of treeBox to treeBox and set the innerHTML property to h1 Node Tree </h1>.
c. Declare the newList variable containing an ol element node, and then call the makeTree() function using sourceNode and newList as parameter values.
d. Append newList as a child of treeBox.
e. Append treeBox as a child of the section element with the id main.
f. Using the innerHTML property, display the values of the nodeCount, elemCount, attCount, textCount, and wsCount variables within the span elements whose ids are totalNodes, elemNodes, attNodes, textNodes, and wsNodes, respectively.
10. Use comments to document your JavaScript code throughout the program.
11. Save your changes to the file, and then load nodes.htm in your Web browser. Verify that a node tree similar to that shown in Figure 14-67 is displayed alongside Jorge's article, and that the article contains 247 total nodes, 99 element nodes, 8 attribute nodes, and 140 text nodes, of which 56 are white space nodes. (Note: Safari running under iOS may report 57 white space nodes.)
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.

NEW PERSPECTIVE for HTML, XHTML and XML Additional Case 1 Creating a Music School Web Site

Case Young Notes

Complete the following:
1. Use your text editor to open the applicationtxt.htm, eventstxt.htm, fstylestxt.css, lessonstxt.htm, stafftxt.htm, tstylestxt.css, youngtxt.htm, and ystylestxt.css files from the addcases/case1 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as application.htm, events.htm, fstyles.css, lessons.htm, staff.htm, tstyles.css, young.htm, and ystyles.css, respectively, in the same folder.
2. Go to the young.htm file in your text editor. This file contains the Young Notes home page. Brenda wants you to add a graphic of a student to the page with an irregular line wrap around the image. Figure AC1-1 shows a preview of the completed page.

from step 1 -33

32. Save your changes to the file, and then go to the Application page in the Young Notes Web site. Verify that the layout and content of the application form resemble that shown in Figure AC1-5.
33. Submit your completed files to your instructor.

New Perspectives on HTML, XHTML, and Dynamic HTML Chapter 14 Case Problem 1 The Monroe Public Library

The Monroe Public Library At the Monroe Public Library, Denise Kruschev works on the library’s Web site. One of her responsibilities is to add content to the site that will be of interest to the library’s patrons. Denise’s latest assignment is to create a Web page containing links to hundreds of government Web sites. She knows that a long list of links will fill the page, making the page difficult to use. Instead, Denise wants to use “select and go navigation,” in which the links are placed within a selection list. When a user selects a link from the list, the linked page should open automatically. Denise already set up the selection lists, but she asks you to help write the JavaScript program. Figure 14-67 shows a preview of the Web page.

Complete the following:
1. Use your text editor to open the mpltxt.htm and linkstxt.js files from the tutorial.14/case1 folder, enter your name and the date in the comment section of
each file, and then save the files as mpl.htm and links.js, respectively.
2. Go to the mpl.htm file in your text editor and create a link to the links.js file.
3. Scroll through the mpl.htm file, studying the code. Each option in the selection list contains a value referencing the URL of a government Web site. Close the file, saving your changes.
4. Go to the links.js file in your text editor and insert an event handler to run the init() function when the page is loaded.
5. Create the init() function. Within this function do the following:
a. Create a variable named allSelect that references all of the selection elements in the document.
b. For each item within the allSelect object collection, add an onchange event handler that runs the loadLink() function when the selection list changes.
6. Create the loadLink() function. The purpose of this function is to cause the brows er to load a URL from a selection list. Add the following commands to the function:
a. Create a variable named sIndex that points to the index of the selected option in the current selection list. (Hint: Use the this keyword to reference the current selection list.)
b. Web pages can be loaded using the command location.href = url; where url is the URL of theWeb page. Enter this command into the function using the value of the selected option from the selection list as the value of url. (Hint: Use the sIndex variable to point to the selected option from the current selection list.)
7. Save your changes to the file.
8. Open mpl.htm in your Web browser. Verify that by clicking the links from the selection lists on the page you can bring up the corresponding government Web sites.
9. Submit your completed files to your instructor.

Penn Foster Graded Project 40266800 Tutorial 4 Case 2 Tutorial 5 Case 2

New Perspectives on HTML, XHTML, and Dynamic HTML
Tutorial 4 Case 2 Dunston Retreat Center
Tutorial 5 Case 2 Browyer Realty

Lesson 2 Designing Web Pages

For this graded project, you’re going to work on creating and formatting Web pages using tables and frames. You’re going to work on a Web page for the Dunston Retreat Center and format this page with tables. Then you’re going to create a Web page using frames.

Turn to page 235 of your textbook and locate Case Problem 2. Read through the instructions to create the Web page using the tables and text from various htm files. You may want to periodically check your progress by saving your .htm file and viewing the page in a browser. Then turn to page 281 and locate Case Problem 2. Follow the steps for this project.

Note: Make sure you have all the image files for these projects in the same folder. Be sure you send in all image files
for the page to appear correctly to your instructor

Grading
Your project will be graded on the following elements:
Part 1
Dunston Retreat Center image at top of page 10 points _______
Image of man on right margin 10 points _______
Events calendar in left margin 15 points _______
Text beginning with “Welcome. Whether you are…” 10 points _______
Color table on right margin with white text reading, “I’m writing to tell you…” 15 points _______
Green text heading with “Next week at the Dunston Retreat Center” at bottom of page 15 points _______
Dunston Retreat Center address in green in bottom margin 10 points _______
Part 2
Links in listing.htm file (left frame) each show a photo of the property 15 points _______

Penn Foster Graded Project 40266900 Additional Case 2 Tutorial 9 Review and Tutorial 10 Review

Lesson 3 Creating Forms and CSS JavaScript and XHTML

New Perspectives on HTML, XHTML, and Dynamic HTML
Additional Case 2
Tutorial 9 Review
Tutorial 10 Review

In this graded project, you’re going to work on three separate projects, all on concepts you learned in this lesson. First, you’ll create a Web site for Mayer Photography, including style sheets, images, tables, embedded video, and links. Then, you’ll create an XHTML file that you’ll test in an XHTML validator like you did earlier in this lesson. Finally, you’ll add JavaScript to a Web page using a date function.

Part 1
Turn to page HTML ADD 11 and locate “Additional Case 2:
Designing a Style for a Web Site.” Follow the directions to create the pages for this site. Be sure you test your pages and compare them to the images in your book.
Hint: To save time, you can copy the content and formatting from the mayer.htm file to the other files, then update the content in the new files as directed in your text book.

Part 2
Turn to page 513 and locate the Review Assignments section at the bottom of the page. Follow the steps in this assignment to validate a document in XHTML 1.0 strict DTD.
Hint: Use the validator you used in Assignment 9 to test your files Use the validator you used in Assignment 9 to test your files.

Part 3
Turn to page 565 and locate the Review Assignments section. Follow the steps here to create a custom function showing the date from a date object.