Giáo trình Thiết kế và quản trị web (Phần 1)

BỘ CÔNG THƯƠNG 
TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG 
KHOA ĐIỆN TỬ TIN HỌC 
BỘ MÔN ĐIỆN TỬ VIỄN THÔNG 
 
LƯU VĂN ĐẠI 
LẠI NGUYỄN DUY 
GIÁO TRÌNH 
THIẾT KẾ VÀ QUẢN TRỊ WEB 
(GIÁO TRÌNH DÙNG CHO HỆ CAO ĐẲNG NGÀNH 
CNKT ĐIỆN TỬ, TRUYỀN THÔNG 
CHUYÊN NGÀNH CNKT VIỄN THÔNG VÀ MẠNG MÁY TÍNH) 
THÀNH PHỐ HỒ CHÍ MINH, 09 - 2018 
 (LƯU HÀNH NỘI BỘ) 
MỤC LỤC 
CHƯƠNG 1. TỔNG QUAN VỀ THIẾT KẾ WEB ...........................................................1 
1.1. Khái quát về Internet ................................................................................................1 
1.2. Phương thức kết nối ..................................................................................................3 
1.3. Địa chỉ IP và tên miền ...............................................................................................5 
1.4. World Wide Web và HTML ....................................................................................9 
1.5. Các nhà cung cấp dịch vụ Internet ........................................................................12 
1.6. Giới thiệu một số dịch vụ Internet thông dụng ....................................................13 
1.7. Thiết kế web .............................................................................................................17 
CHƯƠNG 2. TỔNG QUAN VỀ HTML ...........................................................................24 
2.1. Các thẻ định cấu trúc tài liệu .................................................................................24 
2.2. Các thẻ định dạng khối ...........................................................................................25 
2.3. Các thẻ định dạng danh sách .................................................................................26 
2.4. Các thẻ định dạng ký tự ..........................................................................................27 
2.5. Các thẻ chèn âm thanh, hình ảnh ..........................................................................33 
2.6. Các thẻ định dạng bảng biểu .................................................................................36 
2.7. FORM .......................................................................................................................37 
CHƯƠNG 3. SỬ DỤNG DREAMWEAVER THIẾT KẾ WEBSITE ...........................43 
3.1. Tạo thư mục chứa bộ web ......................................................................................43 
3.2. Tạo mới một trang web ...........................................................................................44 
3.3. Lưu một trang web ..................................................................................................44 
3.4. Định dạng trang web. ..............................................................................................44 
3.5. Xem trang web trên trình duyệt ............................................................................46 
3.6. Tạo bảng trong trang web ......................................................................................46 
3.7. Chèn hình vào trang web ........................................................................................49 
3.8. Chèn ảnh động flash, video clip vào trang web. ...................................................51 
3.9. Tạo menu cho trang web. .......................................................................................51 
3.10. Tạo liên kết cho trang web. ..................................................................................57 
3.11. Cách tạo Template ................................................................................................58 
3.12. Tạo trang web mới từ template ............................................................................60 
3.13. Đưa website lên hosting ........................................................................................61 
CHƯƠNG 4. CASCADING STYLE SHEETS ................................................................65 
4.1. CSS là gì? ................................................................................................................65 
4.2. Lợi ích việc sử dụng CSS .......................................................................................65 
4.3. Sử dụng CSS ...........................................................................................................65 
4.4. Cú pháp CSS ...........................................................................................................66 
4.5. Thứ tự ưu tiên và tính kế thừa ...............................................................................70 
4.6 Các thuộc tính ..........................................................................................................79 
CHƯƠNG 5. JAVASCRIPT ............................................................................................126 
5.1. JavaScript là gì .....................................................................................................126 
5.2. Chèn mã Javascript ..............................................................................................126 
5.3. THẺ VÀ ...........................................................127 
5.4 Các lệnh xuất thông báo cơ bản ...........................................................................127 
5.5 Chèn chuỗi vào nội dung trang HTML ...............................................................128 
5.6 Biến-Kiểu dữ liệu ...................................................................................................129 
5.7 Các Lệnh ................................................................................................................131 
5.8 Hàm (FUNCTIONS) .............................................................................................138 
5.9 Sự kiện ....................................................................................................................142 
5.10. Các đối tượng trong javascript ..........................................................................146 
5.11. Các phần tử của đối tượng form ........................................................................164 
5.12. Jquery cơ bản ......................................................................................................186 
CHƯƠNG 6. QUẢN TRỊ WEBSITE ..............................................................................222 
6.1. Đăng kí website miễn phí trên internet ...............................................................222 
6.2. WordPress là gì? ....................................................................................................224 
6.3. WordPress.com và WordPress.org khác nhau như thế nào? ...........................225 
6.4. Cài Đặt WordPress ................................................................................................226 
6.5. Các Chức Năng Chính Trong WordPress ..........................................................233 
 1 
