- The HTML Language.
- Page Structure and the DOM HTML5 Syntax.
- T his chapter presents the various elements of the HTML language.
- In general, the term “HTML” is used to describe elements of the language in general use that are currently supported by modern browsers.
- The term “HTML5” is used to describe elements that are new in the HTML5 draft specification and that may or may not be supported by a specific browser..
- A web page has content consisting of text, inline images, and embedded media objects.
- The page’s marked-up text is in one file, and the individual images and media objects are in separate files.
- Images and media objects are also referenced by their URLs, so the same objects can be used more than once on a page or on many different pages..
- Other multimedia is accessed through plug-ins or external helper applications that the browser associates with the content type of the media object.
- ptg 26 Chapter 2: The HTML Language.
- A web page has no fixed size.
- It can be as long as it needs to be without page breaks.
- The default browser behavior is to word-wrap text to fit the available width of a containing element or, in the trivial case, to fit within the margins of the display window.
- If there is more content than fits in the window, the browser enables scrolling to accommodate the length.
- Further- more, the properties of pages elements can change in response to user actions, and a web author’s preferences can be overridden by the reader..
- Web authors and developers, on the other hand, relinquish some measure of this control so that their content can be consumed on a wide variety of devices.
- For example, an author might design a web page so that it is pleasing when viewed in a modern browser such as Safari, Firefox, Internet Explorer, or Google Chrome, running on a typical desktop computer with a standard color monitor.
- Today, it is critical that a web page makes good reading for search robots.
- Creating a web page is the process of inserting HTML markup tags into the content that describe the elements of the page semantically.
- Web pages displayed in HTML5 browsers can be editable and even self-modifying..
- Let’s begin by looking again at the simple “Hello World” page from Chapter 1, “HTML and the Web.” It is reproduced as Example 2.1..
- Example 2.1: HTML for a simple “Hello World” web page.
- <title>Example 2.1</title>.
- <h1>Hello World Wide Web</h1>.
- <p>.
- Welcome to the first of many webpages..
- </p>.
- The HTML markup is shown in bold.
- This code can be saved in a text file and opened in a browser.
- Figure 2.1: The “Hello World” page as displayed by a browser.
- ptg 28 Chapter 2: The HTML Language.
- These characters, especially the left angle bracket, are reserved for HTML use and must not appear in the content.
- If a left angle bracket appears in the content somewhere (for example, as a less-than sign), the browser parsing your code assumes that it marks the beginning of a new HTML element.
- Because browsers are free to ignore any markup they cannot understand, some of the content following the angle bracket may fail to appear on the displayed web page..
- As a result, HTML has syntax for defining single character entities in the content.
- You refer to the character’s codename, preceded by an ampersand (&) and ending with a semicolon.
- This scheme requires the congenial ampersand to be entered in the content using its character entity,.
- In reading the code in Example 2.1, note that the spacing and indentations exist only to make the code pretty to read and easier to explain.
- All of Example 2.1 could be written on a single line, and it would still look the same in a browser..
- In Example 2.1, notice how the HTML elements appear as paired sets of start and end tags.
- The start tag of each pair has a name identifying what kind of HTML element it is, and the end tag of each pair repeats the name preceded by a slash.
- The following HTML elements can be found in Example 2.1:.
- The HTML part of the document.
- Contains information about the document.
- <title></title>.
- The title that should be assigned to the window.
- The document content and HTML markup.
- <p></p>.
- The HTML elements of Example 2.1 are nested inside one another.
- Every web page must have exactly one head element and.
- The title and style elements are the children of the head element, and the heading and paragraph elements ( h1 and p ) are children of the body element..
- HTML has sensible rules for which elements can be nested inside other elements.
- For instance, if we had the fol- lowing two elements inside the body element in the preceding example.
- <p>Hello World Wide Web</p>.
- </h1>.
- the web page would be considered invalid.
- Example 2.2 adds a little more complexity to the Hello World code.
- It also introduces some additional HTML concepts before we get into the specifics of the language.
- Example 2.2: A slightly more complex “Hello World” page.
- <title>Example 2.2</title>.
- <h1>.
- Hello World Wide Web</h1>.
- ptg 30 Chapter 2: The HTML Language.
- Figure 2.2: A web page with a heading and paragraph.
- In this example, another CSS rule has been added to the style element in the head of the document, and some additional markup has been added to the elements in the document body.
- The class attribute added to the paragraph element (class="intro-text") is one of three attributes that can be used to associate an HTML element with a set of CSS rules.
- One of the places CSS rules can appear is in a style element in the document head.
- In Example 2.2, the second style rule says that any element having a class attribute with the value "intro-text".
- By default, this is usually the Arial or Helvetica typeface, but the readers of the page can set their browser’s preferences to other fonts..
- That’s exactly what it is.
- In the second line of the paragraph element, the words “I promise” are emphasized by being enclosed in the emphasis element, <em></em>.
- The HTML5 specification is structured so that the HTML elements of any web page can be described in a hierarchical tree diagram with the html ele- ment as the root, the head and body elements as the main trunks, and the rest.
- A browser—or for that matter, any software parsing a web page—builds this tree structure in its memory.
- Page Structure and the DOM.
- In HTML5, the DOM is central to the interpretation of an HTML document and its presentation as a web page.
- The DOM provides a map of the structure of an HTML document and describes how its various parts work together..
- The DOM also provides interfaces for assigning CSS styles to various page elements and methods that can be called to dynamically manipulate those ele- ments using JavaScript or some other scripting language..
- The language of the DOM is different from the language of HTML.
- In HTML, the web page is composed of elements, and elements can have attributes.
- In working with the DOM, each HTML element and attribute becomes a DOM object, and the HTML attribute values become properties of those objects..
- means something different in the United Kingdom than it does in the United States.
- On a web page, every HTML element corresponds to a DOM object, and the HTML attributes of the elements are properties of their DOM objects.
- If an HTML element is contained inside another HTML element, the nested, inner object is considered a property of the outer, containing object.
- It is referred to as a child of the containing object, and the containing object is referred to as the parent object.
- Each object has one and only one parent object, except for the window object corresponding to the outermost HTML element..
- The web page loaded into the window corresponds to a document.
- ptg 32 Chapter 2: The HTML Language.
- All the various elements of the web page defined by the HTML markup are objects and can be accessed by scripts and styled by CSS..
- Example 2.3 expands on the previous versions of the Hello World page by adding a script that adds a simple behavior to the page when the user clicks in the body of the page.
- Only the relevant parts of the coding are highlighted in boldface type.
- Example 2.3: An HTML page with CSS rules and HTML attributes.
- <title>Example 2.3</title>.
- ptg Figure 2.3: A web page that responds to a mouse click.
- First, note that another rule has been added to the CSS style container in the document head section for the h1 element:.
- This CSS rule renders any of the page’s level-one headings in a dark blue color.
- It is next to the comment.
- Comments are an important part of any web page and should be used frequently to help other people understand what the code is supposed to do.
- Browsers ignore comments, which do not affect the display of the page in any way.
- At the end of Example 2.3, a script container has been added after the clos- ing body tag, following a comment describing what the JavaScript is supposed to do:.
- The script consists of a single statement that adds a behavior to the docu- ment’s body element