0% found this document useful (0 votes)

284 views

HTML & DHTML

htrml

Uploaded by

hkgrao

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

284 views

HTML & DHTML

htrml

Uploaded by

hkgrao

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 187

HTML &DHTML Style .................................................................................................................................... 4 Layering ............................................................................................................................ 19 Transition Filters............................................................................................................... 25 Introduction to JavaScript ................................................................................................. 30 Expressions and Operators................................................................................................

40 Statements ......................................................................................................................... 54 Functions........................................................................................................................... 65 CHAPTER 1: Introduction to HTML ............................................................................... 71 CHAPTER 2 :HTML's Role on the Web.......................................................................... 81 CHAPTER 3: What You Need for a Web Site ................................................................. 84 CHAPTER 4: Creating a Web Page and Entering Text ................................................... 91 CHAPTER 5: Changing and Customizing HTML Text................................................... 99 CHAPTER 6: Displaying Text in Lists .......................................................................... 108 CHAPTER 7: Adding Graphics to Your Web Pages...................................................... 117 CHAPTER 8: Hypertext and Creating Links.................................................................. 130 CHAPTER 9: Clickable Image Maps and Graphical Interfaces..................................... 142 CHAPTER 10: HTML Forms......................................................................................... 153 CHAPTER 11: Adding Tables to Your Documents ....................................................... 165 CHAPTER 12: Images, Multimedia Objects, and Background Graphics ...................... 171 CHAPTER 13: Netscape Frames.................................................................................... 175

Introduction to DHTML Web authors today face significant challenges when making their Web pages interactive. The static nature of HTML pages limits their creative choices, and interactive components can be difficult to build and reuse. In addition, using proprietary extensions means authoring browserspecific Web pages. Microsoft Dynamic HTML technology helps to remove these barriers for content providers and offers users more engaging and interactive Web pages. Dynamic HTML provides authors with enhanced creative control so they can manipulate any page element at any time. Dynamic HTML is also the easiest way to make Web pages interactive, using open, standards-based technologies. Microsoft is working with the World Wide Web Consortium (W3C) to help ensure interoperability and support for users on multiple systems with different browsers. Dynamic HTML builds upon existing HTML standards to expand the possibilities of Web page design, presentation, and interaction. Ultimately, mastering DHTML will allow you to build Web-based applications, rather than mere portraits of data. Because DHTML is essentially an "added value" technology, you should be rather familiar with basic Web page design using traditional HTML specifications. Experience with JavaScript programming is also necessary to employ the potential of DHTML. Total Creative Control for an Immediate User Experience

L&T Infotech Confidential

Page 1 of 187

HTML &DHTML
Making simple updates, such as changing the color of text after a Web page loads, traditionally has meant reloading the page. These limitations have slowed the user experience and have impeded interactivity on the Web. Microsoft's Dynamic HTML takes interactivity to the next level. Pages authored with Dynamic HTML come alive, with every element in the page being truly dynamic. Whether the page has loaded already, content providers can change any element of the page -- text or graphics -without a round-trip to the server. This increased control and flexibility result in more compelling sites. For users, the Web experience becomes more responsive. Key features of DHTML Key features of Dynamic HTML include these:

Document Object Model (DOM). Dynamic HTML provides a comprehensive object model for HTML. This model exposes all page elements as objects. These objects can easily be manipulated, by changing their attributes or applying methods to them at any time. Dynamic HTML also provides full support for keyboard and mouse events on all page elements. Support for the Document Object Model enables the following: Dynamic content. Text or graphics can be added, deleted, or modified on the fly. For example, a Web page can display an updated headline, without refreshing the page. The text surrounding the headline will reflow automatically. Dynamic styles. Internet Explorer 4.0 fully supports Cascading Style Sheets (CSS). As such, any CSS attribute, including color and font, can be updated without a server roundtrip. For instance, text can change color or size when a mouse pointer passes over it. Multimedia filters and transition effects can be applied to HTML elements simply by adding the filter CSS attribute. Absolute positioning. CSS positioning coordinates for existing page content can be updated at any time to create animated effects, without reloading the page. Data Binding. Data-driven application front ends can be built that present, manipulate (e.g., sort, filter), and update data on the client without numerous round-trips to the server. Scriptlets. A scriptlet is a Web page, authored with Dynamic HTML, which content providers can use as a component in their Web applications. With scriptlets, content providers can author content once, then easily reuse the content in other Web pages or applications.

The Easiest Way to Make Pages Interactive Adding dynamic behavior to Web pages formerly required writing complex applets or controls, and incorporating them in Web pages using scripts. Although these components perform useful tasks, many authors found them hard to develop compared with scripts or HTML.

L&T Infotech Confidential

Page 2 of 187

HTML &DHTML
Microsoft Dynamic HTML was designed so that Web builders can use the scripting languages they know today -- such as JavaScript and the Microsoft Visual Basic programming system, Visual Basic Scripting Edition (VBScript) -- to make their Web pages interactive. Developers can also write full-featured Web applications with controls and applets that use Dynamic HTML. Web builders can easily reuse Dynamic HTML-based content through support for scriptlets in Microsoft Internet Explorer 4.0, using just HTML and script. Dynamic HTML can be authored today using tools from third parties, including Bluestone Inc., ExperTelligence Inc., Pictorius Inc., and SoftQuad Inc., as well as Microsoft FrontPage 98. Dynamic Content with a Broad Reach A standards-based approach enables content providers to create interactive pages that reach a broad audience. At a base level, content providers can take advantage of standards-based features, such as CSS and CSS Positioning, that are implemented in today's popular browsers. This ensures that a majority of users, regardless of the browser they are using, have the same Web experience. Web authors can also create a single set of pages authored with Dynamic HTML for all users. Users with any browser supporting the Document Object Model, such as Microsoft Internet Explorer 4.0, can fully interact with these pages. Other browser users, such as those running Netscape Navigator, could view much of this content statically, because Dynamic HTML uses standard HTML tags to render content. For instance, an interactive table of contents could expand and contract using Microsoft Internet Explorer 4.0. In a non-dynamic browser, the table would display in a fully expanded state. In some cases, content providers may decide to author separate sets of pages and take advantage of specific browser capabilities to ensure a truly engaging, rich experience. Dynamic HTML will be featured in all versions of Microsoft Internet Explorer 4.0, including versions for the Windows operating system and for the Macintosh and UNIX platforms. Microsoft's implementation of Dynamic HTML will also be available free of charge as a component for thirdparty use.

L&T Infotech Confidential

Page 3 of 187

HTML &DHTML Style

Style
Properties of STYLE Clearly, positioning your block of content depends upon the specified STYLE properties. Several documents on Web contain references to the positioning properties available for style sheets -two worth reviewing are Microsoft's CSS Attributes Reference (under "Positioning Properties") and Netscape's Defining Positioned Blocks of HTML Content. We've included a handy chart summarizing the common STYLE properties which you may want to use when using the CSS syntax to position blocks of content. Employing the various STYLE properties gives you powerful control over the position and look of the blocks of content on your page. Conceptually, then, when we think in DHTML we think of a page as made up of one or more blocks. Of course, this is not immediately evident to the viewer, who essentially sees a flat Web page, without realizing that several smaller blocks of content are positioned here and there to create the overall effect. Still, the question begs: how is this dynamic? Consider the fact that, now that the blocks have been put into place, you can -- at any time -change their properties. Position, background, clipping region, z-index -- it's all plastic, with the help of JavaScript, and that is the reason to be excited!

Common STYLE Properties

Specifies how the block should be positioned on the page with respect to other page elements. Possible values: position "position:absolute;" Block is positioned absolutely within the browser window, relative to <BODY> block. "position:relative;" Block is positioned relative to its parent block, if any, or else normal flow of page. "position:static;" Block is positioned according to standard HTML layout rules - follows flow of document. (MSIE 4+ only; Netscape 5?) Specifies the width at which the block's contents should wrap. You may specify width in measured units (50px), as a percentage of the parent block's width (50%), or auto which wraps the block according to its parent's width. Examples: "width:50px;" or "width:50%;" Specifies the height of the block, measured in units (50px), percentage of the parent block's height (50%), or auto. Note that the height of the block will be forced to the minimum necessary to display its contents; however, you can make the block taller than necessary. Examples: "height:50px;" or "height:50%;" Specifies the offset of the left edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the right while negative measures (-5px) are offset towards the left. Examples: "left:5px;" or "left:-5px;"

width

height

left

L&T Infotech Confidential

Page 4 of 187

HTML &DHTML Style

Specified the offset from the top edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the bottom of the page while negative measures (-5px) are offset towards the top of the page. Examples: "top:10px;" or "top:-10px;" Specifies a rectangular portion of the block which is visible. Typically, you use the clip property if you want to show only a portion of the block, therefore hiding a portion. Syntax: MSIE: clip:rect(top right bottom left) Example: "clip:rect(0px 30px 50px 0px);" Netscape: clip:rect(left,top,right,bottom) Example: "clip:rect(0,0,30,50);" Notice that the syntaxes vary between browsers, both in the need to specify measurement units (MSIE) and the order of the parameters. Specifies whether a block should be visible. If not visible, the block will not appear on the page, although you can make it visible later using JavaScript. The possible values for this property again vary between browsers. MSIE: "visibility:inherit;" Block inherits the visibility property of its parent. "visibility:visible;" Block is visible. "visibility:hidden;" Block is invisible. Netscape: "visibility:inherit;" Block inherits the visibility property of its parent. "visibility:show;" Block is visible. "visibility:hide;" Block is invisible. Specifies the "stacking order" of blocks, should they happen to overlap other positioned blocks. A block is assigned a z-index, which is any integer. When blocks overlap, that which has the greater positive z-index appears above a block with a lower z-index. Blocks with an equal z-index value are stacked according to the order in which they appear in the source code (bottom-to-top: first block defined appears on bottom, last block defined appears on top). Example: "z-index:3;" backgroundcolor backgroundimage Specifies the background color for the block. Examples: "background-color:green;" or "background-color:FF8F00;" Specifies a background image for the block. Example: "background-image:url('images/tilewood.jpg');"

top

clip

visibility

z-index

Putting the D in DHTML

position position width height none none none left left Note: Accepts either an integer (assumed pixel units) or a percentage string. Examples: left=10 or left="20%" Note: read-only, cannot modify via script pixelWidth pixelHeight left or pixelLeft Note: pixelLeft accepts a string which specifies measurement units; e.g. pixelLeft="10px" whereas left accepts an integer and assumes pixel units; e.g. left=10.

L&T Infotech Confidential

Page 9 of 187

HTML &DHTML Style

top top Note: Accepts either an integer (assumed pixel units) or a percentage string. Examples: top=10 or top="20%" clip.top clip.left clip.right clip.bottom clip.width clip.height top or pixelTop Note: pixelTop accepts a string which specifies measurement units; e.g. pixelTop="10px" whereas top accepts an integer and assumes pixel units; e.g. top=10. "rect(top right bottom left)" To change the clip in MSIE you must redefine all clipping coordinates. The syntax can be a bit confusing.

clip

Example: Each dimension of the clipping document.all.blockname.style.clip coordinates is its own property, as seen here. Changing any property immediately ="rect(0 25 25 0)" causes the on-screen clip to change. visibility visibility May contain any of "inherit", "show", or "hide" zIndex z-index Any non-negative integer. bgColor Accepts string containing pre-defined color name or hex RGB triplet. backgrou nd-color Examples: document.layers["blockname"].bgColor ="black" document.layers["blockname"].bgColor ="#000000" background.src MSIE allows negative integers, but you may as well stick with positive for the sake of Netscape. backgroundColor Accepts string containing pre-defined color name or hex RGB triplet. Examples: document.all.blockname.style.backgrou ndColor ="black" document.all.blockname.style.backgrou ndColor ="#000000" backgroundImage visibility May contain any of "inherit", "visible", or "hidden" zIndex

