Front-End Web Developmentmembers.tcosites.com/downloads/class/FEWD_Lab_Document.pdf · 2020. 10....

1

Front-EndWeb DevelopmentLabs and ActivitiesVersion 10/6/2020

2

Lab Reconciliation ................................................................................................................................................................... 3

Lesson 1 Labs and Activities.................................................................................................................................................... 6

Lesson 2 Labs and Activities.................................................................................................................................................... 7

Lesson 3 Labs and Activities..................................................................................................................................................11







Lesson 10 Labs and Activities................................................................................................................................................37


















Capstone Project................................................................................................................................................................... 76

3

Lab Reconciliation

Lesson Lab # Lab ActivityTextbook

Page #1 Activity 1-1 Our Sample HTML File 92 Activity 2-1 Try It Yourself – Creating and Viewing a Basic Web Page 262 Activity 2-2 HTML Containing Paragraph and Line Breaks 312 Activity 2-3 Heading Tags 342 Activity 2-4 Semantic Markup of Basic Content 402 Activity 2-5 Try it Yourself – Formatting Text in HTML 323 Activity 3-1 A Single External Style Sheet 593 Activity 3-2 HTML Code for a Page Using an External Style Sheet 613 Activity 3-3 A Web Page with an Internal Style Sheet 713 Activity 3-4 Try it Yourself – Creating a Style Sheet of Your Own 634 Activity 4-1 A Simple HTML Document with a Simple Script 814 Activity 4-2 A Simple Event Handler 944 Activity 4-3 The Complete Date and Time Script 884 Activity 4-4 The Date and Time Script in an HTML Document 884 Activity 4-5 The Date and Time Script with a Large Clock Display 905 Activity 5-1 A Simple HTML Document with Some HTML Syntax Errors Illustrated 1025 Activity 5-2 Valid HTML and CSS That Doesn't Display Nicely 1075 Activity 5-3 A Simple HTML Document with a Few Different JavaScript Errors 1125 Activity 5-4 Corrected Scriptvar 1176 Activity 6-1 Special Character Codes 1246 Activity 6-2 Special Formatting Tags (p. 127) 1276 Activity 6-3 Using Font Style Rules to Create a Basic Resume 1316 Activity 6-4 The text-align Style Rule Used with the style Attribute 1376 Activity 6-5 Unordered Lists, Ordered Lists, and Definition Lists 1396 Activity 6-6 Using Lists to Build Outlines 1426 Activity 6-7 Using the list-style-type Style Rule with the style Attribute in Multitiered Lists 1446 Activity 6-8 Creating Tables with the <table>, <tr>, <td>, and <th> Tags 1486 Activity 6-9 Specifying Table Cell Widths 1526 Activity 6-10 Alignment, Cell Spacing, Borders, and Background Colors in Tables 1546 Activity 6-11 Alignment, Cell Spacing, Borders, and Background Colors in Tables 1596 Activity 6-12 Try It Yourself - Preparing a Sample Text 1216 Activity 6-13 Putting It All Together Lab - HTML Basics, Part 1 NA6 Activity 6-14 Putting It All Together Lab - HTML Basics, Part 2 NA7 Activity 7-1 Setting Anchor Points by Using the <a> Tag with an id Attribute 1717 Activity 7-2 The historyanswers.html File 1757 Activity 7-3 The historyanswers.html File That historyquiz.html Links To 1767 Activity 7-4 Using Styles to Display Link Pseudo-classes 1847 Activity 7-5 Try It Yourself – Creating a Simple Site Architecture 1708 Activity 8-1 Using Styles to Produce Background, Text, and Border Colors 1998 Activity 8-2 Using the <img> Tag to Place Images on a Web Page 2158 Activity 8-3 Using float Style Properties to Align Images on a Web Page 2198 Activity 8-4 Using vertical-align Styles to Align Text with Images 2228 Activity 8-5 Using Thumbnails for Effective Image Links 2248 Activity 8-6 Defining the Regions of an Image Map with <map> and <area> Tags 2328 Activity 8-7 Linking an Image to a Windows Media Video 2358 Activity 8-8 Using a <video> Element to Directly Embed a Video Clip 2398 Activity 8-9 Using the <audio> Element to Embed and Play an Audio File 2408 Activity 8-10 Try It Yourself – Cropping in Gimp 2058 Activity 8-11 Try It Yourself – Creating Your Own Map 230

4


Page #8 Activity 8-12 Try It Yourself – Create or Find Some Multimedia to Use in Your Website 234

27 Activity 27-1 A Form with Various User-Input Components 69727 Activity 27-2 Populate the Form with Values 71927 Activity 27-3 A Form That Displays Data in a Pop-up Window 7219 Activity 9-1 Simple Code to Produce Four Colored <div> Elements w Borders and Margins 2519 Activity 9-2 Simple Code to Produce Four Colored <div> Elements w Borders, Margins, and Padding 2599 Activity 9-3 Using float to Place <div> Elements 264

