HTML cơ bản - p 8 doc

Figure 2.8: HTML page with a floating table element E v E nT H An dLE r S Another class of HTML global attributes is used to specify what actions browsers should take when the user inter

Trang 1

54 Chapter 2: The HTML Language

or height that is a percentage of what is available to the element Example 2.8

shows a floated table with a width attribute The tr element defines a table row,

and the th and td elements define table cells Tables are discussed in more

detail later in this chapter

Example 2.8: An HTML table with width and float attributes

<!DOCTYPE html>

<html>

<head>

<title>Example 2.8</title>

<style type="text/css">

body { padding: 30px; line-height: 1.5em; }

td { text-align: right; padding: 5px; }

th { text-align: left; padding: 5px; }

</style>

</head>

<body>

<h2 align="center">Final Exam Results</h2>

<table width="33%" align="right" hspace="12" border="1">

<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>

</table>

<p>The final exam required students to create an HTML page

containing a floating table Larry lost a number of points

because he used <em>align</em> and <em>hspace</em> attributes in

the table statement instead of using the CSS <em>float</em> and

<em>padding</em> properties in his entry entitled, <cite>Example

2.8</cite>.</p>

</body>

</html>

Note the use of the cite element to mark up a title Figure 2.8 shows how this HTML appears in a browser

Trang 2

Figure 2.8: HTML page with a floating table element

E v E nT H An dLE r S

Another class of HTML global attributes is used to specify what actions

browsers should take when the user interacts with an element These event

handlers take as their values one or more JavaScript statements Typically, the

value consists of a call to a JavaScript function defined in the document’s head

or in an external file, and this function does all the work For example, if you

had an input form on a web page that requested the user’s email address, you

might add the onchange attribute to call a function that checks that the input

represents a valid email address The HTML element would look like this:

<input type="text" onchange="check_email_address(this.value);"/>

In the late twentieth century, web developers built dynamic web pages

using these event handlers and a lot of JavaScript code These techniques were

referred to as dynamic HTML or dhtml, although that term had no official

standing Modern web development practice discourages the addition of event

handler attributes to HTML elements and encourages the practice of writing

functions to handle events on DOM objects separately from the HTML source

Because the use of these attributes is discouraged, they are listed without any

description, but the explanation of each is generally obvious from the attribute

name Although these attributes can be used in any HTML element, they do not

make sense with every element Here are the more commonly used attributes:

Trang 3

In HTML5, a web developer can create his own attributes to add to any HTML element as long as the attribute name begins with the characters

"data-" and has at least one more letter or number following the dash As

many data attributes as needed can be added to an HTML element, provided

that there are no duplicate attribute names in any single element The value

of a data attribute follows the same restrictions as other attributes:

Charac-ter entities are needed for special symbols, but other markup is not parsed as

HTML For example, the following HTML element (a list item) has extra data

attributes that can be used by a client-side script to sort a listing or highlight

specific items in response to a user action

<li class="book-title"

data-borrower="Vonnegut, K."

Trang 4

The purpose of data attributes is to provide extra information about the

contents of an element that can be accessed by client-side scripts When

the HTML source code is itself generated by scripts running on a server, it

becomes a powerful tool, because it allows information in database records to

be directly incorporated into HTML elements 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 However, in HTML5,

this technique is formalized so that pages can have HTML elements

contain-ing data attributes and still pass syntax checkers and validation services

Block Elements

A web page is given structure by the block elements that comprise it Headings

and paragraphs in a document are block elements, as is the document body

itself 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 Except in very special cases, a block element

should never be inside an inline element

Every block element occupies a rectangular area on the web page,

sepa-rated from the content before and after by some amount of white space The

default behavior for browsers is to give each block element as much width as

is available 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 HTML3 introduced the division element,

<div></div>, as an all-purpose container for organizing and referencing

col-lections of other document elements The HTML5 specification has new block

elements for specific types of divisions, such as the section, header, and footer

elements These are discussed later

H E A di ng S

Major segments of a document are introduced and separated by headings

HTML supports six levels of headings, h1 through h6 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 Additional structure can be generated

by using list and table elements All heading tags are containers and require a

corresponding end tag

Trang 5

The level-one heading h1 is the highest or most significant level heading, and h6 is the least significant 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

Headings should be used in their natural hierarchical order, as in an outline

However, it is perfectly all right to skip heading levels, following an h1 element