backgrou Example: Example: nd-image document.layers["blockname"].backgroun document.all.blockname.backgroundIm age ="images/tile.jpg" d.src ="images/tile.jpg"

Putting the D in DHTML Once you've positioned a content block on the page using <DIV> tags in your HTML, you can use JavaScript to modify its properties. This has many possible consequences: you can move the

L&T Infotech Confidential

Page 10 of 187

HTML &DHTML Style

entire block up, down, left or right. You can change its background color, or change the clipping region, causing more or less of the block to be visible. Speaking of visibility, you can even hide or show the entire block in an instant via the visibility property. How, then, does JavaScript access the style properties of the content block? The answer is twofold: 1. Assuming that you are familiar with JavaScript, you know that data structures are represented as objects, and each object has a set of properties. JavaScript statements can read or write to the properties of an object. 2. Content blocks contained in <DIV> tags are exposed as objects to JavaScript by the Document Object Model. This means that, following the object and property specifications defined by the DOM, JavaScript can access the style sheet properties of the content block. <DIV ID="mailblock" STYLE="position:absolute; width:auto; height:auto; left:400px; top:50px; background-color:white"> <A HREF="mailto:[email protected]">Mail me!</A><BR> <IMG SRC = "mailbox.gif" width = 30 height = 15 alt = "Mailbox" > </DIV> Because Netscape and Microsoft do not currently share compatible DOMs, the above block is exposed to different objects in each browser. For now, we'll consider each case separately -- a future article will look at the issue of patching over this problem in "cross browser DHTML." In Netscape's DOM, each <DIV> block takes the form of a Layer Object. In Microsoft, each block is exposed as a DIV object, which in turn possesses a STYLE object, whose properties reflect the familiar style attribute properties.This might sound confusing, but it's all a matter of syntax. Let's first consider how you would construct a JavaScript reference to mailblock. You use the identifier specified in the ID attribute:

L&T Infotech Confidential

Page 11 of 187

HTML &DHTML Style

L&T Infotech Confidential

Page 12 of 187

HTML &DHTML Style

L&T Infotech Confidential

Page 13 of 187

HTML &DHTML Style

L&T Infotech Confidential

Page 14 of 187

HTML &DHTML Style

clip

backgrou Example: Example: nd-image document.layers["blockname"].backgroun document.all.blockname.backgroundIm age ="images/tile.jpg" d.src ="images/tile.jpg"

L&T Infotech Confidential

Page 15 of 187

HTML &DHTML Style

The Event Connection Quite frequently, you want some type of trigger to cause your DHTML to kick in. Whether repositioning blocks or changing style properties, some event usually causes these changes. Many different types of event can occur on a Web page, most of them caused by the user. He or she might click on a button (click event), might move the mouse over an element (mouseover event), or move the mouse off of an element (mouseout event). The user may submit a form (submit event) or resize the browser window (resize event). Additionally, some events occur without direct user intervention -- the page may finish loading (load event), for example. Talking about events in this article is tricky because, like our previous discussions, working with events crosses a couple of authoring technologies. The Document Object Model also defines types of events and their characteristics, such as to which elements they apply. More exactly, though, you manipulate and control events using JavaScript syntax. Once again, then, the handling of events is not exactly the same between Microsoft and Netscape browsers, at least until a standardized DOM comes along. Managing events can be relatively simple or quite complex, depending on the ambitions of your project. Since this is an introduction, we'll focus mainly on event basics. Fortunately, basic events are handled most similarly between browsers. Event Handlers Events occur on a Web page whether you choose to act on them or not. When the user moves the mouse over an element, a mouseover event occurs. If you would like to leverage this event as a trigger for some dynamic action, you must construct an event handler. An event handler is created as an attribute for the tag which defines the element at which you wish to catch the event. Event handler attribute named follow the syntax onEventname, and they accept JavaScript statements as their action. For example, the following tag creates a hyperlink with a mouseover event handler specified. <A HREF="page.html" onMouseOver="changeStatus('Read this page'); return true"> Click here </A> The onMouseOver event handler catches a mouseover event. When this event occurs at this element, a JavaScript function is called named changeStatus(). This is a fictional function, you can imagine that it might exist to change the message on the browser's status bar. Any JavaScript statement is allowed in an event handler, so we could also execute direct statement rather than call a function. For example, suppose that a mouseover for this element in MSIE should modify a style sheet's color property: <A HREF="page.html" onMouseOver="document.styleSheets[0].rules[0].style.color='blue'" > Click here</A>

L&T Infotech Confidential

Page 16 of 187

HTML &DHTML Style

The above example assumes MSIE, since style sheet modifications aren't supported in Netscape. We also assume that a style sheet exists in this document! But, hey, it's just an example. Once again, a convenient table will help summarize the common event and their event handler names. Event Event Handler Syntax Description click submit reset focus blur mouseover mouseout mousemove change select resize move load unload error OnClick OnSubmit OnReset OnFocus OnBlur OnMouseOver OnMouseOut OnMouseMove OnChange OnSelect OnResize OnMove OnLoad OnUnload OnError User clicks (left) mouse button on an element. User submits a form, this event fires before the form submission is processed. User resets a form. User brings focus to an element either via mouse click or tabbing. User loses focuses from an element by clicking away or tabbing away. User moves mouse over an element. User moves mouse off of an element. User moves mouse. User changes value in a text, textarea, or select field. User selects (highlights) a portion of text in a text or textarea field. User resizes browser window or frame. User moves browser window or frame. Page completes loading. User exits page (by navigating to a new page or quitting browser). An error occurs loading an image or document.

L&T Infotech Confidential

Page 24 of 187

HTML &DHTML Transition Filters

Transition Filters
IE4 offers a type of filter called the Transitional Filter. This filter works in much the same way as the Visual Filter; however, this filter is used to transition an object from its current state to a future state (i.e., when changing the source of an image from one image to another). There are two types of Transitional Filters: Blend and Reveal. Transition Methods The Transitional Filters use methods to work. There are three of these methods: 1. The transition must be applied by using either blendTrans.Apply() or revealTrans.Apply(). 2. The transition must then be played by using either blendTrans.Play() or revealTrans.Play(). 3. If you want to stop the filter transition, you may use either blendTrans.Stop() or revealTrans.Stop(). Note: These methods may also be used in conditional statements. For instance, to check if the transition has completed you may go if(blendTrans.Stop()) Blend Transition Filter The Blend Transition Filter is used to perform a fade in or fade out effect. Syntax: filter:BlendTrans(Duration=duration)}

Duration: Length of time the transition should take to complete. Value, float. Value is expressed in seconds.milliseconds (0.000).

Reveal Transition Filter The Reveal Transition Filter allows you to show or hide visual objects, using any of the 23 predefined types of patterns. Syntax: filter:RevealTrans(Duration=seconds, Transition=0-23)

Duration: Number of seconds the transition should take to complete. Transition: Type of pre-defined pattern: 0 - Box in 1 - Box out 2 - Circle in 3 - Circle out 4 - Wipe up

L&T Infotech Confidential

Page 25 of 187

HTML &DHTML Transition Filters

5 - Wipe down 6 - Wipe right 7 - Wipe left 8 - Vertical blinds 9 - Horizontal blinds 10 - Checkerboard across 11 - Checkerboard down 12 - Random dissolve 13 - Split vertical in 14 - Split vertical out 15 - Split horizontal in 16 - Split horizontal out 17 - Strips left down 18 - Strips left up 19 - Strips right down 20 - Strips right up 21 - Random bars horizontal 22 - Random bars vertical 23 - Any random pattern 0-22

L&T Infotech Confidential

Page 29 of 187

HTML &DHTML Introduction to Javascript

Introduction to JavaScript
JavaScript is Netscape's cross-platform, object-oriented scripting language. JavaScript is a small, lightweight language; it is not useful as a standalone language, but is designed for easy embedding in other products and applications, such as web browsers. Inside a host environment, JavaScript can be connected to the objects of its environment to provide programmatic control over them. Core JavaScript contains a core set of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

Client-side JavaScript extends the core language by supplying objects to control a browser (Navigator or another web browser) and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.

Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a relational database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. Through JavaScript's LiveConnect functionality, you can let Java and JavaScript code communicate with each other. From JavaScript, you can instantiate Java objects and access their public methods and fields. From Java, you can access JavaScript objects, properties, and methods. Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. JavaScript and Java

JavaScript and Java are similar in some ways but fundamentally different in others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript supports most Java expression syntax and basic control-flow constructs. In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods. JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed. Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference L&T Infotech Confidential Page 30 of 187

HTML &DHTML Introduction to Javascript or access private memory by corrupting Java bytecodes. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript authoring. In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.
JavaScript Interpreted (not compiled) by client. Object-oriented. No distinction between types of objects. Inheritance is through the prototype mechanism, and properties and methods can be added to any object dynamically. Java Compiled bytecodes downloaded from server, executed on client. Class-based. Objects are divided into classes and instances with all inheritance through the class hierarchy. Classes and instances cannot have properties or methods added dynamically.

Variable data types not declared (dynamic Variable data types must be declared (static typing). typing). Cannot automatically write to hard disk. Cannot automatically write to hard disk.

Table 18.1 JavaScript compared to Java Values JavaScript recognizes the following types of values:

Numbers, such as 42 or 3.14159. Logical (Boolean) values, either true or false. Strings, such as "Howdy!". null, a special keyword denoting a null value; null is also a primitive value. Because JavaScript is case sensitive, null is not the same as Null, NULL, or any other variant. undefined, a top-level property whose value is undefined; undefined is also a primitive value.

This relatively small set of types of values, or data types, enables you to perform useful functions with your applications. There is no explicit distinction between integer and real-valued numbers. Nor is there an explicit date data type in JavaScript. However, you can use the Date object and its methods to handle dates. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform. Data Type Conversion

L&T Infotech Confidential

Page 31 of 187

HTML &DHTML Introduction to Javascript

JavaScript is a dynamically typed language. That means you do not have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution. So, for example, you could define a variable as follows: var answer = 42 And later, you could assign the same variable a string value, for example, answer = "Thanks for all the fish..." Because JavaScript is dynamically typed, this assignment does not cause an error message. In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings. For example, consider the following statements: x = "The answer is " + 42 // returns "The answer is 42" y = 42 + " is the answer" // returns "42 is the answer" In statements involving other operators, JavaScript does not convert numeric values to strings. For example: "37" - 7 // returns 30 "37" + 7 // returns 377 Variables You use variables as symbolic names for values in your application. You give variables names by which you refer to them and which must conform to certain rules. A JavaScript identifier, or name, must start with a letter or underscore ("_"); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase). Some examples of legal names are Number_hits, temp99, and _name. Declaring Variables You can declare a variable in two ways:

By simply assigning it a value. For example, x = 42 With the keyword var. For example, var x = 42

Evaluating Variables A variable or array element that has not been assigned a value has the value undefined. The result of evaluating an unassigned variable depends on how it was declared:

A floating-point literal can have the following parts:

