Bài giảng Thiết kế và triển khai website - Chương 3: Một số công cục thiết kế website

Chương 3. MỘT SỐ CÔNG 
CỤ THIẾT KẾ WEBSITE 
Bùi Quang Trường 
Bộ môn CNTT – Khoa HTTT.KT 
 – Trường ĐH Thương Mại 
11/18/2013 Công cụ thiết kế Web - HTML 2 
Nội dung 
• Ngôn ngữ đánh dấu siêu văn bản HTML 
• PHP, Javascript 
• Một số công cụ hỗ trợ thiết kế website 
11/18/2013 Công cụ thiết kế Web - HTML 3 
3.1. Ngôn ngữ HTML 
3.1.1. Tổng quan về HTML 
3.1.2. Các thẻ của HTML 
3.1.3. Sử dụng Frontpage thiết kế web tĩnh 
3.1.4. Định dạng website với CSS 
11/18/2013 Công cụ thiết kế Web - HTML 4 
3.1.1. Tổng quan về HTML 
• HTML (HyperText Markup Language) là ngôn ngữ 
đánh dấu siêu văn bản được thiết kế ra để tạo nên các 
trang web. Tập tin (File) HTML là một văn bản có chứa 
các thẻ đánh dấu (markup tags), các thẻ đánh dấu này 
giúp các trình duyệt Web hiểu được cách trình bày và 
hiển thị trang Web. File HTML có phần mở rộng 
(Extension) là htm hay html và có thể được tạo ra bằng 
bất cứ chương trình xử lý văn bản đơn giản nào. 
11/18/2013 Công cụ thiết kế Web - HTML 5 
3.1.1. Tổng quan về HTML 
• Trong File HTML các phần tử (Element) được đánh 
dấu bằng các thẻ HTML. Các thẻ này được bao bởi 
dấu . Thông thường các thẻ HTML được 
dùng theo một cặp (thẻ bắt đầu) và </tên 
thẻ> (thẻ kết thúc), văn bản nằm giữa cặp thẻ này là 
nội dung của phần tử. Các thẻ HTML không phân 
biệt chữ hoa và chữ thường, có nghĩa là các kiểu 
chữ đều được xem như nhau. 
11/18/2013 Công cụ thiết kế Web - HTML 6 
Cấu trúc cơ bản 
3 
3.1.1. Tổng quan về HTML 
Một document HTML luôn bắt đầu bằng và kết thúc bằng (trong 
đó bạn cũng có thể viết nhỏ hoặc viết hoa và ). Nhờ có cặp TAG 
này mà Browser biết được đó là HTML - document dành cho trình duyệt. Những 
chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết 
giữa cặp TAG và . Trong một document html, chú thích được 
dùng như sau: 
Như vậy một trang web viết bằng html sẽ có cấu trúc như sau: 
11/18/2013 Công cụ thiết kế Web - HTML 7 
Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có 
thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề. 
Tiêu đề của trang web 
Welcome to my Homepage! 
Tiêu đề của trang web 
Tiêu đề của trang web 
Tiêu đề của trang web 
Tiêu đề của trang web 
 là to nhất và là nhỏ nhất. Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải 
dùng thêm một cặp TAG nữa : Tất cả những gì nằm giữa cặp TAG này đều được định 
hướng vào phía giữa của trang. 
3.1.1. Tổng quan về HTML 
11/18/2013 Công cụ thiết kế Web - HTML 8 
Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp 
tag . Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một 
cặp tag nữa, đó là Giữa và là tên của trang web được 
browser trình bày phía trên cùng của menubar. Như vậy một trang web với "đầu" sẽ 
có cấu trúc như sau: 
Trang web dau tien cua toi 
 Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. 
