Tailieu.vncty.com thiet ke web dai hoc

Trường Đại học Bạc Liêu Bài giảng Thiết kế Website

Chương 1: Giới thiệu chung

I. Mạng máy tính

Trong quá trình khai thác, sử dụng điện thoại cá nhân, việc trao đổi thông tin ngày càng

phát triển mạnh mẽ, trong khi các máy tính chưa có nối kết với nhau thì việc sao chép dữ liệu

cho nhau gây khó khăn và mất nhiều thời gian. Để giải quyết vấn đề trên với đà phát triển của

máy tính các thiết bị máy tính có nhiều công nghệ mới và mạng máy tính ra đời là tất yếu.

Vì vậy mạng máy tính (network) là tập hợp các hệ thống máy tính và các thiết bị mạng

chia sẻ dữ liệu, chương trình, tài nguyên qua một đường truyền kết nối truyền thông dùng

chung trên cơ sở một hệ điều hành mạng.

Đường truyền là một hệ thống các thiết bị truyền dẫn vật lý gồm có 2 loại:

- Hữu tuyến: Cáp đồng trục, cáp đôi xoắn, cáp quang, cáp điện thoại, . . .

- Vô tuyến: Sóng cực ngắn(viba), tia hồng ngoại, . . .

1. Phân loại mạng

1.1. Mạng cục bộ (LAN)

Là mạng nội bộ kết nối các máy tính của một cơ quan, tổ chức trong phạm vi nhỏ, có bán

kính vài trăm mét. Kiến trúc mạng thường được chọn lựa hình sao, các máy tính kết nối với

thiết bị trung tâm bằng dây cáp xoắn. Theo cách này một máy in có thể được chia sẻ để dùng

cho nhiều máy tính. Tốc độ và độ tin cậy cao (truyền tin ít lỗi)

1.2 Mạng diện rộng (WAN)

Là mạng diện rộng, kết nối các mạng LAN ở xa nhau để có một mạng duy nhất. Phương

tiện truyền thông là yếu tố quan trọng cần được chọn khi xây dựng mạng WAN. Nếu sử dụng

Biên soạn: Huỳnh Huy Tuấn Trang 1


đường truyền điện thoại thông thường thì tốc độ truyền dữ liệu hạn chế ở mức 56kb/s. Nếu

dùng đường truyền thuê bao riêng thì có thể đăng ký với phía cung cấp dịch vụ một đường

truyền 2Mb/s có chi phí khá cao. Khoảng cách của mạng WAN hàng trăm km, hàng nghìn km.

Tốc độ chậm, kém tin cậy hơn. Phải qua các đường truyền điện thoại hoặc đường truyền thuê

bao riêng…

1.3 Mạng Internet

Internet là liên mạng máy tính toàn cầu.

Về phần cứng: gồm các mạng LAN và WAN của cả thế giới kết nối với nhau.

Về phần mềm: theo một chuẩn chung - giao thức TCP/IP (Transmission Control

Protocol/Internet Protocol) để các máy tính nhận ra nhau. Hay lầm lẫn với các dịch vụ: trang tin

toàn cầu (World Wide Web), thư điện tử (Email – Electronic mail), truyền tệp tin (FTP – File

Transfer Protocol) đã trở thành nhu cầu của hàng trăm triệu người hiện nay.

2. Dịch vụ trang tin toàn cầu WWW(World Wide Web)

Đây là dịch vụ mới và mạnh nhất trên Internet. WWW được xây dựng dự trên một kỹ

thuật có tên gọi là Hypertext(siêu văn bản). Hypertext là kỹ thuật trình bày thông tin trên một

trang trong đó có một số từ có thể liên kết đến một trang thông tin mới có nội dung đầy đủ hơn.

Trên cùng một trang thông tin có thể có nhiều kiểu dữ liệu khác nhau như văn bản, ảnh, âm

thanh, phim,…Để xây dựng được các trang tin với các kiểu dữ liệu khác nhau như vậy WWW

