O01 WHATSAPP |NC.'S EXHIBIT NO. 1015
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`001
`
`

`
`by Ed Tittel and Stephen Nelson James
`
`BOOKS
`WORLDWIDE
`
`IDG Books Worldwide, Inc.
`An International Data Group Company
`
`Foster City, CA «9 Chicago, IL 9 Indianapolis, IN 9 Southlake, TX
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`002
`
`

`
`MORE HTML For Dummies,® 2nd Edition
`
`Published by
`IDG Books Worldwide, Inc.
`An International Data Group Company
`919 E. Hiilsclale Blvd.
`Suite 400
`Foster City, CA 94404
`http : //www. idgbooks . can (IDG Books Worldwide Web site)
`http://wi—iw.dumm1es.com (Dummies Press Web site)
`
`Copyright © 1997 IDG Books Worldwide, Inc. All rights reserved. No part of this book, including interior design. cover
`design, and icons. may be reproduced or transmitted in any form, by any means (eiectronic, photocopying,
`recording, or otherwise) without the prior written permission of the publisher.
`Library of Congress Catalog Card No.: 97-72408
`ISBN: 0-7645-0233-6
`
`Printed in the United States of America
`
`10 9 8 7 6 5 4 3 2 I
`
`2E/SW/QW/ZX/IN
`
`Distributed in the United States by IDG Books Worldwide, inc.
`
`Distributed by Macmillan Canada for Canada; by Transworld Publishers Limited in the United Kingdom; by IDG Norge
`Books for Norway; by IDG Sweden Books for Sweden: by Woodslane Pty. Ltd. for Australia; by Woodslane Enterprises
`Ltd. for New Zealand; by Longman Singapore Publishers Ltd. for Singapore, Malaysia, Thailand, and Indonesia; by
`Simron Pty. Ltd. for South Africa; by Toppan Company Ltd. for Japan; by Distribuidora Cuspide for Argentina; by
`Livraria Cuitura for Brazil; by Ediciencia S.A. for Ecuador; by Addison-Wesley Pubiishing Company for Korea; by
`Ediciones ZETA S.C.R. Ltda. for Peru; by WS Computer Publishing Corporation, Inc., for the Philippines; by Unalis
`Corporation for Taiwan; by Contemporanea cie Ediciones for Venezuela; by Computer Book & Magazine Store for
`Puerto Rico; by Express Computer Distributors for the Caribbean and West indies. Authorized Sales Agent: Anthony
`Rudltin Associates for the Middle East and North Africa.
`
`For general information on IDG Books Wor1clwide‘s books in the U.S., please cali our Consumer Customer Service
`department at 800-762-2974. For reseller information, inciuding discounts and premium sales, please call our Reselier
`Customer Service department at 800-434-3422.
`
`For information on where to purchase IDG Books Worldwide‘s books outside the U.S., please contact our interna-
`tional Saies department at 415-655-3200 or fax 415-655-3295.
`
`For information on foreign language translations, piease contact our Foreign 8; Subsidiary Rights department at
`415-655-3021 or fax 415-655-3281.
`
`For sates inquiries and speciai prices for bulk quantities, please contact our Sales department at 415-655-3200 or write
`to the address above.
`
`For information on using IDG Books Worldwide’s books in the classroom or ior ordering examination copies, please
`contact our Educational Sales department at 800-434-2085 or fax 817-251-8174.
`
`For press review copies, author interviews, or other publicity information, please contact our Public Relations
`department at 415-655-3000 or fax 415-655-3299.
`
`For authorization to photocopy items for corporate, personal, or educational use, please contact Copyright Clearance
`Center, 222 Rosewood Drive, Danvers, MA 01923, or fax 508-750-4470.
`
`'. I :AUTI-[OR AND PUBLISHER I-[AVE USED THEIR BEST EFFORTS IN
`-
`I),
`.
`I ..
`.. . . .!
`.
`1;‘
`.
`PREPARING THIS BOOK. IDG BOOKS WORLDVVIDE, INC., AND AUTHOR MAKE NO REPRESENTATIONS OR
`WARRANTIES VVITI-E RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS BOOK AND
`SPECIFICALLY DISCLAIM ANY IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR
`PURPOSE. THERE ARE NO WARRANTIES WHICH EXTEND BEYOND THE DESCRIPTIONS CONTAINED IN THIS
`PARAGRAPH. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES REPRESENTATIVES OR WRITTEN SALES
`MATERIALS. THE ACCURACY AND COMP LETENESS OFT]-IE INFORMATION PROVIDED HEREIN AND THE OPINIONS
`STATED HEREIN ARE NOT GUARANTEED OR WARRANTED TO PRODUCE ANY PARTICULAR RESULTS, AND THE
`ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY INDIVIDUAL. NEITHER IDG
`BOOKS WORLDWIDE, INC., NOR AUTHOR SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER
`COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER
`DAMAGES. FULFILLMENT OF EACH COUPON OFFER IS THE RI-SPONSIBILETY OF THE OFFEROR.
`
`Trademarks: All brand names and product names used in this book are trade names, service marks, trademarks, or
`registered trademarks of their respective owners. IDG Books Worldwide is not associated with any product or vendor
`mentioned in this book.
`
`__ is a trademark under exclusive
`license to IDG Books Worldwide, Inc.,
`from International Data Group, Inc.
`
`BOOKS
`\VOR'LD\VIDE
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`003
`
`

`
`lntrouction
`
`OOODGODOODGOOODOODOOOOO0000000000OOOOOOOOOOOOOOO
`
`- elcome to the wild, wacky, and wonderful possibilities inherent in the
`World Wide Web. In this book, we'll continue our exploration of the
`mysteries of the I-IyperText Markup Language (HTML) used to build Web
`pages, explore some weird and wonderful Web extensions technologies, and
`continue your initiation into the wildly burgeoning community of Web
`authors.
`
`This book expands on the basic coverage of HTML that you'll find in the
`HTML For Dummies, 3rd Edition, also from IDG Books Worldwide, Inc. In this
`book, we assume that you’ve explored the basics of HTML and are reason-
`ably familiar with HTML 2.0, the current official standard version, and with
`HTML 3.2, the World Wide Web Consortium‘s (W3C’s) current “recom-
`mended” standard for HTML. In this book, we extend your knowledge base
`beyond the basics to include some important emerging HTML standards and
`proprietary extensions, a plethora of Web-based applications, and some
`sound principles of Web site management. We also cover a number of cool
`Web extension technologies that you can use to add considerable spice to
`your current Web sites and documents.
`
`When we wrote this book, we took a straightforward approach to telling you
`about authoring documents for the World Wide Web. We’ve tried to keep the
`amount of technobabble to a minimum and stuck with plain English as much
`as possible. Besides plain talk about hypertext, HTML, and the Web, we’ve
`included sample programs and tag—by-tag instructions for building your very
`own Web pages. If you see unfamiliar terms, check the Glossary at the back
`of this book; we’ve tried to define any and all terms that don't fall into
`everyday speech.
`
`Aéaut This Book
`
`Think of this book as a friendly, approachable guide to advanced HTML, Web
`site management, Web-based applications, and incorporating extension
`technologies into your Web. Although I-ITML isn't hard to learn, nor the
`associated technologies hard to use, it can be hard to remember all the
`details involved in creating interesting Web pages and in keeping track of
`your Web site.
`
`Some sample topics you‘ll find in this book include the following:
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`004
`
`

`
`5
`
`MORE HTML For Dummies, 2nd Edition
`
`Here is a breakdown of the six parts and what you’ll find in each one:
`
`Part 3: Advanced HTML Mar/mp
`
`HTML mixes ordinary text with special strings of characters, called markup,
`that instruct browsers how to dispiay HTML documents. In this part of the
`book, you’ll learn about some new and advanced HTML capabilities under
`development within the standards organizations and within browsers like
`Netscape's Navigator and Microsoft’s Internet Explorer. We cover HTML
`tables, frames, style sheets, applets, objects, and more. By the time you’ve
`finished Part I, you should at least be able to appreciate what’s going on
`behind some of the most interesting pages on the Web, if not build some of
`these pages for yourself!
`
`Part ll: Beyond HTML: Extending your Web
`
`Part II examines a number of new technologies available to extend your
`Web’s capabilities well beyond those delivered by vanilla HTML. Starting
`with a discussion of what extensions are, how they work, and how best to
`use them, we cover Macromedia’s fascinating Shockwave for Director
`technology, the Virtual Reality Modeling Language (VRML) that's used to
`create three-dimensional virtual worlds on the Web, Sun Microsystems’
`incredible Java programming language, and finally, a quick look at several of
`the many scripting languages available to add interactivity, forms support,
`and layout control over Web pages of all kinds.
`
`Part Ni: Coo! Web Applications
`
`In Part III, we examine several of the many categories of Web-based applica-
`tions that you can acid to your Web site to give it special capabilities and to
`foster more involvement with your user community. First, we cover the ins
`and outs of using a search engine to help users find stuff on your site (and
`elsewhere on the Internet, if need be). Next, we cover a number of Web-
`based threaded message forum packages that let your users maintain and
`review running “conversations" across the Web.
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`005
`
`

`
`Chapter 1: Understanding How HTML Happens
`
`Internet shopping applications and delivers Secure Socket Library (SSL)
`support. The extensions to the HTTP protocol keep the channels open
`between the server and the client to speed up communications.
`
`FONT FAC E and FONT C0 LOR are two of Explorer’s new extensions. They let
`you specify what color and typeface you want to use for text and give you
`more control over your document without requiring cumbersome bitmap
`files.
`
`MA RQU EE is another new Explorer extension. It lets you select a portion of
`text to use as a moving marquee on a page. Used in moderation, this tag can
`be an effective way to convey information. Used too freely, it has the poten-
`tial to be even more irritating than the < BLI NK> tag!
`
`Microsoft has taken steps to ensure that Explorer will be able to handle
`future HTML standards. Like Netscape Navigator, Explorer already supports
`popular emerging HTML standards, such as frames, tables, scripting, and
`style sheets. For the latest information about Internet Explorer and its HTML
`capabilities, please visit the excellent online course at:
`
`http://www.m1crosoft.com/train_cert/ffie3/new_feat.htm
`
`Finding, Understanding, and Using
`HTML DTDS
`
`Understanding HTML Document Type Definitions is easier if you understand
`a little about Standard Generalized Markup Language (SGML). SGML is a
`metalanguage that defines structured document types and the markup
`languages that represent a formal description of a document’s type and
`representational capabilities. HTML is built on SGML, so whenever a conflict
`occurs, SGML overrules HTML.
`
`The nature of an SGML document
`Every SGML document is divided into three parts, whose descriptions
`follow:
`
`H 1/ SGML declaration: The SGML declaration attaches SGML syntax token
`names and processing quantities to specific values. In the HTML DTD,
`U
`the SGML declaration specifies that </ opens an end tag and no name
`
`can be more than 72 characters.
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`006
`
`

`
`Chapter 4
`
`wle heets in
`
`etail
`
`OO0DO0(>6000CJOOODOOOOODDOGOOOOODOO000000000000000
`
`In This Chapter
`
`1;» Reviewing style sheets
`
`13> Understanding style sheet syntax
`
`{:> Using external style sheets
`
`[> Using embedded style sheets
`
`I} Defining style with tags
`
`;'> Exploring some sample style sheets
`
`p Utilizing style sheet resources
`
`O0000GOOODODOCIOOOOODDOC}0OOOOOOODDOOOODGOOOOOOOOO
`
`_:' n the beginning, the Web was a simple communication medium, used
`mostly by researchers and academia to exchange information. The
`information didn‘t have to be pretty or perfectly arranged, it just needed to
`be correct. As the Web spread to the business world, organizations devel-
`oped a true understanding of the prowess of the Web and its ability to reach
`more people using fewer resources. The fact that users could have a mea-
`sure of control over the layout of information in a Web document baffled
`those users who had only lived in a world of print and presentations. The
`inability to create columns and use different typefaces was frustrating to
`Web page authors. Never mind that HTML and the Web in general weren't
`really designed to support such detailed layout information — the pages
`just didn’t look right!
`
`Because the Web was not just a passing fad, the major browser developers
`and the World Wide Web Consortium recognized the importance of meeting
`this need for more user control of Web pages’ layouts— without violating
`the multiplatform, open-ended state of the Web. Style sheets were the answer.
`
`In this chapter, we review the Web style sheet concept, give a complete
`overview of the syntax behind style sheets, look at the three different ways
`you can include style information in your Web pages, walk you through
`three different style sheets, and point you to several style sheet resources
`on the Web. Whewl Just saying all that was hard .
`.
`. let’s do it!
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`007
`
`

