Giáo trình HTML và thiết kế web (Phần 2)

CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN

V.1. Thẻ neo và mối liên kết

Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một

tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó.

Liên kết siêu văn bản gồm có ba phần: giao thức, cái neo và địa chỉ hay URL

Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ

tạo neo là <A>…</A>(Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định

rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau.

V.1.1. Thuộc tính HREF

HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên

kết đến:

Một tài liệu khác (external link) hay

Một phần khác nằm trong chính tài liệu đang đọc (internal link)

Giao thức để tham chiếu HREFlà HTTP. Nếu là liên kết nội tại – internal link

thì không cần phải có phần giao thức.

V.1.2. Liên kết ra ngoài – External Links

Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu

đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết.

Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi

nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị.

Nên chọn các từ làm đầu mối sao cho gợi tả và sao cho tự nhiên, không ảnh

hưởng đến nội dung và ý nghĩa của câu văn. Tránh sử dụng lặp đi lặp lại câu "nhấn

vào đây" khi tạo đầu mối liên kết.

Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là

như sau:

44

V.1.3. Địa chỉ tuyệt đối

Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức

và đầy đủ địa chỉ URL của tệp đích.

Ví dụ:

<A

REF="http://www.srl.rmit.edu.au/sa/vicsa.html>Victorian

Subject Associations on Internet</A>

V.1.4. Địa chỉ tương đối

Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng

địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng

với đường đẫn đến thư mục nơi chứa tệp đích.

Ví dụ:

V.1.5. Liên kết nội tại – Internal Link

Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này

đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục

lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên

chương đến phần nội dung tương ứng.

Để làm điều này, cần đánh dấu điểm đích - book mark- của liên kết bằng thẻ neo

còn trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng tên nói trên.

Lưu ý có thêm dấu "#".

Ví dụ, để tạo liên kết nội tại từ đây nhảy về đầu trang ta cần tạo một book

mark ở đầu trang với tên là Top chẳng hạn. Sau đó, tạo thẻ neo liên kết ở dòng

dưới như sau

45

<A HREF="#Top"> về đầu trang </A>

V.2. Dùng hình ảnh làm đầu mối liên kết

V.2.1. Thay chữ bằng hình

Như ở phần trên, cấu trúc thành phần HTML mối liên kết siêu văn bản là:

Để thay “đầu mối liên kết” bởi một biểu tượng, hay một hình ảnh... Ta chỉ

cần chèn một hình ảnh hay biểu tượng đó vào vị trí của “đầu mối liên kết”.

Ví dụ:

V.2.2. Image Map - thẻ AREA

Thử hình dung ta có một bản đồ địa lý hành chính. Khi nhấn chuột vào vùng

diện tích của một tỉnh thì một trang thông tin tương ứng với tỉnh đó sẽ hiện ra. Đó

chính là Image Map.

Với Image Map, “đầu mối liên kết” là một vùng trên một hình ảnh có hình

dạng tùy ý nào đó.

Các công cụ soạn thảo trực quan cho phép dễ dàng tạo Image Map.

Một ví dụ về mã nguồn HTML của thành phần Image Map như sau:

<AREA HREF=”chapter1.html” SHAPE=”rect” coords=”6, 22, 167,

169”>

<AREA HREF=”chapter2.html” SHAPE=”circle” coords=”259, 106,

36”>

<AREA HREF=”chapter3.html” SHAPE=”polygon” coords=”123, 196,

56, 211, 278, 201”>

</MAP>

<IMG BORDER=”0” SRC=”image.gif” WIDTH=”400” HEIGHT=”600”

USEMAP=”#Map01”>

Đoạn mã trên sẽ tạo 3 đầu mối liên kết là ba vùng hình chữ nhật (rect), hình

tròn (circle) và hình tam giác (polygon) trên nền ảnh image.gif. Khi nhấn chuột vào

phạm vi 3 vùng này thì các tệp tương ứng chapter1.html, chapter2.html và

chapter3.html sẽ được nạp về để hiển thị.

46

V.3. Đưa âm thanh vào tài liệu

V.3.1. Liên kết đến tệp âm thanh

Để chèn một đoạn âm thành vào tài liệu HTML ta cũng theo đúng quy tắc

tạo mối liên kết thông thường. Trong thẻ neo, tại địa điểm URL bây giờ là địa chỉ

của tệp âm thanh.

Dưới đây là một ví dụ về việc chèn âm thành vào tài liệu. Khi nhấn chuột

vào mối liên kết này, tệp âm thanh sẽ được phát lại.

V.3.2. Tạo âm thanh nền

Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể

nhúng âm thanh vào tài liệu, nghĩa là âm thanh nền phát ra khi trang tài liệu bắt đầu

hiển thị.

Để nhúng âm thanh vào tài liệu ta dùng thẻ

<EMBED SRC=”URL” HEIGHT=”n” WIDTH=”n’

AUTOSTART=true|false LOOP=true|false>

Trong đó:

Thuộc tính

Mô tả

SRC=”URL”

Đường dẫn đến tệp âm thanh

Chiều cao của khung nhìn cho giao diện điều

khiển của phần mềm phát âm thanh

Chiều rộng của khung nhìn cho giao diện điều

khiển của phần mềm phát âm thanh

HEIGHT=n

WIDTH=n

Âm thanh tự động được kích hoạt khi bắt đầu

nạp tài liệu hiện thị (nên đặt là true)

Thiết lập việc lặp lại nhiều lần hay chỉ một lần

AUTOSTART=true|false

LOOP=true|false

Đặt thẻ <EMBED>ở đâu thì khung nhìn của giao diện điều khiển việc phát

tệp âm thanh xuất hiện ở đó.

Ví dụ:

<EMBED SRD=”music/papa.rmi” HEIGHT=50 WIDTH=200

AUTOSTART=true LOOP=true>

47

V.4. Đưa Video vào tài liệu

V.4.1. Chèn tệp Video

Việc chèn tệp video vào tài liệu HTML cũng giống như chèn tệp âm thanh.

Ví dụ đoạn mã sau đây sẽ chèn một đoạn phim video vào tài liệu. Nó sẽ tạo

ra một mối liên kết tới tệp video đã chọn và khi ta nhấn chuột vào mối liên kết thì

sẽ được xem lại tệp video đó.

Chú ý: Các tệp video đều có kích thước khá lớn nên hãy cân nhắc về tốc độ

đường truyền của người dùng.

V.4.2. Nhúng tệp video

Thẻ <EMBED>cũng dùng để nhúng tệp video vào tài liệu:

Ví dụ:

Cũng tương tự như các thuộc tính của việc chèn tệp âm thanh:

Thuộc tính

Mô tả

Tên và đường dẫn đến tệp video

SRC=”URL”

Chiều cao của khung hình chiếu video

Chiều rộng của khung hình chiếu video

Đặt cho video tự chạy khi bắt đầu nạp tài liệu

(không bắt buộc)

HEIGHT=n

WIDTH=n

AUTOPLAY=true|false

Cho hiện giao diện điều khiển của phần mềm

video ở liền ngay phía dưới khung hình. Thuộc

tính này không bắt buộc. Mặc định là true.

Thiết lập việc lặp lại nhiều lần hay chỉ một lần

CONTROLLER=true|flase

LOOP=true|false

Vị trí đặt thẻ <EMBED>là nơi xuất hiện khung hình video.

48

Bài tập

1. Tạo một trang khác giới thiệu chi tiết hơn về mình và có liên kết tới trang

giới thiệu chính của mình.

2. Chèn 2 ảnh vào trong trang giới thiệu chính sao cho khi click vào ảnh đó thì

trang giới thiệu chi tiết được mở ra. Yêu cầu: ảnh thứ nhất sử dụng đường

dẫn tuyệt đối, ảnh thứ hai sử dụng đường dẫn tương đối tới trang cần liên kết.

3. Tạo một trang thứ ba trong đó có chèn một đoạn Video clips ở giữa trang.

49

CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG

VI.1. Màu nền và văn bản

VI.1.1. Đặt màu nền

Để văn bản trở nên đẹp và hấp dẫn, đôi khi đặt nền cho trang siêu văn bản.

Thuộc tính BGCOLOR (Background Color). Dùng thuộc tính này kèm

thẻ <BODY>để đặt màu nền cho văn bản. Cú pháp như sau:

Nội dung của tài liệu

</BODY>

trong đó "#rrggbb" là red-green-blue, bộ ba số hai chữ số hệ đếm 16, xác định mã

màu.

VI.1.2. Màu chữ của văn bản

Thuộc tính TEXT. Thuộc tính này để thiết lập màu cho các con chữ trong

văn bản, trừ các đầu mối liên kết phải có màu khác đi.

Nội dung của tài liệu

</BODY>́

VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK

Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết.

 LINK- đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết.

 VLINK- Đặt màu sau khi đích liên kết đã được đến thăm (visited.

 ALINK- đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active

Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red

Nội dung của tài liệu

</BODY>

Kết hợp cùng với nhau

50

<HTML>

<HEAD>

<TITLE>Color

</HEAD>

Control

Example</TITLE>

<BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00"

VLINK="#22AA22" ALINK="#0077FF">

Đây là một tài liệu làm ví dụ về thiết đặt màu. Các

chữ

màu

xám

sáng

trên

nền

đen,

và

<A

HREF="nowhere.htm">đầu mối liên kết</A> đầu tiên có màu

vàng, chuyển màu xanh lá cây sáng khi được kích hoạt và

có màu xanh nhạt khi điểm đích đã được thăm

</BODY>

</HTML>

Lưu ý: Tổ hợp màu như trên chỉ được thiết đặt một lần cho toàn văn bản.

Hãy thận trọng khi lựu chọn để đảm bảo dễ đọc, dễ nhìn.

VI.1.4. Thuộc tính và mã màu

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"

VLINK="#rrggbb" ALINK="#rrggbb">

Thuộc tính

BGCOLOR

TEXT

Mô tả

Đặt màu nền

Đặt màu các con chữ, trừ các mối nối.

Đặt màu ban đầu của đầu mối liên kết khi chưa kích

hoạt

LINK

VLINK

ALINK

Đặt màu đầu mối liên kết khi đã thăm đích

Đặt màu đầu mối liên kết khi kích hoạt

Một vài mã màu hay dùng:

Màu

black

white

Mã

#000000

#FFFFFF

pale grey

dark green

green

pale blue/green

pale blue

navy blue

#DBDDE5

#306020

#405060

#00FFFF

#A5D6F7

#000020

51

burgundy

yellow

purple

red

orange red

orange

neon blue

pale purple/orchid

maroon

scarlet

pale purple

firebirch

#800040

#FFFF00

#601050

#FF0000

#FF2400

#FF7F00

#4D4DFF

#9370DB

#8E236B

#8C1717

#6B238E

#8E2323

Tuy nhiên hiện nay nhiều trình duyệt chấp nhận dùng tên màu tiếng Anh

thay cho các chữ số rất khó nhớ ở trên.

VI.2. Nạp hình ảnh làm nền cho trang văn bản

VI.2.1. Thuộc tính BACKGROUND

Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn bản.

Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn.

Nội dung tài liệu

</BODY>́

Ví dụ:

Khi dùng ảnh làm nền cho trang Web cần phải nạp một tệp hình ảnh. Như ta

đã biết tệp ảnh thường có kích thước lớn, làm chậm việc hiển thị trang tài liệu. Do

đó cần chọn tệp ảnh có kích thước nhỏ làm ảnh nền. Toàn bộ trang văn bản sẽ được

"lát nền" bằng hình ảnh này như ta lát nền nhà bằng gạch hoa.

VI.2.2. Water mark

Nhiều trang web có nền trang trí gắn chặt cố định, còn phần văn bản sẽ cuộn

trôi bên trên mỗi khi ta di chuyển thanh trượt. Hiệu ứng này được tạo ra nhờ thiết

lập thêm thuộc tính cho ảnh nền là

52

bgproperties="fixed"

Ví dụ:

<BODY BACKGROUND="images/backgnd.gif"

bgproperties="fixed">

VI.2.3. Hãy ký tên vào tài liệu của mình

Một thông lệ nên tuân theo là "kí tên" vào tài liệu. Nó giúp cho người đọc

biết được những thông tin tối thiểu về tác giả soạn ra tài liệu, thời gian cập nhật...

Việc đưa thêm địa chỉ của tài liệu Web vào cuối trang sẽ giúp cho người đọc lưu lại

được xuất xứ của trang tài liệu. Đó là chưa nói đến ý nghĩa quan trọng của phần

chữ kí này trong các tài liệu chính thức hoặc có tính thương mại.

Phần chữ kí thường gồm các thông tin sau:

 Ngày khởi tạo lần đầu.

 Ngày sửa chữa cập nhật gần nhất.

 Tên (và e-mail) của tác giả

 Tuyên bố về bản quyền (nếu cần )

 URL

Đoạn mã HTML của phần chữ kí đại loại có thể như sau:

Ngày viết: 20 September 1998 <BR>

Ngày cập nhật: 20 October 2001<BR>

Tác giả: <A HREF="mailto:[email protected]">

Nguyễn Văn Hùng</A> email:

[email protected]"><BR>

<P>

VITTI, ĐHQG Hà nội, 1998.

URL: http://www.vnu.edu.vn/index.htm

</FONT>́

53

Thẻ <A HREF="mailto:[email protected]">...

</A>là mối liên kết đến dịch vụ thư điện tử, khi trỏ chuột vào đây sẽ kích hoạt

dịch vụ e-mail để gửi đến địa chỉ nêu sau lệnh mailto.

Hãy tập thói quen thêm chữ kí vào tài liệu của mình!

VI.3. Khung – Frames

HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình

duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu

HTML khác nhau.

Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác

nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn

khung bên phải hiển thị tài liệu tương ứng.

VI.3.1. Trang trí khung

Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu

trúc khác trang thông thường, không có khung.

Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và

FRAMESETthay cho BODY

.

Thành phần FRAMESETtổ chức các khung trong cửa sổ trình duyệt. Nó cũng

có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame.

Các thành phần thông thường khác vốn nằm trong BODY không được xuất

hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESETsẽ bị bỏ qua.

Ví dụ:

Dưới đây là một ví dụ đơn giản.

<HTML>

<HEAD>

<TITLE>A simple frameset document</TITLE>

</HEAD>

54

</FRAMESET>

<P>This frameset document contains:

.....

</NOFRAMES>

</FRAMESET>

</HTML>

Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây.

Hình VI.1. Kết quả chạy đoạn code ví dụ

Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ không được hiển

thị mà thành phần NOFRAMESsẽ được xử lí.

VI.3.2. Thành phần FRAMESET

Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt

thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được

định nghĩa bằng thẻ FRAME

.

a. Các thuộc tính và ví dụ minh họa

rows = Danh sách các độ cao của các khung

55

Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần tử xác định độ

cao (số dòng !) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh

sách có bấy nhiêu phần tử.

Chiều cao thể hiện bằng

- số pixel,

- tỷ lệ phần trăm chiều cao màn hình

- hay tỷ lệ phần chiều cao còn lại.

Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang.

cols = Danh sách các độ rộng của các khung.

ý nghĩa tương tự như trên.

Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc.

Thuộc tính row thiết lập việc chia khung theo chiều ngang trong một

frameset. Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều

cao vùng hiển thị.

Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset.

Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng

hiển thị.

Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung.

Các ví dụ.

1- Chia màn hình thành hai nửa: nửa trên và nửa dưới:

...the rest of the definition...

</FRAMESET>

2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của

phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại.

...the rest of the definition...

</FRAMESET>

3- Tạo lưới gồm 2 x 3 = 6 khung.

...the rest of the definition...

56

</FRAMESET>

4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều

cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel. Dấu sao có nghĩa

là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*",

gấp đôi khung thứ 3 (vì "*" tương đương với 1*).

Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4

lần lượt là: 300, 400, 100, 200 pixel !.

...the rest of the definition...

</FRAMESET>

b. Chia khung lồng nhau và thành phần FRAME

Việc chia khung có thể lồng nhau nhiều mức.

Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được

chia thành 2 phần trên và dưới.

...contents of first frame...

...contents of second frame, first row...

...contents of second frame, second row...

</FRAMESET>

...contents of third frame...

</FRAMESET>

Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của

frameset).

Các thuộc tính:

name = Tên của khung.

Có thể dùng tên này để làm đích của mối siêu liên kết.

src = URI

Trỏ đến trang tài liệu sẽ hiển thị trong khung.

57

noresize

Không cho phép co giãn lại kích thước

scrolling = auto|yes|no

Thiết lập thanh cuộn.

 auto:Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định.

 yes:Luôn có thanh cuộn.

 no:Luôn không có thanh cuộn.

frameborder = 1|0

Thiết lập đường biên.

 1:Có đường biên giữa khung đang xét với các khung kề nó. Đây là giá trị

mặc định.

 0:Không có đường biên giữa khung đang xét với các khung kề nó.

marginwidth = số pixel

Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần hiển thị nội dung

và biên trái, biên phải. Giá trị mặc định tuỳ theo bộ duyệt.

marginheight = số pixel

Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần hiển thị nội dung và

biên trên, biên dưới. Giá trị mặc định tuỳ theo trình duyệt.

Lưu ý: Nội dung trong một frame không được thuộc về chính trang tài liệu

định nghĩa frameset.

VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME

VI.4.1. Thiết lập Target

Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung.

target = tên khung đích.

Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó.

Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK),

