Beginning Web Programming with HTML XHTML CSS

Beginning

Web Programming with HTML, XHTML, and CSS

Second Edition

Jon Duckett

Beginning Web Programming with HTML, XHTML, and CSS

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Chapter 1: Creating Structured Documents . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 2: Links and Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Chapter 3: Images and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Chapter 4: Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Chapter 5: Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Chapter 6: Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Chapter 7: Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Chapter 8: More Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Chapter 9: Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Chapter 10: Design Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Chapter 11: Learning JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Chapter 12: Working with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Chapter 13: Putting Your Site on the Web . . . . . . . . . . . . . . . . . . . . . . . . . 501 Appendix A: Answers to Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Appendix B: XHTML Element Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 Appendix C: CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Appendix D: Color Names and Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637 Appendix E: Character Encodings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 Appendix F: Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Appendix G: Language Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665 Appendix H: MIME Media Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669 Appendix I: Deprecated and Browser-Specific Markup . . . . . . . . . . . . . . . . . 681 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715

Beginning

Web Programming with HTML, XHTML, and CSS

Second Edition

Beginning

Web Programming with HTML, XHTML, and CSS

Second Edition

Jon Duckett

Beginning Web Programming with HTML, XHTML, and CSS, Second Edition

Published by

Wiley Publishing, Inc.

10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com

10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by

any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://www.wiley.com/go /permissions .

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not

be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002.

Library of Congress Cataloging-in-Publication Data is available from the publisher. Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Wrox Programmer to Programmer, and related

trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or

vendor mentioned in this book. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not

be available in electronic books.

About the Author

Jon Duckett published his first web site in 1996 while studying for a BSc (Hons) in Psychology at Brunel University, London. Since then, he has helped create a wide variety of web sites for companies of all sizes. He has also co-written more than ten programming-related books on topics from ASP to XML (via many other letters of the alphabet), covering diverse aspects of web programming including design, architecture, and coding.

About the Technical Editor

Ben Schupak holds a master’s degree in computer science and has more than nine years of professional programming experience for large corporations and U.S. federal departments. He lives in the New York metro area and enjoys traveling.

Credits

Acquisitions Editor Vice President and Executive Group Publisher Jennifer Watson

Richard Swadley

Development Editor Vice President and Executive Publisher William Bridges

Joseph B. Wikert

Technical Editor Project Coordinator, Cover Benjamin Schupak

Lynsey Stanford

Production Editor

Compositor

Christine O’Connor Simmy Cover, Happenstance Type-O-Rama Copy Editor

Proofreader

Nancy Rapoport

Christopher Jones

Editorial Manager

Indexer

Mary Beth Wakefield Johnna VanHoose Dinse Production Manager

Tim Tate

Contents

Introduction xxiii

Chapter 1: Creating Structured Documents

1 Introducing XHTML

A Web of Structured Documents

2 Core Elements and Attributes

9 The Element

