Free Download PDF Books, HTML XHTML And CSS Bible

HTML XHTML And CSS Bible

CSS HTML HTML CSS HTML CSS ReadOnline XHTML

Summary of Contents

  • Page 1

    actionURI(http://www.freepdf-books.com /?tr-demo):A-PDF Text Replace DEMO: Purchase from www.A-PDF.com to remove the watermarkwww.freepdf-books.com

  • Page 2

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23HTML, XHTML,and CSS Bible3rd EditionBrian Pfaffenberger, Steven M. Schafer,Charles White, Bill KarowWiley Publishing, Inc.iwww.freepdf-books.com

  • Page 3

    www.freepdf-books.com

  • Page 4

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23HTML, XHTML,and CSS Bible3rd EditionBrian Pfaffenberger, Steven M. Schafer,Charles White, Bill KarowWiley Publishing, Inc.iwww.freepdf-books.com

  • Page 5

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23HTML, XHTML, and CSS Bible, 3rd EditionPublished byWiley Publishing, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256www.wiley.comCopyright C2004 by Wiley Publishing, Inc., Indianapolis, IndianaPublished simultaneou...

  • Page 6

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23About the AuthorsBryan Pfaffenberger is the author of more than 75 books on computers and theInternet, including the best-selling Discover the Internet, from IDG Books Worldwide.He teaches advanced professional communic...

  • Page 7

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23CreditsAcquisitions EditorJim MinatelDevelopment EditorMarcia EllettProduction EditorGabrielle NabiTechnical EditorWiley-Dreamtech India Pvt LtdCopy EditorTechBooksEditorial ManagerMary Beth WakefieldVice President &am...

  • Page 8

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23To Miri, I’ll desperately missmy late-night company.Stevevwww.freepdf-books.com

  • Page 9

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23Acknowledgments...............................................Abooksuchasthisishardwork,andonlyasmallportionofthatworkisperformed by the authors. As such, the authors would like to thankthe following:The management team...

  • Page 10

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23Contents at a Glance...............................................Acknowledgments ................................................................. iv 26,Introduction 26,..................................................

  • Page 11

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23viiiContents at a Glance 478,Chapter 478,27: 478,Dynamic 478,HTML 478,with 478,CSS 478,................................................ 478,449 498,Chapter 498,28: 498,Introduction 498,to 498,Server-Side 498...

  • Page 12

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23Contents............................................... 7,Acknowledgments 7,.................................................. 7,iv 26,Introduction 26,....................................................... 26,xxiii...

  • Page 13

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xContents 62,Organizational 62,Elements 62,................................................................... 62,33 63,Tables 63,............................................................................... 63,3...

  • Page 14

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xiContents 124,Creating 124,Graphics 124,......................................................................... 124,95 124,Essential 124,functions 124,...............................................................

  • Page 15

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xiiContents 178,Chapter 178,10: 178,Tables 178,...................................................... 178,149 178,Parts 178,of 178,an 178,HTML 178,Table 178,........................................................

  • Page 16

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xiiiContents 248,Preventing 248,Changes 248,...................................................................... 248,219 250,Fieldsets 250,and 250,Legends 250,.......................................................

  • Page 17

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xivContents 306,CSS 306,Levels 306,1, 306,2, 306,and 306,3 306,. 306,. 306,. 306,.................................................................. 306,277 307,Summary 307,.......................................

  • Page 18

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xvContents 351,Controlling 351,Letter 351,and 351,Word 351,Spacing 351,..................................................... 351,322 353,Specifying 353,Capitalization 353,...........................................

  • Page 19

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xviContents 406,Floating 406,Elements 406,to 406,the 406,Left 406,or 406,Right 406,.................................................... 406,377 407,Defining 407,an 407,Element’s 407,Width 407,and 407,Hei...

  • Page 20

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xviiContents 461,Cross-Browser 461,Compatibility 461,Issues 461,......................................................432 461,Browser 461,detection 461,.................................................................

  • Page 21

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xviii Contents 530,Syndicating 530,Content 530,with 530,RSS 530,. 530,........................................................... 530,501 531,RSS 531,syntax 531,.....................................................

  • Page 22

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xixContents 587,WYSIWYG 587,HTML 587,Editors 587,................................................................. 587,558 587,Microsoft 587,FrontPage 587,.............................................................

  • Page 23

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xxContents 624,Checking 624,for 624,Broken 624,Links 624,................................................................ 624,595 624,The 624,W3C 624,Link 624,Checker 624,..........................................

  • Page 24

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xxiContents 653,Basic 653,Site 653,Components 653,...................................................................624 654,Putting 654,It 654,All 654,Together 654,..................................................

  • Page 25

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xxii Contents 688,Chapter 688,43: 688,Security 688,.................................................... 688,659 688,Understanding 688,the 688,Risks 688,. 688,. 688,. 688,..........................................

  • Page 26

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23Introduction...............................................TheWorldWideWebhascomealongwayfromitshumblebeginnings.MostInternet historians recognize Gopher as the precursor to the Web. Gopher wasa revolutionary search too...

  • Page 27

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xxiv IntroductionBook Organization, Conventions,and FeaturesThe Wiley “Bible” series of books uses several different methods to presentinformation to help you get the most out of it. The book is organized according ...

  • Page 28

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xxvIntroductionTipTips generally are used to provide information that can make your work easier—special shortcuts or methods for doing something easier than the norm.NoteNotes provide additional, ancillary information...

  • Page 29

    P1: FMKWY022-FMWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 200423:23xxviwww.freepdf-books.com

  • Page 30

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:19PARTIIUnderstanding(X)HTML✦✦✦✦In This PartChapter 1Introducing theWeb and HTMLChapter 2What Goes Intoa Web Page?Chapter 3Starting YourWeb Page✦✦✦✦1www.freepdf-books.com

  • Page 31

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:192www.freepdf-books.com

  • Page 32

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1911CH AP T ERIntroducing theWeb and HTML✦✦✦✦In This ChapterIntroducing the WorldWide WebHow the Web WorksDefining HypertextWhere HTML Fits inDefining CSSDefining XHTMLCreating an HTMLDocument✦✦✦✦Thisch...

  • Page 33

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:194Part I ✦ Understanding (X)HTMLinformation, it looks for this information within its file system, and sends out therequested information via the Internet.They all speak a common “language,” called HyperText Trans...

  • Page 34

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:195Chapter 1 ✦ Introducing the Web and HTMLlinks for short), which enable the reader to jump from one hypertext page to another.You may also hear the word hypermedia. A hypermedia system works just likehypertext, except...

  • Page 35

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:196Part I ✦ Understanding (X)HTMLbook displays this bulleted list item with an indentation and other specialformatting.What’s so great about separating structure from presentation? There are severalvery important adva...

  • Page 36

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:197Chapter 1 ✦ Introducing the Web and HTMLHTML 1.0HTML 1.0 was never formally specified by the W3C because the W3C came along toolate. HTML 1.0 was the original specification Mosaic 1.0 used, and it supported fewelem...

  • Page 37

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:198Part I ✦ Understanding (X)HTMLdeprecates any uses of HTML that relate to forcing a browser to format an element acertain way. All formatting has been moved into the style sheets. With formattinginformation strewn thr...

  • Page 38

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:199Chapter 1 ✦ Introducing the Web and HTMLproducing the Web browsers (notably Netscape and Microsoft), and the technology.The W3C pulls together committees with representatives from interested membersand puts the speci...

  • Page 39

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1910 Part I ✦ Understanding (X)HTMLreleased to the public as a proposed recommendation. Members of the W3C have upto six weeks to vote on it—votes can take the form of any one of three choices: yes,yes if certain chan...

  • Page 40

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1911Chapter 1 ✦ Introducing the Web and HTMLFigure 1-2: How a PC browser displays the HTML code.Figure 1-3: The previous text displayed in a browser on a Mac.www.freepdf-books.com

  • Page 41

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1912 Part I ✦ Understanding (X)HTMLwhat part is the content. But would you feel comfortable making changes to thecontent—say, adding another bulleted set of questions and answers? Probably not.With all those codes emb...

  • Page 42

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1913Chapter 1 ✦ Introducing the Web and HTML<li>What does <i>Stay In Touch</i> do?</li><p><i>Stay In Touch</i> allows you to harness the power ofthe World Wide Web to communicat...

  • Page 43

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1914 Part I ✦ Understanding (X)HTMLThanks to CSS, all you have to do is make changes to the single, underlying stylesheet that every page uses, and the entire site’s appearance changes.What does “cascading” mean?I...

  • Page 44

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1915Chapter 1 ✦ Introducing the Web and HTMLHTML 4.01 almost eliminates the need to have an HTML expert perform sitemaintenance. This means HTML 4.01 helps reduce the cost of maintaining your Website. When was the last ...

  • Page 45

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1916 Part I ✦ Understanding (X)HTMLwhatever you normally use to edit text. Essentially, any text editor or editor capableof producing text-only documents can be used to create HTML documents.Writing HTMLWhat else do you...

  • Page 46

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1917Chapter 1 ✦ Introducing the Web and HTMLHTML defines your document’s structure. Then, outside the main body of thedocument (or even in a separate file, if you prefer), you define the appearance ofeach element o...

  • Page 47

    P1: JYSWY022-01WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 200411:1918 Part I ✦ Understanding (X)HTMLSummaryThis chapter covered the basics of HTML and the Web. Before actually creating Webdocuments, it is important to understand the evolution of the technologies behindthe Web, and th...

  • Page 48

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3822CH AP T ERWhat Goes Intoa Web Page?✦✦✦✦In This ChapterSpecifying the DocumentTypeHTML, Head, and BodyTagsStylesMarkup for ParagraphsMarkup for CharactersSpecial CharactersOrganizational ElementsLinking to Other...

  • Page 49

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3820 Part I ✦ Understanding (X)HTML✦ The full DTD can be found at the URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.The Overall Structure: HTML,Head, and BodyAll HTML documents have three, document-level tags i...

  • Page 50

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3821Chapter 2 ✦ What Goes Into a Web Page?Most of the content within the <head> section will not be visible on the renderedpage in the client’s browser. The <title> element determines what the browserdispla...

  • Page 51

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3822 Part I ✦ Understanding (X)HTMLa:link { color: red }a:visited { color: blue }a:active { color: yellow }</style></head><body>... document body...</body></html>Cross-ReferenceStyles are co...

  • Page 52

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3823Chapter 2 ✦ What Goes Into a Web Page?.redline { color:red; text-decoration:line-through; }</style></head><body><h1>An Early Draft of the Declaration of Independence</h1><p>When in...

  • Page 53

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3824 Part I ✦ Understanding (X)HTMLThe following code defines site-styles.css as an external style sheet in thecurrent HTML document:<html><head><LINK rel=“stylesheet” href=“site-styles.css”type=...

  • Page 54

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3825Chapter 2 ✦ What Goes Into a Web Page?Formatted paragraphsThe paragraph tag (<p>) is used to delimit entire paragraphs of text. For example,the following HTML code results in the output shown in Figure 2-3:<...

  • Page 55

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3826 Part I ✦ Understanding (X)HTMLUsing either of the preceding methods results in the paragraph being center-justifiedin the browser.HeadingsHTML supports six levels of headings. Each heading uses a large, usually bol...

  • Page 56

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3827Chapter 2 ✦ What Goes Into a Web Page?The six levels begin with Level 1, highest, most important, and go to Level 6, thelowest, least important. Although there are six predefined levels of headings, youprobably will...

  • Page 57

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3828 Part I ✦ Understanding (X)HTMLList elementsHTML specifies three different types of lists:✦ Ordered lists (usually numbered)✦ Unordered lists (usually bulleted)✦ Definition lists (list items with integrated d...

  • Page 58

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3829Chapter 2 ✦ What Goes Into a Web Page?</ol><ul>Unordered list<li>First unordered item<li>Second unordered item<li>Third unordered item</ul><dl>Definition list<dt>First...

  • Page 59

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3830 Part I ✦ Understanding (X)HTMLPreformatted textOccasionally, you will want to hand format text in your document or maintain theformatting already present in particular text. Typically, the text comes from anothersou...

  • Page 60

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3831Chapter 2 ✦ What Goes Into a Web Page?Figure 2-8: <div> tags are used to delimit large sections of text.Inline Elements: Markup for CharactersThe finest level of markup possible in HTML is at the character lev...

  • Page 61

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3832 Part I ✦ Understanding (X)HTMLFigure 2-9: Inline elements can affect words or even individual characters.has been deprecated in favor of spanning styles (see the Spanning section later inthis chapter). As for the st...

  • Page 62

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3833Chapter 2 ✦ What Goes Into a Web Page?Entities are referenced by using a particular code in your documents. This codealways begins with an ampersand (&) and ends with a semicolon. Three differentways to specify a...

  • Page 63

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3834 Part I ✦ Understanding (X)HTMLTablesHTML tables are very basic, but can be very powerful when used correctly. At theirbase level, tables can organize data into rows and columns. At their highest level,tables can pro...

  • Page 64

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3835Chapter 2 ✦ What Goes Into a Web Page?Figure 2-10: Eleven rows and two columns of data in a table.Figure 2-11: This document uses invisible tables to achieve its layout.www.freepdf-books.com

  • Page 65

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3836 Part I ✦ Understanding (X)HTMLFigure 2-12: Making the table borders visible shows just how many tables areinvolved in laying out the page and how they help constrain the layout.FormsHTML forms provide a method to us...

  • Page 66

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3837Chapter 2 ✦ What Goes Into a Web Page?<br><br><!-- Select list --><b>What is your favorite ice cream?</b><select name=“icecream”><option name=“chocolate”>Chocolate<...

  • Page 67

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3838 Part I ✦ Understanding (X)HTMLwant to include a link to a local government site where additional information couldbe found. A link typically appears as underlined text and is often rendered in adifferent color than ...

  • Page 68

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3839Chapter 2 ✦ What Goes Into a Web Page?You can include images in HTML documents by using the image tag (<img>). Theimage tag includes a link to the image file as well as pertinent information used todisplay the...

  • Page 69

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3840 Part I ✦ Understanding (X)HTMLScriptsHTML is a static method of deploying content—the content is sent out to a clientbrowser where it is rendered and read, but it typically doesn’t change once it isdelivered. Ho...

  • Page 70

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3841Chapter 2 ✦ What Goes Into a Web Page?<LINK rel=“stylesheet” href=“external style sheet name”type=“text/css”><style>... any document specific styles go here ...</style><script>......

  • Page 71

    P1: JYSWY022-02WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:3842www.freepdf-books.com

  • Page 72

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1533CH AP T ERStarting YourWeb Page✦✦✦✦In This ChapterBasic Rules for HTML CodeCreating the Basic StructureDeclaring a Document TypeSpecifying a Document TitleProviding Information toSearch EnginesSetting the Defau...

  • Page 73

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1544 Part I ✦ Understanding (X)HTMLrevolutionary, war, July, 4, 1776”></head><body><h1>TheDeclaration of Independence</h1><p>IN CONGRESS, July 4,1776.</p><p>The unanimous De...

  • Page 74

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1545Chapter 3 ✦ Starting Your Web Pagefollowing example is wrong:<p>The last word is <b>bold</p></b>Note how the bold and paragraph tags overlap at the end of the block. Instead,the bold tag shoul...

  • Page 75

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1546 Part I ✦ Understanding (X)HTMLWithout comments, the nested tables are hard to follow. However, adding a fewcomments allows you to more easily keep track of the nested elements’ purpose:</table> <!-- /Top ...

  • Page 76

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1547Chapter 3 ✦ Starting Your Web Pageto. For example, the following <DOCTYPE> definition specifies the strict HTML 4.01DTD:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/st...

  • Page 77

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1548 Part I ✦ Understanding (X)HTMLProviding Information to Search EnginesThe <head> section of your document can also include <meta> tags. These tags arenot rendered as visible text in the document—they ar...

  • Page 78

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1549Chapter 3 ✦ Starting Your Web PageSetting the Default PathWhen defining links and references in your HTML document, be as exact as possiblewith your references. For example, when referencing a graphic with an <IM...

  • Page 79

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1550 Part I ✦ Understanding (X)HTMLautomatically be redirected to the new page after a three-second wait:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”><html>...

  • Page 80

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1551Chapter 3 ✦ Starting Your Web PageA better practice is to use appropriate styles, typically in an external style sheet.The document background color is set using the background-color property. Forexample, to set the ...

  • Page 81

    P1: JYSWY022-03WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 7, 200421:1552 Part I ✦ Understanding (X)HTML<style>body { background-image: url(path_to_image);}</style>For example, the following style results in grid.jpg being placed as the document’sbackground:<style>body...

  • Page 82

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:27PARTIIIIHTML/XHTMLAuthoringFundamentals✦✦✦✦In This PartChapter 4Lines, LineBreaks, andParagraphsChapter 5ListsChapter 6ImagesChapter 7LinksChapter 8TextChapter 9SpecialCharactersChapter 10TablesChapter 11Page La...

  • Page 83

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2754www.freepdf-books.com

  • Page 84

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2744CH AP T ERLines, LineBreaks, andParagraphs✦✦✦✦In This ChapterLine BreaksNonbreaking SpacesSoft HyphensPreserving FormattingIndentsHeadingsHorizontal RulesGrouping with <div>✦✦✦✦JustastheWebismade...

  • Page 85

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2756 Part II ✦ HTML/XHTML Authoring FundamentalsBer.Long live the king!Fran.Bernardo?Ber.He.Fran.You come most carefully upon your hour.Ber.‘Tis now struck twelve. Get thee to bed, Francisco.Fran.For this relief much ...

  • Page 86

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2757Chapter 4 ✦ Lines, Line Breaks, and ParagraphsFigure 4-1: HTML browsers condense white space in the code to single spaces.Figure 4-2: Paragraph tags control the spacing of lines within and betweenparagraphs in a doc...

  • Page 87

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2758 Part II ✦ HTML/XHTML Authoring Fundamentals<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”><html><head><title>Excerpt From Black Beauty</t...

  • Page 88

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2759Chapter 4 ✦ Lines, Line Breaks, and ParagraphsFigure 4-3: You can control the spacing within a paragraph by modifying the line-heightattribute of the <p>tag.For example, to set the standard paragraph justific...

  • Page 89

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2760 Part II ✦ HTML/XHTML Authoring FundamentalsSince the text is from a play, it follows a particular style:Actor-nameDialogueIf you use a paragraph tag to cause each line break, you’ll end up with output similarto t...

  • Page 90

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2761Chapter 4 ✦ Lines, Line Breaks, and ParagraphsSuppose you were to use the phrase “12 Angry Men.” You would not want a browserto split the “12” and “Angry” across two lines, as shown here:A good example o...

  • Page 91

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2762 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 4-4: Long words can cause problems with fully justifiedtext. Note how the first line is spread out to fill the full line width.Figure 4-5: Optional hyphens are u...

  • Page 92

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2763Chapter 4 ✦ Lines, Line Breaks, and ParagraphsPreserving Formatting—The <pre> ElementSometimes you will want the client browser to interpret your text literally, includingthe white space and forced formattin...

  • Page 93

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2764 Part II ✦ HTML/XHTML Authoring Fundamentals| releaseupdate | Tues, 1/28, 8:18pm|| rolfstatus| 0|| feedupdate| 1069456261|+---------------+-------------------+4 rows in set (0.00 sec)</pre>As you can see in Fi...

  • Page 94

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2765Chapter 4 ✦ Lines, Line Breaks, and Paragraphsindented by half an inch, you would use a style similar to the following:<style type=“text/css”>p { text-indent: .5in; }</style>TipIf you want to have di...

  • Page 95

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2766 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 4-7: Using styles, you can control the indentation of paragraphs.If you want to indent an entire paragraph, use the padding-left and, optionally,the padding-right a...

  • Page 96

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2767Chapter 4 ✦ Lines, Line Breaks, and Paragraphs<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”><html><head><title>Heading Tags</title><...

  • Page 97

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2768 Part II ✦ HTML/XHTML Authoring Fundamentalstags. For example, consider the following style code, which defines the first fourheading levels in relationship to the normal paragraph font:<style type=“text/css...

  • Page 98

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2769Chapter 4 ✦ Lines, Line Breaks, and Paragraphs<hr><p>Chapter 02The Hunt</p><p>Before I was two years old a circumstance happenedwhich I have never forgotten. It was early in the spring;there ...

  • Page 99

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2770 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 4-10: You can control various aspects of the horizontal rule, including its width, itsthickness (height), and the color.Grouping with the <div> ElementNow tha...

  • Page 100

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2771Chapter 4 ✦ Lines, Line Breaks, and Paragraphspassing of a train as the cows and sheep did.</p><p class=“indent-highlight”>Since then I have seen manyhorses much alarmed and restive at the sight or s...

  • Page 101

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2772 Part II ✦ HTML/XHTML Authoring Fundamentals<head><title>Division Borders withDivision Tags</title><style type=“text/css”>.indent-highlight { padding-left: 50px;padding-right: 50px; borde...

  • Page 102

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2773Chapter 4 ✦ Lines, Line Breaks, and ParagraphsTipNote that the border in Figure 4-12 appears at the margins of the document, notat the indent of the paragraphs it surrounds. This is because the style specifiespaddi...

  • Page 103

    P1: JYSWY022-04WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200415:2774www.freepdf-books.com

  • Page 104

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4155CH AP T ERLists✦✦✦✦In This ChapterUnderstanding ListsOrdered (Numbered) ListsUnordered (Bulleted) ListsDefinition ListsNested Lists✦✦✦✦HTMLanditsvariousderivativeswereoriginallymeanttobe able to reprod...

  • Page 105

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4176 Part II ✦ HTML/XHTML Authoring FundamentalsThe ordered and unordered lists have many different display options available:✦ Ordered lists can have their items preceded by the following:•Arabic numbers•Roman num...

  • Page 106

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4177Chapter 5 ✦ Lists<li>In Internet Explorer, open the Web page that displaysthe graphic you wish to use as wallpaper for yourdesktop.</li><li>Right-click on the image to open the context menu.</li&...

  • Page 107

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4178 Part II ✦ HTML/XHTML Authoring Fundamentals<li>Right-click on the image to open the context menu.</li><li>Choose Set as Background to save the image and use itas your desktop wallpaper.</li>&...

  • Page 108

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4179Chapter 5 ✦ Lists✦ lower-roman✦ upper-roman✦ lower-greek✦ lower-alpha✦ lower-latin✦ upper-alpha✦ upper-latin✦ hebrew✦ armenian✦ georgian✦ cjk-ideographic✦ hiragana✦ katakana✦ hiragana-iroh...

  • Page 109

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4180 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 5-3: The list-style-position property controls where the list item numbers/charactersappear—outside or inside the list item margins.Changing the Start Value of Ord...

  • Page 110

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4181Chapter 5 ✦ Lists<style type=“text/css”>ol { counter-reset: list 11; }li { list-style-type: none; }li:before {content: counter(list,decimal) “. ”;counter-increment: list; }</style>This code introd...

  • Page 111

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4182 Part II ✦ HTML/XHTML Authoring FundamentalsUnordered (Bulleted) ListsUnordered lists are similar to numbered lists except that they use bullets instead ofnumbers or letters before each list item. Bulleted lists are ...

  • Page 112

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4183Chapter 5 ✦ Lists<title>Example Unordered List</title></head><body><ul><li>Vanilla</li><li>Chocolate</li><li>Strawberry</li></ul></body>&l...

  • Page 113

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4184 Part II ✦ HTML/XHTML Authoring FundamentalsAs with ordered lists, you can define the list-style-position property, which inthe case of unordered lists controls where the bullet appears—outside or inside theleft m...

  • Page 114

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4185Chapter 5 ✦ ListsOf course, the graphics must be scaled down to “bullet” size and saved in aWeb-friendly format. In this case, the graphics are reduced to 10-20 pixels square andsaved on the root of the Web serve...

  • Page 115

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4186 Part II ✦ HTML/XHTML Authoring FundamentalsNoteA few references state that the closing item tags (</li>) are not necessary inlists. Although most browsers will render the list properly without them, yourcode w...

  • Page 116

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4187Chapter 5 ✦ Lists<dd>Developed by Apple Computer, Inc, for Apple’s OSXoperating system.</dd></dl></body></html>Figure 5-8: Definition lists provide term and definitionpairs for each ...

  • Page 117

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4188 Part II ✦ HTML/XHTML Authoring FundamentalsIn such a case, you would nest an ordered list inside an unordered one, as shown inthe following code:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www....

  • Page 118

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4189Chapter 5 ✦ Listsformatted (indented) to make it easier to identify in the code. Using this method, youcan nest any list within any other list.SummaryThis chapter covered the ins and outs of the three different list ...

  • Page 119

    P1: JYSWY022-05WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4190www.freepdf-books.com

  • Page 120

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4266CH AP T ERImages✦✦✦✦In This ChapterImage Formats for the WebCreating GraphicsInserting an ImageImage AlignmentSpecifying Text to Displayfor NonGraphical BrowsersSize and ScalingImage Borders and MapsAnimated Im...

  • Page 121

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4292 Part II ✦ HTML/XHTML Authoring FundamentalsTable 6-1Uncompressed Image File Size Comparison by ImageDimensions and Number of ColorsDimensions (in Inches)ColorsFile Size1× 129K1× 12569K1× 116.7 million18K2× 2216K...

  • Page 122

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4293Chapter 6 ✦ ImagesJPEGJPEG takes a different approach. JPEG stands for the Joint Photographic ExpertsGroup, the name of the group that created the standard. With JPEG, you get to keepall your colors, but you don’t ...

  • Page 123

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4294 Part II ✦ HTML/XHTML Authoring FundamentalsNoteBetween the two system palettes, there are 216 colors in common. This iscalled the 216-browser-safe palette.By limiting your graphics to colors fromthis palette, you ca...

  • Page 124

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4295Chapter 6 ✦ Imagescolor to match the background color of your images, you can keep your imagessmaller. By anti-aliasing the text against that background to blend the edges into thebackground color, you can achieve th...

  • Page 125

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4296 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 6-1: Adobe Photoshop.Regardless of whether the image is made by hand or based on a photograph orclipart, you need the following capabilities:✦ Reduce the bit-depth...

  • Page 126

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4297Chapter 6 ✦ Imagesthe time. Finding, learning, and using a variety of small packages to solve all yourimaging needs obviously takes longer than learning one package and using it on yourdesktop.Capturing Graphics From...

  • Page 127

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4298 Part II ✦ HTML/XHTML Authoring FundamentalsYou create a progressive JPEG or an interlaced GIF by saving it into this format. InPaint Shop Pro, when you save a file as a GIF file you can choose whether you wantthe ...

  • Page 128

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4299Chapter 6 ✦ ImagesDifferent graphic editing programs handle transparency differently—some assign trans-parency to the background layer, some allow you to pick one color that should be trans-parent, some programs al...

  • Page 129

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42100 Part II ✦ HTML/XHTML Authoring FundamentalsNoteThe <img>tag has no closing tag. However, in XHTML the <img>tag must beclosed:<img alt=“A picture of a cat” src=“cat.jpg” />The src attribute...

  • Page 130

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42101Chapter 6 ✦ Images<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco labori...

  • Page 131

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42102 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 6-5: The various alignment options for images.✦ float—Floats the image to the right or left of the user agent. Note that someuser agents do not support the fl...

  • Page 132

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42103Chapter 6 ✦ Imagestempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit ...

  • Page 133

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42104 Part II ✦ HTML/XHTML Authoring FundamentalsTipGet in the habit of always using the widthand heightattributes with your<img>tags. These attributes allow the user agent to reserve the correct amountof space for...

  • Page 134

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42105Chapter 6 ✦ ImagesAlso note that you can specify only one of the dimensions and have the useragent automatically figure out the other. However, the user agent must thenwait for the entire image to load before progr...

  • Page 135

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42106 Part II ✦ HTML/XHTML Authoring FundamentalsFor example, to define a 4-pixel-wide border around an entire image, you can use thefollowing code:<img alt=“A picture of a cat” src=“cat.jpg”style=“border: ...

  • Page 136

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42107Chapter 6 ✦ ImagesSpecifying an image mapA client-side image map is generally specified within the contents of a <map> tag andlinked to an appropriate <img> tag with the <img> tag’s usemap attri...

  • Page 137

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42108 Part II ✦ HTML/XHTML Authoring FundamentalsThe regions that can be used for the map are within the three icon squares (thewhite squares around the icons). The regions are all rectangular, uniform in size(121 pixels...

  • Page 138

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42109Chapter 6 ✦ ImagesIn the case of the <area> tag, using the alt attribute helps the user determine whatthe clickable area leads to, as shown by the Internet Explorer ToolTip in Figure 6-9.Figure 6-9: The link o...

  • Page 139

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42110 Part II ✦ HTML/XHTML Authoring FundamentalsNoteThe image map example in this chapter is somewhat simplistic, using threeidentical rectangles for its regions. Image maps can be used for more complexpurposes, such as...

  • Page 140

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42111Chapter 6 ✦ ImagesSummaryIn this chapter, you learned the basics of image formats and how you can includethem in your HTML documents. You learned the benefits and drawbacks of eachsupported format, as well as how t...

  • Page 141

    P1: JYSWY022-06WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:42112www.freepdf-books.com

  • Page 142

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:4477CH AP T ERLinks✦✦✦✦In This ChapterWhat’s in a Link?Linking to a Web PageAbsolute versus RelativeLinksLink Targets and TitlesKeyboard Shortcuts andTab OrderCreating an AnchorChoosing Link ColorsThe <link>...

  • Page 143

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44114 Part II ✦ HTML/XHTML Authoring Fundamentalsxyz Inc Home PageReviewxyz SoftwareDeveloped by xyz IncFigure 7-1: The relationship of documents on theWeb via links—the user clicks the link in the reviewdocument to re...

  • Page 144

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44115Chapter 7 ✦ LinksNoteThe rest of this chapter concentrates on linking to other HTML documents on theWeb. However, all the concepts addressed apply when linking to other contenttypes.Linking to a Web PageThe most pop...

  • Page 145

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44116 Part II ✦ HTML/XHTML Authoring FundamentalsAbsolute versus Relative LinksThere are two types of URL styles, and therefore two link types, that you need tounderstand: absolute and relative. You have seen absolute li...

  • Page 146

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44117Chapter 7 ✦ LinksHomeProductsHardwareSoftware./products.html../home.html./products.htmlRoot Directory (/)Products Directory (/products)Figure 7-4: Relative links to parent pages.Relative links are easier to maintain...

  • Page 147

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44118 Part II ✦ HTML/XHTML Authoring FundamentalsTable 7-1 (continued)ValueDescription_parentOpens the linked document in the parent frameset_topOpens the linked document in the main browser window, replacingany and all ...

  • Page 148

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44119Chapter 7 ✦ LinksLink TitlesYou can also title a link, using the title attribute in the anchor tag. This causesmost current browsers to display the text of the title as a ToolTip when the mousehovers over them. For ...

  • Page 149

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44120 Part II ✦ HTML/XHTML Authoring Fundamentalsaccommodate these users by adding additional methods to access links on yourpage.Keyboard shortcutsEach link can be assigned a shortcut key for easy keyboard-only access u...

  • Page 150

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44121Chapter 7 ✦ Links<p>This is the <a href=“http://www.example.com”tabindex=“2”>third link</a>.</p></body></html>NoteAs with most interface elements in HTML, the browser de...

  • Page 151

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44122 Part II ✦ HTML/XHTML Authoring Fundamentals✦ Link—The standard link in the document that is not active, nor visited (seeother modes).✦ Active—The target of the link is active in another browser window.✦ V...

  • Page 152

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44123Chapter 7 ✦ Linksa:active {color: #D53D00;font-family:verdana, palatino, arial, sans-serif;font-size:10pt;font-weight: bold;text-decoration: underline; }a:hover{color: #D53D45;font-family:verdana, palatino, arial, s...

  • Page 153

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44124 Part II ✦ HTML/XHTML Authoring FundamentalsTable 7-2 (continued)AttributeMeaningValue(s)indexglossarycopyrightchaptersectionsubsectionappendixhelpbookmarkRevThe relationship between the targetand the current docume...

  • Page 154

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44125Chapter 7 ✦ LinksThe Link TagYou can use the link tag to provide additional information on a document’srelationship to other documents, independently of whether the current documentactually links to other document...

  • Page 155

    P1: JYSWY022-07WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20049:44126www.freepdf-books.com

  • Page 156

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:4388CH AP T ERText✦✦✦✦In This ChapterMethods of Text ControlBold and Italic TextMonospace (Typewriter)FontsSuperscripts and SubscriptsAbbreviationsMarking Editorial Insertionsand DeletionsGrouping Inline Elementswit...

  • Page 157

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43128 Part II ✦ HTML/XHTML Authoring FundamentalsFor example, if you wanted larger text in a red color, you could use a tag similar tothe following:<font size=“+3” color=“red”>this is larger, red text</fo...

  • Page 158

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43129Chapter 8 ✦ TextFigure 8-1: An example of text using emphasis tags.Table 8-2CSS Text PropertiesPropertyValuesUsecolorColorChange the color of textfontfont-stylefont-variantfont-weightfont-sizeShortcut property for se...

  • Page 159

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43130 Part II ✦ HTML/XHTML Authoring FundamentalsTable 8-2 (continued)PropertyValuesUsefont-styleNormal| italic| obliqueSet font to italicfont-variantNormal| small-capsSet small-capsfont-weightNormal| bold| bolder| lighte...

  • Page 160

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43131Chapter 8 ✦ TextFigure 8-2: Bold and italic tags at work.NoteNot every font has a bold and/or italic variant. When possible, the user agentwill substitute a similar font when bold or italic is asked for but not avail...

  • Page 161

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43132 Part II ✦ HTML/XHTML Authoring FundamentalsTipAgain, the use of styles is preferred over individual inline tags. If you need textrendered in a monospace font, consider directly specifying the font parametersusing st...

  • Page 162

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43133Chapter 8 ✦ TextNote that the expansion of the abbreviation is placed in the <abbr> tag’s titleattribute. Some user agents will display the value of the title attribute when themouse/pointer is over the abbre...

  • Page 163

    P1: KTXWY022-08WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 20047:43134 Part II ✦ HTML/XHTML Authoring FundamentalsGrouping Inline Elements withthe <span> TagWhen using CSS for text formatting, you need a method to code text with theappropriate styles. If you are coding block elem...

  • Page 164

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:4499CH AP T ERSpecialCharacters✦✦✦✦In This ChapterUnderstanding CharacterEncodingsSpecial CharactersEn and em Spaces andDashesCopyright, Trademark, andCurrency SymbolsReal Quotation MarksAccented CharactersArrows a...

  • Page 165

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44136 Part II ✦ HTML/XHTML Authoring FundamentalsHowever, some user agents don’t correctly handle encoding in the HTTP header.If you need to explicitly declare a document’s encoding, you should use anappropriate meta...

  • Page 166

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44137Chapter 9 ✦ Special CharactersTable 9-1Essential EntitiesDecimal EntityMnemonic EntityCharacter&#34;&quot;Double quote mark&#38;&amp;Ampersand&#60;&lt;Less than symbol&#62;&gt;Greater...

  • Page 167

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44138 Part II ✦ HTML/XHTML Authoring FundamentalsCopyright and Trademark SymbolsCopyright and trademark symbols are special symbols that indicate a legalrelationship between individuals (or companies) and text.The Copyri...

  • Page 168

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44139Chapter 9 ✦ Special Characterscurrency symbol (¤). Table 9-4 lists many of the most common currencysymbols.Table 9-4Currency EntitiesDecimal EntityMnemonic EntityCharacter&#162;&cent;The cent symbol (¢)&am...

  • Page 169

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44140 Part II ✦ HTML/XHTML Authoring FundamentalsArrowsA variety of arrow symbols are available as entities. Table 9-6 lists these entities.Table 9-6Arrow EntitiesDecimal EntityMnemonic EntityCharacter&#8592;&lar...

  • Page 170

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44141Chapter 9 ✦ Special CharactersDecimal EntityMnemonic EntityCharacter&#197;&Aring;Latin capital letter A with ring above&#198;&AElig;Latin capital letter AE&#199;&Ccedil;Latin capital letter C...

  • Page 171

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44142 Part II ✦ HTML/XHTML Authoring FundamentalsTable 9-7 (continued)Decimal EntityMnemonic EntityCharacter&#229;&aring;Latin small letter a with ring above&#230;&aelig;Latin small letter ae&#231;&am...

  • Page 172

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44143Chapter 9 ✦ Special CharactersTable 9-8Greek Symbol EntitiesDecimal EntityMnemonic EntityCharacter&#913;&Alpha;Greek capital letter alpha&#914;&Beta;Greek capital letter beta&#915;&Gamma;Gree...

  • Page 173

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44144 Part II ✦ HTML/XHTML Authoring FundamentalsTable 9-8 (continued)Decimal EntityMnemonic EntityCharacter&#950;&zeta;Greek small letter zeta&#951;&eta;Greek small letter eta&#952;&theta;Greek s...

  • Page 174

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44145Chapter 9 ✦ Special CharactersDecimal EntityMnemonic EntityCharacter/Symbol&#8704;&forall;For all&#8706;&part;Partial differential&#8707;&exist;There exists&#8709;&empty;Empty set = n...

  • Page 175

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44146 Part II ✦ HTML/XHTML Authoring FundamentalsTable 9-9 (continued)Decimal EntityMnemonic EntityCharacter/Symbol&#8836;&nsub;Not a subset of&#8838;&sube;Subset of or equal to&#8839;&supe;Supers...

  • Page 176

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44147Chapter 9 ✦ Special CharactersDecimal EntityMnemonic EntityCharacter/Symbol&#176;&deg;Degree sign&#177;&plusmn;Plus-minus sign = plus-or-minussign&#178;&sup2;Superscript two = superscript dig...

  • Page 177

    P1: JYSWY022-09WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:44148 Part II ✦ HTML/XHTML Authoring FundamentalsTable 9-10 (continued)Decimal EntityMnemonic EntityCharacter/Symbol&#8204;&zwnj;Zero width non-joiner&#8205;&zwj;Zero width joiner&#8206;&lrm;Left-...

  • Page 178

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:471010CH AP T ERTables✦✦✦✦In This ChapterParts of an HTML TableTable Width and AlignmentCell Spacing and PaddingBorders and RulesRows and CellsTable CaptionsGrouping RowsBackground ColorsSpanning Columnsand RowsGro...

  • Page 179

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47150 Part II ✦ HTML/XHTML Authoring Fundamentals<tfoot><tr><td colspan=“2”>Table Footer</td></tr></tfoot><tbody><tr><th>Header Cell 1</th><th>Header ...

  • Page 180

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47151Chapter 10 ✦ TablesTable Width and AlignmentTypically, an HTML table expands to accommodate the contents of its cells. Forexample, consider the following code and the resulting tables shown in Figure 10-2:<!DOCTY...

  • Page 181

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47152 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 10-3: Cell contents wrap if a table cannot expand any further.Figure 10-4: A 50% width table occupies 50% of the available width.www.freepdf-books.com

  • Page 182

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47153Chapter 10 ✦ Tables<html><head><title>50% Table Width</title></head><body><p>50% Table Width<br /><table border=“1” width=“50%”><tr><td>Cell ...

  • Page 183

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47154 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 10-5: Tables too wide for their environment can get some help fromscrollbars.between the cell border and its contents. Refer back to Figure 10-1 for therelationship...

  • Page 184

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47155Chapter 10 ✦ TablesFigure 10-6: Cell spacing percentages.Borders and RulesThe border around HTML tables and in between cells can be configured in manyways. The following sections cover the various ways you can con...

  • Page 185

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47156 Part II ✦ HTML/XHTML Authoring Fundamentals<body><p>No Borders<br /><table border=“0”><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell ...

  • Page 186

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47157Chapter 10 ✦ TablesTipBorders are an effective troubleshooting tool when dealing with table problemsin HTML. If you are having trouble determining what is causing a problem ina table, try turning on the borders to b...

  • Page 187

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47158 Part II ✦ HTML/XHTML Authoring Fundamentalspseudocode:<table><tr> row1 </tr><tr> row2 </tr><tr> row3 </tr><tr> row4 </tr><tr> row5 </tr></table&g...

  • Page 188

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47159Chapter 10 ✦ TablesFor an example of how baseline vertical alignment differs from bottom alignment,consider the two tables in Figure 10-8.Figure 10-8: Baseline alignment aligns the baseline of the text.If you use th...

  • Page 189

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47160 Part II ✦ HTML/XHTML Authoring FundamentalsYou can also use table header tags (<th>)todefine columns that are headers for thecolumns. Expanding on the previous example, the following adds column headers:<...

  • Page 190

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47161Chapter 10 ✦ TablesTable 10-4Cell AttributesAttributeDefinitionAbbrAn abbreviated form of the cell’s contents. User agents can use theabbreviation where appropriate (speaking a short form of the contents,displayi...

  • Page 191

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47162 Part II ✦ HTML/XHTML Authoring FundamentalsResolution</th><th>Frequency</th></tr><tr><td>640</td><td>480</td><td>60 to 120 Hz</td></tr><tr&...

  • Page 192

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47163Chapter 10 ✦ TablesNote that the <caption> tag must appear immediately after the <table> tag.Captions typically appear centered above the table to which they areattached—although different user agents ...

  • Page 193

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47164 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 10-10: The three table sections (header, body, footer) can be setoff by custom rules.<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR...

  • Page 194

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47165Chapter 10 ✦ Tables<td>1</td><td>10</td><td>0</td><td>2</td></tr><tr><td>2</td><td>12</td><td>4</td><td>1</td&...

  • Page 195

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47166 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 10-11: Use the background-color CSS property to control tableelement backgrounds.Spanning Columns and RowsIt is possible to span data cells across multiple columns ...

  • Page 196

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47167Chapter 10 ✦ TablesFigure 10-12: You can span cells across both columns and rows.<tr><!-- First cell is the span cell --><td>29</td><td>B</td><td>F</td><td>A<...

  • Page 197

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47168 Part II ✦ HTML/XHTML Authoring Fundamentals<tr><!-- First cell is the span cell --><td>23</td><td>F</td><td>F</td><td>C</td><td>C</td></tr&...

  • Page 198

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47169Chapter 10 ✦ Tables<th colspan=“2” width=“150”>Passive/Aggressive</th></tr><tr align=“center”><!-- Individual column headers --><th>Respondent</th><th>A<...

  • Page 199

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47170 Part II ✦ HTML/XHTML Authoring Fundamentals(align, valign, width, and so on). Any columns defined by the <colgroup> willinherit the formatting contained in the <colgroup> tag.To define columns in a gr...

  • Page 200

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47171Chapter 10 ✦ Tables<col></col></colgroup>...The <col> tag follows similar rules to that of the <colgroup> tag, namely thefollowing:✦ Empty tags (those without explicit formatting) are...

  • Page 201

    P1: JYSWY022-10WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:47172www.freepdf-books.com

  • Page 202

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:11111CH AP T ERPage Layoutwith Tables✦✦✦✦In This ChapterRudimentary Formattingwith TablesReal-World ExamplesFloating PageOdd Graphic and TextCombinationsNavigational Menus andBlocksMultiple Columns✦✦✦✦Table...

  • Page 203

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1174 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 11-1: A rudimentary form using spaces for layout purposes.A simple table can help better align the elements in this form, as shown in thefollowing code and Figure 11...

  • Page 204

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1175Chapter 11 ✦ Page Layout with Tables</table></form></body></html>Figure 11-2: Aligning the labels and fields in a form using a simple table.However, this serves only to line up the labels and...

  • Page 205

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1176 Part II ✦ HTML/XHTML Authoring Fundamentals<td><p><input type=“radio” name=“20to30”value=“20to30”></p></td><td><p><input type=“radio” name=“31to40”val...

  • Page 206

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1177Chapter 11 ✦ Page Layout with TablesEven though these examples are fairly small in scope, it should be easy to seethe power and flexibility tables can lend to alignment, formatting, and even pagelayout.Real-World Ex...

  • Page 207

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1178 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 11-5: A corporate Web site with the tables made visible.Figure 11-6: Another popular layout, floating page and multiple columns of content.www.freepdf-books.com

  • Page 208

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1179Chapter 11 ✦ Page Layout with TablesFigure 11-7: The floating page and two-column layout with visible tables.Floating PageThe floating page layout (as shown in Figures 11-6 and 11-7) has become quitepopular and is ...

  • Page 209

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1180 Part II ✦ HTML/XHTML Authoring Fundamentalsstyle=“background-color: black;margin: 0 auto;”><tr><td><!-- Floating page --><!-- (padding = page margin) --><table border=“0” cellpa...

  • Page 210

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1181Chapter 11 ✦ Page Layout with TablesTipNote the comments in the code delimiting the individual tables and contentareas. It is a good practice to follow standard code formatting (indentation,liberal white space, and s...

  • Page 211

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1182 Part II ✦ HTML/XHTML Authoring FundamentalsContinued✦ CSS is more exact than tables, allowing your document to be viewed as you intended,regardless of the browser window.✦ Keeping track of nested tables can be a...

  • Page 212

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1183Chapter 11 ✦ Page Layout with TablesFigure 11-10: The various pieces of the header graphic.A table with no padding and no spacing is used to put the pieces back together into acomplete image while allowing text to ...

  • Page 213

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1184 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 11-11: The completed layout in the table.<td width=“25%”><a href=“archive/index.html” onfocus=“this.blur()”onMouseOver=“archive.src=’images/...

  • Page 214

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1185Chapter 11 ✦ Page Layout with Tables<a href=“about/index.html” onfocus=“this.blur()”onMouseOver=“about.src=’images/a_punch_on.gif’”onMouseOut=“about.src=’images/a_punch_off.gif’”><img...

  • Page 215

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1186 Part II ✦ HTML/XHTML Authoring Fundamentals</td><td><p>Nav_1</p></td></tr><tr><td><p>Nav_2</p></td></tr><tr><td><p>Nav_3</...

  • Page 216

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1187Chapter 11 ✦ Page Layout with TablesMultiple ColumnsAs covered in Chapter 10, you can use tables to position elements in columns. Thistechnique can be used for a variety of layout purposes:✦ Providing navigation ba...

  • Page 217

    P1: JYSWY022-11WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:1188 Part II ✦ HTML/XHTML Authoring FundamentalsNoteOne caveat to creating columns with tables is that the content doesn’t auto-matically wrap from one column to the next (like in a newspaper). You mustsplit the text b...

  • Page 218

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21212CH AP T ERFrames✦✦✦✦In This ChapterFrames OverviewFramesets and FrameDocumentsTargeting Links to FramesNested FramesetsInline Frames✦✦✦✦Severalyearsago,almosteverydocumentontheWebcontained frames. The ...

  • Page 219

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2Figure 12-1: Applications such as Windows Explorer use multiple panes to display a varietyof information and controls.Figure 12-2: A long document uses scroll bars to allow the user to see the entire document.190www.freep...

  • Page 220

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2191Chapter 12 ✦ FramesFigure 12-3: When the document is scrolled, the entire view—including the navigation baron the left—is moved.Now take a look at Figure 12-4. Each element—the top banner, the navigation bar, a...

  • Page 221

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2192 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 12-4: Frames allow one region to scroll while others remain static....</head><frameset attributes><frame attributes></frame><frame attribu...

  • Page 222

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2193Chapter 12 ✦ FramesThe <frameset> tagThe <frameset> tag defines the layout of the frames in the document. It does so byspecifying whether the frames should be laid out in columns or rows and what eachcol...

  • Page 223

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2194 Part II ✦ HTML/XHTML Authoring FundamentalsUsing only these two attributes results in a frame with minimal margins, no borders,and automatic scroll bars. More information on controlling these attributes of theframe ...

  • Page 224

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2Figure 12-5: Without borders, the frame divisions are hard to distinguish, which may lendwell to a seamless page design.Figure 12-6: Frame borders can help your users understand the layout of your documentand where the fr...

  • Page 225

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2196 Part II ✦ HTML/XHTML Authoring FundamentalsThe scrolling attribute controls whether the frame will display scroll bars or not.The default setting, auto, allows the user agent to decide—if the frame contains toomuc...

  • Page 226

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2197Chapter 12 ✦ FramesDrag border to new positionFigure 12-8: Dragging the curser resizes the frames accordingly.Scripting languages can use the document’s frame collection to target a frame. Forexample, JavaScript ca...

  • Page 227

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2198 Part II ✦ HTML/XHTML Authoring FundamentalsTable 12-2Possible Values for the Target AttributeValueUseframe nameDisplays the content in the frame specified by frame_name_blankOpen a new window to display the content...

  • Page 228

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2199Chapter 12 ✦ Frames<html><head><title>Simple Frame Navigation</title></head><framesetcols = “20%,*”><frame name=“nav” src=“navigation.html”></frame><fram...

  • Page 229

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2200 Part II ✦ HTML/XHTML Authoring Fundamentalsaugue duis dolore te feugaitnulla facilisi. Lorem ipsum dolor sitamet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreetdolore magna aliquam e...

  • Page 230

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2201Chapter 12 ✦ Frames<framesetcols = “30%,*”><frame name=“nav” src=“navigation.html”></frame><frame name=“content” src=“home.html”></frame></frameset></framese...

  • Page 231

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2202 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 12-11: Inline frames define separate scrollable regions truly inline within thedocument.The <iframe> tag has a handful of additional attributes. These are lis...

  • Page 232

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2203Chapter 12 ✦ FramesAttributeValue(s)Useheightpixels %The height of the framelongdescurlA URL to a document containing thelong description of the framemarginheightpixelsThe size of the internal top andbottom margins o...

  • Page 233

    P1: KOAWY022-12WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:2204 Part II ✦ HTML/XHTML Authoring Fundamentals<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in he...

  • Page 234

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:481313CH AP T ERForms✦✦✦✦In This ChapterUnderstanding FormsInserting a FormForm Field TypesTab Order and KeyboardShortcutsPreventing ChangesFieldsets and LegendsForm Scripts and ScriptServices✦✦✦✦HTML’sso...

  • Page 235

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48206 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 13-1: A simple HTML form.<input type=“text” name=“fname” id=“fname”size=“20”><br><label for=“lname”>Last Name: </label>&...

  • Page 236

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48207Chapter 13 ✦ Formsinterested in? </label><br><select name=“prod[]” id=“products” multiple=“multiple”size=“4”><option id=“MB”>Motherboards<option id=“CPU”>Process...

  • Page 237

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48208 Part II ✦ HTML/XHTML Authoring Fundamentals<!-- Image --><input type=“image” name=“Coupon” src=“coupon.jpg”><!-- Hidden field --><input type=“hidden” name=“referredby” valu...

  • Page 238

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48209Chapter 13 ✦ FormsThe data appears after the question mark and is in name/value pairs. For example,the name id has the value of 45677, and the name data has the value ofTaarna.NoteIn most cases, the name corresponds...

  • Page 239

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48210 Part II ✦ HTML/XHTML Authoring FundamentalsField LabelsThe <label> tag defines textual labels for form fields. The <label> tag has thefollowing format:<label for=“id_of_related_tag”>text_lab...

  • Page 240

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48211Chapter 13 ✦ Forms<p>Password: <input type=“password” name=“password” value=“”size=“20” maxlength=“20”></p>CautionThe password field only visibly obscures the data to help stop...

  • Page 241

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48212 Part II ✦ HTML/XHTML Authoring FundamentalsThe checkbox field has the following format:<input type=“checkbox” name=“field_name” [checked=“checked”]value=“value_if_selected”>As you can see, o...

  • Page 242

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48213Chapter 13 ✦ Forms<option>Thursday<option>Friday<option>SaturdayOccasionally, you might want to group options of a list together for clarity. For thisyou use <optgroup> tags. The <optgroup...

  • Page 243

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48214 Part II ✦ HTML/XHTML Authoring FundamentalsCombining all three tags to create a list would resemble the following code:<p>Select the days you are available:<select name=“AvailDays” size=“5” multipl...

  • Page 244

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48215Chapter 13 ✦ FormsFigure 13-3: You can set a default value for the <textarea> tag by placing contentbetween the open and close tags.Note that the text entered into the <textarea> field wraps within the ...

  • Page 245

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48216 Part II ✦ HTML/XHTML Authoring FundamentalsOther than not being visibly displayed, hidden fields are like any other field. Hiddenfields are used mostly for tracking data. For example, in a multipage form, a user...

  • Page 246

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48217Chapter 13 ✦ Forms<input type=“button” name=“BuyNow”value=“Buy Now!”>Buttons by themselves, however, are useless on a form. To have the button actuallydo something, you will need to link it to a sc...

  • Page 247

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48218 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 13-5: The file field allows a user to send a local file.This means your <form> tag should resemble the following:<form action=“form_handler” method=...

  • Page 248

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48219Chapter 13 ✦ FormsThe value attribute for both tags is optional—if this attribute is omitted, thebuttons will display default text (usually “Submit” and “Reset,” but is ultimatelydetermined by the user age...

  • Page 249

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48220 Part II ✦ HTML/XHTML Authoring FundamentalsYou can add the readonly attribute to text fields to keep the user from being able toedit the data contained therein.The disabled attribute effectively disables a control...

  • Page 250

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48221Chapter 13 ✦ Forms<form action=“formhandler.php” method=“post”><table cellspacing=“10” width=“600”><tr><td width=“25%”><p>Customer Code (readonly):</p></td&...

  • Page 251

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48222 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 13-7: Grouping controls allows a user tobetter understand a form’s organization. This isstandard in GUI interfaces, as demonstrated in thisWindows Internet Explor...

  • Page 252

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48223Chapter 13 ✦ FormsFigure 13-8: The <fieldset>tag can help add organization to your forms.There are many ways to construct a form handler, but the usual method is by using aserver-side programming language to ...

  • Page 253

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48224 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 13-9: The <legend>tag can add captions to your fieldsets.Download a handlerSeveral sites on the Internet have generic form handlers available. One of myfavor...

  • Page 254

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48225Chapter 13 ✦ FormsSummaryThis chapter showed you the particulars of HTML forms. It demonstrated how toinclude them in your documents and what each form tag can accomplish. The nexttwo chapters introduce multimedia c...

  • Page 255

    P1: JYSWY022-13WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48226www.freepdf-books.com

  • Page 256

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:481414CH AP T ERMultimedia✦✦✦✦In This ChapterIntroducing MultimediaObjectsMultimedia Plug-ins andPlayersAnimationsVideo ClipsSoundsSlide Shows✦✦✦✦MultimediaontheWebhasgrownup.Youcanseefull-length movies on ...

  • Page 257

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48228 Part II ✦ HTML/XHTML Authoring Fundamentalsbut it’s usually a version or so behind the latest Flash players). Instead, the plug-infor Flash needs to be installed. However, Macromedia, the developer of Flash, hasm...

  • Page 258

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48229Chapter 14 ✦ Multimediabrowser window (although it can). Instead, it spawns a window of the playerapplication that plays the media.✦ Animations—can be generated by bit-map-based (paint) applications, such asFire...

  • Page 259

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48230 Part II ✦ HTML/XHTML Authoring FundamentalsTable 14-1Attributes of the Object ElementAttribute NameHTML Standard and Descriptionarchive(optional)(HTML 4.0) A space-separated list of URIs for archivesof classes and ...

  • Page 260

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48231Chapter 14 ✦ MultimediaYou can also use child param elements within an object element to passparameters to the multimedia object. These parameters are generally like little bitsof helpful information that help fine...

  • Page 261

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48232 Part II ✦ HTML/XHTML Authoring FundamentalsListing 14-1: (continued)<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”lang=“en”><head><meta http-equiv=“Content-Type” content=“...

  • Page 262

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48233Chapter 14 ✦ MultimediaHow the Eolas Lawsuit Will Affect YouAs this book was being written, Microsoft was trying to deal with losing a $521 million patentinfringement lawsuit filed by Eolas, a company founded by Mi...

  • Page 263

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48234 Part II ✦ HTML/XHTML Authoring Fundamentals✦ Windows Media Player✦ Adobe Acrobat ReaderFlashFlash, which has become arguably the most prevalent multimedia format, began lifeas a plug-in for something called Fut...

  • Page 264

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48235Chapter 14 ✦ MultimediaFigure 14-1: A RealOne player accessing the main Real portal.This links to the following file and opens up a Media Player:<ASX version = “3.0”><TITLE> ASX Demo</TITLE>&l...

  • Page 265

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48236 Part II ✦ HTML/XHTML Authoring FundamentalsThe feature set is similar to RealOne and Windows Media Player. Like RealOne, youcan create media shows for QuickTime using SMIL, as shown at the end of this chapter.Anima...

  • Page 266

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48Figure 14-2: The first frame of an animation built in Fireworks.Figure 14-3: To build the second frame, you simply add the frame using the Frames andHistory palette.237www.freepdf-books.com

  • Page 267

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48238 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 14-4: Changing the time interval between frame changes.Figure 14-5: Transitioning between one frame of a completed animated advertisingbanner and another, part one....

  • Page 268

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48239Chapter 14 ✦ MultimediaFigure 14-6: Transitioning between one frame of a completed animated advertising bannerand another, part two.Creating a Flash fileCreating a Flash file is not so easy. Flash is enormously po...

  • Page 269

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48240 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 14-7: A Flash animation in action.Video ClipsThere are three major types of video:✦ MPEG (short for Motion Picture Experts Group), which includes video versionsof...

  • Page 270

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48241Chapter 14 ✦ Multimediaso you should at a minimum link to the page that contains the embedded video, andthen embed the video into that linked page. You can also embed video inpresentations made with Flash MX and abo...

  • Page 271

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48242 Part II ✦ HTML/XHTML Authoring FundamentalsNeedless to say, MP3 has surpassed these other formats by a wide margin inpopularity.You can also include background sound to an Internet Explorer page using thebgsound el...

  • Page 272

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48243Chapter 14 ✦ MultimediaFigure 14-8: The General Options tab in PowerPoint’s Optionsdialog box.directory in its entirety to your server so you don’t have to worry about managingfiles. When you’re done, click P...

  • Page 273

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48244 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 14-9: PowerPoint’s Save As Web Page... dialog box.Figure 14-10: PowerPoint’s Publish As Web Page dialog box.www.freepdf-books.com

  • Page 274

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48245Chapter 14 ✦ MultimediaFigure 14-11: The Web Options dialog box.✦ Files✦ Pictures✦ Encodings✦ FontsEach of these options is briefly explained in the following sections.NoteThese specific instructions perta...

  • Page 275

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48246 Part II ✦ HTML/XHTML Authoring Fundamentalsbest to leave this unchecked unless you’re on a corporate intranet that relies on MSproducts.You should also be sure to choose the option for resizing graphics to fit a...

  • Page 276

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48247Chapter 14 ✦ Multimedialong time ago, VML competed with Scalable Vector Graphics Language (SVG) as astandard, but the W3C chose SVG, which is also covered briefly in this chapter.This tab has two additional options...

  • Page 277

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48248 Part II ✦ HTML/XHTML Authoring FundamentalsWeb interfaces is 800× 600 (pixels), so that’s a good one to choose if you’retargeting a large cross-browser audience.Choosing an encoding in the Encoding tabThe defa...

  • Page 278

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48249Chapter 14 ✦ Multimedialook like attributes, but they’re actually namespace declarations that bind elementsto a specific type of application, in this case, MS Office).Listing 14-2: Under the Hood of a PowerPoint...

  • Page 279

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48250 Part II ✦ HTML/XHTML Authoring FundamentalsListing 14-2: (continued)var ver = 0, appVer = navigator.appVersion, msie =appVer.indexOf( “MSIE ” )var msieWin31 = (appVer.indexOf( “Windows 3.1” ) >= 0),isMac...

  • Page 280

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48251Chapter 14 ✦ MultimediaFigure 14-15: The OpenOffice HTML Export wizard.The next two “Publication type” options are Automatic and Webcast. If you chooseAutomatic, the wizard changes its appearance, as shown in F...

  • Page 281

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48252 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 14-16: The HTML Export wizard changes its appearance depending on thePublication type you choose.Figure 14-17: The HTML Export Wizard displays server-side scripting...

  • Page 282

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48253Chapter 14 ✦ Multimediause it to create slide shows, or as a presentation layer for media players such asRealOne or QuickTime (but not for Windows Media Player). You can hand code aSMIL document, keeping in mind XML...

  • Page 283

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48254 Part II ✦ HTML/XHTML Authoring Fundamentals6. You can also use absolute positioning to position elements within the mediaplayer’s screen. Absolute positioning in SMIL uses the same concepts asabsolute positioning...

  • Page 284

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48255Chapter 14 ✦ Multimedia9. The resulting presentation is shown in Figure 14-18. You can put any number ofmedia objects in place of that SVG file, such as videos and even text.Figure 14-18: A simple SMIL-based presen...

  • Page 285

    P1: JYSWY022-14WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:48256 Part II ✦ HTML/XHTML Authoring FundamentalsTable 14-3 (continued)Media TagRealOneQuickTimeGriNSMicrosoft Wav audioYesYesYesSun Audio audioYesYesYesSun Audio Zipped audioNoYesNoMP3 audioYesYesNoPlain textYesYesYesRe...

  • Page 286

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:211515CH AP T ERScripts✦✦✦✦In This ChapterClient-Side versusServer-Side ScriptingSetting the Default ScriptingLanguageIncluding a ScriptCalling an External ScriptTriggering Scripts withEventsHiding Scripts from Old...

  • Page 287

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21258 Part II ✦ HTML/XHTML Authoring FundamentalsCommon Gateway Interface, the first interface for server-side Web scripting.Server-side scripts impose more load on the server, but generally don’tinfluence theclient...

  • Page 288

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21259Chapter 15 ✦ ScriptsFor example, if you are using JavaScript, your script tag would resemble thefollowing:<script type=“text/javascript”>NoteThe W3C recommends that you specify the default script type usin...

  • Page 289

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21260 Part II ✦ HTML/XHTML Authoring Fundamentals<script> tag to specify that the script content can be found in that file. Forexample, suppose you want to include the following script in multiple documents:functi...

  • Page 290

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21261Chapter 15 ✦ ScriptsAttributeTrigger UseOnfocusWhen item(s) enclosed in tag receive focusOnloadWhen the document finishes loading (valid only in <body>tag)OnunloadWhen the document is unloaded—when the user...

  • Page 291

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21262 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 15-1: Two images for use as a button.Combining onmouseover, onmouseout, and onclick events, you can easily createa button that reacts when the mouse is over it and ...

  • Page 292

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21263Chapter 15 ✦ Scriptsdocument.images(imageid).src =dname;}</script></head><body><p><img alt=“Home page” id=“homebutton”src=“home-off.jpg”onmouseover=“activate(‘home’)”on...

  • Page 293

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21264 Part II ✦ HTML/XHTML Authoring FundamentalsFigure 15-3: The button is changed to active (on)when the mouse is over it.JavaScript code for the onclick attribute is contained directly in the value of theattribute—b...

  • Page 294

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21265Chapter 15 ✦ ScriptsFor example, the following structure will effectively hide the scripts within the<script> tag:<script type=“text/javascript”><!-- hide scripts from older browsers--- Script con...

  • Page 295

    P1: JYSWY022-15WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200413:21266www.freepdf-books.com

  • Page 296

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27PARTIIIIIIControllingPresentationwith CSS✦✦✦✦In This PartChapter 16IntroducingCascading StyleSheetsChapter 17Creating StyleRulesChapter 18FontsChapter 19Text FormattingChapter 20Padding,Margins, andBordersChapte...

  • Page 297

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27268www.freepdf-books.com

  • Page 298

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:271616CH AP T ERIntroducingCascadingStyle Sheets✦✦✦✦In This ChapterCSS OverviewStyle RulesStyle Rule LocationsUnderstanding the StyleSheet CascadeThe CSS Box FormattingModelCSS Levels 1, 2, and 3✦✦✦✦Thefi...

  • Page 299

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27270 Part III ✦ Controlling Presentation with CSSto red. This is the same as using the following code throughout the document,wherever <h1> elements are used:<h1><font color=“red”>Heading Text<...

  • Page 300

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27271Chapter 16 ✦ Introducing Cascading Style SheetsYou can specify multiple selectors to apply to the same style definition—youseparate the selectors with commas. For example, if you wanted all heading tags(1 throug...

  • Page 301

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27272 Part III ✦ Controlling Presentation with CSSTo link an external style sheet with a document, use the <link> tag in the <head> ofthe document to which you want the styles applied. The <link> tag h...

  • Page 302

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27273Chapter 16 ✦ Introducing Cascading Style SheetsSeveral layers of style definitions can apply to any document. Those layers areapplied in the following order:1. The user agent settings (typically, the user is able ...

  • Page 303

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27274 Part III ✦ Controlling Presentation with CSSIn addition, a document may have multiple instances of linked style sheets or<style> elements. In such cases, the sheets are applied in order, with subsequentdefi...

  • Page 304

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27275Chapter 16 ✦ Introducing Cascading Style SheetsPadding is the distance between the outside edges of the element and the border.The border is a line or ridge. The margin is the distance between the border and theout...

  • Page 305

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27276 Part III ✦ Controlling Presentation with CSSGet used to seeing the -top, -right, -bottom, and -left additions to propertynames. This is how all box-related properties are specified.Suppose you want to define you...

  • Page 306

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27277Chapter 16 ✦ Introducing Cascading Style Sheetsare as follows:✦ none✦ dotted✦ dashed✦ solid✦ double✦ groove✦ ridge✦ inset✦ outsetOr, if you want to create a border that is the same on all four sid...

  • Page 307

    P1: FRUWY022-16WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200419:27278 Part III ✦ Controlling Presentation with CSSdramatically. It’s always best to test your implementation on target user agentsbefore widely deploying your documents.SummaryThis chapter introduced you to the subjec...

  • Page 308

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:181717CH AP T ERCreating StyleRules✦✦✦✦In This ChapterUnderstanding SelectorsUnderstanding InheritancePseudo-ClassesPseudo-ElementsShorthand ExpressionsProperty Value Metrics✦✦✦✦Thefirststeptounderstanding...

  • Page 309

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18280 Part III ✦ Controlling Presentation with CSSMatching elements by nameThe easiest selector to understand is the plain element selector, as in the followingexample:h1 { color: red; }Using the actual element name (h1)...

  • Page 310

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18281Chapter 17 ✦ Creating Style Rulesthe dark background area to have light text. You could then use the class attribute inselect elements within those areas to ensure that the appropriate styles wereapplied.To specify ...

  • Page 311

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18282 Part III ✦ Controlling Presentation with CSSFor example, if you want to match any table with a border attribute set to 3, youcould use this definition:table[border=“3”]You can also match elements that contain ...

  • Page 312

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18283Chapter 17 ✦ Creating Style Rules<html><body><div class=“div1”><h1>Heading 1</h1><table><tr><td>Cell 1</td><td>Cell 2</td></tr><tr>&l...

  • Page 313

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18284 Part III ✦ Controlling Presentation with CSSAncestors and descendentsAncestors and descendents are elements that are linked by lineage, no matter thedistance. For example, in Figure 17-1 the list elements under div...

  • Page 314

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18285Chapter 17 ✦ Creating Style RulesInheritance is the default action unless an element has the same attribute defineddifferently. For example, the following definitions result in all elements, except forparagraphs w...

  • Page 315

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18286 Part III ✦ Controlling Presentation with CSSFor example, the following definition will cause all unvisited links in the document tobe rendered in blue, visited links in red, and when hovered over, green::link { co...

  • Page 316

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18287Chapter 17 ✦ Creating Style RulesNoteThe pseudo-elements :beforeand :afterare covered later in this chapterin the Pseudo-elementssection.The :lang selectors will apply to all elements in the document. However, not a...

  • Page 317

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18288 Part III ✦ Controlling Presentation with CSSFigure 17-2: :first-linepseudo-element can be used to affect only thefirst line of elements.NoteUse of the :first-linepseudo-element is somewhat hindered due to thelim...

  • Page 318

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18289Chapter 17 ✦ Creating Style Rules<title>Drop cap formatting</title><style type=“text/css”>p.dropcap:first-letter { font-size: 3em;font-weight: bold; float: left;border: solid 1px black; paddi...

  • Page 319

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18290 Part III ✦ Controlling Presentation with CSSThe:lang pseudo-class, to add quote marks to the beginning and ending of<blockquote> elements:blockquote:before { content: ‘“’; }blockquote:after { content: ...

  • Page 320

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18291Chapter 17 ✦ Creating Style RulesShorthand ExpressionsCSS supports many properties for fine control over elements. For example, thefollowing properties all apply to borders:✦ border✦ border-collapse✦ border-s...

  • Page 321

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18292 Part III ✦ Controlling Presentation with CSSborder-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: black;border-left-width: 2px;border-left-style: dashed;border-left-color: red;}Figure 17-5: A par...

  • Page 322

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18293Chapter 17 ✦ Creating Style Rulesborder-right: 2px dashed red;border-left: 2px dashed red;}The preceding definition first sets all the sides to the same width, style, and color.Then the left and right are set to t...

  • Page 323

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18294 Part III ✦ Controlling Presentation with CSS✦ Time values (seconds (s) and milliseconds (ms))—used with aural style sheets✦ Frequencies (Hertz (Hz) and kilo Hertz (kHz))—used with aural style sheets✦ Text...

  • Page 324

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18295Chapter 17 ✦ Creating Style RulesFigure 17-6: Using the em and percentage metrics, you can defineelements to be a relative size, driven by the elements around them.SummaryThis chapter rounded out the basics of CSS....

  • Page 325

    P1: JYSWY022-17WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:18296www.freepdf-books.com

  • Page 326

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:581818CH AP T ERFonts✦✦✦✦In This ChapterWeb Typography BasicsWorking with Font StylingAttributesDownloading FontsAutomatically✦✦✦✦Irememberworkingwithanaward-winningprintdesignerin Chicago who was so resist...

  • Page 327

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58298 Part III ✦ Controlling Presentation with CSSemsquarebaselinedescent(Maximum unaccented depth)Height of Uppercase GlyphHeight of Lowercase Glyphem square grid:TrueType, OpenType: 2048 divisionsType 1 PostScript: 100...

  • Page 328

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58299Chapter 18 ✦ FontsYou can see these attributes at work in the following example:<font size=“1” face=“Helvetica, Arial, Verdana, sans-serif”color=“blue” lang=“en-US” class=“.small” style=“fon...

  • Page 329

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58300 Part III ✦ Controlling Presentation with CSSYou’ll notice several things about Listing 18-1 and Figure 18-2. First, no matter whatfonts you have installed on your system, if you’re testing in a modern browser, ...

  • Page 330

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58301Chapter 18 ✦ FontsThe right way to describe fontsIf you examine Figure 18-4 and Listing 18-2, which creates the screen rendered in thatfigure, you’ll immediately see the benefits of working with the right way of...

  • Page 331

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58302 Part III ✦ Controlling Presentation with CSSListing 18-2: (continued).16pixels {font-size: 16px;}.17pixels {font-size: 17px;}.18pixels {font-size: 18px;}.sans-serif {font-family: Frutiger, Arial, Helvetica, sans-se...

  • Page 332

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58303Chapter 18 ✦ FontsWorking with Font Styling AttributesThere are several styling attributes to control such characteristics as font families,sizes, bolding, and spacing.Naming font families using CSSAs I’ve shown, ...

  • Page 333

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58304 Part III ✦ Controlling Presentation with CSSListing 18-3: (continued)<p>This uses a <spanclass=“myFontClass”>classselector</span></p></body></html>The first bolded line show...

  • Page 334

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58305Chapter 18 ✦ FontsmyFontClass {font-family: Arial, Helvetica, sans-serif}Using this font will render a sans-serif font on the vast majority of modern browsers.To understand what a font family is, consider what a fon...

  • Page 335

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58306 Part III ✦ Controlling Presentation with CSSThe preceding code fragment results in the following in a browser:Emphasizing a point with the em element or the i element.If you want to really be sure even the earliest...

  • Page 336

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58307Chapter 18 ✦ Fonts✦ em, for ems, is based on the em square of the base font size, so that 2em willrender a font twice as large as your document’s base font size. Support inNetscape 4 and IE3 is awful.✦ ex is b...

  • Page 337

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58308 Part III ✦ Controlling Presentation with CSSMaking font wider or thinner using font stretchThis font property is supposed to allow you to make a font look fatter or thinner.Support is nonexistent, however. The curi...

  • Page 338

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58309Chapter 18 ✦ FontsOpenTypeOpenType is a font distribution standard developed by Microsoft and AdobeSystems, the purpose of which is to establish a means of providing some semblanceof typography to the Web using the ...

  • Page 339

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58310 Part III ✦ Controlling Presentation with CSSHow to add downloadable fonts to a Web pageThe two methods of font embedding have some similarities, in that both require atool to create the font objects that get embedd...

  • Page 340

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58311Chapter 18 ✦ FontsThis is because you can write basic HTML using HTML in its earliest purest form,and if you avoid using some of the earlier proprietary elements that began to surfaceafter Netscape’s popularity wa...

  • Page 341

    P1: JYSWY022-18WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200414:58312www.freepdf-books.com

  • Page 342

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:491919CH AP T ERText Formatting✦✦✦✦In This ChapterAligning TextIndenting TextControlling White Spacewithin TextControlling Letter andWord SpacingSpecifying CapitalizationUsing Text DecorationsFormatting ListsAuto-G...

  • Page 343

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49314 Part III ✦ Controlling Presentation with CSSFigure 19-1: The four basic types of text justification.enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit obortis nisl ut aliquip ex ea commodo conseq...

  • Page 344

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49315Chapter 19 ✦ Text Formattingadipiscing elit, sed diam nonummy nibh euismod tinciduntut laoreet dolore magna aliquam erat volutpat. Ut wisienim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit obortis ...

  • Page 345

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49316 Part III ✦ Controlling Presentation with CSSControlling vertical alignmentIn addition to aligning text horizontally, CSS enables you to align text to objectsaround it via the vertical-align property. The vertical-a...

  • Page 346

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49317Chapter 19 ✦ Text FormattingFigure 19-2: The effect of various vertical-align settings. Borders were added tothe text to help contrast the alignment..length { vertical-align: .5em; }.percentage { vertical-align: -50...

  • Page 347

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49318 Part III ✦ Controlling Presentation with CSS<p>Middle: Parent<span class=“middle”>aligned text</span> text</p><p>Bottom: Parent<span class=“bottom”>aligned text</span&...

  • Page 348

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49319Chapter 19 ✦ Text FormattingNote that the text-indent property only indents the first line of the element. If youwant to indent the entire element, use the margin properties instead.Cross-ReferenceSee Chapter 20 fo...

  • Page 349

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49320 Part III ✦ Controlling Presentation with CSSFigure 19-4: Floating images can add a dynamic feel to your documents.Although floating images can add an attractive, dynamic air to your documents, theirplacement is no...

  • Page 350

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49321Chapter 19 ✦ Text FormattingFigure 19-5: Floating images can sometimes get in the way of otherelements, as in the case of this heading.Figure 19-6: Using the clearproperty forces an element to start pastthe floatin...

  • Page 351

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49322 Part III ✦ Controlling Presentation with CSSThe white-space property can be set to the following values:✦ normal✦ pre✦ nowrapThe default setting is normal, that is, ignore extraneous white space.If the proper...

  • Page 352

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49323Chapter 19 ✦ Text Formatting<p class=“tight”>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tinciduntut laoreet dolore magna aliquam erat volutpat. Ut wisienim ad mi...

  • Page 353

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49324 Part III ✦ Controlling Presentation with CSSSpecifying CapitalizationStyles can also be used to control the capitalization of text. The text-transformproperty can be set to four different values, as shown in the fo...

  • Page 354

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49325Chapter 19 ✦ Text Formatting<h3>Normal</h3><p class=“normal”>Lorem ipsum DOLOR sit amet, consectetueradipiscing elit, SED diam nonummy nibh euismod tinciduntut laoreet doLore magna ALIQUAM erat...

  • Page 355

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49326 Part III ✦ Controlling Presentation with CSSThe property takes two values to offset the shadow, one horizontal, the othervertical. Positive values set the shadow down and to the right. Negative values setthe shadow...

  • Page 356

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49327Chapter 19 ✦ Text Formatting<ol>An ordered list<li>Step 1<li>Step 2<li>Step 3</ol><ul>An unordered list<li>Item 1<li>Item 2<li>Item 3</ul>Figure 19-9: An e...

  • Page 357

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49328 Part III ✦ Controlling Presentation with CSSFor example, to create a new list item you can define a class as a list item using thedisplay property:.item { display: list-item; }Thereafter, you can use that class to...

  • Page 358

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49329Chapter 19 ✦ Text Formatting✦ hiragana✦ katakana✦ hiragana-iroha✦ katakana-iroha✦ noneThe values are all fairly mnemonic; setting the style provides a list with appropriateitem identifiers. For example, c...

  • Page 359

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49330 Part III ✦ Controlling Presentation with CSSPositioning of markersThe list-style-position property can change the position of the marker inrelation to the list item. The valid values for this property are inside or...

  • Page 360

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49331Chapter 19 ✦ Text Formattingadipiscing elit, sed diam nonummy nibh euismod tinciduntut laoreet dolore magna aliquam erat volutpat.<li style=“list-style-image: url(cone.jpg)”>Lorem ipsum dolor sit amet, con...

  • Page 361

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49332 Part III ✦ Controlling Presentation with CSSThe standard definition for most English uses is as follows:quotes: ‘“’ ‘”’ “‘” “’”;This specifies a double-quote for the first level (open and...

  • Page 362

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49333Chapter 19 ✦ Text FormattingOf course, it’s of no use to always assign the same number to the :beforepseudo-element. That’s where the counter-increment and counter-resetobjects come in.Changing the counter value...

  • Page 363

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49334 Part III ✦ Controlling Presentation with CSSFirst, you need to set up your chapter heading definition, as follows:h1:before {content: “Chapter ” counter(chapter) “: ”;counter-increment: chapter;counter-res...

  • Page 364

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49335Chapter 19 ✦ Text Formatting<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”><html><head><title>Chapter Auto-Number</title><style type...

  • Page 365

    P1: JYSWY022-19WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:49336 Part III ✦ Controlling Presentation with CSSCustom list numbersYou can use a similar construct for custom list numbering. For example, consider thefollowing code, which starts numbering the list at 20:<!DOCTYPE ...

  • Page 366

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:212020CH AP T ERPadding,Margins, andBorders✦✦✦✦In This ChapterUnderstanding the BoxFormatting ModelDefining Element MarginsAdding Padding Withinan ElementAdding BordersUsing Dynamic Outlines✦✦✦✦TheCSSforma...

  • Page 367

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21Figure 20-1: A typical Web page that isn’t overtly boxy in design.Figure 20-2: The same Web page with borders around all elements, clearly showing thebox formatting model.338www.freepdf-books.com

  • Page 368

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21339Chapter 20 ✦ Padding, Margins, and Borders✦ Borders—Configurable lines inside the elements margins, but outside of theelement’s padding (defined next).✦ Padding—The space between the element and the elem...

  • Page 369

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21340 Part III ✦ Controlling Presentation with CSSFigure 20-4: The margins on some elements aretoo tight, as shown by how close the text is to theimage.The margin-top, margin-right, margin-bottom, and margin-left propert...

  • Page 370

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21341Chapter 20 ✦ Padding, Margins, and BordersSo let’s return to the example in Figure 20-4, where the text is too close to the image.You can separate the two elements by increasing the right margin of the image, orth...

  • Page 371

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21342 Part III ✦ Controlling Presentation with CSSFigure 20-5: The 10 different border types.The border-style properties include properties for each side (border-top-style,border-right-style, border-bottom-style, border-...

  • Page 372

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21343Chapter 20 ✦ Padding, Margins, and BordersBorder colorThe border color properties allow you to specify the color used for an element’sborders. Like most other border properties, there are color properties for each...

  • Page 373

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21344 Part III ✦ Controlling Presentation with CSSFigure 20-6: Many graphic editingprograms specify colors using multipleRGB value formulas that you can cut andpaste into your Web documents.You can use the keywords thin,...

  • Page 374

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21345Chapter 20 ✦ Padding, Margins, and Borders✦ border-spacing—This property controls how the user agent renders thespace between the borders of the cells in a table.✦ border-collapse—This property selects the ...

  • Page 375

    P1: KTXWY022-20WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 8, 200415:21346 Part III ✦ Controlling Presentation with CSSThe outline properties are outline-color, outline-style, outline-width,and the shorthand property outline. These properties work exactly like the otherproperties in this ...

  • Page 376

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:522121CH AP T ERColors andBackgrounds✦✦✦✦In This ChapterForeground ColorBackground ColorSizing an Element’sBackgroundBackground ImagesRepeating and ScrollingBackground ImagesPositioning BackgroundImages✦✦✦...

  • Page 377

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52348 Part III ✦ Controlling Presentation with CSSTipMost graphic editing programs supply RGB values in several different forms intheir color palette dialog boxes.For example, to set the font color to red for paragraph e...

  • Page 378

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52349Chapter 21 ✦ Colors and BackgroundsFigure 21-1: Background colors can be used to affect the color of the virtualpage elements are rendered on.Background ImagesBesides using solid colors for backgrounds you can also ...

  • Page 379

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52350 Part III ✦ Controlling Presentation with CSSFigure 21-2: When using a dark background color, you should usually use alight foreground color.NoteThe example shown in Figure 21-4 has a few additional properties defi...

  • Page 380

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52351Chapter 21 ✦ Colors and BackgroundsFigure 21-3: An element’s background extends to the edge of itspadding—sizing the padding can size the background.✦ Explicit width and height properties specify the size of t...

  • Page 381

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52352 Part III ✦ Controlling Presentation with CSSFigure 21-4: You can also use images for element backgrounds.You can specify the repeating nature and the actual position of the backgroundimage using the background-repe...

  • Page 382

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52353Chapter 21 ✦ Colors and BackgroundsFigure 21-5: Background images can be used as textual ornamentation.The background-attachment property controls how the background is attachedto the element. The default value, scr...

  • Page 383

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52354 Part III ✦ Controlling Presentation with CSSFigure 21-6: By default, background images will tile to fill the available space.background-image: url(“smiley.gif”);background-attachment: scroll;border: thinsolid ...

  • Page 384

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52355Chapter 21 ✦ Colors and BackgroundsFigure 21-7: Repeating a background image horizontally with the repeat-xvalue of thebackground-repeatpropertyTipNon-scrolling backgrounds make great watermarks. Watermarks-—named...

  • Page 385

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52356 Part III ✦ Controlling Presentation with CSS✦ Two percentages that specify where the upper-left corner of the image shouldbe placed in relation to the element’s padding area✦ Two lengths (in inches, centimete...

  • Page 386

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52357Chapter 21 ✦ Colors and BackgroundsFigure 21-9: You can specify that a background image remain fixed under the elementwith the background-attachmentproperty.If only one value is given, it is used for the horizontal...

  • Page 387

    P1: KTXWY022-21WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52358 Part III ✦ Controlling Presentation with CSSSeveral keywords can be used for the third format of the background-positionproperty. They include top, left, right, bottom, and center.For example, you can position the ...

  • Page 388

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:02222CH AP T ERTables✦✦✦✦In This ChapterDefining Table StylesControlling Table AttributesTable LayoutAligning and PositioningCaptions✦✦✦✦Earlierinthisbook,youlearnedhowtousetablestoformat documents. This c...

  • Page 389

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0360 Part III ✦ Controlling Presentation with CSSControlling Table AttributesYou can use CSS properties to control the formatting of tables. One issue with usingCSS is that some of the properties do not match up name-wis...

  • Page 390

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0361Chapter 22 ✦ TablesFigure 22-1: A table using CSS formatting.Figure 22-2: A table using selectivebordering.www.freepdf-books.com

  • Page 391

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0362 Part III ✦ Controlling Presentation with CSSYou can also combine border styles. For example, the following definitions create atable with borders similar to using the border attribute. The result of this definitio...

  • Page 392

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0363Chapter 22 ✦ TablesFigure 22-4: Different horizontal and verticalborder-spacingcan help distinguish datain columns or rows.Collapsing bordersSometimes you will want to remove the spacing between borders in a table, c...

  • Page 393

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0364 Part III ✦ Controlling Presentation with CSSFigure 22-5: Collapsing table borders turns individualborders into gridlines between cells.Figure 22-6 shows the following table with various settings of the empty-cellspr...

  • Page 394

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0365Chapter 22 ✦ TablesFigure 22-6: The empty-cellsproperty controls whether theuser agent displays empty cells or not.Aligning and Positioning CaptionsCSS can also help control the positioning of table caption elements....

  • Page 395

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0366 Part III ✦ Controlling Presentation with CSS<html><head><title>Table Caption Positioning</title><style type=“text/css”>table { margin-right: 200px; }table, table * { border: 1pt sol...

  • Page 396

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0367Chapter 22 ✦ TablesNote that the table’s caption is positioned inside the table’s margin. By increasingthe margin of the table, you allow more text per line of the caption. You can alsoexplicitly set the width of...

  • Page 397

    P1: KTXWY022-22WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:0368www.freepdf-books.com

  • Page 398

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:522323CH AP T ERElementPositioning✦✦✦✦In This ChapterUnderstanding ElementPositioningSpecifying Element PositionFloating Elements to the Leftor RightDefining an Element’sWidth and HeightStacking Elements in Laye...

  • Page 399

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52370 Part III ✦ Controlling Presentation with CSSFigure 23-1: Static positioning is the normal positioning model, rendering elementswhere they should naturally be.Relative positioningRelative positioning is used to move...

  • Page 400

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52371Chapter 23 ✦ Element PositioningFigure 23-2: Relative positioned elements are positioned relativeto the position theywould otherwise occupy.With relative positioning, you can use the side positioning properties (top...

  • Page 401

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52372 Part III ✦ Controlling Presentation with CSSto position the second paragraph in Figure 23-3:width: 350px; height: 150px;border: 1pt solid black;background-color: white;padding: .5em;position: absolute;top: 100px; l...

  • Page 402

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52373Chapter 23 ✦ Element PositioningFixed positioningFixed positioning is similar to relative positioning in that the element is positionedrelative to the view port. However, fixed positioning causes the element to be ...

  • Page 403

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52374 Part III ✦ Controlling Presentation with CSSFigure 23-5: Elements using the fixed positioning model do not scroll in the view port, asshown when this document scrolls.NoteNot all user agents support all the positi...

  • Page 404

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52375Chapter 23 ✦ Element PositioningThe specified side of the element is positioned according to the value specified. If thevalue is a length, the value is applied to the reference point for the positioning modelbeing...

  • Page 405

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52376 Part III ✦ Controlling Presentation with CSSFigure 23-7: An absolute,50% leftvalue results in an element being shifted soits left side is in the middle of the view port.Here, the user agent references the positioni...

  • Page 406

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52377Chapter 23 ✦ Element PositioningFloating Elements to the Left or RightThe other way to position elements is to float them outside of the normal flow ofelements. When elements are floated, they remove themselves f...

  • Page 407

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52378 Part III ✦ Controlling Presentation with CSSFigure 23-9: An image that is floated is removed from the normal flow and ismoved to the specified margin (in this case, the right margin), and the otherelements wrap ...

  • Page 408

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52379Chapter 23 ✦ Element Positioningwide, you can enclose the section in the following <div> tag:<div style=“width: 200px;”> ... </div>Likewise, if you want a particular element to be a certain hei...

  • Page 409

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52380 Part III ✦ Controlling Presentation with CSSFigure 23-10: An element that is mis-sized doesn’t always handle its content properly.overflow: visible| hidden| scroll| auto;The values have the following effect:✦ ...

  • Page 410

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52381Chapter 23 ✦ Element PositioningFigure 23-11: The overflowproperty set to scrollinstructs the user agent to supply amechanism to view the entire content (usually scrollbars).Stacking Elements in LayersUsing CSS pos...

  • Page 411

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52382 Part III ✦ Controlling Presentation with CSSnamed accordingly (with a Z). You can think of the z-stack as papers stackedon adesktop, overlapping each other—some of the papers are covered by other pieces.The value...

  • Page 412

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52383Chapter 23 ✦ Element Positioningwidth: 200px; height: 200px;background-color: red;color: white;z-index: 200; }.box2 { width: 400px; height: 400px;background-color: yellow;z-index: 100; }.box3 { width: 400px; height:...

  • Page 413

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52384 Part III ✦ Controlling Presentation with CSSFigure 23-13: A sample of z-indexstacking.TipYou can use many of the properties in this chapter for animation purposes.Using JavaScript, you can dynamically change an ele...

  • Page 414

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52385Chapter 23 ✦ Element PositioningFigure 23-14: Changing an element’s z-indexchanges its position in the stack.The collapse value causes an element with rows or columns to collapse its borders.If the element does no...

  • Page 415

    P1: JYSWY022-23WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:52386www.freepdf-books.com

  • Page 416

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:532424CH AP T ERDefining Pagesfor Printing✦✦✦✦In This ChapterThe Page Box FormattingModelDefining the Page SizeSetting MarginsControlling Page BreaksHandling Widows andOrphansPreparing Documents forDouble-Sided P...

  • Page 417

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53388 Part III ✦ Controlling Presentation with CSSseen precursors to the Web’s page box formatting model in word processingpackages you’ve used.When you work in a word processing or desktop publishing environment, yo...

  • Page 418

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53389Chapter 24 ✦ Defining Pages for PrintingFigure 24-1 simply extends the box model to reveal two major areas:✦ The page area, which contains all of a page’s elements.✦ The margin area, which surrounds the page ...

  • Page 419

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53390 Part III ✦ Controlling Presentation with CSSIn Listing 24-1, a page named “printed” is defined. Then, HTML elements that aredefined in the stylesheet using printed within the page property should emergefrom t...

  • Page 420

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53391Chapter 24 ✦ Defining Pages for PrintingFigure 24-2: Bad margins.the page margins, as shown in Listing 24-1, by simply using the margin property inthe same manner as you use it anywhere else, as shown here:@page {s...

  • Page 421

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53392 Part III ✦ Controlling Presentation with CSSbut you can create a class selector rule and apply the rule to the first or lastparagraph of a page, depending on your needs, like this:pagebreak{page-break-before: alwa...

  • Page 422

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53393Chapter 24 ✦ Defining Pages for PrintingOnce again, the best support for this property is in the Opera browser.Internet Explorer also supports page-break properties, particularly the alwaysvalue. In fact, in Intern...

  • Page 423

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53394 Part III ✦ Controlling Presentation with CSSdangling paragraph text. Figures 24-3 and 24-4 show how the effect appears in a PrintPreview screen in Internet Explorer. Note that the figures represent the renderedpag...

  • Page 424

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53395Chapter 24 ✦ Defining Pages for PrintingFigure 24-3: You can use your browser’s Print Preview to view how the page willlook in print (Page 1).Figure 24-4: Page two of the print preview using page-break-beforeshow...

  • Page 425

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53396 Part III ✦ Controlling Presentation with CSSFigure 24-3, which is at the end of the page and has no text under. This is because thepage broke at a bad spot. Figures 24-5 and 24-6 show how the print previews lookaft...

  • Page 426

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53397Chapter 24 ✦ Defining Pages for PrintingFigure 24-6: This page improves upon the page breaking in Figures 24-3 and 24-4 (Page 2).a page and the page break results in only a line or two of text at the very end of th...

  • Page 427

    P1: KTXWY022-24WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:53398 Part III ✦ Controlling Presentation with CSSPreparing Documents forDouble-Sided PrintingTo set up pages for printing, you need to account for margin differences on each sideof a double-sided, printed page. One way ...

  • Page 428

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56PARTIVIVAdvanced WebAuthoring✦✦✦✦In This PartChapter 25JavaScriptChapter 26Dynamic HTMLChapter 27Dynamic HTMLwith CSSChapter 28Introduction toServer-SideScriptingChapter 29Introduction toDatabase-DrivenWeb Publi...

  • Page 429

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56400www.freepdf-books.com

  • Page 430

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:562525CH AP T ERJavaScript✦✦✦✦In This ChapterJavaScript BackgroundWriting JavaScript CodeUsing JavaScript in HTMLDocumentsPractical Examples✦✦✦✦Uptothispoint,youhavelearnedhowtocreatestaticdocuments on the...

  • Page 431

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56402 Part IV ✦ Advanced Web Authoringyour page. With JavaScript and the Document Object Model (DOM), you can changethe value of all the properties of all the objects on your page. Because the DOMrequires browsers to re...

  • Page 432

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56403Chapter 25 ✦ JavaScriptEven with all JavaScript can do, it has limitations. JavaScript is limited to its ownsandbox within the browser. JavaScript cannot manipulate files on the clientcomputer, including creating,...

  • Page 433

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56404 Part IV ✦ Advanced Web AuthoringJavaScript, you use the var keyword. For example, each of the following linesdeclares a variable:var name = “Hammond”;var total;var tax_rate = .065;Variables are referenced in t...

  • Page 434

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56405Chapter 25 ✦ JavaScriptTable 25-3JavaScript Comparison OperatorsOperatorUse==Is equal to!=Is not equal to>Is greater than<Is less than>=Is greater than or equal to<=Is less than or equal toTable 25-4Log...

  • Page 435

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56406 Part IV ✦ Advanced Web AuthoringThe if-else structure has the following syntax:if ( condition ){...statements to execute if condition is true...} else {...statements to execute if condition is false...}NoteThe els...

  • Page 436

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56407Chapter 25 ✦ JavaScriptThe for structure has the following syntax:for (assignment; condition; change;){...statements to execute while condition is false...}The assignment, condition, and change blocks of the for st...

  • Page 437

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56408 Part IV ✦ Advanced Web AuthoringFunctionsFunctions are a means of grouping code fragments together into cohesive pieces.Typically, those pieces perform very specific tasks—receiving values to executeupon and re...

  • Page 438

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56409Chapter 25 ✦ JavaScriptElsewhere in your code you can call a function similar to the following:address = spacefill(address);This would cause the variable address to be spacefilled to 25 characters:✦ The space...

  • Page 439

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56410 Part IV ✦ Advanced Web AuthoringFor example, the following statement references the address form field in the infoform:document.info.addressIn order for this to work, the elements and subelements must be appropri...

  • Page 440

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56411Chapter 25 ✦ JavaScriptEventTriggerMouseDownThis event is triggered when a visitor clicks (only the downstrokeof the mouse button) on an objectMouseUpThis event is triggered when visitors release the mouse buttonth...

  • Page 441

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56412 Part IV ✦ Advanced Web AuthoringUsing JavaScript in HTML DocumentsIncorporating JavaScript into your HTML documents is straightforward, and asyou’d expect, handled through the use of the <script> element. ...

  • Page 442

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56413Chapter 25 ✦ JavaScriptthe bottom, it sees a JavaScript comment marker (//) and ignores that line, whichincludes the closing half of the HTML comment tag.JavaScript executionWhen does JavaScript script execute? Tha...

  • Page 443

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56414 Part IV ✦ Advanced Web AuthoringYour document can include as many scripts as you want or need in the head andbody of the document, depending only on the patience of the end user to wait for thedownload.Practical E...

  • Page 444

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56415Chapter 25 ✦ JavaScriptUsing if/then statements, you can provide the appropriate code for variousbrowsers, similar to the following:browser=navigator.appNameif (browser.indexOf(“Microsoft”)!=-1){// Browser is M...

  • Page 445

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56416 Part IV ✦ Advanced Web Authoringelse if (document.layers) {// access DOM via document.layers}Note that you can determine if a browser supports DHTML at all by checking for anyof the DOM models:if (document.getElem...

  • Page 446

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56417Chapter 25 ✦ JavaScriptFigure 25-1: Two buttons for rollover purposes-—btnHomeNrm.jpg(left image) is the normal button, andbtnHomeHgh.jpg(right image) is the highlighted button.<!DOCTYPE HTML PUBLIC “-//W3C/...

  • Page 447

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56418 Part IV ✦ Advanced Web AuthoringTipTo actually make the button do something, add an onClickevent to the<img>tag to call another function, or directly manipulate the document.location.hrefproperty, as in the ...

  • Page 448

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56419Chapter 25 ✦ JavaScriptNote that preloading images takes just about as long as displaying the imagesnormally. As such, little can be gained by preloading static images in the currentdocument. However, images on sub...

  • Page 449

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56420 Part IV ✦ Advanced Web Authoring<html><head><title></title><script type=“text/JavaScript”>function req(myField, myLabel) {// Check for non-blank fieldvar result = true;if (myFiel...

  • Page 450

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56421Chapter 25 ✦ JavaScriptvar aindex = tempstr.indexOf(“@”);if (aindex > 0) {var pindex = tempstr.indexOf(“.”,aindex);if ((pindex > aindex+1) &&(tempstr.length > pindex+1)) {result = true;} el...

  • Page 451

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56422 Part IV ✦ Advanced Web Authoring<tr><td>Zipcode for estimating<br>shipping cost:</td><td><input type=“text” name=“zip” value=“”size=“5” maxlength=“5”></td...

  • Page 452

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56423Chapter 25 ✦ JavaScriptSpecifying window size and locationBy accessing the user agent’s properties you can manipulate some aspects of theuser’s browser window. Table 25-7 lists a handful of the useful propertie...

  • Page 453

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56424 Part IV ✦ Advanced Web AuthoringYou can use the code in the following example to play with some of the browserwindow properties and methods:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“h...

  • Page 454

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56425Chapter 25 ✦ JavaScript<input type=“button” value=“Smaller”accesskey=“S”onClick=“sizeBy(50,50,1);”></p><p><input type=“button” value=“ScrollBar Report”accesskey=“B”o...

  • Page 455

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56426 Part IV ✦ Advanced Web Authoring(beyond the client’s concept of Back and Forward through the cache). Enter cookies,a way to save information on the user’s machine that the user agent can laterretrieve and use....

  • Page 456

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56427Chapter 25 ✦ JavaScript// delCookie// Deletes cookie specified by ‘name’ (and// optionally ‘path’ and ‘domain’) by setting// expire to previous date.function delCookie(name, path, domain) {if (getCooki...

  • Page 457

    P1: KTXWY022-25WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:56428www.freepdf-books.com

  • Page 458

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:552626CH AP T ERDynamic HTML✦✦✦✦In This ChapterThe Need for DHTMLHow DHTML WorksDocument Object ModelCross-BrowserCompatibility IssuesBrowser DetectionDHTML ExamplesBreadcrumbs (PageLocation Indicator)RolloversCol...

  • Page 459

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55430 Part IV ✦ Advanced Web AuthoringJavaScript environment. How these properties are referred to, and what actions(methods) you can take on them, is determined by the Document Object Model(DOM).DHTML and the Document ...

  • Page 460

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55431Chapter 26 ✦ Dynamic HTMLhuman triggers an onclick event in a browser, more benign things take place, suchas text color changes, menu changes, and so on. Table 26-1 shows the common eventhandlers associated with Ja...

  • Page 461

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55432 Part IV ✦ Advanced Web Authoringcomputer. When you look for a file on your hard drive, you drill down a group ofnested folders to find something. So the final path might look something like this:C:\Documents an...

  • Page 462

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55433Chapter 26 ✦ Dynamic HTMLalinkColoranchors()byColorcookiefgColorlastModifiedlinkColorlinks[i]lastModifiedlinkColorlocationreferrertitlevlinkColorclear()close()open()write()writeIn()bordercompleteheighthspscclowarcn...

  • Page 463

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55434 Part IV ✦ Advanced Web AuthoringObject detectionObject detection is a more precise way of browser sniffing. It examines a browser’ssupport for various aspects of the object model. This avoids the potential fors...

  • Page 464

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55435Chapter 26 ✦ Dynamic HTMLlanguage is. In this case, our pseudo-code looks like this:Split the current URL into each folder.For each folderCreate a link string-based object.Next Folder,Combine all result string obje...

  • Page 465

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55436 Part IV ✦ Advanced Web AuthoringThen, create a JavaScript for loop to loop through the array. Note that the looplooks a little different than some loops you may have seen:for (y=2;y<(sDir.length-1);y++)What’s...

  • Page 466

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55437Chapter 26 ✦ Dynamic HTML--></style><title>Breadcrumbs</title><meta http-equiv=“Content-Type” content=“text/html;charset=iso-8859-1”></head><body><div id=“breadcr...

  • Page 467

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55438 Part IV ✦ Advanced Web AuthoringIf you look at Figure 26-2, you can see there is one thing about the results you mightnot like. It would be better to have a “dry” breadcrumb containing a nonactive linkfor the ...

  • Page 468

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55439Chapter 26 ✦ Dynamic HTML<!--body {font-family: Frutiger, Verdana, Arial, Helvetica, sans-serif;}.breadcrumbs {font-size: 10px;}--></style></head><body><div id=“breadcrumbs” class=“...

  • Page 469

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55440 Part IV ✦ Advanced Web AuthoringCreating rollovers using the a:hover pseudo-classThe easiest kind of rollover is to simply use CSS. You don’t even need to use JavaScript.Instead, you can use the CSS a:hover pseu...

  • Page 470

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55441Chapter 26 ✦ Dynamic HTMLa:hover {background-color: #FF0000;text-decoration: none;}a{text-decoration:none;}--></style></head><body><div><span class=“button” title=“Go to Rollover...

  • Page 471

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55442 Part IV ✦ Advanced Web AuthoringFigure 26-3: A ToolTip as rendered in a browser when the titleattribute is used on a link.dynamically when a user’s mouse rolls over the button. This acts as a description ofthe l...

  • Page 472

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55443Chapter 26 ✦ Dynamic HTMLCreating rollovers using JavaScriptCreating rollovers using JavaScript can be as simple or as tedious as you wish it tobe. Best practice would suggest that you should create rollovers, like...

  • Page 473

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55444 Part IV ✦ Advanced Web Authoringhandlers in all their elements will simply ignore the call to the JavaScript becausethey simply ignore the attribute itself. Keep this concept in mind when you’reworking with DHTM...

  • Page 474

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55445Chapter 26 ✦ Dynamic HTMLbecause JavaScript tests for user agents will reveal (on a Windows machine)something like this: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5)for browsers implementing the Mozilla ...

  • Page 475

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55446 Part IV ✦ Advanced Web AuthoringFreeware</A>’,1)outline[2] = new item(true, ‘Scripts’, 1)outline[3] = new item(false, ‘<A HREF=“javascripts/dhtml—scripts.html”>DHTMLScripts</A>’,2...

  • Page 476

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55447Chapter 26 ✦ Dynamic HTMLIf you’re not comfortable with scripting, you can find a wide variety of resources onthe Internet for free scripts that you can adapt to your own needs with littleJavaScript background. ...

  • Page 477

    P1: KTXWY022-26WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200423:55448www.freepdf-books.com

  • Page 478

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:422727CH AP T ERDynamic HTMLwith CSS✦✦✦✦In This ChapterDynamic HTML and theDocument Object ModelDHTML and CSS PropertiesInternet Explorer Filters✦✦✦✦CSScanbeapowerfultoolforcreatingdynamicpageswith special...

  • Page 479

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42450 Part IV ✦ Advanced Web AuthoringFigure 27-1: When this text styled in CSS is clicked, it will change.Listing 27-1 shows some modification to the previous code fragment. This time,the this keyword isn’t used bec...

  • Page 480

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42451Chapter 27 ✦ Dynamic HTML with CSS</div><div style=“width: 100px; padding: 4px; background-color:#cccccc; border: blue outset 1px; cursor:hand”><div align=“center”><a href=“#” style...

  • Page 481

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42452 Part IV ✦ Advanced Web AuthoringFigure 27-3: When the button is clicked, the text changes.The solutions for changing CSS shown so far are of limited use because they rely onGecko’s and Internet Explorer’s inte...

  • Page 482

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42453Chapter 27 ✦ Dynamic HTML with CSSIn order to account for all the differences in syntax between browsers, you need toset up browser sniffing routines which, as mentioned in the previous chapter, arechunks of code ...

  • Page 483

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42454 Part IV ✦ Advanced Web AuthoringListing 27-2: Setting CSS Properties Using a Cross-Browser Script<<html><head><title>Setting CSS Properties Using Cross-Browser ScriptingRoutines</title>&...

  • Page 484

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42455Chapter 27 ✦ Dynamic HTML with CSS</div><p class=“MyClass”>Here is some test script in a P element</p><div class=“MyClass”>Here is some test script in a P element</div></bod...

  • Page 485

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42456 Part IV ✦ Advanced Web AuthoringFigure 27-5: A cross-browser script lets the user change the text by clicking a button.Generally, CSS properties are all accessed the same way as shown in the twopreceding examples....

  • Page 486

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42457Chapter 27 ✦ Dynamic HTML with CSSbehavior selectors in style sheets, you might never need to worry about theubiquitous JavaScript error codes that occur so often when users access your sitewith non-IE browsers.Beh...

  • Page 487

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42458 Part IV ✦ Advanced Web AuthoringFiltersIf you’ve ever worked in a paint program you’re familiar with filters and their effects.IE4 and IE have introduced them to the world of Web browsing through a set ofcont...

  • Page 488

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42459Chapter 27 ✦ Dynamic HTML with CSS✦ TFOOT✦ TH✦ THEAD✦ TRThe following section begins with a look at filters with the visual filters that are appliedthrough style sheets, followed by a look at the light an...

  • Page 489

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42460 Part IV ✦ Advanced Web AuthoringblurThis filter creates a movement across the screen according to the parameters youset for it, and has the following syntax:{ filter: blur(add=value, direction=value, strength=va...

  • Page 490

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42461Chapter 27 ✦ Dynamic HTML with CSSnontransparent pixels, so if you want a drop shadow for a fully transparentobject, you should set this value to 0.)Here is an example using some of the parameters:H1 {filter: drop...

  • Page 491

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42462 Part IV ✦ Advanced Web AuthoringflipVThis filter flips an object along a horizontal plane. It has the following syntax:{ filter: flipV}This filter takes no parameters, as reflected in the following example:...

  • Page 492

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42463Chapter 27 ✦ Dynamic HTML with CSSlight ()The light filter can produce not only some fun effects, but can enhance a pagevisually, as well. The light filter has numerous methods you can call on for somespecial eff...

  • Page 493

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42464 Part IV ✦ Advanced Web AuthoringchangeColorThe changeColor filter changes light color using the following syntax:object.filters.Light.changeColor(lightnumber, r,g,b,zero/nonzero)lightnumber refers to the indexed...

  • Page 494

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42465Chapter 27 ✦ Dynamic HTML with CSSshadowThis shadow filter creates a border around one of its edges to simulate a shadow. Ithas the following syntax:{ filter: shadow(color=value, direction=value)}Valid parameter ...

  • Page 495

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42466 Part IV ✦ Advanced Web Authoringsimply writing it in the meta tag at the beginning of a document. The revealtransfilter has the following syntax:{filter: revealtrans(duration=value, transition=value)}Possible va...

  • Page 496

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42467Chapter 27 ✦ Dynamic HTML with CSSTwo of the possible transition values are used in the following example:.filter {filter: revealtrans(duration=10, transition=22)}This style sheet creates a transition that can be...

  • Page 497

    P1: KTXWY022-27WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:42468www.freepdf-books.com

  • Page 498

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:32828CH AP T ERIntroduction toServer-SideScripting✦✦✦✦In This ChapterHow Web Servers WorkMarket-Leading WebServersThe Need for Server-SideScriptingServer-Side ScriptingLanguages✦✦✦✦Earlierinthisbook,youlea...

  • Page 499

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3470 Part IV ✦ Advanced Web Authoringbeen configured differently. Port 80 is the default Web server port. This is how yourserver, which may be a file server, an applications server, and an FTP server, inaddition to be...

  • Page 500

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3471Chapter 28 ✦ Introduction to Server-Side Scripting✦ They can be called from another script or static page by using a form action:<form action=“validate.cgi” method=“POST”>✦ They can be called from ...

  • Page 501

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3472 Part IV ✦ Advanced Web Authoringonly the amount of overhead necessary for the features you want. It also facilitatesthird parties developing their own modules to support their own technologies.Apache supports almos...

  • Page 502

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3473Chapter 28 ✦ Introduction to Server-Side ScriptingServer-side scripts are so named because they run on the server instead of in theclient’s user agent. As such, server-side scripts can have access to all resources...

  • Page 503

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3474 Part IV ✦ Advanced Web Authoringis an interpreted language—interpreted languages are converted into binaryprograms on the fly, as they are run.NoteKeep in mind that a program must output data in a form recognize...

  • Page 504

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3475Chapter 28 ✦ Introduction to Server-Side ScriptingFigure 28-2: The ActiveX control used by a popular network camera to allow control ofthe camera over the Internet.<html><head><title>Hello World AS...

  • Page 505

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3476 Part IV ✦ Advanced Web AuthoringPHPPHP is a relative newcomer to the server-side scripting arena. However, it is one ofthe few solutions that were developed specifically for Web automation. As such, ithas the most...

  • Page 506

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3477Chapter 28 ✦ Introduction to Server-Side Scripting<p>$HelloWorld</p></body></html>HTML;?>As with the earlier ASP example, this simple PHP example only scratches the surface ofwhat you can ...

  • Page 507

    P1: KPEWY022-28WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200420:3478 Part IV ✦ Advanced Web Authoringplug-ins, and other technologies, you can deliver just about any type of content viathe Web.In this chapter, you learned how server-side scripting can be used to extend thecapabiliti...

  • Page 508

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:572929CH AP T ERIntroduction toDatabase-DrivenWeb Publishing✦✦✦✦In This ChapterUnderstanding the Needfor Database PublishingHow Database IntegrationWorksOptions for DatabasePublishingDatabase Publishing CaseStudy...

  • Page 509

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57480 Part IV ✦ Advanced Web AuthoringHowever, when your documents can interact with database content, you can easilymitigate the concerns mentioned in the preceding list:✦ The order form can represent the current stoc...

  • Page 510

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57481Chapter 29 ✦ Introduction to Database-Driven Web PublishingFigure 29-2: A server-side script can be relied upon to store andretrieve data from a database. The same script can manipulate thedata in many ways before p...

  • Page 511

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57482 Part IV ✦ Advanced Web AuthoringDatabase Publishing Case Study—ANewsletterAn online newsletter is a good example to show the power of database publishing.Many such documents are online, from daily Web logs to onl...

  • Page 512

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57483Chapter 29 ✦ Introduction to Database-Driven Web PublishingFigure 29-3: The manual process of maintaining an onlinenewsletter.•Subject of article•Main text of article•Whether the article is final or in draft ...

  • Page 513

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57484 Part IV ✦ Advanced Web AuthoringTipAs previously mentioned in this chapter, many Web blogging programs existto easily implement the system described here. However, these programs donot alleviate the need for custom...

  • Page 514

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57485Chapter 29 ✦ Introduction to Database-Driven Web PublishingTable 29-1The Authors TableColumnDefinitionUseIdxInteger, auto incrementIndex for authorsNameCharacter fieldName of authorPwdCharacter fieldPassword for ...

  • Page 515

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57486 Part IV ✦ Advanced Web Authoring‘email’ varchar(40) NOT NULL default ”,PRIMARY KEY (‘idx’)) TYPE=MyISAM ;CREATE TABLE ‘categories’ (‘idx’ int(10) NOT NULL auto_increment,‘name’ varchar(40) NOT...

  • Page 516

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57487Chapter 29 ✦ Introduction to Database-Driven Web PublishingWhat is SQL?Structured Query Language (SQL, generally pronounced “sequel”) was developed as a meansto lend consistency to database queries. The language...

  • Page 517

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57488 Part IV ✦ Advanced Web AuthoringThe net result of this code would be a listing of the titles of all published articles,sorted by their publication date in descending order, similar to the following:<p><i&g...

  • Page 518

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57489Chapter 29 ✦ Introduction to Database-Driven Web PublishingFigure 29-6: The category script generates recent article headlines sorted intotheir respective categories.✦ Teasers of current articles—that is, the ...

  • Page 519

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57490 Part IV ✦ Advanced Web AuthoringFigure 29-7: The teaser script generates short versions of articles.Adding search capabilitiesAdding a search capability to the system is remarkably easy. A full-text index iscreated...

  • Page 520

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57491Chapter 29 ✦ Introduction to Database-Driven Web PublishingFigure 29-8: The full-text script generates the full text of an article.additional scripts, accessible only to the authors and system administrators. Thescr...

  • Page 521

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57492 Part IV ✦ Advanced Web AuthoringFigure 29-9: Tools such as phpMyAdmin, although not very user-friendly, can help fillgaps in database administration.Figure 29-10: An example of an article maintenance tool that all...

  • Page 522

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57493Chapter 29 ✦ Introduction to Database-Driven Web PublishingIn the case of MySQL, access is restricted per user, as seen in the user and passwordfields required in the mysql_connect() PHP function. Each user is assi...

  • Page 523

    P1: KPEWY022-29WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 16, 20042:57494www.freepdf-books.com

  • Page 524

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:353030CH AP T ERCreating aWeblog✦✦✦✦In This ChapterThe Blog PhenomenonBlog Providers andSoftwarePosting Content to YourBlogHandling CommentsUsing PermalinksUsing TrackbacksSyndicating Content withRSSBuilding an Au...

  • Page 525

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35496 Part IV ✦ Advanced Web AuthoringNoteDave Barry is a well-known humor columnist for the Miami Herald. His columnis syndicated in over 500 newspapers worldwide. Dave Barry actually has hisown blog, which can be foun...

  • Page 526

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35497Chapter 30 ✦ Creating a WeblogUserland SoftwareAccording to the Userland Software site, Userland “provides Web ContentManagement and creation tools for building sites that bring people together.” One ofthe pion...

  • Page 527

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35498 Part IV ✦ Advanced Web AuthoringBlosxomBlosxom (pronounced “blossom”) was designed as a lightweight, feature-packed,blogging application. One of the more simple solutions for blogging, Blosxom runs asPerl CGI ...

  • Page 528

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35499Chapter 30 ✦ Creating a WeblogTipAlthough quoting others is a huge part of the whole blog scene, it is still veryimportant to clearly delimit and credit other people’s text. In most cases, youwill want to indent ...

  • Page 529

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35500 Part IV ✦ Advanced Web Authoringarticle in question, usually on a page all by itself (without being buried in anavigation scheme).You will typically see permalinks near the bottom of the text of blog articles, ass...

  • Page 530

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35501Chapter 30 ✦ Creating a WeblogTrackBack was first released as an open specification in 2002. It was released as aprotocol and feature of Movable Type version 2.2 and has since been adopted bymany other blogging a...

  • Page 531

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35502 Part IV ✦ Advanced Web AuthoringRSS syntaxThe syntax for RSS feeds varies considerably depending on the version of RSS thatyou adhere to. However, the feed is usually published as an XML file with a strictsyntax....

  • Page 532

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35503Chapter 30 ✦ Creating a WeblogFigure 30-3: Applications such as BottomFeeder can monitor several RSSfeeds.Most blogging software will automatically create RSS feeds from your content. Youstill must configure how m...

  • Page 533

    P1: KTXWY022-30WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:35504 Part IV ✦ Advanced Web AuthoringUsing syndication listing sites is another good way to drive traffic. Visitwww.syndic8.com/ and register your site. Most blogging software sites will alsoinclude listing areas for ...

  • Page 534

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:103131CH AP T ERIntroductionto XML✦✦✦✦In This ChapterThe Need for XMLRelationship of XML,SGML, and HTMLHow XML WorksVersions of XMLWell-Structured XMLDocument Type Definitions(DTDs)XML Schemas✦✦✦✦Theessenc...

  • Page 535

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10506 Part IV ✦ Advanced Web AuthoringThe Need for XMLThe Web is all about markup, but it’s also about data. This is true whether the data isdocument-centric, such as the kind of content in a magazine or journal, or mo...

  • Page 536

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10507Chapter 31 ✦ Introduction to XML✦ Use it as a data storage mechanism completely outside the HTML layer.✦ Use it to make data available to runtime languages such as JavaScript or anobject-oriented language such a...

  • Page 537

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10508 Part IV ✦ Advanced Web Authoringpopular in government circles and with companies with massive documentationneeds, such as aircraft manufacturers and military contractors. Although it is stillused extensively by the...

  • Page 538

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10509Chapter 31 ✦ Introduction to XMLBegin with a prologThere are no pre-existing elements in XML. Most basic XML documents start with aprolog, which includes a declaration that states a document as being an XMLdocument:...

  • Page 539

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10510 Part IV ✦ Advanced Web Authoringimportant to XML development because XML is concerned with how sequences ofthese mapped numerical references are structured within an XML document.Your encodings need to be consisten...

  • Page 540

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10511Chapter 31 ✦ Introduction to XMLYou don’t even have to include the XML declaration, but it’s good form to do so, andis a much better way to maintain the integrity of your documents if versions shouldchange. If y...

  • Page 541

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10512 Part IV ✦ Advanced Web AuthoringUsing quotes in attribute valuesIn HTML, you can also get away with not including quotes around attributes. Forexample, you can write the following and a browser will render the elem...

  • Page 542

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10513Chapter 31 ✦ Introduction to XMLThe same steps are necessary for the other predefined entities listed in Table 31-1.Instead of using the markup shown under the heading “Markup Equivalent,” you canalso use the U...

  • Page 543

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10514 Part IV ✦ Advanced Web AuthoringThe preceding code fragment is a well-formed document as it stands. However, youmay wish to define rules that more clearly delineate the purpose of each element andthe position of e...

  • Page 544

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10515Chapter 31 ✦ Introduction to XMLOf course, creating the DTD within the validating XML document is not a necessaryfirst step. You can create the file separately from the beginning. But doing it withinthe validating...

  • Page 545

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10516 Part IV ✦ Advanced Web AuthoringFor example, to declare an empty br element, you would write the following:<!ELEMENT br EMPTY>This element would appear as follows in an XML document:<br />Using element ...

  • Page 546

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10517Chapter 31 ✦ Introduction to XMLYou can declare that a group of elements must appear at least one or more times:<!ELEMENT contact (name, address, phone)+>To declare that an element can appear zero or more time...

  • Page 547

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10518 Part IV ✦ Advanced Web AuthoringListing 31-1: A Nonvalidating XML Document<?xml version=“1.0”?><!DOCTYPE contact [<!ELEMENT contact (name, address, (address)?, city, state,postalcode, phone, (email|...

  • Page 548

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10519Chapter 31 ✦ Introduction to XMLletting the XML parser know about it. When an XML parser encounters an entity itexpands that entity. For example, this means that the parser recognizes &nbsp; as anonbreaking spac...

  • Page 549

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10520 Part IV ✦ Advanced Web AuthoringRecall that an example earlier in the chapter created a simple XML document forcontacts that was derived from contact.dtd. Let’s call that XML documentcontact.xml. If you look at L...

  • Page 550

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10521Chapter 31 ✦ Introduction to XMLThe contact element is a complex type of element because it contains other elements.If an element isn’tdefined by giving it child elements, it’sa simple type of element.To refere...

  • Page 551

    P1: KPEWY022-31WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:10522 Part IV ✦ Advanced Web Authoringthen need to call the resource you’re using, in this case, a schema that can be foundon the path named in the xsi:SchemaLocation attribute. When the processorfinds the schema, it ...

  • Page 552

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:63232CH AP T ERXML ProcessingandImplementations✦✦✦✦In This ChapterXPathStyle Sheets for XMLXML Implementations✦✦✦✦Chapter31gaveyouatasteofwhatXMLislikeandhowit works, but now it’s time to figure out exa...

  • Page 553

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6524 Part IV ✦ Advanced Web AuthoringXPath is often associated with a host language that uses specific aspects of XPathbut may expand on the core XPath framework and provide additional functionality.XSLT is a classic e...

  • Page 554

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6525Chapter 32 ✦ XML Processing and ImplementationsmapdirectionsdestinationdirectionsstartingPointstreetcrosscitypostalcodestreetcrosscitypostalcodesteptextstreetstartFigure 32-1: You can navigate an XML document by “...

  • Page 555

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6526 Part IV ✦ Advanced Web AuthoringListing 32-1 (continued)<!-- XPath: /mapdirections/directions/step --><step><street>Hyde St</street><text>Turn RIGHT onto HYDE ST.</text></step...

  • Page 556

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6527Chapter 32 ✦ XML Processing and ImplementationsA street system in a city is a form of linking system. XPath also provides a consistentlinking mechanism via a special notation called location steps. In their simplest...

  • Page 557

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6528 Part IV ✦ Advanced Web AuthoringRoot NodemapdirectionsstartingPointdestinationdirectionspostalCodecitycrossstreetpostalCodecitycrossstreettextstreetstart@directiontextstreetsteptextstreetsteptextstreetstepstepFigur...

  • Page 558

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6529Chapter 32 ✦ XML Processing and Implementationslike this: parent::*. When you move sideways, you refer to a sibling, like this:preceding-sibling::* or following-sibling::*. XPath uses a number ofaxes, which are list...

  • Page 559

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6530 Part IV ✦ Advanced Web AuthoringTable 32-1 (continued)AxisDescriptionExampleSelfThis is the context nodeitselfself::*descendant-or-selfContains all descendantnodes as well as thecontext node itself, notincluding at...

  • Page 560

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6531Chapter 32 ✦ XML Processing and Implementationscalled XSLT. Many people call XSLT XSL, but XSL is actually a language for specificallytransforming documents into a print-based XML vocabulary called XSL FormattingOb...

  • Page 561

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6532 Part IV ✦ Advanced Web AuthoringSource Content Is Inserted IntoNew Result Document...transforms to this.This...<bad> A bad document</bad> A bad document<html></html></body><body>...

  • Page 562

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6533Chapter 32 ✦ XML Processing and Implementationsthat it shouldn’t matter what operating system you’re using. It should work as wellon a Mac or Linux as it does on Windows.You can also use command-line programs su...

  • Page 563

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6534 Part IV ✦ Advanced Web AuthoringThe encoding attribute is important because, as mentioned in the previous chapter,you need to keep your encodings consistent between XML documents. The methodattribute of the xsl:out...

  • Page 564

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6535Chapter 32 ✦ XML Processing and Implementationsfragment from your XML document might look like this:<?xml version=“1.0” encoding=“UTF-8”?><xsl:stylesheetxmlns:xsl=“http://fancystockings.magical.co...

  • Page 565

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6536 Part IV ✦ Advanced Web AuthoringThe prefix foo is completely arbitrary<foo : stylesheet xmlns : foo="http://www.w3.org/1999/XSL/Transform"> THIS is the namespaceNot thisor thisFigure 32-5: Deconstru...

  • Page 566

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6537Chapter 32 ✦ XML Processing and Implementations<body>Directions to:<xsl:value-ofselect=“mapdirections/startingPoint/street” /></body></html></xsl:template></xsl:stylesheet>To ...

  • Page 567

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6538 Part IV ✦ Advanced Web AuthoringIntroducing templatesYou may have noticed an xsl:template element in the brief XSLT shell shown inListing 32-2. This is the primary rule maker that controls what kind of output isgen...

  • Page 568

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6539Chapter 32 ✦ XML Processing and Implementationsinterdiction. You can stop all this default processing by adding one single instructionrule, with one very simple instruction (like the example shown in bold in thefoll...

  • Page 569

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6540 Part IV ✦ Advanced Web AuthoringTable 32-2 (continued)Element NamePurposeParent Element(s)xsl:for-eachIterates through one or morenodes and generates itscontent for each instanceAny content constructor; anyliteral ...

  • Page 570

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6541Chapter 32 ✦ XML Processing and ImplementationsElement NamePurposeParent Element(s)xsl:whenA conditional thatprocesses its contentswhen its test attributeevaluates to trueXsl:choosexsl:with-paramUsed for assigningva...

  • Page 571

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6542 Part IV ✦ Advanced Web AuthoringListing 32-3: (continued)<reorder><name>Bert&apos;s Soda</name><cost>1.99</cost><date>2002-12-15</date></reorder><reorder>&l...

  • Page 572

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6543Chapter 32 ✦ XML Processing and ImplementationsThe result of transforming Listing 32-3 using Listing 32-4 is the following HTML:<html><head><META http-equiv=“Content-Type” content=“text/html;cha...

  • Page 573

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6544 Part IV ✦ Advanced Web Authoringtransitional.dtd” doctype-public=“-//W3C//DTD XHTML 1.0Transitional//EN”method=“html” version=“4.0” encoding=“ISO-8859-1” indent=“yes”/>This will generate th...

  • Page 574

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6545Chapter 32 ✦ XML Processing and ImplementationsListing 32-6 (L3206.xhtml) on the books companion Web site shows the result of thetransformation generated by Listing 32-5.Cross-ReferenceAppendix A provides more detai...

  • Page 575

    P1: KTUWY022-32WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:6546 Part IV ✦ Advanced Web AuthoringSummaryYou can easily see the benefits of starting with one source document based on XMLand generating output to HTML, PDF, WML, and even XUL or other GUI vocabulariesfrom one sourc...

  • Page 576

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11PARTVVTesting,Publishing, andMaintainingYour Site✦✦✦✦In This PartChapter 33Testing andValidating YourDocumentsChapter 34WebDevelopmentSoftwareChapter 35Choosing aService ProviderChapter 36Uploading YourSite with ...

  • Page 577

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11548www.freepdf-books.com

  • Page 578

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:113333CH AP T ERTesting andValidating YourDocuments✦✦✦✦In This ChapterTesting with a Varietyof BrowsersTesting for a Variety ofDisplaysValidating your Code✦✦✦✦Aftercreatingyourdocuments,itisimportanttotestt...

  • Page 579

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11550 Part V ✦ Testing, Publishing, and Maintaining Your Siteplatforms. At a bare minimum, you should test on a current Microsoft (InternetExplorer) browser and a Netscape/Mozilla browser because most browsersincorporate...

  • Page 580

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11551Chapter 33 ✦ Testing and Validating Your DocumentsThe DOCTYPE declaration informs any user agent reading the document whatstandard the document is based on. The information is primarily used by validationclients in ...

  • Page 581

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11552 Part V ✦ Testing, Publishing, and Maintaining Your Site✦ Any of the various separate applications that can be run locally. Acomprehensive list is maintained on the WDG site athttp://www.htmlhelp.com/links/validat...

  • Page 582

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11553Chapter 33 ✦ Testing and Validating Your DocumentsTipWhen working on making a document validate, always handle the errors inorder. The example in this section actually results in four separate errors, eachrelating t...

  • Page 583

    P1: JYSWY022-33WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11554www.freepdf-books.com

  • Page 584

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:113434CH AP T ERWeb DevelopmentSoftware✦✦✦✦In This ChapterText-Oriented EditorsWYSIWYG HTML EditorsOther Tools✦✦✦✦Asyouhaveseenthroughoutthisbook,Webdevelopment is an area rich in features. The Web hascome ...

  • Page 585

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11556 Part V ✦ Testing, Publishing, and Maintaining Your SiteHowever, although you could create an entire site with one of these simple tools,there are better tools for actual creation.Smart text editorsSmart text editor...

  • Page 586

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11557Chapter 34 ✦ Web Development SoftwareWindows users have a few choices for smart editors, as well. My favorite is Textpad,which uses document class templates to understand the syntax of almost any codeddocument. Text...

  • Page 587

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11558 Part V ✦ Testing, Publishing, and Maintaining Your SiteFigure 34-3: Homesite includes wizards for building morecomplex tags such as tables.WYSIWYG HTML EditorsJust as what you see is what you get (WYSIWYG) editors ...

  • Page 588

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11559Chapter 34 ✦ Web Development SoftwareFigure 34-4: Microsoft FrontPage is a visual editor for Web documents.Figure 34-5: FrontPage enables you to edit related documents as a site.www.freepdf-books.com

  • Page 589

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11560 Part V ✦ Testing, Publishing, and Maintaining Your SiteYou can learn more about FrontPage and download an evaluation copy fromMicrosoft’s FrontPage site, at www.microsoft.com/office/frontpage/prodinfo/default.ms...

  • Page 590

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11561Chapter 34 ✦ Web Development SoftwareFigure 34-6: NetObjects Fusion provides a good framework for designing pages visually.However, the feature-rich nature of Dreamweaver comes at a price—it is easily themost comp...

  • Page 591

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11562 Part V ✦ Testing, Publishing, and Maintaining Your SiteFigure 34-7: At the site level, NetObjects Fusion gives you complete control over yoursite’s organization while behind the scenes it adjusts links between pa...

  • Page 592

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11Figure 34-8: Dreamweaver’s main editing window can show the code view, the design(visual) view, or both.Figure 34-9: The Target Browser Check feature checks your code against the compatibilityof specific browsers.563w...

  • Page 593

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11564 Part V ✦ Testing, Publishing, and Maintaining Your SiteRaster-based editing tools include the following:✦ Paint Shop Pro (www.jasc.com/products/paintshoppro)✦ Adobe Photoshop (www.adobe.com/products/photoshop/m...

  • Page 594

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11565Chapter 34 ✦ Web Development SoftwareTipFledgling Web designers needing a handful of tools should look into Macro-media’s Studio product line. The Studio series provides Dreamweaver, Flash,Freehand, and Fireworks ...

  • Page 595

    P1: KTXWY022-34WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:11566www.freepdf-books.com

  • Page 596

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:123535CH AP T ERChoosing aService Provider✦✦✦✦In This ChapterWeb Publishing ServicesProvided by ISPsEstimating your CostsSupport and ServiceBandwidth and ScalabilityContractsDomain Names✦✦✦✦Nowthatyou’rea...

  • Page 597

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12568 Part V ✦ Testing, Publishing, and Maintaining Your SiteWeb publishing services provided by ISPsA Web publishing service or personal Web hosting service is a very basic Web hostingservice that is generally part of t...

  • Page 598

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12569Chapter 35 ✦ Choosing a Service Provideravailable by the hosting company to you can vary widely. Some will simply set upyour box with a Web site already running, but they’ll also let you set up the serveryourself ...

  • Page 599

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12570 Part V ✦ Testing, Publishing, and Maintaining Your Site✦ CGI Access—Simply means that a CGI directory is made available on a UNIX orLinux server so that you can create Perl-based executable scripts for moredyna...

  • Page 600

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12571Chapter 35 ✦ Choosing a Service ProviderBandwidth and ScalabilityOne of your chief considerations in choosing a host provider is whether or not thehost provider can handle the traffic demands of your site. If you h...

  • Page 601

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12572 Part V ✦ Testing, Publishing, and Maintaining Your SiteThe Domain Name System (DNS) is used to map a name to a static IP address.Computers use these to communicate with themselves using a name (such aswww.tumeric.n...

  • Page 602

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12573Chapter 35 ✦ Choosing a Service Providerwhether you host it yourself, use a co-location service, or use a Web hosting servicewith a dedicated hosting plan.One thing to keep in mind is that Web hosting services are i...

  • Page 603

    P1: KTXWY022-35WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200415:12574www.freepdf-books.com

  • Page 604

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:123636CH AP T ERUploading YourSite with FTP✦✦✦✦In This ChapterIntroducing FTPFTP ClientsPrinciples of Web ServerFile Organization✦✦✦✦NowthatyouhavedocumentstodeployontheWeb,howdo you actually move the file...

  • Page 605

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12576 Part V ✦ Testing, Publishing, and Maintaining Your SiteClient102610272120FTPServerCommandCommandDataDataFigure 36-1: A typical FTP connection.the server from accessing the correct port. Because the client port isn...

  • Page 606

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12577Chapter 36 ✦ Uploading Your Site with FTPthen transfers a file. For clarity, the commands entered by the user are in boldface:$ftp ftp.example.comConnected to ftp.example.com.220 ftp.example.com FTP server ready.Na...

  • Page 607

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12578 Part V ✦ Testing, Publishing, and Maintaining Your SiteContinuedSome FTP servers will automatically switch file modes as required, but most FTP serversrequire that the mode be explicitly changed. Some FTP clients ...

  • Page 608

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12579Chapter 36 ✦ Uploading Your Site with FTPTable 36-1Common FTP CommandsCommandSyntaxUseAsciiAsciiSwitch to ASCII mode for file transfersBinaryBinarySwitch to binary mode for file transfersCdcd directory nameChange ...

  • Page 609

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12580 Part V ✦ Testing, Publishing, and Maintaining Your Site•CuteFTP—This popular Shareware client contains a number of features tomake FTP transfers easier. It provides a download queue, macrorecording, and a sched...

  • Page 610

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12581Chapter 36 ✦ Uploading Your Site with FTPRoot of siteMain/home page/documentImagesAll images for the siteScriptsExternal scriptsProductsDocuments for the Products sectionAboutDocuments for the About sectionContactDo...

  • Page 611

    P1: KTXWY022-36WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:12582www.freepdf-books.com

  • Page 612

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:163737CH AP T ERPublicizing YourSite and BuildingYour Audience✦✦✦✦In This ChapterSoliciting LinksListing your Site withSearch EnginesFacilitating Search EngineAccessPredicting Users’ SearchKeywords and EnhancingS...

  • Page 613

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16584 Part V ✦ Testing, Publishing, and Maintaining Your SiteUsing link exchangesOne of the oldest methods for soliciting links is to exchange them with other Websites. This usually takes the form of an informal arrangem...

  • Page 614

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16585Chapter 37 ✦ Publicizing Your Site and Building Your Audiencegenerally take the form of Web interfaces that ask you to fill out somecomprehensive forms that help describe the following about your Web site:✦ The n...

  • Page 615

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16586 Part V ✦ Testing, Publishing, and Maintaining Your Sitehas many other sites pointing to it, this will enhance your page ranking in searchengines. If you aren’t having any luck getting other sites to link to you, ...

  • Page 616

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16587Chapter 37 ✦ Publicizing Your Site and Building Your AudienceMeta tags involve the use of HTML’s meta element. The two primary types of metatags are Meta Descriptions and Meta Keywords.Using Meta DescriptionThis e...

  • Page 617

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16588 Part V ✦ Testing, Publishing, and Maintaining Your SiteCreating “Intelligent” URLsYou can also improve your search engine optimization by building “intelligent” URLs,which simply means that your URLs have r...

  • Page 618

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16589Chapter 37 ✦ Publicizing Your Site and Building Your AudienceProviding resource servicesOne of the best ways to both attract people to your site and keep them coming back,is to provide a service or resource that kee...

  • Page 619

    P1: JYSWY022-37WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200422:16590 Part V ✦ Testing, Publishing, and Maintaining Your SiteRedundant URL submissionsAs you’ll see in the sections that follow, most Web site indexing services, such asYahoo and Alta Vista, provide an online form wher...

  • Page 620

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:463838CH AP T ERMaintainingYour Site✦✦✦✦In This ChapterAnalyzing Usage viaServer LogsChecking for Broken LinksResponding to FeedbackBacking up your Data✦✦✦✦Throughoutthisbook,youhavelearnedhowtocreateonline...

  • Page 621

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46592 Part V ✦ Testing, Publishing, and Maintaining Your SiteThe main advantage to Analog is its capability to quickly process many different logfile formats. This enables Webmasters to compile data from log files on d...

  • Page 622

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46593Chapter 38 ✦ Maintaining Your SiteWebalizerWebalizer is similar to Analog, providing fast processing of log files into HTMLreports. Also written in C, Webalizer is highly portable, and binary versions areavailable ...

  • Page 623

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46594 Part V ✦ Testing, Publishing, and Maintaining Your SiteAWStats on a regular basis, reading the log files as they are generated instead of afterthe fact. The advantage to this approach is that your statistic pages ...

  • Page 624

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46595Chapter 38 ✦ Maintaining Your SiteFinding the right log analyzerAll three programs covered in this session provide detailed logs that you can use tohelp troubleshoot your site, fine-tune your server, or just provid...

  • Page 625

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46596 Part V ✦ Testing, Publishing, and Maintaining Your SiteFigure 38-4: The W3C Link Checker.•Use the Accept-Language headers option to control whether theAccept-Language headers are used during checking.•To check ...

  • Page 626

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46597Chapter 38 ✦ Maintaining Your SiteFigure 38-5: The online W3C Link Checker in action.Checkers built into development toolsMany Web development tools have integrated link checkers that you can use whileyou develop yo...

  • Page 627

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46598 Part V ✦ Testing, Publishing, and Maintaining Your SiteFigure 38-6: Macromedia Dreamweaver has a link checker feature built in so you cancheck your links as you develop your site.TipMany Linux distributions come wi...

  • Page 628

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46599Chapter 38 ✦ Maintaining Your Sitee-mail address), or obscure the address by using a form or other tool to actuallyperform the mailing.Figure 38-7: Server logs report 404 (Document not found) errors that can point t...

  • Page 629

    P1: JYSWY022-38WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 9, 200421:46600 Part V ✦ Testing, Publishing, and Maintaining Your SiteTipUse the archiving utility on your server (ZIP or tar) to routinely create com-pressed archives of your files. The copies will transfer faster and are easie...

  • Page 630

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34PARTVIVIPrinciples ofProfessionalWeb Design andDevelopment✦✦✦✦In This PartChapter 39The WebDevelopmentProcessChapter 40Developing andStructuringContentChapter 41Designing forUsability andAccessibilityChapter 42D...

  • Page 631

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34602www.freepdf-books.com

  • Page 632

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:343939CH AP T ERThe WebDevelopmentProcess✦✦✦✦In This ChapterChallenges of DevelopingLarge Web SitesProject Management BasicsThe Need for InformationArchitectureOverview of the WebDevelopment ProcessDesigning your ...

  • Page 633

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34604 Part VI ✦ Principles of Professional Web Design and Development1. Establish your priorities through goal and audience definition.2. Generate a requirements analysis.3. Produce engineering documents that meet the ...

  • Page 634

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34605Chapter 39 ✦ The Web Development ProcessThe Need for Information ArchitectureThe next step in creating a plan for your Web site is to determine its architecture.This includes determining what kind of environment yo...

  • Page 635

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34606 Part VI ✦ Principles of Professional Web Design and Developmentmultiple operating systems). If you want to run static HTML pages, pick theoperating environment you’re most comfortable with.Overview of the Web De...

  • Page 636

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34607Chapter 39 ✦ The Web Development ProcessRequirements analysisMost large sites start off with something called a Project Requirements Document orFunctional Requirements Document, which is a comprehensive document wr...

  • Page 637

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34608 Part VI ✦ Principles of Professional Web Design and DevelopmentHome PageServicesconsultationfund raisinglegalAbout Uscontact usour locationour teamFigure 39-1: Schematic for a simple Web site.NoteFor an introducti...

  • Page 638

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34609Chapter 39 ✦ The Web Development Processcheckout() : voidreview() : voidupdate() : voiddelete() : voidrootDefault.jspServiceShopping Cartnewitem : IntnewOperation(): voidlogin.jspauthenticate() : voidPublicWebGuest...

  • Page 639

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34610 Part VI ✦ Principles of Professional Web Design and Development✦ MS SQL Server is a good choice if you know you’re going to be using aMicrosoft-based Web development environment. SQL Server is extremelypowerfu...

  • Page 640

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34611Chapter 39 ✦ The Web Development Process<%= myAppServer.Write(“Hello, World!”)%></body></html>The bolded code represents a fictional application server language calledWowServerPages (WSP) tha...

  • Page 641

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34612 Part VI ✦ Principles of Professional Web Design and Developmentsites contains numerous data-binding mechanisms geared specifically to workwith SQL Server, although it also works well with MySQL, because many of t...

  • Page 642

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34613Chapter 39 ✦ The Web Development Processfrugality and, as a result, much stronger Web sites), but you can still hold a smallsoiree to publicize your site to key players in your industry.✦ Take an ad out in a trad...

  • Page 643

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34614 Part VI ✦ Principles of Professional Web Design and DevelopmentIn the preceding line from an access log, someonesmachine_sf_someISP_hub isthe name of the computer that made a request for /services/index.html on th...

  • Page 644

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34615Chapter 39 ✦ The Web Development ProcessToday’s Web sites have grown in sophistication because we now have so muchknowledge to start with. There are many best cases out there, and a well-planned sitewill take adv...

  • Page 645

    P1: JYSWY022-39WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:34616www.freepdf-books.com

  • Page 646

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:364040CH AP T ERDeveloping andStructuringContent✦✦✦✦In This ChapterPrinciples of AudienceAnalysisPerforming an InformationInventoryChunking InformationHow Users Read the WebDeveloping EasilyScanned TextDeveloping M...

  • Page 647

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36618 Part VI ✦ Principles of Professional Web Design and Developmenton the demographics of your visitors, and provide information on how they came toyour site. You can also create surveys and registration pages with for...

  • Page 648

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36619Chapter 40 ✦ Developing and Structuring ContentIf you organize your chunks effectively, it will be obvious on your Web site, becausethe site itself will appear organized. This enhances the viewing experience for use...

  • Page 649

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36620 Part VI ✦ Principles of Professional Web Design and Development✦ Use half the word count (or less) you would use in conventional writing. Thisdoesn’t need to be a hard and fast rule. You can alter it by develop...

  • Page 650

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36621Chapter 40 ✦ Developing and Structuring ContentWeb sites, too, but their tone and purpose must be much different to be effective. Ona Web site, users expect all the information they see to have some immediaterelevan...

  • Page 651

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36622 Part VI ✦ Principles of Professional Web Design and Development✦ Use the strong tag or colored text (but not blue, unless it’s for a hyperlink) tohighlight keywords and a bold face font to highlight key points ...

  • Page 652

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36623Chapter 40 ✦ Developing and Structuring Contentquickly under the heat of a print deadline, reporters developed a style of article andnews story writing that made the decisions on where to cut off a story easy. Thede...

  • Page 653

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36624 Part VI ✦ Principles of Professional Web Design and Developmentkeyword or two isn’t enough. But, if you overdo it, they lose their effectiveness. So,try to limit a bulleted list to seven items or fewer, and each ...

  • Page 654

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36625Chapter 40 ✦ Developing and Structuring Content✦ Links pages are specifically designed to provide additional resources for yourWeb site visitors.✦ What’s New pages keep your visitors informed about additions ...

  • Page 655

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36626 Part VI ✦ Principles of Professional Web Design and DevelopmentFigure 40-2: A category menu for a subcategory.Figure 40-3: The link in the subcategory disappears when that link is visited.www.freepdf-books.com

  • Page 656

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36627Chapter 40 ✦ Developing and Structuring ContentThe layout is organized in a way that will make sense to most visitors to the site. Thefocus is on easy navigation. One exercise to give yourself is to take a few parag...

  • Page 657

    P1: JYSWY022-40WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20048:36628 Part VI ✦ Principles of Professional Web Design and Developmentcopy. Your own Web site will have its own special needs. You can learn a lot byreviewing other sites, not only for what they’re doing right, but what...

  • Page 658

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:494141CH AP T ERDesigning forUsability andAccessibility✦✦✦✦In This ChapterUsability IssuesAccessibility MandatesAccessibility Issues✦✦✦✦Manyoftheprinciplesofusabilityandaccessibilityarethe same. For exampl...

  • Page 659

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49630 Part VI ✦ Principles of Professional Web Design and Developmentfocus on the usability of the site, including such topics as navigation, ease ofpurchase (if a shopping component exists on your site), and so on. The...

  • Page 660

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49631Chapter 41 ✦ Designing for Usability and AccessibilityConsistency and ease of use are the order of the day. Some Web usability expertseven recommend that you copy the design of the most successful sites. While that...

  • Page 661

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49632 Part VI ✦ Principles of Professional Web Design and Developmentfeel a genuine business need to visit your site during business hours and may in factbe doing business for their company through your Web site, but if...

  • Page 662

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49633Chapter 41 ✦ Designing for Usability and AccessibilityOne general survey of the Web found that a majority of sites use 12-point fonts(size= 3) for most written content. Check out the survey at http://psychology.wic...

  • Page 663

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49634 Part VI ✦ Principles of Professional Web Design and Developmentup100% of the screen, and content will collapse and expand when a user resizes thewindow. See Figures 41-1 and 41-2 for examples to see how a flex ta...

  • Page 664

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49635Chapter 41 ✦ Designing for Usability and AccessibilityFigure 41-2: A flex table as rendered in a re-sized browser window.LegibilityMaking sure your Web site is legible is another important aspect to usability. Are...

  • Page 665

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49636 Part VI ✦ Principles of Professional Web Design and Development✦ Personalization. Users have been shown to be willing to register to a site if theycan have some customized preferences. If you can drop a cookie t...

  • Page 666

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49637Chapter 41 ✦ Designing for Usability and Accessibilityspecific as possible in as few words as possible and allow your visitors to move on,hopefully to another section on your site.Windows 1252 character setThe bot...

  • Page 667

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49638 Part VI ✦ Principles of Professional Web Design and DevelopmentAccessibility MandatesIf you’re not motivated to improve accessibility by the inherent kindness in yourheart or by the hard numbers of lost market s...

  • Page 668

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49639Chapter 41 ✦ Designing for Usability and AccessibilityWeb Content Accessibility Initiative (W3C)The W3C’s Web Accessibility Initiative (WAI) provides a comprehensive Web sitecontaining substantial amounts of info...

  • Page 669

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49640 Part VI ✦ Principles of Professional Web Design and DevelopmentThese are all things you can do easily to help your Web users enjoy your site. Youshould focus on using traditional HTML markup, such as em and strong...

  • Page 670

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49641Chapter 41 ✦ Designing for Usability and Accessibilityhave a significant positive impact on your users. Among these tools are thefollowing:✦ Magnifiers✦ Screen readers✦ Closed captioning✦ Keyboard enhance...

  • Page 671

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49642 Part VI ✦ Principles of Professional Web Design and DevelopmentTable 41-1 (continued)ToolTechnique to Use for AccessibilityOr, you can provide a hidden link that a voice browserwill pick up, but would be invisible...

  • Page 672

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49643Chapter 41 ✦ Designing for Usability and AccessibilityUsing forms and PDFOnline forms should have a Telecommunications Device for the Deaf (TDD) phonenumber available so that persons with disabilities can call your...

  • Page 673

    P1: KTUWY022-41WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200419:49644www.freepdf-books.com

  • Page 674

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:74242CH AP T ERDesigning for anInternationalAudience✦✦✦✦In This ChapterPrinciples ofInternationalization andLocalizationIntroduction to WebInternationalizationUnderstanding Unicode✦✦✦✦Eventhoughthisbookisw...

  • Page 675

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7646 Part VI ✦ Principles of Professional Web Design and DevelopmentYou may only need to translate a portion of your site, but translation is obviously anessential first ingredient to localization. Setting aside transl...

  • Page 676

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7647Chapter 42 ✦ Designing for an International AudienceUnderstanding UnicodeUnicode is a standard developed by The Unicode Consortium for processing theworld’s alphabets in a consistent way. The Unicode Consortium is...

  • Page 677

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7648 Part VI ✦ Principles of Professional Web Design and DevelopmentTable 42-1 (continued)Start CodeEnd CodeBlock Name\u0B80\u0BFFTamil\u0C00\u0C7FTelugu\u0C80\u0CFFKannada\u0D00\u0D7FMalayalam\u0E00\u0E7FThai\u0E80\u0E...

  • Page 678

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7649Chapter 42 ✦ Designing for an International AudienceStart CodeEnd CodeBlock Name\u3040\u309FHiragana\u30A0\u30FFKatakana\u3100\u312FBopomofo\u3130\u318FHangul Compatibility Jamo\u3190\u319FKanbun\u3200\u32FFEnclosed...

  • Page 679

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7650 Part VI ✦ Principles of Professional Web Design and DevelopmentTo get a handle on how this works, let’s examine a code page most of us are familiarwith, Basic Latin.Basic Latin (U+0000 - U+007F)All nations in Ame...

  • Page 680

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7651Chapter 42 ✦ Designing for an International AudienceTable 42-2ISO-8859-1 HTML EntitiesDecimal-basedCharacter as itDescriptionCode ValueHTML Entityappears on Web Pagequotation mark&#34;&quot;”Ampersand&...

  • Page 681

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7652 Part VI ✦ Principles of Professional Web Design and DevelopmentTable 42-2 (continued)Decimal-basedCharacter as itDescriptionCode ValueHTML Entityappears on Web Pagemiddle dot&#183;&middot;•Cedilla&#18...

  • Page 682

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7653Chapter 42 ✦ Designing for an International AudienceDecimal-basedCharacter as itDescriptionCode ValueHTML Entityappears on Web Pagecapital Eth, Icelandic&#208;&ETH;&Dstrok;capital N, tilde&#209;&...

  • Page 683

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7654 Part VI ✦ Principles of Professional Web Design and DevelopmentTable 42-2 (continued)Decimal-basedCharacter as itDescriptionCode ValueHTML Entityappears on Web Pagesmall e, grave accent&#232;&egrave;`esmall...

  • Page 684

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7655Chapter 42 ✦ Designing for an International AudienceTipOne of the nastiest encoding problems occurs with the trademark symbol.Different encodings use different numeric representations for it, and Macintoshand Window...

  • Page 685

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7656 Part VI ✦ Principles of Professional Web Design and Development✦ Breton✦ Catalan✦ Croatian✦ Czech✦ Esperanto✦ Estonian✦ French✦ Frisian✦ Greenlandic✦ Hungarian✦ Latin✦ Latvian✦ Lithuanian...

  • Page 686

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7657Chapter 42 ✦ Designing for an International AudienceWestern languages, it’s fine to use ISO-8859-1, because it’s essentially a subset ofUTF-8. The other problem is that many sites in countries such as China don...

  • Page 687

    P1: KTUWY022-42WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:7658www.freepdf-books.com

  • Page 688

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:74343CH AP T ERSecurity✦✦✦✦In This ChapterUnderstanding the RisksWeb Site Security IssuesOverview of WebSecurity Methods✦✦✦✦Throughoutthisbook,wehavetriedtoemphasizesecurity,bringing up issues when appropri...

  • Page 689

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7660 Part VI ✦ Principles of Professional Web Design and DevelopmentDenial of serviceDenial of service (DOS) attacks are attempts (and usually successes) at overloadinga server with bogus requests. The volume of requests...

  • Page 690

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7661Chapter 43 ✦ SecurityCustomers who can’t access a site due to a DOS attack may not return to give the sitetheir business. Customers also are leery of sites that are victims of break-ins or datatheft, fearing that t...

  • Page 691

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7662 Part VI ✦ Principles of Professional Web Design and DevelopmentIn the preceding example, the file is owned by your user ID, with read, write, andexecute permissions. The group ownership is set to the user ID that t...

  • Page 692

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7663Chapter 43 ✦ Securityserver user instead of the world, and protect your CGI directories frombrowsing.✦ Follow the same rules with your scripts that you do with your operatingsystem and applications—audit their lo...

  • Page 693

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7664 Part VI ✦ Principles of Professional Web Design and DevelopmentOverview of Web Security MethodsThe previous sections covered specific risks and solutions. This section coverspreventative solutions—things that you...

  • Page 694

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7665Chapter 43 ✦ Securityenable the Windows update service. Linux users should use up2date (Red Hat), apt(Debian), or other automated update service.Excluding search enginesExcluding certain files and directories from s...

  • Page 695

    P1: JYSWY022-43WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20045:7666 Part VI ✦ Principles of Professional Web Design and Developmentthey say they are. It’s a means of providing ID to users of your site and saying “youcan trust me because I am who I say I am.”There are quite a f...

  • Page 696

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:494444CH AP T ERPrivacy✦✦✦✦In This ChapterUnderstanding PrivacyPrivacy Legislation andRegulations in the EUVoluntary SolutionsModel Privacy Pages✦✦✦✦Privacyisoneofthemostimportantconsiderationsintheminds of...

  • Page 697

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49668 Part VI ✦ Principles of Professional Web Design and Development✦ The Patriot Act✦ The Fair Credit Reporting ActHow much these impact you depends on a number of factors. For example, if yourWeb site is geared to...

  • Page 698

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49669Chapter 44 ✦ Privacy✦ Your Web site’s policy and intent on disclosure of collected information. Youmust disclose the kinds of businesses that have access to this information,why it’s being passed along, and wh...

  • Page 699

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49670 Part VI ✦ Principles of Professional Web Design and DevelopmentYou can review the law itself in PDF format here:www.dhs.gov/dhspublic/interweb/assetlibrary/hr_5005_enr.pdf&e=7417Fair Credit Reporting ActIf you...

  • Page 700

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49671Chapter 44 ✦ PrivacyVoluntary SolutionsAs previously mentioned, the United States tends to have less stringent lawsregarding polices than the EU, but generally companies and organizations, especiallythose with subst...

  • Page 701

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49672 Part VI ✦ Principles of Professional Web Design and DevelopmentListing 44-1 (continued)Avenue</DATA><DATA ref=“#business.contact-info.postal.city”>San Francisco</DATA><DATA ref=“#business...

  • Page 702

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49673Chapter 44 ✦ PrivacyListing 44-1 shows a limited number of STATEMENT elements, but you can use one forevery instance of data collection that exists on your Web site. Each instance isdescribed by a STATEMENT element ...

  • Page 703

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49674 Part VI ✦ Principles of Professional Web Design and DevelopmentListing 44-2 (continued)<input message=“somens:commentReq”/><output message=“myntypes:commentResp”/></operation></interfac...

  • Page 704

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49675Chapter 44 ✦ Privacyinclude the following:✦ TRUSTe. “TRUSTe Privacy Seals are committed to abiding by a privacy policythat gives users notice, choice, access, security, and redress with regard totheir personal i...

  • Page 705

    P1: JYSWY022-44WY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 10, 20047:49676 Part VI ✦ Principles of Professional Web Design and Developmentapproach the W3C and independent privacy consultants take. Generally, the privacymodel dictates that you provide access to your policies through easy-t...

  • Page 706

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18PARTVIIVIIAppendixes✦✦✦✦In This PartAppendix AHTML 4.01ElementsAppendix BCSS Properties✦✦✦✦677www.freepdf-books.com

  • Page 707

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18678www.freepdf-books.com

  • Page 708

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18AAA P PEN D I XHTML 4.01Elements✦✦✦✦In This AppendixReading this ReferenceXHTMLAlphabetical List ofthe ElementsEvent AttributesOther Common Attributes✦✦✦✦Parent elements are indicated only where there...

  • Page 709

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18680 Part VII ✦ Appendixes✦ Because XML is case-sensitive, all elements and attributes must belowercase.✦ Attribute values must always be quoted.✦ Minimized attributes are not allowed. Attributes that do not t...

  • Page 710

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18681Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipAny type of URL may be used here.Example<a href=“http://www.g...

  • Page 711

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18682 Part VII ✦ AppendixesDisplayInlineClassificationInlineContentInline and textAttributesGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipSee <a...

  • Page 712

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18683Appendix A ✦ HTML 4.01 Elementsapplet (deprecated)ContextPurposeIncorporate a Java appletStart/End TagRequired/RequiredDisplayBlockClassificationInlineContentAny block, inline, and text; any<param> elemen...

  • Page 713

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18684 Part VII ✦ AppendixesParent<map>ContentEmptyAttributesRequiredOptionalDeprecatedalt = “description”shape = (rect|circle|poly|default)target = “frame”coords = “length, length”href = “URL”no...

  • Page 714

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18685Appendix A ✦ HTML 4.01 ElementsUsageTipBe careful to close this element properly, and don’t overlap withsimilar tags like <i>. Nest them instead.Example<b>This is bold, <i>this is bold italic...

  • Page 715

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18686 Part VII ✦ AppendixesUsageTipUse CSS instead by assigning style to the body tag.Example<basefont face=“Arial, Helvetica” color=“blue” size=“10”>bdoContextPurposeOverride the default text direc...

  • Page 716

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18687Appendix A ✦ HTML 4.01 ElementsAttributesGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipBe careful to close this element properly, and don’t o...

  • Page 717

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18688 Part VII ✦ AppendixesExample<blockquotecite=“http://www.archives.gov/national_archives_experience/declaration_transcript.html”>When in the Course of human events, it becomes necessary for one people t...

  • Page 718

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18689Appendix A ✦ HTML 4.01 ElementsbrContextPurposeInsert a line breakStart/End TagRequired/ForbiddenClassificationInlineContentEmptyAttributesRequiredOptionalDeprecatedclear = (left|all|right|none)GeneralCore (id,...

  • Page 719

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18690 Part VII ✦ Appendixestabindex = “sequence value”accesskey = “key”onfocus = “script”onblur = “script”GeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end ...

  • Page 720

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18691Appendix A ✦ HTML 4.01 Elementscenter (deprecated)ContextPurposeAlign contents in the center of the enclosing blockStart/End TagRequired/RequiredDisplayBlockClassificationBlockContentBlock, inline, and textAttr...

  • Page 721

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18692 Part VII ✦ AppendixesUsageTipTypically rendered in italics.Example<cite>Leaves of Grass</cite> by Walt WhitmancodeContextPurposeIdentify the enclosed text as computer codeStart/End TagRequired/Requi...

  • Page 722

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18693Appendix A ✦ HTML 4.01 Elementschar = “alignment character”charoff = “alignment char offset”valign = (top|middle|bottom|baseline)GeneralCore (id, class, style, title)Internationalization (lang, dir)Stand...

  • Page 723

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18694 Part VII ✦ AppendixesUsageTipThis tag and <col> are designed to provide a central place toapply attributes to all the cells in a column. Be warned,however, that most browsers do not support this properly,...

  • Page 724

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18695Appendix A ✦ HTML 4.01 ElementsAttributesRequiredOptionalDeprecatedcite = ”URL”datetime = “ISO date”GeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of append...

  • Page 725

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18696 Part VII ✦ Appendixesdir (deprecated)ContextPurposeOriginally intended for multi-column directory listings, it isrendered like <ul>.Start/End TagRequired/RequiredDisplayBlockClassificationBlockContent<...

  • Page 726

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18697Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTip<div> (a block) and <span> (an inline) provide a conve...

  • Page 727

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18698 Part VII ✦ AppendixesClassificationBlockContent<dt> and <dd>AttributesRequiredOptionalDeprecatedcompactGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end ...

  • Page 728

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18699Appendix A ✦ HTML 4.01 ElementsemContextPurposeMark text as emphasisStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentInline and textAttributesGeneralCore (id, class, style, title)Internatio...

  • Page 729

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18700 Part VII ✦ Appendixesfont (deprecated)ContextPurposeDefine presentational style for textStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentInline and textAttributesRequiredOptionalDeprecate...

  • Page 730

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18701Appendix A ✦ HTML 4.01 ElementsRequiredOptionalDeprecatedaction = “URL”method = (GET|POST)enctype = “MIME type”accept = “MIME type”name = “form name”onsubmit = “script”onreset = “script”a...

  • Page 731

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18702 Part VII ✦ AppendixesframeContextPurposeDescribe the content for a single frame of a pageStart/End TagRequired/ForbiddenDisplayBlockParent<frameset>ContentEmptyAttributesRequiredOptionalDeprecatedlongdesc...

  • Page 732

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18703Appendix A ✦ HTML 4.01 ElementsParent<html>Content<frameset>, <frame>, <noframes>AttributesRequiredOptionalDeprecatedrows = “height, height . . . ”cols = “width, width . . . ”onlo...

  • Page 733

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18704 Part VII ✦ AppendixesStart/End TagRequired/RequiredDisplayBlockClassificationBlockContentInline and textAttributesRequiredOptionalDeprecatedalign = (left|center|right|justify)GeneralCore (id, class, style, tit...

  • Page 734

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18705Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipAs with <body>, to be compliant with XHTML treat theopen and...

  • Page 735

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18706 Part VII ✦ AppendixesInternationalization (lang, dir)Standard Events (see end of appendix)UsageTipStyling <hr> with CSS is problematic due to pronounceddifferences between browsers. You may wish to usebor...

  • Page 736

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18707Appendix A ✦ HTML 4.01 ElementsiContextPurposeItalic textStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentInline and textAttributesGeneralCore (id, class, style, title)Internationalization ...

  • Page 737

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18708 Part VII ✦ Appendixesmarginwidth = “pixels”marginheight = “pixels”scrolling = (yes|no|auto)align = (top|middle|bottom|left|right)height = “pixels or relative”width = “pixels or relative”GeneralC...

  • Page 738

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18709Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipAlways use the altattribute to enhance accessibility. If the image...

  • Page 739

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18710 Part VII ✦ Appendixesismaptabindex = “sequence value”accesskey = “key”onfocus = “script”onblur = “script”onselect = “script”onchange = “script”accept = “MIME type, . . . ”GeneralCore...

  • Page 740

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18711Appendix A ✦ HTML 4.01 ElementsUsageTip<del> and <ins> are unusual. They can operate either asinline or block elements, and can appear anywhereinside the <body> element.ExampleSee <del>is...

  • Page 741

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18712 Part VII ✦ AppendixesClassificationInlineContentInline and textAttributesGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipUsually rendered in mo...

  • Page 742

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18713Appendix A ✦ HTML 4.01 ElementsExampleSee <form>legendContextPurposeTitle for related form contentStart/End TagRequired/RequiredDisplayInlineParent<fieldset>ContentInline and textAttributesRequiredO...

  • Page 743

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18714 Part VII ✦ AppendixesAttributesRequiredOptionalDeprecatedtype = (1|a|A|i|I|disc|square|circle)value = “sequence number”GeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (s...

  • Page 744

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18715Appendix A ✦ HTML 4.01 ElementsUsageTipDefining navigation links in a set of documentswith meaningful linear navigation can dramaticallyenhance usability in those browsers thatunderstand them.ExampleSee <hea...

  • Page 745

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18716 Part VII ✦ Appendixesmenu (deprecated)ContextPurposeCreate a single-column menu listStart/End TagRequired/RequiredDisplayBlockClassificationBlockContent<li> elements that are constrained to containinline...

  • Page 746

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18717Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipAny character encoding should be the first<meta> tag in the...

  • Page 747

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18718 Part VII ✦ AppendixesUsageTipMost commonly used as the last tag in a <frameset>, thismay also be used in documents incorporated into a frame.ExampleSee <frameset>noscriptContextPurposeProvide conten...

  • Page 748

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18719Appendix A ✦ HTML 4.01 ElementsAttributesRequiredOptionalDeprecateddeclarealign = (top|middle|bottom|left|right)classid = “URI”border = “pixels”codebase = “URI”hspace = “pixels”data = “URL”vs...

  • Page 749

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18720 Part VII ✦ AppendixesolContextPurposeCreate a numbered (“ordered”) listStart/End TagRequired/RequiredDisplayBlockClassificationBlockContentOne or more <li> elementsAttributesRequiredOptionalDeprecate...

  • Page 750

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18721Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipFuture versions of HTML may allow for nested<optgroup> eleme...

  • Page 751

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18722 Part VII ✦ AppendixespContextPurposeDefine a paragraph of body textStart/End TagRequired/OptionalDisplayBlockClassificationBlockContentInline and textAttributesRequiredOptionalDeprecatedalign = (left|center|r...

  • Page 752

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18723Appendix A ✦ HTML 4.01 ElementsUsageTipWhen used, this tag should be the first child of<object> or <applet>.ExampleSee <object>preContextPurposeDefine a block of text with preserved white spa...

  • Page 753

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18724 Part VII ✦ AppendixesqContextPurposeMark in inline quotationStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentinline and textAttributesRequiredOptionalDeprecatedcite = “URI”GeneralCore ...

  • Page 754

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18725Appendix A ✦ HTML 4.01 ElementsUsageTipUse CSS instead: text-decoration: line-through.ExampleSee <strike>sampContextPurposeIdentify computer outputStart/End TagRequired/RequiredDisplayInlineClassification...

  • Page 755

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18726 Part VII ✦ AppendixesRequiredOptionalDeprecatedtype = “MIME type”charset = “character encoding”language = “ language name”src = “URL”deferGeneralCore (id, class, style, title)Internationalizatio...

  • Page 756

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18727Appendix A ✦ HTML 4.01 ElementsRequiredOptionalDeprecatedname = “form name”size = “visible rows”multipledisabledtabindex = “sequence value”onfocus = “script”onblur= “script”onchange = “scri...

  • Page 757

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18728 Part VII ✦ AppendixessmallContextPurposeDisplay text in a small fontStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentinline and textAttributesGeneralCore (id, class, style, title)Internati...

  • Page 758

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18729Appendix A ✦ HTML 4.01 ElementsTip<div> (a block) and <span> (an inline) provide aconvenient grouping mechanism for applying CSSstyle. Use the classattribute for the CSS selectors.ExampleSee <stri...

  • Page 759

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18730 Part VII ✦ AppendixesAttributesGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipTypically rendered in bold.Example<p><em>Stop</em&...

  • Page 760

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18731Appendix A ✦ HTML 4.01 Elementssub, supContextPurposeSubscripted (<sub>) or superscripted (<sup>) textStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentInline and textAttributesG...

  • Page 761

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18732 Part VII ✦ Appendixesborder = “pixels”frame = (void|above|below|hsides|lhs|rhs|vsides|box|border)rules = (none|groups|rows|cols|all)cellspacing = “pixels or relative”cellpadding = “pixels or relative...

  • Page 762

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18733Appendix A ✦ HTML 4.01 Elements<tr><td scope=‘‘row”>France</th><td>Jacques Chirac</td><td>Jean-Pierre Raffarin</td></tr><tr><td scope=‘‘row”&g...

  • Page 763

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18734 Part VII ✦ AppendixestdContextPurposeDefine a table cellStart/End TagRequired/OptionalParent<tr>ContentBlock, inline, and text.AttributesRequiredOptionalDeprecatedabbr = “abbreviation”nowrapaxis = ...

  • Page 764

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18735Appendix A ✦ HTML 4.01 ElementsClassificationInlineContentTextAttributesRequiredOptionalDeprecatedrows = “number”name = “form name”cols = “number”disabledreadonlytabindex = “sequence value”acces...

  • Page 765

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18736 Part VII ✦ AppendixesRequiredOptionalDeprecatedalign = (left|center|right|justify|char)char = “alignment character”charoff = “pixels or relative”valign = (top|middle|bottom|baseline)GeneralCore (id, cla...

  • Page 766

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18737Appendix A ✦ HTML 4.01 ElementsGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipProviding an abbreviation via the abbrattribute allows speechrende...

  • Page 767

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18738 Part VII ✦ AppendixestitleContextPurposeProvide a caption for the document that is typically not directlyrendered as part of the pageStart/End TagRequired/RequiredParent<head>ContentTextAttributesGeneralC...

  • Page 768

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18739Appendix A ✦ HTML 4.01 ElementsUsageTipIf the first column is a header, use <th scope=“row”> for that cell.ExampleSee <head>ttContextPurposeMonospaced (“teletype”) textStart/End TagRequired/...

  • Page 769

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18740 Part VII ✦ AppendixesAttributesGeneralCore (id, class, style, title)Internationalization (lang, dir)Standard Events (see end of appendix)UsageTipUse CSS instead -- text-decoration: underline.Example<p><...

  • Page 770

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18741Appendix A ✦ HTML 4.01 ElementsvarContextPurposeIndicate an instance of some replaceable value, suchas a variable or argument to a programStart/End TagRequired/RequiredDisplayInlineClassificationInlineContentIn...

  • Page 771

    P1: KTXWY022-App-AWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200417:18742 Part VII ✦ AppendixesOther EventsLess-common event attributes:AttributeTriggered ByonloadDocument has been loadedonunloadDocument was been removedonblurElement lost focusonfocusElement gained focusonresetForm w...

  • Page 772

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12BBA P PEN D I XCSS Properties✦✦✦✦ThisappendixprovidesalaundrylistofsortsofCSS properties with which you may need to be familiar atsome point.Browser SupportHistorically, CSS support in browsers has been errat...

  • Page 773

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12744 Part VII ✦ AppendixesKey to the Property SummariesRegardless of whether a CSS property is automatically inherited, the value inheritis always valid, and thus is not repeated for each property in this appendix.E...

  • Page 774

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12745Appendix B ✦ CSS PropertiesBackground and Color PropertiescolorPurposeSpecify the foreground color of an elementInheritedYesValuesColor code or mnemonicDefaultDefined by browserUsed InAll elementsExample{color:...

  • Page 775

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12746 Part VII ✦ AppendixesValuesColor code or mnemonicDefaultTransparentUsed InAll elementsExample{background-color: #C0C0C0}or{background-color: red}background-imagePurposeInsert a graphic in an element’s backgro...

  • Page 776

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12747Appendix B ✦ CSS Propertiesbackground-repeatPurposeSpecify whether the background image is tiledInheritedNoValuesrepeat-x, repeat-y, repeat, no-repeatDefaultrepeatUsed InAll elementsBox PropertiesborderPurposeSh...

  • Page 777

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12748 Part VII ✦ AppendixesValuesColor code or mnemonicDefaultThe value of the colorpropertyUsed InAll elementsExample{border-right-color: red}border-stylePurposeShorthand method for border stylesInheritedNoValuesSty...

  • Page 778

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12749Appendix B ✦ CSS PropertiesExample{border-width: thin}TipSee border-colorfor the rules on how differentnumbers of values apply.border-{bottom|left|right|top}-widthPurposeSpecify a border side widthInheritedNoVal...

  • Page 779

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12750 Part VII ✦ Appendixesmax-heightPurposeSpecify the maximum height of an elementInheritedNoValues<length>, <percentage>, noneDefaultnoneUsed InBlock, inline-block, and replaced elementsExample{max-hei...

  • Page 780

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12751Appendix B ✦ CSS PropertiesValues<length>, <percentage>, noneDefaultnoneUsed InBlock, inline-block, and replaced elementsExample{max-width: 25em}TipA percentage value is calculated relative to thecon...

  • Page 781

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12752 Part VII ✦ AppendixesValues<length>, <percentage>, autoDefault0Used InAll elements except for grouping table elements(such as <tr> and <colgroup>)Example{margin-left: 5em}TipWhen decidin...

  • Page 782

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12753Appendix B ✦ CSS PropertiesDisplay PropertiesclipPurposeDefine an element’s clipping regionInheritedNoValuesauto—No clippingrect(<top>, <right>, <bottom>, <left>)—BorderoffsetsDefa...

  • Page 783

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12754 Part VII ✦ AppendixesdisplayPurposeSpecify the rendering class in which this elementbelongsInheritedNoValuesinline, block, list-item, run-in, inline-block, table,inline-table, table-row-group, table-header-grou...

  • Page 784

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12755Appendix B ✦ CSS Propertiesoutline-stylePurposeSpecify a style for an outlineInheritedNoValuesSame as border-style (except hiddenis not legal)DefaultnoneUsed InAll elementsoutline-widthPurposeSpecify a width for...

  • Page 785

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12756 Part VII ✦ AppendixesFont PropertiesfontPurposeShorthand method for font propertiesInheritedYesValuesValues for these properties: font-style, font-variant, font-weight,font-size, line-height, and font-familyAdd...

  • Page 786

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12757Appendix B ✦ CSS Propertiesfont-stylePurposeSpecify the face for the current fontInheritedYesValuesnormal, italic, obliqueDefaultnormalUsed InAll elementsfont-variantPurposeAllow for a small capital fontInherite...

  • Page 787

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12758 Part VII ✦ AppendixesDefaultautoUsed InPositioned elementsTipA positioned element is one whose positionproperty isdefined to something other than the default, static.clearPurposeDeclare whether an element will...

  • Page 788

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12759Appendix B ✦ CSS Propertiesz-indexPurposeSpecify the position of an element in athree-dimensional stack (back to front)InheritedNoValuesauto, <integer>DefaultautoUsed InPositioned elementsExample{z-index: ...

  • Page 789

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12760 Part VII ✦ Appendixesletter-spacing, word-spacingPurposeAdd to the default spacing between characters(letter-spacing) or words (word-spacing)InheritedYesValuesnormal, <length> (to be added to the normalsp...

  • Page 790

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12761Appendix B ✦ CSS Propertiestext-transformPurposeChange caseInheritedYesValuescapitalize, uppercase, lowercase, noneDefaultnoneUsed InAll elementsTipThe capitalizevalue will only transform the firstcharacter of ...

  • Page 791

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12762 Part VII ✦ Appendixesvertical-alignPurposeControl the vertical position of an element relative to thecurrent text baselineInheritedNoValuesbaseline—Match the baseline with the element’s parent’smiddle—P...

  • Page 792

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12763Appendix B ✦ CSS Propertieslist-style-positionPurposePlace the list-item marker (bullet or number) relative to the contentInheritedYesValuesinside (the content box), outside (same)DefaultoutsideUsed InElements w...

  • Page 793

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12764 Part VII ✦ Appendixesborder-spacingPurposeShorthand method for border widthsInheritedYesValues<length>Default0Used InTable and inline-table elementsExample{border-spacing: 2pt}TipOnly applicable if border...

  • Page 794

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12765Appendix B ✦ CSS PropertiesDefaultautoUsed InTable elementsTipIf a row after the first has more columns than previouslyseen, the behavior is undefinedGenerated ContentNo version of Internet Explorer supports a...

  • Page 795

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12766 Part VII ✦ Appendixescounter-resetPurposeReset a counter for use by counter()or counters()InheritedNoValues<identifier> <optional integer>, noneDefaultnoneUsed InAll elementsExample{counter-reset: ...

  • Page 796

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12767Appendix B ✦ CSS Propertiesorphans, widowsPurposeSpecify the minimum number of lines from a single paragraph thatmust be left at the bottom (orphans) or top (widows) of a pageInheritedYesValues<integer>Def...

  • Page 797

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12768 Part VII ✦ AppendixeselevationPurposeSeparate voices by altitude on a virtual stageInheritedYesValues<angle>, below, level, above, higher, lowerDefaultlevelUsed InAll elementspausePurposeShorthand method ...

  • Page 798

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12769Appendix B ✦ CSS Propertiespitch-rangePurposeSpecify the variation in average pitchInheritedYesValues<number> between 0 and 100Default50Used InAll elementsplay-duringPurposeProvide a background soundInheri...

  • Page 799

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12770 Part VII ✦ Appendixesspeak-headerPurposeDefine whether the relevant table headerinformation should be spoken before each cellInheritedYesValuesonce, alwaysDefaultonceUsed InElements that have table header info...

  • Page 800

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12771Appendix B ✦ CSS PropertiesstressPurposeDetermine the amount of inflectionInheritedYesValues<number> between 0 and 100Default50Used InAll elementsvoice-familyPurposeRequest specific voicesInheritedYesVal...

  • Page 801

    P1: FCHWY022-App-BWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:12772www.freepdf-books.com

  • Page 802

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:34CCA P PEN D I XNamed Colorsand the WebSafe Palette✦✦✦✦TheHTML4.01specificationrecognizes16distinctcolorsthat can be referred to by name. Those colors are shownin the following table.The “Web safe” color ...

  • Page 803

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:342Part VII ✦ Appendixes16 Named ColorsAquaBlackBlueFuchsiaGrayGreenLimeMaroonNavyOlivePurpleRedSilverTealWhiteYellowWeb Safe Palette#000000R0G0B0#000033R0G0B51#000066R0G0B102#000099R0G0B153#0000CCR0G0B204#0000FFR0G0...

  • Page 804

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:343Appendix C ✦ Named Colors and the Web Safe Palette#006600R0G102B0#006633R0G102B51#006666R0G102B102#006699R0G102B153#0066CCR0G102B204#0066FFR0G102B255#009900R0G153B0#009933R0G153B51#009966R0G153B102#009999R0G153B15...

  • Page 805

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:344Part VII ✦ Appendixes#333300R51G51B0#333333R51G51B51#333366R51G51B102#333399R 51 G 51 B 153#3333CCR51G51B204#3333FFR 51 G 51 B 255#336600R51G102B0#336633R51G102B51#336666R51G102B102#336699R51G102B153#3366CCR51G102...

  • Page 806

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:345Appendix C ✦ Named Colors and the Web Safe Palette#660000R102G0B0#660033R102G0B51#660066R102G0B102#660099R102G0B153#6600CCR102G0B204#6600FFR102G0B255#663300R102G51B0#663333R102G51B51#663366R102G51B102#663399R102G5...

  • Page 807

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:346Part VII ✦ Appendixes#66FF00R102G255B0#66FF33R102G255B51#66FF66R102G255B102#66FF99R102G255B153#66FFCCR102G255B204#66FFFFR102G255B255#990000R153G0B0#990033R153G0B51#990066R153G0B102#990099R153G0B153#9900CCR153G0B20...

  • Page 808

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:347Appendix C ✦ Named Colors and the Web Safe Palette#99CC00R153G204B0#99CC33R153G204B51#99CC66R153G204B102#99CC99R153G204B153#99CCCCR153G204B204#99CCFFR153G204B255#99FF00R153G255B0#99FF33R153G255B51#99FF66R153G255B1...

  • Page 809

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:348Part VII ✦ Appendixes#CC9900R204G153B0#CC9933R204G153B51#CC9966R204G153B102#CC9999R204G153B153#CC99CCR204G153B204#CC99FFR204G153B255#CCCC00R204G204B0#CCCC33R204G204B51#CCCC66R204G204B102#CCCC99R204G204B153#CCCCCCR...

  • Page 810

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:349Appendix C ✦ Named Colors and the Web Safe Palette#FF6600R255G102B0#FF6633R255G102B51#FF6666R255G102B102#FF6699R255G102B153#FF66CCR255G102B204#FF66FFR255G102B255#FF9900R255G153B0#FF9933R255G153B51#FF9966R255G153B1...

  • Page 811

    P1: FRUWY022-App-CWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 14, 200422:3410www.freepdf-books.com

  • Page 812

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:15DDA P PEN D I XLanguage andCountry CodesReference✦✦✦✦LanguageCodes(andoptionally,CountryCodes)areusedwith the lang and dir attributes. The lang attributeassigns a language to the text in a Web page to be read...

  • Page 813

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:152Part VII ✦ AppendixesLanguage familyLanguageName codeAsianBislamabi [not given]AsianBurmesemyAsianCambodiankmAsianChinesezhAsianJapanesejaAsianKoreankoAsianLaotianloAsianThaithAsianTibetanboAsianVietnameseviBaltic...

  • Page 814

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:153Appendix D ✦ Language and Country Codes ReferenceLanguage familyLanguageName codeGermanicEnglishenGermanicFaroesefoGermanicFrisianfyGermanicGermandeGermanicIcelandicisGermanicNorwegiannoGermanicSwedishsvGermanicYi...

  • Page 815

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:154Part VII ✦ AppendixesLanguage familyLanguageName codeInternational aux.EsperantoeoInternational aux.InterlinguaiaInternational aux.InterlingueieInternational aux.Volap ¨ukvoIranianKurdishkuIranianPashto; Pushtops...

  • Page 816

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:155Appendix D ✦ Language and Country Codes ReferenceLanguage familyLanguageName codeOceanic/IndonesianMalaymsOceanic/IndonesianMaorimiOceanic/IndonesianSamoansmOceanic/IndonesianSudanesesuOceanic/IndonesianTagalogtlO...

  • Page 817

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:156Part VII ✦ AppendixesLanguage familyLanguageName codeSlavicRussianruSlavicSerbiansrSlavicSerbo-CroatianshSlavicSlovakskSlavicSlovenianslSlavicUkrainianukTurkic/AltaicAzerbaijaniazTurkic/AltaicBashkirbaTurkic/Altai...

  • Page 818

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:157Appendix D ✦ Language and Country Codes ReferenceCodeCountryATAustriaAUAustraliaAWArubaAZAzerbaidjanBABosnia-HerzegovinaBBBarbadosBDBangladeshBEBelgiumBFBurkina FasoBGBulgariaBHBahrainBIBurundiBJBeninBMBermudaBNBr...

  • Page 819

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:158Part VII ✦ AppendixesCodeCountryCHSwitzerlandCIIvory Coast (Cote D’Ivoire)CKCook IslandsCLChileCMCameroonCNChinaCOColombiaCRCosta RicaCSFormer CzechoslovakiaCUCubaCVCape VerdeCXChristmas IslandCYCyprusCZCzech Re...

  • Page 820

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:159Appendix D ✦ Language and Country Codes ReferenceCodeCountryFMMicronesiaFOFaroe IslandsFRFranceFXFrance (European Territory)GAGabonGBGreat BritainGDGrenadaGEGeorgiaGFFrench GuyanaGHGhanaGIGibraltarGLGreenlandGMGam...

  • Page 821

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:1510 Part VII ✦ AppendixesCodeCountryIDIndonesiaIEIrelandILIsraelINIndiaIOBritish Indian Ocean TerritoryIQIraqIRIranISIcelandITItalyJMJamaicaJOJordanJPJapanKEKenyaKGKyrgyz Republic (Kyrgyzstan)KHCambodia, Kingdom ofK...

  • Page 822

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:1511Appendix D ✦ Language and Country Codes ReferenceCodeCountryLTLithuaniaLULuxembourgLVLatviaLYLibyaMAMoroccoMCMonacoMDMoldaviaMGMadagascarMHMarshall IslandsMKMacedoniaMLMaliMMMyanmarMNMongoliaMOMacauMPNorthern Mar...

  • Page 823

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:1512 Part VII ✦ AppendixesCodeCountryNFNorfolk IslandNGNigeriaNINicaraguaNLNetherlandsNONorwayNPNepalNRNauruNTNeutral ZoneNUNiueNZNew ZealandOMOmanPAPanamaPEPeruPFPolynesia (French)PGPapua New GuineaPHPhilippinesPKPa...

  • Page 824

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:1513Appendix D ✦ Language and Country Codes ReferenceCodeCountrySBSolomon IslandsSCSeychellesSDSudanSESwedenSGSingaporeSHSaint HelenaSISloveniaSJSvalbard and Jan Mayen IslandsSKSlovak RepublicSLSierra LeoneSMSan Mari...

  • Page 825

    P1: KTUWY022-APP-DWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 12, 200422:1514 Part VII ✦ AppendixesCodeCountryTPEast TimorTRTurkeyTTTrinidad and TobagoTVTuvaluTWTaiwanTZTanzaniaUAUkraineUGUgandaUKUnited KingdomUMUSA Minor Outlying IslandsUSUnited StatesUYUruguayUZUzbekistanVAHoly See (Vat...

  • Page 826

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23IndexSymbols & Numbers# 470,identifier, 470,441# 545,PCDATA 545,keyword, 545,516$ 515,query 515,variable, 515,486$ 515,result 515,variable, 515,486(#) 67,hash 67,symbol, 67,38( 90,&nbsp;), 90,61(...

  • Page 827

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 827,774 Index ✦ Symbols & Numbers–A 312,equal 312,sign 312,(=), 312,283 67,hash 67,symbol 67,(#), 67,38HTML document structure 75,<body> 75,tag, 75,46 49,<body>tag, 49,20, 49,21 75,<DOC...

  • Page 828

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 828,775Index ✦ A–B 660,advertising 660,and 660,Web 660,usability, 660,631 271,AIFF 271,(Audio 271,Interchange 271,File 271,Format), 271,242 182,align 182,attribute 182,in 182,table 182,tags, 182,153 1...

  • Page 829

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23776 Index ✦ B–Cborders properties (coninued )border 320,-color, 320,291border 320,-left, 320,291border 320,-left-color, 320,291border 320,-left-style, 320,291border 320,-left-width, 320,291border 320,-right, 3...

  • Page 830

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 830,777Index ✦ C–D 195,column 195,spanning, 195,166 216,columnar 216,formatting, 216,187. See also multiple columns 195,columns 195,and 195,rows 195,spanning, 195,code 195,for, 195,166common event attribu...

  • Page 831

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 831,778 Index ✦ D–Edatabase-driven 508,publishing, 508,479 508,Web 508,content, 508,479 508,Web 508,publishing, 508,introduction 508,to, 508,479decimal entity for 169,accented 169,character, 169,140 168,ap...

  • Page 832

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 832,779Index ✦ E–F 62,hexadecimal 62,value, 62,use 62,of, 62,33 62,using 62,mneumonic 62,code, 62,33 62,entity 62,use, 62,inappropriate, 62,33 263,Eolas 263,lawsuit, 263,234. See also embed element; obj...

  • Page 833

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23780 Index ✦ F–Hframe attribute values (continued ) 186,box 186,or 186,border, 186,157 186,Hsides, 186,157 186,lhs 186,or 186,rhs, 186,157 186,void, 186,157 186,Vsides, 186,157frame layout 222,<frame> ...

  • Page 834

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 834,781Index ✦ H–I 160,teletype 160,tag 160,(<tt>), 160,131 111,unordered 111,list, 111,82 345,vertical 345,alignment, 345,316 72,white 72,spaces, 72,43HTML code, basic rules for 74,code 74,comments...

  • Page 835

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 835,782 Index ✦ I–L 125,interlaced 125,GIF, 125,96, 125,97internationalization attributes 765,dir, 765,736 765,lang, 765,736 486,Internet 486,Explorer 486,filters, 486,457 501,Internet 501,Information 50...

  • Page 836

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 836,783Index ✦ L–N 107,decimal-leading-zero, 107,78 108,georgian, 108,79 108,hebrew, 108,79 108,hiragana, 108,79 108,hiragana-iroha, 108,79 108,katakana, 108,79 108,katakana-iroha, 108,79lower 108,-alpha, 1...

  • Page 837

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 837,784 Index ✦ N–P 598,Network 598,Access 598,Points 598,(NAPs), 598,569 531,NewsGator, 531,502 613,newsgroups, 613,584nodes. See 552,XML 552,Document, 552,523 89,nonbreaking 89,spaces, 89,60 131,nongra...

  • Page 838

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 838,785Index ✦ P–S 495,Random 495,bars 495,vertical, 495,466 495,Random 495,dissolve, 495,466 495,Random, 495,466 495,Split 495,horizontal 495,in, 495,466 495,Split 495,horizontal 495,out, 495,466 495,S...

  • Page 839

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23786 Index ✦ Sscriptable events (continued ) 440,Focus, 440,411 440,keyDown, 440,411 440,keyPress, 440,411 440,keyUp, 440,411 439,Load, 439,410 440,MouseDown, 440,411 439,MouseOut, 439,410 439,MouseOver, 439,41...

  • Page 840

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 840,787Index ✦ S–TStandard Generalized Markup Language. See SGML 69,standard 69,HTML 69,document, 69,40 509,standard 509,HTTP 509,requests, 509,480 109,start 109,attribute, 109,80 488,static 488,filter 4...

  • Page 841

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 841,788 Index ✦ T–W 338,TrueDoc, 338,font 338,standard, 338,309, 338,310 549,type 549,attribute, 549,520U 572,UDDI 572,(Universal 572,Description, 572,Discovery, 572,and 572,Integration), 572,543UML dia...

  • Page 842

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 842,789Index ✦ WWeb browsers 38,Microsoft, 38,9 38,Netscape, 38,9 32,Web 32,client, 32,3. See also Web servers 535,Web 535,configuration 535,file, 535,506Web content development 646,audience 646,analysis, ...

  • Page 843

    P1: FMKWY022-INDWY022/PfaffenbergerWY022/Pfaffenberger-v3.clsJune 15, 20043:23 843,790 Index ✦ W–ZWeb-supported graphics formats 127,GIF, 127,98 127,PNG, 127,98 339,WEFT 339,for 339,font 339,embedding, 339,310 542,well-formed 542,document, 542,513 73,well-formed 73,HTML 73,character...

Free CSS Books, CSS Book Pdf, CSS Pdf Books, CSS Pdf Books Download, CSS Pdf Books Free Download, Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download,