SlideShare a Scribd company logo
1 of 29
Download to read offline
Chương III

Trình bày: Nguyễn Phú Trường
CÁC THẺ CƠ BẢN

Table với thuộc tính cellpadding
Cellpadding :
số khoảng
trắng từ nội
dung trong ô
dữ liệu đến
đường viền.

24/Oct/2009

2

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Table với thuộc tính cellspacing

Cellspacing :
khoảng cách
giữa các ô
dữ liệu trong
1 bảng.

24/Oct/2009

3

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Table với số cột không bằng nhau

24/Oct/2009

4

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Dữ liệu trong Table

24/Oct/2009

5

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ danh sách (List)
 Có 3 dạng danh sách chính
 Danh sách có thứ tự (Ordered List) :
 Danh sách không thứ tự (Unordered List) :
 Danh sách định nghĩa (Definition Lists) :

<ol>
<ul>
<dl>

 Danh sách sẽ gồm nhiều phần tử
• Mỗi phần tử trong danh sách được đánh dấu bởi thẻ <li>
• Còn trong danh sách định nghĩa (dl) là : <dt> và <dd>

 Ngoài ra còn có các dạng: <menu> và <dir>
 Có thể định nghĩa các danh sách lồng nhau
24/Oct/2009

6

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ danh sách (ví dụ)
Danh
sách có
thứ tự
với
nhiều
định
dạng
khác
nhau

24/Oct/2009

7

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ danh sách (ví dụ)
Danh
sách
không
thứ tự
với
nhiều
định
dạng
khác
nhau

24/Oct/2009

8

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ danh sách (ví dụ)

24/Oct/2009

9

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Form
 Lựa chọn dữ liệu nhập từ người sử dụng khi
truy xuất Web,
 Thành phần trong Form: text fields, textarea
fields, drop-down menus, radio buttons,
checkboxes, etc.
 Form được đánh dấu bởi thẻ: <form> …. </form>
• VD : <form name=“Fname" action=“Form-Action”
method=“GET|POST"> …</form>

24/Oct/2009

10

Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Text Field

24/Oct/2009

11

Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Radio Button

24/Oct/2009

12

Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Checkbox

24/Oct/2009

13

Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Submit button

24/Oct/2009

14

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Form (ví dụ)

24/Oct/2009

15

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Image
 Thêm vào trang web những hình ảnh dưới định
dạng là *.gif hay *.jpg
 Thẻ đánh dấu là : <image src=“URL”>
 Các thuộc tính của thẻ Image
Width = number pixels / number %
Height = number pixels / number %
Align = “left/right/top/middle/bottom”
Alt=“Chuỗi đại diện khi không tải được hình”

 Thẻ <map> và <area>: chia hình ra làm nhiều phần
24/Oct/2009

16

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Image (ví dụ)

24/Oct/2009

17

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Body - với thuộc tính
 Nền của trang Web có thể được định dạng
Màu nền :
– <body bgcolor="#000000">
– <body bgcolor="rgb(0,0,0)">
– <body bgcolor="black">

Ảnh nền :
– <body background="clouds.gif">
– <body background=“http://www.diachi.net/hinh.jpg">
– <body background=“/bkground.jpg">

24/Oct/2009

18

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Body - thuộc tính bgcolor

24/Oct/2009

19

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Body - thuộc tính background

24/Oct/2009

20

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Head:
 Giữa cặp thẻ <head> và </head> : thông tin về tiêu
đề, địa chỉ nền, styles, meta, font nền, …
 Thông tin khai báo trong thẻ Head không được thể
hiện ra trong nội dung trang Web.
VD :<head>
•
<title> Tieu de trang Web </title>
•
<link rel="stylesheet" type="text/css“
href="mystyle.css">
•
<meta name="keywords" content="HTML">
• </head>
24/Oct/2009

21

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Title
 Cung cấp tên tiêu đề trên thanh tiêu đề của trình
duyệt khi thể hiện trang Web.

24/Oct/2009

22

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ Meta:
 Cung cấp thông tin tổng quát về trang Web cho các
Search Engine lưu trữ.
 Mô tả :
• <meta name="description" content=“Trang chu cua Website Khoa
CNTT – Truong DHCT">

 Từ khóa tìm kiếm :
• <meta name="keywords" content=“University, Cantho,
Computer, Information Technology">

 Chỉ định khi hiện trang Web: mở trang Web URL sau 5s