10 Activity 10-1 Showing Relative Positioning with Four Color Blocks 27810 Activity 10-2 Using Absolute Positioning of the Color Blocks 27910 Activity 10-3 Using z-index to Alter the Display of Elements in the Color-Blocks Sample 28211 Activity 11-1 Creating a Basic List with Color and Border Styles 29111 Activity 11-2 Creating an Image Map Using CSS 29611 Activity 11-3 Basic Page with Vertical Navigation in a List 30011 Activity 11-4 Multilevel Vertical Navigation in a List 30711 Activity 11-5 Basic Horizontal Navigation from a List 31011 Activity 11-6 Putting It All Together Lab - CSS Basics NA12 Activity 12-1 Basic Fixed/Liquid Hybrid Layout Structure 32512 Activity 12-2 Basic Fixed/Liquid Hybrid Layout Structure (with Content) 33212 Activity 12-3 Full Style Sheet for the Fixed/Liquid Hybrid Layout 33312 Activity 12-4 Three-Column Layout with display: table; 33712 Activity 12-5 Changing the Order of the Layout Columns with a Flexible Box Layout 34312 Activity 12-6 Using the CSS Grid Module to Lay Out a Web Page 34712 Activity 12-7 Try It Yourself – Finding Examples of Layouts You Like 31812 Activity 12-8 Try It Yourself – Using CSS display: table; to Vertically Align Content 33813 Activity 13-1 Adding Multiple Backgrounds 35813 Activity 13-2 The Difference Between background-attachment Values 36313 Activity 13-3 A Radial Gradient on Two Different Elements 36813 Activity 13-4 Two Radial Gradients Create an Interesting Effect 37013 Activity 13-5 Three <div> Elements with Rounded Corners 37114 Activity 14-1 Enlarging a Button When in Hover State 38514 Activity 14-2 CSS for Creating a Folded Paper Effect 39114 Activity 14-3 A Rotating Cube 39514 Activity 14-4 Spinning a Box When You Click It 41815 Activity 15-1 A Simple Animation 40315 Activity 15-2 Animating a Headline 40415 Activity 15-3 Bouncy Ball 40715 Activity 15-4 Improved Bouncy Ball 40915 Activity 15-5 A Canvas with Squares and a Circle 41215 Activity 15-6 Adding More Shapes to the Canvas 41515 Activity 15-7 Adding an Image to the Canvas 41715 Activity 15-8 Drawing, Scaling, and Cropping an Image on a Canvas 41815 Activity 15-9 The Animated Dog 42216 Activity 16-1 A Basic HTML Template 43617 Activity 17-1 Basic HTML Table 45617 Activity 17-2 Contact Information Table 45717 Activity 17-3 CSS to Rearrange a Table 45917 Activity 17-4 Responsive Columns Without Media Queries 46418 Activity 18-1 A Page with Two Breakpoints 47718 Activity 18-2 Initial Styles for a Web 8018 Activity 18-3 CSS Added for Small Screens 48118 Activity 18-4 Media Queries in the CSS 48219 Activity 19-1 Using JavaScript to Print Some Text 489

5


Page #19 Activity 19-2 A Random-Quote Web Page 49119 Activity 19-3 The Quotable Quotes Page, Made Unobtrusive 49720 Activity 20-1 An HTML Document with a Simple Event Handler 51220 Activity 20-2 Putting It All Together Lab - Getting Started with JavaScript NA21 Activity 21-1 Displaying the Last Modified Date 52621 Activity 21-2 A Web Page That Uses JavaScript to Include Back and Forward Buttons 52921 Activity 21-3 A Simple HTML Document 53221 Activity 21-4 The HTML Document for the Movable Layer Example 53721 Activity 21-5 The Script for the Movable Layer Example 54021 Activity 21-6 Hiding and Showing Objects 54221 Activity 21-7 The Complete Text-Modifying Example 54421 Activity 21-8 Adding Text to a 4522 Activity 22-1 Assigning Values to Strings and Combining Them 55922 Activity 22-2 The HTML Document for the Sorting Example 56822 Activity 22-3 The JavaScript File for the Sorting Example 56822 Activity 22-4 The Greet Function in an HTML Document 57122 Activity 22-5 The Complete Function Example 57222 Activity 22-6 The Average Function in an HTML Document 57422 Activity 22-7 A Sample Script That Uses the Card Object 58022 Activity 22-8 The HTML File for the Card Object Example 58122 Activity 22-9 Adding a Method to the String Object 58222 Activity 22-10 A Script to Test JavaScript's Random Number Function 58622 Activity 22-11 Putting It All Together Lab - Basic Syntax 2 NA22 Activity 22-12 Putting It All Together Lab - Functional Programming: Basic Exercises NA23 Activity 23-1 The HTML File for the Time and Greeting Example 60123 Activity 23-2 A Script to Display the Current Time and a Greeting 60123 Activity 23-3 A Loop Using the for Keyword 60523 Activity 23-4 HTML to Prompt for Names and Display Them 61123 Activity 23-5 JavaScript to Prompt for Names and Display Them 61123 Activity 23-6 Putting It All Together Lab - Basic Syntax 1 NA24 Activity 24-1 The JavaScript File for the Mouse Click Example 62524 Activity 24-2 The HTML File for the Mouse Click Example 62624 Activity 24-3 Displaying Typed Characters 62924 Activity 24-4 Using click to Show or Hide Content 63124 Activity 24-5 An HTML Document That Uses JavaScript to Enable You to Create & Close Windows 64124 Activity 24-6 Moving and Resizing a New Window 64424 Activity 24-7 Using Timeouts to Update a Page Every Two Seconds 64624 Activity 24-8 An HTML Document That Uses JavaScript to Display Alerts, Confirmations, and Prompts 64825 Activity 25-1 A Script to Display Information About the Browser 66725 Activity 25-2 The HTML File for the Graphic Check Box Example 67425 Activity 25-3 The JavaScript File for the Graphic Check Box Example 67526 Activity 26-1 The Complete Library Effects Example 68828 Activity 28-1 Try It Yourself – Commenting Your Code 741

6

Lesson 1 Labs and ActivitiesAfter you have reviewed the Introductory Presentation, read your textbook chapter, viewed the Interactive LessonPresentation, and watched any videos in this Lesson, complete the following activities. Save your files as instructedabove.

Activity 1-1 Our Sample HTML File (p. 9)Input the code found in Listing 1.1 in your textbook.

Your output should look like this:

7


Activity 2-1 Try It Yourself – Creating and Viewing a Basic Web Page (p. 26)Before you learn the meaning of the HTML tags used in Listing 2.1, you might want to see exactly how we went aboutcreating and viewing the document itself. Follow these steps:

1. Type all the text in Listin g2.1, including the HTML tags, in Windows Notepad (or use TextEdit on a Mac oranother text editor of your choice).

2. Select File, Save As. Be sure to select plain text (or ASCII text) as the file type.3. Name the file firstpage.html.4. Choose the folder on your hard drive where you want to keep your web pages – and remember which folder you

choose! Click the Save or OK button to save the file.5. Now start your favorite web browser. (Leave your text editor running, too, so you can easily switch between

viewing and editing your page.)6. In Microsoft Edge, select File, Open, and click Browser. If you are using Firefox or Safari, select File, Open File.

Navigate to the appropriate folder and select the firstpage.html file. Some browsers and operating systems alsoenable you to drag and drop the firstpage.html file onto the browser window to view it.

Voila! You should see Figure 2.1 (Image below).

