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

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ẻ <TABLE> và </TABLE>, kết hợp với các thẻ <TR> và </TR> để định nghĩa dòng của bảng. Trong mỗi dòng, ta dùng thẻ <TD> và </TD> để đị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ẻ <TABLE> <TABLE width="n"> <!- Các thẻ <TR> và <TD> bắt buộc phải có > </TABLE> 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ụ : <BODY> <TABLE border="0" width="16%" align="left"> <TR><TD <img src="firefox.gif" </TD></TR> <TR><TD><B>Macromedia <B></TD></TR> </TABLE> <P> Cuối cùng Adobe thứ hai 19-4<BR> Thương vụ này quyết liệt giữa </P> </BODY> 26 Để 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ẻ <BR clear="left">, <BR clear="right"> hay <BR clear="all">  Đị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ụ : <HTML> <HEAD><TITLE>Trung tâm Tin học ABC</TITLE></HEAD> <BASEFONT face="Times New Roman"> <BODY> <H3 align="center"> KẾT QUẢ THI </H3> <TABLE width="46%" border="1" cellpadding="2" cellspacing="0" align="center" bordercolordark="navy"> <TR> <TD width="4%" rowspan="2" align="center">TT</TD> <TD width="44%" rowspan="2" align="center">Họ và tên sinh viên</TD> <TD width="36%" colspan="2" align="center">Kết quả thi</TD> </TR> <TR> <TD width="17%" align="center">Lý thuyết</TD> <TD width="19%" align="center">Thực hành</TD> </TR> <TR> <TD width="4%" align="center">01</TD> <TD width="44%">Trần Bình Minh</TD> <TD width="17%" align="center">9</TD> <TD width="19%" align="center">10</TD> </TR> <TR> <TD width="4%" align="center">02</TD> <TD width="44%">Nguyễn Quang Hùng</TD> <TD width="17%" align="center">10</TD> 27 <TD width="19%" align="center">8</TD> </TR> </TABLE> </BODY> </HTML> 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ẻ <TR> và <TD>  Thẻ <TR> 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ẻ <TR> 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ẻ <TR> : 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ẻ <TD> có các thuộc tính như thẻ <TR>, 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 : <HTML> <HEAD> <TITLE>Tuổi Trẻ Online</TITLE> <LINK href="Tianyon.css" type=text/css rel=stylesheet> <SCRIPT src="Tianyon.js" type=text/javascript></SCRIPT> <META http-equiv=Content-Type content="text/html; charset=utf-8"> </HEAD> <BODY leftMargin=0 topMargin=0 rightMargin=0> <TABLE height=100 cellSpacing=0 cellPadding=0 align=center width=100%> <TR> <TD colspan=2><Javascript> banner();</Javascript></TD> </TR> <TR> <TD width=25%><Javascript> menu();</Javascript></TD> <TD width=75%><Javascript> content(item);</Javascript></TD> </TR> </TABLE> </BODY> </HTML> 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: <HTML> <HEAD> <TITLE> FrameSet </TITLE> </HEAD> <FRAMESET các thuộc tính của FrameSet> <FRAME <NOFRAME> <BODY> <!- Nội dung thay thế khi browser không hỗ trợ frame > </BODY> </NOFRAME> </FRAMESET> </HTML> II.2. Thẻ FrameSet Thẻ <FRAMESET> 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: <FRAMESET rows ="25%,*"> <FRAME name = fr1 src="menu.html"> Menu Content <FRAME name = fr2 src="content.html"> </FRAMESET> 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. <FRAMESET rows="79,*"> <FRAME name="banner" src=" top.html" > <FRAMESET cols="167,*" name="vbalFrameset"> <FRAME name="menu" src="left.html" target="main" > <FRAME name="main" src="main.html" > </FRAMESET> <NOFRAMES> <BODY> <p>This page uses frames, but your browser doesn't support them.</p> </BODY> </NOFRAMES> </FRAMESET> 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ẻ <FRAME> 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ẻ <BASE target=tên-khung> 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  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. 31  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: <IFRAME src="tệp tư liệu html"> Nội dung khác thay thế nếu trình duyệt không hỗ trợ thẻ Iframe </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ẻ <OBJECT> (IE và FireFox đều hỗ trợ thẻ này) với cú pháp như sau: <OBJECT data="tệp tin tư liệu html"> 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 </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ụ : <TABLE bgColor="silver" border="1" cellSpacing="0"> <THEAD> <TH> Tiêu đề cột trái> </TH> <TH> Tin được đọc nhiều nhất </TH> </THEAD> <TR> <TD> Nội dung cột bên trái </TD> <TD> <OBJECT data="frequency .htm" type="text/html" width="200" height="50"> Sory, browser not support </OBJECT> </TD> </TR> </TABLE> 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ẻ <FORM> và </FORM>. III.1. Các thuộc tính của thẻ <FORM> Thẻ <form> 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ụ : <FORM method = "post" action = "http://www.mysite.com/seach.asp"> <!- Các thành phần của form > </FORM> 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ụ : <FORM action="post" action="mailto:education@dng.vnn.vn" enctype="text/plain"> <!- Các thành phần của form > 33 </FORM> 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ẻ <INPUT> Thẻ <INPUT> 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ẻ <INPUT> : 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: <INPUT type = "text">. 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: <TEXTAREA cols="n" rows="m" wrap="on|off"> </TEXTAREA> 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ó đượ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. 34 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 : <INPUT type = "text">. Các thuộc tính khác: name, size, maxLength. III.3.4 Thẻ <INPUT type="file">, 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ụ: <INPUT type = "file" accept ="text/*"> , 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: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE>Yeu cau giai dap bai tap lap trinh WEB</TITLE> <BASEFONT face="Times New Roman" size="3"> </HEAD> <BODY> <FORM> <TABLE border="0" cellspacing="1" width="50%"> <TR> <TD width="38%">Mật khẩu</TD> <TD width="62%"><INPUT type="password" name="T1" size="20"></TD> </TR> <TR> <TD width="38%">Tên người dùng</TD> <TD width="62%"><INPUT type="text" name="T2" size="34"></TD> </TR> <TR> <TD width="38%">Nội dung gởi</td> <TD width="62%"> 35 [...]... thích và đầu đề cho nội dung âm thanh và mô tả cho nội dung video 40  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í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... giá trị của các trường trong form Ví dụ : 36 Kết quả tuyển sinh Số báo danh : Họ và tên : . 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. Đị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,. 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