CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU

Một phần của tài liệu thiết kế về trang web (Trang 31 - 47)

<TABLE> ... </TABLE> Định nghĩa một bảng

<TR> ... </TR> Định nghĩa một hàng trong bảng <TD> ... </TD> Định nghĩa một ơ trong hàng <TH> ... </TH> Định nghĩa ơ chứa tiêu đề của cột <CAPTION> ... </CAPTION> Tiêu đề của bảng

Cú pháp: <TABLE

ALIGN = LEFT / CENTER / RIGHT

BORDER = n BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKGROUND = url BGCOLOR = color CELLSPACING = spacing CELLPADDING = pading >

<CAPTION>Tiêu đề của bảng biểu</CAPTION>

... Định nghĩa các dịng <TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> ... Định nghĩa các ơ trong dịng <TD

ALIGN = LEFT / CENTER / RIGHT

VALIGN = TOP / MIDDLE / BOTTOM

BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKBROUND = url BGCOLOR = color COLSPAN = n ROWSPAN = n > ... Nội dung của ơ </TD> ... </TR> ... </TABLE>

Ý nghĩa các tham số:

ALIGN / VALIGN Căn lề cho bảng và nội dung trong mỗi ơ.

BORDER Kích thước đường kẻ chia ơ trong bảng, được đo theo pixel. Giá trị 0 cĩ nghĩa là khơng xác định lề, giữa các ơ trong bảng chỉ cĩ một khoảng trắng nhỏ để phân biệt. Nếu chỉ để border thì ngầm định border=1. Với những bảng cĩ cấu trúc phức tạp, nên

đặt lềđể người xem cĩ thể phân biệt rõ các dịng và cột.

BORDERCOLOR Màu đường kẻ

BORDERCOLORDARK BORDERCOLORLIGHT

Màu phía tối và phía sáng cho đường kẻ nổi.

BACKGROUND Địa chỉ tới tập ảnh dùng làm nền cho bảng

BGCOLOR Màu nền

CELLSPACING Khoảng cách giữa các ơ trong bảng

CELLPADDING Khoảng cách giữa nội dung và đường kẻ trong mỗi ơ của bảng.

COLSPAN Chỉđịnh ơ sẽ kéo dài trong bao nhiêu cột

ROWSPAN Chỉđịnh ơ sẽ kéo dài trong bao nhiêu hàng

BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG 333 3

Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng cơng cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.

1. Tạo thưmục HTML-DHTML-JS-Examples trong ổ đĩa D:\ và lưu tất cả các file .htm chỉ trong thưmục này. (Nếu khơng cĩ đĩa D, hãy tạo trong ổ đĩa C:\)

2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”. 3. Gõ đoạn mã vào tài liệu

4. Kích vào File chọn Save As

5. Lưu file với đuơi .htm trong thưmục D:\HTML-DHTML-JS-Examples. 6. Chạy Internet Explorer.

BÀI TP 1

1/ Tạo trang web Headings.htm(s dng Tag Hn, t Heading1 đến Heading6)

2/ Tạo trang web HeadingCenter.htm(Phi hp các Tag)

4/ Tạo trang web Emphasis.htm

6/

BÀI TP 2 (Link)

1/ Tạo tập tin links2.htm : tạo các Hyperlink để di chuyển đến các trang htm vừa tạo ở trên.

2/ Tạo tập tin Search.htmđể xây dựng trang Web sau

3/ Sử dụng các tag đã học để tạo 1 trang Web cho riêng bạn (MySite.htm) Nội dung: Tự giới thiệu và Các trang Web ưa thích (tạo các HyperLink)

4/ Tạo trang Web sau (InternalLink)

http://www.google.com for Google http://www.altavista.com for Altavista http://www.Yahoo.com for Yahoo

BÀI TP 3 (Image) 1/ Image1.htm

2/ Image2.htm

Hướng dẫn: thêm vào dịng lệnh

BÀI TP 4 (Bullete) 1/Unordered.htm. 2/ Ordered.htm. 3/ Definition.htm dl dt dd

4/Horizontal.htm

BÀI TP 5 (Table) 1/ Table1.htm

2/ Table2.htm (Tables with images and links) <html>

<head>

<title>Exercise :: Tables2</title> <head>

<body >

<table width="75%" border="1" cellspacing="2" cellpadding="0" align="center">

<tr>

<th>Files from Session 2</th> <th>Files from Session 3</th> <th>Files from Session 4</th> </tr>

<tr>

<td><a href="/headings.htm">headings exercise</a></td> <td>images.htm</td>

<td>unordered.htm</td> </tr>

<tr>

<td><a href="/headingscentered.htm">center align exercise</a></td> <td>images2.htm</td>

<tr>

<td><a href="/emphasis.htm">emphasis exercise</a></td> <td>&nbsp;</td>

<td>definition.htm</td> </tr>

<tr>

<td><a href="/links.htm">links exercise 1</a></td> <td>&nbsp;</td>

<td>table1.htm</td> </tr>

<tr>

<td><a href="/links2.htm">links exercise 2</a></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>

Dùng các thẻ HTML để thiết kế các trang web sau: 1/ Tourist1.htm

3/ vinair.htm

5) Dulich.htm

BÀI TẬP LÀM THÊM

CHƯƠ CHƯƠ CHƯƠ

CHƯƠNG NG NG NG 4444

CSS (Cascading Style Sheets) c mc chính Bài tp bt Bài tp làm Tĩm tắt Mc tiêu Các mc chính Bài tp bt buc Bài tp làm thêm

Kết thúc bài học này cung cấp học viên kiến thức về tạo CSS trong việc thiết kế giao diện Web … 4.1 Khái niệm về CSS 4.2 Một sốđặc tính cơ bản về CSS Dựa vào bài tập trong phần cuối Chương 4. Dựa vào bài tập trong phần cuối Chương 4. buc thêm

Một phần của tài liệu thiết kế về trang web (Trang 31 - 47)

Tải bản đầy đủ (PDF)

(131 trang)