8

Activity 2-2 HTML Containing Paragraph and Line Breaks (p. 31)Input the code found in Listing 2.2 in your textbook.


9

Activity 2-3 Heading Tags (p. 34)Input the code found in Listing 2.3 in your textbook.


10

Activity 2-4 Semantic Markup of Basic Content (p. 40)Input the code found in Listing 2.4 in your textbook.


11


Activity 3-1 A Single External Style Sheet (p. 59)Since you are working with a style sheet, there is no output. Be sure to check your code against Listing 3.1 in yourtextbook.

12

Activity 3-2 HTML Code for a Page Using an External Style Sheet (p. 61)Since you are working with a style sheet, there is no output. Be sure to check your code against Listing 3.1 in yourtextbook.

13

Activity 3-3 A Web Page with an Internal Style Sheet (p. 71)Since you are working with a style sheet, there is no output. Be sure to check your code against Listing 3.3 in yourtextbook.

14


Activity 4-1 A Simple HTML Document with a Simple Script (p. 81)Input the code found in Listing 4.1 in your textbook. Your output should look like this:

Activity 4-2 A Simple Event Handler (p. 84)Your output should look like this:

Activity 4-3 The Complete Date and Time Script (p. 88)Be sure type in the code found in Listing 4.3 so you can use it in Activity 4-4. Make sure it is correct.

Commented [MM1]: Need output image here

15

Activity 4-4 The Date and Time Script in an HTML Document (p. 88)Input the code found in Listing 4.4 in your textbook. Your output should look like this:

Activity 4-5 The Date and Time Script with a Large Clock Display (p. 90)Input the code found in Listing 4.5 in your textbook. Your output should look like this:

16


Activity 5-1 A Simple HTML Document with Some HTML Syntax Errors Illustrated (p. 102)Input the code found in Listing 5.1 in your textbook. Your output should look like this:

Follow the instructions to revise the output to look like the following:

17

Activity 5-2 Valid HTML and CSS That Doesn't Display Nicely (p. 107)Input the code found in Listing 5.2 in your textbook. Your output should look like this:

Activity 5-3 A Simple HTML Document with a Few Different JavaScript Errors (p. 112)Input the code found in Listing 5.3 in your textbook. Your output should look like this:

Activity 5-4 Corrected Scriptvar (p. 117)Input the code found in Listing 5.4 in your textbook. Your output should look like this:

Commented [MM2]: Need additional instructions here?


18

Lesson 6 Labs and ActivitiesAfter you have reviewed the Introductory Presentation, read your textbook chapter, viewed the InteractiveLesson Presentation, and watched any videos in this Lesson, complete the following activities. Save your files asinstructed above.

Activity 6-1 Special Character Codes (p. 124)Input the code found in Listing 6.1 in your textbook. Your output should look like this:

Activity 6-2 Special Formatting Tags (p. 127)Input the code found in Listing 6.2 in your textbook. Your output should look like this:

19

Activity 6-3 Using Font Style Rules to Create a Basic Resume (p. 131)Input the code found in Listing 6.3 in your textbook. Your output should look like this:

Activity 6-4 The text-align Style Rule Used with the style Attribute (p. 137)Input the code found in Listing 6.4 in your textbook. Your output should look like this:

20

Activity 6-5 Unordered Lists, Ordered Lists, and Definition Lists (p. 139)Input the code found in Listing 6.5 in your textbook. Your output should look like this:

Activity 6-6 Using Lists to Build Outlines (p. 142)Input the code found in Listing 6.6 in your textbook. Your output should look like this:

21

Activity 6-7 Using the list-style-type Style Rule with the style Attribute in Multitiered Lists (p. 144)Input the code found in Listing 6.7 in your textbook. Your output should look like this:

Activity 6-8 Creating Tables with the <table>, <tr>, <td>, and <th> Tags (p. 148)Input the code found in Listing 6.8 in your textbook. Your output should look like this:

22

Activity 6-9 Specifying Table Cell Widths (p. 152)Input the code found in Listing 6.9 in your textbook. Your output should look like this:

Activity 6-10 Alignment, Cell Spacing, Borders, and Background Colors in Tables (p. 154)Input the code found in Listing 6.10 in your textbook. Your output should look like this:

23

Activity 6-11 Alignment, Cell Spacing, Borders, and Background Colors in Tables (p. 159)Input the code found in Listing 6.11 in your textbook. Your output should look like this:

Activity 6-12 Try It Yourself - Preparing a Sample Text (p. 121)You can make the most of learning how to style text throughout this lesson if you have some sample text that you canuse to display different fonts and colors and that you can indent, center, or otherwise manipulate. It doesn’t reallymatter what type of text you use because there are so many stylistic possibilities to try that they would never appear allon the same web page anyway (unless you wanted to drive your visitors batty). Take this opportunity to get a feel forhow text-level changes can affect the appearance of your content.

If the text you’ll be using is from a word processing or database program, be sure to save it to a new file in plain-text or ASCII format. You can then add the appropriate HTML tags and style attributes to format it as you gothrough this lesson.

Any text will do but try to find (or type) some text you want to put onto a web page. The text from a companybrochure or from your résumé might be a good choice.

Any type of outline, bullet points from a presentation, numbered steps, glossary, or list of textual informationfrom a database will serve as good material to work with.

Before you use the code introduced in this lesson to format the body text, add the set of skeleton HTML tagsyou’ve used in previous lessons (at least the <!doctype>, <html>, <head>, <title>, and <body> tags).

24

Activity 6-13 Putting It All Together Lab - HTML Basics, Part 1

1. Make a page with these capabilities:

A main heading

Some subheadings

Some paragraphs

An image that floats to the right of the page with text wrapping around it. Note that images found onimages.google.com are often not legal for use on your own pages. However, there are many free image sites,one of which is pixabay.com.

A bulleted list

A numbered list

A navigation panel with hypertext links to the top of the current page, bottom of the current page, top of asecond page, and bottom of a second page. For the second page, just copy the first page and change the tile.

Here is a representative example, although if you do not know about CSS yet, do not worry about reproducing the pagebackground color or the color and background of the main heading.

Commented [MM4]: Need instructions for adding online

25

Activity 6-14 Putting It All Together Lab - HTML Basics, Part 2

