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

LỜI MỞ ĐẦU 
Ngôn ngữ Siêu văn bản HTML (Hyper Text Markup Language) là ngôn ngữ 
biểu diễn văn bản cho phép ta đưa vào một văn bản nhiều thuộc tính cần thiết để 
có thể truyền thông quảng bá trên mạng toàn cục WWW (World Wide Web). HTML 
cho phép ta đưa hình ảnh đồ họa vào văn bản, thay đổi cách bày trí của văn bản, 
và tạo những tài liệu siêu văn bản có khả năng đối thoại tương tác với người dùng. 
HTML chủ yếu xoay quanh khái niệm “thẻ” (tag) làm nền tảng. Một ví dụ về 
tag là . Hầu hết các chức năng trên HTML có thẻ mở và thẻ đóng tạo thành 
một cặp giới hạn một đoạn văn bản. Ví dụ và là thẻ “bold” nghĩa là 
chữ béo. Toàn bộ đoạn văn bản giữa và sẽ được thể hiện dưới dạng chữ 
béo (hay chữ đậm) khi văn bản đó được xem bằng một trình duyệt tương ứng. Ví dụ 
 xin chào sẽ được hiện lên là xin chào. 
Để tạo một siêu văn bản, ta có thể dùng bất cứ một chương trình soạn thảo 
nào (ví dụ: NC-Norton Commander, EDIT - của DOS, NotePad hay Write - của 
Windows 3.x, WordPad của Win95, WinWord 2.0 hay 6.0, FoxPro, Borland C++ 
IDE, Borland Pascal IDE, FrontPage, TextPad, v.v), chỉ cần nắm được các thẻ 
của HTML, và khi ghi vào đĩa thì cần lưu dưới dạng file text. Tên file có đuôi mở 
rộng là HTM (hoặc HTML). Song có một hạn chế là dạng văn bản khi ta soạn với 
khi ta xem sau này (trên WWW) không giống nhau. Chính vì lẽ đó mà nhiều hãng 
tung ra phần mềm soạn siêu văn bản What You See Is What You Get (WYSIWYG-
cái ta thấy cũng là cái ta có được). Hãng Microsoft cũng đã tung ra một tiện ích 
được sử dụng rộng rãi. Ngoài ra, còn có nhiều tiện ích chuyển đổi từ dạng RTF (có 
thể soạn bằng WinWord hay WordPad) sang HTML, hay các phiên bản sau này 
của trình duyệt Web như NetScape có sẵn luôn chức năng này. Các tiện ích đó đều 
giống nhau ở chỗ cho phép ta gõ trực tiếp các thẻ vào văn bản nhưng cũng có thể 
dùng tổ hợp của thanh công cụ (toolbar), hộp thoại (dialog), thực đơn (menu) hay 
danh sách các lựa chọn (pop-up list). Để gạch dưới đoạn văn bản trong ví dụ vừa 
rồi, ta có thể gõ vào xin chào, dùng chuột chọn, rồi bấm vào nút Underline trên 
thanh công cụ. Văn bản sẽ tự động được chuyển thành xin chào (ở đây 
thì và là cặp mở/đóng của tag có chức năng giới hạn đoạn văn bản cần 
được gạch dưới). 
 1 
Ngày nay, do sự phát triển như thác lũ của mạng toàn cục, HTML cũng ngày 
càng trở nên phức tạp và hoàn thiện hơn để đáp ứng được những yêu cầu mới nảy 
sinh trong quá trình phát triển đó (như âm thanh, hình ảnh động, v.v). Người ta 
gọi đó là những phiên bản của HTML và đánh số để biểu thị. HTML 2, HTML 2+, 
HTML 3, là để chỉ những phiên bản sau này. 
Một trong những điểm mạnh của HTML là một văn bản bất kỳ nếu tuân thủ 
tiêu chuẩn HTML đều có thể hiện lên màn hình hay in ra, tóm lại là hiểu được, bởi 
bất kỳ loại phần mềm hay máy tính nào mà người đọc có, không phân biệt trình 
duyệt nào (NetScape trên Windows hay Lynx trên UNIX, thậm chí cho người khiếm 
thị bằng phần mềm đặc biệt). 
Người ta còn đang tranh cãi nhiều trên Internet về HTML “tốt”. Định hướng 
nguyên thủy của HTML là tạo ra một phương pháp vạn năng để lưu giữ và thể hiện 
thông tin. Sau này người ta coi HTML như một ngôn ngữ định hướng nội dung – 
“trong tài liệu có gì” quan trọng hơn nhiều so với “tài liệu có đẹp không”. 
Tác giả rất mong nhận được sự góp ý từ bạn đọc 
Xin chân thành cảm ơn. 
 2 