CHƯƠNG 1. TỔNG QUAN VỀ THIẾT KẾ WEB 
1.1. Khái quát về Internet 
1.1.1. Internet là gì? 
Internet là một liên mạng máy tính toàn cầu được hình thành từ các mạng nhỏ hơn, liên kết 
hàng triệu máy tính trên thế giới thông qua cơ sở hạ tầng viễn thông. Internet là mạng của 
các mạng máy tính. Trong mạng này, các máy tính và thiết bị mạng giao tiếp với nhau bằng 
một ngôn ngữ thống nhất. Đó là bộ giao thức TCP/IP (Transmision Control Protocol – 
Internet Protocol). 
1.1.2. Lịch sử phát triển 
Internet được hình thành từ năm 1969, từ một dự án nghiên cứu của Bộ quốc phòng Mỹ. 
Lúc đó Internet chỉ liên kết 4 địa điểm: Viện Nghiên cứu Standford, Trường Đại học tổng 
hợp California ở LosAngeles, UC – Santa Barbara và Trường Đại học Tổng hợp Utah. 
Mạng này được biết đến dưới cái tên ARPANET. 
ARPANET càng phát triển khi có nhiều máy nối vào – rất nhiều trong số này là từ các cơ 
quan của Bộ quốc phòng Mỹ hoặc những trường đại học nghiên cứu với các đầu nối vào 
Bộ quốc phòng. Đây là những giao điểm trên mạng. Trong khi ARPANET đang cố gắng 
chiếm lĩnh mạng quốc gia thì một nghiên cứu tại Trung tâm nghiên cứu Palo Alto của công 
ty Xerox đã phát triển một kỹ thuật được sử dụng trong mạng cục bộ là Ethernet. 
Theo thời gian, Ethernet trở thành một trong những chuẩn quan trọng để kết nối trong các 
mạng cục bộ. Cũng trong thời gian này, DARPA (đặt lại tên từ ARPA) chuyển sang hợp 
nhất TCP/IP (giao thức được sử dụng trong việc truyền thông trên Internet) vào phiên bản 
hệ điều hành UNIX của trường đại học tổng hợp California ở Berkeley. Với sự hợp nhất 
như vậy, những trạm làm việc độc lập sử dụng UNIX đã tạo nên một thế mạnh trên thị 
trường, TCP/IP cũng có thể dễ dàng tích hợp vào phần mềm hệ điều hành. TCP/IP trên 
Ethernet đã trở thành một cách thức thông dụng để trạm làm việc nối đến trạm khác. 
Trong thập kỷ 1980, máy tính cá nhân được sử dụng rộng rãi trong các công ty và trường 
Đại học trên thế giới. Mạng Ethernet kết nối các máy tính cá nhân (PC) trở thành phổ biến. 
Các nhà sản xuất phần mềm thương mại cũng đưa ra những chương trình cho phép các 
máy PC và máy UNIX giao tiếp cùng một ngôn ngữ trên mạng. 
Vào giữa thập kỷ 1980, giao thức TCP/IP được dùng trong một số kết nối khu vực – khu 
vực (liên khu vực) và cũng được sử dụng cho các mạng cục bộ và mạng liên khu vực. 
Thuật ngữ "Internet" xuất hiện lần đầu vào khoảng 1974 trong khi mạng vẫn được gọi là 
ARPANET. Vào thời điểm này, ARPANET (hay Internet) còn ở qui mô rất nhỏ. 
 2 
