Bài giảng HTML - Trần Khải Hoàng

not render as anything 
 special.
Đánh dấu chèn, xóa với ins, del
a dozen is 
twenty 
twelve 
pieces
Most browsers will overstrike deleted text and underline 
inserted text.
Some older browsers will display deleted or inserted text as 
plain text.
Nội dung
  Giới thiệu HTML
  HTML Elements
  HTML Basic Tags
  HTML Attributes
  HTML Formats
  HTML Entitties
  HTML Lists
  HTML Link
  HTML Image
  HTML Table
  Bài tập
 49
HTML Entities
• Trong HTML số kí tự có ý nghĩa đặc biệt như (<, /, ...). Làm thế 
 nào để hiển thị nó ?
• Trình duyệt tự động loại bỏ các khoảng trắng dư thừa ? Làm thế 
 nào để hiển thị nhiều khoảng trắng mà không dùng thẻ pre ?
• Câu trả lời là dùng HTML Entities
• HTML Entities là các kí tự đặc biệt được ghi dưới 2 dạng sau :
 – Kí tự & + Tên + Kí tự ;
 – Kí tự & + Kí tự # + Số + Kí tự ;
Ví dụ HTML Entities 
 • Để hiển thị 
 – Kí tự < ta dùng < hoặc #60;
 – 3 khoảng trắng ta dùng    
 – Kí tự & ta dùng &
 • Lưu ý : 
 – Dùng tên dễ nhớ hơn là dùng số 
 – Tuy nhiên nhiều trình duyệt không hỗ trợ hết các tên mới
 – Ngược lại, việc hỗ trợ các entities bằng số lại tốt hơn
 – Tên thực thể có phân biệt chữ hoa và chữ thường
Các HTML entities phổ biến
 Kết quả Mô tả Thực thể dùng Thực thể dùng 
 tên số
 Khoảng trắgn    
 < Nhỏ hơn < <
 > Lớn hơn > >
 & Và & &
 " Dấu nháy kép " "
 ' Dấu nháy đơn ' (does '
 not work in IE)
Một số HTML Entities khác
Kết quả Mô tả Thực thể dùng Thực thể dùng 
 tên số
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered ® ®
 trademark
× multiplication × ×
÷ division ÷ ÷
Demo HTML Entities 
Character entities
&X;
Substitute the "X" with an entity number like "#174" or an 
entity name like "pound" to see the result. 
HTML Entities reference
 • Kham khảo danh sách các HTML entities ở đâu ?
 – 
 – 
Nội dung
  Giới thiệu HTML
  HTML Elements
  HTML Basic Tags
  HTML Attributes
  HTML Formats
  HTML Entitties
  HTML Lists
  HTML Link
  HTML Image
  HTML Table
  Bài tập
 56
HTML List
 • HTML hỗ trợ 3 loại danh sách
 – Danh sách không thứ tự (unordered list)
 – Danh sách có thứ tự (ordered list)
 – Danh sách định nghĩa (definition list)
Unordered list
• Một danh sách không thứ tự bao gồm nhiều mục. Mỗi mục sẽ 
 được đánh dấu bằng 1 bullet (thường hình tròn màu đen)
• Danh sách bắt đầu bằng thẻ 
• Mỗi mặt hàng bắt đầu bằng thẻ 
• Ví dụ
An Unordered List:
 Coffee
 Tea
 Milk
Các loại danh sách không thứ tự
 • Sử dụng thuộc tính type của thẻ ul, ta có thể thay đổi 
 hình dáng của bullet trong danh sách
 • Nếu type = 
 – disc => bullet hình tròn tô đen
 – circle => bullet hình tròn đen không tô
 – square => bullet hình vuông
Demo kiểu danh sách không thứ tự
Ordered list
 • Một danh sách có thứ tự cũng gồm nhiều mục. Nhưng mỗi mục lại được đánh số 
 từ 1,2,3...
 • Danh sách có thứ tự bắt đầu bằng thẻ ol (ordered list)
 • Mỗi mục bắt đầu bằng thẻ li
 • Ví dụ : 
 An Ordered List:
 Coffee
 Tea
 Milk
Các loại danh sách có thứ tự
 • Sử dụng thuộc tính type của thẻ ol, ta có thể thay đổi cách 
 đánh số trong danh sách có thứ tự
 • Nếu không có thuộc tính type, đánh số từ 1,2,3
 • Nếu type = 
 – a => đánh số từ a,b,c,d ...
 – A => đánh số từ A,B,C, ...
 – I => đánh số từ I,II,III,IV...
 – i => đánh số từ i, ii, iii, iv ...
