HTML cơ bản - p 2 pptx

ptg Target Audience 212 Money 213 e Future 214 Websites 215 cgi-bin 218 logs 219 public_html 220 Other Website Files 221 Organization and Navigation 224 Files and Directories 224 Page Layout 225 Navigation 228 Imagemaps 235 Toggles and Accordions 237 Tabbed Content Sections 240 Opening New Windows 246 Page Head Information 249 meta Elements 249 link Elements 251 Other Head Elements 254 Search Engine Optimization 256 Avoiding Common Mistakes 261 Designing the Presentation Before the Information Architecture 261 Using Outdated Tools and Construction Methods 262 Not Validating the HTML and CSS 263 Not Testing in Dierent Browsers 264 Not Putting in Enough Comments 265 Summary 265 From the Library of Wow! eBook ptg Appendix A: HTML5 Quick Reference 267 Root Element 268 Document Head Elements 268 Section Elements 269 Heading Elements 270 Block Elements 270 List Elements 271 Inline Elements 271 Embedded Elements 273 Table Elements 275 Form and Control Elements 276 Legacy Elements 277 Appendix B: CSS Properties 279 Explanation of Values 279 CSS Properties 280 Aural Properties 300 Index 305 From the Library of Wow! eBook ptg xii Acknowledgments I would like to acknowledge and express my gratitude to my acquisitions editor, Trina MacDonald, whose patient guidance and understanding made it possible for me to have fun working on the project despite the pressures of deadlines. I would also like to thank my development editor, Songlin Qiu, who caught my errors and turned around chapters with lightning speed, and Elliotte Rusty Harold, who checked my facts and, as mentioned in the pref- ace, started the whole process. Finally, I am deeply grateful to my wife, Heidi Cohen, who helped me nd my writing voice and contributed signicantly to my knowledge of online marketing and search engine optimization. From the Library of Wow! eBook ptg xiii A  A Larry Aronson grew up in Evanston, Illinois, graduated with honors from Evanston Township High School, and attended the University of Illinois in Champaign-Urbana. Before graduating with a BA in computer science and a BS in psychology, he worked two summers as an assistant systems engineer with IBM’s Chicago manufacturing branch oce. Aer graduation, Aronson visited New York City, fell in love, and decided to live there. He worked at a number of jobs in New York’s radio, theater, and recording industries before returning to computers working for the user services department of Columbia University’s Center for Computing Activi- ties. Four years later, with faculty status and postgraduate work in electrical engineering and computer science, but little money, he le academia to work for Boeing Computer Services, starting as a technical sales representative and working his way up to tech manager of BCS’s New York oce. Aronson le Boeing to start his own business as an independent con- sultant aer seeing his rst personal computer. His rst client was the CBS News election unit, where he wrote the House Race Analysis Model and other components of their election system. His other major client was the Product Safety Information Systems division of Mobil Oil Company. Aronson was the principal programmer responsible for migrating Mobil’s safety data publishing systems to a relational database management system and to graphical, full- screen, data-entry and display technology. In late 1993, Aronson downloaded Mosaic from his alma mater and discov- ered the World Wide Web. He became active in the newsgroups and discus- sion lists devoted to Web authoring and publishing, and in mid-1994, wrote the rst book on Web publishing, HTML Manual of Style, for Zi-Davis Press. e rst edition went through ve printings and seven foreign languages, and the second edition, HTML3 Manual of Style, was equally successful. By 1995, he was teaching HTML around the country and online, conducting the inau- gural classes for Zi-Davis University on CompuServe. Aronson lives in a Manhattan lo in the heart of “Silicon Alley.” He devotes his time to building Web applications for individuals and small businesses, helping people work and live on the World Wide Web. He was a founder of the World Wide Web Artists’ Consortium, a board member of the New York So- ware Industries Association, and a founding member of the Social MediaClub. From the Library of Wow! eBook ptg xiv Preface What This Book Is About and Why You’ll Find It Useful is book is about using HTML to put your stu on the Web. HTML (Hyper- Text Markup Language) is the language that tells a web browser what to do with the text, images, and other media—the stu—you want others to see. ere are good ways to use these tools, and there are bad ways. Web brows- ers are smart application programs. ey can take badly written HTML and still present a respectable-looking web page. However, there are still very good reasons for learning how to write good markup. is book is about creating web pages that . Are pleasing to look at and fun to play with . Are friendly to search engine robots . Are easy to update and maintain over time e Web can be understood through a number of metaphors that allow us to think of a website as a place within a realm we explore. We even socialize within its “spaces.” But that is just a useful illusion. Under the hood, the Web is not like that at all. Chapter 1 introduces the client/server technology that web authors and developers use to create the illusion. Even if you consider yourself an experienced web user, Chapter 1 is worth skimming. Chapter 2 is all about the elements of HTML, including some of the more interesting HTML5 additions. It has many examples illustrating how to mark up documents semantically so that the resulting web page provides all the right information to readers, both human and robot, and that it is easy to update. Our rst obligation in design is to please ourselves. With good document structure, a website can be easily styled in a consistent manner across all pages. Chapter 3 explains, with many examples, how to use Cascading Style Sheet (CSS) statements to apply styling to document elements and create people-pleasing web pages. Chapter 4 is about using HTML as a contributor to other websites that accept marked-up content. Five examples are given: blogging, Google Docs, eBay selling, Wikipedia editing, and HTML email. From the Library of Wow! eBook ptg xv Despite the many options for putting content online, sometimes your orga- nization’s objectives or your personal goals dictate building and running your own website. Chapter 5 explores many of the issues involved, including website structure, organization and navigation, and search engine optimization. At the end of this book you’ll nd quick-reference guides to HTML ele- ments and CSS properties, including the new elements and properties in the HTML5 and CSS3 dra specications. ere is no list of references to resources. e W3C’s website at w3.org and Wikipedia’s articles on HTML and CSS should cover anything from a technical perspective. You know how to search the Web for other guides, tutorials, and examples. Finally, this book is about you, because you are changing from a person who uses the Web for information and services to one who contributes to the Web. People are discovering that the joys of online shopping pale in compari- son to the pleasures of creative collaboration. ere is a place on this new Web for your stu, and this book is about how to create content with style. I hope you will nd it useful. What’s Not Covered in This Book and Why Not is book is not intended to be a complete reference guide to HTML5. Such a book would be at least three times larger than this one and would be out of date shortly aer publication. Web technologies are changing fast. e infor- mation in this book is based on the World Wide Web Consortium’s (W3C) dra recommendation for a proposed HTML5 standard. Although that might sound a bit tenuous, much of the dra specication has already been adopted by our favorite browsers (even though certainly much will change by the time the standard is ocially approved). at being the case, I don’t claim to be an authority on HTML5, only an author of a book on HTML5. Along with HTML and CSS, JavaScript plays a part in some of this book’s examples. Teaching JavaScript is way beyond the scope of this book, but it is included for two reasons. First, the HTML5 specication formalizes the behavior of document elements in response to user actions using JavaScript syntax and methods. Second, JavaScript libraries, such as jQuery, provide rich new vocabularies of element behaviors that previously were unavailable to web authors and developers. Other technologies play an important part in the operation of some web- sites, but they are not really discussed in this book. If you want to learn about using Microso’s Silverlight technology or Adobe’s Flash platform to develop web pages, you’ve reading the wrong book. As a freelance developer, I tend From the Library of Wow! eBook ptg xvi to favor tools that are free and community-supported. It is not that I think the tools I use are superior to these other technologies; I just have never used them, and I don’t have a basis of comparison. How This Book Happened and What’s to Come e World Wide Web was born more than 20 years ago on the border of Switzerland. When I rst became aware of the Web, I was working as a consultant for one of those large Wall Street investment rms that no longer exist. It was the fall of 1993, and I was converting a mainframe-based system for modeling mortgage-backed derivatives to run on a minicomputer. I was in the oce of the network administrator, whom I had become friends with, and he was showing o a cool application he had recently downloaded from the University of Illinois’ FTP site. It was called Mosaic. My life was about to change, and I was ready for it. At the time, I was already into the world of hypertext applications as an avid fan and user of Apple Computer’s HyperCard application. I had created a number of “stacks” (which is what HyperCard programs were called) for myself and others. I kept up with the eld by participating in the Usenet news- group, alt.hypertext, and local discussion groups on Panix, an early Internet service provider (ISP) based in New York City. I immediately saw the potential of Mosaic and the Web in its seamless integration of anonymous File Transfer Protocol (FTP) and hypertext naviga- tion. Prior to the availability of Mosaic, to read a particular document, rst you had to know where that document was on the Internet. en you logged in to that FTP server, downloaded the le, and opened it for reading. Not only did Mosaic automate these intermediate steps, it also helped you nd the next document you were interested in. It was an exciting time. Dozens of new websites were appearing every week. Updated versions of the web browsers available then—Mosaic, MacWeb, WinWeb, and Arena—were released frequently, supporting more HTML markup elements and new authoring abilities, such as centered text and inline images. Every day, new techniques were discovered and shared in newsgroup discussions and at usergroup meetings. In the early summer of 1994, shortly aer the U.S. government allowed the Internet to go commercial, I was contacted by another frequent newsgroup contributor, Clay Shirky. He asked if I would be interested in meeting his publisher, who was looking for a knowledgeable author to write a book about HTML. Clay had other commitments, so I became the author of the rst book From the Library of Wow! eBook ptg xvii on Web publishing. Clay is an excellent writer. His books Voices from the Net, Here Comes Everybody, and Cognitive Surplus are must-reads for anyone look- ing to explore the cultural impact of new technologies. e rst edition of this book came out at the end of 1994, and a second edition, HTML3 Manual of Style, was published a year later. 1 Fast-forward 14 years to the fall of 2009, and I’m attending meetups and blogging about HTML5. Another author of programming books, Elliotte Rusty Harold, emails me, wondering if I would be interested in talking to his publisher about redoing HTML Manual of Style. Talks led to a formal book proposal and a contract, and now I’m an author again. In reviewing the second edition, I came across this paragraph in the Preface: is is a book in the middle. e rst edition was written just before HTML2 was nalized. Today, HTML is in the middle of the transition to level 3. e Web itself is moving from an academic to a commercial focus, and yours truly is in the middle of a career change from program- mer/analyst to author/lecturer. Some of the topics covered herein are illustrated using products that were still in beta testing, which means that my best guess today may not accurately describe where the Web will be tomorrow. is book will get you started in Web publishing; the rest of your education will come online. e sense of that paragraph is true again today. e Web is undergoing a major technological upgrade as it expands from its commercial focus to encompass and shape our social activities. Support for the emerging HTML5 and CSS3 specications by the principal browser makers are making it pos- sible for Web authors and developers to create exciting new websites and applications. It is safe to say that the Web will change over the next couple of years more than it has in the last decade. at excitement is also what this book isabout. 1. A third edition, HTML3.2 Manual of Style, was published in 1997 without my participation aer ZD Press was acquired by a larger publishing company. So technically, this book is the fourth edition of HTML Manual of Style. From the Library of Wow! eBook ptg HTML and the Web HTML: The Language of the Web A Bit of Web History Hypertext Content and Online Media Uniform Resource Locators (URLs) Web Browsers and Servers The Web Bestiary HTML5 and Web Standards Do We All Have to Learn HTML5 Now? From the Library of Wow! eBook ptg C h a p t e r 3 H TML is the framework of the Web. is chapter describes how the Web works and provides a bit of Web history for context. You will learn about the client/server architecture of the Web and how it is hyperlinked. I’ll present the Web Bestiary of acronyms and denitions and discuss the philosophy and implications of HTML5. Although this chapter is about the Web and HTML, it actually contains very little HTML. If you want to get right into learning the HTML language, skip this chapter and go to the next. You can come back here later to help con- solidate what you have learned. HTML: T L   W HyperText Markup Language (HTML) is the language of the Web. If you could listen to the conversation between your computer and the websites you visit, you would hear HTML spoken. Web servers accept requests from your browser as you visit and interact with the sites they host. In reply, the servers return marked-up content that your browser formats into the web page you see. Web servers also send requests to each other, gathering and exchanging data that power search engines and make a rich variety of social and commer- cial transactions possible. HTML is not a programming language like C, Perl, or Ruby. HTML is a semantic language for marking up text. e markup provides a description of the content that Web browsers use to construct the corresponding web page. 1 From the Library of Wow! eBook . ptg Target Audience 21 2 Money 21 3 e Future 21 4 Websites 21 5 cgi-bin 21 8 logs 21 9 public _html 22 0 Other Website Files 22 1 Organization and Navigation 22 4 Files and Directories 22 4 Page Layout. 22 4 Page Layout 22 5 Navigation 22 8 Imagemaps 23 5 Toggles and Accordions 23 7 Tabbed Content Sections 24 0 Opening New Windows 24 6 Page Head Information 24 9 meta Elements 24 9 link Elements 25 1 Other Head. Elements 27 6 Legacy Elements 27 7 Appendix B: CSS Properties 27 9 Explanation of Values 27 9 CSS Properties 28 0 Aural Properties 300 Index 305 From the Library of Wow! eBook ptg xii Acknowledgments I would