Mốc lịch sử quan trọng của Internet được chọn vào giữa thập kỷ 1980, khi Quỹ khoa học 
quốc gia Mỹ NSF (National Science Foundation) thành lập mạng liên kết các trung tâm 
máy tính lớn với nhau gọi là NSFNET. Mạng này chính là mạng Internet. Điểm quan trọng 
của NSFNET là cho phép mọi người cùng sử dụng. Trước NSFNET, chỉ các nhà khoa học, 
chuyên gia máy tính và nhân viên các cơ quan Chính phủ được kết nối Internet. 
Nhiều doanh nghiệp đã chuyển từ ARPANET sang NSFNET. Chính vì vậy, sau gần 20 
năm ARPANET trở nên không còn hiệu quả và đã ngừng hoạt động vào khoảng năm 1990. 
Ngày nay, mạng Internet phát triển mạnh mẽ hơn các phương tiện truyền thông truyền 
thống khác như phát thanh và truyền hình, do sự cải tiến và phát triển không ngừng. Các 
công nghệ đang áp dụng trên Internet giúp cho Internet trở thành mạng liên kết vô số kho 
thông tin toàn cầu, có dịch vụ phong phú về nội dung, hình thức. Đó cũng chính là điều 
thúc đẩy chúng ta nên bắt đầu ngay với hành trình khám phá thế giới mới – thế giới Internet. 
1.1.3. Cấu trúc Internet 
 Internet là một liên mạng kết nối các mạng nhỏ hơn với nhau. Như vậy, cấu trúc Internet 
gồm các mạng máy tính được kết nối với nhau thông qua các kết nối viễn thông. Thiết bị 
dùng để kết nối các mạng máy tính với nhau là cổng nối Internet (Internet Gateway) hoặc 
Bộ định tuyến (Router). 
Hình 1.1. Cấu trúc Internet 
Tuy nhiên, đối với người dùng, Internet chỉ là một mạng duy nhất. 
 3 
Hình 1.2. Internet dưới góc nhìn của người sử dụng 
1.2. Phương thức kết nối 
Để có thể sử dụng các dịch vụ Internet, người dùng phải kết nối máy tính của mình với 
Internet. Có nhiều phương thức kết nối với nhiều tốc độ khác nhau, tùy thuộc vào nhu cầu 
sử dụng và điều kiện của người sử dụng. 
1.2.1. Kết nối thông qua kênh thuê riêng 
Trong phương thức kết nối này, máy tính hay mạng máy tính của người sử dụng được kết 
nối trực tiếp tới nhà cung cấp dịch vụ Internet thông qua một kênh thuê riêng do nhà cung 
cấp dịch vụ Viễn thông cấp. 
Hình 1.3. Kết nối qua kênh thuê riêng 
Đặc điểm của phương thức này là kết nối luôn thường trực, nghĩa là bạn có thể truy nhập 
Internet bất cứ lúc nào. Tuy nhiên, giá thành sử dụng kết nối này rất cao vì bạn phải trả tiền 
thuê bao theo tháng chứ không phải trả theo dung lượng sử dụng. Phương thức kết nối này 
thường được những nhà cung cấp dịch vụ trực tuyến sử dụng. 
1.2.2. Kết nối quay số qua mạng điện thoại 
 4 
Trong phương thức kết nối này, người dùng kết nối với Internet thông qua mạng điện thoại. 
Để kết nối, người dùng cần có một đường điện thoại và một thiết bị kết nối có tên modem. 
Máy tính của người dùng kết nối với Modem và modem được kết nối tới đường điện thoại. 
Hình 1.4. Kết nối quay số qua mạng điện thoại 
Hiện nay, dịch vụ kết nối này đều được các nhà cung cấp dịch vụ Viễn thông cung cấp. 
Khi người sử dụng đăng ký, nhà cung cấp sẽ cấp cho họ một tài khoản để truy nhập và số 
điện thoại cần gọi. Kết nối kiểu này không luôn thường trực. Khi muốn sử dụng dịch vụ, 
người dùng phải quay số đến số điện thoại do nhà cung cấp dịch vụ cấp. Sau đó nhập tên 
truy nhập và mật khẩu để đăng nhập. Kiểu kết nối này thường được người dùng cá nhân sử 
dụng vì giá thành rẻ và dễ lắp đặt. 
1.2.3. Kết nối qua ADSL 
Kết nối Internet qua ADSL là một dịch vụ mới và đang rất phổ biến. ADSL là công nghệ 
truy nhập bất đối xứng, tốc độ đường xuống lớn hơn tốc độ đường lên. Đặc điểm này rất 
phù hợp với truy nhập Internet vì người dùng thường lấy thông tin từ Internet xuống nhiều 
hơn gửi thông tin lên Internet. 
Người dùng có thể đăng ký dịch vụ này ngay trên đường dây điện thoại sẵn có của mình 
chứ không nhất thiết phải mắc thêm một đường dây mới. Để sử dụng, người dùng cần có 
ADSL modem. Máy tính của người dùng kết nối tới ADSL modem và modem này được 
kết nối với đường dây điện thoại đã đăng ký dịch vụ ADSL. 
 5 
