HTML&CSS cơ bản- Lý thiết và bài tập thực hành

1


TRƯỜNG ĐẠI HỌC HỌC CÙNG NHAU














HƯỚNG DẪN HỌC THIẾT KẾ WEB
KẾT HỢP HTML+CSS
LÝ THUYẾT VÀ BÀI TẬP THỰC HÀNH


SƯU TẦM VÀ BIÊN SOẠN : Nguyễn Phúc Đức
Tháng 12 năm 2013

LƯU HÀNH KHẮP NƠI

2

Mục lục
Giới thiệu về HTML 4
Cấu trúc cơ bản của HTML 5
Nhóm các thẻ block 7
Thẻ định dạng tiêu đề 8
Đây là tiêu đề quan trọng nhất (lớn nhất) 8
Logo 9

Thẻ định dạng đoạn văn bản 9
Thẻ phân chia khu vực 11
Thẻ xác định danh sách 12
Các thẻ danh sách có thứ tự và không có thứ tự 15
Danh sách không có thứ tự 16
Cấu trúc thẻ danh sách có thứ tự và không có thứ tự 17
Một số cấu trúc của danh sách có thứ tự và không có thứ tự 17
Cấu trúc <ul></ul> lồng bên trong <ol></ol> 18
Những thẻ thuộc nhóm inline 19
Thẻ liên kết <a></a> 20
Thẻ ngắt đoạn văn bản <br /> 21
Thẻ nhóm các inline <span></span> 21
Thẻ hiển thị hình ảnh mạnh <strong></strong> 21
Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> 21
Ví dụ về liên kết <a> 21
Ví dụ về <img /> 23
Đoạn văn bản <p> 24
Ví dụ về các tag <dl> - <dd> - <dt> 25
Ví dụ về các tag <ol> - <li> 25
Ví dụ về các tag <ul> - <li> 27
Ví dụ về thẻ <input /> 28
Ví dụ về thẻ <button> 30
Ví dụ về thẻ select - option 30
Ví dụ về thẻ <optgroup> 31
Ví dụ về thẻ <textarea> 32
Ví dụ về <fieldset> - <legend> 32
Ví dụ về thẻ <label> 33
Kết hợp các thẻ định dạng và nhóm thẻ inline 39
Bài tập 39
Phần đầu: header 43

Phần liên kết toàn cục global : navigation 45
Phần nội dung chính : content 46
Phần nội dung phụ : sidebar 50
Phần cuối trang web : footer 53
Giới thiệu về CSS 57
Sử dụng CSS 57
Cách viết một nội dung CSS 58
Cách viết một comment trong file CSS 59
Các thuộc tính định dạng cho text 59
Thuộc tính color 60
Thuộc tính font-size 61
Thuộc tính font-family 61
Thuộc tính font-weight 61

3

Thuộc tính letter-spacing 62
Thuộc tính text-decoration 63
Thuộc tính word-spacing 63
Các thuộc tính định dạng chung 63
Thuộc tính background 64
Thuộc tính border 65
Thuộc tính height 67
Thuộc tính text-align 67
Các thuộc tính điều khiển nội dung 68
padding 68
margin 77
float 84
Ví dụ về thuộc tính float 89
clear 92

clearfix 97
display : Xác định sự hiển thị cho thành phần 103
position 106
position: absolute 111
position: fixed 116
position: static 117
Ví dụ về thuộc tính position 117
Ví dụ về thuộc tính border 120
Ví dụ về thuộc tính display 123
Ví dụ về thuộc tính text-align 128
Ví dụ về thuộc tính vertical-align 129
Ví dụ về thuộc tính list-style 133
Ví dụ về thuộc tính margin 136
Ví dụ về thuộc tính overflow 140
Ví dụ về thuộc tính z-index 142
Ví dụ về thuộc tính content 145
Kết hợp các thuộc tính CSS 147
Phần web : header 151
Phần liên kết toàn cục global navigation 156
Phần nội dung : content 158
Phần : sidebar 170
Phần : footer 172
Tổng kết bài tập CSS 177
Màu trong HTML & CSS 185
jQuery 189
CSS3 204
Tag mới trong HTML5 207
Những tag tương tự HTML4 / XHTML 208
Những tag không được hỗ trợ trong HTML5 210

4

Giới thiệu về HTML

HTML là ngôn ngữ dùng để mô tả một trang web.