sử dụng một ngôn ngữ có tên là HTML(HyperText Markup Language. Ta có thể Sử dụng

chương trình Internet Explorer để xem tin.

II. Các khái niệm khác

1. URL (Uniform Resource Locator)

Là cách gọi khác của địa chỉ website. URL bao gồm tên của giao thức(thường là http

hoặc ftp), tiếp đến là dấu hai chấm (:) và hai gạch chéo (//), sau đó là tên miền muốn kết nối

đến. Ví dụ một URL: “http://www.blu.edu.vn/cntt” sẽ hướng dẫn trình duyệt web của chúng ta

sử dụng giao thức http để kết nối với máy tính www.blu.edu.vn mở tập tin web mặc định là

index.htm hoặc default.htm trong thư mục cntt.

2. Hyperlink(siêu liên kết)

Là một thành phần cơ bản và rất cần thiết đối với một siêu văn bản world wide web. Siêu

liên kết giúp chúng ta dễ dàng tìm kiếm các thông tin khác nhau về một chủ đề. Một siêu liên

kết là một phần văn bản hay hình ảnh của trang web mà khi click vào nó sẽ liên kết đến: Một

phần khác của trang web, trang web khác trong website hay website khác, cho phép download

một tập tin, chay một ứng dụng, trình diễn môộ đoạn video hay âm thanh.

3. Web Browser (trình duyệt web)

Web Browser là một chương trình cho phép truy xuất và xem thông tin trên web. Có nhiều

Web Browser như: Internet Explorer, Netscape Navigator Communicator, Opera, Mozilla

Firefox, ...


http://www.blu.edu.vn/

http://www.blu.edu.vn/


4. Web Server (Máy chủ Web)

Web Server là máy chủ trong đó chứa thông tin dưới dạng Web (trang HTML có thể chứa

âm thanh, hình ảnh, video, văn bản, . . .). Các Web Server được kết nối với nhau thông qua

mạng Internet, mỗi Web Server có một địa chỉ duy nhất trên Internet.

5. Web Page (trang web)

Những thông tin truyền tải trên Internet được sắp xếp trên những trang văn bản đặc biệt

đó là trang web. Những trang web chỉ khác với các dạng văn bản bình thường ở chỗ trong nó

có những mối kết nối (links) tới những đối tượng khác. Những đối tượng này có nhiều loại như

một bức tranh, một văn bản, một file âm thanh, một đoạn video, hoặc là những văn bản khác.

Những đối tượng đó có thể nằm khắp nơi trên thế giới.

Đặc điểm của một trang web là có đuôi HTM hay HTML (Hyper Text Markup Language).

Vì trong trang web có những mối kết nối và nhiều loại đối tượng khác nhau nên người ta

phải xây dựng những công cụ để thể hiện nó. Những công cụ đó gọi là bộ duyệt web như

internet Explorer, Netscape Communicator . . .

6. Web Site

Web site là một tập các trang web có liên quan đến một công ty, một tổ chức, cá nhân

nào đó, . . .được lưu trữ trong một phân vùng náo đó. Các trang web nằm trong web site được

bố trí theo một cấu trúc nào đó. Trong một web site thường có một trang web chủ (home) và là

trang cửa ngõ để khách hàng thâm nhập vào các trang web nằm trong web site đó.

III. Phân loại Web

1. Static pages (Web tĩnh)

Tính chất của trang web này là chỉ gồm các nội dung hiển thị cho người xem.

2. Form pages (Biểu mẩu)

Cho phép nhập các yêu cầu từ phía người sử dụng. Khi người sử dụng điền xong các

thông tin vào biểu mẩu và nhấn nút “Submit”, thì những thông tin đó sẽ được chuyển về Web

Server lưu trữ rồi có thể Web server gửi thông tin về cho người sử dụng.

3. Dynamic Web (Web động)

Nội dung trang web động như trang web tĩnh, có nhúng các mã lệnh cho phép truy cập cơ

sở dữ liệu trên mạng.

IV. Những lời khuyên ban đầu:

Khi trình bày một trang web ta nên chú ý một số điểm sau:

- Tranh ảnh mang lại một nét thẩm mỹ cho trang web và nó cũng làm cho người đọc dịu

bớt sự căng thẳng khi thấy màn hình toàn là chữ. Nhưng ta cũng không nên lạm dụng việc sử

dụng quá nhiều hình ảnh trên trang web sẽ hạn chế rất lớn đến tốc độ truyền tải chúng.

- Thông tin bố trí trên trang web cần gọn gàng. Giúp người đọc dễ tìm, không nên dùng

quá nhiều khoảng trống.

- Vấn đề chọn font tiếng Việt theo chuẩn thống nhất.

- Tô màu những chỗ muốn người đọc chú ý.



Chương 2. GIỚI THIỆU VỀ HTML

Web cho chúng ta chia sẻ tài liệu, hình ảnh,… và điều chuyển qua các trang của một site

(nơi chứa các trang web) hay từ site này sang site khác dễ dàng trên Internet, ngôn ngữ chuẩn

để thể hiện web là HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu siêu văn

bản cho phép định nghĩa cách hiển thị nội dung của trang web trên trình duyệt. Tất cả các trình

duyệt (Internet Explorer, Opera, Firefox,…) đều hiểu được HTML.

I. Cấu trúc cơ bản

Các tập tin HTML có phần mở rộng .html hoặc .htm thực chất là các tập tin văn bản

ASCII, nghĩa là ta có thể tạo, sửa đổi nó bằng một trình soạn thảo văn bản trong tập tin HTML

xuất hiện như văn bản thường. Để trình bày nội dung tập tin HTML đẹp hơn, ấn tượng hơn ta

cần thêm các cặp thẻ định dạng văn bản, các cặp thẻ sẽ bao đoạn văn bản cần định dạng. Ví

dụ dùng cặp thẻ <b> và </b> để in đậm đoạn văn bản: <b> Hello </b> World

Chữ Hello sẽ in đậm còn chữ World thì bình thường.

Thẻ không phân biệt chữ hoa hay thường, nghĩa là dùng <b> </b> hay <B> </B> đều như

nhau.

Một số thẻ có chứa các thuộc tính bên trong dấu ngoặc nhọn, ví dụ như thẻ <font>

</font> (định font chữ).

Ví dụ 1: tập tin vidu1.htm có nội dung như sau:

<html>

<head> <title> Hello World </title> </head>

<body>

<font face=”Arial”><b> Hello </b> World </font>

</body>

</html>

Khi hiển thị trên trình duyệt sẽ như (hình 2.1)

Hình 2.1 minh họa nội dung trang HTML trên trình duyệt



II. Các thẻ định dạng của html

1. Headings

Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất.

<h6> xác định heading nhỏ nhất

<h1>Đây là heading</h1>






Thuộc tính:

Align = “Cách canh lề”

Left: trái ; center: giữa ; right: phải ; justify: đều

Ví dụ: Canh giữa dòng chữ: Chào các bạn

<h1 align = “Center”> Chào các bạn </h1>

HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

2. Đoạn văn - paragraphs

Paragraphs được định dạng bởi thẻ <p>

<p>Đây là đoạn văn</p>

<p>Đây là một đoạn văn khác</p>

Thuộc tính:

Align = “Cách canh lề”

Left: trái ; center: giữa ; right: phải ; justify: đều

Ví dụ: Canh phải dòng chữ: Ngôn ngữ lập trình

<p align = “Right”> Ngôn ngữ lập trình </p>

3. Line Breaks - xuống dòng

Thẻ <br> được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn bắt đầu

một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn viết nó.

<p>Đây <br> là một đo<br>ạn văn với thẻ xuống hàng</p>

Thẻ <br> là một thẻ trống, nó không cần thẻ đóng dạng </br>

4. Lời chú thích trong HTML

Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML.

Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích để giải

thích về code của bạn, để sau này bạn có phải quay lại chỉnh sửa gì thì cũng dễ nhớ

hơn.





5. Khoảng cách (&nbsp)

Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang web là 1

khoảng cách duy nhất

Để gõ một số ký tự đặc biệt ta phải sử dụng mã:

Mục Thẻ Diễn giải Ví dụ

6. <b> </b> Định chữ đậm <b> MS Office 2003 </b>

7.<i> </i>

Định chữ nghiêng

<i> echip </i>

8.<u> </u>

Định chữ gạch dưới

<u> Giai dap tin hoc </u>

9. <sup> </sup> Chỉ số trên <b>A<sup>2</sup>B A2B

10. <sub> </sub> Chỉ số dưới <b>H<sub>2</sub>O H2O

11.

<font> </font>

Định font chữ. Thẻ này có thuộc tính- face: tên font- size: cỡ font- color: màu

<font face= “Arial” size= “2”> Tu dien Lac Viet </font>(Định font chữ Arial có kích thước 2 (10pt)

12.

<hr>

Thêm dòng nằm ngang trong văn bản. Thẻ này có thuộc tính

<hr color= “Red” size= “1” align= “left”>(Vẽ đường màu xanh, cao 1 pixel, canh trái)

13.

<img>Chèn ảnh vào văn bản. Không có thẻ đóng

<img src=“echip.jpg” width=“130” height= “60”>(src chứa đường dẫn của tập tin ảnh. Trường hợp tập tin ảnh nằm cùng thư mục chứa trang web thì chỉ cần tên tập tin ảnh. Ảnh có độ rộng 130 pixel, cao 60 pixel.)

14.

<ul> </ul>Tạo danh sách liệt kê, dùng với thẻ <li> </li>

<ul> <li>Mcrosoft Word 2003 </li> <li>Mcrosoft Excel 2003 </li></ul>

15.

<ol> </ol>

Tạo danh sách liệt kê có đánh số thứ tự, dùng với thẻ <li> </li>

<ol> <li>Tin hoc can ban </li> <li>Tin hoc van phong </li></ol>



16.

<a> /<a>

Tạo một liên kết đến một trang khác hoặc đoạn văn bản khác. Giữa cặp thẻ này có thể là đoạn văn bản hoặc ảnh được gọi là phần hiển thị. Đường dẫn chỉ ra nơi chuyển đến khi liên kết (phần hiển thị) được gọi là phần ẩn

<a href=“http://www.pcworld.com.vn”>PC World Viet Nam </a>(Tạo liên kết trên đoạn văn bản, phần hiển thị là “PC World Viet Nam”, phần ẩn là href=”http://www.pcworld.com.vn”. Khi người dùng bấm lên liên kết “PC World Viet Nam” sẽ được chuyển đến trang chủ của PCWorld Việt Nam.<a href=”http://www.echip.com.vn”><img src = ”echip.jpg” width = ”130” height =”60”> </a>(Tạo liên kết trên một ảnh, phần hiển thị sẽ là ảnh trong thẻ <img>, phần ẩn là href=”http://www.echip.com.vn” khi người dùng bấm lên liên kết này thì sẽ được chuyển đến địa chỉ trang echip.

Để minh họa cho phần giới thiệu các thẻ dùng trong tài liệu HTML, bạn hãy xem cấu

trúc tài liệu HTML sau (Dùng Notepad tạo tập tin có cấu trúc như dưới đây và lưu lại với tên

vidu2.htm.

Ví dụ 2: tập tin vidu2.htm có nội dung như sau

<html>

<head>

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>San pham Microsoft</title>

</head>

<body>

<h3 align="left"><font face="Arial">SAN PHAM MICROSOFT</font></h3>

<ol>

<li><font face="Arial" size="2">MS Office2003:</font></li>

</ol>

<ul>

<li><font face="Arial" size="2">Microsoft Word 2003</font></li>

<li><font face="Arial" size="2">Microsoft Excel 2003</font></li>

<li><font face="Arial" size="2">Microsoft Access 2003</font></li>

<li><font face="Arial" size="2">Microsoft PowerPoint 2003</font></li>

<li><font face="Arial" size="2">Microsoft FrontPage 2003</font></li>

</ul>

<ol>

<li value="2">Windows XP, Windows Server 2000, Windows Server 2003.</li>

<li>Web server: IIS (Internet Information Server).</li>

<li>Ngon ngu kich ban phia trinh chu: ASP (Active Server Page).</li>

</ol>

<hr color="Green" size="1" align="left">



<p><i><b><font color="blue">Mot so lien ket:</font></b></i></p>

<p><a href="http://www.echip.com.vn"><img border="0" src="echip.jpg"></a>

<a href="http://www.echip.com.vn">Echip</a> Tuan tin cong nghe thong tin</p>

<p><a href="http://www.pcworld.com.vn">

<img border="0" src="logoPCW.gif" width="260" height="64"></a>

<a href="http://www.pcworld.com.vn">PCWorld Vietnam</a></p>

</body>

</html>

Nội dung được hiển thị trên trình duyệt như hình 2.2:

Hình 2.2 Sử dụng kết hợp các thẻ trên trình duyệt

17. Bảng

HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô mới chứa dữ

liệu của bảng.

Các thẻ:

17.1 Tạo bảng: <table>…</table>: Mỗi bảng chỉ có 1 cặp thẻ này.

17.2 Tạo dòng: <tr>…</tr>: Bảng có bao nhiêu dòng thì có bấy nhiêu cặp thẻ này

17.3 Tạo ô:

Ô tiêu đề của bảng: <th>…</th>

Ô dữ liệu: <td>…</td>



Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có bao nhiêu ô thì có bấy nhiêu thẻ

<td> và/hoặc <th> nằm trong cặp thẻ <tr>…</tr> tương ứng

Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là:

17.4 <table>

- border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): không có đường viền.

- width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có thể đặt theo 2 cách:

- n: (n là số) Quy định độ rộng, cao là n pixels

- n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứa bảng.

- cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp

- cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô

- bgcolor=“màu”: màu nền của bảng

- background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng đường

dẫn tương đối nếu có thể

17.5 <td>,<th>

- bgcolor=“màu”: màu nền của ô

- background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. Nên sử dụng đường dẫn

tương đối nếu có thể.

- width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt theo 2 cách:

- n: (n là số) Quy định độ rộng, cao là n pixels

- n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.

- align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang: left, right, center,

justify.

- valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo chiều đứng: top, middle,

bottom.

- colspan=“số”: số cột mà ô này chiếm (mặc định là 1)

- rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1)

- nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng

17.6 Ví dụ

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>


</tr>



<tr>



</tr>

</table>

Sẽ hiển thị trên màn hình:

Heading Another Heading

row 1, cell 1 row 1, cell 2


Cột trống trong bảng

Cột trống không có nội dung thì không được hiển thị

<table border="1">

<tr>



</tr>

<tr>


<td></td>

</tr>

</table>

Nó sẽ có dạng thế này trên trình duyệt


row 2, cell 1

Bạn chú ý rằng đường biên bao quanh cột trống bị mất (nhưng trong trình duyệt Mozilla

Firefox nó sẽ hiển thị đường biên)

Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó,

để làm cho đường biên của nó được hiện thỉ.

18. Những ký tự đặc biệt



Kết quả Loại Tên của ký tự Số

một khỏang trắng

< nhỏ hơn < <

> lớn hơn > >

& dấu và & &

" ngoắc kép " "

' ngoặc đơn ' (does not work in IE) '

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

§ Section § §

© Copyright © ©

® registered trademark ® ®

× Nhân × ×

÷ Chia ÷ ÷

III. HTML FORM

Để cho phép giao tiếp giữa client (trình duyệt) và Web server (như IIS) tốt hơn. HTML

chuẩn được thêm vào các Form và các thành phần điều khiển. Một Form là phần trang web mà

ở đó người dùng có thể nhập thông tin (nhập văn bản, chọn lựa tùy chọn từ danh sách thả

xuống, chọn hộp kiểm hoặc nút radio, …) hoặc thực hiện đặt hàng trên mạng, hay cho phép

người dùng chỉ ra các điều kiện chọn lựa cho các thông tin nhận được từ CSDL,…Những thành

phần điều khiển này dùng thể hiện hoặc chấp nhận thông tin từ Form. Giá trị các thành phần

điều khiển này được gửi đến server thông qua trình duyệt, chúng được xử lý bởi ứng dụng

hoặc script (ngôn ngữ kịch bản) trên Web Server.

HTML cung cấp các thành phần điều khiển sau:

Text: Là hộp văn bản chấp nhận một dòng văn bản duy nhất

TextArea: Là hộp văn bản chấp nhận nhiều dòng văn bản

Radio: Là nút hình tròn có thể chọn hoặc không chọn

CheckBox: Là hộp kiểm có thể chọn hoặc không chọn để chỉ ra một sự lựa chọn

Password: Là hộp văn bản như Text, nhưng không hiển thị ký tự nhập (chỉ hiển thị dấu

* hoặc dấu ).

Select: Là danh sách chọn lựa cho phép chọn một hoặc nhiều giá trị

Button: Là nút lệnh.

Submit: Là nút lệnh dùng để gửi thông tin từ Form tới Web server

Reset: Là nút lệnh dùng để xóa hết thông tin các thành phần điều khiển trên Form



Trước khi đặt bấy kỳ thành phần điều khiển nào lên trang web, bạn phải tạo một Form

bằng cặp thẻ <Form> </Form>. Tất cả thành phần điều khiển phải nằm trong cặp thẻ này:

<FORM NAME = “myForm”>

{thành phần điều khiển đặt ở đây}

</FORM>

NAME là thuộc tính tên của Form, dùng để nhận ra Form. Thuộc tính này là tùy chọn.

Ngoài thuộc tính NAME, thẻ <FORM> còn chấp nhận thuộc tính METHOD và ACTION

để quyết định cách dữ liệu được chuyển về Web server và cách dữ liệu được xử lý. Thuộc tính

METHOD có 2 giá trị là POST và GET. Nếu dùng POST thì dữ liệu gửi đến Web server nằm

trong HTTP header. Nếu dùng GET thì dữ liệu gửi đến Web server sẽ được nối vào đường dẫn

URL của trang đích.

Thuộc tính ACTION chỉ ra trang đích chứa mã xử lý dữ liệu trên Web server (ngôn ngữ

kịch bản phía trình chủ-ASP).

Ví dụ: để chỉ ra rằng nội dung của Form sẽ được gửi tới Web server thông qua HTTP

header và được xử lý bởi mã trong trang ReadValue.asp, ta dùng thẻ <FORM> như sau:

<FORM NAME=“myForm” METHOD=“POST” ACTION= “ReadValue.asp”>

Khi người dùng bấm vào nút Submit thì nội dung của Form sẽ được gửi tới Web server,

Web server sẽ thực thi trang ReadValue.asp để xử lý dữ liệu nhận được.

1. Điều khiển Text

Là hộp văn bản nhận dữ liệu nhập bởi người dùng như tên, địa chỉ hay bất cứ dạng văn

bản nào.

Để đưa điều khiển này vào trang web, bạn dùng thẻ INPUT với thuộc tính TYPE = TEXT như

sau:

<INPUT TYPE=“TEXT” NAME=“NXB” SIZE=45 MAXLENGHT=30 VALUE=“Minh Khai>

Dòng trên sẽ hiển thị hộp văn bản có tên “NXB” trên trang web, có giá trị khởi đầu là

“Minh Khai”, kích thước là 45, số ký tự tối đa là 30.


<html>

<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Nha xuat ban</title>

</head>

<body>

<form method="POST" action="" >

<p><font face="Arial" size="2">Nhà xuất bản:</font>

<input type="text" name="NXB" size="35" value="Minh Khai"

maxlength="30"></p>



<p><input type="submit" value="Submit" name="B1"><input type="reset"

value="Reset" name="B2"></p>

</form>

<p></p>

</body>

</html>

Trình duyệt sẽ hiển thị như hình 2.3

Hình 2.3 Minh họa điều khiển Text

Để đọc giá trị của điều khiển “NXB” ta dùng mã sau (gán vào biến PubName):

PubName = Request.Form(“NXB”)

2. Điều khiển TextArea

Cung cấp cho người dùng một điều khiển chấp nhận nhiều dòng văn bản, tương tự như

Text, để đặt điều khiển này vào Form ta dùng như sau:

<TEXTAREA name= “Ghichu” rows =“5” cols=“30”> </TEXTAREA>

Tạo ra hộp văn bản có tên “Ghichu”, hiển thị trên 5 dòng, 30 cột.

Để khởi tạo giá trị ban đầu cho điều khiển này ta dùng:

<TEXTAREA name= “Ghichu” rows =“5” cols=“30”>

Toi dang tim hieu ve HTML

</TEXTAREA>

3. Điều khiển Radio

Để đưa nút Radio vào Form, ta dùng thẻ INPUT với thuộc tính TYPE=radio:

<INPUT TYPE = “radio” name = “gioitinh” value = 1>

Tạo ra một nút radio có tên “gioitinh” và giá trị là 1. Để tạo danh sách các nút chọn lựa thuộc

tính cùng nhóm, ta đưa thêm nút vào:

<INPUT TYPE = “radio” name = “gioitinh” value = 1> Nam

<INPUT TYPE = “radio” name = “gioitinh” value = 0> Nữ

Để khởi tạo một nút được chọn trước, ta thêm thuộc tính CHECKED:

<INPUT TYPE = “radio” name = “gioitinh” value = 1 checked> Nam

<INPUT TYPE = “radio” name = “gioitinh” value = 0> Nữ



Muốn đọc giá trị của radio được chọn, ta thực hiện trong mã (ngôn ngữ kịch bản trình chủ-ASP)

như sau:

Gtinh = Request.Form(“gioitinh”)


<html>

<head>



<title>Xuat ban</title>

</head>

<body>

<p>Giới tính:</p>

<form method="POST" >

<p><input type="radio" value="1" name="gioitinh" checked>Nam

<input type="radio" name="gioitinh" value="0">Nữ</p>



</form>

</body>

</html>

Trình duyệt hiển thị như hình 2.4:

Hình 2.4 Minh họa cách dùng nút radio

4. Điều khiển Checkbox

Nút Checkbox được dùng để thể hiện một danh sách cho phép chọn một hoặc nhiều tùy

chọn. Để đưa Checkbox vào Form ta dùng thẻ INPUT với thuộc tính TYPE = CHECKBOX như

sau:

<INPUT TYPE = “checkbox” name = “c1”>

Để hộp kiểm tra được chọn lúc khởi đầu ta dùng thuộc tích Checked như sau:



<INPUT TYPE = “checkbox” name = “c1” checked>

Cách đọc giá trị của checkbox như sau:

if Request.Form(“c1”) = “ON” then

Msg = “Bạn đã chọn hộp kiểm c1”

end if


<html>

<head>



<title>Sở thích của bạn</title>

</head>

<body>

<form method="POST" action="">

<p><b>Sở thích của bạn:</b></p>

<p><input type="checkbox" name="ST1" value="ON">Xem phim<br>

<input type="checkbox" name="ST2" value="ON">Nghe nhạc<br>

<input type="checkbox" name="ST3" value="ON">Chơi game<br>

<input type="checkbox" name="ST4" value="ON">Dã ngoại</p>



</form>

</body>

</html>



Trình duyệt hiển thị tập tin vidu5.htm như hình 2.5:

Hình 2.5 Minh họa cách sử dụng nút checkbox

5. Điều khiển Password

Điều khiển này giống như điều khiển Text nhưng nó không hiển thị ký tự người dùng

nhập vào, thay vào đó nó chỉ hiển thị ký tự dấu sao (*). Điều khiển này thường dùng cho mục

đích nhận mật khẩu người dùng:

<INPUT TYPE = “passsword” name = “mkhau” size=20 maxlenght=25>

6. Điều khiển Select

Điều khiển này là một danh sách thả xuống, cho phép người dùng chọn lựa tùy chọn

trong danh sách. Để đưa vào Form ta dùng thẻ <SELECT> </SELECT> như sau:

<SELECT name = “equips” size = 3 multiple> </SELECT>

Để tạo danh sách tùy chọn ta dùng thẻ OPTION trong thẻ SELECT:

<SELECT name = “equips” size = 3 multiple>

<OPTION value = “cpu”> CPU </OPTION>

<OPTION value = “mainboard”> MAINBOARD </OPTION>

<OPTION value = “dvd”> DVD </OPTION>

<OPTION value = “ram”> RAM </OPTION>

<OPTION value = “hdd”> HARD DISK </OPTION>

<OPTION value = “monitor”> MONITOR </OPTION>

</SELECT>

Danh sách trên có 6 tùy chọn, cho phép người dùng chọn nhiều giá trị cùng lúc, có 4 tùy

chọn được hiển thị trong danh sách.



Để đọc giá trị của tùy chọn trong danh sách , ta cần làm như sau:

lkiens = Request.Form(“equips”)

Giá trị của điều khiển SELECT chính là giá trị của các tùy chọn được chọn.


<html>

<head>



<title>Linh kiện</title>

</head>

<body>

<form method="POST" action="">

<p><b>Linh kiện:<br>

</b><select size="4" name="equips" multiple>

<option value="CPU">CPU</option>

<option value="Mainboard">Mainboard</option>

<option value="ASUSDVD">ASUS DVD</option>

<option value="RAMKMax">RAM KingMax</option>

<option value="HDD">Hard Disk</option>

<option value="Monitor">Monitor</option>

</select></p>

<p><b>Thời gian bao hành:</b><br>

<select size="1" name="years">

<option value="1">1 năm</option>



</select></p>



</form>

</body>

</html>




Hình 2.6 Minh họa cách sử dụng lựa chọn select

7. Nút Submit và Reset

Có 2 kiểu nút ta có thể đặt trên Form. Nút quan trọng nhất là nút Submit dùng để chuyển

dữ liệu (giá trị của các thành phần điều khiển trên Form) về web server. Nút Reset dùng để thiết

lập giá trị của các điều khiển về giá trị ban đầu.

Để đặt nút Submit lên Form ta dùng thẻ INPUT với thuộc tính TYPE=SUBMIT:

<INPUT TYPE = SUBMIT name = “submit” VALUE = “Dang Ky”>

Nút Submit có tên “submit”, chữ “Dang ky” hiển thị trên nút Submit

Để đặt nút Reset trên Form :

<INPUT TYPR RESET value = “Huy bo”>

Ví dụ 7: tập tin vidu7.htm sử dụng kết hợp các điều khiển được trình bày sau

<HTML>

<head>


</head>

<body>

<FORM NAME=Personal ACTION=ReadParameters.asp METHOD=POST>

<FONT FACE="Arial" size="2"><b>Tên tài khoản:</b></font>

<INPUT NAME=username SIZE=25>

<FONT FACE="Arial" size="2">

<b>Mật khẩu:</b></font>

<INPUT TYPE=password NAME=password SIZE=25 maxlength="20">

<BR>

<BR>




<b>Giới tính:</b></font><INPUT TYPE=Radio NAME=Sex VALUE=Male>

<font size="2" face="Arial">Nam</font>

<INPUT TYPE=Radio NAME=Sex VALUE=Female>

<FONT FACE="Arial" size="2">Nữ</font>

<BR>

<BR>


<b>Học lực:</b></font></TD>

<SELECT NAME=education size="1">

<OPTION VALUE="invalid">Chọn mức học lực <br>

<OPTION VALUE="HSchool">Trung Học<br>

<OPTION VALUE="College">Cao Đẳng <br>

<OPTION VALUE="University">Đại Học

</SELECT>

<BR>

<BR>

<TD VALIGN=TOP><font face="Arial" size="2"><b>Sở thích: </b> </font> <br></TD>

<TD VALIGN=TOP>

<INPUT TYPE=CheckBox NAME=Books value="1"><font face="Arial" size="2">Đọc

sách</font><br>

<INPUT TYPE=CheckBox NAME=Music value="2"><font face="Arial" size="2">Nghe

nhạc</font><br>

<INPUT TYPE=CheckBox NAME=Movies value="3"><font face="Arial" size="2">Xem

phim</font><br>

<INPUT TYPE=CheckBox NAME=Cooking value="4"><font face="Arial" size="2">Nấu

ăn</font><br>

</TD>

<BR><BR>

<INPUT TYPE=submit name=submit value="Dang Ky" >

<INPUT TYPE=reset value="Huy">

</body>

</HTML>




Hình 2.7 Minh họa việc kết hợp các thành phần điều khiển trên Form



Chương 3: SỬ DỤNG PHẦN MỀM FRONTPAGE 2003

Microsoft FrontPage là ứng dụng để tạo nên những trang web hay những web site. Qua

đó người dùng không cần quan tâm đến ngôn ngữ HTML. Cách soạn thảo FrontPage cũng gần

giống như trong Microsoft Word nhưng nó có nhiều tính năng hơn trong việc thiết kế một web

site. FrontPage 2003 là phiên bản mới của Microsoft và là một phần mềm khá thân thiện với

những người làm công việc thiết kế, biên tập trang Web. Nếu bạn đã sử dụng FrontPage 2000

thì bạn sẽ dễ dàng hơn với FrontPage 2003. Về nguyên tắc thì FrontPage 2000 và FrontPage

2003 giống nhau, nhưng FrontPage 2003 có những cải tiến đảm bảo cho việc thiết kế và quản

lý trang Web bạn đơn giản và dễ dàng.

Giới thiệu màn hình FrontPage 2003

I.

I. TẠO WEBSITE

Website là một tập hợp các trang Web có liên quan với nhau. Trên mỗi Website luôn có

một trang Web được gọi là trang chủ. Trang chủ là trang được người sử dụng nhìn thấy đầu

tiên khi truy cập vào WebSite. Từ trang chủ có thể truy cập đến các trang Web khác trên cùng

một site hay các site khác nhau thông qua các liên kết.Ngoài trang chủ, một Websiote còn có

các trang Web khác, thường được gọi là các trang con. Một trang con có thể liên kết với trang


Cấu trúc thư mục của website

Các trang web

Vùng thiết kế


chủ, có thể liên kết với các trang con khác trong cùng Website. Thông thường các trang con có

các liên kết đến các trang con khác dưới nó. Bạn có thể tạo Website trên máy tính của bạn, sau

đó đưa lên một máy dùng để cung cấp các trang Web cho những người truy cập gọi là máy

chủ. Máy chủ thường kết nối với Internet hoặc Intranet.

1. Cấu trúc một Website

Một Website thông thường được tổ chức như sau:

hoặc

Trong đó:

NGUYEN.VAN.XUAN: Thư mục gốc của cấu trúc Website với các thành phần con gồm:

images: Thư mục chứa các hình ảnh sẽ thể hiện trong các trang web.

HTML: Thư mục chứa các trang web của cấu trúc website

index.htm: Trang chủ của cấu trúc Website đó.

monhoc.htm va trangThu_N.htm: Các trang con của cấu trúc Website.

Do vậy, khi tạo cấu trúc Website bạn nên tổ chức chúng theo cấu trúc trên, qua đó bạn có

thể quản lý chúng một cách dễ dàng.

2. Cách tạo Website

Để tạo một Website, công việc đầu tiên của bạn là xác định mục đích Website, tiếp đến

bạn phải xác định các trang web cần thiết. Trong môi trường FrontPage, có ba cách để tạo một

Website:

Sử dụng Wizard

Sử dụng Template.

Tạo mới một Website ngay từ đầu.

2.1 Sử dụng Wizard để tạo Website

Nếu bạn muốn tạo một Website phức tạp, bạn nên sử dụng các Wizard của FrontPage. Mỗi

Wizard cho phép bạn tạo một dạng Website khác nhau dựa trên những thông tin do bạn cung

cấp.

Corporate Presense Wizard: dùng để tạo Website cho một công ty.

Discussion Web Wizard: dùng tạo Website thảo luận.

Import Web Wizard: dùng để tạo Website dựa trên một Website đã có. Nếu muốn, bạn

có thể thay đổi các trang web hay cấu trúc của Website.



2.2 Tạo một web site dựa trên một web đã có

Vào menu File. chọn new, xuất hiện:

Hộp thoại New Page or Web hiển thị.

Click chọn More Web Site Templates...

Hộp thoại More Web site templates hiển thị:

Click chọn Import

Web Wizard

Nhập tên thư mục

chứa tập tin Web trong

ô Specify the location

of the new web

Click OK

Hộp thoại Import Web Wizard - Choose Source hiển thị.



Click chọn From a souce directory of files on a local computer or network

Nhập tên thư mục cần sử dụng trong Website Location

Click chọn mục Include subsite

Click Next

Xuất hiện bảng

Click Finish



FrontPage tạo một Website mới và đặt các tập tin sẽ tạo ra trong thư mục bạn đã chọn

.



2.3 Tạo một Website mới

- Mở Microsoft FrontPage 2003. Nếu Ô Tác Vụ New không mở , bạn chọn File > New > Ô

Tác Vụ New sẽ mở ra .

- Nhấp Mục : More Web Site Templates > Hiện ra Bảng Web Site Templates , chọn biểu

tượng : One Page Web site (hình 3.1)

Hình 3.1

FrontPage (FP) cung cấp cho bạn 1 Folder chứa các Websites của bạn, có tên là My

Web Sites . Folder nầy nằm trong Folder My Documents . Website của bạn tạo ra cần

phải đặt tên cho nó và chọn vị trí cho nó.

- Trong vùng Options, nhấp

nút Browse Bảng New Web

Site Location xuất hiện, trên

Look in chọn ổ đĩa và thư mục

chứa website,



- Trên thanh công cụ của Bảng New Web Site Location, nhấp Nút Create New Folder

Bảng New Folder hiện ra, nhập tên website ví dụ: OnePage trong hộp nameOk. (Hình 3.2).

Hình 3.2

- Trong Bảng New Web Site Location, nhấp Open .

Trong Bảng Web Site Templates, nhấp Ok (Hình 3.3).

Hình 3.3

FP hiện ra cấu trúc của Website MỘT TRANG (ONE PAGE) mới được tạo ra.

Website OnePage bao gồm :

1 File có tên : index.htm.

1 Folder trống ( chưa có chứa dữ liệu ) có tên : _private.

1 Folder trống ( chưa có dữ liệu ) có tên : images.

Ý nghĩa của các mục trong bảng Web site Templates:

One Page Web: web site có 1 trang chủ (index.htm).

Corporate Presense Wizard : Dùng để tạo web site cho công ty.

Discussion Web Wizard : Dùng để tạo web site thảo luận.

Import Web Wizard : Dùng để tạo web site trên một web site đã có trên

máy của ta hay máy chủ.



Customer Support Web : Là web cho phép công ty trả lời khách hàng và

tiếp nhận ý kiến đóng góp của khách hàng.

Project Web : Là web site chp phép chia sẻ thông tin về một dự án với các

thành viên tham gia dự án.

Personal Web : Là web site cho phép biểu thị các thông tin về cá nhân.

Empty Web : Tự tạo một cấu trúc web site từ đầu chưa có gì. Khác với

cách tạo web site bằng wizard, với cách tạo này sẽ không có trang web nào được

định sẵn trong cấu trúc web site do vậy ta phải tự tạo các trang web cho chúng bằng

cách Right click tại folder cần tạo trang web và chọn New Page. Sau đó đặt tên cho

trang web này. Thực hiện tương tự để tạo thêm các trang khác cho cấu trúc web

site.

Ta có thể tùy chọn các mục trong cửa sổ của web site sau đó chọn OK. Trừ mục One

Page Web và Empty Web ta phải tự làm lấy từ đầu, Các mục còn lại thì chúng ta được trình

Wizard của FrontPage làm cho ta và ta chỉ chọn các chọn lựa theo ý mình sau đó nhấn nút

“Next” nhiều lần cho đến khi nhấn nút “Finish” để kết thúc quá trình tạo web site.

Lúc này FrontPage tạo một web site mới và đặt các tập tin sẽ tạo ra trong thư mục đã

chọn như (hình 3.4)

Hình 3.4

Tuy nhiên nếu quan sát Folder của Site trong Microsoft Windows Explorer, bạn sẽ thấy nhiều

Files và Folders (Một số bị ẩn) hổ trợ cho trang nầy.

Trong Folder List ( Cột Trái ), nhấp đúp File: index.htm Đã mở Chế độ hiển thị Page là một

Khung nền trống, bạn sẽ tạo ra nội dung trên đó.

2.4 Tạo mới một trang Web

Trong FrontPage có nhiều cách tạo mới một trang Web, tùy mỗi chế độ khác nhau thì cách tạo

mới trang web cũng có các bước khác nhau.

2.4.1 Tạo mới trang Web trong chế độ Page View

Ở chế độ này khi tạo mới trang Web, FrontPage sẽ cung cấp các mẫu trang web được định

sẵn, bạn có thể chọn các mẫu đó để tạo trang web cho bạn hay chọn Normal Page để tạo trang



Web trắng. Cách thực hiện:

Trước tiên, bạn phải chuyển màn hình

FrontPage sang chế độ xem Page bằng

cách click vào biểu tượng Page trên

thanh Views.

Vào menu File, chọn New

Trong hộp thoại New Page or Web,

click chọn More page Templates.

Xuất hiện bảng Page Templates (hình 3.5)

Hình 3.5 Trong hộp thoại Page Templates.

Click chọn lớp General, chọn trang web mẫu bạn cần.

Bạn có thể xem hình thức trang web mẫu trong khung Preview



Click OK để chấp nhận

Với chế độ này, bạn cần lưu lại trang web vừa tạo bằng cách click nút Save trên thanh công

cụ. Trong hộp thoại Save As, nhập tên tập tin trong ô File name. Click nút Save để lưu

trang Web mới vào Website.

2.4.2 Tạo mới trang Web trong chế độ Navigation hay Folder List

Ở hai chế độ này khi tạo mới trang Web thì FrontPage sẽ tạo ra trang trắng, trang đó mặc

định được gắn vào cầu trúc Website hiện hành. Cách thực hiện:

Vào menu File, chọn New, chọn Normal Page

Lúc này FrontPage sẽ tạo ra một trang trống. Bạn đặt tên cho trang Web này thì vào

File Save. Nếu bạn chọn chế độ Navigatior thì trang Web vừa tạo sẽ đưa vào sơ đồ Web

dưới dạng cây.

3. Đưa các trang Web có sẵn vào một website

Vào menu File, chọn Import

Hộp thoại Import hiển thị

Click chọn Add File: để chọn trang Web hay các tập tin cần chèn vào Website.

Add Folder: chèn cả thư mục chứa các trang web hay các tập tin vào Website.

Click OK để chấp nhận.

Click Save



trên thanh công cụ để lưu lại những thay đổi.



4. Xóa một trang Web

Click chọn mục Folders trên thanh

công cụ chuẩn

Right Click vào trang muốn xóa

Chọn Delete

Trang bạn chọn xóa sẽ được xóa

khỏi Website.

5. Mở trang web

Trong FrontPage có 02 cách mở trang web khác nhau, tùy mỗi chế độ mở khác nhau mà

FrontPage sẽ hiển thị khác nhau.

5.1 Mở trang web trong cấu trúc web site:

- Click File\Open Web hoặc nhấn phím Ctrl+O

- Trong hộp thoại Open Web chọn ổ đĩa và thư mục chứa web site muốn mở trong khung

“Look in”. Click Web site muốn mở và click Open.

- Vào menu View, chọn Folders List.

- Trang danh sách Folder, Double vào tập tin muốn mở, khi đó trang web sẽ được thể

hiện trên màn hình phải.

5.2 Mở trang web bất kỳ

- Chuyển về chế độ xem Page

- Chọn File\Open

- Trong hội thoại Open chọn ổ đĩa và thư mục chứa file muốn mở trong khung “Look in”,

chọn file muốn mở và click Open. Lúc này các thể hiện của trang web đó được thể hiện.

6. Đóng trang web

Trên menu File, click Close hoặc nhấn tổ hợp phím Ctrl+F4.

7. Tổ chức web site

Chính là việc định lại cấu trúc của tổ chức web site đó. Ứng với mỗi trang web trong cấu

trúc web sẽ tương đương với cấu trúc trong tổ chức web site. Do vậy việc tổ chức web site sẽ

làm cho nó rõ ràng và dễ hiểu. Sau khi Import các trang web vào web site. Cách làm như sau:

- Click biểu tượng Navigation trên thanh Views để chuyển sang chế độ cây.

- Click chọn trang web cần đưa vào cấu trúc

- Drag vào màn hình Navigation bên phải thể hiện dưới dạng hình cây.

Khi muốn trang đưa vào nằm dưới cấp của trang kia (trang này đã tạo cây), bạn chỉ drag

trang đó xuống dưới trang cần tạo.



II. Các thao tác chính trong Front Page

1. Đặt nền trang

Nền của một trang web được xây dựng bởi

một trong ba cách chọn là: từ một file ảnh, áp

một Theme, áp nền của một trang ưa thích khác.

1.1 Từ một file ảnh

- Bạn có thể thiết lập nền của trang web bằng

cách chọn một file ảnh làm mẫu nền và copy về

thư mục làm việc.

- Nhấn phải chuột trên nền soạn thảo, chọn

Page Properties\Formatting (hình 3.6), sau đó

đánh dấu kiểm mục Background picture và gõ tên

file ảnh.

1.2 Áp một Theme vào trang

Theme là một số mẫu trang web làm sẵn có trong FrontPage. Nó gồm kiểu nền trang,

kiểu font chữ, một số các ảnh gif thường dùng…Ta có thể áp đặt một mẫu Theme vào trang

web của mình. Chúng ta cũng có thể bổ sung thêm những mẫu trang web ưu thích vào danh

sách Theme để dùng sau này. Cách dùng Theme:

Chọn Format\Theme\ đánh dấu vào hộp Select a theme, chọn mẫu Theme ưu thích.

2. Định dạng Font

Giống như các trình ứng dụng soạn thảo văn bản khác, FrontPage cũng hỗ trợ việc định

dạng font chữ cho một tài liệu trang web.

2.1 Định dạng font chữ cho toàn bộ tài liệu

- Trong màn hình Normal của trang web, nhấn phải chuột, chọn Page properties\

Advanced\Body Style\Format\Font\. . .

- Chọn font chữ, cỡ chữ (size). Chọn OK để chấp nhận

2.2 Định dạng Font cho đoạn văn bản

- Chọn đoạn văn bản

- Chọn Format\Font

- Chọn font chữ và cỡ chữ (size). Chọn OK

3. Các thao tác cắt, dán, sao chép

(Giống như phần mềm soạn thảo Microsoft Word)

4. Cách tạo âm thanh nền

Trước hết bạn phải chọn được một file âm thanh nền ưa thích (thường có

đuôi .Wav, .Mid, .Ram, .Au) rồi thao tác như sau:

- Nhấn nút phải chuột

- Chọn Page properties\General

- Tại hộp Location gõ tên file âm thanh hoặc nhấn nút Browse để tìm file âm thanh.


Hình 3.6


- Để chơi liên tục bạn đánh dấu kiểm tại Forever. Ngược lại, muốn chơi một số lần

file âm thanh này bạn chọn số lần chơi trong hộp Loop.

5. Chèn video vào trang web

Để làm sáng tỏ nội dung cần trình bày, hay để quảng cáo cho sản phẩm nào đó người ta

thường chèn các đoạn video vào trang web. Cách chèn như sau:

- Chọn vị trí cần chèn video.

- Vào Insert\Picture\Video

- Chọn thư mục chứa tập tin video

- Chọn OK

Để thay đổi đặc tính của video:

- Chọn hình video trên trang web

- Nhấn phải chuột\chọn Picture properties. Hộp thoại picture properties hiện

- Mục Video source: cho phép thay đổi tên tập tin video

- Mục Repeat: Cho phép thiết lập số lần chạy cho file video tại hộp Loop, có thể chọn

Forever cho phép chay liên tục trong quá trình mở trang web đó. Chọn thời gian dừng giữa các

lần lặp trong hộp Loop delay.

- mục start: chọn chế độ mở file video:

+ On file open: Mở file video khi mở trang web

+ On mouse over: mở file video khi đưa trỏ chuột đến đối tượng đó.

6. Dùng Plug-In để đưa âm thanh và

Video vào trang web

Một đặc điểm không thể thiếu trong

FrontPage đó là dùng Plug-In để đưa file

âm thanh và Video vào trang web. Với

phương thức này người dùng có thể điều

khiển file âm thanh hay Video. Cách thực

hiện như sau:

Vào Insert\Web Component\Advanced

Control\Plug-In

- Trong hộp thoại Plug-In Properties. chỉ đường dẫn đến file âm thanh hay video

trong khung Data source. Có thể nhấp nút Browse để tìm file

- Chọn OK

III. Xây dựng bảng trong trang web

Bảng là loại văn bản rất thường gặp trong các trang web. Không phải khi nào trong trang

web cần một bảng biểu thì bạn mới xây dựng mà xây dựng bảng còn cho phép bạn bố trí thông

tin rất gọn gàng và có thẩm mỹ cho trang web.

Bảng trong FrontPage được trang bị khá phong phú các công cụ để phục vụ về bảng cho

phép chúng ta tạo một bảng hết sức đẹp mắt, như có nhiều mẫu đường kẻ, nổi hoặc chìm, đồ



dày đường kẻ tùy ý, làm nền bảng bởi một ảnh nào đó, đặt thuộc tính riêng cho một số ô nào

đó. Trong một ô nào đó ta lại có thể kẻ một bảng khác nằm trong ô này. . .

1. Tạo một bảng

* Cách 1:

Chọn Table\Draw Table : vẽ tự do

* Cách 2:

Chọn Table\Insert\Table

Sau đó chọn số dòng (Rows) và số cột (Columns)

2. Kẻ các đường trong bảng

Chọn Format\Borders and Shading

3. Trộn ô, chia nhỏ một ô

- Trộn ô : Chọn các ô cần trộn, chọn Table\Merge cells

- Chia ô : Chọn ô cần chia, chọn Table\Split cells

IV. Frame

1. Giới thiệu

Khung (Frames) là trang HTM hay HTML, trang này chia cửa sổ của trình duyệt web

thành những cửa sổ con. Ứng với mỗi cửa sổ con sẽ liên kết đến một trang HTML hay một hình

ảnh khác. Như vậy việc tạo frame chính là tạo trang HTM mà trong đó có dùng cấu trúc lệnh

HTML để chia cửa sổ của trình duyệt web. Mục đích của frame là làm cho một web site trở nên

dễ xem và dễ truy cập hơn. Nhưng cũng đừng quá lạm dụng sẽ làm cho trang web thêm rắc

rối, khó nhìn.

2. Tạo Frames

- Chọn File\New\More Page Templates. . .\Frames Pages

- Trong hộp thoại Page Templates, chọn một kiểu Frames, chọn OK

Để thể hiện nội dung vào khung frames ta thực hiện như sau:

- Nhấn nút Set Initial Page

- Trong hộp thoại Select File, chọn file HTM cần load sau đó nhấn OK để thể hiện

trang web.

Nếu muốn tạo một trang web mới ta nhấn nút New Page

3. Thay đổi thuộc tính của Frames

- Chọn Frame muốn thay đổi thuộc tính

- Chọn Frames\Frames

Properties: hộp thoại Frames Properties (hình 3.6) xuất hiện có các thuộc tính sau:

+ Name: Đặt tên cho frame

+ Initial page: Thiết lập nội dung sẽ hiển thị trong frame

+ Frame size: Thay đổi kích thước frames

+ Margin: Lề của frame



+ Option: Thay đổi thuộc tính khác cho

frame:

Never: không hiển thị thanh trượt

If Needed: tự động hiển thị thanh trượt

nếu nội dung của trang web lớn hơn

kích thước frame.

Always: Luôn luôn hiển thị thanh trượt

V. Tạo liên kết đến các trang web

Đây là tính chất quan trọng của web site, nó cho phép tạo liên kết từ trang web này đến

trang web khác, hay liên kết đến một địa chỉ web site khác,…Với liên kết này bạn sẽ tạo được

các liên kết trong web site. Có 3 phương thức tạo liên kết.

1. Tạo liên kết văn bản

Để tạo liên kết văn bản ta thực

hiện như sau:

1.1 Đánh dấu chọn từ hay chuỗi

cần tạo liên kết

1.2 Chọn Insert\Hyperlink

1.3 Trong hôp thoại Insert

Hyprelink:

- Để toại liên kết đến trang

web khác, chọn trang cần liên

kết trong khung name, hay nhập trang cần liên kết trogn khung URL hoặc nhấn nút Browse, và

chọn trang cần liên kết trong hộp thoại Select file, chọn OK để chấp nhận.

- Để tạo liên kết đến địa chỉ web site khác, nhập địa chỉ cần liên kết trong khung URL.

- Để tạo liên kết đến địa chỉ Email, nhấn biểu tượng E-mail Address, nhập địa chỉ mail cần

liên kết đến trong khung E-mail address và nhấn OK.

- Nếu trang hiện hành đang nằm trong frame, để gọi trang khác sẽ năm trong frame hay

trở về cửa sổ chính, nhấn nút Target Frame. Trong hộp thoại Target Frame, xác định Frame

mà trang sẽ hiển thị. Trong đó:

+ Page default (page): Trang sẽ hiển thị trong khung cửa sổ mới.

+ Same frame: Trang sẽ hiển thị cùng frame với trang gọi nó.

+ Whole page(_top): Trang sẽ hiển thị trong cửa sổ chính

+ New window: Trang sẽ hiển thị trong cửa sổ mới.



+ Parent frame: Trang sẽ hiển thị trong frame cha, frame trước đó đã gọi đến frame hiện

hành.

+ Sau cùng nhấn OK để tạo liên kết.

2. Tạo liên kết hình ảnh

Việc tạo liên kết bằng đối tượng hình ảnh cũng tương tự như ta tạo liên kết văn bản.

3. Tạo liên kết bằng điểm nóng trên ảnh

Đây là tiện ích hữu dụng của FrontPage, khi ta muốn tạo chỉ điểm trên ảnh làm điểm liên

kết.

Ví dụ: Ta có hình bản đồ, làm thế nào để tạo liên kết cho mỗi quốc gia trên bản đồ đó. Do

vậy ta cùng dùng Hotspot để tạo chỉ điểm. Để tạo Hotspot ta thực hiện như sau:

3.1 Chọn hình mà ta cần tạo Hotspot

3.2 Lúc này thanh Drawing sẽ xuất hiện phía dưới cửa sổ FrontPage. Nhấn chọn dạng chỉ điểm

cần tạo trên thanh Drawing như:

- Rectangular Hotspot : Tạo chỉ điểm là hình chữ nhật

- Cicular Hotspot : Tạo chỉ điểm là hình tròn hay ellipese.

- Polygonal Hotspot : Tạo chỉ điểm là hình đa giác bất kỳ

3.3 Sau khi chọn kiểu tạo Hotspot, đưa trỏ chuột đến hình đã chọn trước đó (lúc này trỏ chuột

sẽ biến thành hình cây bút vẽ). Nhấn và kéo để tạo điểm liên kết. Để kết thúc vẽ, ta chỉ nhả

chuột.

3.4 Sau khi kết thúc vẽ, FrontPage sẽ tự động mở hộp thoại Create Hyperlink. Lúc này bạn sẽ

chọn trang web cần liên kết đến. Các bước thực hiện tương tự như phần 1.3, 1.4 (tạo liên kết

văn bản).

Lưu ý:

Với kiểu tạo Hotspot là Polygonal Hotspot, khi vẽ ta nhấn chuột ở các điểm neo của đỉnh

đa giác, đa giác chỉ kết thúc khi điểm neo cuối cùng trùng với điểm neo đầu.

VI. Bookmark và liên kết Bookmark

- Bookmarrk: là hình thức đặt tên cho chuỗi được chỉ định.

- Liên kết Bookmark: là tạo liên kết đến Bookmark đã được chỉ định (đặt tên). Đây là tính

chất thông dụng của web site khi bạn muốn liên kết đến các nội dung khác trong cùng trang

web. Để tạo liên kết Bookmark trước hết ta phải tạo Bookmark.

1.Tạo Bookmark

- Chọn từ hoặc chuỗi văn bản cần tạo bookmark.

- Vào trình đơn Insert\Bookmark

- Trong hộp thoại Bookmark, đặt tên cho đối tượng vừa

chọn trong khung Bookmark name.

- Click OK để tạo bookmark.



2. Tạo liên kết đến Bookmark

- Đánh dấu chọn từ, chuỗi hay hình hoặc Hotspot cần tạo liên kết.

- Vào trình đơn Insert\Hyperlink hay Right click và chọn Hyperlink, hoặc click biểu tượng

Hyperlink trên thanh công cụ

- Trong hộp thoại Create Hyperlink, chỉ định Bookmark sẽ liên kết đến trong khung

Boomark của mục Optional (hình 3.9).

- Click OK để chấp nhận tạo liên kết.

VII. Tạo Form trong Front Page

1. Tạo Form

Form là một tập hợp các text và formfield cho phép người sử dụng lấy hoặc cập nhật thông

tin tên nó.

Có 3 cách tạo Form:

1.1 Sử dụng Form Page Wizard

Với hình thức này, FrontPage sẽ đưa ra các câu hỏi, rồi dựa vào câu trả lời của bạn để tạo

Form tương ứng. Sau khi Form được tạo, nếu cần thiết bạn có thể sửa đổi lại cho phù hợp với

yêu cầu của mình.

1.2. Sử dụng Form mẫu

Khác với hình thức trên, FrontPage sẽ tạo ra một Form theo mẫu đã chọn, sau đó bạn có

thể chỉnh sửa lại Form cho phù hợp với yêu cầu của mình.

1.3 Tạo Form từ đầu

Đầu tiên, bạn tạo một trang web trống, sau đó thêm form vào trang và thêm vào các vùng

mà bạn cần.

2. Các đối tượng trên Form

Trong môi trường FrontPage, trên Form có thể có các đối tượng sau:

- One-line text box: thêm vào hộp văn bản chỉ có một dòng.

- Scrolling text box: Thêm vào hộp văn bản có thanh cuộn. Với hộp văn bản này, ta có thể

nhập vào văn bản có chiều dài tùy ý.

- Check box: thêm vào ô kiểm.

- Radio button: thêm vào nút chọn lựa.

- Drop-down menu: Thêm vào menu thả xuống.

- Push button : Thêm vào nút nhấn để thực hiện một tác động nào đó, chẳng hạn: hiển thị

các hộp thông báo, thực hiện một script lệnh trên trang web,…

- Label : Làm cho một trường và nhãn của nó đang được chọn trở thành một nhãn có thể

Click được.



3. Hướng dẫn tạo form như sau:

3.1 Tạo các Radio Button : Tự Nhiên, Xã Hội, Tiểu Học- Chọn Insert\Form\Radio Button

- Right Click vào Radio Button vừa tạo, chọn mục Form Field Properties

- Trong hộp thoại Radio Button Properties:

+ Nhập tên nhóm trong ô Group Name

+ Nhập giá trị vào ô Value

+ Chọn ô selected

- Chọn OK

Thực hiện tương tự để tạo các Radio Button tiếp theo, tuy nhiên với các Radio Button này

bạn chọn mục Not Selected

3.2 Tạo các Check Box:

- Chọn Insert\Form\Check Box

- Right Click vào Check Box vừa tạo, chọn mục Form Field Properties

- Trong hộp thoại Check Box Properties:

+ Nhập tên Check Box trong ô Name

+ Nhập giá trị vào ô Value

- Chọn OK

3.3 Tạo Drop-Down Menu

- Chọn Insert\Form\Drop-Down Menu

- Right Click vào Drop-Down Menu vừa tạo, chọn mục Form Field Properties

- Trong hộp thoại Drop-Down Properties:

+ Nhập tên Menu trong ô Name

+ Nhắp nút Add để mở hộp thoại Add Choice, nhập giá trị vào ô Choice, Chọn ô

kiểm Speccify Value, chọn ô Selected. Tiếp tục như thế cho các mục chọn khác nhau cho Drop-

Down Menu

- Chọn OK



3.4 Tạo One-line Text Box

- Chọn Insert\Form\One-line Text Box

- Right Click vào One-line Text Box vừa tạo, chọn mục Form Field Properties

- Trong hộp thoại One-line Text Box Properties:

+ Nhập tên Text Box trong ô Name

+ Nhắp nút Style. Trong hộp thoại Modify Style, nhắp nút Format, sau đó chọn mục

cần chỉnh sửa trong menu thả xuống.

- Chon OK . . .

3.5 Tạo Scrolling Text Box

- Chọn Insert\Form\Scrolling Text Box

- Right Click vào Scrolling Text Box vừa tạo, chọn mục Form Field Properties

- thực hiện các thao tác còn lại tương tự như thực hiện One-line TextBox

3.6 Tạo Push Button

- Chọn Insert\Form\Push Button

- Right Click vào Push Button vừa tạo, chọn mục Form Field Properties

- Trong hộp thoại Push Button Properties:

+ Nhập tên Push Button trong ô Name

+ Nhập nhãn trong ô Value/Label.

+ Chọn dạng hiển thị của Push Button là một trong các tùy chọn của Button type.

- Chon OK

4. Gửi dữ liệu của Form đến địa chỉ Email hoặc tập tin

Chúng ta có thể gửi dữ liện trên Form đến một địa chỉ Email hoặc một tập tin trên Web

Server.

4.1 Gửi dữ liệu trên Form đến một địa chỉ Email

Để gửi dữ liệu trên Form đến một địa chỉ Email thì Web Server phải được thiết lập để hỗ

trợ thao tác này.

Cách thức tiến hành:

- Right Click vào vùng trống của Form. Sau đó chọn mục Form Properties.

- Trong hộp thoại Form Properties, nhập địa chỉ Email bạn muốn gửi dữ liệu của Form

đến trong ô Email Address, xóa tên tập tin mặc định trong ô File Name, chọn OK để

đóng hộp thoại Form Properties lại.

- Chọn No trong hộp thoại vừa hiện ra và chấp nhận địa chỉ Email mà bạn vừa nhập

vào. FrontPage sẽ gửi dữ liện từ Form đến địa chỉ đó.

4.2 Gửi dữ liệu trên Form đến một tập tin văn bản

Cách thức tiến hành

- Right Click vào vùng trống của Form. Sau đó chọn mục Form Properties.

- Trong hộp thoại Form Properties, nhập tên tập tin văn bản bạn muốn gửi dữ liệu của

Form đến trong ô File Name, xóa tên địa chỉ Email mặc định trong ô Email Address,



- Nhắp nút Option

- Nhắp nút mũi tên xuống của mục File Format, chọn Format Text, Chọn OK

- Chọn OK để đóng hộp thoại Form Properties lại.

Khi bạn nhấn nút Submit, dữ liệu của Form sẽ gửi đến tập tin bạn đã nhập trên Web

Server, nếu tập tin này chưa có sẽ được tự động tạo ra.

VIII. Các thành phần Component

1. Sơ lược về thành phần component

Để trang web thêm phần sinh động, linh hoạt và lôi cuốn người xem. Bạn nên chèn thêm

các Component của FrontPage vào trang web như: tạo chữ chạy(marquee), tạo nút đa

sắc(Interactive Button)

Thực ra đây là các mã lệnh được tạo sẵn trong FrontPage, khi bạn tạo các Component

thì FrontPage sẽ chèn các đoạn mã lệnh vào code HTML. Các mã lệnh này có thể là Java

Script, java Applet hay cấu trúc thẻ Tag của HTML.

Với các Component trong FrontPage là các lớp của java Applet, lớp này được gọi đến

trong từ khóa <Applet code = “tên lớp”>. Do vậy tạo Component cho trang web, bạn cần chép

các lớp này cùng cấp thư mục với trang web (file HTML) sử dụng Component đó. Với

FrontPage khi bạn lưu lại trang web có sử dụng Component thì lớp tương ứng với Component

đó sẽ tự động sao chép vào thư mục của trang web gọi chúng.

Nếu mở trang web có sử dụng Component mà Component đó không thi hành, bạn hãy

kiểm tra lại lớp Component đó có nằm cùng cấp thư mục của trang web đó hay không. Hay đã

có lớp Component đó không?

Lưu ý: Với trang web có sử dụng Component, trong môi trường FrontPage khi bạn xem thể

hiện Preview thì Component đó sẽ không hoạt động. Do vậy bạn cần lưu lại sau đó dùng trình

duyệt web và mở trang web cần xem.

2. Sử dụng các thành phần Component

2.1 Tạo nút Interactive Button

Để trang web được linh hoạt, sinh động và lôi cuốn người sử dụng bạn có thể tạo các

liên kết bằng các nút Interactive Button. Nút Interactive Button cho phép thay đổi trạng thái

của nút khi ta di chuyển chuột lên chính nó.

Khi ta di chuyển chuột trên nút Interactive Button, nó sẽ chuyển sang màu khác hoặc

được chuyển sang dạng được nhấn xuống. Nếu nút Interactive Button có tạo liên kết web, khi

nhấn chuột vào nút Interactive Button trang web liên kết sẽ được gọi đến.



Cách tạo:

- Nhấn Insert\Web Component \

Interative Button

- Trong hộp thoại Interative Button, hãy

đặt lại các giá trị của nút trong các ô.

- Ngăn Button:

o Text: nội dung hiển thị trên text

o Link: nhập vào địa chỉ trang web

hay web site mà nút cần liên kết

o Button: chọn kiểu nút

- Ngăn Font: chọn font, size, color,...

- Ngăn Image

o Width: thiết lập chiều dài cho nút

o Height: thiết lập chiều cao cho

nút

2.2 Tạo chữ chạy Marquee

Để tạo dòng chữ chạy trong trang web ở bất cứ vị trí nào trong trang, bạn có thể dùng

Component Marquee. Component này sẽ tạo ra thẻ Tag<Marquee> trong code HTML với các

tham số cho phép ta định vị kiểu chạy chữ trong trang.

Cách tiến hành:

- Chọn Insert\Web Component\Dynamic Effect\Marquee

- Trong hộp thoại Marquee Properties, bạn có thể chỉnh nội dung văn bản, hướng di chuyển

của dòng văn bản, tốc độ di chuyển cũng như kích thước và kiểu chữ thể hiện trên Marquee

trong các ô:

o Text : nội dung văn bản của Marquee

o Direction : chọn giá trị Left nếu muốn dòng văn bản chạy từ phải qua trái,

chọn giá trị Right nếu muốn dòng văn bản chạy từ trái qua phải.

o Speed : đặt lại tốc độ

chạy của Marquee.

Lưu ý: giá trị trong ô Delay càng lớn thì

tốc độ chạy của dòng văn bản càng

chậm. Giá trị trong ô Amount biểu thị

bước dịch chuyển của Marquee

o Behavior : tùy thuộc

giá trị bạn chọn mà Marquee có

cách chạy khác nhau.



Scroll : chạy theo dạng cuộn

Slide : chạy theo dạng trượt

Alternate : chạy sang phải từ trái sang phải và ngược lại

Repeat : xác định số lần lặp của Marquee, nếu mục Continuously

được chọn thì Marquee sẽ lặp liên tục, ngược lại sẽ lặp theo số lần lặp được xác

lập trong khung Times.

Background color : đặt màu nền cho Marquee

Style : các định dạng khác của Marquee

IX. Dynamic HTML Effect

Dynamic HTML(DHTML-HTML động): là ngôn ngữ HTML mở rộng làm tăng hiệu ứng

trình bày văn bản và đối tượng khác. Trong FrontPage, bạn có thể sử dụng thanh công cụ

DHTML Effects để làm tăng cường hiệu ứng cho các thành phần của mà không cần lập trình.

- Vào menu view, chọn Toolbas, chọn DHTML Effect, công cụ DHTML Effect xuất hiện:

Ý nghĩa các mục trên thanh DHTML Effect:

- On: Chọn sự kiện: click (Nhấn chuột); Double click (nhấp đúp); Mouse over(chuột vào

vùng chọn); Page load (mở trang).

- Apply: Hiệu ứng (Formatting)

- Choose setting (định dạng)

X. Xuất bản web

Trước khi xuất bản web chúng ta sẽ kiểm tra lại các lỗi chính tả, nhận diện và chỉnh sửa các

siêu liên kết và xem trước các trang web trong trình duyệt và trên trên giấy. Sau đó chúng ta sẽ

tìm một máy chủ chứa web (Web server) để xuất bản.

1. Kiểm tra các siêu liên kết

Kiểm tra các siêu liên kết có thể đến các địa điểm thích hợp hay không. Hãy nhớ rằng các

trang web luôn thay đổi và một siêu liên kết dẫn tới một web site khác ngày hôm nay có thể còn

đúng, nhưng ngay mai có lẽ không còn đúng nữa. Để kiểm tra các siêu liên kết, ta phải tìm hiểu

hai View khác của Front Page: Hyperlinks View (màn hình siêu liên kết) và Reports View (màn

hình báo cáo).

1.1 Kiểm tra trong màn hình siêu liên kết

Màn hình siêu liên kết cho ta một cái nhìn toàn cục về tất cả các siêu liên kết trong web.

Hãy thao tác như sau:

- Trở về trang chủ, từ menu chính nhấn vào View\Hyperlinks, xuất hiện cửa sổ :



Phía bên trái màn hình là khung Folder List với các trang trong web. Phía bên phải là sơ đồ các

liên kết.

1.2 Kiểm tra trong màn hình báo cáo

Như ta biết màn hình siêu liên kết là rất hữu dụng cho việc nhìn bao quát toàn bộ các siêu

liên kết, nhưng nó không nói cho bạn biết liệu tất cả những siêu liên kết này có hoạt động đúng

đắn hay không. Để kiểm tra chức năng và tình trạng hoạt động của tất cả các siêu liên kết đúng

đắn hay không. Để kiểm tra chức năng và tình trạng hoạt động của tất cả các siêu liên kết trong

một web, bạn phải sử dụng màn hình báo cáo. Thao tác như sau:

Từ menu chính nhấn vào View\Reports\Site Sumary, xuất hiện:



Dựa vào màn hình ViewReport giúp ta kiểm tra và chỉnh sửa web site của hình cho đúng.

2. Xuất bản một web

Sau khi quá trình thiết kế web đã hoàn thành thì chúng ta phải chia sẻ nó với những

người khác qua việc đưa web lên máy chủ (Web server). Sau đó web của chúng ta sẽ là web

site có thể được truy cập và được xem qua một trình duyệt web (Web Browser). Để xuất bản

web, ta phải biết được địa chỉ của máy chủ mà mình muốn đưa nó lên. Ta cũng có thể tạo web

trên một máy tính đang hoạt động với tư cách là máy chủ.

Để có thể biến một web của Front page thàng một web site hoàn chỉnh trong trình duyệt,

máy chủ giữ web đó cần phải được cài đặt Microsoft Front Page Server Extension, dù máy chủ

này ở trong mạng Internet hay trong mạng nội bộ.

Trong trường hợp muốn đưa lên mạng nội bộ, quá trình xuất bản web là rất đơn giản và

chắc chắn sẽ có người chuyên trách trong tổ chức chỉ rõ từng bước cho ta biết. Trong trường

hợp muốn đưa lên Internet, công việc phức tạp hơn một chút là ta phải liên hệ với một nhà

cung cấp dịch vụ Internet (ISP) để tiến hành làm thủ tục gửi web của mình lên Internet.

Sau khi liên hệ thành công với một nhà cung cấp và có được các thông số để xuất bản

web, chúng ta tiến hành các bước như sau:

- Trở về trang chủ web

- Vào menu chinh File, chọn Publish Web, xuất hiện cửa sổ:



Nhập địa chỉ Web hay địa chỉ FTP và ô Remote Web site location Chọn OK . . .



Chương 4: THIẾT KẾ WEB ĐỘNG VỚI ASP

1. ASP là gì?

ASP được viết tắt từ Active Server Page. ASP là một chương trình chạy trên IIS. IIS được

viết tắt từ Internet Information Services. Đây là một Web server do Microsoft phát triển.

Một trang ASP chứa ngôn ngữ kịch bản phía trình chủ và có thể chứa HTML. Các trang

ASP cũng có thể xuất kịch bản phía trình khách về cho trình duyệt, bạn cũng có thể trộn mã

ngôn ngữ kịch bản phía trình khách và trình chủ với HTML.

2. Tập tin ASP chứa gì?

Tập tin ASP giống như tập tin HTML

3. Cú pháp cơ bản của ASP

Một tập tin ASP thông thường chứa các thẻ HTML giống như tập tin HTML. Tuy nhiên

một tập tin ASP cũng có thể chứa ngôn ngữ kịch bản phía trình chủ, phần ngôn ngữ này được

bao trong cặp dấu phân cách <% và %>. Ngôn ngữ này được thực thi trên Web server, nó có

thể chứa bất kỳ biểu thức, phát biểu, thủ tục hoặc toán tử hợp lệ nào.

Để gửi nội dung đến trình duyệt bạn dùng phương thức Write của đối tượng Response.

Ví dụ 1: gửi câu thông báo “Xin chào” đến trình duyệt:

<html>

<head> <title> Hello World </title> </head>

<% @ language=”vbscript”%>

<body>

<% response.write(“Xin chào”)

%>

</body>

</html>

Lưu tập tin này với tên vidu01.asp trong thư mục myasp rồi nhập địa chỉ tại trình duyệt:

http://localhost/myasp/vidu01.asp

Ngôn ngữ kịch bản trong ASP là VBScript, do đó khi ta không chỉ rõ ngôn ngữ kịch bản sẽ

dùng trong ASP thì mặc định là VBScript được dùng. Nếu dùng ngôn ngữ kịch bản là Javascript

thì ta dùng lệnh: <% language=”javascript”%>

Ta có thể thêm thẻ HTML vào trong đoạn văn bản gửi đến trình duyệt để định dạng văn

bản. Xem ví dụ sau:

Ví dụ 2:

<html>

<head> <title> Vi du 2 </title> </head>


<body>


http://localhost/myasp/vidu01.asp


<% response.write(“<h2> Dùng thẻ HTML để định dạng văn bản!</h2>”)

%>

</body>

</html>

Kết quả hiển thị trên màn hình:

4. Biến trong ASP

Biến dùng để lưu trữ thông tin. Nếu được khai báo bên ngoài thì nó có thể được thay đổi

bởi bất kỳ mã kích bản nào trong tập tin ASP. Nếu biến được khai báo bên trong thủ tục thì nó

được tạo ra và bị hủy mỗi khi thủ tục được thực thi.

a) Khai bái biến

Ví dụ 3:

<html>

<head> <title> VI DU 3 </title> </head>


<body>

<%

Dim fullname = “Huỳnh Huy Tuấn”

response.write(“Xin chào, tôi tên là: “& fullname”)

%>

</body>

</html>

b) Khai báo mảng

