Chuong 3 - Bảng , khung và biểu mẫu

Chia sẻ: Le Van Vu | Ngày: | Loại File: DOC | Số trang:17

Thêm vào BST

Báo xấu

190
lượt xem 18
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Vai trò của bảng trong thiết kế web Table phục vụ hai chức năng chính trong thiết kết web: trình bày thông tin dưới dạng cột báo chí, quản lý

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Chuong 3 - Bảng , khung và biểu mẫu

Chương 3 BẢNG, KHUNG và BIỂU MẪU I. BẢNG (TABLE) I.1. Vai trò của bảng trong thiết kế web Table phục vụ hai chức năng chính trong thiết kết web: trình bày thông tin dưới dạng cột báo chí, quản lý các cách trình bày tư liệu web. Với bảng, chúng ta có thể chia trang web thành các vùng khác nhau và trình bày thông tin lên các vùng đó. Hiện nay, bảng là công cụ chính để thiết kế các trang web. Trong mỗi ô của bảng ta có thể đặt các thông tin như : văn bản, hình ảnh, biểu mẫu (form), đường kẻ ngang, video, hyperlink, đặt biệt là có thể đặt một bảng khác vốn là kỹ thuật thông dụng hiện nay. Table là tập hợp các thông tin hay dữ liệu được sắp xếp trong các cột (column) và dòng (row) có liên quan với nhau. Phần tử cơ bản của bảng là ô (cell) I.2. Tạo bảng Để tạo bảng, ta sử dụng thẻ và , kết hợp với các thẻ và để định nghĩa dòng của bảng. Trong mỗi dòng, ta dùng thẻ và để định nghĩa các ô. (TR, TD là chữ viết tắt của Table Row, Table Data) 1.2.1. Cú pháp thẻ và bắt buộc phải có--> Với n là là một số nguyên dương chỉ độ rộng tính bằng pixel hay tỷ lệ % của độ rộng của cửa sổ trang web.  Đặt bảng vào giữa trang web : sử dụng thuộc tính ALIGN với giá trị CENTER.  Dàn văn bản xung quanh bảng: sử dụng thuộc tính ALIGN với giá trị LEFT (bảng ở bên trái văn bản) hoặc RIGHT (bảng ở bên phải văn bản). Đây là kỹ thuật để trình bày ảnh và lời chú thích luôn luôn đi đôi với nhau. Ví dụ :
Để dừng việc dàn văn bản bên trái hoặc bên phải bảng, ta sử dụng một trong các thẻ , hay  Định dạng bảng, ta sử dụng các thuộc tính sau đây: - Border : xác định độ rộng của đường biên của bảng, có giá trị từ 0-6 - BorderColor: Xác định màu của đường biên của bảng và các ô. - BorderColorLight, BorderColorDark: xác định đường biên màu tô bóng của mỗi ô. Thông thường, để tạo sự hài hòa về màu sắc ta chọn BorderColor có giá trị cùng với BorderColorDark và BorderColorLight cùng tông màu với màu nền trang web. - Bgcolor: xác định màu nền của bảng, giá trị là một tên màu hay một số hexa, Thuộc tính này không còn được W3C khuyên dùng, thay vào đó bằng bảng kiểu (style sheet). - Background : xác định ảnh nền của bảng, giá trị là tên một tệp tin hình ảnh - CellSpacing : xác định khoảng cách giữa các ô của bảng - CelPadding : xác định khoảng cách nội dung trong mỗi ô tới các dường biên dọc của nó.. - Style : đây là một kỹ thuật của CSS mà ta sẽ nghiên cứu ở chương sau, dùng để định dạng nội dung trong mỗi ô như Font color, Font style ... Ví dụ : Trung tâm Tin học ABC KẾT QUẢ THI TT Họ và tên sinh viên Kết quả thi Lý thuyết Thực hành 01 Trần Bình Minh 9 10 02 Nguyễn Quang Hùng 27
10 8 1.2.2. Cấu trúc cơ bản một bảng Hình vẽ dưới đây minh họa cấu trúc một bảng và các thuộc tính cơ bản của nó, chú ý rằng giá trị của thuộc tính (table) Border và BorderColor sẽ tác dụng lên các cell border ngoại trừ những ô nào có khai báo giá trị riêng của nó về hai thuộc tính này. Đối với mỗi ô, khi thiết lập giá trị cho hai thuộc tính BorderColorDark và BorderColorLight sẽ phủ định tác dụng của các giá trị màu đã khai báo trong table, cell. 1.2.4. Cú pháp và cách sử dụng thẻ và  Thẻ xác định một phần tử chứa nhiều ô của một dòng, các thuộc tính khai báo trong thẻ có tác dụng trên toàn bộ các ô của dòng, nếu các ô không có khai báo gì khác. Các thuộc tính của thẻ : BgColor, BorderColor, BorderColorDark, BorderColorLight, Align, vAlign. - Align = "left" | "right" | "center", xác định cách căn lề giữa nội dung của các ô so với hai biên dọc của mỗi ô. - vAlign ="baseline" | "bottom" | "middle" | "top" , xác định cách căn lề giữa nội dung của các ô so với hai biên ngang của mỗi ô. 28
 Thẻ có các thuộc tính như thẻ , ngoài ra thẻ này có các thuộc tính riêng : Width xác định độ rộng của ô, giá trị của thuộc tính này là một số nguyên dương tính bằng pixel hay tỷ lệ % so với độ động của bảng. Nghiên cứu thêm TFOOT, THEAD, CAPTION, TBODY ... trong phần bài tập I.3. Một ứng dụng của bảng Nhiều trang web hiện nay dùng bảng để thể hiện banner, menu và nội dung từng đề mục được chọn, ví dụ các trang web của VietNamNet, VNExpress, Tuoitre Online,v.v..., ví dụ web site của báo Tuổi trẻ điện tử, các layout (bố cục) cơ bản sử dụng bảng như sau: Các nội dung đặt tại mỗi ô của bảng có thể do các kịch bản (script) được viết bằng một ngôn ngữ kịch bản nào đó xác định. Đọan mã của trang web được lược trích như sau : Tuổi Trẻ Online < banner(); menu(); content(item); Hiện nay người ta ưa dùng ngôn ngữ kịch bản trình chủ để chèn nội dung vào các ô của table. Vấn đề sẽ được trình bày ở hai chương cuối của giáo trình này. 29