• <meta http-equiv="Refresh“ content="5; url=http://www.cit.ctu.edu.vn">
24/Oct/2009

23

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ Style
 Xu hướng dùng Style Sheet (CSS) để định dạng
chung cho nhiều trang Web trong Website,
 Có thể định dạng trong file ở ngoài,
VD : <link rel="stylesheet" type="text/css“ href=“abc.css">

 Có thể khai báo bên trong phần <head> trang Web,
VD :

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

 Có thể sử dụng thẳng trong nội dung trang Web.
VD : <p style="color: red; margin-left: 20px"> Paragraph1 </p>
24/Oct/2009

24

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ script
 Có thể nhúng vào trang Web những đoạn Script
viết bằng các ngôn ngữ như : JavaScript, VBScript,

24/Oct/2009

25

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ Font
 Định font cho cả trang Web bằng thẻ <basefont>
 Định font cho 1 đoạn văn bản bằng thẻ <font>

24/Oct/2009

26

Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ Font
 Thường sử dụng thuộc tính style để định dạng font
thay cho các tag cũ.

24/Oct/2009

27

Bộ môn Mạng máy tính & Truyền thông
KẾT LUẬN
 Nhiều thẻ HTML được định nghĩa,
 Thẻ HTML được thay đổi, thêm mới và loại bỏ một số thẻ
cũ bằng các định dạng khác,
 Có thể tham khảo từ :

http://www.w3.org

 Hiện nay, còn nhiều định dạng khác được sử dụng rất
nhiều trên Internet, chẳng hạn như :
• XML, XHTML

• WML
• Các kỹ thuật DHTML, CSS, ...

 Ngày nay, thường sử dụng thuộc tính style để định dạng
font thay cho các tag cũ.
24/Oct/2009

28

Bộ môn Mạng máy tính & Truyền thông
Chuong3b html-091030201401-phpapp02

More Related Content

Similar to Chuong3b html-091030201401-phpapp02

Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01
Ta Hormon
 
Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02
Ta Hormon
 
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)
Ta Hormon
 
Hdsd civil tkð
Hdsd civil tkðHdsd civil tkð
Hdsd civil tkð
Huy Vũ
 
HỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKING
HỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKINGHỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKING
HỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKING
Nhân Quả Công Bằng
 

Similar to Chuong3b html-091030201401-phpapp02 (20)

Nhập môn HTML 2
Nhập môn HTML 2Nhập môn HTML 2
Nhập môn HTML 2
 
Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01
 
Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02
 
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)
 
Nhập môn Css
Nhập môn CssNhập môn Css
Nhập môn Css
 
RCCd 2019 - Hướng dẫn sử dụng
RCCd 2019 - Hướng dẫn sử dụngRCCd 2019 - Hướng dẫn sử dụng
RCCd 2019 - Hướng dẫn sử dụng
 
Access Toan Tap
Access Toan TapAccess Toan Tap
Access Toan Tap
 
Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3
 
Phần mềm RCBc - Tính toán cốt thép dầm
Phần mềm RCBc - Tính toán cốt thép dầmPhần mềm RCBc - Tính toán cốt thép dầm
Phần mềm RCBc - Tính toán cốt thép dầm
 
Phần mềm RCCd - Triển khai chi tiết cột, vách
Phần mềm RCCd - Triển khai chi tiết cột, váchPhần mềm RCCd - Triển khai chi tiết cột, vách
Phần mềm RCCd - Triển khai chi tiết cột, vách
 
Hdsd civil tkð
Hdsd civil tkðHdsd civil tkð
Hdsd civil tkð
 
Bai1.pdf
Bai1.pdfBai1.pdf
Bai1.pdf
 
05 web course form
05 web course   form05 web course   form
05 web course form
 
Thuc hanh access
Thuc hanh accessThuc hanh access
Thuc hanh access
 
Internship Report Marketing Strategies Currently Applied At Company
Internship Report Marketing Strategies Currently Applied At CompanyInternship Report Marketing Strategies Currently Applied At Company
Internship Report Marketing Strategies Currently Applied At Company
 
3.BangTinh_Excel.pptx
3.BangTinh_Excel.pptx3.BangTinh_Excel.pptx
3.BangTinh_Excel.pptx
 
Html
HtmlHtml
Html
 
C3.Excel.ppt
C3.Excel.pptC3.Excel.ppt
C3.Excel.ppt
 
HỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKING
HỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKINGHỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKING
HỌC LỆNH GIÁC SƠ ĐỒ MARKER MAKING
 
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can banToilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
 

Chuong3b html-091030201401-phpapp02

  • 1. Chương III Trình bày: Nguyễn Phú Trường
  • 2. CÁC THẺ CƠ BẢN Table với thuộc tính cellpadding Cellpadding : số khoảng trắng từ nội dung trong ô dữ liệu đến đường viền. 24/Oct/2009 2 Bộ môn Mạng máy tính & Truyền thông
  • 3. CÁC THẺ CƠ BẢN Table với thuộc tính cellspacing Cellspacing : khoảng cách giữa các ô dữ liệu trong 1 bảng. 24/Oct/2009 3 Bộ môn Mạng máy tính & Truyền thông
  • 4. CÁC THẺ CƠ BẢN Table với số cột không bằng nhau 24/Oct/2009 4 Bộ môn Mạng máy tính & Truyền thông
  • 5. CÁC THẺ CƠ BẢN Dữ liệu trong Table 24/Oct/2009 5 Bộ môn Mạng máy tính & Truyền thông
  • 6. CÁC THẺ CƠ BẢN Thẻ danh sách (List)  Có 3 dạng danh sách chính  Danh sách có thứ tự (Ordered List) :  Danh sách không thứ tự (Unordered List) :  Danh sách định nghĩa (Definition Lists) : <ol> <ul> <dl>  Danh sách sẽ gồm nhiều phần tử • Mỗi phần tử trong danh sách được đánh dấu bởi thẻ <li> • Còn trong danh sách định nghĩa (dl) là : <dt> và <dd>  Ngoài ra còn có các dạng: <menu> và <dir>  Có thể định nghĩa các danh sách lồng nhau 24/Oct/2009 6 Bộ môn Mạng máy tính & Truyền thông
  • 7. CÁC THẺ CƠ BẢN Thẻ danh sách (ví dụ) Danh sách có thứ tự với nhiều định dạng khác nhau 24/Oct/2009 7 Bộ môn Mạng máy tính & Truyền thông
  • 8. CÁC THẺ CƠ BẢN Thẻ danh sách (ví dụ) Danh sách không thứ tự với nhiều định dạng khác nhau 24/Oct/2009 8 Bộ môn Mạng máy tính & Truyền thông
  • 9. CÁC THẺ CƠ BẢN Thẻ danh sách (ví dụ) 24/Oct/2009 9 Bộ môn Mạng máy tính & Truyền thông
  • 10. CÁC THẺ CƠ BẢN Thẻ Form  Lựa chọn dữ liệu nhập từ người sử dụng khi truy xuất Web,  Thành phần trong Form: text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.  Form được đánh dấu bởi thẻ: <form> …. </form> • VD : <form name=“Fname" action=“Form-Action” method=“GET|POST"> …</form> 24/Oct/2009 10 Bộ môn Mạng máy tính & Truyền thông
  • 11. Ví dụ về Text Field 24/Oct/2009 11 Bộ môn Mạng máy tính & Truyền thông
  • 12. Ví dụ về Radio Button 24/Oct/2009 12 Bộ môn Mạng máy tính & Truyền thông
  • 13. Ví dụ về Checkbox 24/Oct/2009 13 Bộ môn Mạng máy tính & Truyền thông
  • 14. Ví dụ về Submit button 24/Oct/2009 14 Bộ môn Mạng máy tính & Truyền thông
  • 15. CÁC THẺ CƠ BẢN Thẻ Form (ví dụ) 24/Oct/2009 15 Bộ môn Mạng máy tính & Truyền thông
  • 16. CÁC THẺ CƠ BẢN Thẻ Image  Thêm vào trang web những hình ảnh dưới định dạng là *.gif hay *.jpg  Thẻ đánh dấu là : <image src=“URL”>  Các thuộc tính của thẻ Image Width = number pixels / number % Height = number pixels / number % Align = “left/right/top/middle/bottom” Alt=“Chuỗi đại diện khi không tải được hình”  Thẻ <map> và <area>: chia hình ra làm nhiều phần 24/Oct/2009 16 Bộ môn Mạng máy tính & Truyền thông
  • 17. CÁC THẺ CƠ BẢN Thẻ Image (ví dụ) 24/Oct/2009 17 Bộ môn Mạng máy tính & Truyền thông
  • 18. CÁC THẺ CƠ BẢN Thẻ Body - với thuộc tính  Nền của trang Web có thể được định dạng Màu nền : – <body bgcolor="#000000"> – <body bgcolor="rgb(0,0,0)"> – <body bgcolor="black"> Ảnh nền : – <body background="clouds.gif"> – <body background=“http://www.diachi.net/hinh.jpg"> – <body background=“/bkground.jpg"> 24/Oct/2009 18 Bộ môn Mạng máy tính & Truyền thông
  • 19. CÁC THẺ CƠ BẢN Thẻ Body - thuộc tính bgcolor 24/Oct/2009 19 Bộ môn Mạng máy tính & Truyền thông
  • 20. CÁC THẺ CƠ BẢN Thẻ Body - thuộc tính background 24/Oct/2009 20 Bộ môn Mạng máy tính & Truyền thông
  • 21. CÁC THẺ CƠ BẢN Thẻ Head:  Giữa cặp thẻ <head> và </head> : thông tin về tiêu đề, địa chỉ nền, styles, meta, font nền, …  Thông tin khai báo trong thẻ Head không được thể hiện ra trong nội dung trang Web. VD :<head> • <title> Tieu de trang Web </title> • <link rel="stylesheet" type="text/css“ href="mystyle.css"> • <meta name="keywords" content="HTML"> • </head> 24/Oct/2009 21 Bộ môn Mạng máy tính & Truyền thông
  • 22. CÁC THẺ CƠ BẢN Thẻ Title  Cung cấp tên tiêu đề trên thanh tiêu đề của trình duyệt khi thể hiện trang Web. 24/Oct/2009 22 Bộ môn Mạng máy tính & Truyền thông
  • 23. CÁC THẺ NÂNG CAO Thẻ Meta:  Cung cấp thông tin tổng quát về trang Web cho các Search Engine lưu trữ.  Mô tả : • <meta name="description" content=“Trang chu cua Website Khoa CNTT – Truong DHCT">  Từ khóa tìm kiếm : • <meta name="keywords" content=“University, Cantho, Computer, Information Technology">  Chỉ định khi hiện trang Web: mở trang Web URL sau 5s • <meta http-equiv="Refresh“ content="5; url=http://www.cit.ctu.edu.vn"> 24/Oct/2009 23 Bộ môn Mạng máy tính & Truyền thông
  • 24. CÁC THẺ NÂNG CAO Thẻ Style  Xu hướng dùng Style Sheet (CSS) để định dạng chung cho nhiều trang Web trong Website,  Có thể định dạng trong file ở ngoài, VD : <link rel="stylesheet" type="text/css“ href=“abc.css">  Có thể khai báo bên trong phần <head> trang Web, VD : <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>  Có thể sử dụng thẳng trong nội dung trang Web. VD : <p style="color: red; margin-left: 20px"> Paragraph1 </p> 24/Oct/2009 24 Bộ môn Mạng máy tính & Truyền thông
  • 25. CÁC THẺ NÂNG CAO Thẻ script  Có thể nhúng vào trang Web những đoạn Script viết bằng các ngôn ngữ như : JavaScript, VBScript, 24/Oct/2009 25 Bộ môn Mạng máy tính & Truyền thông
  • 26. CÁC THẺ NÂNG CAO Thẻ Font  Định font cho cả trang Web bằng thẻ <basefont>  Định font cho 1 đoạn văn bản bằng thẻ <font> 24/Oct/2009 26 Bộ môn Mạng máy tính & Truyền thông
  • 27. CÁC THẺ NÂNG CAO Thẻ Font  Thường sử dụng thuộc tính style để định dạng font thay cho các tag cũ. 24/Oct/2009 27 Bộ môn Mạng máy tính & Truyền thông
  • 28. KẾT LUẬN  Nhiều thẻ HTML được định nghĩa,  Thẻ HTML được thay đổi, thêm mới và loại bỏ một số thẻ cũ bằng các định dạng khác,  Có thể tham khảo từ : http://www.w3.org  Hiện nay, còn nhiều định dạng khác được sử dụng rất nhiều trên Internet, chẳng hạn như : • XML, XHTML • WML • Các kỹ thuật DHTML, CSS, ...  Ngày nay, thường sử dụng thuộc tính style để định dạng font thay cho các tag cũ. 24/Oct/2009 28 Bộ môn Mạng máy tính & Truyền thông