- Tên môn học: HTML VÀ THIẾT KẾ WEB 
- Mã số môn học: 3CI3 
- Thời gian: Lý thuyết + thực hành 45T 
- Mục tiêu: Cung cấp cho học viên các kiến thức cơ bản liên quan đến ngôn 
ngữ HTML và thiết kế Web. 
- Những kiến thức cần phải được trang bị trước khi học: Có kiến thức về sử 
dụng máy tính. 
- Nội dung môn học: 
Chương I: NHỮNG KHÁI NIỆM CƠ SỞ. 
Chương II: TRÌNH BÀY TRANG. 
Chương III: DANH SÁCH VÀ BẢNG TRONG HTML. 
Chương IV: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML. 
Chương V: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN. 
Chương VI: BÀY TRÍ NỀN VÀ KHUNG. 
Chương VII: BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET. 
Chương VIII: CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (Microsoft 
FrontPage 2003) 
- Đối tượng học: Những người cần biết các kiến thức cơ bản về HTML và 
Website để thiết kế Website tĩnh. 
- Biên soạn: Bộ môn Các hệ thống thông tin, Khoa Công nghệ thông tin, 
Trường ĐH Công Nghệ, ĐHQGHN. 
 3 
MỤC LỤC 
 LỜI MỞ ĐẦU 1 
CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ ...........................................................8 
I.1. World Wide Web là gì?.....................................................................................8 
I.2. HTML là gì? .................................................................................................... 11 
I.3. Các đặc điểm của siêu văn bản ..................................................................... 12 
I.3.1. Độc lập với phần cứng và phần mềm........................................................ 12 
I.3.2. Độc lập với khái niệm trang và thứ tự các trang ...................................... 13 
I.3.3. Website và trang chủ - homepage.............................................................. 13 
I.4. Soạn thảo văn bản - những vấn đề chung ................................................... 14 
I.4.1. Trang mã nguồn HTML và trang Web...................................................... 14 
I.4.2. Các thẻ HTML............................................................................................ 15 
I.4.3. Các quy tắc chung....................................................................................... 16 
I.4.4. Cấu trúc của một tài liệu HTML ............................................................... 17 
I.4.5. Các phần tử HTML (HTML element)....................................................... 18 
Bài tập...................................................................................................................... 18 
CHƯƠNG II. TRÌNH BÀY TRANG ..................................................................... 19 
II.1. Tạo tiêu đề ...................................................................................................... 19 
II.2. Thẻ trình bày trang ....................................................................................... 20 
II.2.1. Một số thẻ chính........................................................................................ 20 
II.2.2. Các thuộc tính của thẻ trình bày trang ..................................................... 24 
Bài tập...................................................................................................................... 26 
CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML ................................ 27 
III.1. Các kiểu danh sách ...................................................................................... 27 
III.1.1. Danh sách không đánh số thứ tự............................................................. 27 
III.1.2. Danh sách đánh số thứ tự ........................................................................ 28 
III.1.3. Danh sách các định nghĩa........................................................................ 30 
III.1.4. Danh sách phối hợp, lồng nhau............................................................... 30 
 4 
III.2. Bảng biểu....................................................................................................... 31 
III.2.1. Khung cấu trúc ......................................................................................... 31 
III.2.2. Một số lưu ý về bảng ............................................................................... 32 
III.2.3. Các ví dụ................................................................................................... 36 
Bài tập...................................................................................................................... 39 
CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML................................ 40 
IV.1. Hình ảnh tĩnh................................................................................................ 40 
IV.1.1. Tệp ảnh..................................................................................................... 40 
IV.1.2. Thẻ .......................................................................................... 40 
IV.2. Các thuộc tính của thẻ chèn hình ảnh....................................................... 40 
IV.2.1. Thuộc tính ALT ....................................................................................... 40 
IV.2.2. Thuộc tính WIDTH và HEIGHT............................................................ 41 
IV.2.3. Thuộc tính ALIGN .................................................................................. 42 
IV.2.4. Thuộc tính VSPACE và HSPACE ......................................................... 42 
Bài tập...................................................................................................................... 43 
CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN ...................................... 44 
V.1. Thẻ neo và mối liên kết ................................................................................. 44 
V.1.1. Thuộc tính HREF...................................................................................... 44 
V.1.2. Liên kết ra ngoài – External Links........................................................... 44 
V.1.3. Địa chỉ tuyệt đối........................................................................................ 45 
V.1.4. Địa chỉ tương đối ...................................................................................... 45 
V.1.5. Liên kết nội tại – Internal Link ................................................................ 45 
V.2. Dùng hình ảnh làm đầu mối liên kết .......................................................... 46 
V.2.1. Thay chữ bằng hình .................................................................................. 46 
V.2.2. Image Map - thẻ AREA............................................................................ 46 
V.3. Đưa âm thanh vào tài liệu ............................................................................ 47 
V.3.1. Liên kết đến tệp âm thanh ........................................................................ 47 
V.3.2. Tạo âm thanh nền...................................................................................... 47 
 5 