Ví dụ 4:

<html>

<body>

<%

Dim book(4), i

book(1) = “MS FrontPage”

book(2) = “Dream Weaver”

book(3) = “MS Access”



book(4) = “Active Server Page”

for i = 1 to 4

response.write(book(i) & “<br>”);

next

%>

</body>

</html>

c) Sử dụng vòng lặp

Ví dụ 5:

<html>

<body>

<%

Dim i

i = 1

Do while i < 7

Response.write(“<h” & i & “>” & i & “ : ASP” & “</h” & i & “>”)

i = i + 1

Loop

%>

</body>

</html>

d) Sử dụng phát biểu điều kiện

<html>

<body>

<%

Dim a,b

a = 11

b = 7

if a < b then

response.write(a & “ nhỏ hơn “ &b)

else

response.write(a & “ lớn hơn “ &b)

endif

%>

</body>

</html>



5. Sử dụng Form trong ASP

5.1 Đối tượng Request

Để tương tác với người dùng ta cần sử dụng form để thu thập dữ liệu hoặc thực hiện truy

vấn dữ liệu dựa trên yêu cầu của người dùng . Trong ASP để nhận thông tin từ form ta có thể

dùng lệnh Request.QueryString hoặc Request.Form

Ví dụ 6:

<html>

<head> <title> Form6a </title> </head>