II. FRAME (Khung) Khung là một cửa sổ nằm trong cửa sổ trình duyệt, ta có thể chia cửa sổ trình duyệt thành từng cửa sổ con để hiển thị nhiều trang web cùng một lúc. Cách dùng khung thông dụng nhất là đặt menu điều hướng (navigation menu) trên một khung, còn nội dung trên một khung khác, đây là phương pháp thông dụng để tổ chức web site sao cho dễ truy cập và khám phá. Khung cũng là công cụ tốt để xây dựng các giáo trình điện tử do tính dễ thiết kế, bảo trì.Tuy nhiên dùng frame để trình bày trang web có một số trở ngại : - Frame tuy được hỗ trợ bởi nhiều trình duyệt (IE, NN đều hỗ trợ), nhưng có một số trình duyệt khác và ngôn ngữ XHTML 1.0 không hỗ trợ. - Tốc độ hiển thị chậm, do phải mở nhiều trang web cùng lúc. II.1. Cơ bản về frame Xây dựng tư liệu frame : là bước đầu tiên để tạo các frame trong trang web, đó là việc tạo ra một tư liệu frame (frame document) không chứa nội dung, tư liệu này báo cho trình duyệt chia cửa sổ thành các frame và hiển thị trang web nào trong mỗi frame. Cú pháp cơ bản như sau: FrameSet .... II.2. Thẻ FrameSet Thẻ dùng để xác định có bao nhiêu frame và cách sắp xếp các frame này trong cửa sổ trình duyệt. Hai thuộc tính của thẻ này là rows và cols. Thuộc tính rows xác định có bao nhiêu cột (mỗi cột là một frame) trong cửa sổ trình duyệt và độ rộng của mỗi frame. Giá trị của thuộc tính rows là một danh sách các độ rộng của các frame tính từ bên trái sang phải, độ rộng này có thể là một giá trị tuyệt đối, tính bằng số pixel hoặc tỷ lệ % so với cửa sổ của trình duyệt, tuy nhiên nên hạn chế sử dụng giá trị tuyệt đối vì độ phân giải mỗi máy của client có thể khác nhau, thông thường ta chỉ gán giá trị tuyệt đối cho độ rộng của frame chứa menu để cố định độ rộng, hầu hết các trang web sử dụng frame đều làm theo cách này.Ta có thể sử dụng ký hiệu * để chỉ động rộng còn lại của frame cuối cùng. Tương tự thuộc tính cols xác định số dòng (mỗi dòng là một frame). Trong một FrameSet có thể lồng một FrameSet khác. 30
Ví dụ 1: tệp tư liệu frame để chia cửa sổ trình duyệt thành 2 cột: Menu Content Nhận xét: cửa sổ trình duyệt được chia thành 2 cột với độ rộng cột bên trái là 25%, cột bên phải là phần còn lại (được biểu thi bằng ký hiệu *) của cửa sổ trình duyệt (tức 75%) Ví dụ 2: tệp tư liệu frame để chia cửa sổ trình duyệt thành 2 dòng, dòng thứ nhì được chia thành 2 cột. This page uses frames, but your browser doesn't support them. Các trình sọan thảo web trực quan như FrontPage, Dreamwever đều có những công cụ thiết kế Frame Document rất tốt. FrontPage : File - New - Page... - (thẻ) Frames Pages Dreamwever : chọn thẻ Frames II.3. Thẻ Frame Các thuộc tính của thẻ gồm có:  Name : tên của khung hiện thời, đặt tên sao cho gợi nhớ.  Src: xác định vị trí của tệp tin tư liệu HTML đầu tiên nằm trong khung khi trang web chứa khung được nạp.  Target: xác định nơi hiển thị của trang web được xác định qua thuộc tính Src. Thông thường, nội dung các trang web được hiển thị trong khung bên phải, ta sử dụng thẻ khai báo trong phần đầu tệp HTML.  Noresize: có hai giá trị "yes" hay "no", quy định cửa sổ khung được/ không được thay đổi kích thước.  Scrolling: có các giá trị "auto", "yes" và "no", xác định cửa sổ có thanh cuộn hay không.  FrameBorder : xác định đường viền của khung, có hai giá trị là 0 và 1, giá trị mặc định là 1 31
 MarginWidth: xác định khoảng cách từ nội dung tới biên trái và biên phải của khung, đơn vị tính là pixel.  MarginHeight: xác định khoảng cách từ nội dung tới biên trên và biên dưới của khung, đơn vị tính là pixel. II.4. Thẻ Iframe (Inline Frame) Thẻ iFrame có chức năng chèn một frame vào một trang web, trong khung này hiển thị nội dung một trang web khác được chỉ định. Thẻ này được hỗ trợ bởi IE và FireFox. Cú pháp: Nội dung khác thay thế nếu trình duyệt không hỗ trợ thẻ Iframe Các thuộc tính của thẻ Iframe : name, width và height Nếu trình duyệt không hỗ trợ thẻ Iframe, có thể dùng thẻ (IE và FireFox đều hỗ trợ thẻ này) với cú pháp như sau: width="n" width="m" type ="text/html"> Nội dung khác thay thế nếu trình duyệt không hỗ trợ thẻ OBJECT Với n, m tính bằng pixel xác định kích thước của khu vực hiển thị trang web được nhúng vào trang web hiện tại Ví dụ : Tiêu đề cột trái> Tin được đọc nhiều nhất Nội dung cột bên trái Sory, browser not support ... 32
