Download CIS 207 Introduction to Web Development

Alabama
Department of
Postsecondary Education
Representing Alabama’s Public Two-Year College System
CIS/DPT 207
INTRODUCTION TO WEB DEVELOPMENT
Plan of Instruction
Effective Date: 2005
Version Number:
2005-2
COURSE DESCRIPTION
This course introduces basic Web page development techniques. Topics include HTML,
scripting languages, and commercial software packages used in the development of
Web pages. At the conclusion of this course, students will be able to use specified
markup languages to develop basic Web pages. This course supports CIP code
11.0101.
CREDIT HOURS
Theory
3credit hours
Lab
0 credit hour
Total
3 credit hours
NOTE: Theory credit hours are a 1:1 contact to credit ratio. Colleges may schedule lab hours as
manipulative (3:1 contact to credit hour ratio) or experimental (2:1 contact to credit hour ratio).
Alabama College System
Copyright© 2006
All rights reserved
Introduction to Web Development
CIS 207
PREREQUISITE COURSES
Determined by college unless stated otherwise
CO-REQUISITE COURSES
Determined by college unless stated otherwise
INSTRUCTOR NOTE: Lab hours may be shared, open labs (stacked).
PROFESSIONAL COMPETENCIES:
GENERAL INSTRUCTIONAL OBJECTIVES:
The cognitive objective for this course is for each student to comprehend foundational
knowledge of designing basic Web pages.
The performance objective of this course is for each student to apply foundational
knowledge when designing basic Web pages.
There are no affective objectives directly associated with this course.
PROFESSIONAL COMPETENCIES/OBJECTIVES:
Unless otherwise indicated, evaluation of student’s attainment of objectives is based on
knowledge gained from this course. During performance evaluations, students will be
provided necessary tools, equipment, materials, specifications, and any other resources
necessary to accomplish the task. Specifications may be in the form of, but not limited
to, manufacturer’s specifications, technical orders, regulations, national and state
codes, certification agencies, locally developed lab assignments, or any combination of
specifications
ACS Copyright© 2006
All rights reserved
2
Introduction to Web Development
CIS 207
MODULE A – INTRODUCTION TO WEB DESIGN
PROFESSIONAL COMPETENCIES
A1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
PERFORMANCE OBJECTIVES
A1.1 Use a specified markup language to
develop a Web page containing basic
HTML tags.
ENABLING OBJECTIVES
A1.1.1
A1.1.2
A1.1.3
A1.1.4
A1.1.5
A1.1.6
A1.1.7
A1.1.8
A1.1.9
Define terms associated with basic Web page development.
Explain the development of the World Wide Web (WWW).
Explain the differences between Web servers and Web browsers.
Explain the use of Hypertext Markup Language (HTML).
Describe various tools to create HTML documents.
Describe the general syntax of an HTML tag.
Describe techniques to display HTML files.
Describe the use of various tags in an HTML document.
Describe the technique for inserting horizontal lines in an HTML
document.
KSA
Indicators
A
A
B
B
a
B
b
b
b
MODULE B – HYPERLINKS
PROFESSIONAL COMPETENCIES
B1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
STUDENT PERFORMANCE OBJECTIVES
B1.1 Create a Web page that includes various
types of hyperlinks.
ENABLING OBJECTIVES
B1.1.1 Describe the use of hyperlinks.
B1.1.2 Describe common page structures.
B1.1.3 Describe techniques to create various types hyperlinks.
ACS Copyright© 2006
All rights reserved
KSA
Indicators
B
B
b
3
Introduction to Web Development
CIS 207
MODULE C – USING COLORS AND GRAPHICS
PROFESSIONAL COMPETENCIES
C1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
PERFORMANCE OBJECTIVES
C1.1 Design a Web page that incorporates
specified colors and graphics.
ENABLING OBJECTIVES
C1.1.1 Describe how HTML identifies colors.
C1.1.2 Describe how to change default color settings for HTML
documents.
C1.1.3 Explain how to modify text using <font> tags.
C1.1.4 Explain the difference between GIF and JPEG graphics.
C1.1.5 Explain how to modify graphics using <img> tag.
C1.1.6 Explain how to use the “alt” attribute.
KSA
Indicators
B
b
b
B
b
b
MODULE D – TABLES
PROFESSIONAL COMPETENCIES
D1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
STUDENT PERFORMANCE OBJECTIVES
D1.1 Design a Web page that incorporates
tables.
ENABLING OBJECTIVES
D1.1.1 Describe the process for creating text tables.
D1.1.2 Describe the use of various tags to define a graphic table
structure.
D1.1.3 Describe how to modify the appearance of graphic tables.
D1.1.4 Describe how to control page alignment using tables.
ACS Copyright© 2006
All rights reserved
KSA
Indicators
b
B
b
b
4
Introduction to Web Development
CIS 207
MODULE E – FRAMES
PROFESSIONAL COMPETENCIES
E1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
PERFORMANCE OBJECTIVES
E1.1 Design a Web page that incorporates
tables.
ENABLING OBJECTIVES
E1.1.1 Describe how frames are used in HTML documents.
E1.1.2 Explain the impact of frames on the overall appearance of HTML
documents.
E1.1.3 Describe how to design frames to change the overall appearance
and functionality of a Web page.
E1.1.4 Describe how to assign names and use target properties to open a
new page in a specific frame.
E1.1.5 Explain the use of the <noframes> tag.
E1.1.6 Describe how to alter frame borders for color and width.
E1.1.7 Explain the use of the <iframe> tag.
KSA
Indicators
B
B
b
b
B
b
b
MODULE F – FORMS
PROFESSIONAL COMPETENCIES
F1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
F1.1
PERFORMANCE OBJECTIVES
Design a Web page that incorporates
forms with specified elements.
ENABLING OBJECTIVES
F1.1.1 Describe the use of forms in HTML documents.
F1.1.2 Describe various languages and platforms used for Common
Gateway Interface (CGI) scripts.
F1.1.3 Describe the function of various form elements.
F1.1.4 Describe the proper application of various form elements.
F1.1.5 Describe the use of the “mailto” option.
F1.1.6 Describe how to control tab order.
F1.1.7 Describe the use of an access key.
F1.1.8 Describe how forms post to the server.
ACS Copyright© 2006
All rights reserved
KSA
Indicators
B
B
B
c
B
B
B
B
5
Introduction to Web Development
CIS 207
MODULE G – CASCADING STYLE SHEETS (CSS)
PROFESSIONAL COMPETENCIES
G1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
PERFORMANCE OBJECTIVES
G1.1 Design a Web page that incorporates
cascading style sheets.
ENABLING OBJECTIVES
G1.1.1
G1.1.2
G1.1.3
G1.1.4
G1.1.5
G1.1.6
G1.1.7
Describe the function of CSS.
Describe the types of CSS.
Describe style inheritance.
Differentiate between parent and descendant elements.
Describe contextual selectors.
Describe how to use external CSS to control HTML appearance.
Describe the use of block-level element boxes.
ACS Copyright© 2006
All rights reserved
KSA
Indicators
B
B
B
B
B
b
B
6
Introduction to Web Development
CIS 207
MODULE H – JAVASCRIPT
PROFESSIONAL COMPETENCIES
H1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
PERFORMANCE OBJECTIVES
H1.1 Design a Web page that incorporates
JavaScript.
ENABLING OBJECTIVES
H1.1.1 Differentiate between server-side and client side programs.
H1.1.2 Differentiate between Java and JavaScript.
H1.1.3 Describe how to insert JavaScript command into an HTML
document.
H1.1.4 Describe how to hide JavaScripts.
H1.1.5 Describe how to send output to a Web page.
H1.1.6 Describe how to use variables and data in a JavaScript.
H1.1.7 Describe how JavaScript handles dates.
H1.1.8 Describe various expressions and operators.
H1.1.9 Describe the use of JavaScript functions.
H1.1.10 Describe the use of conditional statements.
H1.1.11 Describe the use of loops and arrays.
H1.1.12 Describe how JavaScript validates forms.
H1.1.13 Describe JavaScript object’s properties and methods.
H1.1.14 Describe how JavaScript captures user events.
ACS Copyright© 2006
All rights reserved
KSA
Indicators
B
B
b
B
b
B
B
B
B
B
B
B
B
B
7
Introduction to Web Development
CIS 207
MODULE I – INJECTING MULTIMEDIA
PROFESSIONAL COMPETENCIES
I1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
I1.1
PERFORMANCE OBJECTIVES
Design a Web page that incorporates
various multimedia objects.
ENABLING OBJECTIVES
I1.1.1
I1.1.2
I1.1.3
I1.1.4
I1.1.5
Explain various types of sound files.
Explain the process of inserting sound files into HTML documents.
Explain various types of video files.
Explain the process of inserting video files into HTML documents.
Explain the process of inserting Java applets into HTML
documents.
KSA
Indicators
B
b
B
b
b
MODULE J – INTRODUCTION TO DYNAMIC HTML
PROFESSIONAL COMPETENCIES
J1.0 Develop Web pages that
incorporate a variety of
features found in private and
commercial applications. (3b)
J1.1
PERFORMANCE OBJECTIVES
Design a Web page that incorporates
various Dynamic HTML features.
ENABLING OBJECTIVES
J1.1.1
J1.1.2
Describe the use of Dynamic HTML. (DHTML).
Describe the process of incorporating various features into
DHTML documents.
ACS Copyright© 2006
All rights reserved
KSA
Indicators
B
b
8
Introduction to Web Development
CIS 207
COURSE CONTENT OUTLINE
MODULE A – INTRODUCTION TO WEB DESIGN
 Terms and definitions
 Introduction to the World Wide Web (WWW)
 Development
 Web servers and Web browsers
 HTML
 Versions
 Extensions
 Tools for creating HTML documents
 Creating an HTML document
 Syntax
 Basic tags
 Displaying HTML files
 Creating headings, paragraphs, and lists
 Inserting horizontal lines