<body>

<form method = “get” action = “Form6b.asp”>

First Name : <Input type = “text” name = “fname”>

<br>

Last Name: <Input type = “text” name = “lname”>

<br> <br>

<input type = “submit” value = “Submit”>

</form>

</body>

</html>

Khi người dùng nhấn nút Submit thì trang Form6a.asp được gọi để xử lý dữ liệu từ form

là fname và lname.

a) Lệnh Request.QueryString

Nếu Form dùng phương thức GET (method = get) thì ta dùng phương thức QueryString

của đối tượng Request để nhận dữ liệu từ form.

Tập tin Form6b.asp:<html><body>

Xin chào<%

Response.write(request.querystring(“fname”))Response.write(“ “ & request.querystring(“lname”))

%></body></html>Kết quả nhận được như hình:



b) Request.Form

Nếu Form dùng phương thức POST (method = post) thì ta dùng phương thức Form của

đối tượng Request để nhận dữ liệu từ form.

Tập tin Form6c.asp:<html><body>

Xin chào<%

Response.write(request.form(“fname”))Response.write(“ “ &request.form(“lname”))

%></body></html>

5.2 Đối tượng Response

Đối tượng Response thể hiện đáp ứng của Web server tới trình duyệt máy khách, cho

phép bạn gửi thông tin đến máy khách, cũng như quyết định khi nào thông tin này được gửi đi.

