Catalog Description

Prerequisite: Completion of CSCI 10 with grade of "C" or better
Hours: 72 (54 lecture, 18 laboratory)
Description: Introduction to methods and techniques of Web programming. Includes coverage of HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and Extensible HyperText Markup Language (XHTML). Designed to bring students up to the necessary skill and knowledge level for an intermediate Web programming course. (CSU)

Course Student Learning Outcomes

  • CSLO #1: Create navigation lists, create and use various types of links, and explain the difference between absolute and relative paths. Make an image map and link to various resources on the web, and work with hypertext attributes.
  • CSLO #2: Define style rules, demonstrate the use of style precedence and inheritance, and apply color using CSS. Use contextual selectors, work with attribute selectors, and apply text and font styles. Define list styles, use pseudo-classes, and create a rollover effect.
  • CSLO #3: Define and set a background image, use browser extension styles, and explain the difference between fixed, fluid, and elastic layouts. Set margins and padding, create rounded corners, use absolute and relative positioning, and work with overflow content, clipped objects and stacked objects.
  • CSLO #4: Create headings and cells in a table, use cells that span multiple rows/columns, define row/column groups, and add a table summary. Explain the difference between formatting a table using attributes vs. using CSS styles, collapse table borders, and create a multi-column layout.
  • CSLO #5: Create form elements and explain how web forms interact with web servers.
  • CSLO #6: Explore audio/video file formats and embed an audio/video clip using a variety of techniques. Explain how to incorporate Flash video (as well as YouTube video) and embed a Java applet using a variety of techniques.

Effective Term

Fall 2020

Course Type

Credit - Degree-applicable

Contact Hours

72

Outside of Class Hours

90

Total Student Learning Hours

162

Course Objectives

Lecture Objectives:
1. Summarize the history of the Internet, the Web, and HTML.
2. Describe different HTML standards and specifications.
3. Explain the basic syntax of HTML code.
4. Compare and contrast block-level elements and inline elements.
5. Define an element's appearance with inline styles.
6. Compare and contrast logical and physical elements.
7. Define links and how to use them.
8. Describe how to set and use anchors for backward compatibility with older browsers.
9. List different types of Web site structures and how to employ them.
10. Compare and contrast absolute and relative paths.
11. Analyze the structure and contents of a URL.
12. Summarize how HTML handles color and how to use colors effectively.
13. Identify the different graphic formats supported on the Web and how to use them effectively.
14. Investigate how to use transparent images and animated graphics.
15. Explain image maps and how to use them.
16. Describe how to add summary information to a table.
17. Determine the width and height for different table elements.
18. Compare and contrast the different types of page layouts that you can achieve with tables.
19. List the uses of frames in a Web site.
20. Diagram a frame layout within a browser window.
21. Explain which reserved target names to specify as a target for a hypertext link.
22. Compare and contrast content for browsers that support frames and those that do not.
23. Describe how Web forms can interact with a server-based program.
24. Summarize the various parts of an online form.
25. Describe how data is sent from a Web form to a server.
26. Compare and contrast style precedence and style inheritance.
27. Explain how to float a block-level element.
28. Define a style for hypertext links in their four conditions.
29. Differentiate between pseudo-elements and pseudo-classes.
30. Identify document content with the DIV and SPAN tags and create styles for them.
31. Describe how to use cascading style sheets to design page layout.
32. Define external and embedded media.
33. List the different file formats for digital sound.
34. Define the different file formats for digital video.
35. Explain how to create a background sound with Internet Explorer.
36. Summarize the history and use of Java applets.
37. Summarize the history and theory of XHTML.
38. Describe the three XHTML DTDs and the differences between XHTML versions.
39. List the syntax rules for well-formed XHTML documents.
40. Explain how to apply a namespace.
41. Illustrate how to create a CDATA section for an embedded style sheet.
Laboratory Objectives:
1. Construct elements using two-sided and one-sided tags.
2. Create and format different types of lists.
3. Create element IDs to mark specific locations within a document.
4. Create links to jump between sections of the same document.
5. Create links between documents.
6. Create foreground and background colors using styles.
7. Manipulate spacing between letters, words, and lines using styles.
8. Apply a background image to an element.
9. Create image map hotspots and link them to destination documents.
10. Create the basic structure of a graphical table.
11. Create table borders and gridlines.
12. Apply a background image and color to a table.
13. Create a newspaper-style layout using tables.
14. Modify the appearance of frames by setting the margin widths, removing scrollbars, and specifying whether users can resize frames.
15. Manipulate the color and size of frame borders.
16. Construct an inline frame within a Web page.
17. Create and format an input box for simple text data.
18. Construct a selection list for a predefined list of possible field values.
19. Design option buttons for a list of possible field values.
20. Generate form buttons to submit or reset a form.
21. Create inline, embedded, and external styles.
22. Create a background sound.
23. Modify applet parameters and insert a Java applet into a Web page.
24. Create a structured XHTML document and apply a DTD to it.