1. Start by copying your two pages from the previous set of exercises. Then, make the following changes Replace the first list with a bordered table that displays some tabular data. Replace the second list with a set of buttons. Each of the buttons, when pressed, should pop up a JavaScript

dialog (alert) that gives confirmation that the button was pressed. Add a subtitle below the right-aligned image.

Here is a representative example, but do not worry about reproducing the fonts and colors.

Commented [MM5]: Need instructions for adding online

Commented [MM6]: What are the arrows for?

26


Activity 7-1 Setting Anchor Points by Using the <a> Tag with an id Attribute (p. 171)Input the code found in Listing 7.1 in your textbook. Your output should look like this:

Activity 7-2 The historyanswers.html File (p. 175)Input the code found in Listing 7.2 in your textbook. Your output should look like this:

27

Activity 7-3 The historyanswers.html File That historyquiz.html Links To (p. 176)Input the code found in Listing 7.3 in your textbook. Your output should look like this:

Activity 7-4 Using Styles to Display Link Pseudo-classes (p. 184)Input the code found in Listing 7.4 in your textbook. Your output should look like this:

28

Activity 7-5 Try It Yourself – Creating a Simple Site Architecture (p. 170)Hopefully by now you’ve created a page or two of your own while working through the lessons. Follow these steps toadd a few more pages and link them:

1. Use a home page as a main entrance and as a central hub to which all your other pages are connected. If youcreated a page about yourself or your business, use that page as your home page. You also might like to create anew page now for this purpose.

2. On the home page, put a list of links to the other HTML files you’ve created (or placeholders for the HTML filesyou plan to create soon). Be sure that the exact spelling of the filename, including any capitalization, is correct inevery link.

Note: Most web servers run UNIX or Linux, which are case sensitive, but Windows does not distinguish between caseswhen you’re viewing your pages locally. This means that links to african.html and African.html will both point to thesame page on a Windows machine, but they will point to different pages on the web server. It’s best to stick to onecase—preferably lowercase—for all your web filenames.

1. On every other page besides the home page, include a link at the bottom (or top) leading back to your homepage. This makes navigating around your site simple and easy.

2. You might also want to include a list of links to related or interesting sites, either on your home page or on aseparate links page. People often include a list of their friends’ personal pages on their own home page.However, businesses should be careful not to lead potential customers away to other sites too quickly, asthere’s no guarantee that they’ll return to your site after leaving, and the other site might not have a link back.

29


Activity 8-1 Using Styles to Produce Background, Text, and Border Colors (p. 199)Input the code found in Listing 8.1 in your textbook. Your output should look like this:

Activity 8-2 Using the <img> Tag to Place Images on a Web Page (p. 215)Input the code found in Listing 8.2 in your textbook. Your output should look like this:

30

Activity 8-3 Using float Style Properties to Align Images on a Web Page (p. 219)Input the code found in Listing 8.3 in your textbook. Your output should look like this:

Activity 8-4 Using vertical-align Styles to Align Text with Images (p. 222)Input the code found in Listing 8.4 in your textbook. Your output should look like this:

31

Activity 8-5 Using Thumbnails for Effective Image Links (p. 224)Input the code found in Listing 8.5 in your textbook. Your output should look like this:

Activity 8-6 Defining the Regions of an Image Map with <map> and <area> Tags (p. 232)Input the code found in Listing 8.6 in your textbook. Your output should look like this:

Activity 8-7 Linking an Image to a Windows Media Video (p. 235)Input the code found in Listing 8.7 in your textbook. Your output should look like this:

32

Activity 8-8 Using a <video> Element to Directly Embed a Video Clip (p. 239)Input the code found in Listing 8.8 in your textbook. Your output should look like this:

Activity 8-9 Using the <audio> Element to Embed and Play an Audio File (p. 240)Input the code found in Listing 8.9 in your textbook. Your output should look like this:

Activity 8-10 Try It Yourself – Cropping in Gimp (p. 205)The GIMP toolbox offers quick access to the crop tool and its possible attributes. Find an image file – either a digitalimage you have taken with your camera and stored on your hard drive or an image you found online. After opening theimage in GIMP, perform the following steps to crop it in GIMP:

1. In the GIMP toolbox, click the Crop tool. Depending on the tool you select, you might have additional attributesyou can select.

2. In the image you want to crop, draw a box around the selection by clicking the upper-left corner of the portionof the image you want to keep and holding down the left mouse button while you drag down to the lower-rightcorner.

3. Click one of the corners of the selection to apply the cropping.

33

Activity 8-11 Try It Yourself – Creating Your Own Map (p. 230)You are more likely to remember how to make image maps if you get an image of your own and turn it into an imagemap:

For starters, it’s easiest to choose a fairly large image that is visually divided into roughly rectangular regions. If you don’t have a suitable image handy, use your favorite graphics program to make one. Perhaps use a single

photograph showing several people. You can use each person as an area of the image map. Try a few different image mapping tools to determine which one you like best. Start with standalone software