V.4. Đưa Video vào tài liệu ................................................................................... 48 
V.4.1. Chèn tệp Video.......................................................................................... 48 
V.4.2. Nhúng tệp video ........................................................................................ 48 
Bài tập...................................................................................................................... 49 
CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG......................................................... 50 
VI.1. Màu nền và văn bản .................................................................................... 50 
VI.1.1. Đặt màu nền ............................................................................................. 50 
VI.1.2. Màu chữ của văn bản............................................................................... 50 
VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK ..... 50 
VI.1.4. Thuộc tính và mã màu............................................................................. 51 
VI.2. Nạp hình ảnh làm nền cho trang văn bản................................................ 52 
VI.2.1. Thuộc tính BACKGROUND.................................................................. 52 
VI.2.2. Water mark............................................................................................... 52 
VI.2.3. Hãy ký tên vào tài liệu của mình ............................................................ 53 
VI.3. Khung – Frames........................................................................................... 54 
VI.3.1. Trang trí khung ........................................................................................ 54 
VI.3.2. Thành phần FRAMESET........................................................................ 55 
VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME ...................................... 58 
VI.4.1. Thiết lập Target........................................................................................ 58 
VI.4.2. Thẻ NOFRAMES .................................................................................... 59 
VI.4.2. Nhúng frame - thẻ IFRAME................................................................... 59 
Bài tập...................................................................................................................... 60 
CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET....... 61 
VII.1. FORM .......................................................................................................... 61 
VII.1.1. FORM là gì? ........................................................................................... 61 
VII.1.2.Các thành phần trong FORM ................................................................. 62 
VII.1.3. Thêm tính cấu trúc cho FORM.............................................................. 69 
VII.2. Cascading style sheet ................................................................................. 71 
 6 
VII.2.1. Inline Style.............................................................................................. 71 
VII.2.2. Giới thiệu Style Sheet ............................................................................ 73 
VII.2.3. Javascript Style Sheet ............................................................................ 74 
VII.2.4. Thuật ngữ Style Sheet ............................................................................ 76 
VII.2.5. Các chú thích trong Style Sheet ............................................................ 91 
VII.2.6. Lợi ích của các Style Sheet.................................................................... 91 
VII.2.7. Kết hợp Style Sheet với HTML ............................................................ 92 
VII.2.8. Thứ tự ưu tiên của các style (Cascading) ............................................. 96 
CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB 
(MICROSOFT FRONTPAGE 2003) ..................................................................... 99 
VIII.1. Tạo một trang Web................................................................................... 99 
VIII.1.1. Bắt đầu sử dụng FrontPage2003 .......................................................... 99 
VIII.1.2. Tạo một trang từ một template........................................................... 100 
VIII.1.3. Tạo và lưu một trang mới................................................................... 101 
VIII.1.4. Tạo một đề mục .................................................................................. 102 
VIII.1.5. Chọn font và màu................................................................................ 103 
VIII.2. Tổ chức một trang với các liên kết, danh sách ... a trang. 
Ví dụ: 
Có lần tôi thấy một người đi 
Chẳng biết về đâu nghĩ ngợi gì 
Chân bước hững hờ theo bóng lẻ 
Một mình làm cả cuộc phân ly 
Kết quả trả về một đoạn văn bản được căn giữa như sau: 
Có lần tôi thấy một người đi 
Chẳng biết về đâu nghĩ ngợi gì 
Chân bước hững hờ theo bóng lẻ 
Một mình làm cả cuộc phân ly 
Có lần tôi thấy một người đi 
Chẳng biết về đâu nghĩ ngợi gì 
Chân bước hững hờ theo bóng lẻ 
Một mình làm cả cuộc phân ly 
 25 
 Căn lề phải:  