image map (AREA), và FORM.

58

VI.4.2. Thẻ NOFRAMES

Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình khách

không hỗ trợ frame hoặc đã tắt chức năng hiển thị frame.

Thành phần NOFRAMES đặt ở phần cuối của thành phần FRAMESET.

Ví dụ:

<HTML>

<HEAD>

<TITLE>A frameset document with NOFRAMES</TITLE>

</HEAD>

non-frame based version of the document.</A>

</NOFRAMES>

</FRAMESET>

</HTML>

VI.4.2. Nhúng frame - thẻ IFRAME

Thành phần IFRAME cho phép người thiết kế chèn một frame vào giữa một

khối văn bản text và hiển thị một tài liệu HTML khác bên trong.

Thuộc tính SRCthiết lập tài liệu nguồn để hiển thị trong frame.

Các thuộc tính:

name = tên. để tham chiếu trong tài liệu

width = Độ rộng của inline frame.

height = Độ cao của inline frame.

Ví dụ:

<IFRAME src="foo.html" width="400" height="500"

scrolling="auto" frameborder="1">

[Your user agent does not support frames or is

currently configured

not to display frames. However, you may visit

<A href="foo.html">the related document.</A>]

</IFRAME>

59

Inline frames mặc định là không co giãn được, không cần phải nêu rõ noresize.