such as Mapedit (https://boutell.come/mapedit/) and move to the online image map maker at www.image-maps.com. There are others; use the search engine of your choice to find variations on the image map softwaretheme. (Some web editors and graphic editors can make image maps as well.)

Activity 8-12 Try It Yourself – Create or Find Some Multimedia to Use in Your Website (p. 234)Before you learn how to place multimedia on your webs pages, you need to have some multimedia content.

Creating multimedia of any kind can be a challenging and complicated task. If you are planning to create your owncontent from scratch, you need far more than these lessons to become the next crackerjack multimedia developer.When you have some content, however, you can use the tips in this lesson to show you how to place your new creationsinto your web pages.

If you are artistically challenged, you can obtain useful multimedia assets in several alternative ways. Aside from theobvious (such as hiring an artist), here are a few suggestions:

Much of the material on the Internet is free. Of course, it’s still a good idea ot double-check with the author orcurrent owner of the content; you don’t want to be sued for copyright infringement. IN addition, various officesof the U.S. government generate content that, by law, belongs to all Americans. (For example, any NASA footagefound online is free for your use.)

Many search engines have specific search capabilities for finding multimedia files. As long as you are carefulabout copyright issues, this can be an easy way to find multimedia related to a specific topic. A smile search for“sample MP3 movie” or sample audio files” will produce more results than you can handle.

If you are creatively inclined, determine the medium you like most – video production, audio production, oranimation, for example. When you have a starting point, look into the various types of software that will enableyou to create such artistic masterpieces. Many companies, including Adobe (www.adobe.com) and Apple(www.apple.com), provide multimedia software. One popular tool available for Windows and Macintosh isCamtasia (wwwltechsmith.com/video-editor.html).

Read the information found at The U.S. governments copyright website (https://www.copyright.gov/title17/) to makesure you understand the laws.

Create some simple multimedia and/or explore the Internet to find places you can obtain copyright free multimedia.

34

Activity 27-1 A Form with Various User-Input Components (p. 697)Input the code found in Listing 27.1 in your textbook. Your output should look like this:

Activity 27-2 Populate the Form with Values (p. 719)Input the code found in Listing 27.2 in your textbook. How does your form work? Is it as expected?

Activity 27-3 A Form That Displays Data in a Pop-up Window (p. 721)Input the code found in Listing 27.3 in your textbook. Your output should look like this. Does it work as expected?

35


Activity 9-1 Simple Code to Produce Four Colored <div> Elements with Borders and Margins (p. 251)Input the code found in Listing 9.1 in your textbook. Your output should look like this:

Activity 9-2 Simple Code to Produce Four Colored <div> Elements with Borders, Margins, and Padding (p. 259)Input the code found in Listing 9.2 in your textbook. Your output should look like this:

36

Activity 9-3 Using float to Place <div> Elements (p. 264)Input the code found in Listing 9.3 in your textbook. Your output should look like this:

37


Activity 10-1 Showing Relative Positioning with Four Color Blocks (p. 278)Input the code found in Listing 10.1 in your textbook. Your output should look like this:

Activity 10-2 Using Absolute Positioning of the Color Blocks (p. 279)Input the code found in Listing 10.2 in your textbook. Your output should look like this:

38

Activity 10-3 Using z-index to Alter the Display of Elements in the Color-Blocks Sample (p. 282)Input the code found in Listing 10.3 in your textbook. Your output should look like this:

39


Activity 11-1 Creating a Basic List with Color and Border Styles (p. 291)Input the code found in Listing 11.1 in your textbook. Your output should look like this:

Activity 11-2 Creating an Image Map Using CSS (p. 296)Input the code found in Listing 11.2 in your textbook. Your output should look like this:

40

Activity 11-3 Basic Page with Vertical Navigation in a List (p. 300)Input the code found in Listing 11.3 in your textbook. Your output should look like this:

Activity 11-4 Multilevel Vertical Navigation in a List (p. 307)Input the code found in Listing 11.4 in your textbook. Your output should look like this:

Activity 11-5 Basic Horizontal Navigation from a List (p. 310)Input the code found in Listing 11.5 in your textbook. Your output should look like this:

41

Activity 11-6 Putting It All Together Lab - CSS Basics

For the HTML on these exercises, you can have separate HTML pages for each problem, or a single HTML page for all,whichever you prefer. For the CSS, however, try to use a single style sheet to accomplish all of the tasks.

1. Have all text in both <ul> and <ol> lists be blue. Do this with only a single entry: i.e., do not style ul and ol separately.Test this by putting in both kinds of lists.

2. Change your style sheet so that ul text is blue and ol text is red. Do not modify your existing entry, but instead add asingle additional entry to your style sheet.

3. Make a style sheet entry so that designated tables will have their headings in inverse video (i.e., white text on blackbackground). This should not apply to all tables, but only tables with the appropriate CSS class name. Test by makingtwo tables: one with the style and one without. For slight bonus credit, put the two tables side-by-side instead of ontop of each other (this bonus part is really an HTML question, not a CSS question).

4. Make some style sheet entries that will let you make zebra-striped tables, where every other row has a differentbackground color. For bonus credit, style all the rows at once, without having to put “class” entries in any of therows. (Hint: look at the positional selectors.)

Commented [MM7]: Need instructions for putting online

42


Activity 12-1 Basic Fixed/Liquid Hybrid Layout Structure (p. 325)Input the code found in Listing 12.1 in your textbook. Your output should look like this:

Activity 12-2 Basic Fixed/Liquid Hybrid Layout Structure (with Content) (p. 332)Input the code found in Listing 12.2 in your textbook. Your output should look like this:

43

Activity 12-3 Full Style Sheet for the Fixed/Liquid Hybrid Layout (p. 333)Since this is the style sheet, check your code from Listing 12.3 in your text.

Activity 12-4 Three-Column Layout with display: table; (p. 337)Input the code found in Listing 12.4 in your textbook. Your output should look like this:

Activity 12-5 Changing the Order of the Layout Columns with a Flexible Box Layout (p. 343)Input the code found in Listing 12.5 in your textbook. Your output should look like this:

44

Activity 12-6 Using the CSS Grid Module to Lay Out a Web Page (p. 347)Input the code found in Listing 12.6 in your textbook. Your output should look like this:

Activity 12-7 Try It Yourself – Finding Examples of Layouts You Like (p. 318)A good place for examples of liquid layouts is the WordPress Theme Directory at https://wordpress.org/themes/.WordPress began as a blogging platform but in recent years has seen an increase in use as a nonblog content or site-management tool. The WordPress Theme Directory shows hundreds of examples of both fixed-width and liquid layoutsthat give you ideas, if not all the code, for what you can create. Even though you are not working with a WordPress blogor site as part of the exercises in these lessons, the Theme Directory is a place where you can see and interact with manyvariations on designs.

Spend some time looking at the Word Press examples and perhaps CSS Zen Garden as well at www.csszengarden.com.This will help you get a feel for the types of layouts you like without being swayed by the content in the layout.

Once you have found some layouts you like, you can use the techniques you learn in this lesson to recreate them onyour website.

Activity 12-8 Try It Yourself – Using CSS display: table; to Vertically Align Content (p. 338)One thing that the display: table-*; properties do that can be really useful is allow you to center content vertically in thespace. This is because table cells have vertical alignment.

To center content vertically in the space, simply add the display: table-cell; property to an element with an explicitheight and then set vertical-align to middle.

Try this now.

45


Activity 13-1 Adding Multiple Backgrounds (p. 358)Input the code found in Listing 13.1 in your textbook. Your output should look like this:

Activity 13-2 The Difference Between background-attachment Values (p. 363)Observe how the backgrounds scroll. Play around with the values in the CSS code to change how the page works in thebrowser.

Activity 13-3 A Radial Gradient on Two Different Elements (p. 368)Input the code found in Listing 13.3 in your textbook. Your output should look like this:

46

Activity 13-4 Two Radial Gradients Create an Interesting Effect (p. 370)Input the code found in Listing 13.4 in your textbook. Your output should look like this:

Activity 13-5 Three <div> Elements with Rounded Corners (p. 371)Input the code found in Listing 13.5 in your textbook. Your output should look like this:

47


Activity 14-1 Enlarging a Button When in Hover State (p. 385)Input the code found in Listing 14.1 in your textbook. Your output should look like this:

Activity 14-2 CSS for Creating a Folded Paper Effect (p. 391)Input the code found in Listing 14.2 in your textbook. Your output should look like this:

Activity 14-3 A Rotating Cube (p. 395)Input the code found in Listing 14.3 in your textbook. Does your box rotate as expected?

Activity 14-4 Spinning a Box When You Click It (p. 418)Input the code found in Listing 14.4 in your textbook. Does your box spin as expected?

Commented [MM8]: Need output image

48


Activity 15-1 A Simple Animation (p. 403)Input the code found in Listing 15.1 in your textbook. Does your content animate as expected?

Activity 15-2 Animating a Headline (p. 404)Input the code found in Listing 15.2 in your textbook. Does your headline animate as expected?

Activity 15-3 Bouncy Ball (p. 407)Input the code found in Listing 15.3 in your textbook. Does your ball bounce as expected?




49

Activity 15-4 Improved Bouncy Ball (p. 409)Input the code found in Listing 15.4 in your textbook. Does your ball bounce as expected?

Activity 15-5 A Canvas with Squares and a Circle (p. 412)Input the code found in Listing 15.5 in your textbook. Your output should look like this:

Activity 15-6 Adding More Shapes to the Canvas (p. 415)Input the code found in Listing 15.6 in your textbook. Your output should look like this:


50

Activity 15-7 Adding an Image to the Canvas (page 417)Input the code found in Listing 15.7 in your textbook. Your output should look like this:

Activity 15-8 Drawing, Scaling, and Cropping an Image on a Canvas (p. 418)Input the code found in Listing 15.8 in your textbook. Your output should look like this:

Activity 15-9 The Animated Dog (p. 422)Input the code found in Listing 15.9 in your textbook. Your dog perform as expected?

51


Activity 16-1 A Basic HTML Template (p. 436)Input the code found in Listing 16.1 in your textbook. Double check it to make sure it is correct.

52


Activity 17-1 Basic HTML Table (p. 456)Input the code found in Listing 17.1 in your textbook. Your output should look like this:

Activity 17-2 Contact Information Table (p. 457)Input the code found in Listing 17.2 in your textbook. Your output should look like this:

Activity 17-3 CSS to Rearrange a Table (p. 459)Input the code found in Listing 17.3 in your textbook. Your output should look like this:

Activity 17-4 Responsive Columns Without Media Queries (p. 464)Input the code found in Listing 17.4 in your textbook. Your output should look like this:




53


Activity 18-1 A Page with Two Breakpoints (p. 477)Input the code found in Listing 18.1 in your textbook. Your output should look like this. Notice the difference in screensize.

Activity 18-2 Initial Styles for a Web Page (p. 480)Input the code found in Listing 18.2 in your textbook.

Since this is the CSS code, there is no output.

54

Activity 18-3 CSS Added for Small Screens (p. 481)Input the code found in Listing 18.3 in your textbook. Notice the difference for small screen design.

Activity 18-4 Media Queries in the CSS (p. 482)Input the code found in Listing 18.4 in your textbook.

Since this is the CSS code, there is no output.

55


Activity 19-1 Using JavaScript to Print Some Text (p. 489)Input the code found in Listing 19.1 in your textbook. Your output should look like this.

Activity 19-2 A Random-Quote Web Page (p. 491)Input the code found in Listing 19.2 in your textbook. Your output should look like this. Reload the page several times tosee that it works as expected.

Activity 19-3 The Quotable Quotes Page, Made Unobtrusive (p. 497)Input the code found in Listing 19.3 in your textbook. Your output should look like this.


56


Activity 20-1 An HTML Document with a Simple Event Handler (p. 512)Input the code found in Listing 20.1 in your textbook. Your output should look like this.

Activity 20-2 Putting It All Together Lab - Getting Started with JavaScript

1. Try JavaScript interactively If you use Firefox, install Firebug from http://getfirebug.com/. Copy the simple test-page.html from the section’s

source code archive (javascript-getting-started), load it in Firefox, then launch Firebug by clicking on the Firebugicon or hitting F12. Click on the Console tab and try some interactive JavaScript commands. Customize theconsole as described in the notes if you wish.

If you use Chrome, copy the simple test-page.html from the section’s source code archive (java-script-getting-started), load it in Chrome, then launch the developer tools with Control-Shift-J. Click on the Console tab and trysome interactive JavaScript commands. Most browsers, even Internet Explorer and Microsoft Edge havesomething similar now.

2. Define a variable x and give it a value of 5. Evaluate x and verify it shows the value.3. Enter this function into the console:

function half(x) { return(x / 2); }

Try to predict what you will get for half(x), half(4), and half(3). It is simple to predict what you will get for half(4),but, depending on your programming background, it might not be so easy to predict what you will get for half(x) andhalf(3). Call half(x), half(4), and half(3) and see if you were right.

4. Try to predict what you will get if you evaluate x in the console. Is it still 5, or is it 3? Try it and see.5. Enter this function into the console:

function seven() {

x = 7; return(x);

}

Commented [MM17]: Need instructions for online here

57

Call seven() in the console. Try to predict what you will get if you evaluate x in the console. Try it and see. How doyou explain the surprising result?

6. Make a function called calculation that, given three numbers a, b, and c, returns (a + b)/c. Try it with a few normalvalues. Then, try to predict what you will get for calculation(1, 1, 0), calculation(-1, -1, 0), and calculation(1, -1, 0).Try those tests and see if you get what you expected.

7. Try the “more powerful practice” approach from the notes, where you load an HTML file that has a script tagpointing at a JavaScript file. Put a function definition in the JS file, load the HTML file, go to the console, and call thefunction. Then, add a second function definition to the JS file, reload the HTML file, return to the console, and callthe new function.

8. Write a function called is Even that, given a number, returns true if the number is even and false if the number isodd. This would be simple if we had covered if statements or the ?: ternary operator, but we haven’t, so you cannotuse either one.

58


Activity 21-1 Displaying the Last Modified Date (p. 526)Input the code found in Listing 21.1 in your textbook. Your output should look like this.

Activity 21-2 A Web Page That Uses JavaScript to Include Back and Forward Buttons (p. 529)Input the code found in Listing 21.2 in your textbook. Your output should look like this.

Activity 21-3 A Simple HTML Document (p. 532)Input the code found in Listing 21.3 in your textbook. Your output should look like this.


59

Activity 21-4 The HTML Document for the Movable Layer Example (p. 537)Input the code found in Listing 21.4 in your textbook. Your output should look like this.

Activity 21-5 The Script for the Movable Layer Example (p. 540)Input the code found in Listing 21.5 in your textbook. Your output should look like this.

60

Activity 21-6 Hiding and Showing Objects (p. 542)Input the code found in Listing 21.6 in your textbook. Your output should look like this.

Activity 21-7 The Complete Text-Modifying Example (p. 544)Input the code found in Listing 21.7 in your textbook. Your output should look like this.

Activity 21-8 Adding Text to a Page (p. 545)Input the code found in Listing 21.8 in your textbook. Your output should look like this.

61


Activity 22-1 Assigning Values to Strings and Combining Them (p. 559)Input the code found in Listing 22.1 in your textbook. Your output should look like this.

Activity 22-2 The HTML Document for the Sorting Example (p. 568)Input the code found in Listing 22.2 in your textbook. Does your page work as expected?

Activity 22-3 The JavaScript File for the Sorting Example (p. 568)Input the code found in Listing 22.3 in your textbook. Your output should look like this.

Activity 22-4 The Greet Function in an HTML Document (p. 571)Input the code found in Listing 22.4 in your textbook. Does your page work as expected?

Commented [MM19]: Need output image here.

62

Activity 22-5 The Complete Function Example (p. 572)Input the code found in Listing 22.5 in your textbook. Your output should look like this. Does your page work asexpected?

Activity 22-6 The Average Function in an HTML Document (p. 574)Input the code found in Listing 22.6 in your textbook. Your output should look like this. Does your page work asexpected?

Activity 22-7 A Sample Script That Uses the Card Object (p. 580)Input the code found in Listing 22.7 in your textbook. Check your script carefully.

63

Activity 22-8 The HTML File for the Card Object Example (p. 581)Input the code found in Listing 22.8 in your textbook. Your output should look like this. Does your page work asexpected?

Activity 22-9 Adding a Method to the String Object (p. 582)Input the code found in Listing 22.9 in your textbook. Your output should look like this. Does your page work asexpected?

Activity 22-10 A Script to Test JavaScript's Random Number Function (p. 586)Input the code found in Listing 22.10 in your textbook. Your output should look like this. Does your page work asexpected?

64

Activity 22-11 Putting It All Together Lab - Basic Syntax 2The last two problems are quite a bit more difficult than the first three.

1. Create an array containing four random numbers. Use one-step array allocation. Print out the array by evaluatingthe array variable in Firebug.

var fourNums = ...;

fourNums; --> [0.871570877817405, 0.9107447521970577, 0.743357509580703,0.6571292972456975]

2. Create an array containing 100 random numbers. Use two-step array allocation. Print out the array.

var hundredNums = ...; for(...) { ... }

hundredNums; --> [0.8742489161574934, 0.7147785711684753,

0.8062322101495641, ...

0.41288219216760613, 0.5113443687277072]

3. Make a function that given an array of strings, where each string represents a number, returns an array of thecorresponding numbers.

var strings = ["1.2", "2.3", "3.4"];

var nums = numberArray(strings);

nums; --> [1.2, 2.3, 3.4]

4. Write a function that, given a string, will return the longest token (consecutive string of characters) that containsneither an a nor a b.

longestToken("ababcdababefgababhiab"); --> "efg"

longestToken("aba"); --> ""

5. Write a function that, given an array of strings, will compute the sum of the lengths of the words that do not containa “q”. Do not use a loop or the forEach method, only array methods (filter, map, reduce) and stringmethods/properties (indexOf, length).

var test1 = ["stop", "quit", "exit"];

lengthOfNonQWords(test1); --> 8 var

test2 = ["queen", "quit"];

lengthOfNonQWords(test2); --> 0

Commented [MM20]: Need instructions here

65

Activity 22-12 Putting It All Together Lab - Functional Programming: Basic ExercisesNeed instructions for online

Even these supposedly basic exercises are a bit tricky if you have never seen functional programming.

1. Make a function called composedValue that takes two functions f1 and f2 and a value and returns f1(f2(value)), i.e.,the first function called on the result of the second function called on the value.

function square(x) { return(x*x); }

function double(x) { return(x*2); }

composedValue(square, double, 5); --> 100 // I.e., square(double(5))

2. Make a function called compose that takes two functions f1 and f2 and returns a new function that, when called ona value, will return f1(f2(value)). Assume that f1 and f2 each take exactly one argument.

var f1 = compose(square, double);

f1(5); --> 100 f1(10); --> 400

var f2 = compose(double, square);

f2(5); --> 50 f2(10); --> 200

3. Make a function called “find” that takes an array and a test function and returns the first element of the array that“passes” (returns non-false for) the test. Don’t use map, filter, or reduce.

function isEven(num) { return(num%2 == 0);

} isEven(3) --> false isEven(4) --> true

find([1, 3, 5, 4, 2], isEven); --> 4

4. Recent JavaScript versions added the “map” method of arrays, as we saw in the notes and used in the previous setof exercises. But, in earlier JavaScript versions, you had to write it yourself. Make a function called “map” that takesan array and a function and returns a new array that is the result of calling the function on each element of the inputarray. Don’t use map, filter, or reduce.

map([1, 2, 3, 4, 5], square); --> [1, 4, 9, 16, 25]

map([1, 4, 9, 16, 25], Math.sqrt); --> [1, 2, 3, 4, 5]

Hint: remember the push method of arrays.

66


Activity 23-1 The HTML File for the Time and Greeting Example (p. 601)Input the code found in Listing 23.1 in your textbook. Double check your code.

Activity 23-2 A Script to Display the Current Time and a Greeting (p. 601)Input the code found in Listing 23.2 in your textbook. Your output should look like this. Does your page work asexpected?

Activity 23-3 A Loop Using the for Keyword (p. 605)Input the code found in Listing 23.3 in your textbook. Your output should look like this. Does your page work asexpected?

67

Activity 23-4 HTML to Prompt for Names and Display Them (p. 611)Input the code found in Listing 23.4 in your textbook. Check your code carefully.

Activity 23-5 JavaScript to Prompt for Names and Display Them (p. 611)Input the code found in Listing 23.5 in your textbook. Your output should look like this. Does your page work asexpected?

68

Activity 23-6 Putting It All Together Lab - Basic Syntax 1For all of these exercises, use the “more powerful practice” approach from the first lecture, where you load an HTML filethat has a script tag pointing at a JavaScript file, test the function calls in Chrome, and reload the HTML page each timeyou change the function definitions.

1. Make a function that returns “even” or “odd” depending on the number passed to it.

parity(1); --> "odd"

parity(2); --> "even"

2. The notes showed a simple version of max that took exactly two arguments. Update this to take exactly threearguments. Note that the builtin version of Math.max takes any number of arguments, which is much better, but wedon’t know how to do variable arguments yet. And, of course, no using Math.max on this exercise.

max(1, 2, 3); --> 3

max(1, 3, 2); --> 3

max(3, 2, 1); --> 3

3. Copy the flipCoin function from the last set of exercises. Now, make a function that, given a number, flips a coin thatmany times and returns the number of heads.

numHeads(10); --> 4

numHeads(10); --> 6

numHeads(10); --> 6

4. Make a function that takes a number of flips and returns the fraction that were heads.

headsRatio(10); --> 0.7

headsRatio(10); --> 0.4

headsRatio(10000); --> 0.5023

headsRatio(10000000); --> 0.4999948

5. Make a function that takes a number and a short string, and returns the string concatenated that number of times.

padChars(5, "x"); --> "xxxxx"

padChars(7, "-"); --> "-------"

6. Write a function that returns the number of times you have to roll a die to get a 6.

(Minor hint: compare Math.random() to 5/6).

numRollsToGetSix(); --> 13

numRollsToGetSix(); --> 2

7. Update the HTML page so that each time you reload it, you randomly see either a “Have a GOOD day!” or “Have aBAD day!” message. If you know some CSS already, make the font big.

Commented [MM21]: Need instructions here

69


Activity 24-1 The JavaScript File for the Mouse Click Example (p. 625)Input the code found in Listing 24.1 in your textbook. Check your code carefully.

Activity 24-2 The HTML File for the Mouse Click Example (p. 626)Input the code found in Listing 24.2 in your textbook. Your output should look like this. Does your page work asexpected?

Activity 24-3 Displaying Typed Characters (p. 629)Input the code found in Listing 24.3 in your textbook. Your output should look like this. Does your page work asexpected?

70

Activity 24-4 Using click to Show or Hide Content (p. 631)Input the code found in Listing 24.4 in your textbook. Your output should look like this. Does the page work as expected?

Activity 24-5 An HTML Document That Uses JavaScript to Enable You to Create and Close Windows (p. 641)Input the code found in Listing 19.2 in your textbook. Your output should look like this. Does the page work as expected?

Activity 24-6 Moving and Resizing a New Window (p. 644)Input the code found in Listing 24.6 in your textbook. Your output should look like this. Does the page work as expected?


71

Activity 24-7 Using Timeouts to Update a Page Every Two Seconds (p. 646)Input the code found in Listing 24.7 in your textbook. Your output should look like this. Does the page work as expected?

Activity 24-8 An HTML Document That Uses JavaScript to Display Alerts, Confirmations, and Prompts (p. 648)Input the code found in Listing 24.8 in your textbook. Your output should look like this. Does the page work as expected?

72


Activity 25-1 A Script to Display Information About the Browser (p. 667)Input the code found in Listing 25.1 in your textbook. Your output should look like this. Does the page work as expected?

For Firefox

For Internet Explorer 6

Activity 25-2 The HTML File for the Graphic Check Box Example (p. 674)Input the code found in Listing 25.2 in your textbook. Check your code carefully.

73

Activity 25-3 The JavaScript File for the Graphic Check Box Example (p. 675)Input the code found in Listing 25.3 in your textbook. Your output should look like this. Does the page work as expected?

74


Activity 26-1 The Complete Library Effects Example (p. 688)Input the code found in Listing 26.1 in your textbook. Your output should look like this. Does the page work as expected?

75


Activity 28-1 Try It Yourself – Commenting Your Code (p. 741)It will be well worth your time now to go through all the web pages and style sheets you’ve created so far and add anycomments that you or others might find helpful when revising them in the future. Here’s what to do:

1. Insert a comment explaining any fancy formatting or layout technique before the tags that make it happen.2. Use a comment just before an <img> tag to briefly describe any important graphic whose function isn’t obvious

from the alt message.3. Consider using a comment (or several comments) to summarize how the cells of a <table> are supposed to align.4. If you used hexadecimal color codes (such as <div style=”color: #8040B0;”>), insert a comment

indicating what the color actually is (bluish-purple).5. Indent your comments to help them stand out and make both the comments and the HTM L or CSS easier to

read. Don’t forget to use indentation in the HTML, CSS, or JavaScript itself to make it more readable, too, asdiscussed in the next section.

76

Capstone Project

Front-End Web Developmentmembers.tcosites.com/downloads/class/FEWD_Lab_Document.pdf · 2020. 10....

Documents

Transcript of Front-End Web Developmentmembers.tcosites.com/downloads/class/FEWD_Lab_Document.pdf · 2020. 10....