Solutions Manual Sample Syllabi S olutions to End - of - Chapter Hands - On Exercises Sup plemental Acti vities: Group Website Evalu ation, W ebQuest, Web Site Project Sample Syllabus First Semester Web Development Course 16 Week Semester Course Assignment Schedule Date Topics & Reading Assignment Due Week 1 Intro to Course Chapter 1 Intro to the Internet & W eb Week 2 Chapter 2 HTML Basics Lab 1 Assignment Week 3 Chapter 3 Configuring Color & Text with CSS Project: Topic Approval Lab 2 Assignment Week 4 Chapter 4 Visual Elements & Graphics Lab 3 Assignment Week 5 Chapter 5 Web Design Lab 4 Assignment Week 6 Chapter 6 Page Layout with CSS Project: Planning Analysis Sheet Lab 5 Assignment Week 7 Chapter 7 Responsive Page Layout Lab 6 Assignment Week 8 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 C hapter 10 Web Site Development Project: Update 1 Week 12 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 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 explanat ion of the web site project is in a separate document. Sample Syllabus First Semester Web Development Course 12 Week Semester Course Assignment Schedule Date Topics & Reading Assignment Due Week 1 Intro to Course Chapt er 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 Ass ignment Project: Site Map Week 7 Chapter 7 Respons ive 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 Assignme nt 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 choosin g 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 web site project is in a separate document. Sample Syllabus First Semester Web Development Course 8 Week Semester Course Assignment Schedule Date Topics & Reading Assignment Due Week 1 Intro to Course Chapter 1 Intro to the Internet & Web Week 2 Chapter 2 HTML Basics Lab 1 Assignment Project: Topic Approval Week 3 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 w ith CSS Lab 4 Assignment Week 6 Chapter 7 Respons ive 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 The Lab Assignm ents 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 web site project is in a separate document. Materials Web Develop ment & Design Foundations: HTML5 & CSS3 , 10 th Edition Chapter 1 Page 1 Hands - On Exercise 1. Student answers will vary. 2. Student answers will vary. Web Research S tudents' 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 starte d? 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 W ide 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 wit h the W3C (as of 2002) in the role of Director. Sources: Multiple pages at the W3C web site ( http s ://w3c.org, http s ://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 pe r 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 ht tp://www.w3.org/Consortium/#public. Sources: Multiple pages at the W3C web site (http s ://w3c.org, http s ://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 li nk 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 http s ://w3c.org as the starting poi nt. 2 . The I nternet Society Research Materials Web Develop ment & Design Foundations: HTML5 & CSS3 , 10 th Edition Chapter 1 Page 2 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, on e of its pri ncipal 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 import ant. The mis sion 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 web site ( https://www.internetsociety.org , https://www.internetsociety.org/about - internet - society/ , https://www.internetso ciety.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 servic e that the chapter provides. Student a nswers 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.isoc - chicago.org. The chapter meets regularly offeri ng 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.inter netsociety.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 individua ls and organizations can join the Internet Society. Visit http://www.isoc.org/isoc/membership/app/ to apply online. The re 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: Multip le pages at the Internet Society's site ( https://www.inter netsociety.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 comp r ised 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: http s ://readwrite.c om/2015/02/18/http - update - http2 - what - you - need - to - know/ ) Materials Web Develop ment & Design Foundations: HTML5 & CSS3 , 10 th Edition Chapter 1 Page 3 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 u sed 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 informati on. (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 i s 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 ques tions 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 thin king about web sites in a (most likely) new and different manner. Student answers will vary greatly. Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 1 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 p age footer with c opyright symbol and information in a small font size. 2. Fill in the Missing Code. The missing code is shown in red. <!DOCTYPE html> <html lang="en"> <head> <title> Door County Wildflowers </title> <meta charset="utf - 8"> </hea d> <body> <header> <h1> Door County Wild Flowers < /h1 > </header> <main > <dl> <dt>Trillium </dt> <dd> This white flower blooms from April through June in wooded areas. </dd> <dt> Lady Slipper </dt> < dd> This yellow or chid bloo ms in June in wooded areas.</dd> </dl> </main > </body> </html> 3. Find the Error. The h1 element is coded with two opening tags. Replace the <h1> with </h1> . Hands - On Exercises 1. < h1>Your Name Here</h1> 2 . A suggested solution is: < a href = " http:// harpercollege.edu " >Harper College</a> Student answers will substitute the URL and name of your school Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 2 3. <ul> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> <li>Sunday</li> </ul> 4. <ol type="A"> <li> wake up </li> <li> eat breakfast </li> <li> go to school </li> </ol> 5. Answers will vary. Here is a sample solution. <h1> Arthur C. Clarke </h1> < blockquote > An y sufficiently advanced technology is indistinguishable from magic. < / blockquote > 6. <p>A diagram of the organization of a web site is called a <strong>site map</strong> . A <strong>site map</strong> represents the structure, or organization, of pages in a w ebsite in a visual manner. Creating the <strong>site map</strong> is one of the initial step s in developing a web site. </p> 7 . Answers will vary. Here is a sample with the minimum requirements. <!DOCTYPE html> <html lang="en"> <head> <title> Blockquo te Example </title> <meta charset="utf - 8"> </head> <body> <h1>The Power of the Web</h1> <p>According to Tim Berners - Lee at <a href=" http s ://www.w3.org/WAI/ "> http s ://www.w3.org/WAI/</a>:</p> <blockquote> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. </blockquote> </body> </html> Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 3 8 . Answers will vary. Here is a sample with the minimum requirements. <!DOCTYPE html> <html lang="en"> <head> <title > Ne twork Protocols </title> <meta charset="utf - 8"> </head> <body> <header> <h1>Network Protocols</h1> </hea der> <main> <dl> <dt>TCP Transmission Control Protocol</dt> <dd>TCP is a set of rules that breaks files and messages into individual units c alled packets, verifies the i ntegrity of the packets upon receipt, and reassembles the packets into the file or message at the destination. </dd> <dt>IP Internet Protocol</dt> <dd>IP is a set of rules that controls how data is sent between computers on the Internet. It usually w orks together with TCP. Each computer connected to the Internet is assigned at least one numeric IP address that uniquely identifies it. </dd> <dt>HTTP Hypertext Transfer Protocol</dt> <dd>HTTP is a set of rules for exch anging files such as text, gr aphic images, sound, video, and other multimedia files on the Web. Web browsers and web servers usually use this protocol.</dd> </dl> <p><a href= " http://compnetworkin g.about.com/od/networkprotocols/Network_Protocols.htm " >Mor e information about protocols</a></p> </main> </body> </html> 9 . Answers will vary. Here is a sample with the minimum requirements. <!DOCTYPE html> <html lang="en"> <h ead> <title> The Beatles </title> <meta charset="utf - 8"> </head> <body> <header> <h1> <a href= " http://beatles.com " > The Beatles </a> </h1> </header> <main> <h3>Group Members:</h3> <ul type="square"> <li>John Lennon</ li> <li>Paul McCartney</li> <li>George Harrison</li> <li> Ringo Starr</li> </ul> <h3>Favorite CDs:</h3> <dl> <dt>Abbey Road</dt> Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 4 <dd>This is considered by most to be the Beatles best album. Favorite tracks: Something, Oh! Darling, Here Comes the Sun</dd> <dt>Let It Be</dt> <dd>This is the last album t hat the Beatles recorded. Favorite tracks: Let It Be, Across the Universe, The Long and Winding Road.</dd. <dt>Help!</dt> <dd>This album features Paul's masterpie ce: Yesterday. Favorite tracks: Help!, Ticket to Ride, Yesterday</dd> </dl> </main> </body> < /html> 10 . Answers will vary. Here is a sample with the minimum requirements. <!DOCTYPE html> <html lang="en"> <head> <title> Macroni Salad </title> <meta charset="utf - 8"> </head> <body> <header> <h1>Macaroni Salad</h1> </header > <main> <ul> <li>1 cup elbow macaroni</li> <li>1 cup mayonnaise (more or less to taste)</li> <li>1 tablespoon finely chopped onion</li> <li>3 or 4 medium radishes, grated</li> <li>2 hard boiled eg gs, chopped</li> <li>1 dozen medium black olives, chopped</li> </ul> <ol> <li>Prepare 1 cup e lbow macaroni according to directions on package. Rinse in cold water and drain.</li> <li>Combine remaining ingredients in a large bowl.</li> <li>Stir in m ac a roni.</li> <li>Chill for several hours before serving.</li> </ol> Serves 8. < div ><a href= " http://allrecipes.com " >More Recipes</a></ div > </ main> </body> </html> Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 5 1 1 . Answers will vary. Here is a sample with the m inimum requirements. <!DOCTYPE html> <html lang="en"> <head> <title> Web Development Resource Blog </title> <meta charset="utf - 8"> </head> <body> <header> <h1> Web Development Resource Blog</ h1> </header> <main> <article> <header><h 2 > Textbook Companio n Website </h 2 ></header> <time datetime="2020 - 02 - 01">February 1, 2020</time> < a href= ” https://we bdevfoundations.net ” > https:// webdevfoundations.net</a > <p> Th is web site is a companion to our textbook and provides hel pful resources for each c hapter.</p > < article> <header><h 2 > HTML Validation </h 2 ></header> <time datetime="2020 - 02 - 0 2 ">February 2 , 2020</time> <a href= ” https://valid ator.w3.org/ ” > https://validator.w3.org/ </a > <p> This website provi des a tool to validate the HTML on our web pages. </p> </article> </ mai n > < footer > Copyright &copy ; 2020 Your Name Here< / footer > </body> </html> Web Research Your students' answers to these research assignments will vary, but they should contain most of the information described below. A. HTML5 Tuto rial Research A sample page: <!DOCTYPE html> <html lang="en"> <head> <title> HTML5 Tutorial Resea rch </title> <meta charset="utf - 8"> </head> <body > <header> < h1>EchoEcho.com</h1 > </header> <main> <dl> Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 6 <dt>URL:</dt> <dd>http://echoecho.com/html.htm</dd> <dt>Level:</dt > <dd>This tutorial is geared for beginners, but may be useful to use as a reference by more experienced developers.</dd> <dt>Recommendation:</dt> <dd>I would recommend this site to others. It is easy to find topics and the examples are good.</dd > </dl> <h2>Two Concepts Learned:</h2> <ol> <li>Links are the most funda mental 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 pa ge (Internal). Links to other pages within the current site (Local) Links to pages outside the current site (Global). </li> <li>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 usin g hexadecimal numbers it goes like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. </li> </ol> </main> </body> </html> B. Web Research: Focus on Design Expect very basic comments at this point in the course . A Sample Page: <!DOCTYPE html> <html la ng="en"> <head> <title> Appealing Website </title> <meta charset="utf - 8"> </head> < body> <header> <h1>Focus on Web Design</h1> </header> <main> <h2 >Adobe </h 2 > <h3 >URL: http:// adobe .com</h3 > <h4 >This Page is Ap pealing Because...</h4 > <ol> <li>It is easy to read. There is good contrast between the text and the background color. </li> <li>There is movement and interactivity on the page. This makes it more interesting. </li> <li>It is easy to find what I need. The navigation is easy to use.</li > </ol> <h2>Galleria Furnishings</h2 > <h 3 >URL: http://www.g alleriafurnishings.com/</h3> Material Web Developmen t & Design Foundations : HTML5 & CSS3 , 10 th Edition Chapter 2 http://terrymorris.net Page 7 <h4 >This Pa ge is Unappealing Because...</h4 > <ol> <li>I have to scroll down to see what I want. There doesn't seem to be any g ood organization. </li> <li>The bott om of the home page has some policy information way off to the right side. I wonder why they did that? </li> <li>I can't search for what I want. Instead I'll have to start looking at other pages.</li> </ol> <h4 > S uggestions for Improvement:</h4 > <ol> <li>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. </li> <li>I would eliminate the extra bl ank space on the page and move the posit ion of the store policy informa t i on. </li> <li>I would add a search function to the home page so that customers could get right to the products they are looking for. </li> </ol> </main> </body> </html> Material Web Development & Design Foundations: HTML5 10 th Edition Chapter 3 Page 1 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 hype rlinks 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 so lution is below with the missing code is shown in red. <!DOCTYPE html> <html lang="en"> <head> <title>Trillium Media Design</title> <meta charset="utf - 8"> <style> body { background - color: #0066CC; color: # FFFFFF ; } header { font - family : Arial , sans - serif } </style > </head > <body> <header> <h1>Trillium Media Design</h1> </header > <p>Our professional staff takes pride in its working relationship with our clients by offering personalized services that listen to their needs, develop their target ar eas, and incorporate these items into a website that works. </p> </body> </html> 3. Find the Error. The page is missing the closing </ style > tag. H ands - On Exercises 1. < p style=“background - color:# 00FF 00;color:#FFFFFF”> text goes here </ p > 2. <style > body { background - color: # eaeaea ; color: # 000033 ; } </style>