`
`58 Part 1: Advanced HTML
`
`Understanding Style Siteets
`
`The style sheet concept is not new, but in fact has been borrowed from word
`processing and page layout programs. In general, a style sheet defines a set
`of layout parameters for a document to ensure that similar elements in the
`document appear uniformly. In English, this statement means that all
`instances of the same element, such as a heading or bulleted item, look
`aIike—the style applies the same font, margin, and paragraph specifications
`to each occurrence of that element.
`
`For example, why should you have to work through five different menus each
`time you want to create a level one heading? Simply choosing Heading 1 from
`a style list (and having the text rendered in red, Times 24, a half inch from
`the base margin, and with an 18-point space afterward) is much easier and
`more reliable.
`
`This advantage also applies to HTML documents. Before style sheets, you
`could only change the size and color of text in a Web page and you had to
`use the < FONT> tag every time. HTML style sheets are like any other style
`sheet: They define how certain elements in a Web page should appear.
`
`Style sheets also include already established HTML tags such as <H 1 > and
`<I-i2> and <STRONG> — your style sheet definitions override existing browser
`rendering for any tag, so you can take advantage of existing tags and just
`alter their appearance.
`
`Taking another cue from standard style sheets, in HTML you can store style
`sheets individually, outside of the pages that reference them, and apply
`them to a collection of Web pages, which allows you to create one style
`template and apply it many times. These style sheets are called external
`style sheets. This flexibility creates a uniform look and feel throughout a
`large collection of Web documents.
`
`To make style changes on the individual page level, you can include style
`markup within the document. Style markup works with (or overrides) any
`specifications in a referenced external style sheet. You can use style markup
`to customize the color, text font, and other attributes of a specific element,
`or create separate instances of an element, each with its own specific style.
`
`Style sheets are not limited to one set of specifications per tag in a docu-
`ment. For example, you can have three separate level one headings defined
`in a style sheet, each with a different C LASS name, and apply whichever you
`want throughout the document. In the following section, we show you how
`to create multiple style definitions for a single tag, along with everything
`else you need to know to create your own style sheets.
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`008
`
`

`
`Chapter 4: Style Sheets in Detail
`
`Before we go any further, it's important to mention that style sheets are not
`fully implemented across all browsers and are not 100 percent backward-
`compatible with existing browsers. The style sheet information we present
`in the rest of this chapter is based on the Cougar specification (the latest
`HTML proposal). This means that all the style sheet elements and options
`we present in this chapter may not be usable right now. We can say with
`strong certainty that in the next few months, you will be able to use all the
`information and instructions in this chapter.
`
`For the latest information, it’s best to check the most recent Web resources
`at the following URLs:
`
`1/ The World Wide Web Consortium Style Sheets page at:
`
`http://www.w3.otg/pub/wNw/Style/
`
`! 1/ The Cougar HTML and Style Sheets specification at:
`Ihttp;//www.w3.org/pub/www/TR/ND-style
`
`Discovering the Syntax of Style Streets
`
`After we've thrown out just enough information to make you really hungry
`for the how to’s of style sheets, you’re probably ready to satiate that desire
`and get down to the nitty-gritty. Style sheets are not difficult to understand if
`(and this is a big if) you’ve ever worked with other kinds of style sheets,
`you understand how HTML works, and you understand how browsers
`display Web pages. These are not easy prerequisites, but we’re assuming
`that since you picked up this MORE book, you know something about HTML
`basics. (See HTML For Dummies, 3rd Edition, if you need to find out the
`fundamentals of HTML.)
`
`By the book: style rules
`Style sheets are essentially collections of rules that tell a browser how a
`document should appear. As with all other things HTML, these rules have a
`specific syntax. You can link these rules to your Web pages in multiple ways,
`but we get to that in few pages. The good news is that both external and
`embedded style sheets use the same rule syntax, and that individual tags
`have attributes to help you assign style specifics. When you learn the rule
`syntax, you’re over the biggest hurdle.
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`009
`
`

`
`60 Part I: Advanced HTML
`
`Every rule has two components:
`
`1/ A selector: Usually an HTML element such as (STRONG), (H 1), or
`<ADDRESS>.
`
`:/ The style for the selector: A selector’s style can contain one or more
`predefined properties and their values. In the style font -1’ am‘ 1 y: Times
`the property being defined is font- fami ly, and the value is Times.
`
`You can create a rule by using the following syntax:
`
`For example, the rule for a blue level one heading is:
`
`You can include multiple properties and values for any one selector by sep-
`arating the property—va1ue pairs with semicolons. The syntax looks like this:
`
`For example, the rule for a blue level one heading in I-Ielvetica font is:
`
`These rules can apply to HTML elements (ones already defined by the DTD)
`and elements that you create yourself (new markup that you create for your
`own specific needs). If you want to create a custom style called “heading”
`that appears in blue I-lelvetica, rather than defining a style for the standard
`< H 1) element, the style notation is:
`
`The preceding code creates a class called “heading,” which you can refer-
`ence throughout your pages. You can also create multiple versions of an
`HTML tag by creating multiple classes. The following HTML code alters the
`standard <H1> tag and creates two new tags, one of class red, as well as one
`of class blue:
`
`To specify which one you want to use in any given instance, use the C LASS
`attribute, as in the following code:
`
`Pretty nifty, huh?
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`010
`
`