Bài tập

1. Sửa trang giới thiệu tóm tắt về mình sao cho nền của trang đó là một ảnh bất

kỳ, trang giới thiệu chi tiết có nền màu xanh nước biển nhạt.

2. Dùng thẻ IFRAME để nhúng trang thứ 3 vào trong trang giới thiệu tóm tắt

(trang chủ).

60

CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET

VII.1. FORM

VII.1.1. FORM là gì?

a. Chức năng của FORM

Để mở rộng khả năng phục vụ người sử dụng, dịch vụ Web cần phải sử dụng

các ứng dụng khác bên ngoài. Ví dụ NSD yêu cầu tìm kiếm trong cơ sở dữ liệu, lấy

các thông tin tức thời, luôn được cập nhật.... Để làm được điều này dịch vụ Web

phải chuyển yêu cầu của NSD đến một ứng dụng khác. Ứng dụng này sẽ thực hiện

yêu cầu và trả lại kết quả cho Web server để chuyển tiếp đến NSD.

Form là một cách để chuyển dữ liệu từ NSD đến cho Web Server xử lý.

Forms được sử dụng rộng rãi trên WWW. Các forms rất tiện lợi cho người dùng

điền các yêu cầu tìm kiếm, các biểu mẫu điều tra, nhập dữ liệu đầu vào cho các ứng

