- ptg 54 Chapter 2: The HTML Language.
- Example 2.8 shows a floated table with a width attribute.
- Example 2.8: An HTML table with width and float attributes.
- <title>Example 2.8</title>.
- <tr><th></th><th>Points</th><th>Grade</th></tr>.
- <tr><th>Larry</th><td>86</td><td>B+</td></tr>.
- <tr><th>Heidi</th><td>91 </td><td>A</td></tr>.
- properties in his entry entitled, <cite>Example 2.8</cite>.
- </p>.
- Note the use of the cite element to mark up a title.
- Figure 2.8 shows how this HTML appears in a browser..
- ptg Figure 2.8: HTML page with a floating table element.
- ptg 56 Chapter 2: The HTML Language.
- This was possible in earlier ver- sions of HTML because any attribute attached to an HTML element became a property of the DOM object representing that element.
- Block Elements.
- A web page is given structure by the block elements that comprise it.
- There are many different kinds of block elements: block quotes, lists, and tables, to name a few.
- Some block elements can be nested inside other block elements, and some cannot be.
- Block elements that are first-level children of the document’s body element take up the full width of the browser’s window minus any padding assigned to the body element.
- Block elements that are children of other block elements are as wide as allowed by the width of their parent element..
- A big change in HTML5 is the addition of several block elements for mark- ing up new types of content.
- <div></div>.
- The HTML5 specification has new block elements for specific types of divisions, such as the section , header , and footer elements.
- This is sufficient for most web pages, because most of the structure of a hypertext work is in the links that bind the pages into a website.
- ptg 58 Chapter 2: The HTML Language.
- It is customary to put a level 1 heading as the first element in the body of the home page to serve as the page’s internal title..
- There another good reason why every web page should have one and only one level-one heading somewhere near the top of the page: It is the most important element that search robots look for after the window title.
- Even though it might seem that having a level-one heading would hurt your page design, you can still have one at the top of the page by making it invisible to humans with the CSS display property:.
- Example 2.9 is an HTML page illustrating the six different heading levels..
- Figure 2.9 shows how this looks in a browser..
- Example 2.9: HTML heading elements.
- <title>Example 2.9</title>.
- <h1>Level 1 Heading</h1>.
- <h2>Level 2 Heading</h2>.
- <h3>Level 3 Heading</h3>.
- <h4>Level 4 Heading</h4>.
- <h5>Level 5 Heading</h5>.
- <h6>Level 6 Heading</h6>.
- ptg Figure 2.9: HTML heading elements.
- Figure 2.9 is essentially what a search robot sees when it looks at a page..
- The heading group element, <hgroup></hgroup>.
- This is illustrated in Figure 2.10.
- It uses the same body content as Example 2.9 but adds the selectors and rules to the style element in the document’s head that are shown in Example 2.10..
- Figure 2.10: HTML headings with CSS styles.
- ptg 60 Chapter 2: The HTML Language.
- Example 2.10: CSS statements for heading styles.
- <title>Example 2.10</title>.
- Notice that the space formerly occupied by the level-five heading is pres- ent in Figure 2.10, but the text is invisible.
- This is different from giving the element’s display property the value none, which effectively sets the height, width, and element margins to 0.
- Although Example 2.10 has only one heading of each level, the styles used would apply to all headings if there were more on the page.
- If a unique style is needed for one and only one heading, either an id attribute should be added to that heading, or a style attribute should be used to set the element’s CSS properties directly within the start tag.
- <h1 style="font-family: sans-serif;">Level 1 Heading</h1>.
- Address and paragraph elements are not allowed to contain other block elements..
- Web authors should avoid inserting empty paragraph elements or break tags into a page just to achieve vertical spacing of the content elements.
- A blockquote element can contain any other block and inline elements, but these elements should be related if they are part of the same block quote..
- Likewise, an address element on any web page should be used only for the contact information of the page’s author or the organization responsible for the page’s content.
- Example 2.11 demonstrates the correct use of these three block elements.
- Figure 2.11 shows how this HTML appears in most browsers..
- Example 2.11: paragraphs, block quotes, and address blocks in HTML.
- ptg 62 Chapter 2: The HTML Language.
- <title>Example 2.11</title>.
- <p>.
- Figure 2.11: paragraphs, block quotes, and address blocks.
- Example 2.12 adds a few CSS statements in a.
- Example 2.11: paragraphs, block quotes, and address blocks in HTML (continued).
- ptg style element to the code of Example 2.11, giving the page an entirely different.
- feel, as shown in Figure 2.12..
- Example 2.12: CSS styles for paragraphs, block quotes, and address blocks.
- <title>Example 2.12</title>