HTML viết tắt của từ Hyper Text Markup Language.

HTML không phải là ngôn ngữ lập trình, html là ngôn ngữ đánh dấu (markup language), ngôn
ngữ đánh dấu là một nhóm các thẻ đánh dấu (các tag), HTML sử dụng các thẻ này để mô tả trang
web.
Sự sắp xếp chiều dọc của thẻ block trong HTML
Khi sử dụng các thẻ block
, trình duyệt sẽ sắp xếp các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng
không gian nằm ngang từ trên xuống theo thứ tự sắp xếp trong trang HTML/XHTML, thẻ nào code
trước sẽ nằm trên, các thẻ code sau sẽ nằm bên dưới.
Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ theo chiều ngang như thế nào:
HTML viết
<h1>Tiêu đề 01</h1>

<ul>
<li><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li><a href="#">Link 04</a></li>
<li><a href="#">Link 05</a></li>
</ul>

<div>Nội dung chính</div>

<div>Nội dung phụ</div>

<div>
<p>Tên công ty</p>
<p>Địa chỉ</p>
</div>
Hiển thị trình duyệt:

Phân tích vị trí của các thẻ:

5


Ta thấy các thẻ block đều chiếm vùng không gian nằm ngang, chúng ta có thể sắp xếp lại vị trí của
các thẻ block bằng cách sử dụng các thuộc tính css
.
Sự sắp xếp chiều ngang của thẻ inline trong HTML
Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code
trước xuất hiện trước, thẻ nào code sau xuất hiện sau.
Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ inline như thế nào:
HTML viết
<a href="#">Thẻ a</a>
<span>thẻ span</span>
<em>thẻ em</em>
<strong>thẻ strong</strong>
Hiển thị trình duyệt:

Tới đây chắc các bạn đã hiểu nhiệm vụ của HTML/XHTML dùng để làm gì, đối với các thẻ block
trình duyệt sẽ sắp xếp nó theo chiều dọc, đối với các thẻ inline trình duyệt sẽ sắp xếp theo chiều
ngang, nếu muốn hiểu rõ hơn các bạn có thể tham khảo thêm các vùng không gian HTML

Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome, ) là đọc văn bản
HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML
(các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web.
Cấu trúc cơ bản của HTML
Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3 phần:

<!Doctype>: Phần khai báo chuẩn của html hay xhtml.

<head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript…

<body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung.
Cấu trúc cơ bản
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
Phần thân viết ở đây
</body>

6

</html>
Cấu trúc cơ bản của trang web
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang
chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.


Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button,
đoạn flash, hoặc các form ngắn như form tìm kiếm,

Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan
trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).

Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội
dung phụ (sidebar).

Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng
xem.

Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local
navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng
cáo,

Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số
điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner
liên kết,

7


Nhóm các thẻ block
Nhóm các thẻ block: là các thẻ dùng để sắp xếp bố cục cho trang web.

Thẻ định dạng tiêu đề <hx>

Gồm các thẻ từ <h1> cho đến <h6>, được sử dụng để định nghĩa tiêu đề cho nội dung HTML,
giúp cho trình duyệt nhận biết được tiêu đề của một nội dung.


Thẻ định dạng đoạn văn bản <p>

Giúp trình duyệt xác định được đoạn văn bản trong trang HTML, thẻ này chỉ có thể chứa các
thẻ thuộc nhóm inline, gồm: text, image, link, button,

Thẻ phân chia khu vực <div>

Ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt
hiểu rõ những vùng được bố cục trên trang web

Thẻ xác định danh sách <dl>, <dt>, <dd>

Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục.

Thẻ danh sách có thứ tự <ol>, <li>

Được sử dụng cho danh sách có thứ tự.

Thẻ danh sách không có thứ tự <ul>, <li>

8


Được sử dụng cho danh sách không có thứ tự.
Thẻ định dạng tiêu đề
Định nghĩa và cách dùng

Thẻ <hx>: chữ "h" viết tắc của từ "headings" nghĩa là đề mục, hoặc tiêu đề.


Thẻ <hx> : Sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết
được tiêu đề của một nội dung.

Thẻ <hx> có giá trị từ <h1> tới <h6>, trong đó mức độ quan trọng giảm từ <h1> tới <h6> (hay
ta có thể hiểu: tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>).

Nội dung bên trong <hx></hx> chỉ nên chứa các thẻ thuộc nhóm inline.