MODULE B – HYPERLINKS
 Creating hypertext documents
 Web page structure
o Linear
o Hierarchical
o Mixed
 Creating links
 Linking to other documents
 Linking to documents on the Internet
 Displaying linked documents in a new window
 Linking to other Internet objects
 Creating anchors
MODULE C – USING COLORS AND GRAPHICS
 Colors
 Working with colors in HTML
o Names
o Values
 Specifying color schemes
 Modifying text with <font>tags
o Size
o Color
o Face Specifying color
ACS Copyright© 2006
All rights reserved
9
Introduction to Web Development

CIS 207
Graphics
 GIF files
o GIF controversy
o Transparent
o Animation
 JPEGs
 Controlling image placement and size
o Alignment
o Spacing
o Image size
 Using the “alt” attribute
MODULE D – TABLES
 Creating text tables
 Defining a table structure
 Table - <table>
 Table row - <tr>
 Table data - <td>
 Table header – <th>
 Identifying the table heading, body, and footer
 Table captions
 Modifying tables
 Borders
 Cell padding and spacing
 Frames and rules
 Table and cell size
 Aligning tables and content
 Spanning rows and columns
 Color schemes of tables
 Controlling page alignment with tables
 Outer
 Nested
 Outer and Inner
MODULE E – FRAMES
 Planning and creating frames
 Size and orientation
 Source
 Nesting <frameset> tags
 Controlling appearance
 Frames and hyperlinks
 Assigning names
 Link targets
 <base> tags
 Reserved target names
 <noframe> tag