Demo kiểu danh sách thứ tự
Ví dụ danh sách lồng
Danh sách định nghĩa
 • Danh sách định nghĩa là 1 danh sách bao gồm nhiều 
 mục. Mỗi mục bao gồm 1 từ khóa (term) và một định 
 nghĩa (description) cho từ khóa đó
 • Danh sách định nghĩa bắt đầu bởi thẻ dl (definition list)
 • Mỗi mục gồm 2 thẻ : 
 – Thẻ dt (definition term) đánh dấu từ khóa
 – Thẻ dd (definition description) đánh dấu định nghĩa
Demo HTML Entities 
Coffee
Black hot drink
Milk
White cold drink
Lưu ý về danh sách
 • Các mục trong 1 danh sách có thể là 1 từ, đoạn văn, 
 hình ảnh, âm thanh ... hay là 1 danh sách khác
 • Nếu trong 1 mục chứa trong nó 1 danh sách khác. Ta 
 gọi đó là 1 danh sách lồng
Các thẻ trong danh sách
 Thẻ Mô tả
 ol Xác định 1 danh sách không thứ tự
 ul Xác định 1 danh sách có thứ tự
 li Xác định 1 mục trong danh sách
 dl Xác định 1 danh sách định nghĩa
 dt Xác định 1 từ khóa
 dd Xác định mô tả của một từ khóa
Nội dung
  Giới thiệu HTML
  HTML Elements
  HTML Basic Tags
  HTML Attributes
  HTML Formats
  HTML Entitties
  HTML Lists
  HTML Link
  HTML Image
  HTML Table
  Bài tập
 69
HTML Link
 • Liên kết là địa chỉ 1 tài nguyên trên web
 • Tài nguyên có thể là 1 trang HTML, 1 hình ảnh, 1 file âm 
 thanh ...
 • Anchor là 1 từ khóa dùng để chỉ 1 liên kết trong nội bộ 
 1 trang
 • Thẻ dùng để đánh dấu liên kết
Thẻ 
 • Cú pháp : 
 Mô tả liên kết
 • Trong đó :
 – href là địa chỉ của tài nguyên cần trỏ tới
 – name là tên của liên kết (tùy chọn – sử dụng khi dùng anchor)
 – target qui định cửa sổ nào sẽ mở tài nguyên được liên kết
 • target = _blank : mở liên kết trong 1 cửa sổ mới
 • target = _self : mở liên kết trong cửa sổ hiện tại
 • target = _parent: mở liên kết trong cửa sổ cha của cửa sổ hiện tại
Ví dụ
 • Liên kết trỏ tới Khoa CNTT-TỨD
 Khoa CNTT-TƯD
 • Liên kết đến báo tuổi trẻ. Trang web tuoitre.com sẽ 
 được mở trong 1 cửa sổ mới
 Báo Tuổi 
 trẻ
Anchor(neo)
 • Để có thể liên kết đến 1 nơi nào đó trong nội bộ trang. Ta phải : 
 – Đánh dấu (Bookmark) vị trí bằng cách sử dụng thuộc tính tên của thẻ . 
 Ví dụ : ta đánh dấu vị trí trên cùng của trang web :
 – Sau đó liên kết đến vị trí vừa đánh dấu sử dụng thẻ và thuộc tính href
 Chapter 1
 hoặc
 Go to Chapter 1
 Go to Chapter 1
Demo anchor
 • File anchor.html
 Địa chỉ URL
 • Có 2 loại địa chỉ : 
 – Tuyệt đối : Địa chỉ tuyệt đối bao gồm cả tên miền của website 
 – Tương đối : Địa chỉ tương đối chỉ chứa đường dẫn đến tài 
 nguyên so với thư mục hiện tại
 Trang 1
 Chapter 2 Trang 1
Đường dẫn tương đối
 Book
 Index.html ../Index.html
 Chapter1
 Section1.html WE ARE HERE
 Section2.html
 Section2.html
 Chapter2 ../Chapter2/Section1.html
 Section1.html
Kí hiệu đặc biệt
 • Dấu . : Thư mục hiện tại
 • Dấu .. : Thư mục cha thư mục hiện tại
Nội dung
  Giới thiệu HTML
  HTML Elements
  HTML Basic Tags
  HTML Attributes
  HTML Formats
  HTML Entitties
  HTML Lists
  HTML Link
  HTML Image
  HTML Table
  Bài tập
 78