Thẻ <hx></hx> chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác.
Html viết:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
<h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4>
<h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5>
<h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6>
</body>
</html>
Hiển thị trình duyệt:
Đây là tiêu đề quan trọng nhất (lớn nhất)
Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)
Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)

Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)
Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)
Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)
Thẻ <h1> là thẻ quan trọng nhất trong trang HTML, trong một trang html thường người ta sử dụng
<h1> một lần duy nhất cho logo, hoặc dòng mô tả trang web (mục đích SEO), mục đích của <h1> là
khai báo cho trình duyệt biết đâu là phần quan trọng nhất của trang web.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1>Logo</h1>
<h2>Tiêu đề lớn</h2>
<p>Nội dung của tiêu đề lớn</p>

<h3>Tiêu đề nhỏ</h3>
<p>Nội dung của tiêu đề nhỏ</p>
</body>

9

</html>
Hiển thị trình duyệt:
Logo
Tiêu đề lớn
Nội dung của tiêu đề lớn

Tiêu đề nhỏ
Nội dung của tiêu đề nhỏ
Những cấu trúc không nên sử dụng
Không được chứa bên trong <hx></hx> các thẻ thuộc nhóm các thẻ block, code như thế này là sai,
không đúng chuẩn W3C:
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1><p>Đây là đoạn văn</p></h1>

<h2><div>Đây là đoạn văn</div></h2>

<h3>
<dl>
<dt>Tiêu đề</dt>
<dd>Nội dung</dd>
</dl>
</h3>

<h2>
<ul>
<li>liên kết 01</li>
<li>liên kết 02</li>
</ul>

</h2>
</body>
</html>
Thẻ định dạng đoạn văn bản
Định nghĩa và cách dùng

Thẻ <p></p> viết tắt của từ "paragraphs" có nghĩa là đoạn văn.

Thẻ <p></p> giúp trình duyệt xác định được đoạn văn bản trong trang HTML, thẻ này chỉ có
thể chứa các thẻ thuộc nhóm inline
, gồm: text, image, link, button,
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<p>Đây là đoạn văn</p>

10

<p><img src="images/img_planet.gif" alt="Space" /></p>
<p>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></p>
</body>
</html>
Hiển thị trình duyệt:
Đây là đoạn văn.

Trong đoạn văn này có chứa liên kết.
Để ngắt đoạn cho đoạn văn ta có thể dùng 2 cách:

Ngắt đoạn cùng dòng: sử dụng thẻ <br /> (<br /> là thẻ thuộc nhóm inline).
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<p>Đây là đoạn văn dài rất dài rất dài rất dài<br />
rất dài rất dài rất dài rất dài.</p>
</body>
</html>
Hiển thị trình duyệt:
Đây là đoạn văn dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài.

Ngắt đoạn khác dòng: sử dụng 2 thẻ <p></p> để ngắt đoạn khác dòng, tránh trường hợp sử
dụng 2 lần thẻ <br /> vì về mặt ý nghĩa của thẻ sẽ không còn chính xác, điều này sẽ gây khó khăn cho
trình duyệt phân biệt đâu là cùng đoạn, đâu là khác đoạn.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>

<title>Tiêu đề trang web</title>
</head>

<body>
<p>Đây là đoạn văn thứ nhất.</p>
<p>Đây là đoạn văn thứ hai.</p>
</body>
</html>
Hiển thị trình duyệt:
Đây là đoạn văn thứ nhất.
Đây là đoạn văn thứ hai.
Những cấu trúc không nên sử dụng
Không được chứa bên trong <p></p> các thẻ thuộc nhóm các thẻ block, code như thế này là sai,
không đúng chuẩn W3C:

11

HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<p><p>Đây là đoạn văn</p></p>

<p><div>Đây là đoạn văn</div></p>

<p>
<dl>
<dt>Tiêu đề</dt>
<dd>Nội dung</dd>
</dl>
</p>

<p>
<ul>
<li>liên kết 01</li>
<li>liên kết 02</li>
</ul>
</p>
</body>
</html>
Thẻ phân chia khu vực
Định nghĩa và cách dùng

Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân
chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên
trang web.

Có thể chứa hầu hết các thẻ trong HTML/XHTML.

Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>,
<body></body>, <title></title>, <link></link>.

Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>.

Một số khu vực khuyên sử dụng thẻ <div></div>:

o
Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản
của trang web)
o
Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ
<div></div> để tiện cho việc điều khiển.
Xem ví dụ để hiểu rõ hơn về thẻ <div></div>, đoạn code bên dưới có sử dụng thuộc tính id, chúng ta
có thể xem ở phần tham khảo thuộc tính id
.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>

12

<div id="header">Viết nội dung phần header ở đây</div>

<div id="gNav">Viết nội dung phần global navigation ở đây</div>

<div id="pageBody">
<div id="content">Viết nội dung phần content ở đây</div>
<div id="sidebar">Viết nội dung phần sidebar ở đây</div>
</div>

<div id="footer">Viết nội dung phần footer ở đây</div>
</body>
</html>
Hiển thị trình duyệt:
Viết nội dung phần header ở đây
Viết nội dung phần global navigation ở đây
Viết nội dung phần content ở đây
Viết nội dung phần sidebar ở đây
Viết nội dung phần footer ở đây
Những cấu trúc không nên sử dụng
Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image,
một liên kết, một button, nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline.
Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của
thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<div>Đây là đoạn văn</div>
<div><img src="images/img_planet.gif" alt="Space" /></div>
<div>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></div>
</body>
</html>
Thẻ xác định danh sách
Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc

thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về
danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách

trong HTML/XHTML.
Định nghĩa
Thẻ xác định danh sách (có đề mục và mô tả đề mục) là một bộ gồm 3 thẻ:

<dl></dl> viết tắt của chữ "definition list" có nghĩa là sự xác định (hay định nghĩa) danh sách.

<dt></dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục.

<dd></dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa)
một mô tả của một mục.
Thẻ xác định danh sách sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không
sử dụng cho danh sách không có phần nội dung mô tả.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" transitional.dtd">

13

<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<dl>
<dt>Trái cây:</dt>
<dd>giúp bỗ sung vitamin cho cơ thể.</dd>

<dt>Nước:</dt>
<dd>giúp chúng ta tăng cường lượng nước cần cho cơ thể.</dd>

<dt>Thịt:</dt>
<dd>giúp cơ thể tăng cường đạm, và chất béo.</dd>
</dl>
</body>
</html>
Hiển thị trình duyệt:
Trái cây:
giúp bỗ sung vitamin cho cơ thể.
Nước:
giúp chúng ta tăng cường lượng nước cần cho cơ thể.
Thịt:
giúp cơ thể tăng cường đạm, và chất béo.
Xem thêm ví dụ

Cấu trúc và cách dùng
Cấu trúc thẻ xác định danh sách phải theo các nguyên tắc sau đây:

Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: <dl></dl>, <dt></dt>,
<dd></dd>.

Bên trong thẻ <dt></dt> chỉ chứa được các thẻ thuộc nhóm inline.

Bên trong thẻ <dd></dd> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được
chứa một số thẻ sau đây: <html></html>
, <meta></meta>, <body></body>, <title></title>,
<link></link>

. Và một số thẻ không nên chứa như: <style></style>, <script></script>.

Thẻ <dt></dt> và <dd></dd> phải được viết trực tiếp bên trong <dl></dl>:
<dl>
<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>
</dl>

Bên trong thẻ <dl></dl> chỉ chứa trực tiếp thẻ <dt></dt> và <dd></dd>, không được xen kẻ
bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:
<dl>
<h2></h2>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<p></p>
<dd></dd>

14

</dl>
<dl>
<dt></dt>
<div>
<dd></dd>

</div>
</dl>
Những cấu trúc không nên sử dụng
Những cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ
<dl></dl>, <dt></dt>, <dd></dd>, sẽ khiến cho trình duyệt lúng túng trong việc xác định thẻ.
Cấu trúc thiếu vắng <dt></dt>: thiếu mục.
<dl>
<dd></dd>
</dl>
Cấu trúc thiếu vắng <dd></dd>: thiếu mô tả mục.
<dl>
<dt></dt>
</dl>
Cấu trúc lặp nhiều <dt></dt> cùng lúc: nhiều mục, nhưng thiếu mô tả.
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
Cấu trúc lặp nhiều <dd></dd> cùng lúc: Không cần phải phân nhiều mô tả cho một mục, chỉ cần
viết tất cả mô tả trong một <dd></dd> là được.
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>