Các thuộc tính của đối tượng Response:

Expires

Thuộc tính này thiết lập thời gian(phút) mà một trang sẽ được lưu trên trình duyệt trước

khi nó hết hạn lưu.

Cú pháp: Response.Expires[=number]

Number là thời gian lưu(phút)

Status

Thuộc tính này trả về giá trị dòng trạng thái của Web server.

Cú pháp: Response.Status=statusdescription

Statusdescription gồm 1 trong 3 kí số và phần mô tả.

Ví dụ:

<%

Ip=request.ServerVariables(“REMOTE_ADDR”)

if ip<>”198.162.1.122” then

response.Status = “401 Unauthorized”

response.Write(response.Status)

response.End

end if

%>

Các phương thức của đối tượng Response

Redirect

Phương thức này chuyển người dùng sang một địa chỉ URL khác.

Cú pháp: Response.Redirect URL

URL: là địa chỉ chỉ đến trang web khác



Ví dụ:

<%

Response.Redirect

“http://localhost/myasp/mymain.asp”

%>

Write

Phương thức này ghi chuỗi dữ liệu bất kỳ ra kết xuất gửi đến trình duyệt. Cú pháp:

Response.write <thông báo>

Ví dụ:

<%

Response.Write “Xin chào <br>”

name = “Các bạn sinh viên”