Hình 1.5. Kết nối qua ADSL 
Đặc điểm của phương thức này là kết nối mạng cũng luôn thường trực (sau khi kết nối 
được tự động thực hiện) nhưng người dùng chỉ phải trả tiền cho những thời gian sử dụng. 
Cụ thể, các nhà cung cấp dịch vụ hiện nay đều tính cước dựa trên dung lượng thông tin 
người dùng tải xuống và tải lên Internet. 
1.3. Địa chỉ IP và tên miền 
1.3.1. Địa chỉ IP 
Các máy tính trên Internet giao tiếp với nhau sử dụng bộ giao thức TCP/IP. Để các máy 
tính có thể liên lạc với nhau, mỗi máy tính cần có một địa chỉ liên lạc và địa chỉ này phải 
là duy nhất. Điều này cũng giống như các thuê bao trong mạng điện thoại di động phải có 
một số hiệu thuê bao (số máy) và số thuê bao này phải là duy nhất trong mạng. 
Bộ giao thức TCP/IP sử dụng địa chỉ IP để đánh địa chỉ cho các máy tính trong mạng. Mỗi 
địa chỉ IP bao gồm 32 bit, được chia thành 4 nhóm đều nhau, mỗi nhóm 8 bit. Các nhóm 
này được phân tách với nhau bởi một dấu chấm “.”. Cách biểu diễn địa chỉ IP phổ biến 
nhất là “thập phân dấu chấm”. Trong cách biểu diễn này, địa chỉ IP được chia thành 4 
nhóm, mỗi nhóm là một số thập phân và được phân tách với nhau bởi một dấu chấm. 
Cấu trúc địa chỉ IP là: A.B.C.D 
Trong đó: A, B, C, D là các số thập phân. Dó mỗi số thập phân này đều dược chuyển từ 
một số nhị phân 8 bit nên giá trị của chúng phải nằm trong khoảng từ 0 đến 255. 
Một số ví dụ về địa chỉ IP: 
- 10.10.10.10 
- 128.3.5.7 
- 192.168.10.1 
Địa chỉ IP đang được sử dụng hiện tại là (IPv4) có 32 bit. Hiện nay một số quốc gia đã đưa 
vào sử dụng địa chỉ IPv6 nhằm mở rộng không gian địa chỉ và những ứng dụng mới, IPv6 
bao gồm 128 bit dài gấp 4 lần của IPv4. Version IPv4 có khả nǎng cung cấp 232 = 
4294967296 địa chỉ. Còn Version IPv6 có khả nǎng cung cấp tới 2128 địa chỉ. 
Do địa chỉ IP phải là duy nhất nên cần có một tổ chức quản lý việc cấp phát địa chỉ I ... hư thế nào? 
4. Chuyển đổi chữ hoa, chữ thường 
5. Muốn hỗ trợ xuống dòng(không dùng ) khi trình bày thì làm 
như thế nào? 
4.6.3 Định dạng nền và hình ảnh 
background-color: màu nền 
background-image:hình nền 
background-repeat: lặp lại nền 
background-position: vị trí 
background-attachment: điều khiển cuộn 
 93 
background 
4.6.3.1 background-color background-color: | transparent 
mặc định: transparent 
Màu sắc trên Web:
 94 
Color keywords: tên màu 
Hexadecimal:màu biểu diễn bằng hệ Hexa 
Shorthand hexadecimal: màu biểu diễn bằng hệ Hexa gọn 
RGB values:hệ RGB theo giá trị (0-255) 
RGB percentage: hệ RGB theo% 
RGBA (RGB with alpha channel) 
Tham khảo phụ lục về Bảng màu 
body { 
background-color: #000; 
color: #FFF; 
} 
4.6.3.2 background-image background-image: | none Mặc định: 
none 
Ví dụ: 
body { 
background-image: url(bg-page.png); 
} 
Cần đặt hình bg-page.png cùng thư mục với file html 
4.6.3.3 background-repeat 
 95 
