Tự học HTML và CSS trong 1 giờ - part 29 pdf

In addition to images, you can add color to the background and the text of a page using CSS.You learned the CSS properties color,background-color, and background, which enable you to spe

the text surrounding it.

without a link) border=“0” hides the border altogether.

In addition to images, you can add color to the background and the text of a page using

CSS.You learned the CSS properties color,background-color, and background, which

enable you to specify colors for your page without using deprecated tags You also

learned about the HTML attributes that were once used to specify colors before CSS was

widely supported

Workshop

Now that you know how to add images and color to your pages, you can really get

cre-ative This workshop will help you remember some of the most important points about

using images and color on your pages

Q&A

Q What’s the difference between a GIF image and a JPEG image? Is there any

rule of thumb that defines when you should use one format rather than the

other?

A As a rule, you should use GIF files when images contain 256 colors or fewer.

Some good examples are cartoon art, clip art, black-and-white images, and images

with many solid color areas You’ll also need to use GIF files if you want your

images to contain transparent areas or if you want to create an animation that

does-n’t require a special plug-in or browser helper Remember to use your

image-editing software to reduce the number of colors in the image palettes whenever

possible, because this also reduces the size of the file

JPEG images are best for photographic-quality or high-resolution 3D rendered

graphics because they can display true-color images to great effect Most

image-editing programs enable you to specify how much to compress a JPEG image The

size of the file decreases the more an image is compressed; however, compression

can also deteriorate the quality and appearance of the image if you go overboard

256 LESSON 9: Adding Images, Color, and Backgrounds

Q My client-side imagemaps aren’t working What’s wrong?

A Make sure that the pathnames or URLs in your <area>tags point to real files

Also, make sure the map name in the <map>file matches the name of the map in

front of it

Q How can I create thumbnails of my images so that I can link them to larger

external images?

A You’ll have to do that with some type of image-editing program (such as Adobe

Photoshop); the Web won’t do it for you Just open up the image and scale it down

to the right size

Q What about images that are partially transparent so that they can display

the page background? They look like they sort of float on the page How do

I create those?

A This is another task you can accomplish with an image-editing program Both GIF

and PNG support transparency Most image-editing programs provide the

capabil-ity to create these types of images

Q Can I put HTML tags in the string for the altattribute?

A That would be nice, wouldn’t it? Unfortunately, you can’t All you can do is put an

ordinary string in there Keep it simple, and you should be fine

Quiz

1 What’s the most important attribute of the <img>tag? What does it do?

2 If you see a funny-looking icon rather than an image when you view your page, the

image isn’t loading What are some of the reasons this could happen?

3 Why is it important to use the altattribute to display a text alternative to an

image? When is it most important to do so?

4 What is an imagemap?

5 Why is it a good idea to also provide text versions of links that you create on an

imagemap?

6 True or false: When you use the backgroundshorthand property, the order of the

values is important

9

Quiz Answers

1 The most important attribute of the <img>tag is the srcattribute It indicates the

filename or URL of the image you want to include on your page

2 Several things might cause an image not to load: The URL may be incorrect; the

filename might not be correct (they’re case-sensitive); it might have the wrong file

extension; or it might be the wrong type of file

3 It’s a good idea to provide text alternatives with images because some people use

text-only browsers or have their graphics turned off It’s especially important to

provide text alternatives for images used as links

4 An imagemap is a special image in which different areas point to different

loca-tions on the Web

5 It’s a good idea to include text versions of imagemap links in case there are users

who visit your page with text-only browsers or with images turned off This way,

they can still follow the links on the web page and visit other areas of your

web-site

6 True The property will work only if you enter the values in the proper order

Exercises

1 Create or find some images that you can use as navigation icons or buttons on one

or more pages of your website Remember that it’s always advantageous to use

images more than once Create a simple navigation bar that you can use on the top

or bottom of each page

2 Create or find some images that you can use to enhance the appearance of your