A decimal integer A decimal point (".") A fraction (another decimal number) An exponent

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point or "e" (or "E"). Some examples of floating-point literals are 3.1415, -3.1E12, .1e12, and 2E-12 Integers Integers can be expressed in decimal (base 10), hexadecimal (base 16), and octal (base 8). A decimal integer literal consists of a sequence of digits without a leading 0 (zero). A leading 0 (zero) on an integer literal indicates it is in octal; a leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F. Octal integers can include only the digits 0-7. Some examples of integer literals are: 42, 0xFFF, and -345. Object Literals An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). You should not use an object literal at the beginning of a statement. This will lead to an error. The following is an example of an object literal. The first element of the car object defines a property, myCar; the second element, the getCar property, invokes a function (Cars("honda")); the third element, the special property, uses an existing variable (Sales). var Sales = "Toyota"; function CarTypes(name) { if(name == "Honda") return name; else return "Sorry, we don't sell " + name + "."; } car = {myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales} document.write(car.myCar); // Saturn document.write(car.getCar); // Honda document.write(car.special); // Toyota Additionally, you can use an index for the object, the index property (for example, 7), or nest an object inside another. The following example uses these options. These features, however, may not be supported by other ECMA-compliant browsers. car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"} document.write(car.manyCars.b); // Jeep document.write(car[7]); // Mazda String Literals

L&T Infotech Confidential

Page 35 of 187

HTML &DHTML Introduction to Javascript

A string literal is zero or more characters enclosed in double (") or single (') quotation marks. A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks. The following are examples of string literals:

"blah" 'blah' "1234" "one line \n another line"

You can call any of the methods of the String object on a string literal value--JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the String.length property with a string literal. You should use string literals unless you specifically need to use a String object. Using Special Characters in Strings In addition to ordinary characters, you can also include special characters in strings, as shown in the following example. "one line \n another line" The following table lists the special characters that you can use in JavaScript strings. Character Meaning \b \f \n \r \t \' \" \\ \XXX Backspace Form feed New line Carriage return Tab Apostrophe or single quote Double quote Backslash character (\) The character with the Latin-1 encoding specified by up to three octal digits XXX between 0 and 377. For example, \251 is the octal sequence for the copyright symbol. The character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol. The Unicode character specified by the four hexadecimal digits XXXX. For example, \u00A9 is the Unicode sequence for the copyright symbol. Table 18.2 JavaScript special characters

\xXX

\uXXXX

L&T Infotech Confidential

Page 36 of 187

HTML &DHTML Introduction to Javascript

Escaping Characters

For characters not listed in Table 18.2, a preceding backslash is ignored, with the exception of a quotation mark and the backslash character itself.
You can insert a quotation mark inside a string by preceding it with a backslash. This is known as escaping the quotation mark. For example, var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." document.write(quote) The result of this would be He read "The Cremation of Sam McGee" by R.W. Service. To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path c:\temp to a string, use the following: var home = "c:\\temp"

Unicode Unicode is a universal character-coding standard for the interchange and display of principal written languages. It covers the languages of Americas, Europe, Middle East, Africa, India, Asia, and Pacifica, as well as historic scripts and technical symbols. Unicode allows for the exchange, processing, and display of multilingual texts, as well as the use of common technical and mathematical symbols. It hopes to resolve internationalization problems of multilingual computing, such as different national character standards. Not all modern or archaic scripts, however, are currently supported. The Unicode character set can be used for all known encoding. Unicode is modeled after the ASCII (American Standard Code for Information Interchange) character set. It uses a numerical value and name for each character. The character encoding specifies the identity of the character and its numeric value (code position), as well as the representation of this value in bits. The 16-bit numeric value (code value) is defined by a hexadecimal number and a prefix U, for example, U+0041 represents A. The unique name for this value is LATIN CAPITAL LETTER A.
JavaScript versions prior to 1.3. Unicode is not supported in versions of JavaScript prior to 1.3. Unicode Compatibility with ASCII and ISO

Unicode is compatible with ASCII characters and is supported by many programs. The first 128 Unicode characters correspond to the ASCII characters and have the same byte value. The Unicode characters U+0020 through U+007E are equivalent to the ASCII characters 0x20 through 0x7E. Unlike ASCII, which supports the Latin alphabet and uses 7-bit character set, Unicode uses a 16-bit value for each character. It allows for tens of thousands of characters. Unicode version 2.0 contains 38,885 characters. It also supports an extension mechanism, Transformation Format (UTF), named UTF-16, that allows for L&T Infotech Confidential Page 37 of 187

HTML &DHTML Introduction to Javascript the encoding of one million more characters by using 16-bit character pairs. UTF turns the encoding to actual bits. Unicode is fully compatible with the International Standard ISO/IEC 10646-1; 1993, which is a subset of ISO 10646, and supports the ISO UCS-2 (Universal Character Set) that uses two-octets (two bytes or 16 bits). JavaScript and Navigator support for Unicode means you can use non-Latin, international, and localized characters, plus special technical symbols in JavaScript programs. Unicode provides a standard way to encode multilingual text. Since Unicode is compatible with ASCII, programs can use ASCII characters. You can use non-ASCII Unicode characters in the comments and string literals of JavaScript.
Unicode Escape Sequences You can use the Unicode escape sequence in string literals. The escape sequence consists of six ASCII characters: \u and a four-digit hexadecimal number. For example, \u00A9 represents the copyright symbol. Every Unicode escape sequence in JavaScript is interpreted as one character.

The following code returns the copyright symbol and the string "Netscape Communications".
x="\u00A9 Netscape Communications" The following table lists frequently used special characters and their Unicode value. Category White space values Unicode value Name \u0009 \u000B \u000C \u0020 Line terminator values \u000A \u000D Additional Unicode escape sequence values \u000b \u0009 \u0022 \u0027 \u005C Tab Vertical Tab Form Feed Space Line Feed Format name <TAB> <VT> <FF> <SP> <LF>

Carriage Return <CR> Backspace Horizontal Tab Double Quote Single Quote Backslash <BS> <HT> " ' \

Table 18.3 Unicode values for special characters

L&T Infotech Confidential

Page 38 of 187

HTML &DHTML Introduction to Javascript The JavaScript use of the Unicode escape sequence is different from Java. In JavaScript, the escape sequence is never interpreted as a special character first. For example, a line terminator escape sequence inside a string does not terminate the string before it is interpreted by the function. JavaScript ignores any escape sequence if it is used in comments. In Java, if an escape sequence is used in a single comment line, it is interpreted as an Unicode character. For a string literal, the Java compiler interprets the escape sequences first. For example, if a line terminator escape character (\u000A) is used in Java, it terminates the string literal. In Java, this leads to an error, because line terminators are not allowed in string literals. You must use \n for a line feed in a string literal. In JavaScript, the escape sequence works the same way as \n.
Displaying Characters with Unicode

You can use Unicode to display the characters in different languages or technical symbols. For characters to be displayed properly, a client such as Netscape Navigator 4.x needs to support Unicode. Moreover, an appropriate Unicode font must be available to the client, and the client platform must support Unicode. Often, Unicode fonts do not display all the Unicode characters. Some platforms, such as Windows 95, provide a partial support for Unicode.
To receive non-ASCII character input, the client needs to send the input as Unicode. Using a standard enhanced keyboard, the client cannot easily input the additional characters supported by Unicode. Often, the only way to input Unicode characters is by using Unicode escape sequences. The Unicode specification, however, does not require the use of escape sequences. Unicode delineates a method for rendering special Unicode characters using a composite character. It specifies the order of characters that can be used to create a composite character, where the base character comes first, followed by one or more non-spacing marks. Common implementations of Unicode, including the JavaScript implementation, however, do not support this option. JavaScript does not attempt the representation of the Unicode combining sequences. In other words, an input of a and ' does not produce . JavaScript interprets a' as two distinct 16-bit Unicode characters. You must use a Unicode escape sequence or a literal Unicode character for .

L&T Infotech Confidential

Page 39 of 187

HTML &DHTML Expression and Operators

Expressions and Operators

This chapter describes JavaScript expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, and special operators. This chapter contains the following sections:

Expressions Operators

Expressions An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value; the value can be a number, a string, or a logical value. Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value. For example, the expression x = 7 is an expression that assigns x the value seven. This expression itself evaluates to seven. Such expressions use assignment operators. On the other hand, the expression 3 + 4 simply evaluates to seven; it does not perform an assignment. The operators used in such expressions are referred to simply as operators. JavaScript has the following types of expressions:

Arithmetic: evaluates to a number, for example 3.14159 String: evaluates to a character string, for example, "Fred" or "234" Logical: evaluates to true or false

Operators JavaScript has the following types of operators. This section describes the operators and contains information about operator precedence.

Assignment Operators Comparison Operators Arithmetic Operators Bitwise Operators Logical Operators String Operators Special Operators

JavaScript has both binary and unary operators. A binary operator requires two operands, one before the operator and one after the operator: operand1 operator operand2 For example, 3+4 or x*y. A unary operator requires a single operand, either before or after the operator: operator operand or operand operator For example, x++ or ++x.

L&T Infotech Confidential

Page 40 of 187

HTML &DHTML Expression and Operators

In addition, JavaScript has one ternary operator, the conditional operator. A ternary operator requires three operands. Assignment Operators An assignment operator assigns a value to its left operand based on the value of its right operand. The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x. The other assignment operators are shorthand for standard operations, as shown in the following table. Shorthand operator Meaning x += y x -= y x *= y x /= y x %= y x <<= y x >>= y x >>>= y x &= y x ^= y x |= y x=x+y x=x-y x=x*y x=x/y x=x%y x = x << y x = x >> y x = x >>> y x=x&y x=x^y x=x|y

Table 19.1 Assignment operators

Comparison Operators A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical or string values. Strings are compared based on standard lexicographical ordering, using Unicode values. The following table describes the comparison operators. Operator Description Examples returning true1 == var1

Equal (==)

Returns true if the operands are equal If the two operands are 3

L&T Infotech Confidential

Page 41 of 187

HTML &DHTML Expression and Operators

not of the same type, JavaScript attempts to convert the "3" == operands to an appropriate type for the comparison. 3 == '3' Not equal (!=) var1 4

Returns true if the operands are not equal. If the two operands var1 != are not of the same type, JavaScript attempts to convert the var2 != "3" operands to an appropriate type for the comparison. 3 === var1

Strict (===)

equal Returns true if the operands are equal and of the same type.

Strict not Returns true if the operands are not equal and/or not of the var1 !== "3" equal (!==) same type. 3 !== '3' Greater (>) than Returns true if the left operand is greater than the right var2 > var1 operand.

Greater than Returns true if the left operand is greater than or equal to the var2 >= var1 or equal (>=) right operand. var1 >= 3 Less than (<) Returns true if the left operand is less than the right operand. var1 < var2

Less than or Returns true if the left operand is less than or equal to the var1 <= var2 equal (<=) right operand. var2 <= 5 These examples assume that var1 has been assigned the value 3 and var2 has been assigned the value 4. Table 19.2 Comparison operators Arithmetic Operators Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/). These operators work as they do in most other programming languages, except the / operator returns a floating-point division in JavaScript, not a truncated division as it does in languages such as C or Java. For example: 1/2 //returns 0.5 in JavaScript 1/2 //returns 0 in Java In addition, JavaScript provides the arithmetic operators listed in the following table. Operator % (Modulus) ++ (Increment) Description Example
1

Binary operator. Returns the integer remainder of 12 % 5 returns 2. dividing the two operands. Unary operator. Adds one to its operand. If used as a prefix operator (++x), returns the value of its operand after adding one; if used as a postfix operator (x++), returns the value of its operand before adding one. If x is 3, then ++x sets x to 4 and returns 4, whereas x++ sets x to 4 and returns 3.