10 The Element11 The <body> Element11 Attribute Groups12 Core Attributes12 Internationalization14 UI Events<div style="text-align: center;margin-top: 10px"></div>15 Basic Text Formatting16 White Space and Flow17 Creating Headings Using hn Elements18 Creating Paragraphs Using the Element21 Creating Line Breaks Using the Element21 Creating Preformatted Text Using the <pre> Element22 Presentational Elements26 The Element26 The Element26 The Element (deprecated)<div style="text-align: center;margin-top: 10px"></div>27 The <s> and <strike> Elements (deprecated)27 The <tt> Element27 The Element28 The Element28 The <big> Element28 The Element28 The <hr /> Element28 Phrase Elements29 The Element Adds Emphasis30 The Element Adds Strong Emphasis<div style="text-align: center;margin-top: 10px"></div>30 The <abbr> Element Is for AbbreviationsThe <acronym> Element Is for Acronym Use31 The <dfn> Element Is for Special Terms32 The <blockquote> Element Is for Quoting Text32 The <q> Element Is for Short Quotations33 The <cite> Element Is for Citations33 The <code> Element Is for Code34 The <kbd> Element Is for Text Typed on a Keyboard34 The <var> Element Is for Programming Variables35 The <samp> Element Is for a Program Output<div style="text-align: center;margin-top: 10px"></div>35 The <address> Element Is for Addresses36 Lists36 Using the <ul> Element to Create Unordered Lists36 Ordered Lists37 Definition Lists39 Nesting Lists40 How It Works43 Editing Text45 Using <ins> to Indicate New Additions to Text46 Using <del> to Indicate Deleted Text<div style="text-align: center;margin-top: 10px"></div>46 Using Character Entities for Special Characters47 Comments47 The Element (deprecated)48 Understanding Block and Inline Elements48 Grouping Elements with <div> and 49 Summary50 Exercises51 Chapter 2: Links and Navigation53 Basic Links54 Linking to Other Documents<div style="text-align: center;margin-top: 10px"></div>54 Linking to E-mail Addresses56 Understanding Directories and Directory Structures57 What Are You Linking To?58 What a URL Is Made Up Of59 Absolute and Relative URLs61 The <base> Element64 Creating Links with the <a> Element65 Creating a Source Anchor with the href Attribute65 Creating a Destination Anchor Using the name and id Attributes(linking to a specific part of a page)<div style="text-align: center;margin-top: 10px"></div>xiiAdvanced E-mail Links74 Summary75 Exercises76 Chapter 3: Images and Objects77 Adding Images to Your Site77 Types of Image Formats78 Bitmap Images78 Vector Images85 Adding Images Using the <img> Element86 Adding Other Objects with the <object> Element93 The <object> Element’s Attributes94 The <param> Element97 Adding a Flash Movie To A Page98 Using Images as Links99 Image Maps100 Server-Side Image Maps101 Client-Side Image Maps102 Summary105 Exercises106 Chapter 4: Tables109 Introducing Tables109 Basic Table Elements and Attributes112 The <table> Element Creates a Table113 The <tr> Element Contains Table Rows117 The <td> and <th> Elements Represent Table Cells119 Advanced Tables125 Splitting Up Tables Using a Head, Body, and Foot125 Adding a <caption> to a Table128 Spanning Columns Using the colspan Attribute128 Spanning Rows Using the rowspan Attribute129 Grouping Columns Using the <colgroup> Element130 Columns Sharing Styles Using the <col> Element132 Accessibility Issues with Tables132 How Tables Linearize132 Linearization of Tables Used for Layout133 Linearization of Tables Used for Data135 Summary136 Exercisesxiii<h3 id='toc_10.1' style='text-align: justify;'>Chapter 5: Forms 139 Introducing Forms</h3>140 Creating a Form with the <form> Element141 The action Attribute142 The method Attribute142 The id Attribute142 The name Attribute (deprecated)142 The onsubmit Attribute143 The onreset Attribute143 The enctype Attribute144 The accept-charset Attribute144 The accept Attribute144 The target Attribute145 White Space and the <form> Element145 Form Controls145 Text Inputs145 Buttons150 Checkboxes154 Radio Buttons156 Select Boxes158 File Select Boxes164 Hidden Controls165 Object Controls166 Creating Labels for Controls and the <label> Element169 Structuring Your Forms with <fieldset> and <legend> Elements171 Focus173 Tabbing Order173 Access Keys175 Disabled and Read-Only Controls176 Sending Form Data to the Server178 HTTP get178 HTTP post179 Summary183 Exercises183 Chapter 6: Frames185 Introducing the Frameset185 When to Use Frames188 The <frameset> Element189 The cols Attribute189 The rows AttributexivBrowser-Specific Extensions to the <frameset> Element 192 The <frame> Element194 The src Attribute195 The name Attribute195 The frameborder Attribute195 The marginwidth and marginheight Attributes196 The noresize Attribute196 The scrolling Attribute196 The longdesc Attribute197 The <noframes> Element197 Creating Links Between Frames198 Setting a Default Target Frame Using the <base> Element200 Nested Framesets200 Floating or Inline Frames with <iframe>204 The <iframe> Element206 Summary209 Exercises209 Chapter 7: Cascading Style Sheets211 Introducing CSSA Basic Example 213 Inheritance216 Where You Can Add CSS Rules217 The <link> Element218 The <style> Element220 Advantages of External CSS Style Sheets220 CSS Properties221 Controlling Fonts223 The font-family Property224 The font-size Property226 The font-weight Property227 The font-style Property228 The font-variant Property229 The font-stretch Property230 The font-size-adjust Property230 Text Formatting230 The color Property231 The text-align Property231 The vertical-align Property232 The text-decoration Property234 The text-indent Property234 The text-shadow PropertyxvThe text-transform Property 235 The letter-spacing Property236 The word-spacing Property237 The white-space Property237 The direction Property238 The unicode-bidi Property239 Text Pseudo-Classes239 The first-letter Pseudo-Class239 The first-line Pseudo-Class240 Selectors243 Universal Selector243 The Type Selector243 The Class Selector244 The ID Selector244 The Child Selector244 The Descendent Selector245 The Adjacent Sibling Selector245 Using Child and Adjacent Sibling Selectors to Reduce Dependenceon Classes in Markup 245 Attribute Selectors247 Lengths249 Absolute Units249 Relative Units249 Percentages251 Introducing the Box Model251 An Example Illustrating the Box Model252 The Border Properties255 The padding Property258 The margin Property259 Dimensions260 Summary270 Exercises270 Chapter 8: More Cascading Style Sheets273 Links274 Backgrounds275 The background-color Property276 The background-image Property277 The background-repeat Property278 The background-position Property (for fixing position of backgrounds)281 The background-attachment Property (for watermarks)282 The background Property (the well-supported shorthand)xviLists 283 The list-style-type Property284 The list-style-position Property285 The list-style-image Property286 The list-style Property (the shorthand)286 The marker-offset Property287 Tables287 Table-Specific Properties289 The border-collapse Property289 The border-spacing Property291 The caption-side Property292 The empty-cells Property292 The table-layout Property294 Outlines294 The outline-width Property295 The outline-style Property295 The outline-color Property295 The outline Property (the shorthand)296 The :focus and :active Pseudo-Classes296 Generated Content297 The :before and :after Pseudo-Elements297 The content Property298 Miscellaneous Properties301 The cursor Property301 The display Property302 The visibility Property302 Additional Rules304 The @import Rule: Modularized Style Sheets304 The @charset Rule305 The !important Rule305 Positioning with CSS305 Normal Flow306 The position Property306 Box Offset Properties307 Relative Positioning307 Absolute Positioning309 Fixed Positioning310 The z-index Property311 Floating Using the float Property312 The clear Property314 Summary320 Exercisesxvii<h3 id='toc_10.2' style='text-align: justify;'>Chapter 9: Page Layout 323 Understanding the Site</h3>323 Understanding a Site’s Aims324 Whom You Expect to Visit325 New Content326 Defining Your Site’s Content326 Grouping and Categorization327 Creating a Site Map328 Identifying Key Elements for Every Page329 Page Size (and Screen Resolution)330 Fixed-Width vs. Liquid Designs331 Designing Pages337 Sketching the Placement of Elements337 Introducing the Style339 Navigation342 Home Pages345 Content Pages345 Structuring Pages346 Single-Column Layouts348 Two-Column Layouts350 Three-Column Layouts353 Sacrificial Columns354 Advanced Layout Using CSS356 Creating a Layout Using Nested Tables356 Summary359 Exercises359 Chapter 10: Design Issues361 Text362 White Space Helps Make More Attractive Pages362 Carefully Aligned Text Is More Readable365 Adjusting Line Height Makes Text More Readable365 Wide Columns of Text Are Harder to Read366 Background Images Can Make Text Hard to Read366 Choose Fonts Carefully367 Fixed-Size Fonts Are Affected by Screen Resolution369 Navigation369 Menus369 Links374 Site Search FeaturesxviiiShading Multiple Rows of a Table 378 Forms380 Before Designing the Form380 Designing the Form382 Summary401 Exercises401 Chapter 11: Learning JavaScript403 What Is Programming About?404 How to Add a Script to Your Pages406 Comments in JavaScript408 The <noscript> Element408 The Document Object Model410 Introducing the Document Object Model410 Objects, Methods, and Properties412 The Forms Collection415 Form Elements416 Images Collection419 Different Types of Objects422 Starting to Program with JavaScript422 Variables423 Assigning a Value to a Variable424 Lifetime of a Variable424 Operators424 Arithmetic Operators425 Assignment Operators425 Comparison Operators426 Logical or Boolean Operators427 String Operator427 Functions427 How to Define a Function428 How to Call a Function428 The Return Statement429 Conditional Statements429 if Statements429 if . . . else StatementsA switch Statement 431 Conditional (or Ternary) Operator432 Looping432 while433 do . . . whilexix xix435 Events435 Built-in Objects437 String437 Date441 Math444 Array446 Window447 Writing JavaScriptA Word About Data Types 450 Keywords451 Summary451 Exercises452 Chapter 12: Working with JavaScript453 Practical Tips for Writing Scripts453 Has Someone Already Written This Script?454 Reusable Functions454 Using External JavaScript Files455 Place Scripts in a Scripts Folder455 Form Validation456 When to Validate456 How to Validate456 Form Enhancements470 Focus on First Form Item470 Auto-Tabbing Between Fields471 Disabling a Text Input472 Case Conversion474 Trimming Spaces from Beginning and End of Fields474 Selecting All the Content of a Text Area475 Check and Uncheck All Checkboxes476 Image Rollovers482 Random Script Generator485 Pop-Up Windows486 JavaScript Libraries487 Animated Effects using Scriptaculous488 Drag-and-Drop Sortable Lists Using Scriptaculous490 Sortable Tables with MochiKit492 Creating Calendars with YUI494 Auto-Completing Text Inputs with YUIxxWhen Not to Use JavaScript 496 Drop-Down Navigation Menus497 Hiding Your E-mail Address497 Quick Jump Select Boxes497 Anything the User Requires from Your Site497 Summary498 Exercises498 Chapter 13: Putting Your Site on the Web501 Meta Tags502 name and content Attributes503 http-equiv and content505 The scheme Attribute508 Testing Your Site508 The Importance of Directory Structure and Relative URLs509 Validating HTML, XHTML, and CSS509 Link Checking513 Checking Different Screen Resolutions and Color Depths514 Accessibility Checkers514 Development Server or Live Server515 Checking in Different Versions of Browsers515 Pilot Testing516 Proofreading517 Taking the Leap to Live517 Getting a Domain Name517 Hosting518 Search Engine Strategies522 Other Web Marketing Possibilities525 Statistical Analysis526 Version Control527 What Next?529 Blogs529 Discussion Boards or Forums530 Adding a Search Utility530 Introducing Other Technologies531 Server-Side Web Programming: ASP.NET, and PHP531 Choosing a Server-Side Language532 Content Management532 Flash535 Learning Graphics Packages536 SummaryxxiAppendix A: Answers to Exercises 539Appendix B: XHTML Element Reference 563Appendix C: CSS Properties 607Appendix D: Color Names and Values 637Appendix E: Character Encodings 645Appendix F: Special Characters 649Appendix G: Language Codes 665Appendix H: MIME Media Types 669<h3 id='toc_10.3' style='text-align: justify;'>Appendix I: Deprecated and Browser-Specific Markup 681</h3>Index 715xiIntroductionThere are a lot of books about designing and building web pages, so thank you for picking up this one. Why do I think it is different? Well, the Web has been around for over a decade now, and during its life many technologies have been introduced to help you create web pages, some of which have lasted, others of which have disappeared. Many books that teach you to write web pages are revisions of earlier versions of the same book and therefore still take the same approach as the previous edition did. The purpose of this book, however, is to teach you how to create pages for the Web as it is today and will be for the next few years. Then, once you have worked through this book, it should continue to serve as a helpful reference text you can keep nearby and dip into when you need to.At one time, you needed to learn only one language to write web pages: HTML. As the Web has advanced, however, so have the technologies you need to learn in order to create effective and attractive web pages. As the title of this book suggests, you will be learning a few different languages:❑ HTML and XHTML: HTML and XHTML are needed to explain the structure of any web pages. They’re used to indicate what text should be considered a heading, where paragraphs start and end, and what images should appear in the document, and to specify links between different pages. As you might be relieved to hear, you shouldn’t think of HTML and XHTML as two separate languages. Rather, you can consider XHTML as more like the latest version of HTML.❑ CSS: CSS is used to control how a document should appear. For example, you can use it to specify that a typeface should be a large, bold, Arial typeface or that the background of a page shouldbe a light green. It can also be used to control where different items appear on a page. For example, you can use CSS to present text in two columns on the same page.❑ JavaScript: You learn a little bit of JavaScript to add interactivity to the web pages you create, and to work with the browser displaying the web page.Despite the fact that you are looking at several languages, not just HTML, you can consider it a very good time to be coming to the Web because many of the technologies used to create web pages have matured, and favored methods, or “best practices,” for creating web sites have been emerging. It is these that you will be learning.<h2 id='toc_11' style='text-align: justify;'>About the Book</h2>As you have already seen, you’ll be learning how to control the structure of a web page with HTML and XHTML, how to style it with CSS, and how to add interactivity with JavaScript. Just learning about the latest technologies, however, is not enough to ensure that you can write great web pages. As these technologies to write web pages have improved, so too have browsers (the programs and devices used to access the Web). Browsers have reflected — and on occasion even informed — the way the languages used to create web pages have developed. The problem, as you can probably imagine, is that not everyone has the latest software installed on his or her computer, and as a result you will not only want to be able to write As you have already seen, you’ll be learning how to control the structure of a web page with HTML and XHTML, how to style it with CSS, and how to add interactivity with JavaScript. Just learning about the latest technologies, however, is not enough to ensure that you can write great web pages. As these technologies to write web pages have improved, so too have browsers (the programs and devices used to access the Web). Browsers have reflected — and on occasion even informed — the way the languages used to create web pages have developed. The problem, as you can probably imagine, is that not everyone has the latest software installed on his or her computer, and as a result you will not only want to be able to writeBecause there has been so much change in the way web pages are built, and because there are so many different versions of web browsers, some features are listed in the book but are marked as “deprecated”; this means that while that section should still work in modern browsers, you are no longer advised to use it because software might not support it much longer.Another issue you need to be aware of when writing web pages is the increasing number of devices capable of accessing the Web, such as mobile phones, PDAs (personal digital assistants), and TV set-top boxes. You will be relieved to know that many of these devices employ the same languages that you will be learning in this book — and by learning to use XHTML with CSS you will be able to create web sites that will last much longer than those written in plain old HTML.Another area where the Web has changed from a few years back is the increased emphasis on usability and accessibility. Usability refers to making the site easy for users to get around (or navigate) and achieve what they came to your site for, whereas accessibility addresses making a site available to as many users as possible, in particular people with disabilities (who may have impaired vision or difficulty using a mouse). Many governments around the world will not issue a contract to build web sites for them unless the site will meet strict accessibility guidelines. A little careful thought before you build your web site means that people with vision impairments can either view your site with larger text or have it read to them by a screen reader. There are books dedicated to the topics of usability and accessibility and that are aimed at web developers who need to learn how to make their code more accessible and usable, but my aim is to teach you to code with many of these principles in mind from the start.By the end of this book, you will be writing web pages that not only use the latest technologies, but also are still viewable by older browsers. Pages that look great can still be accessed by those with visual and physical impairments. These are pages that not only address the needs of today’s audiences but can also work on emerging technologies — and the skills you learn should be relevant longer.<h2 id='toc_12' style='text-align: justify;'>Whom This Book Is For</h2>This book is written for anyone who wants to learn how to create web pages, and for people who might have dabbled in writing web pages (perhaps using some kind of web-page authoring tool) but want to really understand the languages of the Web to create better pages.More experienced web developers can also benefit from this book because it teaches some of the latest technologies, such as XHTML, and encourages you to embrace web standards that not only meet the needs of the new devices that access the Web, but also help make your sites available to more visitors.You don’t need any previous programming experience to work with this book. This is one of the first steps on the programming ladder. Whether you are just a hobbyist or want to make a career of web programming, this book teaches you the basics of programming for the Web. Sure, the term “programmer” mightbe associated with geeks, but as you will see by the end of the book, even if you prefer to be known as a web designer, you need to know how to code in order to write great web sites.xxiv<h2 id='toc_13' style='text-align: justify;'>What This Book Cover s</h2>By the end of this book, you will be able to create professional looking and well-coded web pages. Not only will you learn the code that makes up markup languages such as XHTML, but you will also seehow to apply this code so you can create sophisticated layouts for your pages, positioning text and images where you would like them to appear and getting the colors and fonts you want. Along the way, you will see how to make your pages easy to use and available to the biggest audience possible. You will also learn practical techniques such as how to make your web site available on the Internet and how to get search engines to recognize your site.The main technologies covered in this book are HTML, XHTML, and CSS. You will also learn the basics of JavaScript, enough to work on some examples that add interactivity to your pages and allow you to work with basic scripts. Along the way, I introduce and point you to other technologies you might want to learn in the future.The code I will encourage you to write is based on what are known as web standards; HTML, XHTML, and CSS are all created and maintained by the World Wide Web Consortium, or W3C ( www.w3.org/ ), an organization dedicated to creating specifications for the Web. You will also learn about some features that are not standards; it is helpful to know some of these in case you come across such markup and need to know what it does. (In such cases, I make it clear that the features are not part of the standard.)<h2 id='toc_14' style='text-align: justify;'>What You Need to Use This Book</h2>All you need to work through this book is a computer with a web browser (preferably Firefox 2 or higher, Safari 2 or higher, or Internet Explorer 6 or higher), and a simple text editor such as Notepad on Windows or TextEdit on Mac.If you have a web-page editor program, such as Macromedia Dreamweaver or Microsoft FrontPage, you are welcome to use it, but I will not be teaching you how to use these programs. Each of these programs is different and entire books have been written about them. Even with such programs available, you can write much better sites when you really understand the code these programs generate because you’ll often want to go in and edit this by hand.<h2 id='toc_15' style='text-align: justify;'>How This Book Is Organized</h2>The first chapter of this book will show you how the main task in creating a web site is marking up the text you want to appear on your site using things called elements and attributes. As you will see, these elements and attributes describe the structure of a document (what is a heading, what is a paragraph of text, what is a link, and so on).The first six chapters of the book describe the different elements and attributes that make up HTML and XHTML and how you can use them to write web pages. The chapters are organized into task-related areas,xxv xxvI should mention that you do not need to read all the detailed explanations of every aspect of an element on your first reading of the book — as long as you have an idea of what is possible. For the sake of completeness (and to keep related information in the same place), I have included some functionality that you will rarely want to use. You can always come back to the finer detail later when you find the need to use some of the more obscure functionality. So, if you want to move on at a faster pace, feel free to get the gist of the markup and then move on.Each chapter ends with exercises designed to get you working with the concepts you’ve just learned. Don’t worry if you have to go back and review the content of the chapter in order to complete the exercises; this book has been created with the intention that it should be a helpful reference for years to come, so don’t feel you need to learn everything by heart. Along the way, you’ll see which browsers support each element, and you’ll learn plenty of handy tips, tricks, and techniques for creating professional web pages.Once you have seen how to create and structure a document using HTML and XHTML, you then learn how to make your pages look more attractive using cascading style sheets (CSS). You learn how to change the typefaces and size of fonts used, color of text, backgrounds and borders around items, and alignment of objects to the center, left, or right of the page.Having worked through these two chapters, and using the examples in the book, you should be able to write quite complex web pages. These chapters will serve as a helpful reference you can keep coming back to and the examples will act as a toolkit for building your own sites.Chapters 9 and 10 look at important web-page design issues. You see some examples of popular page layouts and how to construct them; you learn how to create a good navigation bar to allow users to find the pages they want on your site; you find out what makes a form effective; and you learn how to make your web sites available to as many people as possible. These chapters really build upon the theory you learned in the first half of the book and help you create professional-looking pages that attract users and make your site easy to use.Chapters 11 and 12 introduce you to JavaScript, a programming language known as a scripting language that you use in web pages. While the entire JavaScript language is too large to teach you in two chapters, you should get a feel for how it works and see how to integrate scripts into your pages.Chapter 13, the final chapter, prepares you to put your site on the Internet and covers web hosting, FTP, and validating your code. Finally, I give you some ideas of where you can go now that you’ve worked through this book; there are a lot of other things you might want to add to your site or learn in order to advance your web skills, and this chapter gives you an idea of what else is possible and what you need to learn to do that.I have included several helpful appendixes, including a reference to the XHTML elements and CSS properties. There is an appendix that explains how XHTML and CSS specify colors. Other appendixes show you available character encodings, language codes, and escape characters that can be used with HTML, XHTML, CSS and JavaScript. Finally, there is an appendix on old markup that should not really be used any longer, in case you come across some of these older techniques when working on a site.xxvi<h2 id='toc_16' style='text-align: justify;'>Conventions</h2>To help you get the most from the text and keep track of what’s happening, this book uses a number of typographical conventions.Boxes like this one hold important, not-to-be forgotten information that is directly relevant to the surrounding text.Tips, hints, tricks, and asides to the current discussion are set off and placed in italics like this. As for styles in the text: ❑Important words are italicized when first introduced. ❑Keystrokes appear like this: Ctrl+A. ❑Filenames, URLs, and code within the text appear in monospace, like so: www.wrox.com . ❑Code appears two different ways: General code examples are shown without a background. WhenI want to draw particular attention to a line of code, it will be highlighted on a gray background.<h2 id='toc_17' style='text-align: justify;'>Source Code</h2>As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All of the source code used in this book is available for download at www.wrox.com . Once at the site, simply locate the book’s title (either by using the Search box or by using one of the title lists) and click the Download Code link on the book’s detail page to obtain all the source code for the book.Because many books have similar titles, you may find it easiest to search by ISBN; this book’s ISBN is 9780470259313.Once you download the code, just decompress it with your favorite compression tool. Alternately, you can go to the main Wrox code download page at www.wrox.com/dynamic/books/download.aspx to see the code available for this book and all other Wrox books.<h2 id='toc_18' style='text-align: justify;'>Er rata</h2>I’ve made every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in this book, such as a spelling mistake or faulty piece of code, I would be very grateful for your feedback. By sending in errata, you may save another reader hours of frustration, and at the same time you will be helping to provide even higher quality information.To find the errata page for this book, go to www.wrox.com and locate the title using the Search box or one of the title lists. Then, on the book details page, click the Book Errata link. On this page you can view allxxvii xxviiIf you don’t spot “your” error on the Book Errata page, go to www.wrox.com/contact/techsupport.shtml and complete the form there to send us the error you discovered. We’ll check the information and, if appropriate, post a message to the book’s errata page and fix the problem in subsequent editions of the book.p2p.wrox.comFor author and peer discussion, join the P2P forums at p2p.wrox.com . The forums are a web-based system for you to post messages related to Wrox books and related technologies and interact with other readers and technology users. The forums offer a subscription feature to e-mail you about topics of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums.At http://p2p.wrox.com you will find a number of different forums that will help you not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps:<h3 id='toc_18.0' style='text-align: justify;'>1. Go to p2p.wrox.com and click the Register link.</h3><h3 id='toc_18.1' style='text-align: justify;'>2. Read the terms of use and click Agree.</h3><h3 id='toc_18.2' style='text-align: justify;'>3. Complete the required information to join as well as any optional information you wish to provide and click Submit.</h3><h3 id='toc_18.3' style='text-align: none;'>4. You will receive an e-mail with information describing how to verify your account and complete the registration process.</h3>You can read messages in the forums without joining P2P, but in order to post your own messages, you must join.Once you join, you can post new messages and respond to messages other users post. You can read messages at any time on the Web. If you would like to have new messages from a particular forum e-mailed to you, click the Subscribe to this Forum icon by the forum name in the forum listing.For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to questions about how the forum software works as well as many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page.xxviiiCreating Str uctured<h2 id='toc_19' style='text-align: center;'>Documents</h2>In this chapter, you meet the first technologies you need to learn in order to write web pages: HTML and XHTML. In fact, what you will really be learning is XHTML—although I will be explaining the differences between HTML and XHTML as we go along. (As I already mentioned, you can consider XHTML simply to be the latest version of HTML.)The main goal of this chapter is to demonstrate how the primary role of XHTML is to describe the structure of your documents.In this chapter, then, you: ❑Learn the difference between tags, elements, and attributes ❑See how a web page uses markup to describe how the page should be structuredMeet the elements that allow you to mark up text such as headings and paragraphs❑ Learn many other elements that can add additional presentation information and phrasing to your documents❑ See how to add bulleted and numbered lists to documents ❑Are introduced to some core concepts that distinguish different types of elements in XHTML By the end of the chapter you will have a good idea of how to structure a page in XHTML and willhave written your first web pages.<h2 id='toc_20' style='text-align: justify;'>A Web of Str uctured Documents</h2>Every day, you come across all kinds of printed documents—newspapers, train timetables, insurance forms. The Web is like a sea of documents all linked together; these documents bear a strong similarity to the documents that you meet in everyday life. So let’s think for a moment about the structure of some of the documents we see around us, and how they compare to web pages.Every morning I used to read a newspaper. A newspaper is made up of several stories or articles (and probably a fair smattering of advertisements, too). Each story has a headline and then some paragraphs, perhaps a subheading, and then some more paragraphs; it may also include a picture or two.I don’t buy a daily paper anymore, as I tend to look at news online, but the structure of articles on news web sites is very similar to the structure of articles in newspapers. Each article is made up of headings, paragraphs of text, and the odd picture. The parallel is quite clear; the only real difference is that each story gets its own page on a web site, and that page is accessed by clicking on a headline or a brief summary either on the site’s main home page or one of the home pages for a subsection of the site (such as the politics, sports, or entertainment sections).Consider another example: Say I’m catching a train to see a friend, so I check the schedule to see what time the trains go that way. The main part of the schedule is a table telling me what times trains arrive and when they depart from different stations. In the same way that a lot of documents have headings and paragraphs, a lot of other documents use tables; from the stocks and shares pages in the financial supplement of your paper to the TV listings at the back, you come across tables of information every day—and these are often recreated on the Web.Another kind of document you often come across is a form. For example, I have a form sitting on my desk (which I really must mail) from an insurance company. This form contains fields for me to write my name, address, and the amount of coverage I want, and boxes I have to check to indicate the number of rooms in the house and what type of lock I have on my front door. Indeed, there are lots of forms on the Web, froma simple search box that asks what you are looking for to the registration forms you are required to go through before you can place an online order for books or CDs.As you can see, there are many parallels between the structure of printed documents you come across every day and pages you see on the Web. So you will hardly be surprised to learn that when it comes to writing web pages, your code tells the web browser the structure of the information you want to display— what text to put in a heading, or in a paragraph, or in a table, and so on—so that the browser can present it properly to the user.In order to tell a web browser the structure of a document—how to make a heading, a paragraph, a table, and so on—you need to learn HTML and XHTML.<h2 id='toc_21' style='text-align: justify;'>Introducing XHTML</h2>XHTML, or Extensible Hypertext Markup Language, and its predecessor HTML, are the most widely used languages on the Web. As its name suggests, XHTML is a markup language, which may sound complicated, until you realize that you come across markup every day.When creating a document in a word processor, you can add styles to the text to explain the document’s structure. For example, you can distinguish headings from the main body of the text using a heading style (usually with a larger font). You can use the Enter (or Return) key to start a new paragraph. You can insert tables into your document to hold data, or create bulleted lists for a series of related points, and so on. While this does affect the presentation of the document, the key purpose of this kind of markup is to provide a structure that makes the document easier to understand.When marking up documents for the Web, you are performing a very similar process, except you do it by adding things called tags to the text. With XHTML the key thing to remember is that you are adding When marking up documents for the Web, you are performing a very similar process, except you do it by adding things called tags to the text. With XHTML the key thing to remember is that you are addingWhile earlier versions of HTML allowed you to control the presentation of a document—things like which typefaces and colors a document should use—XHTML markup is not supposed to be used to style the document; that is the job of CSS, which you meet in Chapter 7.Let’s have a look at a very simple web page. As I mentioned in the introduction, you don’t need any special programs to write web pages—you can simply use a text editor such as Notepad on Windows or TextEdit on a Mac, and save your files with an .html file extension. You can download this example along with all the code for this book from the Wrox web site at www.wrox.com ; the example is in the Chapter 1 folder and is called ch01_eg01.html .<html> <head> <title>Popular Websites: Google</title> </head> <body><h1>About Google</h1> Google is best known for its search engine, althoughGoogle now offers a number of other services. Google’s mission is to organize the world’s information and make it universally accessible and useful.Its founders Larry Page and Sergey Brin started Google at Stanford University. </body> </html>This may look a bit confusing at first, but it will all make sense soon. As you can see, there are several sets of angle brackets with words or letters between them, such as <html> , <head> , </title> , and </body> . These angle brackets and the words inside them are known as tags, and these are the markup we have been talking about. Figure 1-1 illustrates what this page would look like in a web browser.Figure 1-1As you can see, this document contains the heading “About Google” and a paragraph of text to introduce the company. Note also that it says “Popular Websites: Google” in the top-left of the browser window; this is known as the title of the page.To understand the markup in this first example, you need to look at what is written between the angle brackets and compare that with what you see in the figure, which is what you will do next.<h2 id='toc_22' style='text-align: justify;'>Tags and Elements</h2>If you look at the first and last lines of the code for the last example, you will see pairs of angle brackets containing the letters <html> . The two brackets and all of the characters between them are known as a tag, and there are lots of tags in the example. All the tags in this example come in pairs; there are opening tags and closing tags . The closing tag is always slightly different from the opening tag in that it has a forward slash after the first angled bracket </html> .A pair of tags and the content these include are known as an element. In Figure 1-2, you can see the heading for the page of the last example.element<h2 id='toc_23' style='text-align: center;'><h1>About Google</h1></h2>Figure 1-2The opening tag says “This is the beginning of a heading” and the closing tag says “This is the end of a heading.” Like most of the tags in XHTML, the text inside the angled brackets explains the purpose of thetag—here h1 indicates that it is a level 1 heading (or top-level heading). As you will see shortly, there arealso tags for subheadings ( <h2> , <h3> , <h4> , <h5> , and <h6>) . Without the markup, the words “About Google” in the middle of the tags would just be another bit of text; it would not be clear that they formed the heading.Now look at the three paragraphs of text about the company; each one is held between an opening tag and a closing tag. And, you guessed it, the p stands for paragraph.Because this basic concept is so important to understand, I think it bears repeating: tags are the angle brackets and the letters and numbers between them, whereas elements are tags and anything between the opening and closing tags.As you can see, the markup in this example actually describes what you will find between the tags, and the added meaning the tags give is describing the structure of the document. Between the opening and closing tags are paragraphs, and between the <h1> and </h1> tags is a heading. Indeed, the whole document is contained between opening <html> and closing </html> tags.You will often find that terms from a family tree are used to describe the relationships between elements. For example, an element that contains another element is known as the parent, while the element that is between the parent element’s opening and closing tags is called a child of that element. So, the <title> element is a child of the <head> element, the <head> element is the parent of the <title> element, and so on. Furthermore, the <title> element can be thought of as a grandchild of the <html> element.XHTML tags should always be written in lowercase letters.<h2 id='toc_24' style='text-align: justify;'>Separating Heads from Bodies</h2>Whenever you write a web page in XHTML, the whole of the page is contained between the opening <html> and closing </html> tags, just as it was in the last example. Inside the <html> element, there are two main parts to the page:❑ The <head> element: Often referred to as the head of the page, this contains information about the page (this is not the main content of the page). It is information such as a title and a descrip- tion of the page, or keywords that search engines can use to index the page. It consists of the opening <head> tag, the closing </head> tag, and everything in between.❑ The <body> element: Often referred to as the body of the page, this contains the information you actually see in the main browser window. It consists of the opening <body> tag, closing </body> tag, and everything in between.Inside the <head> element of the first example page, you can see a <title> element: <head><title>Popular Websites: Google</title> </head>Between the opening and closing title tags are the words Popular Websites: Google , which is the title of this web page. If you remember Figure 1-1, which showed the screenshot of this page, I brought your attention to the words right at the top of the browser window. This is where browsers like Internet Explorer, Firefox, and Safari display the title of a document; it is also the name they use when you save a page in your favorites.The real content of your page is held in the <body> element, which is what you want users to read, and is shown in the main browser window.The head element contains information about the document, which is not displayed within the main page itself. The body element holds the actual content of the page that is viewed in your browser. </div> </div> <div style="text-align: center;"> <a target="_blank" href="https://123dok.com/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" title="Beginning Web Programming with HTML XHTML CSS" class="download-link"> <button> Lihat dokumen lengkap (770 Halaman - 12.15MB) </button> </a> </div> <div class="pt-2" style="padding-top:12px;"> </div> </div> <div class="col-md-3 widget"> <div class="link-part mb" id="part-desktop"> <h3 class="widget-title">Parts</h3> <a href="https://text-id.123dok.com/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" class="text-muted"> » Beginning Web Programming with HTML XHTML CSS </a> <a href="https://text-id.123dok.com/document/8yd50p5eq-you-will-be-writing-this-example-in-transitional-xhtml-0-so-add-the-optional-xml-declaration-and-the-doctype-declaration-beginning-web-programming-with-html-xhtml-css.html" class=""> » You will be writing this example in Transitional XHTML 0, so add the optional XML declaration, and the DOCTYPE declaration: </a> <a href="https://text-id.123dok.com/document/nq7kngkoz-open-the-file-registration-html-that-you-made-earlier-in-the-chapter-and-save-it-as-registration2-html-so-that-you-have-a-different-copy-to-work-with-beginning-web-programming-with-html-xhtml-css.html" class=""> » Open the file registration.html that you made earlier in the chapter and save it as registration2.html so that you have a different copy to work with. </a> <a href="https://text-id.123dok.com/document/oz19op93q-create-a-voting-or-ranking-form-that-looks-like-the-one-shown-in-figure-5-26-note-that-the-following-style-element-was-added-to-the-head-of-the-document-to-make-each-beginning-web-programming-with-html-xhtml-css.html" class=""> » Create a voting or ranking form that looks like the one shown in Figure 5-26. Note that the following <style> element was added to the <head> of the document to make each </a> <a href="https://text-id.123dok.com/document/lq50l203z-re-create-the-iframe-element-shown-in-figure-6-1-here-is-the-new-exercise-code-the-only-change-from-the-iframe-example-in-the-chapter-is-to-the-text-beginning-web-programming-with-html-xhtml-css.html" class=""> » Re-create the <iframe> element shown in Figure 6-1 Here is the new exercise code; the only change from the iFrame example in the chapter is to the text: </a> <a href="https://text-id.123dok.com/document/ky6lk6l4y-this-page-is-built-entirely-in-one-fixed-width-table-the-search-bar-logo-navigation-bar-main-body-of-the-page-and-footer-all-live-in-separate-rows-of-the-table-beginning-web-programming-with-html-xhtml-css.html" class=""> » This page is built entirely in one fixed-width table. The search bar, logo, navigation bar, main body of the page, and footer all live in separate rows of the table. </a> Show more </div> <div style="text-align: center"> </div> <div class="suggest"> <h3 class="widget-title">Dokumen yang terkait</h3> <a href="/document/q76p8mny-belajar-html-dan-css-tutorial-fundamental-dalam-mempelajari-html-dan-css.html" title="Belajar HTML dan CSS Tutorial Fundamental dalam mempelajari HTML dan CSS" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Belajar HTML dan CSS Tutorial Fundamental dalam mempelajari HTML dan CSS</h4> </div> <div class="media-bottom"> 1 0 148 </div> </a> <div class="mb"></div> <a href="/document/qokd5ljy-xhtml-dan-dasar-dasar-css.html" title="XHTML dan Dasar dasar CSS" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">XHTML dan Dasar dasar CSS</h4> </div> <div class="media-bottom"> 0 0 34 </div> </a> <div class="mb"></div> <a href="/document/q51p71ry-html-css-php-and-my-sql.html" title="HTML CSS PHP and My SQL" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">HTML CSS PHP and My SQL</h4> </div> <div class="media-bottom"> 0 4 26 </div> </a> <div class="mb"></div> <a href="/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" title="Beginning Web Programming with HTML XHTML CSS" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Beginning Web Programming with HTML XHTML CSS</h4> </div> <div class="media-bottom"> 0 0 770 </div> </a> <div class="mb"></div> <a href="/document/yeo73meq-css-xhtml-php-javascript-sql-database-mysql.html" title="CSS XHTML PHP JavaScript SQL Database MySql" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">CSS XHTML PHP JavaScript SQL Database MySql</h4> </div> <div class="media-bottom"> 0 0 20 </div> </a> <div class="mb"></div> <a href="/document/qv83l10z-beginning-programming-with-c-for-dummies.html" title="Beginning Programming with C++ For Dummies" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Beginning Programming with C++ For Dummies</h4> </div> <div class="media-bottom"> 0 0 431 </div> </a> <div class="mb"></div> <a href="/document/zxn75ovq-beginning-iphone-sdk-programming-with-objective-c.html" title="Beginning iPhone SDK Programming with Objective C" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Beginning iPhone SDK Programming with Objective C</h4> </div> <div class="media-bottom"> 0 0 549 </div> </a> <div class="mb"></div> <a href="/document/q02ljp9y-beginning-ios-application-development-with-html-and-javascript.html" title="Beginning iOS Application Development with HTML and JavaScript" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Beginning iOS Application Development with HTML and JavaScript</h4> </div> <div class="media-bottom"> 0 2 436 </div> </a> <div class="mb"></div> <a href="/document/zwwdxvgz-beginning-programming-with-java-for-dummies-4th-edition.html" title="Beginning Programming with Java For Dummies, 4th Edition" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Beginning Programming with Java For Dummies, 4th Edition</h4> </div> <div class="media-bottom"> 0 0 483 </div> </a> <div class="mb"></div> <a href="/document/yj820xkq-wrox-accessible-xhtml-and-css-web-sites-problem-design-solution-apr-2005-isbn-0764583069-pdf.html" title="Wrox Accessible XHTML And CSS Web Sites Problem Design Solution Apr 2005 ISBN 0764583069 pdf" class="card card-topic"> <div class="media-left"> </div> <div class="media-right"> <h4 style="-webkit-box-orient: vertical;word-break: break-all">Wrox Accessible XHTML And CSS Web Sites Problem Design Solution Apr 2005 ISBN 0764583069 pdf</h4> </div> <div class="media-bottom"> 0 0 482 </div> </a> <div class="mb"></div> </div> <div class="" style="text-align: center;position: sticky;top: 0"> </div> </div> </section> </div> <div class="download-bar"> <a target="_blank" href="https://123dok.com/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" title="Beginning Web Programming with HTML XHTML CSS" class="download-link"> <button> Download (770 Halaman - 12.15MB) </button> </a> </div> <div id="myModal" class="modal">  <div class="modal-content"> <div class="box-head"> <button type="button" class="close" id="close" data-link="https://123dok.com/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" data-dismiss="modal" aria-label="Close">× </button> </div> <div class="box-body"> <h4>Dokumen yang Anda mencari sudah siap untuk unduhkan</h4> <div> <a target="_blank" href="https://123dok.com/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" class="link-id"> Beginning Web Programming with HTML XHTML CSS </a> </div> <a target="_blank" href="https://123dok.com/document/zgr2kr2q-beginning-web-programming-with-html-xhtml-css.html" title="Beginning Web Programming with HTML XHTML CSS" class="download-link"> <button> Lihat dokumen lengkap (770 Halaman ) </button> </a> </div> </div> </div> <footer> <div class="footer-main"> <div class="container"> <section class="grid justify-center"> <div class="col-sm-3 col-7"> <ul> <li> <a href="https://text-id.123dok.com" rel="nofollow"> <img src="https://text-id.123dok.com/logos/123dok3.png?t=20210402112635" alt="Dokumen global"> </a> </li> <li class="flag"> <ul> <li><a title="England" rel="nofollow" href="https://text-id.123dok.com/auth/language/en" class="disactive"> </a> </li> <li><a title="Vietnam" rel="nofollow" href="https://text-id.123dok.com/auth/language/vi" class="disactive"> </a> </li> <li><a title="Indonesian" rel="nofollow" href="https://text-id.123dok.com/auth/language/id" class="active"> </a> </li> </ul> </li> </ul> </div> <div class="col-sm-3 col-6"> <ul> <li><h4>Dukungan</h4></li> <li> <a href="mailto:info@id.123dok.com"> info@id.123dok.com </a> </li> <li><a href="https://123dok.com/term" rel="nofollow">Syarat penggunaan</a></li> <li><a href="https://123dok.com/policies" rel="nofollow">Kebijakan tentang cara menjual dokumen</a></li> </ul> </div> <div class="col-sm-3 col-6"> <ul> <li><h4>Links</h4></li> <li> <a href="https://123dok.com/titles">Titles</a></li> <li> <a href="https://text-id.123dok.com/topics">Topics</a></li> </ul> </div> </section> </div> </div> <div class="footer-bottom"> Copyright 123dok © 2017. </div> </footer> <button id="back-to-top" title="Back to top">↑</button> <nav id="sidebar"> <div id="dismiss"> </div> <div class="sidebar-header"> <a href="https://text-id.123dok.com" rel="nofollow"> <img src="https://text-id.123dok.com/logos/123dok3.png" alt="Dokumen global"> </a> </div> <ul class="list-unstyled components mb-5"> <a href="https://text-id.123dok.com/topics"> Kategori </a> <li><a href="/topics/all"> Semua </a> </li> <li> <a href="/topics/business"> Bisnis </a> </li> <li> <a href="/topics/career"> Karier </a> </li> <li> <a href="/topics/data-analytics"> Data & Analitik </a> </li> <li> <a href="/topics/design"> Desain </a> </li> <li> <a href="/topics/devices-hardware"> Perangkat & Hardware </a> </li> <li> <a href="/topics/economy-finance"> Ekonomi & Keuangan </a> </li> <li> <a href="/topics/environment"> Lingkungan </a> </li> <li> <a href="/topics/education"> Pendidikan </a> </li> <li> <a href="/topics/engineering"> Teknik </a> </li> <li> <a href="/topics/entertainment-humor"> Hiburan & Seni </a> </li> <li> <a href="/topics/food"> Makanan </a> </li> <li> <a href="/topics/government-nonprofit"> Pemerintah & Organisasi Nirlaba </a> </li> <li> <a href="/topics/health-medicine"> Kesehatan & Pengobatan </a> </li> <li> <a href="/topics/healthcare"> Pelayanan kesehatan </a> </li> <li> <a href="/topics/internet"> Internet </a> </li> <li> <a href="/topics/investor-relations"> Hubungan investasi </a> </li> <li> <a href="/topics/law"> Hukum </a> </li> <li> <a href="/topics/leadership-management"> Kepemimpinan & Manajemen </a> </li> <li> <a href="/topics/lifestyle"> Gaya hidup </a> </li> <li> <a href="/topics/marketing"> Marketing </a> </li> <li> <a href="/topics/mobile"> Mobile </a> </li> <li> <a href="/topics/news-politics"> Berita & Politik </a> </li> <li> <a href="/topics/presentations-public-speaking"> Presentasi & Public Speaking </a> </li> <li> <a href="/topics/real-estate"> Perumahan </a> </li> <li> <a href="/topics/recruiting-hr"> Perekrutan & HR </a> </li> <li> <a href="/topics/retail"> Ritel </a> </li> <li> <a href="/topics/sales"> Penjualan </a> </li> <li> <a href="/topics/science"> Ilmu pengetahuan </a> </li> <li> <a href="/topics/self-improvement"> Perbaikan diri sendiri </a> </li> <li> <a href="/topics/services"> Layanan </a> </li> </ul> </nav> <div class="overlay"></div> <script> is_login = false; var app_url = 'https://text-id.123dok.com'; </script> <script src="https://text-id.123dok.com/assets/text/js/textv2.js?t=20210402112635"></script> <script defer src="https://text-id.123dok.com/assets/frontend_v2/js/libs/lazy_ahihi.js?t=20210402112635"></script> <script> var alert_close_redirect = '1'; var scrolled_screen_show_box = 2; var scrolled_content_show_box = 0.5; /* modal*/ var modal = document.getElementById('myModal'); var span = document.getElementsByClassName("close")[0]; var flag_show_box = false; span.onclick = function () { modal.style.display = "none"; body.style.overflow = "visible"; header.classList.remove('d-none'); }; modal.addEventListener('click', function (e) { if (e.target.id === 'myModal'){ e.stopPropagation(); e.preventDefault(); modal.style.display = "none"; body.style.overflow = "visible"; header.classList.remove('d-none'); } }); function conditionDownloadBar(position) { if (position > lastScrollTop) { download_bar.classList.remove('d-none'); download_bar.classList.add('download-bar-animation'); } else { download_bar.classList.add('d-none'); download_bar.classList.remove('download-bar-animation'); } lastScrollTop = position; } var point_to_show_box = Math.min(window.innerHeight * scrolled_screen_show_box, main.clientHeight * scrolled_content_show_box); var modal_ads = document.querySelector('#modal_ads ins'); window.addEventListener('scroll', function () { if (modal.style.display == "block") { header.classList.add('d-none'); } var top = window.pageYOffset; if (top > 45) { header.classList.add('menu-change'); main.classList.add('main-margin'); } else if (top == 0) { header.classList.remove('menu-change'); main.classList.remove('main-margin'); } scroll_up(top); if (top > point_to_show_box && flag_show_box == false) { flag_show_box = true; modal.style.display = "block"; body.style.overflow = "hidden"; header.classList.add('d-none'); if (modal_ads && modal_ads.dataset.adsbygoogleStatus != 'done'){ (adsbygoogle = window.adsbygoogle || []).push({ element: modal_ads }); } } }); /* handle link-part console.log(document.getElementById('part-desktop')); */ if (window.innerWidth <= 576 && document.getElementById('part-desktop') != null) { var dom_part = document.getElementById('part-desktop').innerHTML; document.getElementById('part-mobile').innerHTML = dom_part; } var count = 0; var show_link_part = document.getElementById('show-link-part'); if (show_link_part != null) { show_link_part.addEventListener('click', function () { count++; var link_part = document.getElementsByClassName('link-part'); link_part[0].classList.toggle('show-hide-part'); link_part[1].classList.toggle('show-hide-part'); if (count % 2 != 0) { show_link_part.innerText = 'Hide'; } else { show_link_part.innerText = 'Show more'; } }); } document.getElementsByClassName("breadcrumb")[0].firstElementChild.classList.add("removePseudo"); document.getElementById("close").addEventListener("click", redirect_document); function redirect_document() { if (alert_close_redirect) { var link = document.getElementById("close").getAttribute("data-link"); window.open(link, "_blank"); } } if (window.innerWidth > 192){ document.addEventListener('DOMContentLoaded', function (e) { stickybits('.anchor_ads', {stickyBitStickyOffset: 5}); }); } // window.lazy_ads_injector_limit = ads_list.length; document.addEventListener('DOMContentLoaded', function (e) { if (window.innerWidth > 192){ stickybits('.anchor_ads', {stickyBitStickyOffset: 5}); } // setTimeout(function () { // ads_inject(document.querySelector('.contents-text'), ads_list); // }, 2000); }); </script> <script> if(window.innerWidth >= 1200) { document.querySelector('#back-to-top').style.cssText = 'right: 50%; margin-right: -180px; bottom: 120px; z-index: 10'; }else if(window.innerWidth >= 996){ document.querySelector('#back-to-top').style.cssText = 'right: 50%; margin-right: -140px; bottom: 120px; z-index: 10'; }else if(window.innerWidth >= 768){ document.querySelector('#back-to-top').style.cssText = 'right: 50%; margin-right: -110px; bottom: 120px; z-index: 10'; } </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-70876774-3"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-70876774-3'); </script><script> document.addEventListener("DOMContentLoaded",function() { setTimeout(function() { if ( typeof(window.google_jobrunner) === "undefined" ) { console.log("ad blocker installed"); gtag('event', 'ads_blocker_installed', { 'method': 'Google', 'event_category': 'ads', }) } else { console.log("no ad blocking found."); } }, 3000); }) </script>  </body> </html>