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ợ.
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 src="tệp tin tư liệu HTML" name ="tên 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.
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
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.
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>
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 --> </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 idvà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.
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>
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%">
<TEXTAREA rows="3" name="S1" cols="26"></TEXTAREA> </TD>
</TR> <TR>
<TD width="38%">Tệp tin đính kèm</TD>
<TD width="62%"> <INPUT type="file" accept="text/*"></TD> </TR>
<TR>
<TD width="38%"></TD>
<TD width="62%"> <INPUT type="submit" value="Submit" name="B1"> <INPUT type="reset" value="Reset" name="B2"> </TD> </TR> </TABLE> </FORM> </BODY> </HTML>
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:
<INPUT type="button"> : đượ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 :
<FORM>
<INPUT type = "button" name = "alert" value = "OK"
onClick="alert('Bạn đã click lên nút OK!);">
</FORM>
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ẻ <form> và </form>
<INPUT type = "submit"> : đượ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 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ụ :
<HTML> <HEAD>
<META http-equiv = "Content-Type" content = "text/html; charset = utf-8"> </HEAD>
<BASEFONT face="Times New Roman"size="3"> <BODY>
<H3> Kết quả tuyển sinh </H3> <FORM>
<P>
Số báo danh : <INPUT type = "text" name ="sbd" size="10" value=" "> <br>
Họ và tên : <INPUT type = "text" name ="hoten" size="30" value=" ">
</P> <P>
<INPUT type = "submit" name = "b1" value = "OK"
action = "http://www/MyWeb.com/search.php"> <INPUT type = "reset" name = "b2" value = "Reset">
</P> </FORM> </BODY> </HTML>
<INPUT type = "image"> : 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ụ:
<FORM>
<TABLE border="0" width="41%"> <TR>
<TD width="21%">
<INPUT type="image" src="gecko.GIF"
alt="Gecko DOM Reference"
width="70" height="108"
onClick="window.location='http://www.mozilla.org/docs/dom/domref';"> </TD>
<TD width="79%"><B>Document Object Model</B>
<BR>Tham khảo Mô hình đối tượng tư liệu của Mozilla
Fundation <BR> <I><U>www.mozilla.org/docs/dom/domref<U><I></TD> </TR>
</TABLE> </FORM>
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ẻ <IMG> là đủ: <IMG src="Book.gif" width="32" height="32" onClick="alert('!');">
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 : <INPUT type = "checkbox">. 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 : <INPUT type = "button">. Các thuộc tính tương tự như hộp kiểm đã nêu trên.
Ví dụ :
<HTML> <HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE>Trung tam Tin hoc ABC</TITLE>
<BASEFONT face="Times New Roman" size="3"> </HEAD>
<BODY>
<H3>Vui lòng điền vào phiếu thăm dò này. Cám ơn!</H3> <FORM name="fr1" method="POST"
action="http://www.abc.com/gather.asp"> Họ và tên <INPUT type="text" name="T1" size="35"> <BR>
Địa chỉ <INPUT type="text" name="T2" size="43"> <BR> Các khóa học tham dự
<INPUT type="checkbox" name="C1" value="TVP">Tin học Văn phòng<BR> <INPUT type="checkbox" name="C2" value="VBN">Visual Basic.NET<BR> <INPUT type="checkbox" name="C3" value="JVA"> Java <BR>
Chất lượng giảng dạy
<INPUT type="radio" name="R1" value="R1" checked >Rất tốt <INPUT type="radio" name="R1" value="R1">Tốt <INPUT type="radio" name="R1" value="R1">Trung bình <INPUT type="radio" name="R1" value="R1">Chưa tốt <BR>
<INPUT type="submit" value="Submit" name="B1"> <INPUT type="reset" value="Reset" name="B2">
</BODY> </HTML>
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: <SELECT name = "name" size = "n" multiple>
<OPTION value = "value" selected > Tên đề mục 1 <OPTION value = "value" > Tên đề mục 2 ...
</SELECT>
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.