Unary operator Subtracts one to its operand The If x is 3 then --x sets x

L&T Infotech Confidential

Page 42 of 187

HTML &DHTML Expression and Operators

(Decrement) return value is analogous to that for the increment to 2 and returns 2, operator. whereas x++ sets x to 2 and returns 3. Unary operator. Returns the negation of its operand. If x is 3, then -x returns -3.

(Unary negation)

Table 19.3 Arithmetic Operators Bitwise Operators Bitwise operators treat their operands as a set of 32 bits (zeros and ones), rather than as decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript numerical values. The following table summarizes JavaScript's bitwise operators. Operator Bitwise AND Bitwise OR Usage a&b a|b Description Returns a one in each bit position for which the corresponding bits of both operands are ones. Returns a one in each bit position for which the corresponding bits of either or both operands are ones. Returns a one in each bit position for which the corresponding bits of either but not both operands are ones. Inverts the bits of its operand. Shifts a in binary representation b bits to left, shifting in zeros from the right. Shifts a in binary representation b bits to right, discarding bits shifted off.

Bitwise XOR

a^b

Bitwise NOT Left shift Sign-propagating right shift Zero-fill right shift

~a a << b a >> b

a >>> Shifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in b zeros from the left. Table19.4 Bitwise operators

Bitwise Logical Operators Conceptually, the bitwise logical operators work as follows:

The operands are converted to thirty-two-bit integers and expressed by a series of bits (zeros and ones).

L&T Infotech Confidential

Page 43 of 187

HTML &DHTML Expression and Operators

Each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on. The operator is applied to each pair of bits, and the result is constructed bitwise.

For example, the binary representation of nine is 1001, and the binary representation of fifteen is 1111. So, when the bitwise operators are applied to these values, the results are as follows:

15 & 9 yields 9 (1111 & 1001 = 1001) 15 | 9 yields 15 (1111 | 1001 = 1111) 15 ^ 9 yields 6 (1111 ^ 1001 = 0110)

Bitwise Shift Operators The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used. Shift operators convert their operands to thirty-two-bit integers and return a result of the same type as the left operator. The shift operators are listed in the following table. Operator << (Left shift) Description This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right. This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Example 9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36. 9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, 9>>2 yields -3, because the sign is preserved. 19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For nonnegative numbers, zero-fill right shift and sign-propagating right shift yield the same result.

>> (Signpropagating right shift)

>>> (Zero-fill shift)

This operator shifts the first operand the specified right number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.

Table 19.5 Bitwise shift operators Logical Operators

L&T Infotech Confidential

Page 44 of 187

HTML &DHTML Expression and Operators

Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value. The logical operators are described in the following table. Operator Usage && expr1 && expr2 expr1 expr2 !expr Description (Logical AND) Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false. || (Logical OR) Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false. (Logical NOT) Returns false if its single operand can be converted to true; otherwise, returns true.

Table 19.6 Logical operators Examples of expressions that can be converted to false are those that evaluate to null, 0, the empty string (""), or undefined. The following code shows examples of the && (logical AND) operator. a1=true && true // t && t returns true a2=true && false // t && f returns false a3=false && true // f && t returns false a4=false && (3 == 4) // f && f returns false a5="Cat" && "Dog" // t && t returns Dog a6=false && "Cat" // f && t returns false a7="Cat" && false // t && f returns false

L&T Infotech Confidential

Page 45 of 187

HTML &DHTML Expression and Operators

The following code shows examples of the || (logical OR) operator. o1=true || true // t || t returns true o2=false || true // f || t returns true o3=true || false // t || f returns true o4=false || (3 == 4) // f || f returns false o5="Cat" || "Dog" // t || t returns Cat o6=false || "Cat" // f || t returns Cat o7="Cat" || false // t || f returns Cat The following code shows examples of the ! (logical NOT) operator. n1=!true // !t returns false n2=!false // !f returns true n3=!"Cat" // !t returns false Short-Circuit Evaluation As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

false && anything is short-circuit evaluated to false. true || anything is short-circuit evaluated to true.

The rules of logic guarantee that these evaluations are always correct. Note that the anything part of the above expressions is not evaluated, so any side effects of doing so do not take effect. String Operators In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings. For example, "my " + "string" returns the string "my string". The shorthand assignment operator += can also be used to concatenate strings. For example, if the variable mystring has the value "alpha," then the expression mystring += "bet" evaluates to "alphabet" and assigns this value to mystring. Special Operators JavaScript provides the following special operators:

Functions
Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure--a set of statements that performs a specific task. To use a function, you must first define it; then your script can call it. This chapter contains the following sections:

Defining Functions Calling Functions Using the arguments Array Predefined Functions

Defining Functions A function definition consists of the function keyword, followed by

The name of the function. A list of arguments to the function, enclosed in parentheses and separated by commas. The JavaScript statements that define the function, enclosed in curly braces, { }. The statements in a function can include calls to other functions defined in the current application.

Windows 95, and the Mac OS) to properly format and display the information served. These programs are called Web browsers. The Web is fairly unique among Internet services (which include Internet e-mail, Gopher, and FTP) in that its protocols allow for the Web server to send information of many different types (text, sound, graphics), as well as offer access to those other Internet services. Most Web browsers are just as capable of displaying UseNet newsgroup messages and Gopher sites as they are able to display Web pages written in HTML

JPEG (compressed) TIFF Windows Bitmap Apple Picture Fractal Animations VRML MPEG video QuickTime Video For Windows Macromedia Shockwave ASCII text Postscript Adobe Acrobat graphics graphics graphics graphics animation 3D world animation video video video multimedia presentation plain text formatted text formatted text .jpg, .jpeg .tif, .tiff .bmp .pict .fli, .flc .wrl .mpg, .mpeg .mov, .moov, .qt .avi .dcr .txt, .text .ps .pdf

L&T Infotech Confidential

Page 80 of 187

HTML &DHTML HTMLs Role on the Web

CHAPTER 2 :HTML's Role on the Web

Web Applications Another emerging use for HTML on the Web is as a basis for something called a Web application. In essence, a Web application is a Web site designed to do more than simply present pages and hypermedia links to its users-it actually acts as a front end for data processing. Once the data are entered on the page, they are passed by the Web server to programs that process the information-looking up the product in the database or taking the order. The results of these programs can be generated complete with HTML codes, so that the answers can be viewed by the salesperson in her Web browser. Advantages and Disadvantages of the Web Most small or large businesses have a compelling reason to create a presence on the World Wide Web. It's an important new medium for communication that is relatively inexpensive to implement, it's a boon for dealing with customer service issues, and it's gaining popularity in leaps and bounds. But any good HTML designer should realize that there are also certain disadvantages to the Web. Advantages There are many good reasons to commit to creating a presence on the World Wide Web. I've already hinted at some of these in this chapter, but let's look at them in detail. Most of these are geared toward businesses, but you'll notice that these advantages are available to any Web site:

Page 83 of 187

HTML &DHTML Need for Web Site

HTML &DHTML Need for Web Site

about_company.html about_header.jpeg about_ceo_photo.jpeg When possible, these names will help you determine which files are associated with which HTML pages when you go to update those files. For graphics and other files that show up on multiple pages, you might want to come up with a memorable prefix, like gen_ or site, just so you can easily replace these universal files when necessary. Example: Organizing a Site To create a reasonably sized site for my home-business Web site, I'm going to use the hybrid style of organization. I have three different sections on my site: About My Business, Services, and Samples. Each of these sections will have its own directory structure. Graphics will be in their own subdirectory, as will downloadable files that I'm including (see fig. 3.2).

Figure 3.2: The directory organization for my site. The directory names, then, will be as follows: about_pages service_pages sample_pages graphics sample_files Files and graphics are named for where they appear, unless they show up in multiple Web pages. For this site, the prefixes I'm using are as follows:

HTML &DHTML Creating Web Pages

<HTML> <HEAD> <TITLE>Enter Title Here</TITLE> </HEAD> <BODY> </BODY> </HTML> And that's it. Now save this as an ASCII text file called template.html (or template.htm if you're using DOS or Windows 3.1). Now, whenever you're ready to create a new HTML document, simply load template.html into your text editor and use the Save As command to rename it. Example: Hello World When learning a new programming language, it's traditional that the first program you create is designed to say "Hello World." Well, HTML isn't a programming language-but I can use the Hello World example to prove that your template is a complete Web document. Load the template.html file into your text editor, and use the Save As command to rename it hello_world.html or something similar. Now, edit the document so that it looks like this: <HTML> <HEAD> <TITLE>Hello World Page</TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML> Select the File, Save command from your text editor. Now load your Web browser and select the Open File (or similar) command from the File menu. In the dialog box, find the document hello_world.html and select OK to load it into your Web browser. If everything goes as planned, your browser should display something similar to figure 4.2.

Figure 4.2 : The Hello World page as viewed in Microsoft Internet Explorer. And that's a Web page!

L&T Infotech Confidential

Page 93 of 187

HTML &DHTML Changing and Customizing HTML Text

<I>, </I> <U>, </U> Italic text Underlined text Table 5.1 HTML Physical Container Tags Note: Not all browsers will render underlined text (notable among them is Netscape Navigator), because hypertext links are also often displayed as underlined, which could potentially be confusing. With these tags, the browser really has no choice-it must either display the text as defined or, if it can't do that, then it must add no emphasis to the text. This is both good and bad for you as the designer. If you prefer that text not be emphasized at all if it can't be italic, for example, then you should use the <I> tag. Another feature of explicit (physical) tags is that they can generally be used in combination with other tags. As you'll see in the next section, this isn't always a good idea with implicit tags. For instance, most graphic browsers will render the following example by applying both tags to the text (see fig. 5.2).

Figure 5.2 : Most browsers can render two physical tags applied to the same selection of text. <H1><I>Welcome Home!</I></H1> <B><I>This is bold and italic</I></B> Implicit HTML Tags Implicit styles are often called logical styles, since they allow the browser some freedom in how it will display the text. These tags, like the header tags, are generally relative to one another, depending on the browser being used to view them. See Table 5.2 for some of the common implicit (logical) tags
Tags

Meaning Emphasis Strong emphasis

Generally Rendered as Italic text Bold text

<EM>, </EM> <STRONG>, </STRONG>

L&T Infotech Confidential

Page 101 of 187

HTML &DHTML Changing and Customizing HTML Text

<TT>, </TT> Teletype Monospaced text

Table 5.2 Some Basic Logical HTML Tags Table 5.2 includes a section that tells you how these tags are often rendered in graphical Web browsers. There's no rule for this, though, and the tags don't necessarily have to be rendered in that way. There are two other distinctions between these tags and the physical tags (such as bold and italic) that you've already discussed. First, these logical tags will always be rendered by any Web browser that views them. Even text browsers (which are unable to show italic text) will display the <EM> or <STRONG> tags by underlining, boldfacing, or highlighting the text. Second, these tags are generally not effective when used together. Where <B><I>text</I></B> will sometimes offer useful results, <EM><STRONG>text</STRONG></EM> rarely will. Combining these tags with other tags (such as header tags or physical tags) is often either ineffective or redundant. Other Implicits: Programming, Quoting, and Citing At the beginning of this chapter, I mentioned that the creation of HTML tags took place before the standard was ever conceived of-which might explain some of the tags that we discuss in this section. For the most part, these tags are implicit (logical) and aimed directly at certain areas of expertise. At the same time, however, the bulk of these tags will look exactly the same in a Web browser. Programmer's HTML Tags One of the early, more common uses for HTML was for documenting computer programs and offering tips or advice to computer programmers. Part of the HTML 3.0 standard, then, offers some implicit (logical) HTML tags that allow HTML designers to mark text in a way that makes it easier to present computer programming codes. Those tags are in Table 5.3.
Tags