Cả đoạn văn bản được căn lề bên phải của trang. 
Ví dụ: 
Có lần tôi thấy một người đi 
Chẳng biết về đâu nghĩ ngợi gì 
Chân bước hững hờ theo bóng lẻ 
Một mình làm cả cuộc phân ly 
Kết quả trả về một đoạn văn bản được căn lề bên phải như sau: 
b. Thuộc tính Clear của thẻ xuống dòng 
Thẻ xuống dòng cũng có 3 thuộc tính kèm theo như sau: 
Các thẻ được sử dụng khi chèn hình ảnh, để các dòng chữ xuất hiện bên dưới, 
bên trái hay bên phải của hình. 
c. Các kiểu đường kẻ ngang khác nhau 
Như ở phần trên đã giới thiệu, thẻ tạo một đường kẻ ngang chạy suốt 
chiều rộng cửa sổ màn hình. Các đường kẻ này có thể được thay đổi độ đậm 
(mảnh), ngắn, dài, căn lề trái, căn lề phải, bằng cách sử dụng các thuộc tính của 
chúng. 
Trong đó: 
Có lần tôi thấy một người đi 
Chẳng biết về đâu nghĩ ngợi gì 
Chân bước hững hờ theo bóng lẻ 
Một mình làm cả cuộc phân ly 
 26 
Thẻ, thuộc tính Miêu tả 
 Chèn dòng kẻ ngang suốt chiều rộng cửa sổ màn hình 
WIDTH = n% 
Thay đổi độ dài của đường kẻ, chiếm n% độ rộng cửa 
sổ màn hình. Nếu không có % đằng sau thì độ dài 
tính theo đơn vị pixcel 
SIZE = n 
Thay đổi độ đậm hay mảnh của đường kẻ. n là số 
pixcel 
ALIGN=LEFT|RIGHT 
Căn lề trái|phải. Đường kẻ ngang mặc định được căn 
chính giữa 
NOSHADE Không có bóng mờ, đường kẻ thành màu đen 
Bài tập 
1. Tiêu đề trong trang Web có mấy mức chính? 
2. Nêu các thuộc tính của thẻ Paragraph (). Hãy tạo một trang web đơn giản 
trong đó có sử dụng tiêu đề mức 2 và thẻ Paragraph (). 
3. Tạo một trang web đơn giản tự giới thiệu về mình, bạn bao nhiêu tuổi, bạn 
làm gì, sở thích của bạn. 
 27 
CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML 
III.1. Các kiểu danh sách 
Việc liệt kê danh sách sẽ làm cho văn bản trở nên sáng sủa và dễ theo dõi. 
Trong HTML có một số kiểu danh sách như danh sách đánh số thứ tự, danh sách 
không đánh số thứ tự, danh sách định nghĩa, danh sách kiểu bảng chọn và danh 
sách kiểu thư mục. 
Một số trình duyệt không hỗ trợ danh sách kiểu bảng chọn và danh sách kiểu 
thư mục. 
III.1.1. Danh sách không đánh số thứ tự 
Danh sách không đánh số thứ tự liệt kê các mục bằng một chấm tròn ở đầu 
mỗi mục. 
Cú pháp: 
 Mục thứ 1 
 Mục thứ 2 
Cặp thẻ  đánh dấu bắt đầu và kết thúc danh sách. Nó có tác 
dụng lùi lề trái danh sách vào sâu hơn. 
Các thẻ có tác dụng thể hiện bắt đầu một dòng mới với một chấm tròn. 
Ví dụ: 
 Mục thứ 1 
 Mục thứ 2 
 Mục thứ 3 
Kết quả trả về một danh sách sau: 
 Mục thứ 1 
 Mục thứ 2 
 Mục thứ 3 
 28 
Theo mặc định, mỗi mục thuộc mức thứ nhất của danh sách không đánh số 
thứ tự bắt đầu bằng một chấm tròn, còn mỗi mục thuộc mức thứ hai sẽ bắt đầu bằng 
một vòng tròng. 
Ta vẫn có thể thay đổi bằng cách sử dụng thuộc tính TYPE 
Cú pháp: 
hoặc 
Ví dụ: 
 Mục thứ 1 
 Mục thứ 2 
 Mục thứ 3 
