Giáo trình thiết kế Web - Chu Văn Hoàng

Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
1 
... Toàn bộ nội của tài liệu được đặt ở đây 
Tiêu đề của tài liệu 
Phần I 
Giới thiệu ngôn ngữ Html 
I. Các liệu 
1.1 HTML thẻ định cấu trúc tài 
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: 
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 
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: 
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ẻ. 
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
2 
.... phần nội dung của tài liệu được đặt ở đây 
Tiêu đề của tài liệu 
... Nội dung của tài liệu 
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: 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
3 
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: 
III. Các thẻ định dạng danh sách 
3.1. Danh sách thông th-ờng 
Cú pháp: 
Văn bản đã được định dạng 
 Mục thứ nhất 
 Mục thứ hai 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
4 
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. 
 ... 
 ... 
In chữ đậm 
 ... 
 ... 
In chữ nghiêng 
 Muc thu nhat 
 Muc thu hai 
 Muc thu ba 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
5 
 ... In chữ gạch chân 
 Đánh dấu đoạn văn bản giữa hai thẻ này là 
đị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 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
6 
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: 
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 
#FF0000 
#8B0000 
#00FF00 
#90EE90 
#0000FF 
RED 
DARKRED 
GREEN 
LIGHTGREEN 
BLUE 
 Văn bản sẽ được căn giữa trang 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
7 
Vàng 
Vàng nhạt 
Trắng 
Đen 
Xám 
Nâu 
Tím 
Tím nhạt 
Hồng 
Da cam 
Màu đồng phục hải quân 
#FFFF00 
#FFFFE0 
#FFFFFF 
#000000 
#808080 
#A52A2A 
#FF00FF 
#EE82EE 
#FFC0CB 
#FFA500 
#000080 
#4169E1 
#7FFFD4 
YELLOW 
LIGHTYELLOW 
WHITE 
BLACK 
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ở 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
8 
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 
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). 
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. 
 /~dir1/dir2/dir3/index.HTML#chapter001 
Dịch vụ 
 ...  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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
23 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
24 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
25 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
26 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
27 
3. Thiết kế website theo mẫu sau ( 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
28 
4. Thiết kế website theo mẫu sau ( 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
29 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
30 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
31 
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 : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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............................................................................................. 10 
4.8. Kết nối mailto.................................................................................................. 10 
4.9. Vẽ một đường thẳng nằm ngang ...................................................................... 11 
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.............................................................. 13 
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 ........................................................................................................ 16 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 
33 
7.1. HTML Forms .................................................................................................. 16 
7.2. Tạo Form......................................................................................................... 16 
7.3. Tạo một danh sách lựa chọn............................................................................. 1 7 
7.4. Tạo hộp soạn thảo văn bản............................................................................... 1 7 
Phần II 
thiết kế web sử dụng ms frontpage ................................................ 18