Meaning Programming lines Keyboard text Sample output Variable

Generally Rendered as Monospaced (like <TT>) Monospaced Monospaced Italic

<CODE>, </CODE> <KBD>, </KBD> <SAMP>, </SAMP> <VAR>, </VAR>

Table 5.3 HTML Tags for Computer Programming Notice that the majority of these tags are often displayed in exactly the same way-in the default monospaced font for the browser. Then why use them?

L&T Infotech Confidential

Page 102 of 187

HTML &DHTML Changing and Customizing HTML Text

First, not all browsers will necessarily follow the "general" way. Some browsers will actually render these tags in slightly different ways from one another, so that <SAMP>, for instance, might appear in a slightly larger font than <CODE>. Second, using these tags is a great way to internally document your HTML pages, so that you can tell at a glance what certain text is supposed to be. This will help you later when you return to the document to update it or fix errors-especially as the document becomes more complex. Quoting, Citing, Definitions, and Addresses Along the same lines as the HTML "programmer's" tags, you have available certain implicit tags that work as typographer's or publisher's codes. As shown in Table 5.4, these codes often work in ways similar to others you've already seen-with a few twists. Tags <CITE>, </CITE> <BLOCKQUOTE>, </BLOCKQUOTE> <DFN>, </DFN> <ADDRESS>, </ADDRESS> Meaning Generally Rendered as Indented text Regular text

Bibliographical citation Italic text Block of quoted text Term definition

Street or e-mail address Italic text

</PRE> <H5>Prices do not include applicable sales taxes.</H5> </BODY>

You may need to play with the spacing a bit to line everything up. Save the HTML document, then choose the Open File command in your browser to proof it. Keep playing with it until it looks right. Once you have everything aligned correctly, it's actually a fairly attractive and orderly little table (see fig. 5.5).

Figure 5.5 : Use the <PRE> tag to create a table.

L&T Infotech Confidential

Page 107 of 187

HTML &DHTML Displaying Text in Lists

CHAPTER 6: Displaying Text in Lists

Using Lists in HTML List tags, like paragraphs and preformatted text, are generally HTML containers that are capable of accepting other container and empty tags within their boundaries. These list tags are responsible for affecting the spacing and layout of text, not the emphasis, so they are applied to groups of text, and allow individual formatting tags within them. Most HTML lists are created following the form: <LIST TYPE> <ITEM> First item in list <ITEM> Second item in list <ITEM> Third item </LIST TYPE> Each of the items appears on its own line, and the <ITEM> tag itself is generally responsible for inserting either a bullet point or the appropriate number, depending on the type of list that's been defined. It's also possible that the <ITEM> tag could insert no special characters (bullets or otherwise), as is the case with definition listings. You'll look at each type in the following sections. The basics to remember are to use the main container tags for list type and the individual empty tags to announce each new list item. The type of list you choose is basically a question of aesthetics. Ordered and Unordered Lists It might be better to think of these as numbered (ordered) and bulleted (unordered) lists, especially when we're talking about their use in HTML. The only drawback to that is the fact that the HTML codes for each suggest the ordered/unordered names. For numbered/ordered lists, the tag is <OL>, and for bulleted/unordered lists, the tag is <UL>. For either of these lists, a line item is designated with the empty tag <LI>. In the case of ordered lists, the <LI> tag inserts a number; for unordered lists, it inserts a bullet point. Examples of both follow. The following is an ordered list: <OL> <LI> Item number one. <LI> Item number two. <LI> Item number three. </OL> And here's an unordered list: <UL> <LI> First item. <LI> Second item.

L&T Infotech Confidential

L&T Infotech Confidential

Page 114 of 187

HTML &DHTML Displaying Text in Lists

Figure 6.5: In both of the examples, the HTML container is simply part of the list. Combining List Types When nesting lists, it's also possible to nest different types of lists within one another. This is useful when you'd like to vary the types of bullets or numbers used in an outline form. For instance: <OL> <LI>Introdution <LI>Company Financial Update <UL> <LI>First Quarter <LI>Second Quarter <LI>Third Quarter <LI>Fourth Quarter </UL> <LI>Advertising Update <UL> <LI>Results of Newspaper Campaign <LI>Additions to Staff <LI>New Thoughts on Television </UL> <LI>Human Resources Update </OL> There's nothing terribly difficult to learn here-just the added benefit of being able to nest different types of lists within others. You're still simply adding HTML markup code to items in the original list. This time, however, you have more choice over how your outline looks (see fig. 6.6).

L&T Infotech Confidential

Page 115 of 187

HTML &DHTML Displaying Text in Lists

Figure 6.6: Nesting different types of lists.

L&T Infotech Confidential

Page 116 of 187

HTML &DHTML Adding Graphics to Web page

CHAPTER 7: Adding Graphics to Your Web Pages

Now that you've seen the many ways you can add some character to your text-and use different tags to better communicate your ideas-it's time to jazz up your pages a little bit. Let's add some graphics! First, though, you should know a couple of important things about placing graphics. Some of these considerations may seem a bit foreign to you, especially if you're a graphic designer or commercial artist. You have to think in a slightly different way about graphics for your HTML pages. The Special Nature of Graphics on the Web You may be comfortable using a program such as CorelDRAW! or Adobe Photoshop to create and manipulate graphics. You may already know the difference between a PICT file and a TIF file (and why that difference might be important). You may even know a lot about preparing graphics for professional printing or adding graphics to desktop publishing documents. But if you've never done any design for the World Wide Web, there's also a good chance that you've never worried about one special graphics issue, even if you are a print design expert. How big is the graphics file that you created? Aside from using the correct graphics format, this issue is the single most important consideration in graphical Web design. The Size of Graphics Files Why is the size of graphics files so important? Your Web users have to download your pages to view them, including all the graphics associated with the pages. Couple that fact with the Web speed issues discussed in Chapter 5, and the need for smaller graphics files becomes apparent. The high-color, high-resolution graphics files that color printers and professional designers work with are generally measured in the number of megabytes of information required to create the graphics file. Each image can take up more space than is available on a floppy disk. Often, special tapes and cartridges are required to transfer these files from the graphics shop to the printer. A good average size for a Web graphic, on the other hand, is between 10K and 30K-about one to three percent of the size of those high-color, high-resolution graphics. This could be tough. Picking Your Web Graphics File Type The other thing that you need to concern yourself with is the file type that you're going to use for Web graphics. In general (at least currently), you can choose either of two file types: GIF and JPEG. GIF (CompuServe Graphics Interchange Format) is the more popular among Web browsers, but JPEG (Joint Photographic Experts Group) is gaining popularity and becoming more widely used. GIF and JPEG bring different advantages to the table.

L&T Infotech Confidential

Page 117 of 187

HTML &DHTML Adding Graphics to Web page

GIF Format Graphics Any graphical browser supports the display of GIF format files inline, meaning that the browser doesn't require a special viewer for these files. GIFs are compressed graphics, but they tend to lose less image clarity than JPEGs. Images that have smaller color palettes (those that use 256 colors or fewer) often look better in GIF format. GIF is also the file format of choice for creating transparent graphics-graphics that make the Web page appear to be the actual background of the GIF graphic. Although GIF files are compressed, they tend to be a bit larger than JPEGs, but they decompress more quickly and tend to be drawn more quickly than JPEGs (given the same file size). Another problem with the GIF file format is the fact that it includes certain copyrighted elements that make it less than an open standard for graphics interchange. The JPEG Format Gaining on GIF in popularity is the JPEG format, which is widely used by Web designers. JPEG graphics can be viewed in most new graphical browsers without a special helper application. JPEG graphics have the advantage of being better for graphics that have more colors (up to 16.7 million, in most cases) than similar GIF files; in addition, the JPEG files are smaller (look ahead to fig. 7.1). Also, the compression scheme is in the public domain.

Figure 7.1: The paint Shop Pro interface.

L&T Infotech Confidential

Page 118 of 187

HTML &DHTML Adding Graphics to Web page

On the down side, JPEGs can be a little more glossy than GIFs, meaning that the higher rate of compression results in slightly lower image quality. JPEGs also take a little longer to decompress than do GIF files. So although the smaller size of JPEG files allows them to be transmitted over the Internet more quickly, the amount of time that it takes to decompress those files sometimes negates this advantage. Creating and Manipulating Graphics It's no secret that a lot of Web design has transitioned from manipulating text-based HTML documents to designing and integrating compelling graphics into Web pages. As the Web has become more commercial, its graphical content has become more professional. If you're not up to the task of creating professional graphics, don't worry too much; programs are available that will help you. Also, it's more important that graphics further the usefulness of the text. The graphics in and of themselves are not the point. The point is to make your Web pages more exciting and informative. It is a fact, however, that Web sites are leaping forward daily into a more professional, more graphical presentation of Web-based information. Commercial artists and designers are continuing to find new niches on the Web. If you're a skilled computer artist, congratulations; this is where you'll put your skills to use. If you're not, that's OK, too. Any Web designer needs to be able to manipulate and edit graphics in a program such as Adobe Photoshop or CorelDRAW!, but you don't necessarily have to create those graphics, if that's not your forte. Creating Graphics for the Web As you get started with a program such as Photoshop or CorelDRAW!, keep in mind that the most important consideration in creating Web graphics is the file size. File size isn't generally the first consideration for creating print graphics; almost any print shop or prepress house will accept large storage cartridges or tapes that provide access to your huge full-color graphics. Not so on the Web. Your target is as small as possible-between 15K and 35K for larger (bigger on the screen) files. You can come up with graphics to use on your Web pages in many ways. Eventually, any graphic that you use needs to be in a standard file format (for example, GIF or JPEG) and relatively small. But how you come up with the final graphic has a lot to do with the information that you're trying to communicate and with your skills as an artist. The following are some of the different ways you might come up with Web graphics:

Create graphics in a graphics application. Many programs for both professional and amateur artists can output GIF- or JPEG-format files for use on the Web. Among these programs are Adobe Photoshop, CorelDRAW!, Fractal Painter, and Fractal Dabbler.

Tip: Any graphics program, even Microsoft Paint, can create Web graphics, although you may need to use another program to change the graphic to an acceptable file format.

Download public-domain graphics. Tons of sites on the Internet allow you to download icons, interface elements, and other graphics for your Web site. At the same time, public-domain clipart collections (such as those available on CD-ROM) can be useful for Web pages.

L&T Infotech Confidential

Page 119 of 187

HTML &DHTML Adding Graphics to Web page