with an h3, for example

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 Try not

to break this rule 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:

<h1 style="display: none;"> </h1>

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

<!DOCTYPE html>

<html>

<head>

body { text-align: center; }

</style>

</head>

<body>

<h1>Level 1 Heading</h1>

</body>

<html>

Trang 6

Figure 2.9: HTML heading elements

Figure 2.9 is essentially what a search robot sees when it looks at a page

Speaking of robots, there is an HTML element that groups headings for their

benefit The heading group element, <hgroup></hgroup>, can contain only

headings and other heading groups It implies that those contained

head-ings are related to each other A browser may or may not visually indicate the

group However, using CSS, you can make the headings and heading groups

look how you want them to look 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

Trang 7

Example 2.10: CSS statements for heading styles

<!DOCTYPE html>

<html>

<head>

body { text-align: center; }

h1 { font-family: sans-serif; }

h2 { border: 2px solid black; padding: 10px; }

h3 { font: bold italic 18pt Comic Sans MS; }

h4 { color: white; background-color: darkgrey }

h5 { visibility: hidden; }

h6 { letter-spacing: 1.5em; }

</style>

</head>

<body>

</body>

<html>

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 differpres-ent 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 Every level-two heading on the page, for example, would have a black

border 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 For example,

this code:

<h1 style="font-family: sans-serif;">Level 1 Heading</h1>

Trang 8

sets that level-one heading’s font the same way as putting the rule in the style

element in the document’s head However, CSS style information in an

ele-ment’s start tag overrides previously set rules for the same properties This is

useful if you do not have access to the document’s head in your editor, such as

when editing a blog post Chapter 3, “Elements of Style,” goes into more detail

on the syntax and use of CSS

pA r Ag r A pH S , B LoCk QuoTE S , An d A ddr E S S B LoCkS

The paragraph is the most commonly used HTML element for representing

content The block quote and address block are similar The blockquote

ele-ment is used to mark up a quotation taken from another source Block quotes

are usually displayed by the browser with wider left and right margins The

address element is intended for designating the contact information associated

with a document and is often rendered in an italic font by browsers Address

and paragraph elements are not allowed to contain other block elements

In HTML2, the paragraph element could be used with or without an end

tag In HTML3 and later versions, the paragraph element is a container, and

it is an error to omit the end tag Web authors should avoid inserting empty

paragraph elements or break tags into a page just to achieve vertical spacing

of the content elements If the page design requires more or less space before a

paragraph, the top margin of that paragraph should be increased or decreased

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

A search engine robot finding a blockquote element can reasonably conclude

that the surrounding content might be related to the quotation and contain

links to sources It is improper to use a block quote as an alternative paragraph

style, such as in a list of questions and answers 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 Although it is a

common practice, the address element should not be used to mark up postal

addresses in a business directory 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

<!DOCTYPE html>

<html>

<head>

continues

Trang 9

</head>

<body>

<p>I was recently reminded of one my favorite quotes when it appeared

on the back of a business card given to me at a meeting:</p>

<blockquote>The bitterness of poor quality remains long after the

sweetness of a low price is forgotten.</blockquote>

<p>My associate thought that the quote originated with the

designer, Aldo Gucci I thought it came from Benjamin Franklin

If you have a direct reference source, please contact me at:</p>

<address>

Author Dent<br/>

hitchhiker@gmail.com

</address>

</body>

</html>

Figure 2.11: paragraphs, block quotes, and address blocks

Web designers who design page templates for blogs and instant-website gen-erators often style block quotes distinctively by changing the typography and

adding backgrounds and borders Example 2.12 adds a few CSS statements in a

Example 2.11: paragraphs, block quotes, and address blocks in

HTML (continued)

Trang 10

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

<!DOCTYPE html>

<html>

<head>

body {

font-family: sans-serif;

padding: 24px;

}

p {

text-align: justify;

line-height: 1.5em;

}

blockquote {

font: 15pt cursive;

background-color: #cccccc;

padding: 5em;

border: 2px dotted;

}

address {

margin-left: 50%;

font-family: courier,monospace;

}

</style>

</head>

<body>

<p>I was recently reminded of one my favorite quotes when it appeared

on the back of a business card given to me at a meeting:</p>

<blockquote>The bitterness of poor quality remains long after the

sweetness of a low price is forgotten.</blockquote>

continues

Định dạng
Số trang	10
Dung lượng	819,1 KB