General Education Information

  • Approved College Associate Degree GE Applicability
    • CSU GE Applicability (Recommended-requires CSU approval)
      • Cal-GETC Applicability (Recommended - Requires External Approval)
        • IGETC Applicability (Recommended-requires CSU/UC approval)

          Articulation Information

          • CSU Transferable

          Methods of Evaluation

          • Essay Examinations
            • Example: In an essay, discuss why 'bold' is not included as a font-style value in CSS. Include a discussion of the range of font weights and how to use those varying weights to achieve boldface fonts. Rubric Grading.
          • Objective Examinations
            • Example: 1. Sample question: Using the principle of ____, styles defined for each parent tag are transferred to its descendants. a. legacy b. generation c. inheritance d. fostering 2. Given a For loop counter of "for (i = 0; i <= 360; i += 60)", the counter values are a. 60, 120, 180, 240, 300, and 360. b. 0, 60, 120, 180, 240, 300, and 360. c. 0, 60, 120, 180, 240, and 300. d. 0, 120, 240, and 360.
          • Projects
            • Example: The semester project is an opportunity for you to apply what you have learned in class to a real-world situation. You get to choose the topic. The only requirement is that the project must incorporate some of the concepts and principles that you have learned in class this semester. The semester project must be an original web site. If your web site was not created from scratch, then you must show us what it looked like before you started. In other words, if you are planning to do a "makeover" on an existing web site, then you must show the "before" and "after", so that we have a clear picture of your involvement. Rubric Grading.
          • Reports
            • Example: Write a research paper that covers the following topic: The goal is to build a high-end gaming computer for under $1000. The requirements are listed below. Each group will present their findings and we will vote to see which group put together the best system. You must build your computer using individual components from different sources. For each component, you must show us an advertisement that lists the price. Also, for each component, you must explain the jargon (i.e., SCSI) and why you selected each of the options for that component. Rubric Grading.

          Repeatable

          No

          Methods of Instruction

          • Laboratory
          • Lecture/Discussion
          • Distance Learning

          Lab:

          1. Following instructor discussion on HTML5 & CSS, students will complete a hands-on group computer activity based on the lecture. For example, have each group create a website using HTML5 & CSS. Tasks would be design, coding, and debugging. Students need to include spacing between letters, words, and lines using styles and also applying a background image to an element. The topic for the hands-on activity is chosen to reinforce the lecture and to prepare them for the homework assignment. (Laboratory Objectives 6 & 7)

          Lecture:

          1. Slide show presentation interspersed with topic-specific video clips and live demonstrations of programming techniques. For example, the lecture topic might be HTML5 & CSS. First, review background and general terminology using PowerPoint. Second, do a live demonstration on creating a website with HTML5 & CSS. Students are expected to participate during the lecture. (Lecture Objectives 2 & 3)

          Distance Learning

          1. Use an online discussion forum to facilitate writing. Require each student to post a minimum number of messages, the substantive content of which demonstrates critical thinking. The messages may be in response to questions posed by the instructor or may be as write-ups at the completion of laboratory assignments. Example of a question would be compare and contrast block-level elements and inline elements. (Lecture Objective 4)

          Typical Out of Class Assignments

          Reading Assignments

          1. Read the assigned pages from the textbook and be prepared to discuss the use of HTML Tables in the context of page layout and be prepared to discuss in class. 2. Read the assigned pages from the textbook and be prepared to discuss in class the use of CSS to create dynamic web pages.

          Writing, Problem Solving or Performance

          1. Complete all of the Case Studies at the end of the chapter and test the hypertext links on the web server to make sure that they work correctly. 2. Complete all of the Case Studies at the end of the chapter and test their web pages with a variety of external style sheets.

          Other (Term projects, research papers, portfolios, etc.)

          Required Materials

          • Head First HTML
            • Author: Eric Freeman & Elisabeth Robson
            • Publisher: O'Reilly Media
            • Publication Date: 2012
            • Text Edition: 2nd
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • New Perspectives on HTML, XHTML, and Dynamic HTML: Comprehensive
            • Author: Patrick Carey
            • Publisher: Course Technology
            • Publication Date: 2009
            • Text Edition: 4th
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • HTML, XHTML, and CSS: Comprehensive
            • Author: Gary B. Shelly & Denise Woods
            • Publisher: Course Technology
            • Publication Date: 2010
            • Text Edition: 6th
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • Learning Web Design
            • Author: Jennifer Robin
            • Publisher: O'Reilly
            • Publication Date: 2018
            • Text Edition: 5th
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • Murach's HTML5 and CSS3
            • Author: Zak Ruvalcaba & Anne Boehm
            • Publisher: Mike Murach & Associates
            • Publication Date: 2018
            • Text Edition: 4th
            • Classic Textbook?: No
            • OER Link:
            • OER:

          Other materials and-or supplies required of students that contribute to the cost of the course.