Giáo trình Thiết kế Web - Nguyễn Hữu Tuấn

Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
PHẦN I 
GIỚI THIỆU NGÔN NGỮ HTML 
I. CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU 
1.1 HTML 
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng 
các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. 
Cú pháp: 
 ... Toàn bộ nội của tài liệu được đặt ở đây 
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản 
bình thường. 
1.2 HEAD 
Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu. 
Cú pháp: 
1.3 TITLE 
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây 
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ 
phạm vi giới hạn bởi cặp thẻ . 
Cú pháp: 
Tiêu đề của tài liệu 
1.4 BODY 
Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của 
tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho 
tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những thông tin này 
được đặt ở phần tham số của thẻ. 
Giáo trình thiết kế Web 
1
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
.... phần nội dung của tài liệu được đặt ở đây 
Cú pháp: 
Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều 
thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính: 
BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho 
văn bản. Giá trị của tham số này (phần sau dấu 
bằng) là URL của file ảnh. Nếu kích thước ảnh nhỏ 
hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ 
trình duyệt sẽ được lát kín bằng nhiều ảnh. 
BGCOLOR= Đặt mầu nền cho trang khi hiển thị. Nếu cả hai tham 
số BACKGROUND và BGCOLOR cùng có giá trị thì 
trình duyệt sẽ hiển thị mầu nền trước, sau đó mới tải 
ảnh lên phía trên. 
TEXT= Xác định màu chữ của văn bản, kể cả các đề mục. 
ALINK=,VLINK=,LINK= Xác định màu sắc cho các siêu liên kết trong văn 
bản. Tương ứng, alink (active link) là liên kết đang 
được kích hoạt - tức là khi đã được kích chuột lên; 
vlink (visited link) chỉ liên kết đã từng được kích 
hoạt; 
Như vậy một tài liệu HTML cơ bản có cấu trúc như sau: 
Tiêu đề của tài liệu 
... Nội dung của tài liệu 
II. CÁC THẺ ĐỊNH DẠNG KHỐI 
2.1. THẺ P 
Thẻ được sử dụng để định dạng một đoạn văn bản. 
Cú pháp: 
Nội dung đoạn văn bản 
Giáo trình thiết kế Web 
2
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
2.2. CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6 
HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, 
tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình 
duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục 
cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 
thường có kích thước nhỏ hơn văn bản thông thường. 
Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: 
 ... Định dạng đề mục cấp 1 
 ... Định dạng đề mục cấp 2 
 ... Định dạng đề mục cấp 3 
 ... Định dạng đề mục cấp 4 
 ... Định dạng đề mục cấp 5 
 ... Định dạng đề mục cấp 6 
2.3 THẺ XUỐNG DÒNG BR 
Thẻ này không có thẻ kết thúc tương ứng (), nó có tác dụng chuyển sang dòng mới. 
Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, 
các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng 
trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ 
2.4 THẺ PRE 
Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ . Văn bản 
ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấu 
xuống dòng trong đoạn văn bản giới hạn bởi thẻ sẽ có ý nghĩa chuyển sang dòng 
mới (trình duyệt sẽ không coi chúng như dấu cách) 
Cú pháp: 
Giáo trình thiết kế Web 
3
III. CÁC THẺ ĐỊNH DẠNG DANH SÁCH 
3.1. DANH SÁCH THÔNG THƯỜNG 
Văn bản đã được định dạng 
 Mục thứ nhất 
 Mục thứ hai 