Trong "head" ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine... 
Next 
3.1.1. Tổng quan về HTML 
11/18/2013 Công cụ thiết kế Web - HTML 9 
3.1.2. Các thẻ HTML 
I. C¸c thÎ ®Þnh cÊu tróc tµi liÖu 
1.1 HTML 
1.2 HEAD 
1.3 TITLE 
1.4 BODY 
11/18/2013 Công cụ thiết kế Web - HTML 10 
1.1 HTML 
• 
• ... Toµn bé néi cña tµi liÖu ®îc ®Æt ë ®©y 
• 
11/18/2013 Công cụ thiết kế Web - HTML 11 
1.2 HEAD 
• 
• ... PhÇn më ®Çu (HEADER) cña tµi liÖu ®îc ®Æt ë 
®©y 
• 
11/18/2013 Công cụ thiết kế Web - HTML 12 
1.3 TITLE 
Tiªu ®Ò cña tµi liÖu 
11/18/2013 Công cụ thiết kế Web - HTML 13 
1.4 BODY 
• 
• .... phÇn néi dung cña tµi liÖu ®îc ®Æt ë ®©y 
• 
11/18/2013 Công cụ thiết kế Web - HTML 14 
1.4 BODY (TT) 
11/18/2013 Công cụ thiết kế Web - HTML 15 
3.1.2. Các thẻ HTML (TT) 
II. C¸c thÎ ®Þnh d¹ng khèi 
 2.1. ThÎ tr×nh bµy mét ®o¹n P 
 2.2. C¸c thÎ ®Þnh d¹ng tiªu ®Ò H1/H2/H3/H4/H5/H6 
 2.3 ThÎ ng¾t xuèng dßng BR 
 2.4 ThÎ ®Þnh d¹ng v¨n b¶n(v¨n b¶n ®îc ®Þnh d¹ng 
tríc trong tµi liÖu HTML vµ khi tr×nh duyÖt hiÓn 
thÞ th× sÏ tu©n theo ®Þnh d¹ng nµy) PRE 
11/18/2013 Công cụ thiết kế Web - HTML 16 
3.1.2. Các thẻ HTML (TT) 
III. C¸c thÎ ®Þnh d¹ng danh s¸ch 
 Có ph¸p: 
 Môc thø nhÊt 
 Môc thø hai 
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 
11/18/2013 Công cụ thiết kế Web - HTML 17 
3.1.2. Các thẻ HTML (TT) 
IV. C¸c thÎ ®Þnh d¹ng ký tù 
 4.1. C¸c thÎ ®Þnh d¹ng in ký tù 
 4.2. C¨n lÒ v¨n b¶n trong trang Web 
 4.3. C¸c ký tù ®Æc biÖt 
 4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web 
 4.5. Chän kiÓu ch÷ cho v¨n b¶n 
 4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt 
11/18/2013 Công cụ thiết kế Web - HTML 18 
4.1. C¸c thÎ ®Þnh d¹ng in ký tù 
11/18/2013 Công cụ thiết kế Web - HTML 19 
4.2. C¨n lÒ v¨n b¶n trong trang Web 
11/18/2013 Công cụ thiết kế Web - HTML 20 
4.3. C¸c ký tù ®Æc biÖt 
11/18/2013 Công cụ thiết kế Web - HTML 21 
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c 
trang Web 
Sau ®©y lµ mét sè gi¸ trÞ mµu c¬ b¶n: 
11/18/2013 Công cụ thiết kế Web - HTML 22 
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c 
trang Web (TT) 
Cú pháp: 
11/18/2013 Công cụ thiết kế Web - HTML 23 
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c 
trang Web (TT) 
Sau ®©y lµ ý nghÜa c¸c tham sè cña thÎ BODY: 
11/18/2013 Công cụ thiết kế Web - HTML 24 
4.5. Chän kiÓu ch÷ cho v¨n b¶n 
•Có ph¸p: 
<FONT 
FACE = font-name 
COLOR = color 
SIZE = n > 
... 
11/18/2013 Công cụ thiết kế Web - HTML 25 
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt 
•§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ . 
•Có ph¸p: 
11/18/2013 Công cụ thiết kế Web - HTML 26 
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt 
(TT) 
ý 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). 
11/18/2013 Công cụ thiết kế Web - HTML 27 
3.1.2. Các thẻ HTML (TT) 
V. C¸c thÎ chÌn ©m thanh, h×nh ¶nh 
1. §a ©m thanh vµo mét tµi liÖu HTML: 
2. ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi 
liÖu HTML: 
11/18/2013 Công cụ thiết kế Web - HTML 28 
§a ©m thanh vµo mét tµi liÖu HTML 
Cú pháp: 
 <BGSOUND 
 SRC = url 
 LOOP = n 
> 
11/18/2013 Công cụ thiết kế Web - HTML 29 
ChÌn mét h×nh ¶nh, mét ®o¹n video 
vµo tµi liÖu HTML 
Cú pháp: 
 <IMG 
ALIGN = TOP/MIDDLE/BOTTOM 
ALT = text 
BORDER = n 
SRC = url 
WIDTH = width 
HEIGHT = height 
HSPACE = vspace 
VSPACE = hspace 
TITLE = title 
DYNSRC = url 
START = FILEOPEN/MOUSEOVER 
LOOP = n 
> 
11/18/2013 Công cụ thiết kế Web - HTML 30 
3.1.2. Các thẻ HTML (TT) 
VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu 
Sau ®©y lµ c¸c thÎ t¹o b¶ng chÝnh: 
 ... Định nghĩa một bảng 
 ... Định nghĩa một hàng trong 
