ptg 34 Chapter 2: The HTML Language marks the end of the document body. Clicking below the horizontal rule will not have any eect. It is just extra space the browser put there because the document is shorter than the browser window. . e window’s width does not matter. e document will always occupy the window’s full width. A click will work anywhere above the rule, except at the very edges of the page. is is because there is space between the document’s window and the body content. is space is called padding. . e heading text does not change color when you click in the body. is is due to the cascading nature of CSS. Child objects inherit properties from their parents but can override and add to them. So, even though the level-one heading is inside the document body, the heading text does not change to red because a more specic CSS rule takes precedence. . Aer the paragraph text changes to red, there’s no going back for the user, short of reloading the page. It is not that the change is permanent. It is just because no behavior has been dened to allow users to go back to the initial state. e JavaScript code does not in any sense “live” in the space aer the docu- ment body. Script elements can appear anywhere in an HTML document. In Example 2.3, the script code must be placed aer the body element because the browser executes scripts as they are encountered in the source code. It would be an error to reference an object before it is fully dened. ere are other ways to accomplish this, including calling JavaScript functions within the HTML code using special HTML event-handling attributes. Also, exter- nal JavaScript libraries, such as jQuery, provide a means to execute functions when the document is “ready”—that is, when all the DOM objects are fully dened. is allows code to be placed apart from the HTML source. Without going into the details of jQuery syntax, the equivalent jQuery code to dene the body behavior of Example 2.3 would look like this: <script type="text/javascript"> jQuery(document).ready( function () { jQuery('body').click( function () { jQuery('body').css('color', 'red'); }); }); </script> From the Library of Wow! eBook ptg HTML5 Syntax 35 is code could be placed in the document’s head section or in an external le linked from the document’s head. e function to assign the body’s click behavior is not dened until the document is ready. jQuery gives the web developer a simple way to access DOM objects using the same syntax that CSS uses to select elements for the application of presentation rules. It is one of many tools that make web programming fun! See Chapter 5, “Building Web- sites,” for more information on using JavaScript, jQuery, and other scripting resources to add dynamic behaviors to your web page elements. HTML S You must learn a few general syntax rules to work with HTML documents. First, an HTML document consists of text content along with HTML com- ments, character entities, and markup elements. HTML markup elements are further classied into a few categories, depending on what kind of content can be inside the element. CoMMEnTS Comments are the easiest markup element to understand. HTML authors are encouraged to use comments to annotate HTML source code so that other people can understand what the code should do. A comment is a string of characters beginning with <! and ending with >. Comments can extend over several lines, making them useful for temporarily disabling and enabling alternative code segments. However, you should be careful not to overlap com- ments, because that usually results in unexpected content appearing on a page. Also, avoid using a double dash ( ) inside a comment. It is technically invalid in HTML5, and some older browsers have diculty processing that sequence of characters. Although user agents are supposed to ignore comments, and most do, there are instances where comments do matter. For example, Microso’s Internet Explorer browser pays attention to comments containing conditional tests for certain browser features. In the following code, placed in the head section of the document, the link element inside the comment loads in the special CSS style sheet le ie6.css only when read by version 6 of Internet Explorer or earlier releases: <link rel="stylesheet" type="text/css" href="/css/style.css"/> <! [if lte ie 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css"/> <![endif] > From the Library of Wow! eBook ptg 36 Chapter 2: The HTML Language All other browsers will ignore everything between the double dashes. Due to the cascading nature of CSS, element styles in the ie6.css style sheet over- write previous styles for the same elements set in the style.css style sheet. is is a common way to deal with the CSS problems Internet Explorer 6 causes due to its incomplete and buggy implementation of CSS. HTML comments are not eective inside a script or style element. JavaScript and CSS have their own syntax for comments. Both use a slash- asterisk, asterisk-slash sequence to denote comments in the code: /* this is a CSS or JavaScript comment */ However, when both scripting and CSS were new, page authors enclosed everything inside a script or style element in HTML comment tags. ey did this so that older browsers would not stumble over the JavaScript statements or CSS rules and include them as page content. When you look at the HTML source of some of these older pages, you might see something like this: 1 <STYLE TYPE="text/css"> < /* a bunch of CSS statements in between HTML comment tags */ > </STYLE> CHAr ACTEr EnTiTiES A character entity is an escape sequence that denes a single letter or symbol that normally cannot be entered in the text content. A character entity begins with an ampersand (&) and is followed by either the name of a predened entity or a pound sign (#) and by the character’s decimal number. A semicolon is used to terminate the character entity. e tilde (~), for example, can be gen- erated by either &tilde; or &#126;. Using the named entity is preferable because dierent language encodings have dierent numberings. Character entities are predened for the symbols that are needed to mark the beginnings and ends of HTML elements. A complete list of predened character entities can be found in the HTML5 specication. Most good HTML editors provide a table to assist in editing documents. ree character entities 1. Before the HTML4 specication, many Web authors used uppercase type for HTML element and attribute names to visually distinguish them from mixed-case content. Beginning with HTML4, authors were encouraged to use lowercase names for compatibility with XML syntax rules. In strict XHTML and HTML5, lowercase names are required. From the Library of Wow! eBook ptg HTML5 Syntax 37 are particularly important. ey must be used to show the symbols that would ordinarily be taken as the beginning (or end) of an HTML markup tag or character entity: &lt; < Le-angle bracket or less-than sign &gt; > Right-angle bracket or greater-than sign &amp; & Ampersand e following are also useful: &quot; " Double quote mark &ldquo; " Le smart (curly) double quote &rdquo; " Right smart (curly) double quote &ndash; – Medium-length dash (en dash) &mdash; — Long dash (em dash) &nbsp; Nonbreaking space &copy; © Copyright symbol MArkup ELEMEnTS Every HTML markup element begins with a start tag consisting of an open- ing angle bracket (<) followed by the element name, followed by zero or more attributes separated by spaces, followed by the closing angle bracket (>). Markup tags are either self-closing or paired with a closing tag to create a container. Inside the container is content with possibly its own markup code. Containers can be nested as deeply as needed. Self-closing tags have a slash (/) immediately before the closing angle bracket. Ending tags have a slash imme- diately aer the opening angle bracket, followed by the element name, fol- lowed by the closing angle bracket. Ending tags do not contain attributes, nor should they contain any blanks or other white space. A markup container can also be empty, as is common in the HTML ele- ments for creating tables or just for creating an entry in the DOM that will be lled later by a script function, triggered by a mouse action. In general, containers segregate and modify content, and self-closing tags, which are sometimes called empty tags, insert objects into the content. Here are a couple examples of self-closing tags: From the Library of Wow! eBook ptg 38 Chapter 2: The HTML Language <br/> <! Line break. Following text begins at the left margin. > <hr/> <! Horizontal rule. Draws a line across the page. > Attributes are written in name and value pairs with an equals sign (=) between and with the value enclosed in double quote marks. ere should not be any spaces around the equals sign, because spaces are used to separate attribute-value pairs from each other. e ordering of attributes in a list does not matter. Although it is usually clear whether a number or a character string is needed, the value of an attribute should always be appropriate to the domain of that attribute. Unexpected values can have unexpected results. HTML char- acter entities are recognized inside attribute values, but other HTML markup is not. Single quote marks and apostrophes are allowed inside attribute values, but double quotes are unwelcome troublemakers. e double-quote character entity, &quot;, should be used instead. Note: The HTML5 specification does not require quotation marks around attribute values if the meaning is unambiguous, however other versions of HTML do require them. I think it is a good practice to always enclose attri- bute values in quotes. e following tag species that an inline image should be inserted into the page. It has two attributes: src, whose value is the name (source) of the le containing the image data, and alt, which provides alternative information for user agents that do not know how to present an image (or do not have anyone to present it to): <img src="corplogo.gif" alt="Logocorp Inc."/> Here are a few more examples of container elements: <title>Don Quixote's Home Page</title> <strong>Strong emphasis, usually bold</strong> <a href="catalog.html">Our New Catalog</a> e title element provides the title that appears in the top of the window. It is valid only inside the head element. Like most head elements, it cannot contain any nested elements. e other two markup examples can appear only in the document body. e strong element tells a user agent that the contained content should be given strong emphasis. Visually, this defaults to boldface From the Library of Wow! eBook ptg HTML5 Syntax 39 type. e strong element and the anchor (a) element on the last line are both inline elements. ey only change the appearance of the type; they do not change the ow of the content. Anchor elements dene the nodes of hypertext links. In the preceding HTML, the browser highlights the phrase Our New Catalog to indicate that clicking this text will take the reader somewhere else on the Web. e href attribute provides the link’s destination. In this case, the le catalog.html, which is assumed to be in the same directory as the current page, becomes the new page—if it exists. Otherwise, the server returns an error code, and the browser displays a File Not Found error message. Example 2.4 illustrates the use of comments, character entities, and markup elements. Example 2.4: A web page with a heading and two paragraphs <!DOCTYPE html> <html> <head> <title>Example 2.4</title> </head> <body> <h1>The Title Of A Page</h1> <! Show the page title > <p><strong>Window Titles</strong> should have some relation to the outside world, Level 1 Headings should introduce the major sections of a work.</p> <p>This is a second paragraph of text that exists only to show how <em>paragraph elements</em> are used to separate text. It also points out the use of the &lt;strong&gt;&lt;/strong&gt; tags in the first paragraph.</p> </body> </html> Figure 2.4 shows what this example looks like in a browser. e body of this page consists of a level 1 heading ( <h1> </h1>) and two paragraphs of text enclosed by paragraph tags (<p> </p>). To get the string <strong></strong> to From the Library of Wow! eBook ptg 40 Chapter 2: The HTML Language appear in the second paragraph without being interpreted as a tag, character entities are used for the angle brackets. Figure 2.4: An example of the use of a level-one heading Although the HTML source code in Example 2.4 is neatly formatted, it does not matter where the tags are placed with respect to the content. Browsers are supposed to ignore any leading, trailing, or redundant white space. e follow- ing HTML segments all produce the exact same heading as the one shown in Figure 2.4: <h1> The Title Of A Page</h1> <h1> The Title Of A Page </h1> <h1> <! show the page title > The Title Of A Page </h1> HTML S HTML elements are divided into two classes: block elements, which change the content ow, and inline elements, which do not change the content ow. Content ow describes how the document’s elements appear as a page dis- played in the browser’s window. Block elements are normally separated from each other by line breaks and an amount of vertical white space that varies by the type of element. By default, most block elements occupy the full width available and just enough height to accommodate the content. Within that area, text and other inline elements are normally wrapped into lines that t nicely inside the block element. From the Library of Wow! eBook ptg HTML5 Semantics 41 Block elements have box properties that include margins, height and width, padding, and borders. Inline elements do not have box properties and are not separated from each other. ey ow together into lines of word-wrapped text with other inline elements. e HTML elements that are only allowed inside the head element are neither block nor inline elements, because these elements are not involved in content ow. Collectively, these elements provide metadata about the page and its relation to other web resources. Some HTML elements can be nested inside other block elements. Inline elements are always found inside block elements, but a block element should not be, in most circumstances, inside an inline element. For example, para- graphs and lists can be inside sections and divisions, but a heading cannot be nested in another heading. e distinction between block and inline elements is “loose” because it is subject to the CSS display property. Example 2.5 illus- trates how this works and introduces an important new HTML block element, the division. Example 2.5: using a division element with margins <!DOCTYPE html> <html> <head> <title>Example 2.5</title> <style type="text/css"> #preamble { margin: 36px; } /* set margins */ </style> </head> <body> <! No Page Title > <div id="preamble"> Whereas recognition of the inherent dignity and of the equal and inalienable rights of <em>all members</em> of the human family is the foundation of freedom, justice and peace in the world, &hellip; </div> <p style="font-style: italic;">Emphasis, mine.</p> </body> </html> From the Library of Wow! eBook ptg 42 Chapter 2: The HTML Language ere are two block elements inside the body element in Example 2.5: a division element, div, with an id attribute, and a paragraph element, p, with a style attribute. e id attribute provides a unique identier for the division for use in the style element in the document head. e style attribute provides a means of specifying CSS rules directly within the HTML element. Inside the division element, an inline emphasis element, em, emphasizes the phrase “all members.” Figure 2.5 shows how this appears in a browser. Note that the division has a margin of 36 pixels separating it from the rest of the content on all four sides. e paragraph following the division has default margins. Also, even though the phrase “all members” in the division and the words “Emphasis, mine.” in the paragraph both appear in italics, a search engine robot reading this page will regard the former as having some importance, but not the latter. is is because the italic styling of the paragraph is done with CSS, which robots gen- erally ignore, whereas the styling of the words “all members” comes as a result of the semantic markup applied to the phrase. Figure 2.5: A web page with a division element to control margins e emphasis element in the preamble division can be changed from an inline element to a block element by adding the CSS rule display: block;. We can do this by adding a style attribute to the starting em tag, as was done with the paragraph: <em style="display: block;"> From the Library of Wow! eBook ptg HTML5 Semantics 43 or by adding a selector followed by the rule to the style element in the docu- ment’s head element: #preamble em { display: block; } is applies only to the emphasis element inside the preamble division. When opened in a browser, the emphasized words will appear on a line by them- selves, breaking the ow of the division’s content. e HTML5 elements for marking up sections, divisions, headings, para- graphs, lists, tables, block quotes, address blocks, and code examples—to name a few—are all block elements. All block elements have box properties: margins, borders, padding, height, and width (and depth, too!). Box properties can be visualized as a set of nested boxes, as shown in Figure 2.5a. Margin Border Padding Content Width H e i g h t Figure 2.5a: Box properties of block elements Imagine a cardboard shipping box. e cardboard shell is the “border” of the box, and it has a certain margin of space between it and the other boxes on the shelf. e inside of the box will accommodate an object of a certain height and width, plus whatever padding is desired to protect the object. Normally, block elements appear on a web page in the same order as they are dened in the HTML source code: from top to bottom. Unless otherwise changed by an attribute or CSS rule, a block element is as wide as it needs to be to accommodate its contents and padding. If there is sucient content, the From the Library of Wow! eBook . (or end) of an HTML markup tag or character entity: &lt; < Le-angle bracket or less-than sign &gt; > Right-angle bracket or greater-than sign &amp; & Ampersand e following. — Long dash (em dash) &nbsp; Nonbreaking space &copy; © Copyright symbol MArkup ELEMEnTS Every HTML markup element begins with a start tag consisting of an open- ing angle bracket (<). type="text/javascript"> jQuery(document).ready( function () { jQuery('body').click( function () { jQuery('body').css('color', 'red'); }); }); </script>