<dt></dt>
<dd></dd>
</dl>
Cấu trúc lồng <dl></dl> bên trong <dl></dl> khác: Cấu trúc này rườm rà khó điều khiển, ta nên sử
dụng cấu trúc <div></div> và <hx></hx> kết hợp <dl></dl> thay thế.
<dl>
<dt></dt>
<dd>
<dl>
<dt></dt>
<dd></dd>
</dl>
</dd>

<dt></dt>
<dd>
<dl>
<dt></dt>

15

<dd></dd>
</dl>
</dd>

<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

</dl>
Cấu trúc trên ta thay thế như sau:
<div>
<h2></h2>
<div>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>

<h2></h2>
<div>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
<h2></h2>
<div></div>

<h2></h2>
<div></div>
</div>
Các thẻ danh sách có thứ tự và không có thứ tự
Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc
thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về
danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách
trong HTML/XHTML.
Danh sách có thứ tự

Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

<ol></ol> là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự.

<li></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách.
Danh sách sau đây gọi là danh sách có thứ tự:
1. 1. Cá lóc kho tiêu
2. 2. Cá rô kho tộ
3. 3. Cá thu chiên xoài bằm
4. 4. Cá điêu hồng nấu ngót
Hoặc:
1. a) Học HTML
2. b) Học XHTML
3. c) Học HTML5
4. d) Học CSS2
5. e) Học CSS3

16

HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<ol>
<li>Cá lóc kho tiêu</li>

<li>Cá rô kho tộ</li>
<li>Cá thu chiên xoài bằm</li>
<li>Cá điêu hồng nấu ngót</li>
</ol>
</body>
</html>
Hiển thị trình duyệt:
1. 1. Cá lóc kho tiêu
2. 2. Cá rô kho tộ
3. 3. Cá thu chiên xoài bằm
4. 4. Cá điêu hồng nấu ngót
Số thứ tự của danh sách trình duyệt sẽ tự thêm vào.
Xem thêm ví dụ

Danh sách không có thứ tự
Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

<ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự

<li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.
Danh sách sau đây gọi là danh sách không có thứ tự:

Trang chủ

Giới thiệu

Sản phẩm

Dịch vụ


Liên hệ
Hoặc:

Học HTML

Học XHTML

Học HTML5

Học CSS2

Học CSS3
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<ul>
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Sản phẩm</li>

17

<li>Dịch vụ</li>
<li>Liên hệ</li>

</ul>
</body>
</html>
Hiển thị trình duyệt:

Trang chủ

Giới thiệu

Sản phẩm

Dịch vụ

Liên hệ
Xem thêm ví dụ
Cấu trúc thẻ danh sách có thứ tự và không có thứ tự
Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.
Cấu trúc phải theo các nguyên tắc sau đây:

Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:
o
Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
o
Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.

Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.

Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được
chứa một số thẻ sau đây: <html></html>
, <meta></meta>, <body></body>, <title></title>,

<link></link>
. Và một số thẻ không nên chứa như: <style></style>, <script></script>.
<ol>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
</ul>

Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp thẻ <li></li>, không được xen kẻ
bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:
<ol>
<h2></h2>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<p></p>
<li></li>
</ul>
<ul>
<li></li>
<div>
<li></li>
</div>
</ul>
Một số cấu trúc của danh sách có thứ tự và không có thứ tự

Cấu trúc <ol></ol> lồng bên trong <ol></ol>
HTML viết
<ol>
<li><p>Cơm trưa</p>

18

<ol>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ol>
</li>
<li><p>Tráng miệng trái cây</p>
<ol>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ol>
</li>
</ol>
Hiển thị trình duyệt:
1. Cơm trưa
1. Cơm chiên hải sản
2. Cơm sườn non nấu cam
3. Cơm canh chua cá lóc
2. Tráng miệng trái cây
1. Nho tươi
2. Chuối
3. Mận

Cấu trúc <ul></ul> lồng bên trong <ul></ul>
HTML viết
<ul>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ul>
Hiển thị trình duyệt:

Cơm trưa
o
Cơm chiên hải sản
o
Cơm sườn non nấu cam
o
Cơm canh chua cá lóc

Tráng miệng trái cây
o

Nho tươi
o
Chuối
o
Mận
Cấu trúc <ul></ul> lồng bên trong <ol></ol>
HTML viết
<ol>

19

<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ol>
Hiển thị trình duyệt:
1. Cơm trưa
o
Cơm chiên hải sản

