tài liệu thiết kế web

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.68 MB, 62 trang )

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
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
đườ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: “ 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,

Biên soạn: Huỳnh Huy Tuấn Trang 2
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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ú ý.
Biên soạn: Huỳnh Huy Tuấn Trang 3
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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
Biên soạn: Huỳnh Huy Tuấn Trang 4
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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>
<h2>Đây là heading</h2>
<h3>Đây là heading</h3>
<h4>Đây là heading</h4>
<h5>Đây là heading</h5>
<h6>Đây là heading</h6>
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.
<! Chú thích ở trong này >
5. Khoảng cách (&nbsp)
Biên soạn: Huỳnh Huy Tuấn Trang 5
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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  A
2
B
10.
<sub> </sub> Chỉ số dưới <b>H<sub>2</sub>O  H
2
O
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>
Biên soạn: Huỳnh Huy Tuấn Trang 6
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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=“”>
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=””.
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=””>
<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=”” 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">
Biên soạn: Huỳnh Huy Tuấn Trang 7
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
<p><i><b><font color="blue">Mot so lien ket:</font></b></i></p>
<p><a href=""><img border="0" src="echip.jpg"></a>
<a href="">Echip</a> Tuan tin cong nghe thong tin</p>
<p><a href="">
<img border="0" src="logoPCW.gif" width="260" height="64"></a>
<a href="">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>
Biên soạn: Huỳnh Huy Tuấn Trang 8
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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>
<td>row 1, cell 2</td>
</tr>
Biên soạn: Huỳnh Huy Tuấn Trang 9
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Sẽ hiển thị trên màn hình:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, 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>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
Nó sẽ có dạng thế này trên trình duyệt
row 1, cell 1 row 1, cell 2
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 < <
Biên soạn: Huỳnh Huy Tuấn Trang 10
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
> 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
Biên soạn: Huỳnh Huy Tuấn Trang 11
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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.
Ví dụ 3: tập tin vidu3.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>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>

Biên soạn: Huỳnh Huy Tuấn Trang 12
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
<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ữ
Biên soạn: Huỳnh Huy Tuấn Trang 13
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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”)
Ví dụ 4: tập tin vidu4.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>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>
<p><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></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:
Biên soạn: Huỳnh Huy Tuấn Trang 14
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
<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
Ví dụ 5: tập tin vidu5.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>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>
<p><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>
</body>
</html>
Biên soạn: Huỳnh Huy Tuấn Trang 15
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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.
Biên soạn: Huỳnh Huy Tuấn Trang 16
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
Để đọ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.
Ví dụ 6: tập tin vidu6.htm có nội dung như sau
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</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>
Biên soạn: Huỳnh Huy Tuấn Trang 18
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
<FONT FACE="Arial" size="2">
<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>
<FONT FACE="Arial" size="2">
<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>
Trình duyệt hiển thị tập tin vidu7.htm như hình 2.7:
Biên soạn: Huỳnh Huy Tuấn Trang 19
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website

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
Biên soạn: Huỳnh Huy Tuấn Trang 20
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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
Biên soạn: Huỳnh Huy Tuấn Trang 21
Cấu trúc thư mục
của website
Các trang web
Vùng thiết kế
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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.
Biên soạn: Huỳnh Huy Tuấn Trang 22
Trường Đại học Bạc Liêu Bài giảng Thiết kế 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
Biên soạn: Huỳnh Huy Tuấn Trang 23
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website

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
.

Biên soạn: Huỳnh Huy Tuấn Trang 24
Trường Đại học Bạc Liêu Bài giảng Thiết kế Website
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,
Biên soạn: Huỳnh Huy Tuấn Trang 25

tài liệu thiết kế web

Trích đoạn

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về