`
`Chapter 4: Style Sheets in Detail
`
`Properties
`
`Properties can be divided into categories, which makes remembering them
`easier. The following sections look briefly at each family and any special
`syntax rules that a property might have.
`
`Cofor and background properties
`
`The following properties define the color scheme used within a document:
`
`{lu'Background Attachmentspedfiesudufiherthennagedefinedin
`!
`background—image will scroll with the page or be fixed on the
`canvas. l-lere is an example:
`
`P
`
`{ background—1mage: url(http://www.site.com/I)
`background.g1f); background-attachment: scroll
`
`l
`
`1/ Background Col or defines the background color using one of several
`predefined colors (discussed in the “Units” section later in this chap-
`ter) or the #RRGGBB color code. Here is an example:
`
`P
`
`{ background-color: blue}
`
`1/ B a c kg ro und Ima g e identifies the URL for a background image that
`appears on the page. Here is an example:
`
`1/Background Positionspecifieswhereabackgroundimagewill
`
`P
`
`{ background—image: url(http://www.site.com/D
`background.gif)
`I
`
`l l 1
`
`1
`i
`
`il Il i El
`
`-
`
`:
`
`Il
`l
`
`1 !a
`
`a1
`
`l
`
`I
`
`appear on a page, using the keywords top, center, bottom, left,
`middl e, or right. Hereis an example:
`
`P
`
`l background-image: url(http://www.sii;e.corn/D
`background.gif); background-position: center }
`
`. 1/ Background Repeat determines how a background image will be
`repeated. By using repeat, the image tiles in the standard fashion;
`rep ea t - x only repeats the image horizontally; re pea t -y is limited to
`vertical repetition; and no - repe a t ensures that the background image
`is not repeated at all. Here is an example:
`
`P
`
`{ background—image: url(http://www.site.com/I)
`hackground.gif); background-repeat:
`repeat-y }
`
`1/ Col or defines the color of an element by using a predefined name or
`#RRGGBB notation. Here is an example:
`
`P
`
`{ color: blue}
`
`L
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`011
`
`

`
`62 Part I: Advanced HTML
`
`’ 1/ Bac kground incorporates all of the other background properties into
`one value. Here is an example:
`
`30):’ properties
`The following properties define margins and borders for text blocks. The
`measurements may be a little unfamiliar to you, but never fear, we explain
`them all in the section entitled “Units.”
`
`' 1/ Top Ma r*g1' n specifies the top margin of a text block by using length or
`percentage. Here is an example:
`
`1/ Right Ma rgi n specifies the right margin of,a text block using length or
`percentage. Here is an example:
`
`1/ Bottom Ma rgi ri specifies the bottom margin of a text block using
`length or percentage. Here is an example:
`
`1/ Left Ma rgi n specifies the left margin of a text block using length or
`percentage. Here is an example:
`
`: 2/ Ma rgi n uses four values to assign top, right, bottom, and left margins in
`that order. The following example assigns a margin of 5 to the top and
`bottom and 2 to the left and right sides:
`
`if Top Padding defines how much space should be inserted between the
`top border and the text using length or percentage. Here is an example:
`
`1/ Ri ght Padding defines how much space should be inserted between
`the right border and the text using length or percentage. Here is an
`example:
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`012
`
`

`
`Chapter 4: Style Sheets in Detail
`
`‘ 1/ Bottom Padding defines how much space should be inserted between
`the bottom border and the text using length or percentage. I-Iere is an
`example:
`
`P {padding-bottom:
`
`10%}
`
`E V Left Padding defines how much space should be inserted between
`the left border and the text using length or percentage. I-Iere is an
`example:
`
`P {padding—left:
`
`10%}
`
`1/ Padding uses four values to assign top, right, bottom, and left border
`padding in that order using length or percentage. The following ex-
`ample assigns a padding of 10 percent to the top and bottom and 20
`percent to the left and right sides:
`
`P margin:
`
`10% 20% 10% 20%}
`
`1/ Top Border width defines how wide the top border should be using
`thin, medium, thick, or a defined length. Here is an example:
`
`P {border-top-width: medium}
`
`1/ Right Border Ni dth defines how wide the right border should be
`using thin, medium, thick, or a defined length. Here is an example:
`
`P
`
`lborder~right-width: medium}
`
`I V Bottom Border Nidth defines how wide the bottom border should be,
`using thin, medium, thick, or a defined length. Here is an example:
`
`P {border-bottom-width: medium}
`
`I" :1 Left Border Ni dth defines how wide the left border should be by
`using thin, medium, thick, or a defined length. Here is an example:
`
`P {border-left~width: medium}
`
`1/ Border Ni dth uses up to four values to assign top, right, bottom, and
`left border widths in that order, using thin, medium, thick, or a
`defined length. Here is an example:
`
`P {border-width: medium thick medium thick}
`
`:1 Border (101 or uses up to four values to assign top, right, bottom, and
`left border colors in that order by using a predefined color or #RRGGBB
`notation. Here is an example:
`
`P {border-coior: blue red white green}
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`013
`
`

`
`éé Part 1: Advanced HTML
`
`1/ Borde r St yi e uses up to four values to assign top, right, bottom, and
`left border styles in that order by using none, clotted, dashed, solid,
`doubi e, groove, ridge, inset, or outset. Here is an example:
`
`1/ Top Border sets the width, style, and color of the top border. Here is
`an example:
`
`1/ Right Borde r‘ sets the width, style, and color of the right border. I-{ere
`is an example
`
`"
`
`3/ Bottom Bo rder sets the width, style, and color of the bottom border.
`Here is an example:
`
`1/ Let t Border‘ sets the width, style, and color of the left border. Here is
`an example:
`
`V’ B0 rder sets the width, style, and coior of all borders. Here is an
`example:
`
`1/ N1‘ d th defines in length or percentage the width of the space that the
`text will occupy. Here is an example
`
`1/ Hei ght defines the height of the space that the text will occupy in
`length or as automatically assigned. Here is an example:
`
`1/ Fl oat allows text to wrap around an element to the 1 eft, l“'i ght, or not
`at all by using none. Here is an example:
`
`V’ Clea r determines whether an element allows other elements to fioat on
`
`one or more sides using none, left, right, or both. Here is an example:
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`014
`
`

`
`Chapter 4: Style Sheets in Detail
`
`Classification properties
`
`These properties provide information about how white space, lists, and
`other elements should be treated by a browser:
`
`1/ Di 5 pl a y creates one of four elements to be displayed in conjunction
`with the element it affects. These elements include bl ock, creating a
`line break before and after the element; 1‘ M in e, which removes line
`breaks before and after the element; l 1' st -1’ tem, creating a bullet for
`the element without creating a list; and n one, which turns off any
`display. The following example adds line breaks before and after the
`paragraph:
`
`P
`
`ldisplayz block}
`
`if Nhi tespa Ce defines how white space will be treated within the ele-
`ment. Choices include normal, collapsing all white space into one line;
`p r e, rendering all hard returns regardless of the number; and n ow r a p,
`preventing line-wrapping without a <BR> tag. Here is an example:
`
`P
`
`l_whjte_-s_pa'c__'e: prel
`
`:2‘ List Styl e Type identifies what type of marker is used with a list
`item, including disc, c1’ rcl e, square, decimal, lower-roman, upper-
`roman, l 0wer—al pha, upper-al pha, and none. I-lere is an example:
`
`P {list-style-type: square}
`
`1/ List Styl e Image identifies an image that is used as a list item
`marker. I-lere is an example:
`
`list-style—image: url(bullet.gif)l
`l
`P
`l
`I 1/ L1’ st Styl e Position defines how a list marker is placed relative to
`
`the list item. The 1' nsi de value forces text to wrap under the marker;
`outside indents text. Here is an example:
`
`p {
`
`list-styleappsition:
`
`ifigidéi
`
`1/ Li st Styl e defines the list style type, list style position, and list style
`image for any given list. Here is an example:
`
`' P {Hlist-style:
`
`inside url(bullet.gif) square}
`
`Font properties
`
`These properties affect the way fonts appear and include everything from
`typeface to size:
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`015
`
`

`
`65 Part I: Advanced HTML
`
`1/ Font Farm’ l 34 defines the typeface family or generic font type. The font
`family may be any named family, such as Times, I-lelvetica, or Geneva.
`Five generic font types exist, which include s e ri f, s a n s — s e ri 1°,
`cu rsi ve, fanta sy, and non ospa ce. You should include a generic font
`type whenever you define a specific font (in case the font you defined
`isn’t installed on a user’s machine). Any family name that includes
`spaces, such as “New Century Schoolbook", must be enclosed in
`quotation marks. Here is an example:
`
`S1‘ ze specifies the size of the text. You can choose to specify one
`1/ Font
`of these absolute sizes: xx- small, x—srnall, small, medium, la rge, xv
`la rge, or xx-1 a rge. Other options include la rger, smal l er, or a
`percentage relative to the base font size. You can also define the size in
`length. Here is an example:
`
`1/ Font Style defines the style in which a font should be rendered.
`Choices include normal, ital 1‘ C, and obl ique. Here is an example:
`
`V Font Va r1’ a nt renders the text in either normal or small caps. I-lere is
`an example:
`
`/15
`
`1/ Font Wei ght defines the lightness or darkness of the text. Your
`choices include normal, bold, bolder, lighter, 100,200, 300, 400,
`500, 600, 700, 800, and 900. Then numbers represent the actual
`darkness of the font weight, with 100 being lightest and 900 darkest.
`Here is an example:
`
`J/' Font incorporates all of the other font properties into one value. Here
`is an example"
`
`Text properties
`These properties determine text spacing, alignment, line spacing, and more:
`
`1/ Letter Spacing uses the length format to define the spacing between
`letters. Here is an example:
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`016
`
`

`
`Chapter 4: Style Sheets in Detail
`
`67
`
`1/ Line Hei ght specifies the amount of space between baselines using
`length or percentage. Here is an example:
`
`P ll 1 i__F1_é"h¢_'i'.é'it'5 +éeim?
`|
`_ 1/ Text A1 ignment defines the alignment of text. Choose from 1 eft,
`right, center, or justify. Hereis an example:
`
`'P'l'text-align:
`
`right}
`
`= if Text Decoration assigns one of five text modifications, including
`none, underline, overline, 1 ine-thorough, and blink. You can use
`this property to remove underlining from links. Here is an example:
`
`I
`
`A.visited 1
`
`textfdecoration: none}
`
`1’ Text Indentation specifies the text indentation using length or a
`percentage. Here is an example:
`
`i i
`
`P
`
`[
`
`text~indent: 5em}
`
`i 1/ Text Transformation changes the case of text using capital ize,
`lowercase, uppercase, or none. The none value instructs the browser
`E
`to leave the text as it was originally created by the author. Here is an
`example:
`
`_P
`
`{
`
`text—transf0rm: capitalize}
`
`EsE
`‘ 1/ Verti cal A1 ignment alters the alignment of text relative to the
`baseline. Choose from basel ine, sub, super, top, text-top, middle,
`bottom, and text-bottom — or you can specify a percentage. Here is
`an example:
`
`P
`
`1 vertical-align: super}
`
`1/ word Spacing uses the length format to define the spacing between
`words. Here is an example:
`
`1 1
`
`l
`
`P
`
`{ word-spacing: +.05em}
`
`Units
`
`The lengths and percentages that we discuss in the preceding sections have
`specific rules that apply to them, as well as to URL and color notation. This
`section contains the information that you need in order to use all these units
`correctly in your style sheets:
`
`'
`
`1/ Length Units: You can use one of three relative length units in your
`style sheets: em is a measurement relative to the height of the element's
`font, so it adds or subtracts the specified number of ems from the
`actual height of the element's font; ex refers to the height of the letter
`x. The unit px stands for pixels as related to the height of the screen.
`
`WHATSAPP INC.'S EXHIBIT NO. 1015
`
`017
`
`

`
`58 Part I: Advanced HTML
`
`You can use a number to set the number of ems, exs, or pxs. Another
`option is to include the + or - sign with a number to indicate the base
`size plus or minus the supplied number. The legal absolute values are
`in (inches), cm (centimeters), mm (millimeters), pt (points, which are
`1/:2 of an inch), or pc (picas, which are equal to 12 points).
`
`1/ Percentage Units: Percentages can also be stand-alone numbers with
`the percentage sign (96), which represent a certain percentage of the
`screen or any other predefined value, such as the width of a text block.
`You can also use the + and - signs with percentages.
`
`:1 Color Units: The predefined colors recognized by style sheets and most
`browsers are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
`olive, purple, red, silver, teal, white, and yellow. If you want use any
`other color, you must use #RRGGBB hexadecimal color notation. If you
`want to brush up on your hexadecimal notation, be sure to read the
`sidebar “A Hex Upon That Color" in Chapter 2.
`
`if URLs: To iink to a URL in a style sheet, use this notation: url ( u H . here. 3
`
`Whew, we bet you thought the properties were never going to end. The good
`news is that you have a wide variety of options to work with when creating
`style sheets. Remember that all of these properties may be used in external
`or embedded style sheets.
`
`linking to External Style Sheets
`
`When you have all of the pieces and parts of a style sheet, how exactly do
`you link style definitions to your Web page