Department of Information Technology
WEBD242
Course Name: Web Development using XHTML
3 Credit Hours
Length of Course: 8 weeks
Prerequisite: WEBD241 - Web Development Using JavaScript
Table of Contents
Instructor Information
Instructor :
Email :
Phone:
Course Description (Catalog)
This course focuses on the theory and principles of various programming languages that are used on the web, with particular focus on HTML, XHTML, and DHTML. Students will explore the principles of Object Oriented Programming (OOP); examine inheritance, encapsulation, and polymorphism. They will also examine the components of OOP languages; the scope, protocols and parameters for various methods, such as: dynamic text ranges (move, moveStart, moveEnd, moveToPoint, moveToElement, getElementById, getBookmark, compareEndPoints, setEndPoints, Expand, Collapse, FindText), transition ranges (blendTrans, revealTrans), event propagation (stopPropogation, addEventListener, removeEventListener), dynamic content
(createAttribute, createElement, createTextNode, cloneNode), dynamic styles (CSS) and dynamic positioning (CSS-P) (coordinate systems, absolute positioning, relative positioning, and dynamic data binding). Students will explore the principles governing the animation of text
(pulsating text, expanding text, flying text, drag and drop). This course focuses on improving the user-application interactivity via dynamic content, animation, media (audio and video), forms, web-safe colors, styles, and Cascading Style Sheet (CSS). (Prerequisite: WEBD121) [ 3
Semester Hours ]
1
Course Scope
This course is part of the suite of web publishing courses; it is also one of the courses in the
Certificate in Web Publishing. This course focuses on the essential concepts of HTML, XHTM, and DHTML. This course examines the process for developing web pages with tables, frames, forms, cascading style sheets, and embedded multimedia. Students will be introduced to scripting, event handling, objects, object models, and dynamic content.
Course Objectives
1. Evaluate the evolution of the World Wide Web (WWW) in terms of the need for scripting languages and cascading style sheets; also differentiate between scripting languages, markup languages, and programming languages.
2. Compare and contrast the features of SGML, HTML, XHTML, and DHTML
3. Appraise the impact of XHTML and DHTML on Information Technology Management and on
Global Economies as it applies to data collection, eCommerce, and security on the Web; and examine the legal issues related to accessibility and Section 508.
4. Analyze the principles of Object Oriented Programming; and disting uish between “Object-
Oriented” and “Object-Based” language systems.
5. Appraise the principles and power of Document Object Models (DOM) that offer object-based programming capabilities; also compare and contrast the Internet Explorer and the Netscape
Document Object Models.
6. Assess the principles and practice of using tables to standardize and manage the layout of web pages; also examine the role of Cascading Style Sheets (CSS) in standardizing formats across multiple web pages and in improving the efficiency of the user-application interaction.
7. Analyze the principles of user-application interaction; and enhance this interaction with the use of audio, video, animation, rollover effects, menus, filters, and Java Applets.
8. Examine the rudiments of JavaScript, XHTML, and DHTML and apply this knowledge to develop Web pages.
Course Delivery Method
This course will enable students to complete academic work in a flexible manner completely online. Course materials and access to an online learning management system will be made available to each student.
Online assignments are due by the last day of each week and include Discussion Forum questions (accomplished in groups through a threaded discussion forum), examinations and quizzes (graded electronically), and individual assignments (submitted for review by the Faculty Member). Assigned faculty will support the students throughout this eight-week course.
2
Course Materials
Authors Book Title Publication
Info
CENGAGE
ISBN
Patrick
Carey
New Perspectives on HTML, CSS, and Dynamic HTML, 5 th
Ed
978-1-285-28848-2
Evaluation Procedures
1. Detailed instructions for weekly assignments are found in Appendix B .
2. Refer to the e-classroom instructions
( Appendix C ) to find out how to upload
assignments, participate in online Discussion Forum discussions, and take exams.
3. Evaluation Criteria
Graded Assignment
Discussion Forum: Introduction
Higher Ed Problem
Percent of Final Grade
6
7
Red Ball Pizza Problem 7
Discussion Forum : Defining Colors in HTML
Sports Blogger Problem
Dessert Web Problem
Midterm Project/Assignment
Discussion Forum : Well Formed XHTML
Document
Midwest Student Union Problem
Discussion Forum : Arrays, Loops, Conditional
Statements
The Light House Problem
New Accents Photography Problem
6
7
7
12
6
7
6
7
7
Final Project/Assignment 15
Grading Scale
Please see the student handbook to reference the University’s grading scale.
3
Course Outline
8 Week Course
(Click on the Week Number to Hyperlink to Detailed Information)
Week
Topic(s)
Developing a
Web Page and a Web
Site
Working with
Cascading
Style
Sheets,
Special
Effects and
Advanced
Styles
Working with
Web Tables and Web
Forms
Working with
Multimedia and
Enhancing a
Website with
CSS
Learning
Objective(s)
See
Appendix B
See
Appendix B
See
Appendix B
See
Appendix B
Working with
XHTML,
Java Script
See
Appendix B
Reading(s)
Carey Tutorials
1,2
Carey Tutorials
3,4
Carey Tutorials
5,6
Carey Tutorials
7,8
Carey Tutorials
9,10
Assignment(s)
Discussion Forum
Introduction
Higher Ed Problem
Discussion Forum Defining
Colors in HTML
Red Ball Pizza Problem
Sports Blogger Problem
Dessert Web Problem
Midterm
Project/Assignment
Discussion Forum Well
Formed XHTML Document
Midwest Student Union
Problem
Working with
Operators,
Expressions,
Arrays,
Loops and
Conditional
Statements
Working with
Document
Objects,
Nodes and
Styles
Colors,
Accessibility,
Frames,
See
Appendix B
See
Appendix B
See
Appendix B
Carey Tutorials
11,12
Carey Tutorials
13,14
Appendix
Materials (As
Interested)
Discussion Forum Arrays,
Loops, Conditional
Statements
The Light House Problem
New Accents Photography
Problem
Final Project/Assignment
4
Cookies,
Regular
Expressions
Instructor
Biography
Weekly
Student
Course
Guide e-Classroom
Instructions
Policies
Please see the student handbook to reference all University policies. Quick links to frequently asked about policies are listed below.
Drop/Withdrawal Policy
Plagiarism Policy
Extension Process and Policy
Academic Services
ONLINE LIBRARY RESEARCH CENTER & LEARNING RESOURCES
The Online Library Resource Center is available to enrolled students and faculty from inside the electronic campus. This is your starting point for access to online books, subscription periodicals, and Web resources that are designed to support your classes and generally not available through search engines on the open Web. In addition, the Center provides access to special learning resources, which the University has contracted to assist with your studies. Questions can be directed to orc@apus.edu
.
Charles Town Library and Inter Library Loan: The University maintains a special library with a limited number of supporting volumes, collection of our professors’ publication, and services to search and borrow research books and articles from other libraries.
Electronic Books: You can use the online library to uncover and download over 50,000 titles, which have been scanned and made available in electronic format.
Electronic Journals: The University provides access to over 12,000 journals, which are available in electronic form and only through limited subscription services.
Turnitin.com: Turnitin.com
is a tool to improve student research skills that also detect plagiarism. Turnitin.com provides resources on developing topics and assignments that encourage and guide students in producing papers that are intellectually honest, original in thought, and clear in expression. This tool helps ensure a culture of adherence to the
University's standards for intellectual honesty. Turnitin.com also reviews students' papers for matches with Internet materials and with thousands of student papers in its database, and returns an Originality Report to instructors and/or students.
Smarthinking: Students have access to 10 free hours of tutoring service per year through Smarthinking . Tutoring is available in the following subjects: math (basic math through advanced calculus), science (biology, chemistry, and physics), accounting,
5
statistics, economics, Spanish , writing, grammar, and more. Additional information is located in the Online Research Center. From the ORC home page, click on either the
“Writing Center” or “Tutoring Center” and then click “Smarthinking.” All login information is available.
Selected Bibliography
1. HTML & XHTML: The Complete Reference, 5 th
Edition by Thomas Powell, Publications:
Osborne ISBN: 978-0071496292.
2. Beginning Web Programming with HTML, XHTML, and CSS, 2 nd
Edition by Jon Duckett,
Publications: Wrox ISBN: 978-0470259313.
3. HTML, XHTML, and CSS Bible, 5 th
Edition by Steven Schafer, Publications: Wiley, ISBN:
978-0470523964.
4. Dynamic HTML: The Definitive Reference, 3 rd
Edition by Danny Goodman, Publications:
O’Reilly, ISBN: 978-0596527402.
Appendix A – Instructor Biography
Ms. Lara Denesia ( Biography )
Appendix B – Weekly Student Course Guide
Week 1 – Developing Web Pages and Web Sites
Objectives: Successful students will be able to :
Explore the history of the Internet, the Web, and HTML
Compare the different versions of HTML
Study the syntax of HTML tags and attributes
Define a Web page head, body, and title
Work with the HTML5 structural elements
Mark page headings, paragraphs, block quotes, and addresses
Create unordered and ordered lists
Apply an external style sheet to a Web page
Run a JavaScript program
Mark text-level elements including strong and emphasized text
Insert inline images and line breaks
Insert special characters from extended character sets
Explore how to storyboard a Web site
Create navigation lists
Create links between documents in a Web site
6
Understand absolute and relative folder paths
Set a base path
Mark a location with the id attribute
Create a link to an id
Mark an image as a link
Create an image map
Understand URLs
Link to a resource on the Web
Link to an e-mail address
Work with hypertext attributes
Work with metadata
Required Readings: Tutorial 1 & 2
Turn-Ins:
I.
1. Introduction - Introduce yourself in Discussion Forums and respond to at least 2 of your
classmates (Back to e-Classroom Instructions).
2. Click on the “ Forums ” and “ Introduce Yourself ” links
A. Click " REPLY TO THIS MESSAGE " and enter a short introductory paragraph about yourself, what you are majoring in and what you expect learn from this course.
B. Click Reply
C. Respond to 2 other student’s answers by clicking the Subthread link located beneath their answer
D. Click the Submit button
3. I encourage you to upload a picture of yourself (optional) in your " My Profile " to personalize the online interaction with your classmates. This is not a course requirement. a. To upload your photo , look in the left menu, and click Course Materials . b. In the center of the page, click My Folder , Upload To My Folder , Browse , click on the file name of your photo, Open and Upload File . c. When your picture uploads, place a check mark in the box to make it visible in your profile to other students.
4. Privacy Profile – If you want to share your photo with other students, you must adjust your privacy setting in your profile by following these steps:
A. In the left menu click My Profile
B. Click the sub-link Modify Profile
C. In the table, scroll down to the Profile Privacy section and click the small arrow in the drop down menu.
D. Select “ Show to Everyone ” or “ Show to instructor ” as you prefer
5. Scroll down and click the Re-Create Profile button
7
II. Complete Case Problem 1 from Tutorial 2 of your textbook. Upload your answer in
Assignments as Higher Ed using the Browse button. Don’t forget to place a “ check mark ” in the box next to “ Submit for Grading ” before you click the “ Submit ” button.
Week 2 – Working with Cascading Style Sheets, Special Effects and Advanced Styles
Objectives: Successful students will be able to :
Explore the history and theory of CSS
Define a style rule
Study style precedence and inheritance
Apply color using CSS
Explore CSS3 color extensions
Use contextual selectors
Work with attribute selectors
Apply text and font styles
Install a Web font
Define list styles
Use pseudo-classes and pseudo-elements
Create a rollover effect
Set display properties
Create a reset style sheet
Define a background image
Set background image properties
Use browser extension styles
Explore fixed, fluid, and elastic layouts
Float elements in a Web page
Set margin and padding spaces
Format an element border
Create rounded corners
Display an element outline
Explore absolute and relative positioning
Work with overflow content
Explore clipped objects
Stack objects in a page
Required Readings: Tutorial 3 & 4
Turn-Ins: (1) In Discussion Forum Section, please post on the topic of how colors in HTML are defined (Refer Tutorial 3 in the book) and reply to at least two other student's messages (if present) (2) Complete Case Problem 2 in Tutorial 4. Upload your answer in Assignments as Red
Ball Pizza using the Browse button. Don’t forget to place a “ check mark ” in the box next to
“ Submit for Grading ” before you click the “ Submit ” button.
.
8
Week 3 – Working with Web Tables and Web Forms
Objectives: Successful students will be able to :
Explore the structure of a Web table
Create headings and cells in a table
Create cells that span multiple rows and columns
Add a caption to a table
Create row and column groups
Add a summary to a table
Format a table using HTML attributes
Format a table using CSS styles
Collapse table borders
Display page elements in tabular form
Create a multi-column layout
Explore how Web forms interact with Web servers
Create form elements
Create field sets and legends
Create input boxes and form labels
Create selection lists
Creation option buttons
Create text area boxes
Create check boxes
Apply styles to Web forms
Explore HTML5 data types
Create spinners and range sliders
Create form buttons
Validate form data
Required Readings: Tutorial 5 & 6
Turn-Ins: Complete Case Problem 1 in Tutorial 6. Upload your answer in Assignments as Sport
Blogger using the Browse button. Don’t forget to place a “ check mark ” in the box next to
“ Submit for Grading ” before you click the “ Submit ” button.
Week 4 – Working with Multimedia and Enhancing a Website with CSS
Objectives: Successful students will be able to :
Learn about sound file formats and properties
Embed a sound clip using the audio element
Embed a sound clip using the embed element
Learn about video file formats and properties
Embed a video clip using the video element
9
Embed a video clip using the object element
Explore how to use Shockwave Flash players
Explore how to embed YouTube videos
Explore the history of Java
Embed a Java applet and other objects
Required Readings: Tutorial 7 & 8
Review all assigned readings to prepare for your Midterm Project/Assignment
Turn-Ins: Complete Case Problem 1 in Tutorial 8. Upload your answer in Assignments as
Dessert Web using the Browse button. Don’t forget to place a “ check mark ” in the box next to
“ Submit for Grading ” before you click the “ Submit ” button.
In Assignments, complete the Midterm Project/Assignment .
Professor Notes:
1. Please refer to the Announcements posted in the e-classroom
2. Midterm Project/Assignment Study Questions : Review Weeks 1-4 weekly objectives to prepare for the project/assignment
Week 5 – Working with XHTML and JavaScript
Objectives: Successful students will be able to :
Describe the history and theory of XHTML
Understand the rules for creating valid XHTML documents
Apply a DTD to an XHTML document
Apply the XHTML namespace
Explore the relationship between HTML5 and XHTML
Test an XHTML document under the transitional DTD
Test an XHTML document under the strict DTD
Explore the use of character and parsed character data
Learn the history of JavaScript
Create a script element
Write text to a Web page with JavaScript
Understand basic JavaScript syntax
Declare and work with variables
Learn about JavaScript data types
Create and call a JavaScript function
Access an external JavaScript file
Add comments to JavaScript code
Learn about basic debugging techniques and tools
Required Readings: Tutorial 9 & 10
10
Turn-Ins: (1) In Discussion Forum Section, please post on the topic on what you understand by
'Well-Formed Documents' in XHTML(Refer Tutorial 9 in the book). and reply to at least two other student's (if present) messages. (2) Complete Case Problem 3 in Tutorial 10. Upload your answer in Assignments as Midwest Student Union using the Browse button. Don’t forget to place a “ check mark ” in the box next to “ Submit for Grading ” before you click the “ Submit ” button.
Week 6 – Working with Operators, Expressions, Arrays, Loops and Conditional Statements
Objectives: Successful students will be able to :
Insert a value into a Web form field
Work with event handlers
Create and work with Date objects
Extract information from Date objects
Work with arithmetic and unary operators
Understand the properties and methods of the Math object
Control how JavaScript works with numeric values
Explore conditional, comparison, and logical operators
Run time-delayed and timed-interval commands
Create an array
Populate and reference values from an array
Work with array methods
Repeat commands using for loops
Loop through the contents of an array
Repeat commands with while loops
Work with ECMAScript5 array methods
Create conditional commands with if and if else statements
Use arrays, loops, and conditional statements to create a table
Interrupt loops with break , continue , and label commands
Required Readings: Tutorial 11 & 12
Turn-Ins: (1) In Discussion Forum Section, please post on the topic on what you understand of arrays, loops and conditional statements (Refer Tutorial 12 in the book). and reply to at least two other student's (if present) messages. (2) Complete Case Problem 1 in Tutorial 12. Upload your answer in Assignments as The Light House using the Browse button. Don’t forget to place a
“ check mark ” in the box next to “ Submit for Grading ” before you click the “ Submit ” button.
Week 7 – Working with Document Objects, Nodes and Styles
Objectives: Successful students will be able to :
Learn about objects and the document object model
Reference documents objects by id, class name, and tag name
11
Write HTML code to a document object
Write an event handler as an object property
Change the inline style of a document object
Use a CSS selector in an object reference
Loop through an object collection
Create alert, confirm, and prompt dialog boxes
Understand the methods and properties of nodes and the node tree
Create element and text nodes
Attach nodes to a Web page document
Apply node properties and styles to create dynamic content
Work with properties and methods of attribute nodes
Work with element attributes
Hide and redisplay Web page objects
Understand how to create recursive function to navigate a node tree
Learn to work with the properties and methods of style sheet objects
Required Readings: Tutorial 13 & 14
Turn-Ins: Complete Case Problem 1 in Tutorial 14. Upload your answer in Assignments as New
Accents Photography using the Browse button. Don’t forget to place a “ check mark ” in the box next to “ Submit for Grading ” before you click the “ Submit ” button.
Week 8 – Colors, Accessibility, Frames, Cookies, Regular Expressions and Final
Project/Assignment
Objectives: Successful students will be able to :
Explore various topics in the Appendices (as interested)
Demonstrate your knowledge of all course and weekly objectives by completing the online Final Project/Assignment .
Required Readings: Appendix Materials (As Interested)
Review all assigned readings to prepare for your Final Project/Assignment
Supplemental Reading: None
.
Turn-Ins: In Assignments, complete the Final Project/Assignment .
Professor Notes:
Please refer to the Announcements posted in the e-classroom
Final Project/Assignment Study Questions : Review all weekly objectives to prepare for the project/assignment
12
Appendix C – e-Classroom Instructions
E-CLASSROOM COMMUNICATION FEATURES AND CAPABILITIES e-Classroom Instructions
Revised October 18, 2005
– to obtain the course and weekly scopes, objectives, required readings, and turn-ins
– to receive comments and guidance from your professor
– to send and receive all course related emails
– to upload documents and send comments to your professor
– to conduct online discussions with your classmates
– to measure your knowledge and comprehension
– to view your grades and professor comments/guidance
– to view documents posted by your professor
SYLLABUS
1. In the left menu, click the Syllabus link
2. Scroll down and click View Syllabus
3. In a few moments, an MS Word Document will appear (download times may vary according to the speed of your internet service provider and the size of the file)
4. To return to the menu, click the Back button at the top left corner of your screen
ANNOUNCEMENTS
1. Your professor will normally post Announcements on a weekly basis.
2. These are general announcements to the class. If you have a specific question about
Announcements then you should send an email to your professor using Mailbox.
MAILBOX
View an email
1. In the left menu, click Mailbox
2. On the next page, look in the table and click the Subject of the email you wish to view
13
Reply to an email message
1. Read the email and scroll down to the bottom of the screen
2. Click the Reply button
3. Scroll down and enter your response in the Message box
4. Scroll down and click the Send Mail button
5. Note: If you scroll down and click Send and Delete button, then the original message will be removed from your Inbox
Send an Email
1. In the left menu, click Mailbox
2. Under Mailbox, click the sub-link Send Message
3. Select (or enter in the TO box) the email address of the person to whom you wish to send the email
A. Instructor – check the box to the left of your professor’s name
B. Student – click email specific students from the course and check the box next to the student(s) to whom you wish to send the email
4. Type in the Subject
5. Type in your message in the Message box
6. Scroll down and click the Send Mail button
Send an Attachment
1. In the left menu, click Mailbox
2. Under Mailbox, click the sub-link Send Message
3. Scroll down and click the words next to the paperclip icon that read Attach File
4. Select the number of files you wish to send from your computer (only one per message is recommended) and click the Continue button
5. Click the Browse button
6. In the pop-up window, select the folder and finally the file name that you wish to attach
7. Click the Open button
8. Scroll down and enter the addressee’s email in the TO box (or check the box next to the instructor’s name
9. Type in the Subject
10. Type in your message in the Message box
11. Scroll UP and click the Send Mail button
Open an Attachment
1. In the left menu, click Mailbox
2. On the next page, look in the table under the Subject of column. If you see a paper clip icon next to the email Subject, then a document is attached to your email
3. Click the Subject of the email you wish to view
4. Look in the heading of your email for the word Attachments and click on the file name of the attachment
5. On the next page click the Download button
6. In the pop-up window, click the Open button
7. To return to the message click the Back button located in the upper left hand corner of your screen twice
14
ASSIGNMENTS
To Upload an Assignment
1. Complete your assignment in Microsoft Word and Save it as your last name and the
Assignment Name. For example, "Morris Leadership Essay” is a properly named assignment. (Note: Sometimes Microsoft Word Perfect and Microsoft Works (.wps) files are not readable in the e-classroom. If your professor cannot read your Word Perfect or
Works file, then save your file as a Rich Text File (.rtf) and upload it again.)
2. In the left menu, click the Assignments link
3. In the table, click the assignment name
4. Click the Browse button
5. A pop-up window will display the files located on your personal computer (PC). Click the folder and/or file name for the file you wish to upload
6. Click the Open button
7. Your file will be moved from the hard drive of your PC and copied into the APUS eclassroom
8. Enter relevant comments to the instructor in the Student Comments box (optional)
9. In the lower right hand portion of your screen, click the box that reads Submit for
Grading (required)
10. Click the Submit button (required)
11. On the next page you can View your Assignment, Remove your assignment, email your assignment, or place a Comment on your uploaded assignment.
View the Assignment you just uploaded
1. your screen will display a Student Folder icon and list the file name twice on the page
2. Click on the second file name which appears in bold font
3. In a few moments, your document will appear on your screen.
4. To return to your menu area, click the BACK button at the top of your screen.
To Remove your Uploaded File
1. Click the Remove file link
DISCUSSION FORUM
Answer Your Professor’s Question in Discussion Forum
1. In the left menu, click the Discussion Forum link
2. In the table, click Discussion Forum name
3. On the next page, again click the Discussion Forum name
4. Scroll down and click the REPLY TO THIS MESSAGE link
5. Enter your answer and click the Reply button
Respond to a Student’s Answer in Discussion Forums
1. Respond to a student’s answer by clicking the Subthread link located beneath their response
2. Click the Submit button
15
EXAMS
Take an Exam
1. Your exams are located at the Exams link and will appear when your professor activates them at the appropriate time.
2. When you are ready to take your exam, click the Exams link.
3. In the table, click the name of the exam .
4. (Note: In most cases, you can take the exam only once. Make sure you are prepared and have reserved adequate time to take the exam before you click on the Exam name.)
Review Exam Results
1. In the left menu, click Exams
2. In the table, view your grade and click on the Exam Title to view your results and/or professor comments
MY PROFILE
1. In the left menu, click on the My Profile link
2. In the Grade Builder Summary table, you can view your grades for each graded requirement
COURSE MATERIAL INSTRUCTONS
Open a File in Course Materials
1. In the left menu, click on the Course Materials link
2. Under Course Materials click the sub-link Course Folders
3. Click on the name of the folder specified by your professor
4. In the table, click on the name of the file you wish to open
5. Your screen will display a Folder icon and list the file name twice on the page
6. Click on the second file name which appears in bold font
7. In the pop-up window, click the Open button
8. In a few moments, your document will appear on your screen.
9. To return to your menu area, click the BACK button at the top of your screen.
16