o
Cơm sườn non nấu cam
o
Cơm canh chua cá lóc
2. Tráng miệng trái cây
o
Nho tươi
o
Chuối
o
Mận
Vấn đề đặt ra là làm sao ta có thể thay đổi dạng của các số, VD đổi thứ tự 1,2,3,4, sang I,II,III,IV,
hay đổi hình dạng tròn thành hình vuông, những vấn đề này chúng ta có thể tham khảo thêm bên
phần list-sytle
của CSS.
Những thẻ thuộc nhóm inline

Những thẻ thuộc nhóm inline là những thẻ cơ bản của HTML/XHTML, chỉ được dùng để chứa
nội dung cho text hoặc các thẻ inline khác.

Bản thân text cũng có thể coi thuộc nhóm inline.

Những thẻ thuộc nhóm inline nên được bao ngoài bởi nhóm các thẻ block, vì các thẻ block sẽ
lo nhiệm vụ dàn trang web, còn các thẻ thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản.
<p>Học <strong>HTML</strong> rất dễ.</p>
<p><img src="images/img_sakura.jpg" alt="Sakura" /></p>
<p>Đây là một <a href="www.hocwebchuan.com">liên kết</a>.</p>
Hiển thị trình duyệt:
Học HTML rất dễ.

Đây là một liên kết.

Những thẻ thuộc nhóm inline có thể được lồng vào nhau.
<a href="www.hocwebchuan.com"><img src="images/img_sakura.jpg" alt="Sakura" /></a>

Không được sử dụng các thẻ khác bên trong các thẻ inline, cách sử dụng sau đây là không
đúng chuẩn:
<a href="www.hocwebchuan.com"><p>Đây là cấu trúc sai.</p></a> <span><div>Đây là cấu trúc
sai</div></span>
Các thẻ sau đây thuộc nhóm inline:

<a></a>

20


<abbr></abbr>

<acronym></acronym>

<b></b>

<basefont></basefont>

<bdo></bdo>

<big></big>

<br />


<cite></cite>

<code></code>

<dfn></dfn>

<em></em>

<font></font>

<i></i>

<em></em>

<input></input>

<kbd></kbd>

<label></label>

<q></q>

<s></s>

<samp></samp>

<select></select>

<small></small>


<span></span>

<strike></strike>

<strong></strong>





<textarea></textarea>

<tt></tt>

<u></u>

<var></var>
Trong phạm vi bài học, chúng ta chỉ đề cập tới một số thẻ inline thông dụng sau:

Thẻ liên kết <a></a>

Thẻ hiển thị một image (hình ảnh) <img />

Thẻ ngắt đoạn văn bản <br />

Thẻ nhóm các inline <span></span>

Thẻ hiển thị hình ảnh mạnh, mục đích đánh dấu chữ <strong></strong>

Thẻ dùng để nhấn mạnh nội dung văn bản <em></em>

Thẻ liên kết <a></a>

Thẻ liên kết <a></a> dùng để tạo một liên kết từ trang web này sang trang web khác, từ vị trí
này sang vị trí khác hay dùng để mở ra một object nào đó (có thể là file words, excel, pdf, mp3,
movie, ), thẻ này có một thuộc tính bắt buộc:
o
href: Chứa đường dẫn cụ thể tới mục tiêu liên kết.

Tham khảo thêm về thẻ liên kết <a></a>.
HTML viết
<p><a href="www.hocwebchuan.com">Đây là một liên kết</a></p>
Hiển thị trình duyệt:
Đây là một liên kết
Xem thêm ví dụ
Thẻ hiển thị một image <img />

Thẻ hiển thị một image <img /> dùng để nhúng một ảnh thông qua thuộc tính src, thẻ này có 2
thuộc tính bắt buộc:
o
src: Chứa đường dẫn tham chiếu tới image.

21

o
alt: Được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có
sẵn).

Cấu trúc của thẻ <img /> không có sử dụng thẻ đóng (không dùng <img></img>), mà sử dụng
ký tự kết thúc là một khoảng trắng và ký tự "/".


Tham khảo thêm về thẻ <img />.
HTML viết
<p><img src="img_sakura.jpg" alt="Sakura" /></p>
Hiển thị trình duyệt:

Xem thêm ví dụ
Thẻ ngắt đoạn văn bản <br />