web pages After you find some that you like, try to create background, text, and

link colors that are compatible with them

3 Create and test a simple client-side imagemap that links to pages that reside in

dif-ferent subdirectories in a website or to other sites on the World Wide Web

4 Create and test a client-side imagemap for your own home page, or for the entry

page in one of the main sections of your website Remember to include alternatives

for those who are using text-only browsers or browsers designed for the disabled

258 LESSON 9: Adding Images, Color, and Backgrounds

LESSON 10

Building Tables

So far in this book, you’ve used plain vanilla Hypertext Markup Language

(HTML) to build and position the elements on your pages, and you’ve

used Cascading Style Sheets (CSS) to fine-tune their appearance

Although you can get your point across using paragraphs and lists, some

information lends itself best to being presented in tables In this lesson,

you learn how to use HTML to create them

When tables were officially introduced in HTML 3.2, they were commonly

used to lay out entire pages More recently, that role has been taken over

by CSS With the introduction of HTML 4 and later releases, new features

were added to enable tables to better perform their designated role: the

presentation of tabular data

In this lesson, you’ll learn all about tables, including the following:

n Defining tables in HTML

n Creating captions, rows, and heading and data cells

n Modifying cell alignment

n Creating cells that span multiple rows or columns

n Adding color to tables

n Using tables in web pages

Creating Tables

Creating tables in HTML is a degree more complex than anything you’ve seen so far in

this book Think about how many different types of tables there are A table can be a

three-by-three grid with labels across the top, or two side-by-side cells, or a complex

Excel spreadsheet that comprises many rows and columns of various sizes Representing

tables in HTML is heavy on tags, and the tags can be hard to keep track of when you get

going

The basic approach with table creation is that you represent tabular data in a linear

fash-ion, specifying what data goes in which table cells using HTML tags In HTML, tables

are created from left to right and top to bottom You start by creating the upper-left cell,

and finish with the bottom-right cell This will all become clearer when you see some

actual table code

Table Parts

Before getting into the actual HTML code to create a table, here are some table-related

terms you’ll see throughout this lesson:

n The caption indicates what the table is about: for example, “Voting Statistics,

1950–1994,” or “Toy Distribution Per Room at 1564 Elm St.” Captions are

optional

n The table headings label the rows, columns, or both Usually they’re in an

empha-sized font that’s different from the rest of the table They’re optional

n Table cells are the individual squares in the table A cell can contain normal table

data or a table heading

n Table data is the values in the table itself The combination of the table headings

and table data makes up the sum of the table

Figure 10.1 shows a typical table and its parts

260 LESSON 10: Building Tables

FIGURE 10.1

The elements that

make up a table.

The <table> Element

All the components of a table are placed within a <table> </table>element:

<table>

table caption (optional) and contents

</table>

Here’s the code that produces the table shown in Figure 10.1 Don’t be concerned if you

don’t know what this all means right now For now, notice that the table starts with a

<table>tag and its attributes, and ends with a </table>tag:

<table border=“1”>

<caption>Vital Statistics</caption>

<tr>

<th>Name</th>

<th>Height</th>

<th>Weight</th>

<th>Eye Color</th>

</tr>

<tr>

<td>Alison</td>

<td>5’4”</td>

<td>140</td>

<td>Blue</td>

</tr>

<tr>

<td>Tom</td>

<td>6’0”</td>

<td>165</td>

<td>Hazel</td>

</tr>

<tr>

<td>Susan</td>

<td>5’1”</td>

<td>97</td>

<td>Brown</td>

</tr>

</table>

The Table Summary

If you want to play by the rules of XHTML, every time you create a table, the <table>

Table Parts 261

10

For your pages to play by the XHTML rules, you must include the summary attribute for

all your tables (just as you must include alttext for all your images) You’ll learn more

about why accessibility features are important in Lesson 19, “Designing for the Real

World.”

Rows and Cells

