Computing Science 165-3 Study Guide ² Introduction to Multimedia and the Internet by Greg Baker Faculty of Applied Sciences Centre for Distance Education Continuing Studies ² c Simon Fraser University, Summer 2004 ° 2 Contents I Introduction 11 Course Introduction 13 Learning Resources . 13 Requirements . 17 Evaluation . 18 Schedule . 21 Getting through CMPT 165 . 21 About the Author . 23 II The Web and Web Pages 25 1 The World Wide Web 27 1.1 Basics of the Internet . 27 1.2 Protocols . 31 1.3 How Web Pages Travel . 32 1.4 MIME Types . 34 1.5 Fetching a Web Page . 36 Summary . 37 2 Markup and HTML 39 2.1 Describing Documents . 39 2.2 HTML Basics . 42 2.3 More HTML . 47 2.4 Links in HTML . 50 2.5 Images in HTML . 52 3 4 CONTENTS 2.6 More HTML . 53 2.7 Validating HTML . 55 Summary . 57 3 Text and Graphics 59 3.1 How Computers Store Data . 59 3.2 Text and Character Sets . 61 3.3 Graphics and Image Types . 64 3.4 Bitmap vs. Vector Images . 65 3.5 File Formats . 66 3.6 File Formats, Common . 71 Summary . 73 4 Cascading Style Sheets 75 4.1 CSS . 76 4.2 Classes and IDs . 78 4.3 CSS Properties . 82 4.4 Specifying Colours . 83 4.5 CSS example . 86 4.6 Logical versus Physical . 86 4.7 Why Logical HTML and CSS? . 90 Summary . 91 5 Design 93 5.1 General Design . 93 5.2 Design Principles and HTML/CSS . 98 5.3 Web Page Design . 100 5.4 Usability . 102 5.5 Web Site Design . 105 Summary . 106 CONTENTS 5 6 XML 109 6.1 What is XML? . 109 6.2 Some XML Languages . 111 6.3 Styling XML . 113 6.4 Validating XML . 115 6.5 XHTML and HTML . 116 Summary . 117 III Internet Programming 119 7 Programming Introduction 121 7.1 What is Programming? . 122 7.2 Starting with Python . 123 7.3 Example Program . 124 7.4 Expressions and Variables . 127 7.5 User Input . 129 7.6 Types . 130 7.7 Conditionals . 133 7.8 Python Libraries . 136 7.9 Debugging . 137 Summary . 141 8 Web Programming 143 8.1 Making Web Pages with Python . 144 8.2 HTML Forms . 147 8.3 CGI . 149 8.4 Debugging CGI Scripts . 150 Summary . 152 9 More Programming 153 9.1 Functions . 154 9.2 Local Variables . 156 9.3 Iteration . 158 9.4 Lists . 162 9.5 Handling Errors . 165 9.6 Solving Problems 1: Making Change . 167 9.7 Solving Problems 2: Displaying HTML Source . 171 6 CONTENTS 9.8 Coding Style . 176 Summary . 177 10 More Web Programming 179 10.1 Security Basics . 179 10.2 Cookies . 181 10.3 Performance . 182 Summary . 183 11 Internet Internals 185 11.1 HTTP . 185 11.2 HTTP Tricks . 188 11.3 DNS . 192 11.4 Security and Encryption . 193 11.5 URLs . 195 Summary . 197 IV Appendices 199 A Technical Instructions 201 A.1 Installing Software . 202 A.2 SFU Computing Account . 204 A.3 CMPT 165 Server Account . 204 A.4 Creating Web Pages . 205 A.5 Transferring Web Pages . 205 B Software 207 B.1 Mozilla . 208 B.2 TextPad . 208 B.3 The GIMP . 208 B.4 Python . 213 B.5 Secure File Transfer . 213 B.6 Validators . 214 List of Figures 1 CMPT 165 course schedule . 22 1.1 How information might get from the SFU web server to a home computer . 28 1.2 The conversation that a web client and web server might have when you view a web page . 30 1.3 The parts of a simple URL . 34 1.4 Some example MIME types . 35 2.1 An XHTML document . 44 2.2 The display of Figure 2.1 in a browser . 44 2.3 HTML terms to output \gar»con" . 48 2.4 A sample page from the XHTML reference . 49 2.5 A hyperlink on a web page . 51 2.6 URLs from http://www.sfu.ca/»somebody/pics/index.html . 52 2.7 Some non-valid XHTML . 56 2.8 Part of the validation results of Figure 2.7 . 57 3.1 Pre¯xes for storage units . 61 3.2 Scaling (a) a vector image and (b) a bitmapped image . 66 3.3 Colour dithering . 69 3.4 An image with a low-quality lossy compression . 70 3.5 Various types of transparency in images . 71 4.1 A cascading style sheet . 77 4.2 HTML source of a page that references a style sheet . 87 4.3 The style sheet, style.css, referenced by Figure 4.2 . 87 4.4 The display of Figure 4.2, with the style sheet . 88 7 8 LIST OF FIGURES 4.5 The display of Figure 4.2, without the style sheet . 88 4.6 Two possible appearances for contents of <del> or <strike>. 89 5.1 A design illustrating proximity . 95 5.2 A design illustrating alignment . 96 5.3 A design illustrating repetition . 97 5.4 A design illustrating contrast . 99 6.1 A recipe markup up in XML . 110 6.2 A sample SVG ¯le that represents a happy face . 112 6.3 The display of Figure 6.2 . 112 6.4 Part of the style for Figure 6.1 . 114 6.5 Part of the display of Figure 6.1 after the application of CSS from Figure 6.4 . 114 7.1 An example Python program . 125 7.2 Three sample executions of the program in Figure 7.1 . 126 7.3 A Python program that gets input from the user . 129 7.4 A program with type conversion . 132 7.5 A program with an if block . 134 7.6 Guessing game: testing random . 138 7.7 Guessing game: testing user input . ..