bảng 
 ... Định nghĩa một ô trong bảng 
 ... Định nghĩa ô chứa tiêu đề củ 
cột 
 ... Tiêu đề của bảng 
11/18/2013 Công cụ thiết kế Web - HTML 31 
VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu 
(TT) 
Cú pháp: 
<TABLE 
ALIGN = LEFT / CENTER / RIGHT 
BORDER = n 
BORDERCOLOR = color 
BORDERCOLORDARK = color 
BORDERCOLORLIGHT = color 
BACKGROUND = url 
BGCOLOR = color 
CELLSPACING = spacing 
CELLPADDING = pading 
> 
Tiªu ®Ò cña b¶ng biÓu 
... §Þnh nghÜa c¸c dßng 
<TR 
ALIGN = LEFT/CENTER/RIGHT 
VALIGN = TOP/MIDDLE/BOTTOM> 
 ... §Þnh nghÜa c¸c « trong dßng 
<TD 
ALIGN = LEFT / CENTER / RIGHT 
VALIGN = TOP / MIDDLE / BOTTOM 
BORDERCOLOR = color 
BORDERCOLORDARK = color 
BORDERCOLORLIGHT = color 
BACKBROUND = url 
BGCOLOR = color 
COLSPAN = n 
ROWSPAN = n 
> 
... Néi dung cña « 
... 
... 
11/18/2013 Công cụ thiết kế Web - HTML 32 
3.1.2. Các thẻ HTML (TT) 
 VII. FORM 
1. HTML Forms: 
2. T¹o Form: 
3. T¹o mét danh s¸ch lùa chän: 
4. T¹o hép so¹n th¶o v¨n b¶n : 
11/18/2013 Công cụ thiết kế Web - HTML 33 
T¹o Form 
Cú pháp: 
<FORM 
 ACTION = ulr 
 METHOD = GET | POST 
 NAME = name 
 TARGET = frame_name | _blank | _self 
 > 