III.FORM (biểu mẫu) Biểu mẫu dùng để tạo một trang web tương tác, thông qua thao tác trỏ và click lên các đối tượng của biểu mẫu, biểu mẫu còn dùng để tập hợp các kiểu dữ liệu từ trang web để gởi đến web server thông qua các trường nhập liệu, nút điều khiển v.v... Biểu mẫu gồm có 2 phần:  Phần cấu trúc gồm có các field (trường), label (nhãn),button (nút nhấn)  Script (kịch bản) xử lý thông tin. Các phần tử của biểu mẫu phải được đặt trong cặp thẻ và . III.1. Các thuộc tính của thẻ Thẻ có hai thuộc tính bắt buộc: method và action. Ngoài ra, nó còn có thuộc tính name để định danh form trong trang web, giúp việc truy cập đến các phần tử của form được dễ dàng. III.1.1. Thuộc tính method Thuộc tính method xác định dữ liệu từ form được truyền đi như thế nào, có hai phương thức truyền dữ liệu là post và get  Phương thức post : truyền dữ liệu đến web server trong dạng thức HTTP, đây là phương thức mặc định. Ví dụ : Trong đó search.asp là một trang ASP nằm trên web server sẽ xử lý yêu cầu của client và trả lại kết quả là một tệp tư liệu HTML do web server sinh mã.  Phương thức get : truyền dữ liệu đến web server trong chuổi vấn tin (query string) đính kèm đến một URL. Ví dụ, trong một ứng dụng thương mại điện tử, khi người dùng chọn một món hàng : http://www.bookonline.com/AddToCart.asp?bookCode=012309&qty=2 Chúng ta sẽ nghiên cứu kỹ các sử dụng hai phương thức này trong chương 7. III.1.2. Thuộc tính action Thuộc tính action xác định nơi gởi dữ liệu của form, có thể là một trang ASP ( hay JSP, PHP...) trên web server có chức năng xử lý dữ liệu do client gởi đến như ví dụ trên, hay một địa chỉ e-mail: Ví dụ : 33
Thuộc tính enctype xác định phương thức mã hóa dữ liệu khi truyền dữ liệu đến web server, nếu không khai báo thuộc tính này mặc nhiên trình duyệt sẽ gởi dữ liệu dưới dạng plain-text và không mã hóa. III.2. Thẻ Thẻ dùng để định nghĩa các trường dữ liệu (cũng còn được gọi là các control) của form, thẻ này có ba thuộc tính cơ bản: type, name hay id và value; các thuộc tính này lần lượt xác định kiểu trường dữ liệu, tên của trường và giá trị của trường. Có 9 kiểu trường dữ liệu của form gồm: text box, password box, hidden box, check box, radio button, text area, file, select box và button. Các thuộc tính cơ bản của thẻ : Type, Name, Value. Tùy theo kiểu field mà ta có các thuộc tính khác sẽ  Type : xác định một trong chín kiểu trường dữ liệu nêu trên.  Name : xác định định danh của điều khiển trong form  Value : đây là thuộc tính tùy chọn, xác định giá trị khởi đầu của điều khiển.  TabIndex: xác định thứ tự của phần tử nhận được tiêu điểm thông qua bàn phím. Giá trị của TabIndex là một số nguyên dương.  Size : xác định số ký tự lớn nhất có thể nằm trong phần tử text hay password.  Checked : đây là thuộc tính logic, chỉ nút radio hay checkbox ở chế độ bật.  Src: dùng khi nhập vào một ảnh, xác định vị trí (location) của ảnh. Gán giá trị cho thuộc tính này theo cú pháp: Src="URL". III.3. Các trường văn bản (text field) Các trường văn bản trong biểu mẫu bao gồm các dạng: textbox, password box, text area và file. Các thuộc tính và cách sử dụng như sau: III.3.1. Text box : tạo một hộp văn bản đơn dòng (one-line textbox) để người sử dụng nhập liệu. Cú pháp: . Các thuộc tính khác: name, size, maxLength, value. III.3.2. Text area box : tạo một hộp văn bản có thể cuộn được (scrolling text box) để nhập nhiều dòng văn bản. Cú pháp: Trong đó m, n là một số nguyên dương chỉ kích thước của hộp văn bản (số dòng, số ký tự ), thuộc tính wrap nhận giá trị logic chỉ tính chất của văn bản có 34
được "bao bọc" hay không khi ký tự cuối dòng chạm đến biên phải của hộp văn bản, nếu wrap nhận giá trị ON thì số ký tự trên một dòng bằng giá trị của thuộc tính cols thì sẽ ngắt xuống dòng khác. III.3.3. Password box : Tạo một hộp văn bản đơn dòng, khi người dùng gõ vào mật khẩu, dòng mật khẩu sẽ không hiển thị trên màn hình mà hiển thị dưới dạng các dấu sao (*) hay dấu chấm tròn () Cú pháp : . Các thuộc tính khác: name, size, maxLength. III.3.4 Thẻ , phần tử nầy cho phép người dùng gõ tên một tệp tin hay chọn một tệp tin từ phương tiện trữ tin để gởi đến server. Phần tử này xác định một hộp văn bản và một nút browse để mở một cửa sổ liệt kê các file và thư mục trên máy tính để chọn file. Thẻ này có thuộc tính accept để xác định mặt nạ tìm kiếm tệp tin. Ví dụ: , xác định cho việc duyệt file chỉ thực hiện trên các tệp văn bản như text/plain, text/html, text/css, text/js.... Ví dụ tổng hợp: Yeu cau giai dap bai tap lap trinh WEB Mật khẩu Tên người dùng 35
Nội dung gởi Tệp tin đính kèm Ghi chú : để sắp xếp thẳng hàng các trường (field) cần sử dụng bảng (table) III.4. Nút bấm (button), hộp kiểm (check box) và nút chọn lựa. III.4.1 Nút bấm là một nút hình chữ nhật được dùng để thực hiện một hành động khi người sử dụng click lên nút này, đôi khi ta gọi chúng là những nút bấm hành động (action buttons), giá trị của thuộc tính value thiết lập chuổi ký tự xuất hiện trên nủ nhấn. Tùy thuộc vào kiểu của nút bấm ta có hình dáng và cách sử dụng khác nhau:  : được sử dụng như một nút lệnh (command button), nút này được gắn với một hàm viết bằng JavaScript để thực hiện một hành động xác định khi có một sự kiên (event) tác động lên nút này. Trong ví dụ sau đây, khi click lên nút OK sẽ xuất hiện một hộp cảnh báo : Nếu sử dụng như một nút lệnh và không cần truy xuất đến tên, giá trị của nút bấm, ta có thể không dùng cặp thẻ và  : được sử dụng như một nút lệnh submit, có chức năng đệ trình tập giá trị của các trường trong form vào vị trí xác định đã khai báo trong thuộc tính action (là một URL chỉ một trang ASP,JSP hay PHP trên web 36
server, có chức năng xử lý dữ liệu được gởi từ client). Ngược lại nút reset có chức năng khởi tạo lại các giá trị của các trường trong form. Ví dụ : Kết quả tuyển sinh Số báo danh : Họ và tên : Ghi chú : http://www.MyWeb.com là một web site chứa trang ASP search.asp. Trong quá trình thử nghiệm ta chỉ cần đến localhost, vấn đề này sẽ được nghiên cứu trong chương ? về Active Server Page.  : sử dụng hình ảnh làm một nút lệnh tương tự như thuộc tính type với giá trị button, nhưng mỹ thuật hơn. Ví dụ: Document Object Model Tham khảo Mô hình đối tượng tư liệu của Mozilla Fundation www.mozilla.org/docs/dom/domref 37
Nếu chỉ dùng với mục đích làm một nút lệnh thì chỉ cần dùng thẻ là đủ: III.4.2. Hộp kiểm (Check box) Hộp kiểm được dùng trong trường hợp người sử dụng được phép chọn nhiều chọn lựa trong số các chọn lựa được cung cấp. Cú pháp : . Các thuộc tính khác: Name : Đặt tên hoặc truy xuất tên của checkbox Value: Đặt giá trị hoặc truy xuất giá trị của checkbox Checked : Đặt hoặc truy xuất trạng thái được chọn/không chọn của checkbox Khi chọn phần tử checkbox, cặp tên/giá trị được nhận với biểu mẫu. III.4.3. Nút chọn lựa (Radio button) Nút chọn lựa được dùng trong trường hợp người sử dụng được phép chọn một chọn lựa trong số các chọn lựa được cung cấp khi các nút lựa chọn được đặt cùng tên. Cú pháp : . Các thuộc tính tương tự như hộp kiểm đã nêu trên. Ví dụ : Trung tam Tin hoc ABC Vui lòng điền vào phiếu thăm dò này. Cám ơn! Họ và tên Địa chỉ Các khóa học tham dự Tin học Văn phòng 38
Visual Basic.NET Java Chất lượng giảng dạy Rất tốt Tốt Trung bình Chưa tốt    III.5. Các phần tử lựa chọn (Selection) Tất cả các phần tử của biểu mẫu đã đề cập là các phần tử nhập (input), hai phần tử kế tiếp là select box, có chức năng tạo ra một hộp danh sách thả xuống (drop-down list box) hay còn gọi là một menu thả xuống (drop-down menu), cho phép người sử dụng chọn một hay nhiều mục lựa chọn từ danh sách các đề mục đề nghị. Cú pháp: Tên đề mục 1 Tên đề mục 2 ... Các thuộc tính: Name : Đặt tên hoặc truy xuất tên của lựa chọn Size: là chiều cao của menu, tính bằng số hàng chữ Multiple: là thuộc tính cho phép người sử dụng chọn nhiều đề mục trong menu (bằng cách giữ phím Shift và click lên mục chọn) Selected : là thuộc tính để đề mục (option) được chọn mặc định. Value : xác định dữ liệu của (các) mục được chọn để gởi đến server. Ví dụ sau đây minh họa cho việc truy cập đến các web site khác thông qua Drop- down Menu và việc sử dụng biểu mẫu phải gắn liền với các script (nghiên cứu ở chương 5, 6) để xử lý dữ liệu ở phía client hay gởi đến web server. Các khoa CNTT của trường Đại học function chon(dia_chi) {window.location=dia_chi;} //Truy cập đến URL cho lại trong chuổi dia_chi.
onChange="chon(this.options[this.selectedIndex].value);"> Khoa CNTT trường ĐHSP Hà Nội Học viện Bưu chính-Viễn thông Hà Nội Trường Đại học Kỹ thuật-Công nghệ-ĐHQG HN Khoa CNTT-Đại học Bách khoa Hà Nội Khoa CNTT-Đại học KHTN-Đại học Huế Khoa CNTT-Đại học KHTN-ĐHQG tp HCM Đại học Ngoại ngữ-Tin học tp HCM Khoa CNTT-Đại học dân lập KT-CN tp HCM Khoa CNTT-Đại học Cần Thơ Giải thích: Khi người sử dụng chọn một đề mục từ menu, giá trị từ option tương ứng được gán cho thuộc tính this.options[this.selectedIndex].value và truyền giá trị cho tham số dia_chi của hàm chon. Thẻ đóng là tùy chọn. IV. NHỮNG LỜI KHUYÊN CỦA W3C W3C không những là một tổ chức định chuẩn các công nghệ thiết kế web, ngôn ngữ HTML, CSS v.v.. mà còn đưa ra những tiêu chuẩn thiết kế web sao cho hiệu quả cũng như đưa ra những công cụ thẩm định tiêu chuẩn website tại các địa chỉ : Bộ chỉ dẫn thiết kế web : http://www.w3c.org/wai/bcase/benefits.html Bộ công cụ thẩm định web : http://www.w3c.org/wai/er/existingtools.html • Công thức cơ bản, ngắn gọn do W3C đưa ra : 40
Thiết kế trang web dễ truy cập = dễ có khách hàng • Sau đây là 9 nguyên tắc cơ bản do W3C đề xuất để cải thiện tốc độ truy cập website, dể sử dụng, thân thiện.  Hình ảnh và họat ảnh : Sử dụng thuộc tính ALT để mô tả chức năng của mỗi yếu tố hình ảnh  Truyền thông đa phương tiện : Cung cấp lời chú thích và đầu đề cho nội dung âm thanh và mô tả cho nội dung video  Liên kết siêu văn bản: Sử dụng văn bản sao cho đọc nghe êm tai, kể cả khi chúng không có ngữ cảnh. Chẳng hạn, tránh cụm từ “Nhắp chuột vào đây”  Tổ chức trang : Sử dụng tựa đề, danh sách và một cấu trúc nhất quán. Dùng tờ mẫu dạng xếp tầng (template with CSS) để dàn trang và tạo kiểu dáng bất kỳ khi nào có thể.  Đồ thị và biểu đồ : Tóm tắt hoặc sử dụng thuộc tính LongDesc  Tập lệnh, ứng dụng ký sinh và plug-in : Cung cấp nội dung thay thế trong trường hợp những tính năng động không thể truy cập được hoặc không hỗ trợ  Không sử dụng khung, nhưng sử dụng những tiêu đề có ý nghĩa  Bảng : cần có tóm tắt  Kiểm tra công việc : Phê chuẩn. Sử dụng công cụ, bảng liệt kê những mục cần kiểm tra và những chỉ dẫn tại http://www.w3c.org/tr/wai-webcontent Trong phần phụ lục cuối giáo trình này ta sẽ nghiên cứu một số nguyên tắc cụ thể khi thiết kế trang web và website (Nguồn: http://support.vnn.vn, 2005) V. TỔNG KẾT CHƯƠNG Trong chương này ta nghiên cứu hai thẻ HTML quan trọng, thường được dùng để thiết kế các trang Web : Table và Form Table là một công cụ để trình bày trang web theo phong cách báo chí, hầu hết các website thông tin đều sử dụng công cụ này, vấn đề là ngôn ngữ HTML cho phép khả năng định dạng Table khá phức tạp và yếu, để thực hiện vấn đề này hiệu quả ta cần sử dụng CSS (nghiên cứu ở chương 4) Form là đối tượng quan trọng để truyền thông dữ liệu giữa các trang web chạy trên client, gởi dữ liệu đến Server. Để thực hiện việc truyền thông dữ liệu cần phải có các kịch bản (script) viết bằng một ngôn ngữ kịch bản để xử lý (nghiên cứu ở chương 5,6,7). 1. Để trình bày một table có chiều rộng bằng 80% chiều rộng cửa sổ trình duyệt, ta có hai biện pháp : dùng thẻ với thuộc tính align=center hoặc dùng thẻ . Hãy so sánh hiệu quả sử dụng hai thẻ này trên các trình duyệt khác nhau. 2. So sánh tốc độ hiển thị một trang web chứa một bảng có độ rộng khai báo bằng giá trị tương đối với một trang web khác cũng chứa một bảng như vậy nhưng khai báo độ rộng bằng giá trị tuyệt đối (tính bằng pixel) 3. Nghiên cứu và phân biệt các giá trị của thuộc tính target: _blank, self, top, parent 41
4. Hãy tạo một form chứa các thành phần nhập dữ liệu khác nhau. (cần sử dụng table để gióng thẳng cột các đối tượng trên form) Xem danh mục tài liệu tham khảo tại Chương 2 42