Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

HTML 4_01 Weekend Crash Course - G. Perry

.pdf
Скачиваний:
34
Добавлен:
24.05.2014
Размер:
6.32 Mб
Скачать

Session 11—E-mail Links, Comments, and Special Characters

145

through the characters so you know what is available for you to use. To produce the line that included the paragraph tag in the previous example, you could use the greater-than and less-than character codes on the screen like this:

Use the paragraph tag, <p>, to add a blank line between paragraphs.

Many of the character codes have an equivalent character entity (also shown in Table 11-1) that enables you to use a more memorable mnemonic for some of the codes. For example, you can specify è or è when you want to display the small e with a grave accent, è.

Table 11-1

Special Character Codes

Character

Code

Character Entity

"

"

##

$$

%%

&&

'

 

 

 

 

&

&

&

 

 

 

<

<

<

 

 

 

>

>

>

 

 

 

í

¡

¡

 

 

 

¢

¢

¢

££ £

 

¤

¤

¥

¥

¥

 

¦

&brkbar;

Afternoon Saturday—III Part

11 Session

Continued

146

Saturday Afternoon

Table 11-1

 

Continued

Character

Code

Character Entity

§

§

§

 

 

 

¨

¨

¨

 

 

 

©

©

©

 

 

 

ª

ª

ª

 

 

 

«

«

«

 

 

 

¬

¬

¬

 

 

 

®

®

&reg

 

 

 

¯

¯

&hibar;

 

 

 

°

°

°

 

 

 

±

±

±

 

 

 

2

²

²

 

 

 

 

3

&$179;

³

 

 

 

 

´

´

´

 

 

 

>

µ

µ

 

 

 

 

 

 

·

·

&midot;

 

 

 

¸

¸

¸

 

 

 

1

¹

¹

 

 

 

 

º

º

º

 

 

 

»

»

»

 

 

 

14

¼

¼

 

 

 

12

½

½

 

 

 

34

¾

¾

 

 

 

¿

¿

¿

 

 

 

Session 11—E-mail Links, Comments, and Special Characters

147

Character

Code

Character Entity

 

À

À

À

 

 

 

 

 

Á

Á

Á

 

 

 

 

 

Â

Â

Â

 

 

 

 

 

Ã

Ã

Ã

 

 

 

 

 

Ä

Ä

Ä

 

 

 

 

 

Å

Å

Å

 

 

 

 

 

Æ

Æ

Æ

 

 

 

 

 

Ç

Ç

Ç

 

 

 

 

 

È

È

È

 

 

 

 

 

É

É

É

 

 

 

 

 

Ê

Ê

Ê

 

 

 

 

 

Ë

Ë

Ë

 

 

 

 

 

Ì

Ì

Ì

 

 

 

 

 

Í

Í

Í

 

 

 

 

 

Î

Î

Î

 

 

 

 

 

Ï

Ï

Ï

 

 

 

 

 

F

Ð

Ð

 

 

 

 

 

Ñ

Ñ

Ñ

 

 

 

 

 

Ò

Ò

Ò

 

 

 

 

 

Ó

Ó

Ó

 

 

 

 

 

Ô

Ô

Ô

 

 

 

 

 

Õ

Õ

Õ

 

 

 

 

 

Ö

Ö

Ö

 

 

 

 

 

×

×

 

 

 

 

 

 

Ø

Ø

Ø

 

 

 

 

 

Afternoon Saturday—III Part

11 Session

Continued

148

Saturday Afternoon

Table 11-1

 

Continued

Character

Code

Character Entity

Ù

Ù

Ù

 

 

 

Ú

Ú

Ú

 

 

 

Û

Û

Û

 

 

 

Ü

Ü

Ü

 

 

 

´

Ý

Ý

Y

T

Þ

Þ

 

 

 

ß

ß

ß

 

 

 

à

à

à

 

 

 

á

á

á

 

 

 

â

â

â

 

 

 

ã

ã

ã

 

 

 

ä

ä

&aauml;

 

 

 

å

å

å

 

 

 

æ

æ

æ

 

 

 

ç

ç

ç

 

 

 

è

è

è

 

 

 

é

é

í

 

 

 

ê

ê

î

 

 

 

ë

ë

&emul;

 

 

 

ì

ì

ì

 

 

 

í

í

í

 

 

 

î

î

î

 

 

 

ï

ï

ï

 

 

 

D

ð

ð

 

 

 

Session 11—E-mail Links, Comments, and Special Characters

149

Character

Code

Character Entity

 

ñ

ñ

ñ

 

 

 

 

 

ò

ò

ò

 

 

 

 

 

ó

ó

ó

 

 

 

 

 

ô

ô

ô

 

 

 

 

 

õ

õ

õ

 

 

 

 

 

ö

ö

ö

 

÷÷

ø

ø

ø

 

 

 

ù

ù

ù

 

 

 

ú

ú

ú

 

 

 

û

û

û

 

 

 

ü

ü

ü

 

 

 

ý

ý

 

 

 

p

þ

þ

 

 

 

ÿ

ÿ

ÿ

 

 

 

One code not included in the table is   that creates a nonbreaking space. If you embed &nbsp; between two words, for example, the browser will not break a line between them but will keep the two words together.

Most browsers provide support for most of the characters in Table 11-1. If you use the special characters, test your page in several of the more popular browsers to make sure that the codes work as you expect. (Such advice is true of all pages; always view your Web pages in as many browsers and in as many different resolution levels as possible to ensure that your Web page retains the look you prefer.)

 

When you use one of the special characters, a comment is neces-

 