11/18/2013 Công cụ thiết kế Web - HTML 34 
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 
11/18/2013 Công cụ thiết kế Web - HTML 35 
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 
11/18/2013 Công cụ thiết kế Web - HTML 36 
3.1.3 Sử dụng Frontpage thiết kế 
web tĩnh bằng HTML 
1. Khởi động FrontPage 
2. Tạo 1 trang web mới 
3. Tạo 1 website mới 
4. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề... 
5. Ðịnh dạng đoạn 
6. Ðịnh dạng ký tự 
7. Tạo hyperlink 
8. Tạo các điểm dừng(Bookmark) trong trang 
9. Chèn hình ảnh 
10.Tạo table 
11.Mở trang web hoặc web site đã có 
11/18/2013 Công cụ thiết kế Web - HTML 37 
Khởi động FrontPage 
• Click chuột vào Start/Programs/Microsoft FrontPage. Màn hình sau sẽ 
xuất hiện: 
11/18/2013 Công cụ thiết kế Web - HTML 38 
Tạo 1 trang web mới 
• Chọn File/New/Page 
11/18/2013 Công cụ thiết kế Web - HTML 39 
Tạo 1 website mới 
• Chọn File/New/Web 
11/18/2013 Công cụ thiết kế Web - HTML 40 
Ðặt thuộc tính trang web: tiêu đề, ảnh 
nền, nhạc nền, lề... 
• Click File/Properties, Chọn tab General 
11/18/2013 Công cụ thiết kế Web - HTML 41 
Ðặt thuộc tính trang web: tiêu đề, ảnh 
nền, nhạc nền, lề...(TT) 
• Click File/Properties, Chọn tab Background: 
11/18/2013 Công cụ thiết kế Web - HTML 42 
Ðặt thuộc tính trang web: tiêu đề, ảnh 
nền, nhạc nền, lề...(TT) 
• Click File/Properties, Chọn tab Margin: 
11/18/2013 Công cụ thiết kế Web - HTML 43 
Ðịnh dạng đoạn 
•Thanh formatting: 
11/18/2013 Công cụ thiết kế Web - HTML 44 
Ðịnh dạng ký tự 
11/18/2013 Công cụ thiết kế Web - HTML 45 
Tạo hyperlink 
• Chọn Insert/Hyperlink 
11/18/2013 Công cụ thiết kế Web - HTML 46 
Tạo các điểm dừng(Bookmark) trong 
trang 
• Chọn chức năng Insert/Bookmark 
11/18/2013 Công cụ thiết kế Web - HTML 47 
Chèn hình ảnh 
• Di chuyển con nháy đến vị trí muốn chèn hình, click nút 
11/18/2013 Công cụ thiết kế Web - HTML 48 
Tạo table 
• Chọn Table/Insert/Table 
11/18/2013 Công cụ thiết kế Web - HTML 49 
Mở trang web hoặc web site đã có 
• Click biểu tượng 
11/18/2013 Công cụ thiết kế Web - HTML 50 
3.1.4. Định dạng website với CSS 
1. Giới thiệu 
2. Một Số Quy Ước Về Cách Viết CSS 
3. Background 
4. Font Chữ 
5. Text 
6. Pseudo-classes For Links 
7. Class & ID 
8. Span & Div 
9. Box Model 
10. Margin & Padding 
11. Border 
12. Height & Width 
13. Float & Clear 
14. Position 
15. Layers 
11/18/2013 Công cụ thiết kế Web - HTML 51 
Giới thiệu 
1. CSS là gì? 
2. Tại sao CSS? 
11/18/2013 Công cụ thiết kế Web - HTML 52 
Một Số Quy Ước Về Cách Viết 
CSS 
1. Cú pháp CSS 
2. Đơn vị CSS 
3. Vị trí đặt CSS 
4. Sự ưu tiên 
11/18/2013 Công cụ thiết kế Web - HTML 53 
Cú pháp CSS 
Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau. 
Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng 
code sau: 
+ Trong HTML: 
+ Trong CSS: body { background-color:#00BFF3; } 
Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt } 
Ví dụ: body { background:#FFF; bolor:#FF0000; font-size:14pt } Đối với một trang 
web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện 
gom gọn lại như sau: 
 h1 { color:#0000FF; text-transform:uppercase } 
 h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-
transform:uppercase; } 
Chú thích trong CSS được viết như sau /* Nội dung chú thích */ Ví dụ: /* Màu chữ 
cho trang web */ body { color:red } 
11/18/2013 Công cụ thiết kế Web - HTML 54 
Đơn vị CSS 
Đơn vị chiều dài 
Đơn vị màu sắc 
11/18/2013 Công cụ thiết kế Web - HTML 55 
Vị trí đặt CSS 
+ Cách 1: Nội tuyến (kiểu thuộc tính) 
11/18/2013 Công cụ thiết kế Web - HTML 56 
Vị trí đặt CSS (TT) 
+ Cách 2: Bên trong (thẻ style) 
11/18/2013 Công cụ thiết kế Web - HTML 57 
Vị trí đặt CSS (TT) 
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) 
11/18/2013 Công cụ thiết kế Web - HTML 58 
Vị trí đặt CSS (TT) 
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) 
11/18/2013 Công cụ thiết kế Web - HTML 59 
Sự ưu tiên 
11/18/2013 Công cụ thiết kế Web - HTML 60 
Background 
1. Màu nền (thuộc tính background-color 
2. Ảnh nền (thuộc tính background-image) 
3. Lặp lại ảnh nền (thuộc tính background-repeat) 
4. Khóa ảnh nền (thuộc tính background-
attachment) 
5. Định vị ảnh nền (thuộc tính background-
position) 
11/18/2013 Công cụ thiết kế Web - HTML 61 
Màu nền (thuộc tính background-
color 
Ví dụ: 
11/18/2013 Công cụ thiết kế Web - HTML 62 
Ảnh nền (thuộc tính background-
image) 
ảnh logo của blog Pearl 
Viết CSS để đặt logo này làm ảnh nền 
trang web như sau: 
body { 
 background-image:url(logo.png) 
 } 
 h1 { 
 background-color:red 
 } 
 h2 { 
 background-color:orange 
 } 
 p { 
 background-color: FDC689 
 } 
11/18/2013 Công cụ thiết kế Web - HTML 63 
Lặp lại ảnh nền (thuộc tính 
background-repeat) 
• Thuộc tính này có 4 giá trị: 
 + repeat-x: Chỉ lặp lại ảnh theo phương ngang. 
 + repeat-y: Chỉ lặp lại ảnh theo phương dọc. 
 + repeat: Lặp lại ảnh theo cả 2 phương, đây là giá 
trị mặc định. 
 + no-repeat: Không lặp lại ảnh. 
11/18/2013 Công cụ thiết kế Web - HTML 64 
Khóa ảnh nền (thuộc tính 
background-attachment) 
Thuộc tính này có 2 giá trị: 
 + scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, 
đây là giá trị mặc định. 
 + fixed: Cố định ảnh nền so với nội dung trang web. 
Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn 
đang cuộn trang web. 
11/18/2013 Công cụ thiết kế Web - HTML 65 
Định vị ảnh nền (thuộc tính 
background-position) 
Ví dụ: 
Thuộc tính background rút gọn 
11/18/2013 Công cụ thiết kế Web - HTML 66 
Font Chữ 
1. Thuộc tính font-family 
2. Thuộc tính font-style 
3. Thuộc tính font-variant 
4. Thuộc tính font-weight 
5. Thuộc tính font-size 
11/18/2013 Công cụ thiết kế Web - HTML 67 
Text 
 1. Thuộc tính color 
2. Thuộc tính text-indent 
3. Thuộc tính text-align 
4. Thuộc tính letter-spacing 
5. Thuộc tính text-decoration 
6. Thuộc tính text-transform 
11/18/2013 Công cụ thiết kế Web - HTML 68 
Pseudo-classes For Links 
 Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho 
một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa 
được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được 
thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn 
chuột (a:active). 
Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái 
liên kết: 
11/18/2013 Công cụ thiết kế Web - HTML 69 
Class & id 
 1. Nhóm phần tử với class 
2. Nhận dạng phần tử với id 
11/18/2013 Công cụ thiết kế Web - HTML 70 
Nhóm phần tử với class 
11/18/2013 Công cụ thiết kế Web - HTML 71 
Nhận dạng phần tử với id 
11/18/2013 Công cụ thiết kế Web - HTML 72 
Span & div 
 1. Nhóm phần tử với 
2. Nhóm phần tử với 
11/18/2013 Công cụ thiết kế Web - HTML 73 
Nhóm phần tử với 
11/18/2013 Công cụ thiết kế Web - HTML 74 
Nhóm phần tử với 
11/18/2013 Công cụ thiết kế Web - HTML 75 
Box Model 
11/18/2013 Công cụ thiết kế Web - HTML 76 
Margin & padding 
 1. Thuộc tính margin 
2. Thuộc tính padding 
11/18/2013 Công cụ thiết kế Web - HTML 77 
Thuộc tính margin 
11/18/2013 Công cụ thiết kế Web - HTML 78 
Thuộc tính padding 
• Cú pháp: 
 Padding: | | <padding-
bottom> | 
11/18/2013 Công cụ thiết kế Web - HTML 79 
Border 
1. Thuộc tính border-width 
2. Thuộc tính border-color 
3. Thuộc tính border-style 
11/18/2013 Công cụ thiết kế Web - HTML 80 
Height & width 
1. Thuộc tính width 
2. Thuộc tính max-width 
3. Thuộc tính min-width 
4. Thuộc tính height 
5. Thuộc tính max-height 
6. Thuộc tính min-height 
11/18/2013 Công cụ thiết kế Web - HTML 81 
Float & clear 
1. Thuộc tính float 
2. Thuộc tính clear 
11/18/2013 Công cụ thiết kế Web - HTML 82 
Thuộc tính float 
Thuộc tính float có 3 giá trị: 
+ Left: Cố định phần tử về bên trái. 
+ Right: Cố định phần tử về bên phải. 
+ None: Bình thường. 
11/18/2013 Công cụ thiết kế Web - HTML 83 
Thuộc tính clear 
Thuộc tính clear có tất cả 4 thuộc tính: 
• left (tràn bên trái) 
• right (tràn bên phải) 
• both (không tràn) 
• none. 
11/18/2013 Công cụ thiết kế Web - HTML 84 
Position 
1. Absolute position 
2. Relative position 
11/18/2013 Công cụ thiết kế Web - HTML 85 
Absolute position 
11/18/2013 Công cụ thiết kế Web - HTML 86 
Relative position 
• Sự định vị tương đối cho một thành phần là sự định 
vị được tính từ vị trí gốc trong tài liệu. Các thành 
phần đã được định vị tương đối sẽ để lại khoảng 
không trong tài liệu. Các thành phần được định vị 
tương đối sẽ nhận giá trị position là relative. 
11/18/2013 Công cụ thiết kế Web - HTML 87 
Layers 
 • #logo1 { 
• position:absolute; top:70px; left:50px; z-index:1 
• } 
• #logo2 { 
• position:absolute; top:140px; left:100px; z-index:2 
• } 
• #logo3 { 
• position:absolute; top:210px; left:150px; z-index:3 
• } 
• #logo4 { 
• position:absolute; top:280px; left:200px; z-index:4 
• } 
• #logo5 { 
• position:absolute; top:350px; left:250px; z-index:5 
• }