Đang tải... (xem toàn văn)
Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200 Fundamentals of web development global edition by connolly 200
Connolly • Hoar This is a special edition of an established title widely used by colleges and universities throughout the world Pearson published this exclusive edition for the benefit of students outside the United States and Canada If you purchased this book within the United States or Canada you should be aware that it has been imported without the approval of the Publisher or Author Fundamentals of Web Development For these Global Editions, the editorial team at Pearson has collaborated with educators across the world to address a wide range of subjects and requirements, equipping students with the best possible learning tools This Global Edition preserves the cutting-edge approach and pedagogy of the original, but also features alterations, customization, and adaptation from the North American version Global edition Global edition Global edition Fundamentals of Web Development Randy Connolly • Ricardo Hoar Pearson Global Edition CONNOLLY_1292057092_mech.indd 09/09/14 9:11 PM www.downloadslide.com Online Access Thank you for purchasing a new copy of Fundamentals of Web Development, 1/e, Global Edition Your textbook includes eighteen months of prepaid access to the book’s Companion Website This prepaid subscription provides you with full access to the following student support areas: • Online Labs • Case Studies • Source Code Use a coin to scratch off the coating and reveal your student access code Do not use a knife or other sharp object as it may damage the code To access the Fundamentals of Web Development, 1/e, Global Edition, Companion Website for the first time, you will need to register online using a computer with an Internet connection and a web browser The process takes just a couple of minutes and only needs to be completed once Go to http://www.pearsonglobaleditions.com/connolly Click on Companion Website Click on the Register button On the registration page, enter your student access code* found beneath the scratch-off panel Do not type the dashes You can use lower- or uppercase Follow the on-screen instructions If you need help at any time during the online registration process, simply click the Need Help? icon Once your personal Login Name and Password are confirmed, you can begin using the Fundamentals of Web Development Companion Website! To log in after you have registered: You only need to register for this Companion Website once After that, you can log in any time at http://www.pearsonglobaleditions.com/connolly by providing your Login Name and Password when prompted *Important: The access code can only be used once This subscription is valid for eighteen months upon activation and is not transferable If this access code has already been revealed, it may no longer be valid CONNOLLY_1292057092_ifc.indd 18/09/14 7:30 PM www.downloadslide.com Fundamentals of Web Development A01_CONN7150_01_SE_FM.indd 16/09/14 12:00 PM www.downloadslide.com A01_CONN7150_01_SE_FM.indd 16/09/14 12:00 PM www.downloadslide.com Fundamentals of Web Development Randy Connolly Mount Royal University, Calgary Ricardo Hoar Mount Royal University, Calgary Global Edition contributions by Soumen Mukherjee RCC Institute of Information Technology, Kolkata Arup Kumar Bhattacharjee RCC Institute of Information Technology, Kolkata Boston Columbus Indianapolis New York San Francisco Upper Saddle River Amsterdam Cape Town Dubai London Madrid Milan Munich Paris Montreal Toronto Delhi Mexico City São Paulo Sydney Hong Kong Seoul Singapore Taipei Tokyo A01_CONN7150_01_SE_FM.indd 24/09/14 4:24 PM www.downloadslide.com Editorial Director:╇ Marcia Horton Acquisitions Editor:╇ Matt Goldstein Editorial Assistant:╇ Kelsey Loanes Program Manager:╇ Kayla Smith-Tarbox Marketing Coordinator:╇ Jon Bryant Managing Editor:╇ Scott Disanno Head, Learning Asset Acquisition, Global Edition:╇ Laura Dent Acquisitions Editor, Global Edition:╇ Karthik Subramaniun Project Editor, Global Edition:╇ Anuprova Dey Chowdhuri Operations Supervisor:╇ Vincent Scelta Manufacturing Buyer:╇ Linda Sager Text Designer:╇ Jerilyn Bockorick, Cenveođ Publisher Services Cover Designer:õ Shree Mohanambal Inbakumar, Lumina Datamatics Manager, Rights and Permissions:╇ Timothy Nicholls Text Permission Coordinator:õ Jenell Forschler Cover Art:õ â Robert Kneschke/Shutterstock Full-Service Project Management:╇ Hardik Popli, Cenveo Publisher Services Interior Printer/Bindery:╇ Neografia Cover Printer:╇ Neografia Pearson Education Limited Edinburgh Gate Harlow Essex CM20 2JE England and Associated Companies throughout the world Visit us on the World Wide Web at: www.pearsonglobaleditions.com © Pearson Education Limited 2015 The rights of Randy Connolly and Ricardo Hoar to be identified as the authors of this work have been asserted by them in accordance with the Copyright, Designs and Patents Act 1988 Authorized adaptation from the United States edition, entitled Fundamentals of Web Development,1st edition, ISBN 978-0-13-340715-0, by, Randy Connolly and Ricardo Hoar published by Pearson Education © 2015 All rights reserved No part of this publication may be reproduced, stored in a retrieval system, or transmittedin any form or by any means, electronic, mechanical, photocopying, recording or otherwise, withouteither the prior written permission of the publisher or a license permitting restricted copying in the United Kingdom issued by the Copyright Licensing Agency Ltd, Saffron House, 6–10 Kirby Street, London EC1N 8TS All trademarks used herein are the property of their respective owners The use of any trademark in this text does not vest in the author or publisher any trademark ownership rights in such trademarks, nor does the use of such trademarks imply any affiliation with or endorsement of this book by such owners Credits and acknowledgments borrowed from other sources and reproduced, with permission, in this textbook appear on appropriate page within text Microsoft and/or its respective suppliers make no representations about the suitability of the information contained in the documents and related graphics published as part of the services for any purpose All such documents and related graphics are provided “as is” without warranty of any kind Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information, including all warranties and conditions of merchantability, whether express, implied or statutory, fitness for a particular purpose, title and non-infringement In no event shall Microsoft and/or its respective suppliers be liable for any special, indirect or consequential damages or any damages whatsoever resulting from loss of use, data or profits, whether in an action of contract, negligence or other tortious action, arising out of or in connection with the use or performance of information available from the services The documents and related graphics contained herein could include technical inaccuracies or typographical errors Changes are periodically added to the information herein Microsoft and/or its respective suppliers may make improvements and/or changes in the product(s) and/or the program(s) described herein at any time Partial screen shots may be viewed in full within the software version specified Microsoft® and Windows® are registered trademarks of the Microsoft Corporation in the U.S.A and other countries This book is not sponsored or endorsed by or affiliated with the Microsoft Corporation ISBN 10: 1292057092 ISBN 13: 978-1-29-205709-5 10 14 13 12 11 10 British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library Typeset in 10 SabonLTStd-Roman by Cenveo Publisher Services Printed and bound by Neografia in Slovakia The publisher’s policy is to use paper manufactured from sustainable forests A01_CONN7150_01_SE_FM.indd 25/09/14 3:50 PM www.downloadslide.com To Janet, for your intelligence, support, beauty, and love Randy Connolly Thanks be to you Joanne for the love and joy you bring to our family Ricardo Hoar A01_CONN7150_01_SE_FM.indd 16/09/14 12:00 PM www.downloadslide.com A01_CONN7150_01_SE_FM.indd 16/09/14 12:00 PM www.downloadslide.com Brief Table of Contents Chapter How the Web Works Chapter Introduction to HTML Chapter Introduction to CSS Chapter HTML Tables and Forms Chapter Advanced CSS: Layout Chapter JavaScript: Client-Side Scripting Chapter Web Media Chapter Introduction to Server-Side Development with PHP 366 Chapter PHP Arrays and Superglobals 45 96 139 192 228 274 327 Chapter 10 PHP Classes and Objects Chapter 11 Working with Databases 408 446 480 A01_CONN7150_01_SE_FM.indd 16/09/14 12:00 PM www.downloadslide.com BRIEF TABLE OF CONTENTS Chapter 12 Error Handling and Validation Chapter 13 Managing State 547 585 Chapter 14 Web Application Design 617 Chapter 15 Advanced JavaScript & jQuery 657 Chapter 16 Security 709 Chapter 17 XML Processing and Web Services Chapter 18 Content Management Systems Chapter 19 Web Server Administration Chapter 20 Search Engines 825 882 925 Chapter 21 Social Network Integration A01_CONN7150_01_SE_FM.indd 762 958 16/09/14 12:00 PM www.downloadslide.com 184 Chapter 3 Introduction to CSS Property Description letter-spacing Adjusts the space between letters Can be the value normal or a length unit line-height Specifies the space between baselines (equivalent to leading in a desktop publishing program) The default value is normal, but can be set to any length unit Can also be set via the shorthand font property list-style-image Specifies the URL of an image to use as the marker for unordered lists list-style-type Selects the marker type to use for ordered and unordered lists Often set to none to remove markers when the list is a navigational menu or a input form text-align Aligns the text horizontally in a container element in a similar way as a word processor Possible values are left, right, center, and justify text-decoration Specifies whether the text will have lines below, through, or over it Possible values are: none, underline, overline, line-through, and blink Hyperlinks by default have this property set to underline text-direction Specifies the direction of the text, left-to-right (ltr) or right-to-left (rtl) text-indent Indents the first line of a paragraph by a specific amount text-shadow A new CSS3 property that can be used to add a drop shadow to a text Not yet supported in IE9 text-transform Changes the capitalization of text Possible values are none, capitalize, lowercase, and uppercase vertical-align Aligns the text vertically in a container element Most common values are: top, bottom, and middle word-spacing Adjusts the space between words Can be the value normal or a length unit Table 3.10 Text Properties 3.8 Chapter Summary Cascading Style Sheets are a vital component of any modern website This chapter provided a detailed overview of most of the major features of CSS While we still M03_CONN7150_01_SE_C03.indd 184 09/09/14 4:54 PM www.downloadslide.com 3.8 Chapter Summary 185 have yet to learn how to use CSS to create layout (which is relatively complicated and is the focus of Chapter 5), this chapter has covered most of the CSS that most web programmers will probably need to learn 3.8.1 Key Terms absolute units attribute selector author-created style sheets browser style sheets cascade class selector collapsing margins combinators contextual selector CSS CSS3 modules declaration declaration block descendant selector element box element selectors em units embedded style sheets external style sheets generic font grouped selector id selector inheritance inline styles internal styles location percentages presentation property:value pair pseudo-class selector pseudo-element selector relative units rem responsive design selector specificity style rules TRouBLe universal element selector user style sheets vendor prefixes web font stack x-height 3.8.2 Review Questions What is a CSS selector? Compare the approach the W3C has used with CSS3 in comparison to CSS2.1 What are inline styles? What is the difference between a relative and an absolute measure unit in CSS? Why are relative units preferred over absolute units in CSS? What is an element selector and a grouped element selector? Provide an example of each What are class selectors? What are id selectors? Briefly discuss why you would use one over the other What are contextual selectors? Identify the four different contextual selectors Explain the concept of the Document Object Model What are they commonly used for? What does the location of styles refer to? 10 What are the three cascade principles used by browsers when style rules conflict? Briefly describe each 11 Illustrate the CSS box model Be sure to label each of the components of the box 12 What is specificity? Why are they necessary? M03_CONN7150_01_SE_C03.indd 185 09/09/14 4:54 PM www.downloadslide.com 186 Chapter 3 Introduction to CSS 3.8.3 Hands-On Practice Project 1: Share Your Travel Photos, Time for Some Style Difficulty Level: Beginner Overview This project updates your existing project from Chapter to add some visual stylistic improvements with CSS Hands-On Exercises Project 3.1 Instructions Use your chapter02-project01.html file from the last chapter as a starting point but save it as chapter03-project01.html Create an external style sheet called reset.css that removes all the browser formatting from the main HTML elements and reference inside chapter03-project01.html as follows: html, body, header, footer, hgroup, nav, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; } Create another external style sheet named chapter03-project01.css and include it in your HTML file as well Add styles to chapter03-project01.css so that it looks similar to that shown in Figure 3.31 Do not modify the markup within the element Be sure to group your style rules together in appropriate commented sections and to make your sizes scalable (i.e., don’t use pixels for font sizes, padding, or margins) Here’s a hint for the header and footer header, footer { color: white; background-color: #3D6271; margin: 0em 4em 0.5em 4em; } Testing Although an exact match is not required, see how closely you can make your page look like the one in Figure 3.31 Be sure to test in multiple browsers and at different browser widths M03_CONN7150_01_SE_C03.indd 186 09/09/14 4:54 PM www.downloadslide.com 3.8 Chapter Summary 187 Figure 3.31 Completed Project M03_CONN7150_01_SE_C03.indd 187 09/09/14 4:54 PM www.downloadslide.com 188 Chapter 3 Introduction to CSS project 2: Book Rep Customer Relations Management Difficulty Level: Intermediate Overview Hands-On Exercises Project 3.2 This project updates the CRM HTML page you started in Project 2.2 to add some visual style and make it look professional Instructions Use your lab02-project02.html file from the last chapter as a starting point (and rename it) or take our chapter03-project01.html starting point file Import your existing reset.css from Project to reset all default styles Create an external style sheet named chapter03-project02.css and import as well Add styles to chapter03-project02.css so that it looks similar to that shown in Figure 3.32 Do not modify the markup within the element This means defining styles for the header, footer, section, and other tags Hint: Notice the backgrounds for each of the section headers Use attribute selectors for the mail and telephone link icons as shown below: a[href^="mailto"] { background: url(images/email.png) no-repeat 3px; padding-left: 1em; } a[href^="tel"] { background: url(images/call.png) no-repeat 3px; padding-left: 1em; } Testing Visually compare your output to that shown in Figure 3.32 project 3: Art Store Difficulty Level: Advanced Overview This project builds on the art store example from the previous chapter (Project 2.3), but purposefully leaves you having to dig a little deeper into CSS Hands-On Exercises Project 3.3 Instructions Create a new file named chapter03-project03.html and remove all default styles via a reset.css stylesheet, as done for the previous two projects Modify chapter03-project03.html and an associated style sheet so that your output looks similar to that shown in Figure 3.31 Do not modify the markup within the element M03_CONN7150_01_SE_C03.indd 188 09/09/14 4:54 PM www.downloadslide.com 3.8 Chapter Summary 189 Figure 3.32 Completed Project M03_CONN7150_01_SE_C03.indd 189 09/09/14 4:54 PM www.downloadslide.com 190 Chapter 3 Introduction to CSS You will have to use a CSS3 feature that will require some research on your own The background-size property can be used to force a background image to resize to the browser window Notice that two of the blocks in Figure 3.33 are partially transparent Remember that CSS3 allows you to specify the alpha transparency of any color Finally, the header uses the font Six Caps, which will have to be supplemented with other options in the font stack in the event that font is not present on the client’s computer Testing First, try resizing your browser to ensure the image resizes dynamically to fill the space, and the floating objects position themselves correctly Try out different browsers or platforms to see if it really works on all types of devices, including your mobile phone Hint: This is tricky if you have not yet set up a web server You may have to return to finish this particular testing step until after you have access to a web server as described in Chapter Figure 3.33 Completed Project M03_CONN7150_01_SE_C03.indd 190 09/09/14 4:54 PM www.downloadslide.com 3.8 Chapter Summary 191 3.8.4 References J Teague, CSS3: Visual Quickstart Guide, Peachpit, 2012 D Cederholm and E Marcotte, Handcrafted CSS, New Riders, 2009 E A Meyer, CSS Web Site Design, Peachpit, 2003 W3C, Cascading Style Sheets Level Revision (CSS 2.1) Specification [Online] http://www.w3.org/TR/CSS2/ T Olsson and P O’Brien, CSS Reference [Online] http://reference.sitepoint com/css V Friedman, “CSS Specificity: Things You Should Know.” [Online] http:// coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-shouldknow/ M03_CONN7150_01_SE_C03.indd 191 09/09/14 4:54 PM www.downloadslide.com HTML Tables and Forms C H A P TE R O B JE c TIV ES In this chapter you will learn ■ What HTML tables are and how to create them ■ How to use CSS to style tables ■ What forms are and how they work ■ What the different form controls are and how to use them ■ How to improve the accessibility of your websites ■ What microformats are and how we use them T his chapter covers the key remaining HTML topics The first of these topics is HTML tables; the second topic is HTML forms Tables and forms often have a variety of accessibility issues, so this chapter also covers accessibility in more detail Finally, the chapter covers microformats and microdata, which are a way to add semantic information to web pages 192 M04_CONN7150_01_SE_C04.indd 192 09/09/14 4:55 PM www.downloadslide.com 4.1 Introducing Tables 193 4.1 Introducing Tables A table in HTML is created using the element and can be used to represent information that exists in a two-dimensional grid Tables can be used to display calendars, financial data, pricing tables, and many other types of data Just like a real-world table, an HTML table can contain any type of data: not just numbers, but text, images, forms, even other tables, as shown in Figure 4.1 4.1.1 Basic Table Structure To begin we will examine the HTML needed to implement the following table The Death of Marat Jacques-Louis David 1793 162 cm 128 cm Burial at Ornans Gustave Courbet 1849 314 cm 663 cm Hands-On Exercises Lab EXERCISE As can be seen in Figure 4.2, an HTML contains any number of rows (); each row contains any number of table data cells () The indenting shown in Figure 4.2 is purely a convention to make the markup more readable by humans As can be seen in Figure 4.2, some browsers not by default display borders for the table; however, we can so via CSS Create a Basic Table Complex Content in Tables Figure 4.1 Examples of tables M04_CONN7150_01_SE_C04.indd 193 09/09/14 4:55 PM www.downloadslide.com 194 Chapter 4 HTML Tables and Forms The Death of Marat Jacques-Louis David 1793 162cm Burial at Ornans Gustave Courbet 1849 314cm 128cm 663cm The Death of Marat Jacques-Louis David 1793 162cm 128cm Burial at Ornans Gustave Courbet 1849 314cm 663cm Figure 4.2 Basic table structure Many tables will contain some type of headings in the first row In HTML, you indicate header data by using the instead of the element, as shown in Figure 4.3 Browsers tend to make the content within a element bold, but you could style it anyway you would like via CSS The main reason you should use the element is not, however, due to presentation reasons Rather, you should also use the element for accessibility reasons (it helps those using screen readers, which we will cover in more detail later in this chapter) and for search engine optimization reasons 4.1.2 Spanning Rows and Columns Hands-On Exercises Lab EXERCISE Spanning Rows and Columns So far, you have learned two key things about tables The first is that all content must appear within the or container The second is that each row must have the same number of or containers There is a way to change this second behavior If you want a given cell to cover several columns or rows, then you can so by using the colspan or rowspan attributes (Figure 4.4) Spanning rows is a little less common and perhaps a little more complicated because the rowspan affects the cell content in multiple rows, as can be seen in Figure 4.5 M04_CONN7150_01_SE_C04.indd 194 09/09/14 4:55 PM www.downloadslide.com 4.1 Introducing Tables 195 Title Artist The Death of Marat Jacques-Louis David Burial at Ornans Year Gustave Courbet 1793 Height 162cm 1849 Width 128cm 314cm 663cm Title Artist Year Width Height The Death of Marat Jacques-Louis David 1793 162cm 128cm Burial at Ornans Gustave Courbet 1849 314cm 663cm Figure 4.3 Adding table headings 4.1.3 Additional Table Elements While the previous sections cover the basic elements and attributes for most simple tables, there are some additional table elements that can add additional meaning and accessibility to one’s tables Figure 4.6 illustrates these additional (and optional) table elements The element is used to provide a brief title or description of the table, which improves the accessibility of the table, and is strongly recommended You can use the caption-side CSS property to change the position of the caption below the table The , , and elements tend in practice to be used quite infrequently However, they make some sense for tables with a large number of rows With CSS, one could set the height and overflow properties of the M04_CONN7150_01_SE_C04.indd 195 Hands-On Exercises Lab EXERCISE Alternate Table Structure Elements 09/09/14 4:55 PM www.downloadslide.com 196 Chapter 4 HTML Tables and Forms Title Artist The Death of Marat Jacques-Louis David Burial at Ornans Gustave Courbet Year 1793 162cm 1849 Size (width x height) 128cm 314cm 663cm Title Notice that this row Artist now only has four Year cell elements Size (width x height) The Death of Marat Jacques-Louis David 1793 162cm 128cm Figure 4.4 Spanning columns element so that its content scrolls, while the header and footer of the table remain always on screen The and elements are also mainly used to aid in the eventual styling of the table Rather than styling each column, you can style all columns within a with just a single style Unfortunately, the only properties you can set via these two elements are borders, backgrounds, width, and visibility, and only if they are not overridden in a , , or element (which, because they are more specific, will override any style settings for or ) As a consequence, they tend to not be used very often 4.1.4 Using Tables for Layout Prior to the broad support for CSS in browsers, HTML tables were frequently used to create page layouts Since HTML block-level elements exist on their own line, tables were embraced by developers in the 1990s as a way to get block-level HTML elements to sit side by side on the same line Figure 4.7 illustrates a typical example of how tables were used for layout The first image shows the layout as the user would see it; the second has borders turned on so that you can see the embedded table within the first table It was not uncommon for a complex layout to have dozens of embedded tables M04_CONN7150_01_SE_C04.indd 196 09/09/14 4:55 PM www.downloadslide.com 4.1 Introducing Tables 197 Artist Year 1793 1799 1800 Title The Death of Marat Jacques-Louis David The Intervention of the Sabine Women Napoleon Crossing the Alps Notice that these two rows now only have two cell elements Artist Title Year Jacques-Louis David The Death of Marat 1793 The Intervention of the Sabine Women 1799 Napoleon Crossing the Alps 1800 Figure 4.5 Spanning rows Unfortunately, this practice of using tables for layout had some problems The first of these problems is that this approach tended to dramatically increase the size of the HTML document As you can see in Figure 4.7, the large number of extra tags required for elements can significantly bloat the HTML document These larger files take longer to download, but more importantly, were often more difficult to maintain because of the extra markup A second problem with using tables for markup is that the resulting markup is not semantic Tables are meant to indicate tabular data; using elements simply to get two block-elements side by side is an example of using markup simply for presentation reasons M04_CONN7150_01_SE_C04.indd 197 09/09/14 4:55 PM www.downloadslide.com 198 Chapter 4 HTML Tables and Forms A title for the table is good for accessibility 19th Century French Paintings These describe our columns, and can be used to aid in styling Table header could potentially also include other elements Title Artist Year Yes, the table footer comes before the body Total Number of Paintings 2 Potentially, with styling the browser can scroll this information, while keeping the header and footer fixed in place The Death of Marat Jacques-Louis David 1793 Burial at Ornans Gustave Courbet 1849 Figure 4.6 Additional table elements The other key problem is that using tables for layout results in a page that is not accessible, meaning that for users who rely on software to voice the content, table-based layouts can be extremely uncomfortable and confusing to understand It is much better to use CSS for layout The next chapter will examine how to use CSS for layout purposes Unfortunately, as we will discover, the CSS required to create complicated (and even relatively simple) layouts is not exactly easy and intuitive For this reason, many developers still continue to use tables for layout, though it is a practice that this book strongly discourages M04_CONN7150_01_SE_C04.indd 198 09/09/14 4:55 PM ... States edition, entitled Fundamentals of Web Development, 1st edition, ISBN 978-0-13-340715-0, by, Randy Connolly and Ricardo Hoar published by Pearson Education © 2015 All rights reserved No part of. .. www.downloadslide.com Fundamentals of Web Development Randy Connolly Mount Royal University, Calgary Ricardo Hoar Mount Royal University, Calgary Global Edition contributions by Soumen Mukherjee RCC Institute of. .. you for purchasing a new copy of Fundamentals of Web Development, 1/e, Global Edition Your textbook includes eighteen months of prepaid access to the book’s Companion Website This prepaid subscription