Use scanned photographs. Using scanned photographs (especially those that you've taken yourself) is a great way to come up with graphics for your Web pages. Unless you have access to scanning hardware, though, you may need to pay someone to scan the photos. Digital cameras. Cameras are available that allow you to take photos that can be downloaded directly from the camera to your computer. While some of this equipment can be very expensive, cameras under $500 do exist, and those photos can easily be converted for use on the Web. Use PhotoCDs. Many photo development shops can create digital files of your photographs (from standard 35mm film or negatives) and save those files in PhotoCD format. Most CD-ROM drives allow you to access these photos, which you can then change to GIF or JPEG format and display on your Web pages.

HTML &DHTML Adding Graphics to Web page

<IMG SRC="image URL"> or <IMG SRC="path/filename"> SRC accepts the name of the file that you want to display, and image URL (or path/filename) is the absolute (full URL) or relative path (for a local file or a file in the current directory) to the image. As the first example shows, you can display on your page any graphic file that is generally available on the Internet, even if the file resides on a remote server. For graphics files, however, it is much more likely that the file is located on the local server, so a path and filename are sufficient. You could enter the following text in a browser: <HR> <P>This is a test of the Image tag. Here is the image I want to display:</P> <IMG SRC="image1.gif"> <HR> In this case, <IMG SRC="image1.gif"> is a relative path URL, suggesting that the file image1.gif is located in the same directory as the HTML document. The result would be displayed by a browser as shown in figure 7.4.

Figure 7.4: Displaying inline graphics on a Web page.

Page 133 of 187

HTML &DHTML Hypertext and Creating Links

Adding the <BASE> Tag The <BASE> tag is used to establish the absolute base for relative URLs used in your document's hypertext links. This tag is especially useful when your Web pages may appear in different subdirectories of a single main directory, as in some of the organizational types discussed before. The format of the <BASE> tag is as follows: <BASE HREF="absolute URL"> Note that the <BASE> tag is designed to appear only between the <HEAD> tags. It may be helpful to think of <BASE> as doing something similar in function to a DOS path statement. The <BASE> tag tells the browser that relative URLs within this particular Web document are based on the URL defined in the <BASE> tag. The browser then assumes that relative URLs derive from the URL given in the <BASE> tag and not necessarily from the current directory of the HTML document. Consider a document named http://www.fakecorp.com/products/list.html that looks something like this: <HEAD> <TITLE>Page One</TITLE> </HEAD> <BODY> <A HREF="index.html">Back to Index</A> </BODY> In this example, the browser tries to find a document named index.html in the directory products, because the browser assumes that all relative addresses are derived from the current directory. Using the <BASE> tag, however, changes this example a bit, as follows: <HEAD> <BASE HREF="http://www.fakecorp.com/"> <TITLE>Page One</TITLE> </HEAD> <BODY> <A HREF="index.html">Back to Index</A> </BODY> Now the browser looks for the file index.html in the main directory of this server, regardless of where the current document is stored (such as in the products directory). The browser interprets the relative URL in the anchor tag as though the complete URL were http://www.fakecorp.com/index.html. Tip: If you plan to create a large Web site, you may want to add the <BASE> tag (complete with the base URL) to your HTML template file.

L&T Infotech Confidential

Page 134 of 187

HTML &DHTML Hypertext and Creating Links

Using the <BASE> tag to point to your Web site's main directory allows you to create the different types of organization systems described in Chapter 5 by using relative URL statements to access HTML documents in different subdirectories. Example: A Hybrid-Style Web Site In this example, you create an HTML document called products.html, located at the URL http://www.fakecorp.com/products/products.html. Some of your graphics are maintained in a subdirectory of the main directory of this Web site; the subdirectory is called graphics/. You also have links to other pages in the main directory and in a subdirectory called about/. Figure 8.3 shows this graphically.

HTML &DHTML Hypertext and Creating Links

In many graphical browsers, this URL often loads an e-mail window, which allows you to enter the subject and body of an e-mail message and then send it via your Internet account (see fig. 8.5). Even many of the major online services support this hyperlink with their built-in e-mail systems.

Figure 8.5 : Clicking a mailto : link bring up an e-mail message window in Netscape. Not all Web browsers accept the mailto: style of URL, however, and most of those don't return an error message. If you use this type of link, you may want to warn users. Something like the following text should work well for users of nongraphical browsers: <P>If your browser supports the mailto: command, click <A HREF="mailto:[email protected]">here</A> to send me an e-mail message. </P> Other Internet Services Using the various types of URLs discussed in Chapter 3, you can create links to nearly all other types of Internet services as well. For Gopher sites, for example, a hypertext link might look like the following example: <A HREF="gopher://marvel.loc.gov/">the Congress Gopher</A> Library of

Most Web browsers can display Gopher menus. In most cases, clicking a gopher link points the browser at the Gopher site, and the Gopher menu appears in the browser window.

L&T Infotech Confidential

Page 138 of 187

HTML &DHTML Hypertext and Creating Links

You can create links that cause the Web browser to download a file from an FTP server, as follows: <P>You can also <A HREF="ftp://ftp.fakecorp.com/pub/newsoft.zip">download </A>the latest version of our software. When the connection to the FTP server has been negotiated, the file begins to download to the user's computer (see fig. 8.6). Depending on the Web browser, this file may not be formatted correctly. Each browser needs to be set up to accept files of a certain type (such as the PKZip format file in the preceding example).

Figure 8.6 : Netscape is downloading a file from an FTP server. Note: Most browsers can accept hyperlinks only to anonymous FTP servers. You generally should not include in your HTML documents links to FTP servers that require usernames and passwords. Again, most browsers have some mechanism (sometimes built into the browser window) for reading UseNet newsgroups. Some browsers launch a separate program to read UseNet groups. In either case, you can create a link like the following: <A HREF="news:news.answers">UseNet Help Newsgroup</A> This link loads whatever UseNet reading features the browser employs and displays the specified newsgroup (see fig. 8.7). The news: URL type does not require a particular Internet server address to function. Each browser should be set up with its own links to the user's news server.

L&T Infotech Confidential

Page 139 of 187

HTML &DHTML Hypertext and Creating Links

L&T Infotech Confidential

Page 143 of 187

HTML &DHTML Image Map

NCSA Imagemap, then, simply accepts the coordinates and looks them up in the database file that defines the hot zones for that image map. When NCSA Imagemap finds those coordinates and their associated URL, it sends a "connect to URL" command (just as a hypertext link does) that causes your browser to load the appropriate HTML document. The Map Definition File To determine which parts of the image map are linked to which URLs, the map server program must have a map definition file at its disposal. This file is generally a text file with the extension MAP, stored somewhere in the CGI-BIN directory for your Web site. Exactly where this file is stored depends on the combination of your Web server and map server. Let it suffice to say that you'll need to consult your server's documentation or your ISP. The map definition file looks something like figure 9.2. You can create this file and save it as a standard ASCII text file with the appropriate extension; fortunately, you probably won't have to.

Figure 9.2 : A map definition file. You can define different shapes in the file; these shapes correspond to the shapes of the hot zones that overlay the graphic that you want to use for your image. Each set of coordinates creates a point on the graphic. The coordinates are expressed in pixels, with each pair of numbers representing the number of pixels to the right and down, respectively, from the top left corner of your graphic. The shapes require a different number of points to define them. Rectangles require two points, for example, and polygons require as many points as necessary. Luckily, the number of points involved isn't something that you'll have to worry about. Simply by using a map editing program for Windows or Macintosh (discussed later in this chapter in the sections, "MapEdit for Microsoft

L&T Infotech Confidential

L&T Infotech Confidential

Page 154 of 187

HTML &DHTML HTML Forms

The first possible value for the TYPE attribute is TEXT, which creates a single-line textbox of a length you choose. Notice that the length of the box and the maximum length entered by the user can be set separately. It's possible to have a box longer (or, more often, shorter) than the maximum number of characters you allow to be entered. Here's an example of a textbox: Last name: <INPUT TYPE="TEXT" NAME="last_name" SIZE="40" MAXLENGTH="40"> When appropriately entered between <FORM> tags, this <INPUT> yields a box similar to figure 10.4. If desired, the attribute VALUE can be used to give the textbox a default entry, as in the following example:

Figure 10.4 : Using the TEXT option with the TYPE attribute. Type of Computer: <INPUT TYPE="TEXT" NAME="computer" SIZE="50" MAXLENGTH="50" VALUE="Pentium">
PASSWORD

The PASSWORD option is nearly identical to the TEXT option except that it responds to typed letters with bullet points or a similar scheme (chosen by the browser) to keep the words from being read. A sample password box could be the following: Enter Password: <INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25"> When characters are typed into this textbox, they are shown on the screen as in figure 10.5.

Figure 10.5 : PASSWORD hides text from people looking over your user's shoulder. Recognize that the text is still stored as the text typed by the user-not as bullet points or similar characters.

L&T Infotech Confidential

Page 158 of 187

HTML &DHTML HTML Forms

CHECKBOX

This value for TYPE allows you to create a checkbox-style interface for your form. This is best used when there are two possible values for a given choice-and no others. You can also determine whether or not a checkbox will already be checked (so that it must be unchecked by the user, if desired), by using the attribute CHECKED. Here's an example of adding checkboxes to a form: Type of computer(s) you own:<BR> <INPUT TYPE="CHECKBOX" NAME="Pentium" CHECKED> Pentium <INPUT TYPE="CHECKBOX" NAME="486"> 486-Series PC <INPUT TYPE="CHECKBOX" NAME="Macintosh"> Macintosh In this example, it's possible to check as many of the options as are presented. CHECKBOX evaluates each item separately from any others. Figure 10.6 illustrates how CHECKBOX is displayed in a browser.

Figure 10.6 : Notice that Pentium is prechecked.

RADIO

Like CHECKBOX, RADIO is designed to offer your user a choice from pre-determined options. Unlike CHECKBOX, however, RADIO is also designed to accept only one response from among its options. RADIO uses the same attributes and basic format as CHECKBOX. RADIO requires that you use the VALUE attribute, and that the NAME attribute be the same for all of <INPUT> tags that are intended for the same group. VALUE, on the other hand, should be different for each choice. For instance, look at the following example: Choose the computer <INPUT TYPE="RADIO" Pentium <INPUT TYPE="RADIO" Series PC <INPUT TYPE="RADIO" Macintosh <INPUT TYPE="RADIO" type you use most often:<BR> NAME="Computer" VALUE="P" CHECKED> NAME="Computer" VALUE="4"> 486NAME="Computer" VALUE="M"> NAME="Computer" VALUE="O"> Other

With RADIO, it's important to assign a default value, since it's possible that the user will simply skip the entry altogether. While the user can't check more than one, he or she can check none. So choose the most common value and set it as CHECKED, just so that the form-processing script doesn't have trouble. Note: Of course, if you want to give your user the option of choosing none, then you can leave off the CHECKED attribute. It's more complete and obvious for the user, however, to include another radio button with a VALUE of none, and make it the CHECKED choice.

L&T Infotech Confidential

Page 159 of 187

HTML &DHTML HTML Forms

HIDDEN

This <INPUT> type technically isn't "input" at all. Rather, it's designed to pass some sort of value along to the Web server and script. It's generally used to send a keyword, validation number, or some other kind of string to the script so that the script knows it's being accessed by a valid (or just a particular) Web page. The <INPUT TYPE="Hidden"> tag takes the attributes NAME and VALUE. Note: This isn't really terribly covert, since an intrepid user could simply choose View Source to see the value of the hidden field. It's more useful from a programmer's standpoint. For instance, on a large Web site, the hidden value might tell a multi-purpose script which particular form (among many) is sending the data, so the script knows how to process the data.
RESET

The <INPUT> tag has built into it the ability to clear an HTML form. RESET simply creates a push button (named with the VALUE string) that resets all of the elements in that particular FORM to their default values (erasing anything that the user has entered). An example would be the following: <INPUT TYPE="RESET"> With a VALUE statement, you could enter the following: <INPUT TYPE="RESET" VALUE="Reset the Form"> The results are shown in figure 10.7.

Figure 10.7 : Default and VALUE-attributed Reset buttons.

SUBMIT

The <INPUT> tag also has a type that automatically submits the data that's been entered into the HTML form. The SUBMIT type accepts only the attribute VALUE, which can be used to rename the button. Otherwise, the only purpose of the Submit button is to send off all the other form information that's been entered by your user. See the following two examples (see fig. 10.8):

Figure 10.8 : Creating a Submit button.

L&T Infotech Confidential

Page 160 of 187

HTML &DHTML HTML Forms

<INPUT TYPE="SUBMIT"> <INPUT TYPE="SUBMIT" VALUE="SEND IT IN!"> You can use just about anything you want for the VALUE, although it's best to remember that really small words, like OK, don't look great as buttons. To make a button larger, enter the VALUE with spaces on either end, like in the following: <INPUT TYPE="SUBMIT" VALUE=" Example: A More Complete Form Along with all the other <INPUT> types, now you've finally got a way to submit data. So, let's create a more involved form that includes some of these examples-a subscription form. Save your HTML template to create a new document. Then, enter something similar to Listing 10.1. GO ">

Listing 10.1 scrp_frm.html Creating a Complete Form <BODY> <H2>Subscribe to CorpWorld</H2> <P>Interested in receiving daily email updates of all the latest exploits of BigCorp? Well, now you can. And, best of all, it's free! Just fill out this form and submit it by clicking the "Send it In" button. We'll put you on our mailing list, and you'll receive your first email in 3-5 days.</P> <FORM METHOD="Send" ACTION="http://www.fakecorp.com/cgi-bin/subscribe"> Please complete all of the following:<BR> First Name: <INPUT TYPE="Text" Name="first" SIZE="25" MAXLENGTH="24"><BR> Last Name: <INPUT TYPE="Text" Name="last" SIZE="35" MAXLENGTH="34"><BR> Business: <INPUT TYPE="Text" Name="business" SIZE="50" MAXLENGTH="49"><BR> We must have a correct email address to send you the newsletter:<BR> Email: <INPUT TYPE="Text" Name="email" SIZE="50" MAXLENGTH="49"><BR> How did you hear about BigCorp's email letter?<BR> <INPUT TYPE="RADIO" NAME="hear" VALUE="web" CHECKED>Here on the Web <INPUT TYPE="RADIO" NAME="hear" VALUE="mag">In a magazine <INPUT TYPE="RADIO" NAME="hear"

L&T Infotech Confidential

Page 161 of 187

HTML &DHTML HTML Forms

VALUE="paper">Newspaper story <INPUT TYPE="RADIO" NAME="hear" VALUE="other">Other <BR> Would you care to be on our regular mailing list?<BR> <INPUT TYPE="CHECKBOX" NAME="snailmail" CHECKED> Yes, I love junk mail<BR> <INPUT TYPE="RESET"> <INPUT TYPE="SUBMIT" VALUE="Send it in!"> </FORM> </BODY>

Notice that, for text type <INPUT> boxes, the MAXLENGTH is one less than the size of the box. This tends to look a little better, but choosing the size is up to you. Figure 10.9 shows how it looks on a Web page.

Figure 10.9 : The complete form in MS Internet Explorer. Creating Pop-Up and Scrolling Menus

The last types of input that you can offer to users of your Web page revolve around the <SELECT> tag, which can be used to create different L&T Infotech Confidential Page 162 of 187

HTML &DHTML HTML Forms types of pop-up and scrolling menus. This is another element designed specifically for allowing users to make a choice-they can't enter their own text. The <SELECT> tag requires a NAME attribute and allows you to decide how many options to display at once with the SIZE attribute.
Using <SELECT> Also notice that, like <TEXTAREA>, <SELECT> is a container tag. Options are placeed between the two <SELECT> tags, each with a particular VALUE that gets associated with <SELECT>'s NAME attribute when chosen. The following is the basic format: <SELECT NAME="variable"> <OPTION SELECTED VALUE="value"> Menu text <OPTION VALUE="value"> Menu text ... </SELECT> The attribute SELECTED is simply designed to show which value will be the default in the menu listing. value can be anything you want to pass on to the Web server and associated script for processing. An example might be: Choose your favorite food: <SELECT NAME="food"> <OPTION SELECTED VALUE="ital"> Italian <OPTION VALUE="texm"> TexMex <OPTION VALUE="stek"> SteakHouse <OPTION VALUE="chin"> Chinese </SELECT> You can also use the SIZE attribute to decide to display the menu in its entirety, by simply changing the first line of the example to the following: <SELECT NAME="food" SIZE="4"> Both examples are shown in figure 10.10.

Figure 10.10 : Two <SELECT> menus-a pop-up and a fixed.

ALIGN. The ALIGN attribute is used to determine where the chart will appear relative to the browser window. Valid values are ALIGN=LEFT and ALIGN=RIGHT. As an added bonus, text will wrap around the table (if it's narrow enough) when the ALIGN=LEFT or ALIGN=RIGHT attributes are used. WIDTH. The WIDTH attribute sets the relative or absolute width of your table in the browser window. Values can be either percentages, as in WIDTH="50%", or absolute values. With absolute values, you must also include a suffix that defines the units used, as in px for pixels or in for inches (e.g., WIDTH="3.5in"). Absolute values for table widths are discouraged, though. COLS. The COLS attribute specifies the number of columns in your table, allowing the browser to draw the table as it downloads. BORDER. The BORDER attribute defines the width of the border surrounding the table. Default value is 1 (pixel). CELLSPACING. The CELLSPACING attribute tells the browser how much space to include between the walls of the table and between individual cells. (Value is a number in pixels.) CELLPADDING. The CELLPADDING attribute tells the browser how much space to give data elements away from the walls of the cell. (Value is a number in pixels.)

It is definitely not necessary to use all of these attributes for your table-in fact, the simple table example earlier didn't use any of them. Often, ho wever, they will come in handy. Example: Playing with Table Attributes This is another fairly freeform example. Let's look at the difference between a plain table and a table embellished with a few attributes. Insert Listing 11.1 in a new HTML document. Listing 11.1 badtable.html Creating a Plain Table <BODY> <H2> BigCorp's Computer Systems </H2> <P>We use only the highest quality components and software for all of our Wintel computer systems. Plus, if you don't see a configuration you like, call (or email) and let us know. We'll custom build to please!</P> <TABLE> <CAPTION>BigCorp's Computer Systems and Specifications</CAPTION> <TR><TH>System 486</TH><TH>System 586</TH><TH>System 686</TH>

L&T Infotech Confidential

L&T Infotech Confidential

Page 169 of 187

HTML &DHTML Table

Table Data and Rows You've already used the <TH> and <TD> tags to include headers and data in your tables. You may have noticed that, essentially, the only difference between the two is that <TH> emphasizes (boldfaces) the text and <TD> does not. Now, technically, the <TH> is a tag that the browser interprets as a header and thus displays text in a way that's distinct from the <TD> tag. In practice, that generally means it's turned bold. Aside from accepting nearly any type of HTML markup tags within them, both tags can accept four attributes (in most HTML versions). These are ALIGN, VALIGN, COLSPAN, and ROWSPAN. If you were to add all of these attributes, a typical <TH> (or <TD>) tag would be formatted like the following: <TH ALIGN="direction" VALIGN="direction" COLSPAN="number" ROWSPAN="italics"> ALIGN is used to align the data within the cell horizontally, accepting values of LEFT, RIGHT, and CENTER. Note that ALIGN is redundant when used with the ALIGN attribute of <TR>, unless it is used to override the <TR ALIGN=> setting. VALIGN is used to align the data vertically within cells. Possible values are TOP, BOTTOM, and CENTER. COLSPAN and ROWSPAN are used to force a cell to span more than one column or row, respectively. An example of this might be: <TABLE BORDER> <TR><TH>Student</TH><TH>Test 1</TH><TH>Test 2</TH><TH>Average</TH> <TR><TH>Mike M.</TH><TD>100</TD><TD>75</TD><TD ROWSPAN="3">N/A</TD> <TR><TH>Susan T.</TH><TD>80</TD><TD>95</TD> <TR><TH>Bill Y.</TH><TD COLSPAN="2">Dropped Course</TD> </TABLE> Viewed in a browser, the table looks like figure 11.5.

Figure 11.5: Using COLSPAN and ROWSPAN in a table.

L&T Infotech Confidential

Page 170 of 187

HTML &DHTML Multimedia Object & Graphics

CHAPTER 12: Images, Multimedia Objects, and Background Graphics

Inserting Multimedia Objects One of the latest HTML 4.0 (or, at least, beyond HTML 3.0) initiatives has been the addition of a tag called the <INSERT> tag, which expands on the role of the <IMG> tag by allowing various different multimedia types to be displayed inline. As the bandwidth of connections to the Internet grows, and the technology for inline multimedia grows with it, more and more Web viewers will be capable of viewing inline animations, presentation graphics, movies, and more. As of this writing, very few browsers support the <INSERT> tag. Unlike some other HTML initiatives, however, this specification has been written with much more involvement from industry leaders like Microsoft, Netscape, Spyglass, and Sun. The <INSERT> Tag This is not exactly the easiest tag to get your arms around. Like tables, the <INSERT> tag is a container for other tags that help define the element. But, somewhat unlike tables, most of those contained tags don't actually display anything. Let's take a look at a typical <INSERT> container: <INSERT DATA="URL to multimedia file" TYPE="type of file"> Other Insert tags... </INSERT> Already, there are a couple of things you're required to know. You need to know the filename of the multimedia file or the appropriate URL if it's not in the current directory. You also need to know the MIME-style "type" of the data file. MIME-Style Data Types MIME (Multipurpose Internet Mail Extensions) data types are simply the standardized way that certain Internet programs can identify the type of ASCII and non-ASCII files that are being transferred to a client application. A very common example of this is the text/html MIME type. The <INSERT> tag (and HTML in general) is not limited to the official MIME categories and types, hence we'll call them MIME-style data types. For the purposes of the <INSERT> tag, this is just a more reliable way to tell a Web browser what type of multimedia file to expect more reliable, that is, than just the file's extension.

L&T Infotech Confidential

Page 171 of 187

HTML &DHTML Multimedia Object & Graphics

Some common MIME-style data types appear in Table 12.1. These and others are all useful for the <INSERT> tag. Type of File GIF JPEG AIFF sound WAV sound QuickTime video AVI video Real Audio Macromedia Director MIME Equivalent image/gif image/jpeg audio/aiff audio/x-wav video/quicktime application/avi application/x-pnrealaudio application/x-director

CHAPTER 13: Netscape Frames

One of the most exciting Netscape-only additions to HTML recently has been the frames specification. Although submitted to the W3C, frames, for now, remain almost exclusively Netscape-only. Frames aren't overwhelmingly difficult to add to your pages, although they do require a slight shift in thought. Although they seem similar to tables at first, frames are considerably more powerful. So much so, in fact, that frames can even divide your Web page so that it is accessing more than one URL at a time. The Idea Behind Netscape Frames Netscape frames are basically another way you can create a unique interface for your Web site. By dividing the page into different parts-each of which can be updated separately-there becomes a number of different interface elements you can offer. Even a simple use of the frame specification lets you add interface graphics or a corporate logo to a site, while the rest of your page scrolls beneath it (see fig. 13.1).

Figure 13.1 : A simple frames interface Using frames in this way takes you one step closer to the ideal Web interface, because it makes it as intuitive and universal as possible.

L&T Infotech Confidential

HTML &DHTML Netscape Frames

L&T Infotech Confidential

Page 187 of 187

HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
From Everand
HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
David DuRocher
4/5 (19)
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
Responsive Web Design with HTML5 and CSS3 - Second Edition
From Everand
Responsive Web Design with HTML5 and CSS3 - Second Edition
Ben Frain
4/5 (1)
Paint Conversion Chart
100% (1)
Paint Conversion Chart
120 pages
Using DHTML
No ratings yet
Using DHTML
20 pages
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
From Everand
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
i Code Academy
4/5 (11)
DHTML
No ratings yet
DHTML
14 pages
Web Devlopment
From Everand
Web Devlopment
Netra
No ratings yet
The Basics of Front-End Web Development (HTML, CSS, and JavaScript): Learn How To Design and Build Websites As A Beginner
From Everand
The Basics of Front-End Web Development (HTML, CSS, and JavaScript): Learn How To Design and Build Websites As A Beginner
Roggie Clark
No ratings yet
Ecommerce DHTML Notes
No ratings yet
Ecommerce DHTML Notes
9 pages
DHTML Tutorial
No ratings yet
DHTML Tutorial
7 pages
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
Mastering HTML and CSS for Modern Development
From Everand
Mastering HTML and CSS for Modern Development
THE NORTHERN HIMALAYAS
No ratings yet
Unit-7 (Dynamic webpage) 23rd December 2024
No ratings yet
Unit-7 (Dynamic webpage) 23rd December 2024
29 pages
DHTML
No ratings yet
DHTML
9 pages
Mastering Web Development Your Guide to Building, Deploying, and Optimizing Websites: Your Guide to the Digital World, #1
From Everand
Mastering Web Development Your Guide to Building, Deploying, and Optimizing Websites: Your Guide to the Digital World, #1
Atokhon Ghaniev
No ratings yet
Practical No - 1: Web Technologies
No ratings yet
Practical No - 1: Web Technologies
33 pages
Certified Web Developer: HTML, CSS and JavaScript
From Everand
Certified Web Developer: HTML, CSS and JavaScript
Rob Botwright
No ratings yet
Web Technology Unit-2 Complete
No ratings yet
Web Technology Unit-2 Complete
25 pages
CodeNotes for Web-Based UI
From Everand
CodeNotes for Web-Based UI
Gregory Brill
4/5 (1)
DHTML
No ratings yet
DHTML
26 pages
DHTML
No ratings yet
DHTML
26 pages
mo2-short
No ratings yet
mo2-short
14 pages
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
From Everand
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
Stephen J Link
5/5 (3)
DHTML
No ratings yet
DHTML
5 pages
Internet 2nd Notes
No ratings yet
Internet 2nd Notes
15 pages
Web Eng PDF
No ratings yet
Web Eng PDF
27 pages
Beginning CSS: Cascading Style Sheets for Web Design
From Everand
Beginning CSS: Cascading Style Sheets for Web Design
Ian Pouncey
3.5/5 (8)
Cash Memo Demo
No ratings yet
Cash Memo Demo
5 pages
Web Design With Html5, a Primer
From Everand
Web Design With Html5, a Primer
Matthew Macarty
No ratings yet
unit1 ppt (1)
No ratings yet
unit1 ppt (1)
76 pages
XHTML
From Everand
XHTML
Jitendra Patel
No ratings yet
Unit 3 Dhtml Xhtml
No ratings yet
Unit 3 Dhtml Xhtml
14 pages
Wt Question With Answer
No ratings yet
Wt Question With Answer
21 pages
Your First Week With Bootstrap
From Everand
Your First Week With Bootstrap
Syed Fazle Rahman
No ratings yet
Learn complete HTML and CSS in 7 days | "HTML & CSS Masterclass: Unleash Your Web Design Skills"
From Everand
Learn complete HTML and CSS in 7 days | "HTML & CSS Masterclass: Unleash Your Web Design Skills"
Prajwal
No ratings yet
DHTML Notes
100% (1)
DHTML Notes
16 pages
Introduction To The Web
No ratings yet
Introduction To The Web
22 pages
HTML5 Digital Classroom
From Everand
HTML5 Digital Classroom
AGI Creative Team
No ratings yet
Comprehensive Hypertext Markup Language (HTML).: A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners.
From Everand
Comprehensive Hypertext Markup Language (HTML).: A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners.
Ibrahim Nugwa Abdulrazak
No ratings yet
[Ebooks PDF] download Web Development for beginners Learn HTML CSS Javascript step by step with this Coding Guide Programming Guide for beginners Website development 1st Edition Mastery full chapters
100% (5)
[Ebooks PDF] download Web Development for beginners Learn HTML CSS Javascript step by step with this Coding Guide Programming Guide for beginners Website development 1st Edition Mastery full chapters
55 pages
The Evolution of Web Development
From Everand
The Evolution of Web Development
Thandazani Mbutho
No ratings yet
Tutorial 1 Developing A Basic Web Page
No ratings yet
Tutorial 1 Developing A Basic Web Page
62 pages
Bootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4
From Everand
Bootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4
Jacob D Lett
No ratings yet
1-HTML 0y9skgo
No ratings yet
1-HTML 0y9skgo
70 pages
A Static Web Page
No ratings yet
A Static Web Page
5 pages
XML &amp DHTML
No ratings yet
XML &amp DHTML
2 pages
HTML Introduction
No ratings yet
HTML Introduction
6 pages
Introduction to HTML & CSS
From Everand
Introduction to HTML & CSS
Claudia Da Silva
4.5/5 (4)
DHTML: What You Should Already Know
No ratings yet
DHTML: What You Should Already Know
50 pages
Notes of Web Technology
No ratings yet
Notes of Web Technology
28 pages
Module 6 (DHTML)
No ratings yet
Module 6 (DHTML)
16 pages
DHTML Tutorial: Components of Dynamic HTML
No ratings yet
DHTML Tutorial: Components of Dynamic HTML
17 pages
HTML& CSS for Beginners: Learn the Fundamentals of Computer Programming
From Everand
HTML& CSS for Beginners: Learn the Fundamentals of Computer Programming
Jo Foster
No ratings yet
HTML Unleashed: The Complete Guide
From Everand
HTML Unleashed: The Complete Guide
Pen Hur
No ratings yet
Ch01 Basics of HTML
No ratings yet
Ch01 Basics of HTML
25 pages
Web Development Essentials: A Beginner's Guide to HTML, CSS, JavaScript, and SEO: HTML 101 : Beginner to pro
From Everand
Web Development Essentials: A Beginner's Guide to HTML, CSS, JavaScript, and SEO: HTML 101 : Beginner to pro
Alberto Robles
No ratings yet
End of Semester Examination: Web Technologies Marking Scheam
No ratings yet
End of Semester Examination: Web Technologies Marking Scheam
7 pages
The Basics of CSS (Cascading Style Sheets) Coding For Beginners: Learn Basic CSS Programming Concepts
From Everand
The Basics of CSS (Cascading Style Sheets) Coding For Beginners: Learn Basic CSS Programming Concepts
Roggie Clark
No ratings yet
Lecture 01
No ratings yet
Lecture 01
10 pages
HTML 4.01: Every Web Developer Has To Know The Building Blocks of The Web
No ratings yet
HTML 4.01: Every Web Developer Has To Know The Building Blocks of The Web
21 pages
A General Software Defect-Proneness Prediction Framework: Qinbao Song, Zihan Jia, Martin Shepperd, Shi Ying, and Jin Liu
No ratings yet
A General Software Defect-Proneness Prediction Framework: Qinbao Song, Zihan Jia, Martin Shepperd, Shi Ying, and Jin Liu
15 pages
Modeling and Analysis For Educational Software Quality Hierarchy Triangle
No ratings yet
Modeling and Analysis For Educational Software Quality Hierarchy Triangle
5 pages
Model Why
No ratings yet
Model Why
11 pages
Chapter 11 Arrays
No ratings yet
Chapter 11 Arrays
23 pages
Chapter 12345question Answers
No ratings yet
Chapter 12345question Answers
37 pages
Chapter Five Data Compression
No ratings yet
Chapter Five Data Compression
28 pages
SW Engineering
No ratings yet
SW Engineering
21 pages
Qualit y Time: Security and Software Quality
No ratings yet
Qualit y Time: Security and Software Quality
9 pages
Very Short Answer Questions
No ratings yet
Very Short Answer Questions
25 pages
Classes and Objects: in This Chapter, We Will Learn
No ratings yet
Classes and Objects: in This Chapter, We Will Learn
38 pages
Data Models
No ratings yet
Data Models
57 pages
DBMS Notes PDF
No ratings yet
DBMS Notes PDF
38 pages
Object Oriented Concepts
No ratings yet
Object Oriented Concepts
20 pages
Computer Literacy Questions: Page 1 of 6
No ratings yet
Computer Literacy Questions: Page 1 of 6
6 pages
Example 1.1: To Find The Average Marks Scored in A Computer Science Test in A Class
No ratings yet
Example 1.1: To Find The Average Marks Scored in A Computer Science Test in A Class
2 pages
HTML Basics:: For Customized Training Related To Javascript or
No ratings yet
HTML Basics:: For Customized Training Related To Javascript or
22 pages
HTML (Hyper Text Markup Language)
100% (1)
HTML (Hyper Text Markup Language)
53 pages
CSS notes
No ratings yet
CSS notes
11 pages
CSE442 D3 Tutorial PDF
No ratings yet
CSE442 D3 Tutorial PDF
52 pages
HTML Can Be Edited by Using Professional HTML Editors Like
No ratings yet
HTML Can Be Edited by Using Professional HTML Editors Like
22 pages
Css
100% (1)
Css
41 pages
Responsive Web Design
No ratings yet
Responsive Web Design
9 pages
Jennifer Barnes - Resume
No ratings yet
Jennifer Barnes - Resume
5 pages
Online Blog: Presented To:-Presented By
No ratings yet
Online Blog: Presented To:-Presented By
20 pages
Digit Fastrack - Sep.2016
75% (4)
Digit Fastrack - Sep.2016
101 pages
Canvas Clock Hands
No ratings yet
Canvas Clock Hands
8 pages
ZK 5.0.7 ZUML Reference
No ratings yet
ZK 5.0.7 ZUML Reference
103 pages
Leave Tracking Tool Final Report
No ratings yet
Leave Tracking Tool Final Report
42 pages
Stock 30 Oct
No ratings yet
Stock 30 Oct
27 pages
Script 1
No ratings yet
Script 1
49 pages
Web Technology
No ratings yet
Web Technology
88 pages
2021 Catalogue April Web
No ratings yet
2021 Catalogue April Web
23 pages
B A S I C P E N S: Navfac Cad Standard: Autocad Pen Table
No ratings yet
B A S I C P E N S: Navfac Cad Standard: Autocad Pen Table
1 page
Appgini Documentation
No ratings yet
Appgini Documentation
63 pages
Fonts and Web Typography
No ratings yet
Fonts and Web Typography
23 pages
Printer For Comfort Panels en
100% (1)
Printer For Comfort Panels en
20 pages
Hotel Reservation System Using QR Code
100% (1)
Hotel Reservation System Using QR Code
43 pages
Login HTML
No ratings yet
Login HTML
2 pages
Kaplog.com
No ratings yet
Kaplog.com
18 pages
CSS in Practice
0% (1)
CSS in Practice
17 pages
Back Base Concepts and Introduction
No ratings yet
Back Base Concepts and Introduction
69 pages
PAS Bahasa Inggris Kelas 3
No ratings yet
PAS Bahasa Inggris Kelas 3
4 pages
Themes Old N New
No ratings yet
Themes Old N New
30 pages
Unit I - Lesson 4 - Basic Structure of HTML
100% (1)
Unit I - Lesson 4 - Basic Structure of HTML
13 pages