Basics of Web Design HTML5 & CSS3, 3rd Edition

学习网页制作的入门籍教材。全英文最新版教材，排版合理，内容详实，简单易懂，小白新手看完就能学会的书PrefaceBasics of Web Design: HTML5 CSS3 is intended for use in a beginning web design orweb development course. Topics are introduced in two-page sections that focus on keypoints and often include a hands-on practice exercise. The text covers the basics that webdesigners need to develop their skills:Introductory Internet and World Wide Web conceptsCreating web pages with(X)HTML and HTML5Configuring text, color, and page layout with Cascading Style SheetsConfiguring images and multimedia on web pagesExploring new CSS3 propertiesWeb design best practicesAccessibility, usability, and search engine optimization considerationsu Obtaining a domain name and a web hostPublishing to the webStudent files are available for down load from the companion website for this book athttp://www.pearsonhighered.com/felke-morris.ThesefilesincludesolutionstotheHands-onPractice exercises, starter files for the hands On Practice exercises and the starter files forthe Case Study. See the access card in the front of this book for further instructionsFeatures of the TextDesign for Today and Tomorrow. The textbook has a unique approach that preparesstudents to design web pages that work today in addition to being ready to take advantageof new hTML5 coding techniques of the future XHTML syntax is introduced but the focusis HTML5 syntax. New HTML5 elements are presented with an emphasis on coding webpages that work in both current and future browsers. Hands-On Practice solution files areavailable in both HTML5 syntax and (where applicable) XHTML syntaxWell-Rounded Selection of Topics. This text includes both "hard"skills such asHTML5 and Cascading Style Sheets( Chapters 1-3 and 5-11)and"soft"skills such as webdesign(Chapter 4)and publishing to the Web( Chapter 12). This well-rounded foundationwill help students as they pursue careers as web professionals. Students and instructors willfind classes more interesting because they can discuss, integrate, and apply both hard andsoft skills as students create web pages and websites. The topics in each chapter are intro-duced on concise two-page sections that are intended to provide quick overviews andtimely practice with the topicTwo-Page Topic Sections. Each topic in this text is introduced in a concise, two-pagesection, Many sections also include immediate hands-on practice of the new skill or concept. This approach is intended to appeal to your busy students-especially the millennialmulti-taskers-who need to drill down to the important concepts right away.WOW! eBookwww.wowebook.orgHands-On Practice. Web design is a skill, and skills are best learned by hands-on practice. This text emphasizes hands-on practice through practice exercises within the chapters,end-of-chapter exercises, and the development of a website through ongoing real-worldcase studies. The variety of exercises provides instructors with a choice of assignments for aparticular course or semester.Website Case Study. There is a case study that continues throughout most of the text(beginning at Chapter 2). The case study serves to reinforce skills discussed in each chapter.Sample solutions to the case study exercises are available on the Instructor Resource Centerhttp://www.pearsonhighered.com/ircFocus on Web Design. Every chapter offers an additional activity that explores web design topics related to the chapter these activities can be used to reinforce, extend and enhance the course topicsQFAFAQs. In her web design courses, the author is frequently asked similar questions bystudents. They are included in the book and are marked with the identifying FAQ iconFocusFocus on Accessibility. Developing accessible websites is more important than ever, andthis text is infused with accessibility techniques throughout. The special icon shown hereAccessibilimakes accessibility information easy to findFocusFocus on Ethics. Ethics issues as related to web development are highlighted throughoutEthicsthe text with the special ethics icon shown hereQuickQuick Tips, Quick tips, which provide useful background information, or help withproductivity, are indicated with this Quick Tip iconExploreExplore Further. The special icon identifies enrichment topics along with web resourcesFurtheruseful for delving deeper into a concept introduced in bookReference Materials. The appendixes offer reference material, including an XHTMLreference, an HTML5 reference, a Cascading Style Sheets reference, and a WCAG 2.0Quick ReferenceSupplemental materialsStudent Resources. Student files for web page hands-on practice exercisesand the case study are available to all readers of this book at its companion websitehttp://www.pearsonhighered.com/felke-morris.acomplimentaryaccesscodeforthecompanion website is available with a new copy of this book. Subscriptions may also bepurchased onlineInstructor Resources. The following supplements are available to qualified instructorsonly.VisitthePearsonInstructorResourcecEnter(http://www.pearsonhighered.com/irc)orsendane-mailtocomputing@pearson.comforinformationonhowtoaccessthemSolutions to the end-of-chapter exercisesSolutions for the case study assignmentsTest questionsa PowerPoint presentationsSample syllabiPREFACEWOW! eBookwww.wowebook.orgAuthors Website. In addition to the publishers companion website for this book, theauthormaintainsawebsiteathttp://www.webdevbasics.netThiswebsitecontainsadditional resources, including a color chart, learning/review games, Adobe Flash TutorialAdobe Fireworks Tutorial, Adobe Photoshop Tutorial, and a page for each chapter withexamples, links, and updates. This website is not supported by the publisherXHTML and HTML5There is a lot of buzz about html5 which will eventually be the next official standardversion of HTML. This is an exciting time to be a web designer. However, even with all thepromise of HTML5, web designers still have to create web pages for their clients that workthe browsers being used today.This textbook takes a unique approach that bridges the gap between what works today andwhat will be done in the future. Are you currently using XHTML syntax instead of HTML5?You'll notice that in many cases, the web page code for XHTML and HTML5 is the sameexcept for the document Type Definition, html, meta tags, and stand-alone elements, Toprovide a well-rounded foundation in web page markup, both XHTML syntax and HTML5syntax are introduced. However, the focus of this book is HTML5. New HTML5 elementsare discussed, with emphasis on coding web pages that work in both current and futureapplicable)XHTML Syntax. f you are coding web pages using XHTML syntax instead orbrowsers. Hands-On Practice solution files are available in both HTML5 syntax and(whenHTML5 syntax, check the XHTML solutions located in the student file XHTMLfiles folderExcept where examples are HTML5 specific, students can complete the hands-on practiceand case study activities using either xhTMl or HTMl5AcknowledgmentsVery special thanks go to the people at Addison-Wesley, including Michael Hirsch,Matt Goldstein, Chelsea Bell, Heather MCNally, and Jeffrey Holcomb. Thank you also toPhilip Koplin and Dennis Free of Aptara CorMost of all, I would like to thank my family, especially my wonderful husband, for patience,ove, support, and encouragement. Of course, this wouldn't be complete without mentioningthe dog, Sparky-who likes to make a cameo appearance in each book-his playful anticsand quirky personality helped to brighten long hours spent at the computer.about the authorDr. Terry Ann Felke -Morris is an associate professor at Harper College in Palatine, IllinoisShe holds a Doctor of Education degree, a master of Science degree in information systemsand numerous certifications, including Adobe Certified Dreamweaver 8 Developer, WOWCertified Associate Webmaster, Microsoft Certified Professional, Master CIW Designer, andClW Certified InstructorWOW! eBookPreface viiwww.wowebook.orgDr. Felke-Morris received the Blackboard Greenhouse Exemplary Online Course Award in2006 for use of Internet technology in the academic environment. She was the recipient oftwo international awards in 2008: the Instructional Technology Councils Outstandinge-Learning Faculty Award for Excellence and the MERLOT Award for Exemplary OnlineLearning Resources-MERLOT Business Classics.With more than 20 years of information technology experience in business and industryDr Felke- Morris published her first website in 1996 and has been working with the webever since. A long-time promoter of web standards, she has been a member of the WebStandards Project Education Task Force. Dr. Felke-Morris is the author of the populartextbook Web Development and Design Foundations with XHTML, currently in its fifthedition. She was instrumental in developing the Web Development degree and certificateprograms at harper college and currently is the senior faculty member in that area. FormoreinformationaboutDr.teRryAnnFelke-morris,visithttp://terrymorris.netPREFACEWOW! eBookwww.wowebook.orgCHAPTER 1Internet andI Web BasicsThe Internet and the Web are parts of our daily lives. How didthey begin? What networking protocols and programming languageswork behind the scenes to display a web page? This chapter providesan introduction to some of these topics and is a foundation for theinformation that web developers need to know. This chapter alsogets you started with your very first web page. You'll be introducedto Hypertext Markup Language(HTML), the language used to createweb pages, eXtensible Hypertext Markup Language(XHTML), the mostrecent standardized version of HTML, and HTML5-the newest draftversion of HTmlYou'll learn how toDescribe the evolution of the Internet and Describe the purpose of web browsers andthe Webweb serversn Explain the need for web standardsa Identify Internet protocolsDescribe universal designa Define URIs and domain namesIdentify benefits of accessible web design Describe HTML, XHTML and HTML5Identify reliable resources of information Create your first web pageon the WebI Use the body head, title and meta elementsIdentify ethical use of the Weba Name, save, and test a web pageWoW! eBookwww.wowebook.orgThe Internet andthe ebThe InternetThe Internet, the interconnected network of computer networks, seems to be everywhere today. Ithas become part of our lives. You can't watch television or listen to the radio without being urgedto visit a website. Even newspapers and magazines have their place on the InternetThe Birth of the InternetThe Internet began as a network to connect computers at research facilities and universitiesMessages in this network would travel to their destination by multiple routes or paths. This wouldallow the network to function even if parts of it were broken or destroyed the message would bererouted through a functioning portion of the network while traveling to its destination. This networkwas developed by the Advanced Research Projects Agency (ARPA)-and the ARPAnet was bornFour computers (located at UCLA, Stanford Research Institute, University of California Santa Barbara,and the University of Utah) were connected by the end of 1969Growth of the internetAs time went on other networks, such as the national Science Foundation s NSfnet were createdand connected with the ARPAnet. Use of this interconnected network, or Internet, was originally lim-ited to government, research, and educational purposes. The ban on commercial use of the Internetwas lifted in 1991. The growth of the Internet continues-Internet World Stats reported over 1.9 billionusers,about 28% of the worlds population, on the Internet in 2010. Figure 1. 1 shows the growth ofInternet use by geographic area between 2000 and 2010Millions of Internet Users by Geographic Area题20102000Oceania/Australia 721.2South America204.6North America266.2108Middle East i3:Europe475105Asia114.3Africa.5110.9FIGURE 1.1 Growth of Internet useStatisticsfromhttp://www.internetworldstats.comCopyrightO2001-2010,MiniwattsMarketingGroup.Allrightsreservedworldwide2 CHAPTER1■WOW! eBookwww.wowebook.orgWhen the restriction on commercial use of the Internet was lifted, it set the stage for future electroniccommerce: businesses were now welcome on the Internet. However while businesses were nolonger banned, the Internet was still text based and not easy to use. The next developments solvedthis issueThe birth of the webWhile working at CERN, a research facility in Switzerland, Tim Berners-Lee envisioned a means ofcommunication for scientists by which they could easily " hyperlink"to another research paper orarticle and immediately view it. Berners-Lee created the world wide web to fulfill this need. In1991 Berners-Lee posted the code in a newsgroup and made it freely available this version of theWorldWideWebusedHypertextTransferProtocol(http)tocommunicatebetweentheclientcomputer and the web server, used Hypertext Markup Language(HTML)to format the documents,and was text basedThe First Graphical BrowserIn 1993, Mosaic, the first graphical web browser (shown in Figure 1. 2), became availableoHist Annotate同回色Dcc种cAM=HmDocumen URLMte oww neu uia edw/SDG Sa wanDtA /NCSAMosacHoee htalMOCAICwindow syste. Microsoft window. Mcintoshwolccee to csA Mosaic an Intafomatian browser and World Wide web client. NCSAHosaloped at themputing Applications at theUniversity of Illinois in --Te board of Trustees ot theUIFIGURE 1.2 Mosaic: The first graphical browserMarc Andreessen and graduate students working at the National Center for SupercomputingApplications(NCSA) at the University of Illinois Urbana-Champaign developed Mosaic. Some indi-viduals in this group later created another well-known web browser-Netscape Navigator-which isan ancestor of today' s mozilla Firefox browserConvergence of TechnologiesBy the early 1990s, personal computers with easy-to-use graphical operating systems(such asMicrosoft's Windows, IBMs OS/2, and Apples Macintosh OS)were increasingly available andaffordable. Online service providers such as CompuServe, AOL, and Prodigy offered low-costconnections to the Internet. the convergence of available computer hardware, easy-to-use operating systems low-cost Internet connectivity the Http protocol and Html language and a graphiccal browser made information on the internet much easier to access. the world wide web-thegraphical user interface to information stored on computers running web servers connected to theInternet- had arrived!WOW! eBookInternet and Web basics 3www.wowebook.orgWeb Standardsand AccessibilityYou are probably aware that no single person or group runs the World Wide Web. However, theWorldWideWebConsortium(http://www.w3.org),referredtoastheW3c,takesaproactiverolein developing recommendations and prototype technologies related to the Web. Topics that theW3C addresses include web architecture, standards for web design, and accessibility. In an effort tostandardize web technologies, the w3C (logo shown in Figure 1.3 )produces specifications calledrecommendationso W3C RecommendationsThe W3C Recommendations are created in working groups with input from many major corporationsinvolved in building web technologies. These recommendations are not rules; they are guidelinesFIGURE 1.3 The Major software companies that build web browsers, such as Microsoft, do not always follow theW3C logW3C Recommendations. This makes life difficult for web developers because not all browsers willdisplay a web page in exactly the same way.The good news is that there is a convergence toward the w3C Recommendations in new versionsof major browsers. There are even organized groups, such as The Web Standards Project,http://webstandards.orgwhosemissionistopromoteW3crEcommendations(oftencalledWebstandards)not only to the creators of browsers but also to web developers and designers. You'll followW3C Recommendations as you code web pages in this book. Following the W3C Recommendationsis the first step towards creating a website that is accessibleWeb standards and AccessibilityTheWebAccessibilityInitiative(http://www.w3.org/wal)reFerredtoastheWal,isamajorareaofwork by the W3C. Since the Web has become an integral part of daily life, there is a need for allindividuals to be able to access itThe Web can present barriers to individuals with visual, auditory, physical, and neurological disabilities. An accessible website provides accommodations that help individuals overcome thesebarriers. The WAI has developed recommendations for web content developers, web authoringtool developers, web browser developers, and developers of other user agents to facilitate use ofthe Web by those with special needs. See the WAIls Web Content Accessibility Guidelines(WCAG)athttp://www.w3.org/waicag20/glance/cag2-at-a-Glance.pdfforaquickoverview4 E CHAPTER1■WOW! eBookwww.wowebook.org