Response.Write name

Response.Write”<a href=’http://www.echip.com.vn’>E chip Tin hoc </a>”

%>

6. Đối tượng ADO

Đối tượng ADO được dùng để truy cập cơ sở dữ liệu(CSDL) từ trang Web của bạn.

6.1 ADO là gì?

ADO được viết tắt từ ActiveX Data Objects. Đây là công nghệ do Microsoft phát triển, tự

động được cài đặt khi bạn cài IIS. ADO là một giao tiếp lập trình để truy cập dữ liệu trong

CSDL.

Cách chung để truy cập CSDL từ trong trang ASP như sau:

1. Tạo một kết nối ADO với CSDL

2. Mở kết nối vừa tạo

3. Tạo một recordset từ ADO

4. Mở recordset này

5. Lấy dữ liệu bạn cần từ recordset

6. Đóng recordset

7. Đóng kết nối ADO

6.2 Kết nối CSDL bằng ADO

Trước khi có thể truy cập CSDL từ trang Web, bạn cần thiết lập một kết nối tới CSDL

a. Kết nối CSDL Access

Giả sử ta có một CSDL Access là northwind.mdb trong thư mục C:\mydata. Bạn sử dụng

cú pháp sau để kết nối tới CSDL Access này:

<%

set

conn=Server.CreateObject(“ADODB.Connection”)