background-repeat: repeat | repeat-x | repeat-y | no-repeat 
Ví dụ: 
body { 
background-image: url(bg-page.png); 
background-repeat: no-repeat; 
} 
4.6.3.4 background-position 
background-position: [ [ | | left | center | 
right ] [ | | top | center | bottom ]? ] | [ [ 
left | center 
| right ] || [ top | center | bottom ] ] | inherit 
Mặc định: 0% 0% 
Ví dụ 1:
 96 
body { 
background-image: url(bg-page.png); background-repeat: no-repeat; 
background-position: bottom right; 
} 
Ví dụ 2: 
body { 
background-image: url(bg-page.png); background-repeat: no-repeat; 
background-position: right 100%; 
} 
4.6.3.5 background-attachment 
background-attachment: scroll | fixed 
Mặc định: scroll 
IE6 chỉ hỗ trợ fixed cho thẻ body 
body { 
background-image: url(bg-page.png); 
background-attachment: fixed; 
} 
4.6.3.6 background 
 97 
background: || || 
<’background- 
repeat’> || || 
Ví dụ: 
body { 
background: #CCC url(bg-page.png) repeat-x fixed top right; 
} 
4.6.4 Định dạng hộp (box model) 
Mô hình hộp 
Định dạng Margin 
Định dạng Padding 
Định dạng border 
Chỉnh chiều rộng và chiều cao
Chỉnh chiều rộng, chiều cao tối thiểu 
Xử lý tràn vùng 
Với các ví dụ bên dưới nên để border cho box để thấy rõ được ý nghĩa các thuộc 
tính. 
4.6.4.1 Margin 
margin: [ | | auto ] {1,4} 
margin-top: | | auto margin-right: | 
 | auto margin-bottom: | | auto 
margin-left: | | auto 
 98 
Ví dụ margin với 4 đối số: 
.intro { 
margin-top: 70px; margin-left: 100px; margin-bottom: 50px; margin-
right: 100px; 
} 
Với 4 đối số thì thứ tự sẽ là Trên Phải Dưới Trái 
Ví dụ margin với 3 đối số 
Sửa ví dụ trên margin: 70px 100px 50px 
Với 3 đối số thì thứ tự sẽ là trên phải trái dưới 
Với 2 đối số thì thứ tự sẽ là phải trái 
Với 1 đối số thì sẽ cho cùng một giá trị với cả 4 phía 
Hiện tượng co/giãn margin: 
Xảy ra khi margin của hai thẻ đụng nhau làm khoảng cách 2 thẻ thay đổi, hiện 
tượng này chỉ xảy ra với chiều dọc. 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
 99 
Figure 8-4 
.h1 { 
margin-bottom: 100px; 
} 
.intro { 
margin-top: 100px; 
} 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in 
literally 
hundreds of varieties with different flavors and textures. 
Canh lề theo chiều ngang với margin: 
 100 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
Figure 8-7 
h1 { 
width: 200px; 
margin-right: auto; 
} 
.intro { 
width: 200px; 
margin-right: auto; 
margin-left: auto; 
} 
.recipe { width: 200px; margin-left: auto; 
} 
 101 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in 
literally 
hundreds of varieties with different flavors and textures. 
Welsh Rarebit 
Welsh Rarebit is a savory dish made from melted 
cheese, often 
Cheddar, on toasted bread, and a variety of other ingredients 
such as mustard, 
egg, or bacon. Here is one take on this classic. 
Lightly toast the bread 
Place on a baking tray, and spread with butter. 
Add the grated Cheddar cheese and 2 tablespoons of beer to a 
saucepan. Place the saucepan over a medium heat, and stir the cheese 
continuously until it has melted. Add a teaspoon of wholegrain 
mustard and grind in 
a little pepper. Keep stirring. 
 102 