Cú pháp: 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Có 4 kiểu danh sách: 
•` Danh sách không sắp xếp ( hay không đánh số) 
• Danh sách có sắp xếp (hay có đánh số) , mỗi mục trong da nh sách 
được sắp xếp thứ tự. 
• Danh sách thực đơn 
• Danh sách phân cấp 
Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách không 
đánh số, có thể dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau: 
trong đó: 
TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3... 
=a Các mục được sắp xếp theo thứ tự a, b, c... 
 =A Các mục được sắp xếp theo thứ tự A, B, C... 
=i Các mục được sắp xếp theo thứ tự i, ii, iii... 
 =I Các mục được sắp xếp theo thứ tự I, II, III... 
Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách. 
Thẻ có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục 
trong danh sách. Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm); circle 
(vòng tròn); square (hình vuông). 
IV. CÁC THẺ ĐỊNH DẠNG KÝ TỰ 
4.1. CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ 
Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch 
chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt. 
Giáo trình thiết kế Web 
4
 ... 
 ... 
In chữ đậm 
 ... 
 ... 
In chữ nghiêng 
 ... In chữ gạch chân 
 Đánh dấu đoạn văn bản giữa hai thẻ này là 
 Muc thu nhat 
 Muc thu hai 
 Muc thu ba 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
5
định nghĩa của một từ. Chúng thường được in 
nghiêng hoặc thể hiện qua một kiểu đặc biệt 
nào đó. 
 ... 
 ... 
In chữ bị gạch ngang. 
 ... In chữ lớn hơn bình thường bằng cách tăng 
kích thước font hiện thời lên một. Việc sử dụng 
các thẻ lồng nhau tạo ra hiệu ứng chữ 
tăng dần. Tuy nhiên đối với mỗi trình duyệt có 
giới hạn về kích thước đối với mỗi font chữ, 
vượt quá giới hạn này, các thẻ sẽ 
không có ý nghĩa. 
 ... In chữ nhỏ hơn bình thường bằng cách giảm 
kích thước font hiện thời đi một. Việc sử dụng 
các thẻ lồng nhau tạo ra hiệu ứng 
chữ giảm dần. Tuy nhiên đối với mỗi trình 
duyệt có giới hạn về kích thước đối với mỗi 
font chữ, vượt quá giới hạn này, các thẻ 
 sẽ không có ý nghĩa. 
 ... Định dạng chỉ số trên (SuperScript) 
 ... Định dạng chỉ số dưới (SubScript) 
 Định nghĩa kích thước font chữ được sử dụng 
cho đến hết văn bản. Thẻ này chỉ có một tham 
số size= xác định cỡ chữ. Thẻ 
không có thẻ kết thúc. 
 ... Chọn kiểu chữ hiển thị. Trong thẻ này có thể 
đặt hai tham số size= hoặc color= xác định cỡ 
chữ và màu sắc đoạn văn bản nằm giữa hai 
thẻ. Kích thước có thể là tuyệt đối (nhận giá trị 
từ 1 đến 7) hoặc tương đối (+2,-4...) so với 
font chữ hiện tại. 
4.2. CĂN LỀ VĂN BẢN TRONG TRANG WEB 
Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản 
để trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P, Hn, IMG... đều có 
tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các 
thẻ đó. 
Các giá trị cho tham số ALIGN: 
LEFT Căn lề trái 
CENTER Căn giữa trang 
RIGHT Căn lề phải 
Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. 
Cú pháp: 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
6
4.3. CÁC KÝ TỰ ĐẶC BIỆT 
Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất. Ký tự ; 
được sử dụng để tách các ký tự trong một từ. 
Ký tự Mã ASCII Tên chuỗi 
< < < 
> > > 
& & & 
4.4. SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC TRANG WEB 
Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây 
(Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng 
hexa (hệ đếm cơ số 16) có định dạng như sau: 
#RRGGBB 
trong đó: 
 RR - là giá trị màu Đỏ. 
 GG - là giá trị màu Xanh lá cây. 
 BB - là giá trị màu Xanh nước biển. 
Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là 
giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu 
trong khi với giá trị RGB ta có thể chỉ tới 256 màu. 
Sau đây là một số giá trị màu cơ bản: 
Màu sắc Giá trị Tên tiếng Anh 
Đỏ 
Đỏ sẫm 
Xanh lá cây 
Xanh nhạt 
Xanh nước biển 
Vàng 
Vàng nhạt 
Trắng 
Đen 
#FF0000 
#8B0000 
#00FF00 
#90EE90 
#0000FF 
#FFFF00 
#FFFFE0 
#FFFFFF 
#000000 
RED 
DARKRED 
GREEN 
LIGHTGREEN 
BLUE 
YELLOW 
LIGHTYELLOW 
WHITE 
BLACK 
 Văn bản sẽ được căn giữa trang 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
7
Xám 
Nâu 
Tím 
Tím nhạt 
Hồng 
Da cam 
Màu đồng phục hải quân 
#808080 
#A52A2A 
#FF00FF 
#EE82EE 
#FFC0CB 
#FFA500 
#000080 
#4169E1 
#7FFFD4 
GRAY 
BROWN 
MAGENTA 
VIOLET 
PINK 
ORANGE 
NAVY 
ROYALBLUE 
AQUAMARINE 
Cú pháp: 
<BODY 
 LINK = color 
 ALINK = color 
 VLINK = color 
 BACKGROUND = url 
 BGCOLOR = color 
 TEXT = color 
 TOPMARGIN = pixels 
 RIGHTMARGIN = pixels 
 LEFTMARGIN = pixels 
> 
.... phần nội dung của tài liệu được đặt ở đây 
Sau đây là ý nghĩa các tham số của thẻ BODY: 
Các tham số ý nghĩa 
LINK Chỉ định màu của văn bản siêu liên kết 
ALINK Chỉ định màu của văn bản siêu liên kết đang đang chọn 
VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở 
BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền 
BGCOLOR Chỉ định màu nền 
TEXT Chỉ định màu của văn bản trong tài liệu 
SCROLL YES/NO - Xác định có hay không thanh cuộn 
TOPMARGIN Lề trên 
RIGHTMARGIN Lề phải 
LEFTMARGIN Lề trái 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
4.5. CHỌN KIỂU CHỮ CHO VĂN BẢN 
Cú pháp: 
<FONT 
FACE = font-name 
COLOR = color 
SIZE = n > 
... 
4.6. KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT 
Văn bản siêu liên kết hay còn gọi là siêu văn bản là một từ, một cụm từ hay một câu trên 
trang Web được dùng để liên kết tới một trang Web khác. Siêu văn bản là môi trường trong 
đó chứa các liên kết (link) của các thông tin. Do WWW cấu thành từ nhiều hệ thống khác 
nhau, cần phải có một quy tắc đặt tên thống nhất cho tất cả các văn bản trên Web. Quy tắc 
đặt tên đó là URL (Universal Resource Locator). 
 /~dir1/dir2/dir3/index.HTML#chapter001
Dịch vụ 
Tên hệ thống 
Cổng 
Đường dẫn 
Tên file 
Ví dụ về URL
Các tham số, 
biến, truy 
vấn 
Các thành phần của URL được minh hoạ ở hình trên. 
• Dịch vụ: Là thành phần bắt buộc của URL. Nó xác định cách thức trình duyệt của máy 
khách liên lạc với máy phục vụ như thế nào để nhận dữ liệu. Có nhiều dịch vụ như http, 
wais, ftp, gopher, telnet. 
• Tên hệ thống : Là thành phần bắt buộc của URL. Có thể là tên miền đầy đủ của máy 
phục vụ hoặc chỉ là một phần tên đầy đủ – trường hợp này xảy ra khi văn bản được yêu cầu 
vẫn nằm trên miền của bạn. Tuy nhiên nên sử dụng đường dẫn đầy đủ. 
• Cổng : Không là thành phần bắt buộc của URL. Cổng là địa chỉ socket của mạng dành 
cho một giao thức cụ thể. Giao thức http ngầm định nối với cổng 8080. 
• Đường dẫn thư mục : Là thành phần bắt buộc của URL. Phải chỉ ra đường dẫn tới 
file yêu cầu khi kết nối với bất kỳ hệ thống nào. Có thể đường dẫn trong URL khác với 
Giáo trình thiết kế Web 
8
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
9
đường dẫn thực sự trong hệ thống máy phục vụ. Tuy nhiên có thể rút gọn đường dẫn bằng 
cách đặt biệt danh (alias). Các thư mục trong đường dẫn cách nhau bởi dấu gạch chéo (/). 
• Tên file : Không là thành phần bắt buộc của URL. Thông thường máy phục vụ được cấu 
hình sao cho nếu không chỉ ra tên file thì sẽ trả về file ngầm định trên thư mục được yêu 
cầu. File này thường có tên là index.html, index.htm, default.html hay default.htm. Nếu 
cũng không có các file này thì thường kết quả trả về là danh sách liệt kê các file hay thư 
mục con trong thư mục được yêu cầu 
• Các tham số : Không là thành phần bắt buộc của URL. Nếu URL là yêu cầu tìm kiếm 
trên một cơ sở dữ liệu thì truy vấn sẽ gắn vào URL, đó chính là đoạn mã đằng sau dấu 
chấm hỏi (?).URL cũng có thể trả lại thông tin được thu thập từ form. Trong trường hợp 
dấu thăng (#) xuất hiện đoạn mã đăng sau là tên của một vị trí (location) trong file được chỉ 
ra. 
Để tạo ra một siêu văn bản chúng ta sử dụng thẻ . 
Cú pháp: 
<A 
 HREF = url 
 NAME = name 
 TABINDEX = n 
 TITLE = title 
 TARGET = _blank / _self 
> 
... siêu văn bản 
Ý nghĩa các tham số: 
HREF Địa chỉ của trang Web được liên kết, là một URL nào đó. 
NAME Đặt tên cho vị trí đặt thẻ. 
TABLEINDEX Thứ tự di chuyển khi ấn phím Tab 
TITLE Văn bản hiển thị khi di chuột trên siêu liên kết. 
TARGET Mở trang Web được liên trong một cửa sổ mới (_blank) hoặc 
trong cửa sổ hiện tại (_self), trong một frame (tên frame). 
4.7. ĐỊA CHỈ TƯƠNG ĐỐI 
URL được trình bày ở trên là URL tuyệt đối. Ngoài ra còn có URL tương đối hay còn gọi 
là URL không đầy đủ. Địa chỉ tương đối sử dụng sự khác biệt tương đối giữa văn bản hiện 
thời và văn bản cần tham chiếu tới. Các thành phần trong URL được ngăn cách bằng ký tự 
ngăn cách (ký tự gạch chéo /). Để tạo ra URL tương đối, đầu tiên phải sử dụng ký tự ngăn 
cách. URL đầy đủ hiện tại sẽ được sử dụng để tạo nên URL đầy đủ mới. Nguyên tắc là các 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
10
thành phần bên trái dấu ngăn cách của URL hiện tại được giữ nguyên, các thành phần bên 
phải được thay thế bằng thành phần URL tương đối. Chú ý rằng trình duyệt không gửi 
URL tương đối, nó bổ sung vào URL cơ sở đã xác định trước thành phần URL tương đối 
xác định sau thuộc tính href=. Ký tự đầu tiên sau dấu bằng sẽ xác định các thành phần nào 
của URL hiện tại sẽ tham gia để tạo nên URL mới. 
Ví dụ, nếu URL đầy đủ là:  thì: 
• Dấu hai chấm (:) chỉ dịch vụ giữ nguyên nhưng thay đổi phần còn lại. Ví dụ 
://www.fpt.com/ sẽ tải trang chủ của máy phục vụ www.fpt.com với cùng dịch vụ 
http. 
• Dấu gạch chéo (/) chỉ dịch vụ và máy phục vụ giữ nguyên nhưng toàn bộ đường 
dẫn thay đổi. Ví dụ /Javascript/index.htm sẽ tải file index.htm của thư mục 
Javascript trên máy phục vụ www.it-department.vnuh.edu.vn. 
• Không có dấu phân cách chỉ có tên file là thay đổi. Ví dụ index1.htm sẽ tải file 
index1.htm ở trong thư mục HTML của máy phục vụ www.it-
department.vnuh.edu.vn. 
• Dấu thăng (#): chỉ dịch vụ, máy phuc vụ, đường dẫn và cả tên file giữ nguyên, chỉ 
thay đổi vị trí trong file. 
Do đường dẫn được xem là đơn vị độc lập nên có thể sử dụng phương pháp đường dẫn 
tương đối như trong UNIX hay MS-DOS (tức là . chỉ thư mục hiện tại còn .. chỉ thư mục 
cha của thư mục hiện tại). 
URL cơ sở có thể được xác định bằng thẻ . 
4.8. KẾT NỐI MAILTO 
Nếu đặt thuộc tính href= của thẻ giá trị mailto:address@domain thì khi kích hoạt kết 
nối sẽ kí ... ảng có cấu trúc phức tạp, nên 
đặt lề để người xem có thể phân biệt rõ các dòng và 
cột. 
BORDERCOLOR Màu đường kẻ 
BORDERCOLORDARK 
BORDERCOLORLIGHT 
Màu phía tối và phía sáng cho đường kẻ nổi. 
BACKGROUND Địa chỉ tới tệp ảnh dùng làm nền cho bảng 
BGCOLOR Màu nền 
CELLSPACING Khoảng cách giữa các ô trong bảng 
CELLPADDING Khoảng cách giữa nội dung và đường kẻ trong mỗi ô 
của bảng. 
COLSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu cột 
ROWSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu hàng 
 VII. FORM 
7.1. HTML FORMS 
 Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn... 
7.2. TẠO FORM 
Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như sau: 
Cú pháp: 
<FORM 
 ACTION = ulr 
 METHOD = GET | POST 
 NAME = name 
 TARGET = frame_name | _blank | _self 
 > 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
16
Trong đó 
ACTION Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là 
địa chỉ tới một chương trình CGI, một trang ASP...). 
METHOD Phương thức gửi dữ liệu. 
NAME Tên của form. 
TARGET Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ 
form đến server. 
Đặt các đối tượng điểu khiển (như hộp văn bản, ô kiểm tra, nút bấm...) vào trang Web 
Cú pháp thẻ INPUT: 
<INPUT 
ALIGN = LEFT | CENTER | RIGHT 
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | 
RADIO | RESET | SUBMIT | TEXT 
VALUE = value 
> 
7.3. TẠO MỘT DANH SÁCH LỰA CHỌN 
Cú pháp: 
 Tên mục chọn thứ nhất 
 Tên mục chọn thứ hai 
7.4. TẠO HỘP SOẠN THẢO VĂN BẢN 
Cú pháp: 
<TEXTAREA 
 COLS=số cột 
 ROWS=số hàng 
 NAME=tên 
> 
 Văn bản ban đầu 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
17
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
18
PHẦN II 
THIẾT KẾ WEB SỬ DỤNG MS FRONTPAGE 
I. CÁC THAO TÁC CƠ BẢN 
1. Cỏc thao tỏc chớnh khi soạn thảo một trang web 
 Tạo mới một trang web: Chọn chức năng File/New/Page /Normal Page hay chọn 
icon New trờn Toolbar. 
 Lưu trang web: Chọn chức năng File/Save hay chọn icon Save trờn Toolbar. Để 
lưu trang web dưới dạng một tờn khỏc chọn chức năng File/Save As 
 Xem trước hiển thị của trang web đang thiết kế: Chọn chức năng File/Preview 
in Browser. Lỳc này cửa sổ trỡnh duyệt Internet Explorer (IE) sẽ hiển thị trang 
web mà chỳng ta đang soạn thảo. Nờn lưu trang web trước khi chọn chức năng 
này. 
 Cửa sổ màn hỡnh soạn thảo trang web cung cấp 3 cỏch “hiểu” (view) khỏc 
nhau về 1 trang web. 
o Nếu bạn chọn Normal view, bạn cú thể biờn tập trang web dưới dạng 
WYSIWYG. Vớ dụ bạn cú thể gừ văn bản vào, thay đổi màu sắc, kớch 
thước chữ,  b 
o Nếu bạn chọn HTML view, bạn sẽ thấy được cỏc mó HTML tương ứng với 
cỏch trỡnh bày của trang web của bạn. Vớ dụ, nếu trong Normal view 
bạn chốn vào một table thỡ trong HTML view, bạn sẽ thấy cỏc tag tương 
ứng như sau: 
   
o Nếu bạn chọn Preview view, tương tự với chức năng Preview in Browser 
2. Tạo cỏc thành phần của trang web\ 
2.1. Thời gian cập nhật (Time stamp) 
 Chọn Insert/Date and Time. 
 Chọn định dạng ngày thỏng và thời gian phự hợp với nhu cầu của bạn 
2.2. Đường kẻ ngang (Horizontal line) 
 Chọn Insert/Horizotal line. 
 Đặt cỏc thuộc tớnh cho đường kẻ ngang bằng cỏch double click chuột lờn nú. 
Sau đú chọn cỏc thụng số về Width, Height, Color, Alignment 
2.3. List 
 Chọn Format/Bullets and Numbering. 
 Sau khi hộp hội thoại xuất hiện, bạn hóy chọn cỏc dạng bullet và numbering 
tương ứng. 
 Để thay đổi cỏc thuộc tớnh của bullet như màu sắc, kiểu chữ, , ta chọn 
Format/Bullets and Numbering/Style 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
19
 Ngoài ra, ta cũn cú thể chọn hỡnh ảnh để thay cho cỏc kiểu bullet thụng 
thường. Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, rồi 
chọn ảnh dựng để làm bullet 
 Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets. 
2.4. Tables 
 Người ta thường dựng table để: 
o Hiển thị cỏc thụng tin cú dạng dũng/cột, vớ dụ như bảng thời khúa biểu, 
thụng tin sản phẩm, .. 
o Trỡnh bày (layout) cỏc văn bản(text) và cỏc ảnh đồ họa(graphics). 
 Để tạo một bảng, ta cú thể dựng một trong hai cỏch: 
o Chọn Table/Insert Table. Khi hộp hội thoại tạo bảng hiện ra, bạn phải 
cung cấp cỏc thụng tin chi tiết cho việc tạo bảng, vớ dụ như số dũng, số 
cột, kớch thước, ... 
o Chọn Table/Draw Table. Với chức năng này, bạn sẽ dựng bỳt vẽ để tạo 
cỏc dũng, cột 
 Để khụng hiện (hide) border của bảng, ta click phải chuột lờn table, chọn Table 
Properties/Border/Sizes bằng 0. 
 Để tỏch một cell hay trộn nhiều cell lại, ta chọn Tabe rồi chọn Split /Merge 
Cells. 
 Để thờm hoặc xúa cỏc cell, ta chọn Table rồi chọn Insert/Delete Cells. 
2.5. Một số hiệu ứng đặc biệt 
 Chuyển trang (Page transition): Chọn Format/Page Transition 
 Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn 
Insert/Component/Marquee. Sau khi hộp thoại hiện ra, bạn gừ vào dũng chữ 
cần chuyển động và đặt cỏc thuộc tớnh khỏc như màu sắc, font chữ,  
 Thờm hiệu ứng font chữ cho cỏc hyperlink: Chọn Format/Background, check 
vào Enable hyperlink rollover effects. Sau đú bạn cú thể chọn cỏc màu theo ý 
muốn. 
2.6. Chốn ảnh 
 Chọn chức năng Insert/Picture/From File. 
 Đặt thuộc tớnh và kớch thước của ảnh, click phải chuột lờn ảnh, rồi chọn 
Picture Properties. 
 Để tạo cỏc hotspot hyperlink, ta chọn hỡnh vẽ tương ứng (hỡnh chữ nhật, 
ellipse, ) trờn thanh toolbar pictures. Chọn vựng trờn ảnh, rồi điền thụng tin 
của hyperlink vào 
2.7. Chốn hyperlink 
 Chọn chức năng Insert/Hyperlink. 
 Sau khi hộp thoại hiện ra, gừ vào hyperlink tương ứng. Cú 3 dạng: 
o Địa chỉ Internet, cú dạng: http:// Vớ dụ: http:// www.yahoo.com 
o Liờn kết tới một trang trong site, cú dạng: /thư mục/tờn tập tin. Vớ dụ: 
../images/shopping.htm 
o Liờn kết ngay chớnh trong trang, đặt bằng bookmark. 
3. Định dạng trang 
 Click phải chuột lờn trang, chọn Page Properties. 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
20
 Để đặt màu nền cho trang, chọn Background/Colors/Background 
 Để đăt ảnh nền cho trang, chọn Background/Formatting/Background picture. 
 Để đặt cỏc thụng số về màu sắc cho hyperlink, chọn 
Background/Colors/Hyperlink 
 Để đặt tiờu đề cho trang chọn General/Title. 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
21
II. THỰC HÀNH 
1. Tạo trang web cho nhúm. 
 Khởi động Microsoft Front Page 2000. 
 Soạn trang web cỏ nhõn của nhúm đặt tờn là InfoGroup.htm (vớ dụ 
nhúm 1 sẽ lấy tờn là InfoGroup1.htm). Cỏc thụng tin chớnh của cỏc thành 
viờn trong nhúm bao gồm: Họ và tờn, Cụng việc và chức vụ hiện nay, Địa chỉ 
liờn lạc, Điện thoại, Fax, Email, Mobile Phone, ... Ngoài ra cỏc nhúm cú thể bổ 
sung cỏc thụng tin khỏc. 
 Upload trang web đó soạn lờn website. 
 Thử truy cập trang web đó tải lờn. 
2. Tham khảo cỏc site thụng tin của Việt Nam 
  
  
  
3. Tham khảo cỏc site bỏn hàng nổi tiếng 
  
  
4. Tham khảo cỏc site giải trớ 
  
  
  
  
  
5. Tham khảo cỏc site về lao động việc làm tại VN 
  
  
  
6. Tạo trang web chứa các hyperlink dùng để truy cập nhanh 
 Tạo trang web đặt tờn là Links.htm chứa cỏc hyperlink đó đề cập ở trờn. Bổ 
sung thờm cỏc hyperlink và cỏc phõn loại khỏc mà cỏc anh chị đó biết. 
 Upload lờn website và kiểm tra lại. 
7. Tạo trang HomePage 
 Tạo trang web HomePage đặt tờn là Default.htm giới thiệu về nhúm và cỏc 
cụng việc mà nhúm đang triển khai. 
 Kết nối hai trang đó tạo vào HomePage. 
 Upload lờn website và kiểm tra lại. 
8. Chọn chủ đề để thiết kế website 
 Website về dịch vụ việc làm. 
 Website về dịch vụ nhà đất ( 
 Website bỏo điện tử ( ) 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
22
 Website trường học. 
 Website bỏn hàng (cửa hàng, siờu thị ảo trờn Internet) 
 Website dịch vụ giải trớ như ECards, Điện hoa, ... 
 Cỏc chủ đề khỏc... 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
III. ĐĂNG KÍ WEBSITE MIỄN PHÍ TRÊN INTERNET 
 1. Vào địa chỉ  để đăng kớ website miễn phớ với địa chỉ 
truy cập cú dạng  
2. Gừ vào địa chỉ mà bạn dự định đăng kớ tại ụ yourname. Sau đú click Go. Màn hỡnh 
tiếp theo sẽ hiện ra, bạn chọn mục cuối cựng 100% Free Hosting Option và click 
vào SignUp 
Giáo trình thiết kế Web 
23
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
3. Sau đú bạn hóy điền vào cỏc thụng tin liờn quan cần thiết như Họ tờn, mật khẩu, 
email,  Cuối cựng gừ vào ARTK để chắc rằng bạn đó đồng ý với cỏc qui định của 
FreeServers khi cung cấp dịch vụ miễn phớ này. 
4. Nếu đăng kớ thành cụng, màn hỡnh sau sẽ hiện ra để cung cấp cho bạn một số lựa 
chọn khi xõy dựng website của mỡnh. 
Giáo trình thiết kế Web 
24
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
25
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU 
1. Thiết kế website theo mẫu sau ( 
2. Thiết kế website theo mẫu sau ( 
Giáo trình thiết kế Web 
26
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
3. Thiết kế website theo mẫu sau ( 
4. Thiết kế website theo mẫu sau ( 
Giáo trình thiết kế Web 
27
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
28
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
5. Thiết kế website theo mẫu sau ( 
6. Thiết kế website theo mẫu sau ( 
Giáo trình thiết kế Web 
29
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
30
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
7. Thiết kế website theo mẫu sau ( ) 
Để tham khảo cỏch thiết kế cỏc trang web trờn, hóy: 
- Tải về mỏy bằng cỏch chọn chức năng Save của IE. 
- Dựng MS Front Page để mở tập tin đó lưu lờn 
- Chuyển qua lại giữa cỏc màn hỡnh Normal View và HMTL View để biết cỏch 
thiết kế 
Với mỗi trang web đó xem hóy chỳ ý cỏc vấn đề sau: 
- Cỏch bố trớ cỏc bảng (table) 
- Cỏch sử dụng font chữ 
- Cỏch chốn vào cỏc hỡnh ảnh để trang trớ 
- Cỏch định nghĩa cỏc thuộc tớnh như màu chữ, màu nền, ... 
- Phần tĩnh (khụng thay đổi) mỗi khi click vào cỏc hyperlink chuyển qua một nội 
dung mới 
Từ cỏc trang web trờn, hóy tự thiết kế cỏc trang cho website của nhúm. 
Giáo trình thiết kế Web 
31
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
32
PHẦN I 
GIỚI THIỆU NGÔN NGỮ HTML .......................................................................1 
I. CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU............................................................1 
1.1 HTML.....................................................................................................................1 
1.2 HEAD.....................................................................................................................1 
1.3 TITLE.....................................................................................................................1 
1.4 BODY.....................................................................................................................1 
II. CÁC THẺ ĐỊNH DẠNG KHỐI .........................................................................2 
2.1. thẻ P .......................................................................................................................2 
2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6..................................................3 
2.3 Thẻ xuống dòng BR................................................................................................3 
2.4 Thẻ PRE..................................................................................................................3 
III. CÁC THẺ ĐỊNH DẠNG DANH SÁCH ...........................................................3 
3.1. Danh sách thông thường........................................................................................3 
IV. CÁC THẺ ĐỊNH DẠNG KÝ TỰ .....................................................................4 
4.1. Các thẻ định dạng in ký tự.....................................................................................4 
4.2. Căn lề văn bản trong trang Web ............................................................................5 
4.3. Các ký tự đặc biệt ..................................................................................................6 
4.4. Sử dụng màu sắc trong thiết kế các trang Web .....................................................6 
4.5. Chọn kiểu chữ cho văn bản ...................................................................................8 
4.6. Khái niệm văn bản siêu liên kết ............................................................................8 
4.7. Địa chỉ tương đối ...................................................................................................9 
4.8. Kết nối mailto ......................................................................................................10 
4.9. Vẽ một đường thẳng nằm ngang .........................................................................10 
V. CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH...................................................11 
5.1. Giới thiệu.............................................................................................................11 
5.2. Đưa âm thanh vào một tài liệu HTML ................................................................12 
5.3. Chèn một hình ảnh, một đoạn video vào tài liệu HTML.....................................13 
VI. CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU .........................................................14 
VII. FORM.........................................................................................................15 
7.1. HTML Forms.......................................................................................................15 
7.2. Tạo Form .............................................................................................................15 
7.3. Tạo một danh sách lựa chọn................................................................................16 
7.4. Tạo hộp soạn thảo văn bản ..................................................................................16 
Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -
0912378211 
Giáo trình thiết kế Web 
33
PHẦN II 
THIẾT KẾ WEB SỬ DỤNG MS FRONTPAGE.................................................18