strconn=”PROVIDER=Microsoft.Jet.OLEBD.4.0;

DATA SOURCE=c:\mydata\northwind.mdb”

Conn.Open.strconn

%>

Để kết nối tới một CSDL Access bất kỳ khác, bạn chỉ cần trở lại đường dẫn chứa tên tập

Access trong tham số DATA SOURCE

b. Kết nối CSDL SQL Server

Giả sử server của bạn đã cài đặt SQL Server 2000, user sa có mật khẩu là test, để kết nối

vào CSDL Northwind (đây là CSDL mẫu có sẵn khi bạn cài SQL Server) bạn sử dụng cú pháp

sau:

<%

set


strconn=”PROVIDER=SQLOLEDB.1;SERVER=local;

USER ID=sa; PASSWORD=test; DATABASE=Northwind”

Conn.Open.strconn

%>

Nếu bạn muốn kết nối vào CSDL SQL Server trên một máy khác, bạn thay local trong

tham số SERVER bằng tên máy server bạn muốn kết nối tới. Tham số USER ID là tên user bạn

dùng để kết nối, PASSWORD là mật khẩu dùng để kết nối. DATABASE là CSDL bạn muốn kết

nối.

c. Kết nối CSDL bất kỳ dùng ODBC

Bạn có thể kết nối tới một CSDL bất kỳ thông qua kết nối ODBC dùng tên nguồn dữ