Kết quả trả về một danh sách sau: 
III.1.2. Danh sách đánh số thứ tự 
Danh sách đánh số thứ tự giống như danh sách không đánh số thứ tự nhưng 
các chấm tròn ở đầu mỗi mục sẽ được thay bởi việc đánh số thứ tự các mục đó. 
Cú pháp: 
 Mục thứ 1 
 Mục thứ 2 
Cặp thẻ  đánh dấu bắt đầu và kết thúc danh sách. Nó có tác 
dụng lùi lề trái danh sách vào sâu hơn. 
o Mục thứ 1 
o Mục thứ 2 
o Mục thứ 3 
 29 
Các thẻ có tác dụng thể hiện bắt đầu một dòng mới với một số thứ tự 
tương ứng. 
Ví dụ: 
 Mục thứ 1 
 Mục thứ 2 
 Mục thứ 3 
Kết quả trả về một danh sách sau: 
Có thể dùng thuộc tính TYPE để lựa chọn các cách đánh thứ tự khác nhau 
khi bắt đầu mỗi mục trong một danh sách có đánh số thứ tự: 
Chữ in hoa A,B,C, (TYPE=A) 
Chữ in thường a,b,c, (TYPE=a) 
Chữ số La mã lớn I,II,III, (TYPE=I) 
Chữ số La mã nhỏ i, ii, iii, (TYPE=i) 
Số thứ tự 1,2,3,4, (TYPE=1), đây là lựa chọn mặc định 
Cú Pháp: 
Hoặc 
Ví dụ: 
 Mục thứ 1 
 Mục thứ 2 
 Mục thứ 3 
1. Mục thứ 1 
2. Mục thứ 2 
3. Mục thứ 3 
 30 
Kết quả trả về một danh sách sau: 
III.1.3. Danh sách các định nghĩa 
Danh sách các định nghĩa trông giống như một bảng từ vựng hay bảng giải 
thích các thuật ngữ lùi vào trong. 
Cú pháp: 
hoặc 
Ví dụ: 
 Mục thứ 1 
 Nội dung mục thứ 1 
 Mục thứ 2 
 Nội dung mục thứ 2 
 Mục thứ 3 
 Nội dung mục thứ 3 
Kết quả trả về một danh sách sau: 
III.1.4. Danh sách phối hợp, lồng nhau 
Các kiểu danh sách nêu trên đều có thể lồng nhau và lồng nhau nhiều mức. 
Ví dụ: 
I. Mục thứ 1 
II. Mục thứ 2 
III. Mục thứ 3 
Mục thứ 1 
 Nội dung mục thứ 1 
Mục thứ 2 
 Nội dung mục thứ 2 
Mục thứ 3 
 Nội dung mục thứ 3 
 31 
Mức 1 
Mức 1.1 
Mức 1.2 
Mức 2 
Mức 2.1 
Mức 2.2 
Kết quả trả về: 
III.2. Bảng biểu 
III.2.1. Khung cấu trúc 
Giới hạn bảng:  
Định nghĩa một hàng:  
Định nghĩa một ô:  
Ô chứa tiêu đề: . (H=Header) 
Đầu đề của bảng:  
Cú pháp tạo khung cấu trúc của một bảng: 
 Tên cột 1 
 Tên cột 2 
 ... 
 Ô 1 dòng 1 
 Mức 1 
 Mức 1.1 
 Mức 1.2 
 Mức 2 
 Mức 2.1 
 Mức 2.2 
 32 
 Ô 2 dòng 1 
 .... 
 ........ 
Ví dụ: 
 Họ và tên 
 Lớp 
 Quê quán 
 Bùi Thanh Trúc 
 K50CA 
 Hà Nội 
 Nguyễn Mai Hương 
 K50CB 
 Thanh Hóa 
Kết quả thu được bảng như sau: 
Họ và tên Lớp Quê quán 
Bùi Thanh Trúc K50CA Hà Nội 
Nguyễn Mai Hương K50CB Thanh Hóa 
III.2.2. Một số lưu ý về bảng 
Ô rỗng thì không có đường bao. Muốn ô rỗng có đường bao phải dùng dấu 
cách không bẻ dòng: 
  hoặc 
Có thể lợi dụng ROWSPAN và COLSPAN để tạo bảng có ô chồng chéo lên 
nhau nhưng không nên lạm dụng. 
 33 