Now that you’ve been introduced to the <table>element, we’ll move on to the rows and

cells Inside the <table> </table>element, you define the actual contents of the

table Tables are specified in HTML row by row, and each row definition contains all the

cells in that row So, to create a table, you start with the top row and then each cell in

turn, from left to right Then you define a second row and its cells, and so on The

num-ber of columns is calculated based on how many cells there are in each row

Each table row starts with the <tr>tag and ends with the closing </tr> Your table can

have as many rows and columns as you like, but you should make sure that each row has

the same number of cells so that the columns line up

The cells within each row are created using one of two elements:

n <th> </th>elements are used for heading cells Generally, browsers center the

contents of a <th>cell and render any text in the cell in boldface

n <td> </td>elements are used for data cells tdstands for table data.

262 LESSON 10: Building Tables

You might have heard somewhere that closing tags are not required for <th> , <td> , and <tr> tags You might even see HTML that’s written without them However, XHTML requires that you include them, and including them makes your code much easier to follow Don’t leave them out.

In this table example, the heading cells appear in the top row and are defined with the

following code:

<tr>

<th>Name</th>

<th>Height</th>

<th>Weight</th>

<th>Eye Color</th>

CAUTION

The top row is followed by three rows of data cells, which are coded as follows:

<tr>

<td>Alison</td>

<td>5’4”</td>

<td>140</td>

<td>Blue</td>

</tr>

<tr>

<td>Tom</td>

<td>6’0”</td>

<td>165</td>

<td>Blue</td>

</tr>

<tr>

<td>Susan</td>

<td>5’1”</td>

<td>97</td>

<td>Brown</td>

</tr>

As you’ve seen, you can place the headings along the top edge by defining the <th>

ele-ments inside the first row Let’s make a slight modification to the table You’ll put the

headings along the left edge of the table instead To accomplish this, put each <th>in the

first cell in each row, and follow it with the data that pertains to each heading The new

code looks like the following:

Input▼

<tr>

<th>Name</th>

<td>Alison</td>

<td>Tom</td>

<td>Susan</td>

</tr>

<tr>

<th>Height</th>

<td>5’4”</td>

<td>6’0”</td>

<td>5’1”</td>

</tr>

<tr>

<th>Weight</th>

Table Parts 263

10

<th>Eye Color</th>

<td>Blue</td>

<td>Blue</td>

<td>Brown</td>

</tr>

Figure 10.2 shows how this table displays in a browser

264 LESSON 10: Building Tables

Output

FIGURE 10.2

An example of a

table that includes

headings in the

leftmost column.

Empty Cells

Both table heading cells and data cells can contain any text, HTML code, or both,

including links, lists, forms, images, and other tables But what if you want a cell with

nothing in it? That’s easy Just define a cell with a <th>or<td>element with nothing

inside it:

Input▼

<table border=“1”>

<tr>

<td></td>

<td>10</td>

<td>20</td>

</tr>

</table>

Some older browsers display empty cells of this sort as if they don’t exist at all If you

want to force a truly empty cell, you can add a line break with no other text in that cell

by itself:

<td>10</td>

<td>20</td>

</tr>

</table>

Figure 10.3 shows examples of both types of empty cells: the empty cell and the really

empty cell with the line break added

Table Parts 265

10

Output

FIGURE 10.3

Empty cells and

really empty cells.

Captions

Table captions tell your visitor what the table is for The <caption>element, created just

for this purpose, displays the text inside the tag as the table caption (usually centered

above the table) Although you could use a regular paragraph or a heading as a caption

for your table, tools that process HTML files can extract <caption>elements into a

sep-arate file, automatically number them, or treat them in special ways simply because

they’re captions

If you don’t want a caption, it’s optional If you just want a table and don’t care about a label, leave the caption off.

The<caption>element goes inside the <table>element just before the table rows, and

it contains the title of the table It closes with the </caption>tag:

<table>

<caption>Vital Statistics</caption>

NOTE