Instructor Solutions Manual Sample Syllabi Solutions to End-of-Chapter Hands-On Exercises Supplemental Activities: Group Website Evaluation, WebQuest, Web Site Project Sample Syllabus First Semester Web Development Course 16 Week Semester Course Assignment Schedule Date Topics & Reading Week 1 Intro to Course Chapter 1 Intro to the Internet & Web Week 2 Chapter 2 HTML Basics Lab 1 Assignment Chapter 3 Configuring Color & Text with CSS Project: Topic Approval Lab 2 Assignment Chapter 4 Visual Elements & Graphics Lab 3 Assignment Week 3 Week 4 Week 5 Assignment Due Chapter 5 Web Design Lab 4 Assignment Chapter 6 Page Layout with CSS Project: Planning Analysis Sheet Lab 5 Assignment Chapter 7 Responsive Page Layout Lab 6 Assignment Chapter 8 Tables Project: Site Map Lab 7 assignment Week 9 Midterm Exam Lab 8 Assignment Week 10 Chapter 9 XHTML Forms Lab 9 Assignment Week 11 Chapter 10 Web Site Development Project: Update 1 Chapter 11 Web Multimedia & Interactivity Work on your project Week 13 Chapter 12 E-Commerce Overview Lab 10 Assignment Week 14 Chapter 13 Promotion for Web Developers Project: Update 2 Week 15 Chapter 14 Intro to JavaScript Lab 11 Assignment Week 16 Present Projects Publish Project Finals Week Final Exam Week 6 Week 7 Week 8 Week 12 The Lab Assignments are chosen from the End of Chapter materials in the text. When I teach this course, the students work on a web project of their own choosing during the entire semester. Assignments relating to the phases of developing this project are due at intervals as shown in the schedule above. An explanation of the website project is in a separate document. Sample Syllabus First Semester Web Development Course 12 Week Semester Course Assignment Schedule Topics & Reading Assignment Due Date Week 1 Intro to Course Chapter 1 Intro to the Internet & Web Week 2 Chapter 2 HTML Basics Lab 1 Assignment Week 3 Chapter 3 Configuring Color & Text with CSS Lab 2 Assignment Project: Topic Approval Week 4 Chapter 4 Visual Element & Graphics Lab 3 Assignment Week 5 Chapter 5 Web Design Project: Planning Analysis Sheet Week 6 Chapter 6 Page Layout with CSS Lab 4 Assignment Project: Site Map Week 7 Chapter 7 Responsive Page Layout Lab 5 Assignment Week 8 Chapter 8 Tables Project: Update 1 Week 9 Chapter 9 Forms Lab 5 Assignment Week 10 Chapter 10 Web Site Development Project: Update 2 Week 11 Chapter 11 Web Media & Interactivity Lab 6 Assignment Week 12 Present Project Final Exam Present Project The Lab Assignments are chosen from the End of Chapter materials in the text. When I teach this course, the students work on a web project of their own choosing during the entire semester. Assignments relating to the phases of developing this project are due at intervals as shown in the schedule above. An explanation of the website project is in a separate document. Sample Syllabus First Semester Web Development Course 8 Week Semester Course Assignment Schedule Date Topics & Reading Week 1 Intro to Course Chapter 1 Intro to the Internet & Web Assignment Due Chapter 2 HTML Basics Lab 1 Assignment Project: Topic Approval Chapter 3 Configuring Color & Text with CSS Lab 2 Assignment Project: Planning Analysis Sheet Week 4 Chapter 4 Visual Elements & Graphics Chapter 5 Web Design Lab 3 Assignment Project: Site Flowchart Week 5 Chapter 6 Page Layout with CSS Lab 4 Assignment Chapter 7 Responsive Page Layout Lab 5 Assignment Project: Update 1 Week 7 Chapter 8 Tables Chapter 9 Forms Lab 6 Assignment Project: Update 2 Week 8 Chapter 11 Web Media & Interactivity Present Projects Lab 7 Assignment Publish Project Week 2 Week 3 Week 6 The Lab Assignments are chosen from the End of Chapter materials in the text. When I teach this course, the students work on a web project of their own choosing during the entire semester. Assignments relating to the phases of developing this project are due at intervals as shown in the schedule above. An explanation of the website project is in a separate document. Instructor Materials Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 1 Hands-On Exercise 1. Student answers will vary. 2. Student answers will vary. Web Research Students’ answers to these research assignments will vary, but they should contain most of the information described below. 1. W3C Research a. How did the W3C get started? The W3C was founded in October of 1994. Its purpose was to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability. Tim Berners-Lee, inventor of the Web, founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) in collaboration with CERN, where the Web originated, with support from DARPA and the European Commission. Tim Berners-Lee is still involved with the W3C (as of 2002) in the role of Director. Sources: Multiple pages at the W3C website ( https://w3c.org, https://www.w3.org/Consortium/). b. Who can join the W3C? What is the cost? Only organizations can join the W3C. Full membership costs $50,000 per year. Affiliate membership (for non-profit and government organizations) costs $5,000 per year. Only employees of member organizations can participate fully in W3C activities. However, there are some activities that the general public can be involved in see http://www.w3.org/Consortium/#public. Sources: Multiple pages at the W3C website (https://w3c.org, https://www.w3.org/Consortium/Prospectus/Joining) c. The W3C home page lists a number of technologies. Choose one that interests you and click on its link and read the associated pages. List three facts or issues you discovered. Answers to this will vary. Consider narrowing the scope of this question by assigning specific technologies to the students to investigate. Use https://w3c.org as the starting point. 2. The Internet Society Research Copyright © 2002-2020 Terry A. Felke-Morris Page 1 Instructor Materials Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 1 a. Why was the Internet Society created? The Internet Society (ISOC) was formed in December 1992 by a number of people with long-term involvement in the IETF, including Vinton Cerf and Anthony Rutkowski. As a result, one of its principal rationales was to provide an institutional home for and financial support for the Internet Standards process. With the commercialization of the Internet, a fair and valid standards process independently supported was becoming more important. The mission of the Internet Society is “to assure the open development, evolution and use of the Internet for the benefit of all people throughout the world.” Sources: Multiple pages at the Internet Society’s website (https://www.internetsociety.org, https://www.internetsociety.org/about-internet-society/, https://www.internetsociety.org/mission/, https://www.internetsociety.org/history/) b. Determine the closest local chapter to your geographical area. Visit their web site. List the web site URL and an activity or service that the chapter provides. Student answers to this will vary. For example, if they lived in the Chicago Illinois area, the closest chapter is located in Chicago. The URL of their web site is http://www.isocchicago.org. The chapter meets regularly offering opportunities for networking. They have also had a joint meeting with the ISOC Chapter in Mexico. Sources: Multiple pages at the Internet Society’s site (https://www.internetsociety.org,, https://www.internetsociety.org/chapters/ ) c. How can you join the Internet Society? What is the cost? Would you recommend joining the Internet Society to a beginning web developer? Why or why not? Both individuals and organizations can join the Internet Society. Visit http://www.isoc.org/isoc/membership/app/ to apply online. There is also a print application. Membership is free. I would recommend joining the Internet Society to a beginning web developer if there is an active local chapter. It could be a good opportunity for networking. (Student answers will vary.) Sources: Multiple pages at the Internet Society’s site (https://www.internetsociety.org, https://www.internetsociety.org/become-a-member/) 3. HTTP/2 Research a. Who developed HTTP/2? The IETF’s HTTP Working Group maintains the HTTP protocol and developed HTTP/2. The HTTP Working Group is comprised of a variety HTTP implementers, users, network operators, and HTTP experts. (Source: https://http2.github.io/faq/#who-made-http2) Google’s work with SPDY (a non-standard improvement to HTTP) served as the basis for HTTP/2 (Source: https://readwrite.com/2015/02/18/http-update-http2-what-you-need-toknow/) Copyright © 2002-2020 Terry A. Felke-Morris Page 2 Instructor Materials Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 1 b. When was the HTTP/2 proposed standard published? The HTTP/2 proposed standard was published as IETF RFC 7540 in May 2015. (Source: https://tools.ietf.org/html/rfc7540) c. Describe three methods used by HTTP/2 intended to decrease latency and provide for quicker loading of web pages in browsers. Students may describe three of the following five methods: 1. Single Constant Connection. HTTP/2 improves speed of page load by creating a single constant connection between the web browser and the web server. 2. Multiplexing. HTTP/2 can transfer and receive multiple messages at the same time. 3. Prioritization. HTTP/2 can transfer more important data first. 4. Compression. HTTP/2 reduces overhead by using header compression, 5. Server Push. When using HTTP/2, a web server can “guess” what might be requested next and send it ahead of time. 6. Binary. HTTP/2 is binary instead of text-based. This provides for more efficient and compact transfer of information. (Sources: https://www.engadget.com/2015/02/24/what-you-need-to-know-about-http-2/, https://http2.github.io/faq) Web Research: Focus on Design Visit Any of the Web Sites That Interested You in the Chapter 1. What is the purpose of the site? 2. Who is their intended audience? 3. Do you believe they reach their audience? 4. Was this site useful to you? Why or why not? 5. List one interesting fact or issue that this site addressed. 6. Would you encourage others to visit this site? 7. How could this site be improved? The answers to the questions above will be quite basic in the beginning of the course and should become more detailed and technical as the semester progresses. At this stage of the course, the goal of this question is to get the students thinking about web sites in a (most likely) new and different manner. Student answers will vary greatly. Copyright © 2002-2020 Terry A. Felke-Morris Page 3 Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2 Apply Your Knowledge 1. Predict the Result. The students will sketch out a page with the following components: “Predict the Result” page title, “Favorite Sites” as a heading in italics, an ordered list containing hyperlinks to facebook.com and google.com, and a page footer with copyright symbol and information in a small font size. 2. Fill in the Missing Code. The missing code is shown in red.

Door County Wild Flowers

Trillium

This white flower blooms from April through June in wooded areas.

Lady Slipper

This yellow orchid blooms in June in wooded areas.

3. Find the Error. The h1 element is coded with two opening tags. Replace the

with

. Hands-On Exercises 1.

Your Name Here

2. A suggested solution is: Harper College Student answers will substitute the URL and name of your school Copyright © 2002-2020 Terry A. Felke-Morris Page 1 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2 3.

• Monday
• Tuesday
• Wednesday
• Thursday
• Friday
• Saturday
• Sunday

4.

1. wake up
2. eat breakfast
3. go to school

5. Answers will vary. Here is a sample solution.

Arthur C. Clarke

Any sufficiently advanced technology is indistinguishable from magic.

6.

A diagram of the organization of a web site is called a site map. A site maprepresents the structure, or organization, of pages in a website in a visual manner. Creating the site map is one of the initial steps in developing a web site.

7. Answers will vary. Here is a sample with the minimum requirements.

The Power of the Web

According to Tim Berners-Lee at https://www.w3.org/WAI/:

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Copyright © 2002-2020 Terry A. Felke-Morris Page 2 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2 8. Answers will vary. Here is a sample with the minimum requirements.

Network Protocols

TCP Transmission Control Protocol

TCP is a set of rules that breaks files and messages into individual units called packets, verifies the integrity of the packets upon receipt, and reassembles the packets into the file or message at the destination.

IP Internet Protocol

IP is a set of rules that controls how data is sent between computers on the Internet. It usually works together with TCP. Each computer connected to the Internet is assigned at least one numeric IP address that uniquely identifies it.

HTTP Hypertext Transfer Protocol

HTTP is a set of rules for exchanging files such as text, graphic images, sound, video, and other multimedia files on the Web. Web browsers and web servers usually use this protocol.

Mor e information about protocols

9. Answers will vary. Here is a sample with the minimum requirements.

The Beatles

Group Members:

• John Lennon
• Paul McCartney
• George Harrison
• Ringo Starr

Favorite CDs:

Abbey Road

Copyright © 2002-2020 Terry A. Felke-Morris Page 3 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2

This is considered by most to be the Beatles best album. Favorite tracks: Something, Oh! Darling, Here Comes the Sun

Let It Be

This is the last album that the Beatles recorded. Favorite tracks: Let It Be, Across the Universe, The Long and Winding Road.</dd.

Help!

This album features Paul’s masterpiece: Yesterday. Favorite tracks: Help!, Ticket to Ride, Yesterday

10. Answers will vary. Here is a sample with the minimum requirements.

Macaroni Salad

• 1 cup elbow macaroni
• 1 cup mayonnaise (more or less to taste)
• 1 tablespoon finely chopped onion
• 3 or 4 medium radishes, grated
• 2 hard boiled eggs, chopped
• 1 dozen medium black olives, chopped

1. Prepare 1 cup elbow macaroni according to directions on package. Rinse in cold water and drain.
2. Combine remaining ingredients in a large bowl.
3. Stir in macaroni.
4. Chill for several hours before serving.

Serves 8.

More Recipes

Copyright © 2002-2020 Terry A. Felke-Morris Page 4 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2 11. Answers will vary. Here is a sample with the minimum requirements.

Web Development Resource Blog

Textbook Companion Website

February 1, 2020 https://webdevfoundations.net

This website is a companion to our textbook and provides helpful resources for each chapter.

HTML Validation

February 2, 2020 https://validator.w3.org/

This website provides a tool to validate the HTML on our web pages.

Web Research Your students’ answers to these research assignments will vary, but they should contain most of the information described below. A. HTML5 Tutorial Research A sample page:

EchoEcho.com

Copyright © 2002-2020 Terry A. Felke-Morris Page 5 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2

URL:

http://echoecho.com/html.htm

Level:

This tutorial is geared for beginners, but may be useful to use as a reference by more experienced developers.

Recommendation:

I would recommend this site to others. It is easy to find topics and the examples are good.

Two Concepts Learned:

1. Links are the most fundamental part of the world wide web. It is the links that tie it all together. There are three different kinds of links you can have on your website: Links to anchors on the current page (Internal). Links to other pages within the current site (Local) Links to pages outside the current site (Global).
2. Colors in HTML are specified using hexadecimal numbers. Hexadecimal numbers are numbers based on the value of 16 rather than the classical numbers based on the value of 10. When you count to 15 using hexadecimal numbers it goes like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

B. Web Research: Focus on Design Expect very basic comments at this point in the course. A Sample Page:

Focus on Web Design

Adobe

URL: http://adobe.com

This Page is Appealing Because…

1. It is easy to read. There is good contrast between the text and the background color.
2. There is movement and interactivity on the page. This makes it more interesting.
3. It is easy to find what I need. The navigation is easy to use.

Galleria Furnishings

URL: http://www.galleriafurnishings.com/

Copyright © 2002-2020 Terry A. Felke-Morris Page 6 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 & CSS3, 10th Edition Chapter 2

This Page is Unappealing Because…

1. I have to scroll down to see what I want. There doesn’t seem to be any good organization.
2. The bottom of the home page has some policy information way off to the right side. I wonder why they did that?
3. I can’t search for what I want. Instead I’ll have to start looking at other pages.

Suggestions for Improvement:

1. I would place more information in the top portion of the web page so that is is accessible when the page is loaded. This way visitors would not have to scroll so much.
2. I would eliminate the extra blank space on the page and move the position of the store policy information.
3. I would add a search function to the home page so that customers could get right to the products they are looking for.

Copyright © 2002-2020 Terry A. Felke-Morris Page 7 http://terrymorris.net Instructor Material Web Development & Design Foundations: HTML5 10th Edition Chapter 3 Apply Your Knowledge 1. Predict the Result. The students will sketch out a page with the following components: “Trillium Media Design” page title, a web page with blue background color and gray text using Arial font, “Trillium Media Design” as a heading with blue text and a white background color, blue text, a navigation area with hyperlinks to the designated files, a paragraph of text, and a page footer with copyright information displayed in italic, small font. 2. Fill in the Missing Code. The suggested solution is below with the missing code is shown in red. body { background-color: #0066CC; color: #FFFFFF; } header { font-family: Arial, sans-serif }

Trillium Media Design

Our professional staff takes pride in its working relationship with our clients by offering personalized services that listen to their needs, develop their target areas, and incorporate these items into a website that works.

3. Find the Error. The page is missing the closing tag. Hands-On Exercises 1.

text goes here

2. body { background-color: #eaeaea; color: #000033; } Copyright © 2002-2020 Terry A. Felke-Morris Page 1