dụng..

Có nhiều thành phần khác nhau (gọi là các điều khiển control) trong một

form. Tuỳ theo yêu cầu giao tiếp với NSD cần chọn thành phần thích hợp nhất.

Khi tạo form bạn cũng cần phải chỉ rõ cho máy chủ dịch vụ biết cách xử lý

form. Có nhiều loại chương trình ứng dụng khác nhau trong máy chủ dịch vụ để

làm việc này: các chương trình CGI, ISAPI, các script ASP, JSP, Java Bean,

Servlet...

Tạo form là khâu đầu tiên trong việc xây dựng giao tiếp giữa NSD với các

ứng dụng Internet / Intranet.

b. Thành phần của FORM

Cặp thẻ để tạo Form là <FORM...>...</FORM>.

Mọi thành phần của form như sẽ trình bày dưới đây đều phải nằm trong

phạm vi giới hạn bởi cặp thẻ này.

Công thức khung để tạo form là:

Toàn bô

</FORM>

̣

ca

́

̀

́

61

Thuộc tính METHODchỉ ra phương thức trao đổi dữ liệu giữa trình duyệt Web

và máy chủ Web. Có 2 phương thức là POST, GET. Đối với form phương thức

thường là POST

Thuộc tính ACTIONđể thiết lập địa chỉ URL của chương trình sẽ nhận và xử