Thẻ ngắt đoạn văn bản <br /> dùng để xuống dòng văn bản trong cùng một đoạn văn.

Cấu trúc của thẻ <br /> không có sử dụng thẻ đóng (không dùng <br></br>), mà sử dụng ký
tự kết thúc là một khoảng trắng và ký tự "/".

Tham khảo thêm về thẻ <br />.
HTML viết
<p>Đây là đoạn văn dài rất dài rất dài rất dài<br />
rất dài rất dài rất dài rất dài.</p>
Hiển thị trình duyệt:
Đây là đoạn văn dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài.
Thẻ nhóm các inline <span></span>

Thẻ nhóm các inline <span></span> dùng để nhóm một hay nhiều thẻ inline khác nhau, thẻ
này không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ định dạng các inline thông qua CSS hoặc Javascript.

Tham khảo thêm về thẻ <span></span>.
HTML viết
<p>Đây là đoạn text có <span class="red">sử dụng</span> span.</p>
Hiển thị trình duyệt:
Đây là đoạn text có sử dụng span.

Thẻ hiển thị hình ảnh mạnh <strong></strong>

Thẻ hiển thị hình ảnh mạnh <strong></strong> mục đích đánh dấu văn bản, văn bản được đánh
dấu sẽ hiển thị dạng in đậm.

Tham khảo thêm về thẻ <strong></strong>.
HTML viết
<p>Đây là text được <strong>nhấn mạnh</strong>.</p>
Hiển thị trình duyệt:
Đây là text được nhấn mạnh.
Thẻ dùng để nhấn mạnh nội dung văn bản <em></em>

Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> mục đích nhấn mạnh văn bản nhằm gây
chú ý cho người xem, văn bản được đánh dấu sẽ hiển thị bằng hình dạng, in nghiên, màu sắc.

Tham khảo thêm về thẻ <em></em>.
HTML viết
<p>Đây là dòng text được <em>nhấn mạnh</em>.</p>
Hiển thị trình duyệt:
Đây là dòng text được nhấn mạnh.
Ví dụ về liên kết <a>
<a>
Liên kết tới trang khác

22

<a href="/index.php">Liên kết tới trang khác</a>
Liên kết tới trang khác
Liên kết tới trang khác thông qua hình (image)
<a href="/index.php"><img src="images/img_logo.gif" alt="Học web chuẩn" /></a>

Liên kết mail
Email: <a href="mailto:"></a>
Email:
Liên kết mail với chủ đề được điền sẵn
Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề đã
được điền sẵn.
Các sử dụng này validator sẽ xuất hiện cảnh báo (warning).
Email: <a href="mailto:?subject=Chu%20de%20viet%20o%20day">
</a>
Viết thêm %20 vào các khoảng trắng để chắc chắn rằng trình duyệt sẽ hiển thị thuộc tính text.
Email:

Liên kết mail với chủ đề và nội dung được điền sẵn
Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề và
nội dung đã được điền sẵn.
Các sử dụng này validator sẽ xuất hiện cảnh báo (warning).
Email: <a
href="mailto:?subject=Chu%20de%20viet%20o%20day&amp;body=Noi
%20dung%20viet%20o%20day"></a>
Viết thêm %20 vào các khoảng trắng để chắc chắn rằng trình duyệt sẽ hiển thị thuộc tính text.
Email:
Liên kết từ vị trí này tới vị trí khác
<a href="#layout">Liên kết tới id layout</a>
Liên kết tới id layout

Liên kết để mở file word (tương tự cho những định dạng khác)
<a href="doc/ex.doc">Mở file ex.doc trong thư mục "doc"</a>
Mở file ex.doc trong thư mục "doc"
Liên kết mở ra cửa sổ khác - target="_blank"

<a href="ex_img.php" target="_blank">Liên kết mở ra cửa sổ khác</a>
Liên kết mở ra cửa sổ khác
Ví dụ về link
<link />
Liên kết tới file css
<link rel="stylesheet" type="text/css" href="css/index.css" />
Liên kết trên cho biết văn bản HTML và index.css có mối quan hệ rel="stylesheet" theo kiểu
type="text/css" và đường dẫn liên kết tới file css là href="css/index.css".
Liên kết tới file css theo media="screen"
<link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
Liên kết trên cho biết, css chỉ điều khiển layout, không dùng cho trang print.
Xem ví dụ