Đôi lúc hình ảnh nằm ngoài ô ta muốn đưa hình ảnh đó vào. Nguyên nhân là 
do HTML được viết như sau: 
Dấu xuống dòng ở đây coi như dấu cách do đó có sự chồng chéo hình ảnh 
với ký tự trắng đó. Cách khắc phục như sau: 
Mặc định bảng không có đường bao nếu không đi với thuộc tính BORDER. 
Bảng có các thuộc tính sau: 
BORDER 
Để định nghĩa một bảng có đường bao. Tuy nhiên không làm ảnh hưởng tới 
độ rộng của bảng. 
BORDER= 
Cho phép khai báo độ dày của đường bao cho phép chỉnh đường bao ngoài 
đậm hơn đường bao trong để dễ nhìn hơn, mặt khác nếu giá trị bằng không lại cho 
phép dành chỗ cho số liệu bên trong, nhất là đối với những bảng compact. 
CELLSPACING= 
Khoảng cách giữa các ô. 
CELLPADDING= 
Khoảng cách giữa nội dung của ô và đường bao. 
Cho ta bảng compact nhất có thể có (dành tất cả cho nội dung). 
WIDTH= 
Nếu đi cùng với thuộc tính này có ý nghĩa mô tả chiều rộng mong 
muốn của bảng (tính tuyệt đối bằng pixels hay theo phần trăm so với bề rộng của 
tài liệu). Thường thì trình duyệt tự tính toán sao cho bảng được bố trí hợp lý. Dùng 
 34 
thuộc tính này bắt buộc trình duyệt cố gắng làm sao xếp được các ô vào bảng có bề 
rộng mong muốn đó. 
Nếu đi cùng với hay lại có ý nghĩa tương tự đối với một ô. 
ROWSPAN 
Cho biết ô hiện thời chiếm mấy hàng của bảng, mặc định là 1. 
ALIGN 
Nếu nằm trong nó có ý nghĩa đối với đầu đề của hàng nằm trên 
hay nằm dưới, có giá trị hoặc TOP hoặc BOTTOM (mặc định là TOP). 
Nếu nằm trong , hay có giá trị LEFT, CENTER hay RIGHT 
và điều khiển việc đặt nội dung của ô căn bên trái, vào giữa ô hay căn bên phải. 
VALIGN 
Nếu nằm trong , hay có thể có các giá trị TOP, MIDDLE, 
BOTTOM hay BASELINE để điều khiển việc đặt nội dung của ô lên trên, vào giữa 
(theo chiều dọc) hay xuống dưới và cũng có thể là tất cả cùng các ô trong hàng 
cùng căn theo một đường nằm ngang. 
Có nghĩa là dữ liệu bảng (Table Data), chỉ được xuất hiện trong một hàng 
của bảng. Mỗi hàng không nhất thiết phải có cùng số ô vì dòng ngắn hơn sẽ được 
chắp thêm ô rỗng vào bên phải. Mỗi ô chỉ được chứa các thành phần bình thường 
khác nằm trong phần thân của tài liệu. Các thuộc tính mặc định là: ALIGN=left và 
VALIGN=middle. Các mặc định này có thể thay đổi bởi các thuộc tính trong 
và lại thay đổi tiếp bởi thuộc tính ALIGN hoặc VALIGN khai báo riêng cho từng ô. 
Bình thường mặc định thì nội dung sẽ được bẻ dòng cho vừa vào khổ rộng của từng 
ô. Dùng thuộc tính NOWRAP trong để cấm việc đó. 
 cũng có thể chứa các thuộc tính NOWRAP, COLSPAN và 
ROWSPAN. 
NOWRAP 
Như nói ở trên, cần thận trọng khi dùng thuộc tính này để phòng có ô quá rộng. 
 35 
COLSPAN 
Có thể xuất hiện trong bất kỳ ô nào ( hay ) và chỉ rằng ô đó bành 
trướng ra mấy cột của bảng, mặc định là 1. 
Có nghĩa là tiêu đề của bảng (Table Header), các ô này tương tự như ô bình 
thường khác được định nghĩa bằng , có điều font chữ đậm và có thuộc tính 
mặc định là ALIGN=Center.  cũng có thể chứa thuộc tính 
VALIGN, NOWRAP, COLSPAN và ROWSPAN. 
Đặt đầu đề cho một bảng nên phải nằm trong một cặp song không 
được nằm trong hàng hay cột. Thuộc tính mặc định là ALIGN=Top (đầu đề đặt ở 
đầu bảng), song có thể đặt là ALIGN=Bottom (cuối bảng). Đầu đề có thể chứa bất 
kỳ thành phần nào một ô có thể chứa và luôn được căn lề vào giữa bảng (theo chiều 
ngang) và có thể cũng có bẻ dòng cho phù hợp. 
Dưới đây là bảng tóm tắt liệt kê các thuộc tính của thẻ xây dựng bảng: 
Thẻ/Thuộc tính Ý nghĩa 
<TABLE BORDER=n 
CELLSPACING=n 
CELLPADDING=n 
BGCOLOR="#rrggbb"> 
TABLE - Bắt đầu bảng 
BORDER - Đặt khung nổi 3D xung quanh bảng. Đặt 
BORDER=0 sẽ làm mất biên bao quanh. 
CELLSPACING - Đặt độ dầy của dòng kẻ ngang trong 
bảng. 
CELLPADDING - Đặt kích thước của một ô. 
BGCOLOR - Đặt màu nền của bảng. 
 B3/4t Đầu một dòng của bảng – Table row. 