lý dữ liệu gửi từ form.

.

VII.1.2.Các thành phần trong FORM

Như đã nêu trên, có nhiều loại thành phần khác nhau trong một Form. Dưới

đây sẽ trình bày lần lượt những điểm cơ bản nhất.

a. Hộp văn bản – TextBox

Hộp văn bản là nơi để gõ vào một dữ liệu kiểu xâu kí tự. Hộp văn bản sẽ

được hiển thị như sau:

Bottom of Form 1

Thẻ để tạo ra nó là:

Trong đó TEXT là từ khoá ứng với kiểu là Text box, Tên là tên của hộp văn

bản này còn n là một số nguyên chỉ ra chiều dài của trường. Tên phải duy nhất

trong trang, không được trùng nhau.

b. Hộp mật khẩu – Password

Hộp mật khẩu là nơi để gõ vào một mật khẩu kiểu xâu kí tự. Hộp mật khẩu

được hiển thị như sau:

Thẻ để tạo ra nó là:

Trong đó PASSWORD là từ khoá để tạo hộp mật khẩu, n là số nguyên chỉ ra

chiều dài của hộp.

Hộp mật khẩu khác hộp văn bản ở chỗ khi gõ các kí tự từ bàn phím thì nó

không hiển thị kí tự tương ứng trong khung mà thay bằng các dấu sao *.