sary to inform other HTML coders, as well as yourself, exactly

Tip

what the character code represents. Also, some, but not all, of

the special characters follow the same character-code pattern

 

as the ASCII table.

Afternoon Saturday—III Part

11 Session

150

Saturday Afternoon

REVIEW

When clicked, e-mail links open up a mail window in your Web site that enables users to write to you easily.

An e-mail hyperlink includes the standard underlining and hyperlink colors.

Comments in your HTML code, such as a note to remind yourself to add a feature later on, make Web site maintenance much simpler.

Use character codes when you cannot produce special characters from your keyboard or when a special character, such as the less-than sign, might be interpreted as a command tag.

QUIZ YOURSELF

1.Name three reasons to provide an e-mail hyperlink on your site. (See “Uses for E-mail Links.”)

2.What is the protocol value that opens the user’s default e-mail’s new message window? (See “Creating E-mail Links.”)

3.Why does the browser ignore comments? (See “Adding Comments to HTML Code.”)

4.Why should you put contact information in your HTML code comments? (See “Adding Comments to HTML Code.”)

5.Why must you use special character codes to display special characters on your Web page? (See “Inserting Special Characters on Web Pages.”)

S E S S I O N

12

Tables Organize Data

Session Checklist

Learn the ways that tables can help you organize data on your Web site

Learn how to prepare a spreadsheet-like table that you can use as a basis for complex tables

Improve the look of your tables by adding borders, aligning data, and spanning cells across columns and rows

Use some advanced page layout tricks to make more powerful tables

Some of the most interesting Web sites work well because they are built on tables. Most HTML tutorials begin teaching HTML tables by making spreadsheet analogies. The spreadsheet makeup of cells and rows is so familiar

that such an analogy makes a good place to start. Nevertheless, tables don’t stop with tabular data. Tables can hold any kind of data, not just text. Unfortunately, a weekend crash course does not provide enough time to make you an official Table Guru, but you will, before this session ends, hold many table tips in your bag of tricks that you will hone as your use of tables grows.

152

Saturday Afternoon

How Tables Help You Organize Data

Tables help you organize data on your Web site. Some of the ways you can use tables are to:

Present newsletter information in columns, as shown in Figure 12-1.

Display tabular information, in a spreadsheet-like manner, such as price lists and inventories.

Add borders around text and graphic images in a uniform manner.

Format your entire Web page layout, including the placement of graphics, text, banners, sidebars, headers, and footers.

Figure 12-1

Tables help organize the data in newsletter Web sites.

As you can see, tables are not limited to simple spreadsheet-like formatting, even though the best place to begin learning about tables is to see them in use with such data. The rest of this session develops such a spreadsheet-like table so you can learn the fundamentals. You then can apply those fundamentals to other kinds of tables.

Session 12—Tables Organize Data

153

Preparing Columnar Data Tables

Tables consist of rows and columns. A useful table might contain only one row and three columns. The purpose of the table determines how elaborate the table must become. Tables can be nested, which means that they can reside inside other tables. Therefore, a single cell might contain an entire table, and one of the inside table cells might hold yet another table.

Never embed more than two levels of tables if your Web page loads slowly. A single table, even one with many rows and columns, loads much faster than a table that contains other

Never tables. The power of these nested tables, however, makes them so useful that your application should determine whether or not you nest tables instead of simply considering load time. In addition, some browsers, most notably Netscape 4, do not display nested tables properly unless the user has upgraded to a more recent version.

Tables require several different kinds of table-related command tags. You cannot type table text directly into HTML as rows and columns of information because browsers ignore all extra spaces and tabs in your HTML source.

Creating tables

All tables begin with the <table> command tag and terminate with a subsequent </table> command tag. Within the table, you’ll specify rows with the <tr> (for table row) tag and columns with the <td> (for table detail) tag. In addition to cells that hold data, you may also create header cells that hold titles for the

data in the columns.

 

When you design and create tables, keep the following order in

 

mind at all times: top-to-bottom and left-to-right. You’ll create

Tip

all tables one row at a time from the top to the bottom of the

table, and you’ll add individual cells, or columns, one at a time

 

in those rows from the left to the right.

One of the best ways to begin a table that contains simple columnar data is to type the data directly into your HTML code. Remembering that HTML completely ignores extra spaces and tabs that you use, you can more easily plan your table by using your text editor to create the initial layout.

Afternoon Saturday—III Part

12 Session

154

Saturday Afternoon

Don’t just type the data in rows and columns, however, because you must remember the top-to-bottom, left-to-right nature of HTML tables. For example, type data in each row (top to bottom), beginning with the first row. Before you type data in the next row, enter the columnar data (left to right) for each row, one cell at a time. Consider the following code that presents a bookseller’s inventory:

<table> Title Quantity Price

Laughing Kids 24 $19.95

I Stood Still 13 $7.95

Make Money Now 52 $22.95 </table>

The first three items (Title, Quantity, and Price) are the table’s column titles, called header cells in HTML terminology. (How to set up the column heads is covered in the section that immediately follows this one.) The remaining rows fall below the header cells.

The code, as it now stands, does not make much of a table. The <table> tag does no formatting but serves only to tell the browser where the table might begin and end. Therefore, all the text in this code will appear in one line across the browser screen. The text does comprise a table given the <table> tag, however. You must divide the text into rows and columns to make the table look like a table.

Specifying the header cells

The <th> tags specify which cells are header cells. Once you’ve typed the data, put <th> tags before each header cell value. At the end of each header cell, include a </th> end tag. The code from the previous section now looks like this:

<table>

<th>Title</th>