Thẻ hình ảnh 
 • Trong HTML, hình ảnh được xác định bởi thẻ 
 • là thẻ rỗng , tức chỉ có thuộc tính, không có thẻ 
 đóng
 • Để hiển thị 1 hình ảnh, ta phải cung cấp giá trị cho 
 thuộc tính src của . Đây là URL của ảnh đó
 • Cú pháp :
<img 
 src= "URL" 
 alt= "Alternative Text" 
 width = ""
 height = “"
/>
Thuộc tính thẻ 
 • src : URL của hình ảnh. Ví dụ
 • alt : Đoạn text mô tả hình ảnh. Sẽ được hiện khi hình không 
 tìm thấy hoặc chưa nạp kịp
 <img src = ”” alt= 
 ”Đây là cái vách núi” />
 • width, height : Dùng để qui định kích thước hiển thị của ảnh. 
 Ta có thể dùng để phóng lớn, hoặc thu nhỏ ảnh.
 <img src = ”” alt= 
 ”Đây là cái vách núi” width= ”200px” height= ”200px”/>
 Hình sẽ được hiển thị với kích thước 200x200
Nội dung
  Giới thiệu HTML
  HTML Elements
  HTML Basic Tags
  HTML Attributes
  HTML Formats
  HTML Entitties
  HTML Lists
  HTML Link
  HTML Image
  HTML Table
  Bài tập
 81
Thẻ 
 • Thẻ dùng để hiển thị dữ liệu dưới dạng bảng 
 (như Excel)
 • Hoặc dùng để layout trang web
 • Ví dụ
Cú pháp thẻ 
 • Bảng được xác định sử dụng thẻ 
 • Trong bảng sẽ có nhiều dòng, được đánh dấu bằng 
 (table row)
 • Trong mỗi dòng sẽ có nhiều ô dữ liệu, được đánh dấu 
 bằng thẻ (table data)
 • Mỗi ô dữ liệu có thể chứa 1 kí tự, hình ảnh, văn bản 
 hay 1 bảng khác
Ví dụ thẻ 
 row 1, cell 1
 row 1, cell 2
 row 2, cell 1
 row 2, cell 2
Tiêu đề trong bảng
 • Tiêu đề được đánh dấu sử dụng thẻ .
 • Dòng tiêu đề là dòng đầu tiên của bảng
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
Các thuộc tính của 
border
 cellpadding
 cellspacing
Thuộc tính border
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
 Thuộc tính cellpadding
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
 Thuộc tính cellspacing
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
Cell span
 • Một ô trong trong bản có thể trải rộng trên nhiều cột 
 hoặc nhiều dòng.
 • Trường hợp ô trải rộng trên dòng ta gọi là row span.
 Để làm việc này, ta dùng thuộc tính rowspan trên 
 , 
 • Trường hợp ô trải rộng trên cột ta gọi là column span.
 Để làm việc này, ta dùng thuộc tính colspan trên , 
 Row span
 First Name:
 Bill Gates
 Telephone:
 555 77 854
 555 77 855
 Column span
Cell that spans two 
columns:
 Name
 Telephone
 Bill Gates
 555 77 854
 555 77 855
Màu nền, hình nền cho 
 • Ta có thể đặt màu nền cho sử dụng thuộc tính 
 bgcolor
 • Thuộc tính background chỉ định hình nền cho 
 • Cú pháp :
 – bgcolor = “Màu nền“
 – background = “Tên hình nền"
 Ví dụ màu nền cho 
<table border="1" 
bgcolor="red">
 First
 Row
 Second
 Row
 Ví dụ hình nền cho 
<table border="1" 
background="bgdesert.jpg">
 First
 Row
 Second
 Row
Màu, hình nền cho cell
 • Mỗi ô hay dòng cũng có thể được đặt màu hoặc hình 
 nền giống sử dụng bgcolor và background
 First
 Row
 <td 
 background="bgdesert.jpg">
 Second
 Row
Nội dung
  Giới thiệu HTML
  HTML Elements
  HTML Basic Tags
  HTML Attributes
  HTML Formats
  HTML Entitties
  HTML Lists
  HTML Link
  HTML Image
  HTML Table
  Bài tập
 97
Nội dung
• Sử dụng notepad++ (download tại 
  làm 1 trang web 
 giới thiệu về lý lịch bản thân.
 98