B3/4t Đầu một ô của bảng (bắt đầu cột trong một 
bảng). 
Thẻ giống như nhưng cho chữ đậm và 
căn chính giữa - (heading). 
 Đặt tiêu đề (đầu đề) cho một bảng 
ALIGN=MIDDLE|RIGHT 
Thuộc tính dùng kèm bên trong các thẻ , 
hay để căn lề chữ trong một ô của bảng theo 
chiều ngang 
VALIGN=TOP|BOTTOM Thuộc tính dùng kèm các thẻ , hay 
 36 
để giãn một ô theo chiều ngang chiếm nhiều cột hơn 
các ô trên dòng khác. 
WIDTH=n% 
Thuộc tính dùng kèm các thẻ hay để đặt 
độ rộng của ô. 
COLSPAN=n 
Thuộc tính dùng kèm các thẻ hay để giãn 
một ô theo chiều ngang chiếm nhiều cột hơn các ô 
trên dòng khác. 
ROWSPAN=n 
Thuộc tính dùng kèm các thẻ hay để giãn 
một ô theo chiều đứng chiếm nhiều dòng hơn các ô ở 
cột khác 
 Kết thúc bảng 
III.2.3. Các ví dụ 
Ví dụ một bảng cơ bản gồm 2 dòng và 3 cột: 
 ABC 
 DEF 
Kết quả trả về: 
Ví dụ một bảng có Item 2 (tiêu thức 2) chiếm 2 hàng (dòng): 
 Item 1 
 Item 2 
 Item 3 
 Item 4 Item 5 
 37 
Kết quả trả về: 
Ví dụ một bảng có Item 1 (tiêu thức 2) chiếm 2 hàng (dòng): 
 Item 1 
 Item 2 Item 3 Item 4 
 Item 5 Item 6 Item 7 
Kết quả trả về: 
Ví dụ bảng có Item 2 (tiêu thức 2) chiếm 2 cột: 
 Item 1 
Item 2 
 Item 3 Item 4 Item 5 
Kết quả trả về: 
 38 
Ví dụ một bảng có tiêu đề: 
 Head 1 Head 2 Head 3 
 D E F 
Kết quả trả về: 
Ví dụ một bảng có tiêu đề chiếm 2 cột: 
 Head 1 
 Head 2 
 A B C D 
 E F G H 
Kết quả trả về: 
 39 
Bài tập 
1. Sửa phần giới thiệu của bạn (bài tập 3, chương 2) sao cho các mục đó đưa về 
dạng danh sách và liệt kê 5 thứ bạn thích nhất dưới dạng số. 
2. Áp dụng những gì đã học ở trên, hãy tạo một danh sách như sau: 
 Top level 1 
 Top level 2 
1. Second Level 
o Fact 1 
o Fact 2 
 Top level 3 
3. Áp dụng những gì đã học ở trên, hãy tạo bảng giống như sau: 
Tổng kết năm học 2003 - 2004 
Thống kê HS giỏi HS khá HS trung bình 
Lớp 1A 35 4 0 
Lớp 1B 20 10 12 
Lớp 1C 5 25 20 
 40 
CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML 
IV.1. Hình ảnh tĩnh 
IV.1.1. Tệp ảnh 
Mỗi ảnh được lưu giữ trong máy tính thành một tệp riêng biệt. Tệp ảnh có 
nhiều định dạng khác nhau, thể hiện qua phần mở rộng (đuôi) của tên tệp: *.bmp, 
*.gif, *.jpeg, *.jpg, 
Tuy nhiên các trình duyệt chỉ có thể “hiểu” được các tệp ảnh dưới dạng GIF 
hay JPEG. Hình ảnh dạng GIF được sử dụng rộng rãi nhất trên Internet, sau đó là 
đến các ảnh dạng JPEG. 
IV.1.2. Thẻ 
Cú pháp chèn ảnh vào trang Web: 
IMG (Image), thuộc tính SRC (Source) là đường dẫn đến nơi lấy tệp ảnh. Giá 
trị của thuộc tính SRC được gán bằng URL là một địa chỉ trên máy tính địa phương 
hay trên Internet. Nó chỉ ra nơi lưu trữ tệp ảnh cần chèn vào. 
Địa chỉ URL báo cho trình duyệt biết cần lấy tệp ảnh ở đâu. 
Nếu tệp ảnh nằm ngay trên máy tính địa phương thì cần ghi rõ đường dẫn 
Nếu tệp ảnh lấy từ một nơi khác trên Internet thì phải ghi đầy đủ địa chỉ URL 
Ví dụ: 
IV.2. Các thuộc tính của thẻ chèn hình ảnh 
Trong thẻ IMG còn có một số thuộc tính khác như: ALT, WIDTH, 
HEIGHT, ALIGN, VSPACE, HSPACE, BORDER 
IV.2.1. Thuộc tính ALT 
Thuộc tính ALT – ALTernative cho phép ta chèn một đoạn chữ thay thế vào 
chỗ có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào ảnh. Thuộc tính này 
dùng trong trường hợp trình duyệt không hiển thị được hình ảnh thì sẽ hiện dòng 
văn bản thay thế. Làm như vậy để những người sử dụng trình duyệt không có khả 
 41 
năng đọc ảnh hay đã tắt chức năng đọc ảnh để tăng tốc độ có thể biết được đó là 
hình ảnh gì và họ có thể chọn xem sau nếu có thời gian. 
Nên luôn sử dụng thuộc tính này khi đưa hình ảnh vào trang Web vì nhiều 
người muốn có tốc độ cao, lướt nhanh qua các thông tin là chính đã tắt chức năng 
đọc ảnh của trình duyệt vẫn có thể biết được ảnh đó mang nội dung gì. 
Ví dụ: 
 Hiện ảnh Ảnh (không hiện lên) khi có và không sử dụng thuộc tính ALT 
Nếu không sử dụng thuộc tính ALT thì tại chỗ có hình sẽ hiện từ IMAGE hoặc 
biểu tượng ảnh bị khuyết. 
IV.2.2. Thuộc tính WIDTH và HEIGHT 
Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều cao của 
ảnh. Giá trị này có thể tính theo phần trăm (%) hoặc pixel. 
Chú ý: 
Nếu đặt chiều rộng và chiều cao không chuẩn sẽ làm hình trong ảnh bị co 
giãn méo đi. Để khắc phục nhược điểm này, ta nên xử lý ảnh để kích thước phù 
hợp với yêu cầu. 
Ví dụ: 
 42 
IV.2.3. Thuộc tính ALIGN 
Thuộc tính ALIGN cho phép chỉnh lại vị trí của ảnh theo cả hai chiều ngang 
và chiều dọc. 
Theo chiều dọc: ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM 
ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM 
Theo chiều ngang: ALIGN=LEFT, ALIGN=RIGHT 
ALIGN=LEFT ALIGN=RIGHT 
Nếu như không có thuộc tính này thì mặc định ảnh được đặt tại đúng nơi đặt 
thẻ IMG dóng trên cùng dòng chữ, theo cạnh dưới của khung nhìn. 
IV.2.4. Thuộc tính VSPACE và HSPACE 
Khi sử dụng thuộc tính ALIGN, ảnh được chèn vào dòng văn bản với các 
chữ dính sát liền. Thuộc tính VSPACE và HSPACE dùng để tạo khoảng trống nhỏ 
viền xung quanh ảnh (tính theo đơn vị pixel). 
VSPACE=n Thêm khoảng trống theo chiều dọc 
HSPACE=n Thêm khoảng trống theo chiều ngang 
Ví dụ: 
 43 
Bài tập 
1. Hãy cho biết tại sao các ảnh dưới đây có thể được nhúng vào trong một tài liệu 
HTML? Viết đoạn code được dùng để nhúng các ảnh đó. 
2. Tạo một trang web và chèn các ảnh sao cho ảnh nằm ở phía bên trái, và các 
đoạn văn bản nằm bên phải. 
3. Tạo một trang web và chèn các ảnh sao cho ảnhh được căn giữa và các đoạn 
văn bản nằm ở trên hoặc ở bên dưới.