When thick and smooth, pour over each piece of toast spreading 
it to the edges to stop the toast from burning. 
Place under the grill for a couple of minutes or until golden 
brown. 
margin:auto sử dụng canh vào giữa(lưu ý cần sử dụng DOCTYPE) 
4.6.4.2 Border 
Độ rộng border 
border-top-width: thin | medium | thick | border-right-
width: thin | medium | thick | border-bottom-width: thin | 
medium | thick | border-left-width: thin | medium | thick | 
 border-width: {1,4} 
Mặc định: Medium 
Ví dụ: 
.intro { 
border-top-width: 1px; border-right-width: 3px; border-bottom-width: 
5px; border-left-width: 7px; border-style: solid; 
} 
 103 
Kiểu border 
border-style: {1,4} 
border-top-style: none | hidden | dotted | dashed | solid | double | 
groove 
| ridge | inset | outset 
border-right-style: none | hidden | dotted | dashed | solid | 
double | 
groove | ridge | inset | outset 
border-bottom-style: none | hidden | dotted | dashed | solid | 
double | 
groove | ridge | inset | outset 
border-left-style: none | hidden | dotted | dashed | solid | double | 
groove 
| ridge | inset | outset 
Mặc định:none 
Ví dụ: 
body { 
border-width: 3px; 
border-top-style: ridge; border-right-style: dashed; border-bottom-
style: dotted; border-left-style: double 
} 
Thay bằng border-style: ridge dashed dotted double; Màu sắc border: 
border-color: [ | transparent ] {1,4} 
 104 
border-top-color: [ | transparent ] border-right-color: [ 
 | transparent ] border-bottom-color: [ | transparent 
] border-left-color: [ | transparent ] 
Mặc định: là màu của thuộc tính color 
IE6, IE7 không hỗ trợ transparent cho màu border. Trong IE, transparent là màu 
đen. 
Khi màu border không được định nghĩa nó sẽ hiểu là màu của thuộc tính corlor 
Sử dụng thuộc tính tắt border 
border-top: || || border-right 
border-right: || || border-
right border-bottom: || || 
border-right border-left: || || 
border-right border: || || 
border-right 
Ví dụ 1: 
body { 
width: 600px; margin: 1em auto; border: 1px solid #666; 
} 
4.6.4.3 Padding 
padding: [ | ] {1,4} padding-top: [ | 
 ] padding-right: [ | ] padding-
bottom: [ | ] padding-left: [ | 
 ] 
Ví dụ: 
 105 
body { 
width: 600px; margin: 1em auto; border: 1px solid #666; padding: 
10px; 
} 
auto không hỗ trợ trong padding 
4.6.4.4 Các thuộc tính đo kích thước 
width 
width: | | auto 
Ví dụ: 
body { 
width: 600px; 
} 
height 
height: | | auto 
Ví dụ: 
body { 
width: 600px; 
height: 75px; 
 106 
border: 1px solid #666; 
} 
Giá trị auto với thuộc tính width và height ảnh hưởng khác nhau với mỗi thẻ. 
Với thẻ hay có thể tự động mở rộng để chứa thành phần trong nó(văn 
bản, hình ảnh, hay một box con). Những thẻ như vậy gọi là block-element. 
Độ đo %: là độ dài so với thẻ bao ngoài nó 
min-width, max-width, min-height, max-height nên được định nghĩa vì việc hiển 
thị phụ thuộc vào độ phân giải màn hình và việc sử dụng các giá trị thuộc tính như 
auto, hay % sẽ làm nội dung bị giãn hay co lại.(IE6 ko hỗ trợ) 
min-width và min-height 
Sử dụng để ràng buộc kích thước bé nhất của một thẻ, sử dụng để tránh việc 
co lại để vừa nội dung hay cửa sổ. 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
Figure 8-17 
body { 
min-width: 1000px; min-height: 250px; border: 1px solid #666; 
} 
 107 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in 
literally 
hundreds of varieties with different flavors and textures. 
Xuất hiện scroll-bar 
max-width và max-height 
Sử dụng để định nghĩa chiều rộng tối đa khi vùng nội dung được mở rộng. 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
Figure 8-18 
body { 
 108 
width: 600px; 
max-height: 100px; 
border: 1px solid #666; 
} 
.intro { 
max-width: 200px; 
} 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in 
literally 
hundreds of varieties with different flavors and textures. 
4.6.4.5 Tràn vùng 
 109 