liệu(DSN). Giả sử bạn đã tạo một DSN với CSDL Access northwind.mdb có tên là “AccNorth”

bạn thực hiện kết nối như sau:

<%

set


conn.Open “AccNorth”

%>

6.3 Tạo Recordset

Sau khi mở kết nối CSDL, để đọc được dữ liệu bạn phải nạp dữ liệu vào recordset

Giả sử để mở bảng Customers trong CSDL northwind.mdb bạn thực hiện như sau:

<%

‘Tạo kết nối conn

set


strconn=”PROVIDER=Microsoft.Jet.OLEBD.4.0;



DATA SOURCE=c:\mydata\northwind.mdb”

‘Mở kết nối conn

Conn.Open.strconn

‘Tạo recordset rs

Set rs=Server.CreateObject(“ADODB.recordset”)

‘Nạp dữ liệu vào rs

Rs.Open “Customers”, conn

%>

Hoặc bạn có thể dùng lệnh SQL để truy vấn dữ liệu trong bảng Customers như sau:

<% rs.Open “select * from Customers”, conn %>

Thực hiện tương tự khi bạn đọc dữ liệu từ SQL Server.

6.4 Hiển thị dữ liệu

Sau khi nạp dữ liệu vào recordset, chúng ta sẽ thấy cách hiển thị dữ liệu trong bảng

Customers lên trang web như sau:

<html>

<body>

<%

‘Kết nối Access:

Strconn=”provider=Microsoft.Jet.OLEDB.4.0;data source=”C:\mydata\

northwind.mdb”

mySQL=”select * from customers”

set conn=server.creatobject(“ADODB.connection”)

conn.open strconn

set rs=Server.CreateObject(“ADODB.recordset”)

rs.Open mySQL, conn

do until rs.EOF

for each x in rs.Fields

Response.Write(“<b>”&x.name&”</b>”)

Respone.Write(“=”)

Respone.Write(x.value & “br>”)

Next

Response.Write(“<br>”)

Rs.MoveNext

Loop

Rs.close

%>

</body>

</html>



6.5 Truy vấn dữ liệu

Thay vì nạp hết tất cả dữ liệu trong tất cả các cột của bảng, ta có thể giới hạn bớt kết quả

đọc bằng cách thực hiệnh truy vấn dữ liệu theo một số điều kiện. Giả sử ta chỉ cần lấy dữ liệu

của các cột “CompanyName”, “ContactName” và “Phone” với điều kiện CustomerID=”ANTON”,

ta viết mệnh đề truy vấn trong tham số mySQL như sau:

<%

mySQL = “select CompantName, ContactName, Phone from Customers

where CustomerID = “ANTON”

%>

Ví dụ:

<html>

<body>

<%

‘Kết nối Access:

Strconn=”provider=Microsoft.Jet.OLEDB.4.0;data source=”C:\mydata\

northwind.mdb”

mySQL = “select CompantName, ContactName, Phone From Customers

where CustomerID = “ANTON”

set conn=server.creatobject(“ADODB.connection”)

conn.open strconn

set rs=Server.CreateObject(“ADODB.recordset”)

rs.Open mySQL, conn

%>

<table border=”1” width=”100%” cellspacing=0>

<tr>

<% for each x in rs.Fields

Response.write(“<th>” & x.name & “</th>”)

Next

%>

</tr>

<% Do until rs.EOF %>

<tr>

<% for each x in rs.Fields %>

<td> <% Response.write(x.value) %> </td>

<% Next

rs.MoveNext %>

</tr>

<% loop



rs.close

conn.close

%>

</table>

</body>

</html>

6.6 Sắp xếp dữ liệu

Để dữ liệu trả về được sắp xếp theo thứ tự, ta sử dụng mệnh đề ORDER BY.

Ví dụ: sắp xếp giá trị cột CompanyName tăng dần:

<% mySQL = “select CompantName, ContactName, Phone from Customers

ORDER BY CompanyName desc

%>

Để sắp xếp nhiều cột, ta thêm các cột vào sau mệnh đề ORDER BY, các cột cách nhau

dấu phẩy.

6.7 Thêm mới mẩu tin

Để thêm một mẩu tin mới vào bảng dữ liệu quản lý bới đối tượng Recordset, ta gọi

phương thức AddNew như sau:

mySQL = “Select * From Customers”

rs.open mySQL, conn

rs.AddNew

With rs

.Fields (“CompanyName”) = ‘NewCompanyName’

.Fields (“ContactName”) = ‘NewContactName’

.Fields (“Phone”) = ‘NewPhone’

End With

‘Lưu giá trị cho mẩu tin’

rs.Update

6.8 Chỉnh sửa nội dung mẩu tin

Để chỉnh sửa mẩu tin đã có ta gán nội dung mới cho trường tương ứng sau đó gọi

phương thức Update. Ví dụ:

mySQL = “Select * From Customers Where CompanyName=’Cname’”

rs.open mySQL, conn

‘Thay đổi nội dung phone của mẩu tin’

With rs

.Fields (“Phone”) = ‘newPhone’

End With

‘Lưu giá trị’

rs. Update



6.9 Xóa mẩu tin hoện hành

Nếu muốn xóa mẩu tin hoện hành, đơn giản ta chỉ cần gọi phương thức Delete của

Recordset. Ví dụ:

mySQL = “Select * From Customers Where CompanyName=’Cname’”

rs.open mySQL, conn

‘Xóa mẩu tin có CompanyName=’Cname’

rs.Delete

6.10 Tìm kiếm trên recordsets

Tìm kiếm recordset được thực hiện thông qua câu lệnh SQL. Ví dụ để tìm số điện thoại

của khách hàng của một công ty

<%

mySQL = “Select * From Customers

Where CompanyName=’ “+Cname++” ‘

rs.open.mySQL, conn

‘Nếu tìm thấy

If (not rs.EOF) then

Response.write(“Tìm thấy”)

Else

Response.write(“Không tìm thấy”)

Endif

%>

7. Kết chương

Truy cập vào cơ sở dữ liệu từ trang web là một trong những tính năng quan trọng nhất khi

xây dựng ứng dụng web. Bằng việc kết hợp mã kịch bản ASP và thành phần ADO, ta có thể dễ

dàng thực hiện tương tác cơ sở dữ liệu để thêm, sửa đổi hoặc xóa dữ liệu trong cơ sở dữ liệu

như Access, SQL.



Chương 5 : Đăng ký Host và sử dụng một số phần mềm hỗ trợ thiết kế web

I. Đăng ký một Host Free và cách upload bằng FTP

Sử dụng website cho phép đăng ký host free: http://www.110mb.com

- Mở truyệt duyệt web sau đó nhập địa chỉ web http://www.110mb.com, xuất hiện giao

diện:

1. Nhấp lên Start Now > Hiện ra rang 110MB Panel > Bạn điền các thông tin theo

hình( H2).

Nhớ gõ nhập đoạn Text nầy vào Khung màu xám không Copy > Paste : I will never

engage in phishing or abusive actions pn 110mb


http://www.110mb.com/



1. Ra thông báo bạn đã hoàn tất bước 1 , yêu cầu bạn mở Email > Bạn đã có thư

của Host Server gởi cho bạn , yêu cầu bạn nhấp lên Link để kích hoạt . (H2) .



2. Hiện ra Trang tiếp theo để bạn nhập thông tin trong bước 2 nầy > Nhấp Create My Account

Now !

3.

Ra

Trang tiếp theo có chữ: ACCOUNT CREATED SUCCESSFULLY . Bạn đã đăng ký hoàn tất để

tạo Account trong Host Free : http://www.110mb.com/

II Cấu hình IIS (Internet Information Service) trên máy chủ cục bộ để đưa trang lên

1. Internet Information Services (IIS)

IIS là một thành phần (một host server) của Windows server 2003 cho phép chứa và quản

lý các Web site. IIS là một Web server mạnh, hỗ trợ các chuẩn Web mới nhất như Extend

Markup Language (XML), ASP.Net, cho phép bạn dễ dàng xây dựng, triển khai và quản lý các

ứng dụng Web. IIS còn cho phép bạn điều khiển truy cập vào web site.

Trong phần học này chúng ta sẽ tìm hiểu IIS cung cấp dịch vụ Wold Wide Web (www):

dịch vụ này cung cấp web cho IIS client

2. Cài đặt IIS

- Vào StartSettingsControl PanelAdd/Remove Programs

- Trong cửa sổ Add/Remove Program, chọn Add/Remove Windows Components

- Trong hộp thoại Windows Components, chọn Application Server và chọn Details




- Đánh dấu chọn Internet Information Services (IIS) trong hộp thoại Application Server,

chọn OK.

3. Cấu hình và quản lý IIS

Khi IIS cài đặt thành công, ta truy cập vào IIS bằng cách:

Vào StartSettingsAdministrative ToolsInternet Information Services(IIS) Manager



- Thiết lập thuộc tính cho Website:

III. Sử dụng phần mềm xử lý ảnh Microsoft Office Picture Manager

1. Khởi động:

Vào start\Program\Microsoft Office\Microsoft Office Tool\Microsoft Office picture manager,

xuất hiện màn hình:



Vào menu Picture để chỉnh sửa hình ảnh:

Chức năng các mục:

- Brightness and Contracst. . .: Chỉnh độ sáng, tối và độ tương phản của ảnh

- Color: Chọn màu cho ảnh

- Crop: Cắt xén ảnh

- Rotate and Flip: quay ảnh

- Resize: thay đổi kích thước ảnh



IV. Sử dụng phần mềm tạo ảnh động Gif Animator

Để tạo một file ảnh động ta vào menu File\Animation Wizard, xuất hiện:

cửa sổ để chọn kích thước của ảnh:

Nhấp chọn nút Add Image để đưa

Các ảnh vào cửa sổ để tạo ảnh

động.