Liên kết tới file css theo media="print"
<link rel="stylesheet" type="text/css" href="css/index.css" media="print" />
Liên kết trên cho biết, css chỉ điều khiển trang print, không dùng cho layout.
Xem ví dụ

Liên kết tới file css theo dạng kết hợp media="screen,print"
<link rel="stylesheet" type="text/css" href="css/index.css" media="screen,print" />

23

Liên kết trên cho biết, css điều khiển cả trang layout và print.
Xem ví dụ
Liên kết tới file css theo media="all"
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
Liên kết trên cho biết, css điều khiển tất cả các dạng cho văn bản (nếu không để media thì văn bản
hiểu là all).
Xem ví dụ

Ví dụ về <img />
<img />
<img /> - hình và trang html cùng folder

Html
<img src="img_sakura.jpg" alt="Sakura" />

<img /> - hình đặt trong folder "images"

Html
<img src="images/img_sakura.jpg" alt="Sakura" />

<img /> - hình đặt trong folder "images" khác folder với file html

Html
<img src=" /images/img_sakura.jpg" alt="Sakura" />
" /" mang ý nghĩa: từ trang html nhảy ra ngoài folder 1 cấp


<img /> - <map /> - <area />
<img /> - sử dụng <map> - dạng rect
<img src="images/img_sakura01.jpg" alt="Sakura" />
<map name="Map" id="Map" />
<area shape="rect" coords="59,56,140,96" href="#" alt="Planet" />
</map/>
Vùng map nằm bên trong hình vuông.


24

<img /> - sử dụng <map> - dạng circle
<img src="images/img_sakura.jpg" alt="Sakura" />
<map name="Map" id="Map" />
<area shape="circle" coords="99,80,51" href="#" alt="Planet" />
</map/>
Vùng map nằm bên trong quanh hành tinh.

<img /> - sử dụng <map> - dạng poly
<img src="images/img_sakura02.jpg" alt="Sakura" />
<map name="Map" id="Map" />
<area shape="poly" coords="79,73,95,70,100,56,109,71,123,75,112,85,114,100,100,94,86,100,88,87"
href="#" alt="Planet" />
</map/>
Vùng map nằm bên trong quanh ngôi sao.

Ví dụ về <p> - <br />
Đoạn văn bản <p>
<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>
<p><img src="images/img_planet.gif" alt="Space" /></p>
<p>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></p>
Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất
dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.

Trong đoạn văn này có chứa liên kết.
Ngắt đoạn cùng dòng sử dụng thẻ <br />
<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài
rất dài<br />
rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>
Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất

dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài.
Ngắt đoạn khác dòng sử dụng 2 thẻ <p>

<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>

25

<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>
Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất
dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.
Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất
dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.
Ví dụ về các tag <dl> - <dd> - <dt>
<dl> - <dt> - <dd>
Tag <dl> xác định danh sách (có đề mục và mô tả đề mục).
<dl>
<dt>Trái nho:</dt>
<dd>Thường màu đỏ hoặc xanh, có vị chua, ngọt.</dd>
<dt>Trái chuối:</dt>
<dd>Thường màu vàng, có vị ngọt.</dd>
</dl>
Trái nho:
Thường màu đỏ hoặc xanh, có vị chua, ngọt.
Trái chuối:
Thường màu vàng, có vị ngọt.
<dl>
<dt>Ngày 01/04/2011</dt>

<dd>Ngày quốc tế nối dối.</dd>
<dt>Ngày 01/05/2011</dt>
<dd>Ngày quốc tế lao động.</dd>
<dt>Ngày 01/06/2011</dt>
<dd>Ngày quốc tế thiếu nhi.</dd>
</dl>
Ngày 01/04/2011
Ngày quốc tế nối dối.
Ngày 01/05/2011
Ngày quốc tế lao động.
Ngày 01/06/2011
Ngày quốc tế thiếu nhi.
Ví dụ về các tag <ol> - <li>
<ol> - <li>
Tag <ol> sử dụng để tạo danh sách có thứ tự.
Danh sách dạng số
<ol>
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>
1. Danh sách 1
2. Danh sách 2
Danh sách dạng số bắt đầu bằng số bất kỳ, star="số" - HTML5
<ol start="4">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>
4. Danh sách 1
5. Danh sách 2
Danh sách dạng chữ thường, type="a"

<ol type="a">
<li>Danh sách 1</li>