overflow: visible | hidden | scroll | auto overflow-x: visible | 
hidden | scroll | auto overflow-y: visible | hidden | scroll | auto 
mặc định: visible 
Ví dụ 1: 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
Figure 8-19 
body { 
width: 600px; 
} 
h1 { 
width: 50px; 
overflow: hidden; 
} 
.recipe { height: 200px; overflow: auto; 
} 
 110 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in literally 
hundreds of varieties with different flavors and textures. 
Welsh Rarebit 
Welsh Rarebit is a savory dish made from melted 
cheese, 
often 
Cheddar, on toasted bread, and a variety of other ingredients 
such as mustard, 
egg, or bacon. Here is one take on this classic. 
Lightly toast the bread 
Place on a baking tray, and spread with butter. 
Add the grated Cheddar cheese and 2 tablespoons of beer to a 
saucepan. Place the saucepan over a medium heat, and stir the cheese 
continuously until it has melted. Add a teaspoon of wholegrain 
mustard and grind in 
a little pepper. Keep stirring. 
 111 
When thick and smooth, pour over each piece of toast spreading 
it to the edges to stop the toast from burning. 
Place under the grill for a couple of minutes or until golden 
brown. 
4.6.5 Trượt(floating) và canh chỉnh theo chiều dọc 
Thuộc tính float và cách sử dụng 
Thuộc tính clear 
Canh chỉnh theo chiều dọc (đoạn văn bản) 
4.6.5.1 Floating 
float: left | right | none 
Mặc định: none 
Ví dụ: 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
 112 
Figure 9-1 
h1 { 
float: left; 
} 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in 
literally hundreds of varieties with different flavors and 
textures. 
Nhận xét: Khi không để thuộc tính float(tức float:none), phần nội dung trong 
 nằm trên và nằm dưới. Thử điểu chỉnh left->right. 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
 113 
Figure 9-2 
.recipe h2 { 
float: left; 
} 
.recipe .intro, 
.recipe ol { float: right; width: 500px; 
} 
Recipes for Cheese 
Cheese is a remarkably versatile food, 
available in 
literallyhundreds of varieties with different flavors and 
textures. 
Welsh Rarebit 
 114 
Welsh Rarebit is a savory dish made from melted 
cheese, 
often 
Cheddar, on toasted bread, and a variety of other ingredients 
such as mustard, 
egg, or bacon. Here is one take on this classic. 
Lightly toast the bread 
Place on a baking tray, and spread with butter. 
Add the grated Cheddar cheese and 2 tablespoons of beer to a 
saucepan. Place the saucepan over a medium heat, and stir the cheese 
continuously until it has melted. Add a teaspoon of wholegrain 
mustard and grind in 
a little pepper. Keep stirring. 
When thick and smooth, pour over each piece of toast spreading 
it to the edges to stop the toast from burning. 
Place under the grill for a couple of minutes or until golden 
brown. 
 115 
Lưu ý: kết quả hiển thị phụ thuộc vào kích thước màn hình 
Ví dụ: Sử dụng thuộc tính float tạo form như hình sau: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
""> 
Example 9-1 
body { 
width: 600px; 
margin: 1em auto; 
} 
h1 { 
float: left; 
margin-top: 0; 
} 
.navigation { float: right; margin: 0; 
 116 
list-style: none; 
} 
.navigation li { 
float: left; 
} 
.navigation a { 
display: block;
 117 
margin-left: 0.5em; 
padding: 0.5em; 
border: 1px solid #CCC; 
color: #233; 
text-decoration: none; 
} 
.navigation a:focus, 
.navigation a:hover { background: #233; color: #FFF; 
} 
Recipes for Cheese 
Home 
Recipes 
Suggestions 
 118 
4.6.5.2 Hủy ảnh hưởng của thuộc tính float 
clear: none | left | right | both 
Giá trị mặc định: none 
Ví dụ trên với thuộc tính clear: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
""> 
Example 9-1 
body { 
width: 600px; 
margin: 1em auto; 
 119 
} 
h1 { 
float: left; 
margin-top: 0; 
} 
.navigation { float: right; margin: 0; 
list-style: none; 
} 
.navigation li { float: left; clear:left; 
} 
.navigation a { display: block; margin-left: 0.5em; padding: 0.5em; 
border: 1px solid #CCC; 
color: #233; 
text-decoration: none; 
} 
.navigation a:focus, 
.navigation a:hover { background: #233; color: #FFF; 
} 
 120 