ACS Copyright© 2006
All rights reserved
10
Introduction to Web Development


CIS 207
Frame borders
 Color
 Width
Floating frames - <iframe>
MODULE F – FORMS
 CGI scripts
 <form> tags
 Form elements
 Input boxes
 Radio buttons (option buttons)
 Selection lists
 Check boxes
 Text areas
 Submit button
 Reset button
 Hidden fields
 “Mailto” option
 Tab order
 Access key
MODULE G – CASCADING STYLE SHEETS (CSS)
 Introduction to cascading style sheets
 Types
 Inline style sheets
 Embedded
 External
 Resolving style precedence
 Style inheritance
 Parent and descendant elements
 Contextual selectors
 Using external CSS to control HTML appearance
 Font and text attributes
 Families and size
 Color and background
 Aligning text
 List styles
 Formatting hypertext links
 Container elements
 Block-level element boxes
 IDs and Classes
ACS Copyright© 2006
All rights reserved
11
Introduction to Web Development
CIS 207
MODULE H – JAVA SCRIPT
 Server-side and Client side programs
 Development of Java and Java script
 Running JavaScript
 <script> tag
 Hiding script
 Sending output to a Web page
 Variables and data
 Dates
 Expressions and operators
 Arithmetic
 Assignment
 Comparison
 Logical
 JavaScript functions
 Conditional statements
 Basic use of loops and arrays
 Form validation
 JavaScript objects
 Objects and object names
 Document object model
 Object collections
 Object properties
 Modifying values
 Assigning property values to variables
 Conditional expressions
 Managing events
 Event handlers
 JavaScript commands as hypertext links
 Initiating events
 Creating a calculated field
 Working with a selection list
 Radio buttons
 “this” keyword