62

Lưu ý: Việc hiển thị kí tự dấu * để thay thế chỉ có tác dụng che giấu với

người nhìn tại máy cục bộ. Password vẫn được gửi vào mạng dưới dạng rõ, không

mã hoá, có thể bị xem trộm. Nhiệm vụ mã là của giao thức mạng.

c. Vùng văn bản – Text Windows

Vùng văn bản, để hiển thị nhiều dòng văn bản. Vùng văn bản có dạng như sau:

Công thức viết là:

<TEXTAREA NAME= OTenVung" ROWS=m COLS=n> Van ban hien

thi</TEXTAREA>

trong đó, Tên vùng là tên của vùng văn bản, m và n là các số nguyên, chỉ ra chiều

cao và chiều rộng của vùng văn bản. Nếu bạn để trống phần "đoạn văn bản sẽ hiển

thị " thì sẽ không có văn bản nào xuất hiện trong cửa sổ.

Ví dụ:

<TEXTAREA NAME="COMMENTS" ROWS=5 COLS=50> Bạn cần phải

thường xuyên cập nhật các mẫu virus mới nhất</TEXTAREA>

d. Các lựa chọn – Radio Button

Các nút chọn radio là một nhóm nút tròn, chỉ cho phép bạn được chọn một

trong nhiều nút. Nút radio có dạng như sau:

Công thức viết:

<INPUT TYPE="RADIO" NAME="Tên_nhóm_nút"

VALUE="giá_trị_được_chọn"> Nhãn nút

Trong đó RADIOlà từ khoá ứng với kiểu nút chọn Radio, nhãn nút i là xâu kí tự

sẽ xuất hiện cạnh nút.

Ví dụ:

63