Recipes for Cheese 
Home 
Recipes 
Suggestions 
4.6.5.3 Canh lề theo chiều dọc 
vertical-align: baseline | sub | super | top | text-top | middle | 
bottom | text-bottom | | Mặc định: baseline 
Ví dụ cho sub(chỉ số dưới) và super(chỉ số trên): 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
""> 
 121 
Figure 9-11 
h1 span { 
font-size: 0.5em; 
} 
.superscript { 
vertical-align: super; 
} 
.subscript { 
vertical-align: sub; 
} 
TastyRecipes for 
TastyCheese 
 122 
Ví dụ cho thuộc tính top, middle, bottom: 
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” 
“”> 
Figure 9-12 
h1 span { 
font-size: 0.5em; 
} 
.top { 
vertical-align: top; 
} 
.middle { 
vertical-align: middle; 
} 
.bottom { 
vertical-align: bottom; 
 123 
} 
Super 
TastyRecipes for 
TastyCheese 
 124 
CÂU HỎI VÀ BÀI TẬP CHƯƠNG 4 
Câu 1: Sử dụng ngôn ngữ HTML soạn thảo trang Web có nội dung và định dạng theo mẫu:: 
NỘI DUNG ÔN TẬP TỐT NGHIỆP LỚP THTH36AQN 
1. Môn Cơ sở: 10 tiết, phòng: B1.01 
2. Môn Chuyên ngành: 10 tiết, phòng: B1.01 
3. Môn Chính trị: 5 tiết, phòng: B1.01 
DANH SÁCH SINH VIÊN ĐĂNG KÝ ÔN TẬP: 
STT Họ tên Môn Cơ sở Môn chuyên ngành Môn chính trị 
Học Tài liệu Học Tài liệu Học Tài liệu 
1 Hoảng Anh X X X 
2 Nguyễn Hà X X X X 
3 Đỗ Kỳ X X X 
4 Lê Long X X X 
5 Phạm Quang x X X 
Tổng cộng 5 2 3 1 0 5 
Yêu cầu: 
 Chọn màu nền tuỳ ý cho trang 
 Chọn màu nền dòng tiêu đề và dòng cuối cho bảng, màu chữ tùy ý 
 Độ rộng Table=800, Khoảng cách giữa các ô =0 , độ dày đường viền 1, màu viền tùy ý 
 Canh lề và trộn ô đúng theo mẫu. 
Câu 2: Cùng mẫu nội dung và định dạng trên, sử dụng CSS trong định dạng: danh sách, kiểu 
chữ, font chữ, bảng, dòng, ô. 
Câu 3: Sử dụng ngôn ngữ HTML soạn thảo trang Web có nội dung và định dạng theo mẫu: 
BẢNG GIÁ ĐĂNG KÝ CƯỚC DỊCH VỤ INTERNET 
VNN FPT 
Cước truy cập Internet Thẻ kết nối Internet 
Thời gian Cước truy cập(đ/ph) Số giờ kết nối Mệnh giá thẻ 
0h-07h 100 14h 100.000đ 
07h-19h 210 33h 200.000đ 
19h-24h 150 55h 300.000đ 
Cước thuê bao trong tháng: 27.273đ/tháng 110h 500.000đ 
NHẬP THÔNG TIN MUA THẺ 
Họ và tên: 
Số CMND: 
Đăng ký: 
 125 
Mua thẻ: 
 100.000đ 
 200.000đ 
 300.000đ 
 500.000đ 
Yêu cầu: 
 Chọn màu nền tuỳ ý cho trang 
 Chọn màu nền dòng tiêu đề và dòng cuối cho bảng, màu chữ tùy ý 
 Độ rộng Table=800, Khoảng cách giữa các ô =0 , độ dày đường viền 1, màu viền tùy ý 
 Canh lề và trộn ô đúng theo mẫu. 
 Tạo form nhập thông tin mua thẻ như trong mẫu 
Câu 4: Sử dụng CSS trong định dạng: kiểu chữ, font chữ, bảng, dòng, ô của bảng ở mẫu trên. 
Câu 5: Sử dụng HTML và sử dụng định dạng mẫu CSS định dạng văn bản mẫu sau: 
Cập nhật Huỷ bỏ