ACS Copyright© 2006
All rights reserved
12
Introduction to Web Development
CIS 207
MODULE I – INJECTING MULTIMEDIA
 Sound files
 Sampling rates
 Formats
 Linking
 Embedding sounds
 Video files
 Frame rates
 Codecs
 Formats
 Linking
 Embedding
 Java Applets
 Tags
 Inserting into Web pages
MODULE J – DYNAMIC HTML (DHTML)
 Dynamic page layout
 Introduction to DHMTL
 Positioning objects
 Animating objects
 Dynamic content and styles
 Content
 Layering
 Dynamic content in the document object model
 Special effects
 Image objects
 Image rollover
 Text rollovers
 Menus
 Filters
 Transitions
 Event models
 Working with events and event handlers
 Event objects
 Mouse pointers
 Windows and frames
 Window objects
 Modifying the status bar message
 History and location objects
 Creating new browser windows
 Multiple windows
 Modal and modeless windows
 Frames
ACS Copyright© 2006
All rights reserved
13
Introduction to Web Development
CIS 207
RECOMMENDED METHODS OF EVALUATION: The tables of specifications below
identify the number of cognitive (knowledge) enabling objectives, psychomotor
(performance) objectives, and affective (attitudinal) objectives per module. Instructors
should develop sufficient numbers of evaluation items to ensure complete
coverage of each cognitive and/or psychomotor objective identified in each
module. For cognitive objectives, use appropriate written test type based on the
complexity indicator for each objective. Create comprehensive, checklist evaluations for
each psychomotor objective.
Facts/Nomenclature (A/a): Multiple Choice, Fill-in, List, Matching, Alternative Response
(true/false or yes/no)
Principles/Procedures (B/b): Multiple Choice, Fill-in, List, Short Answer
Analysis/Operating Principles (C/c): Multiple Choice, Short Answer, Essay
Evaluation/Complete Theory (D/d): Multiple Choice, Short Answer, Essay
ENABLING OBJECTIVES TABLE OF SPECIFICATIONS
Cognitive Domain
Module A
Module B
Module C
Module D
Module E
Module F
Module G
Module H
Module I
Module J
Total
Facts/
Nomenclature
Principles/
Procedures
3
3
6
3
6
4
7
7
7
14
5
2
61
Analysis/
Operating
Principles
1
1
Evaluation/
Complete
Theory
-
Total
9
3
6
4
7
8
7
14
5
2
65
PERFORMANCE OBJECTIVES TABLE OF SPECIFICATIONS
Psychomotor Domain
Limited Proficiency
(Level 1)
Module A
Module B
Module C
Module D
Module E
Module F
Module G
Module H
Module I
Module J
Total
ACS Copyright© 2006
All rights reserved
-
Partially
Proficient
(Level 2)
-
Proficient
(Level 3)
1
1
1
1
1
1
1
1
1
1
10
Highly
Proficient
(Level 4)
-
Total
1
1
1
1
1
1
1
1
1
1
10
14
Introduction to Web Development
CIS 207
AFFECTIVE OBJECTIVES TABLE OF SPECIFICATIONS
Affective Domain
Receiving
(*1)
Responding
(*2)
Valuing
(*3)
Organization
(*4)
0
0
0
0
Module A
Module B
Module C
Module D
Module E
Module F
Module G
Module H
Module I
Module J
Total
ACS Copyright© 2006
All rights reserved
Characterization
by Value
(*5)
0
Total
0
0
0
0
0
0
0
0
0
0
0
15
Introduction to Web Development
Knowledge, Skills, and Attitudes (KSA) Indicators
Key Word(s)
Definition
Highly
Performs competency quickly and accurately. Instructs others how to do
Proficient
the competency.
Performs all parts of the competency. Needs only a spot check of
Proficient
completed work.
Partially
Performs most parts of the competency. Needs help only on hardest parts.
Proficient
Performs simple parts of the competency. Needs to be told or shown how
Limited Proficiency
to do most of the competency.
Complete
Predicts, isolates, and resolves problems about the competency.
Theory
Operating
Identifies why and when the competency must be done and why each step
Principles
is needed.
Procedures
Determines step-by-step procedures for doing the competency.
Nomenclature
Names parts, tools, and simple facts about the competency.
Evaluation
Evaluates conditions and makes proper decisions about the subject.
Analysis
Analyzes facts and principles and draws conclusions about the subject.
Identifies relationship of basic facts and states general principles about the
Principles
subject.
Value
Performance
Ability
4
3
2
Knowledge
Knowledge of
Skills
1
Affective
CIS 207
d
c
b
a
D
C
B
A
Facts
*5
Characterization by
Value
*4
Organization
*3
Valuing
*2
Responding
*1
Receiving
Identifies basic facts and terms about the subject.
Acting consistently with the new value
Integrating a new value into one's general set of values, giving it some
ranking among one's general priorities
Showing some definite involvement or commitment
Showing some new behaviors as a result of experience
Being aware of or attending to something in the environment
Alpha Scale Values - Any item with an upper case letter (A, B, C, D) by itself is taught as general information on a topic. This information may be related to the
competency or encompass multiple competencies. Examples might include mathematical computations or knowledge of principles such as Ohm’s Law.
A lower case letter indicates a level of ”Knowledge of Skills." Individuals are taught information pertaining to performing a competency . These may be indicated
alone or in conjunction with a numerical scale value. A lower case letter by itself indicates the individual is not required to perform the task-just know about the task.
(example: Can state or explain procedures for doing a task).
Numerical Scale Values - The numbers reflect the levels the individual will be able to perform a competency. Number values are always accompanied by lower
case letters (i.e. 1a, 2b, 3c...etc.) in order to specify the level of knowledge of skills associated with the competency.
Example: An individual with a competency with a scale indicator of 3b has received training of knowledge of skills whereby he or she can determine the correct
procedures and perform with limited supervision; only requiring evaluation of the finished product or procedure.
Asterisk items indicate desired affective domain levels and are used to indicate the desired level for a given competency. They may be used independently or with
other indicators (i.e. 1a-*1, 2c-*3). If used with another indicator, separate with a hyphen.
NOTE: Codes indicate terminal values.
ACS Copyright© 2006
All rights reserved
16