Mục tiêu :
Tạo trang HTML
Các định dạng trang web
Sử dụng hình ảnh trong trang web
Tạo form và các điều khiển trong form trên trang web
Xem đầy đủ tại http://www.hoclaptrinhweb.com
Bài 2 - Ngôn ngữ HTML - Học lập trình web cơ bản với Html, Css, Javascript
1. 11
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
2. 22
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Mục tiêuMục tiêu
• Tạo trang HTML
• Các định dạng trang web
• Sử dụng hình ảnh trong trang web
• Tạo form và các điều khiển trong form
trên trang web
3. 33
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
4. 44
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
− HTML (HyperText Markup Language)
là một ngôn ngữ đánh dấu siêu văn
− Sử dụng tập ký hiệu đánh dấu gọi là tag để thiết kế trang web,
các tag này còn được gọi là Element
− Là một chuẩn Internet do tổ chức W3C (World Wide Web
Consortium) duy trì
− Trang HTML được lưu với phần mở rộng là .htm hoặc .html
− Để tạo các trang HTML, bạn có thể sử dụng bất kỳ chương
trình soạn thảo văn bản nào, như Notepad, MS FrontPage
hoặc Dreamweaver, Visual Studio 2010 …
Bài 2: Ngôn ngữ HTML
Giới thiệu ngôn ngữ HTML
5. 55
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
6. 66
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các thành phần trong trang HTMLCác thành phần trong trang HTML
• Cấu trúc của trang HTML
• Cú pháp chung của tag
• Ví dụ
7. 77
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Cấu trúc của trang HTML
Bài 2: Ngôn ngữ HTML
Các thành phần trong trang HTML
<html>
<head>
<title> ... </title>
</head>
<body>
Nội dung của trang web
</body>
</html>
Đầu trangĐầu trang
Thân trangThân trang
8. 88
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các thành phần trong trang HTMLCác thành phần trong trang HTML
• Cấu trúc của trang HTML
• Cú pháp chung của tag
• Ví dụ
9. 99
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Cú pháp chung của tag
− Tag không có nội dung gọi là tag rỗng (empty tag) và có
cú pháp như sau:
Bài 2: Ngôn ngữ HTML
Các thành phần trong trang HTML
<Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” ... >
Nội dung
</Tên tag>
<Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” ... />
10. 1010
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Cú pháp chung của tag
− Các đặc điểm:
• Tên tag không phân biệt chữ HOA/thường
• Trình duyệt chỉ nhận 1 khoảng trắng trong Nội dung và bỏ
qua dấu ngắt xuống dòng
Bài 2: Ngôn ngữ HTML
Các thành phần trong trang HTML
Ví dụ:
<body>
<div align="center" style="font-style:italic; background-color:#FFFFCC; color:#0000FF“ >
Công cha như núi Thái sơn <br>
Nghĩa mẹ như nước trong nguồn chảy ra
</div>
</body>
11. 1111
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các thành phần trong trang HTMLCác thành phần trong trang HTML
• Cấu trúc của trang HTML
• Cú pháp chung của tag
• Ví dụ
12. 1212
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
13. 1313
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
14. 1414
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Định nghĩa cấu trúc trang HTML
− <html></html>: xác định phần bắt đầu và kết thúc của
trang HTML (HTML Document)
− <head></head>: chứa các thông tin tổng quát về trang
web (meta-information) và không thể hiện trên cửa sổ
trình duyệt.
− <body></body>: nội dung chính của trang web, được
thể hiện trong màn hình của trình duyệt
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
15. 1515
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
16. 1616
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các tag tiêu đề - Headings
− Dùng để định dạng khổ chữ có dạng tiêu đề (giống chức
năng Style của MS Word)
− Gồm các tag <h1>, <h2>, <h3>, <h4>, <h5>,<h6>
− HTML sẽ tự động thêm một dòng trống vào trước và sau
dòng định dạng là heading
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
17. 1717
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các tag tiêu đề - Headings
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
Ví dụ:
<body>
<h1>Đây là dòng heading 1</h1>
<h2>Đây là dòng heading 2</h2>
<h3>Đây là dòng heading 3</h3>
<h4>Đây là dòng heading 4</h4>
<h5>Đây là dòng heading 5</h5>
<h6>Đây là dòng heading 6</h6>
</body>
18. 1818
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
19. 1919
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Phân đoạn - Paragraphs
− Sử dụng tag <p> để phân biệt các đoạn văn bản
− Tag <p> không cần tag đóng
− HTML sẽ tự động thêm một dòng trắng trước và sau
đoạn văn bản
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
20. 2020
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Phân đoạn - Paragraphs
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
Ví dụ:
<body>
<p>Một nhóm các nhà khoa học Australia tin rằng quá ít axit béo
omega-3, có trong cá và hải sản, và quá nhiều axit béo omega-6, có trong dầu
chế biến và quả hạch, sẽ gia tăng nguy cơ bị trầm cảm ở lứa tuổi dậy thì.
<p>Gần 1.000 dân Sydney tuổi từ 14 đến 17 sẽ được chiêu mộ để
tham gia cuộc nghiên cứu tìm hiểu tác động của thức ăn đối với tâm trạng.
Việc ăn ít hải sản cũng đã được xác định có liên quan tới sự gia tăng khả năng
trầm cảm ở người lớn. Nghiên cứu sẽ nhằm khẳng định nó tác động tới thiếu
niên theo cách tương tự hay không.
<p>... </body>
21. 2121
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
22. 2222
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Ngắt dòng – Line Break
− Sử dụng tag <br> để chuyển sang một dòng mới nhưng
không kết thúc đoạn văn bản
− Tag <br> không cần tag đóng
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
23. 2323
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Ngắt dòng – Line Break
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
Ví dụ:
<body>
<p align="center">Ai ơi bưng bát cơm đầy
<br>Dẻo thơm một hạt đắng cay muôn phần
<p align="center">Ăn quả nhớ kẻ trồng cây
<br> Ăn khoai nhớ kẻ cho dây mà trồng
</body>
24. 2424
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
25. 2525
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tag <div> - Division
− Dùng để định nghĩa một section riêng trong trang web
− Có thể chứa các tag khác như tag <h1> đến <h6>,
<p>, ...
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
26. 2626
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tag <div> - Division
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
Ví dụ:
<body>
<div align="center" style="color:red“ >
<h2> Học Lập Trình Web</h2>
<h3>Học lập trình web từ cơ bản đến nâng cao</h2>
</div>
</body>
27. 2727
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
28. 2828
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tag <hr> - Horizontal rule
− Dùng để tạo ra một đường kẻ ngang
− Thuộc tính size và width dùng để thay đổi độ rộng và
chiều dài đường kẻ
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
29. 2929
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tag <hr> - Horizontal rule
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
Ví dụ:
<body>
<div align="center" style="color:red">
<h2> HocLapTrinhWeb.com</h2>
<h3> Học lập trình web cơ bản đến nâng cao</h3>
<hr width="200px" size="5px" color="red">
</div>
</body>
30. 3030
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các tag cơ bảnCác tag cơ bản
• Định nghĩa cấu trúc trang HTML
• Các tag tiêu đề - Headings
• Phân đoạn - Paragraphs
• Ngắt dòng – Line Break
• Tag <div> - Division
• Tag <hr> - Horizontal rule
• Tag <!-- --> - Comment
31. 3131
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tag <!-- --> - Comment
− Dùng để ghi chú trong trang HTML, nội dung trong phần
ghi chú không được thể hiện trên trình duyệt
Bài 2: Ngôn ngữ HTML
Các tag cơ bản
Ví dụ:
<body>
<div align="center" style="color:red">
<!-- hai dòng sau có màu đỏ -->
<h3> HocLapTrinhWeb.com</h3>
<h2 style="font-size:6px">Học lập trình web cơ bản đến nâng
cao</h2>
<div>
</body>
32. 3232
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
33. 3333
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Định dạng trang HTMLĐịnh dạng trang HTML
• Màu nền, màu chữ
• Hình ảnh nền
34. 3434
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
− Sử dụng các thuộc tính của tag <body> để định dạng
chung cho trang web. Phần định dạng gồm có:
• Màu nền, màu chữ
• Hình ảnh làm nền cho trang web
Bài 2: Ngôn ngữ HTML
Định dạng trang HTML
35. 3535
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Màu nền, màu chữ
− Thuộc tính bgcolor : tô màu nền
− Thuộc tính text : tô màu chữ
Bài 2: Ngôn ngữ HTML
Định dạng trang HTML
Ví dụ:
<body bgcolor="#1CEE11" text="#F98504">
<H1 align="center">Sunday</H1>
</body>
36. 3636
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Định dạng trang HTMLĐịnh dạng trang HTML
• Màu nền, màu chữ
• Hình ảnh nền
37. 3737
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Hình ảnh nền
− Thuộc tính background
Bài 2: Ngôn ngữ HTML
Định dạng trang HTML
Ví dụ:
<body text="#FF3399" background="heart.jpg">
<H1 align="center">TUỔI THƠ CỦA BÉ ...</H1>
</body>
38. 3838
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Hình ảnh nền
− Thuộc tính Style kết hợp với các thông tin chi tiết, gồm:
• background-image: khai báo tập tin hình ảnh
• background-repeat: dạng lặp lại hình ảnh nền (no-repeat /
repeat / repeat-x / repeat-y )
• background-attachment: hình ảnh cuộn theo nội dung trang
web hay ở vị trí cố định (scroll / fixed)
• background-position: xác định vị trí xuất hiện hình ảnh
(bottom / center / left / right / top)
Bài 2: Ngôn ngữ HTML
Định dạng trang HTML
Minh họaMinh họa
39. 3939
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
40. 4040
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Định dạng văn bảnĐịnh dạng văn bản
• Các tag định dạng
• Thuộc tính style
41. 4141
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các tag định dạng
− <b></b> - bold : in đậm
− <i></i> - italic : in nghiêng
− <u></u> - underline : gạch dưới
Bài 2: Ngôn ngữ HTML
Định dạng văn bản
Ví dụ:
<body >
<b>Dòng in đậm </b> <br>
<i> Dòng in nghiêng </i> <br>
<u>Dòng gạch dưới </u>
</body>
42. 4242
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các tag định dạng
− <sub></sub> - subscript : chữ dưới
− <sup></sup> - superscript : chữ trên
− <pre></pre> - preformatted: giữ nguyên định dạng trong
trang HTML
Bài 2: Ngôn ngữ HTML
Định dạng văn bản
Ví dụ:
<body>
<pre>
ax<sup>2</sup> + bx + c
hoặc
H<sub>2</sub>O
</pre>
</body>
43. 4343
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Định dạng văn bảnĐịnh dạng văn bản
• Các tag định dạng
• Thuộc tính style
44. 4444
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Thuộc tính style
− font-size : khổ chữ
− font-style : kiểu chữ
− font-family : tên font chữ
− font-weight : nét chữ ( đậm hoặc chọn kích thước)
− color : màu chữ
− text-decoration: gạch dưới, gạch trên, gạch bỏ hoặc bỏ
hết các định dạng
− background-color: màu nền
− border-color : màu đường viền
− border-style : kiểu đường viền
Bài 2: Ngôn ngữ HTML
Định dạng văn bản
Minh họaMinh họa
45. 4545
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
47. 4747
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
48. 4848
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Hình ảnh - ImagesHình ảnh - Images
• Chèn hình ảnh vào trang web
• Định dạng hình ảnh
49. 4949
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Chèn hình ảnh vào trang web
− Dùng tag <img> và thuộc tính src để khai báo URL
chứa tập tin hình ảnh
− Thuộc tính alt : xuất câu thông báo nếu tập tin hình
không tồn tại
Bài 2: Ngôn ngữ HTML
Hình ảnh - Images
Ví dụ:
<body>
<p><img src="tomcang.jpg" alt="Hình con tôm càng">Tôm là món hải sản
có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chế
biến xong món tôm rất ngon này.
</body>
50. 5050
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Hình ảnh - ImagesHình ảnh - Images
• Chèn hình ảnh vào trang web
• Định dạng hình ảnh
51. 5151
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Định dạng hình ảnh
− width, height: độ rộng và chiều cao hình, tính bằng pixel
(mặc định) hoặc %.
− align: định vị trí xuất hiện của hình so với đọan văn bản
một cách tương đối (left, right, … )
Bài 2: Ngôn ngữ HTML
Hình ảnh - Images
Ví dụ:
<body>
<p><img src="tomcang.jpg" alt="Hình con tôm càng“align="right" width="100"
height="60" >Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần
mươi phút là có thể chế biến xong món tôm rất ngon này.
</body>
52. 5252
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
53. 5353
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Danh sách - ListsDanh sách - Lists
• Tạo danh sách có thứ tự - Ordered Lists
• Tạo danh sách không có thứ tự - Unordered List
• Thay đổi ký hiệu đầu dòng trong danh sách
54. 5454
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tạo danh sách có thứ tự - Ordered Lists
− Dùng tag <li> kết hợp với tag <ol>, cú pháp như sau:
Bài 2: Ngôn ngữ HTML
Danh sách - Lists
<ol>
<li> ..... </li>
<li> ..... </li>
...
</ol>
Ví dụ:
<body>
<h3 style="color:#663333">
Thực đơn giải khát </h3>
<ol>
<li> Cafe đá </li>
<li> Coca cola </li>
<li> Chanh muối </li>
</ol>
</body>
55. 5555
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Danh sách - ListsDanh sách - Lists
• Tạo danh sách có thứ tự - Ordered Lists
• Tạo danh sách không có thứ tự - Unordered List
• Thay đổi ký hiệu đầu dòng trong danh sách
56. 5656
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tạo d.sách không có thứ tự - UnOrdered Lists
− Dùng tag <li> kết hợp với tag <ul>, cú pháp như sau:
Bài 2: Ngôn ngữ HTML
Danh sách - Lists
<ul>
<li> ..... </li>
<li> ..... </li>
...
</ul>
Ví dụ:
<body>
<h3 style="color:#663333">
Thực đơn giải khát </h3>
<ul>
<li> Cafe đá </li>
<li> Coca cola </li>
<li> Chanh muối </li>
</ul>
</body>
57. 5757
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Danh sách - ListsDanh sách - Lists
• Tạo danh sách có thứ tự - Ordered Lists
• Tạo danh sách không có thứ tự - Unordered List
• Thay đổi ký hiệu đầu dòng trong danh sách
58. 5858
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Thay đổi ký hiệu đầu dòng trong danh sách
− Thuộc tính type của tag <ul> và <ol>, bảng giá trị như
sau:
Bài 2: Ngôn ngữ HTML
Danh sách - Lists
59. 5959
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
60. 6060
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Liên kết - LinksLiên kết - Links
• Liên kết đến một trang web
• Liên kết trong cùng một trang
• Liên kết đến địa chỉ email
61. 6161
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Liên kết đến một trang
− tag <a> kết hợp với thuộc tính href (Hyperlink Reference)
Bài 2: Ngôn ngữ HTML
Liên kết - Links
<a href = "địa chỉ URL" > Nội dung tag </a>
Ví dụ:
<body>
Click vào đây để chuyển đến trang
<a href="http://www.hoclaptrinhweb.com">Tự học web</a>
</body>
62. 6262
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Liên kết - LinksLiên kết - Links
• Liên kết đến một trang web
• Liên kết trong cùng một trang
• Liên kết đến địa chỉ email
63. 6363
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Liên kết trong cùng một trang
− Đánh dấu vị trí cần chuyển đến: dùng thuộc tính name
− Dùng tag <a> và thuộc tính href để tạo liên kết đến
Bài 2: Ngôn ngữ HTML
Liên kết - Links
<a name="#<tên bookmark> "> Nội dung tag </a>
Ví dụ:
<body>
<a name="#dautrang">Phần đầu trang</a>
<p>....
<p>Nội dung trang web
<p>....
<p><a href="#dautrang">Về đầu trang</a>
</body>
64. 6464
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Liên kết - LinksLiên kết - Links
• Liên kết đến một trang web
• Liên kết trong cùng một trang
• Liên kết đến địa chỉ email
65. 6565
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Liên kết đến địa chỉ email
Bài 2: Ngôn ngữ HTML
Liên kết - Links
<a href=“mailto:Địa chỉ email"> Nội dung tag </a>
Ví dụ:
<body>
<a href="mailto:webhoclaptrinh@gmail.com"> Liên hệ
</a>
</body>
66. 6666
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
67. 6767
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Bảng biểu - TablesBảng biểu - Tables
• Tạo bảng biểu
• Trộn dòng, cột trong Table
• Định dạng Table
68. 6868
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tạo bảng biểu
− Bộ tag <table>, <tr>(table row) và <td> (table data)
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
<table>
<tr> <td> nội dung </td> <td> nội dung </td> </tr>
<tr> <td> nội dung </td> <td> nội dung </td> </tr>
… … … …
</table>
69. 6969
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tạo bảng biểu
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
Ví dụ:
<body>
<table border="1">
<tr>
<td>Dòng 1, cột 1</td>
<td>Dòng 1, cột 2</td>
</tr>
<tr>
<td>Dòng 2, cột 1</td>
<td>Dòng 2, cột 2</td>
</tr>
</table>
</body>
70. 7070
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tạo bảng biểu
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
Ví dụ:
<body>
<table border="1" width="500">
<tr><td width="300">Dòng 1, cột 1</td>
<td width="200">Dòng 1, cột 2</td>
</tr>
<tr><td>Dòng 2, cột 1</td><td>Dòng 2, cột 2</td></tr>
</table>
</body>
71. 7171
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Bảng biểu - TablesBảng biểu - Tables
• Tạo bảng biểu
• Trộn dòng, cột trong Table
• Định dạng Table
72. 7272
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Trộn dòng, cột trong Table
− colspan: kết hợp nhiều cột thành một cột
− rowspan: kết hợp nhiều dòng thành một dòng
− width : độ rộng của dòng, cột
− height : chiều cao của dòng, cột
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
Ví dụ: trộn cột
<body>
<table border="1" width="500">
<tr> <td width="20%" >Tên</td>
<td colspan="2" >Phạm Ngọc Thiên Thanh</td>
</tr>…
</table>
</body>
73. 7373
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Trộn dòng, cột trong Table
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
Ví dụ: trộn dòng
<body>
<table border="1" width="500">
<tr> <td width="50%" >Tên </td> <td> Điện thoại </td> </tr>
<tr> <td rowspan="2"> Phạm Ngọc Thiên Thanh </td>
<td> 8351056 </td> </tr> <tr> <td> 0909039999 </td> </tr>
</table>
</body>
74. 7474
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Bảng biểu - TablesBảng biểu - Tables
• Tạo bảng biểu
• Trộn dòng, cột trong Table
• Định dạng Table
75. 7575
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Định dạng Table
Sử dụng các thuộc tính của tag <table>
− Tạo khoảng cách giữa các cell
• cellpadding: khoảng cách từ biên của cell tới nội dung
trong cell
• cellspacing: khoảng cách giữa các cell
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
76. 7676
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Định dạng Table
Sử dụng các thuộc tính của tag <table>
− Tạo khoảng cách giữa các cell
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
Dòng 1, cột 1 Dòng 1, cột 2 Dòng 1, cột 3
… … …
Cellsapcing
Cellpadding
77. 7777
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Định dạng Table
Sử dụng các thuộc tính của tag <table>
− Tạo tiêu đề, canh lề và tô màu nền cho table
• Tag <caption>: tạo tiêu đề, phải đặt ngay sau tag <table>
• align : canh lề cho table
• bgcolor : tô màu nền
• background : hình làm nền
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
78. 7878
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Định dạng Table
Sử dụng các thuộc tính của tag <table>
− Tạo đường viền
• border : độ rộng của đường viền
• bordercolor : màu đường viền
Bài 2: Ngôn ngữ HTML
Bảng biểu - Tables
Ví dụ:
<body>
<table align="center" cellspacing="5" cellpadding="15" border="5"
width="500" bgcolor="#DFFDC4" bordercolor="#0E721F">
<caption style="font-weight:bold; font-size:18px"> Thông tin cá
nhân</caption>
<tr><td width="60%" align="center">Tên</td>
<td align="center">Điện thoại</td></tr>
<tr><td rowspan="2">Phạm Ngọc Thiên Thanh</td>
<td >8351056</td></tr>
<tr><td >0909039999</td></tr>
</table>
</body>
79. 7979
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
1. Giới thiệu ngôn1. Giới thiệu ngôn
ngữ HTMLngữ HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML
2. Các thành phần2. Các thành phần
Trong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản
4. Định dạng4. Định dạng
trang HTMLtrang HTML
4. Định dạng4. Định dạng
trang HTMLtrang HTML
5. Định dạng5. Định dạng
văn bảnvăn bản
5. Định dạng5. Định dạng
văn bảnvăn bản
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
6. Hiển thị các6. Hiển thị các
ký tự đặc biệtký tự đặc biệt
7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links
10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và các
điều khiểnđiều khiển
11. Form và các11. Form và các
điều khiểnđiều khiển
80. 8080
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Form và các điều khiển trên formForm và các điều khiển trên form
• Tạo form
• Các điều khiển cơ bản – Tag <input>
• Một số điều khiển khác
• Các sự kiện cơ bản
• Xử lý hiển thị kết quả lên trang web
81. 8181
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tạo form
− Dùng bộ tag sau:
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
<form name="tên form" >
<input >
<select></select>
<textarea></textarea>
...
</form>
Các tag tạo
ra điều khiển
trên form
82. 8282
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Form và các điều khiển trên formForm và các điều khiển trên form
• Tạo form
• Các điều khiển cơ bản – Tag <input>
• Một số điều khiển khác
• Các sự kiện cơ bản
• Xử lý hiển thị kết quả lên trang web
83. 8383
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các điều khiển cơ bản
− Tag <input> : tạo các điều khiển TextFields, Button, …
• type : xác định loại điều khiển
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
<input type=“loại điều khiển” name=“tên điều khiền” value=“giá
trị” id=”định danh”>
84. 8484
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các điều khiển cơ bản
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
Ví dụ:
<body>
<form name="nhap" >
<table><tr><td>Mã đăng nhập</td>
<td><input type="text" name="ma" value=""></td></tr>
<tr><td>Mật khẩu</td>
<td><input type="text" name="matkhau" value=""></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" name="dn" value="Đăng nhập"></td></tr>
</table>
</form>
</body>
85. 8585
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Form và các điều khiển trên formForm và các điều khiển trên form
• Tạo form
• Các điều khiển cơ bản – Tag <input>
• Một số điều khiển khác
• Các sự kiện cơ bản
• Xử lý hiển thị kết quả lên trang web
86. 8686
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Một số điều khiển khác
− Nhãn – tag <label>: có khả năng liên quan đến một điều
khiển khác (tag <input>)
• for : liên kết với điều khiển khác
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
Ví dụ:
<body>
<p>Nhấn chuột vào "Nam" hoặc "Nữ" để chọn giới tính<br>
<input type="radio" name="phai" id="nam“ checked=“checked” />
<label for="nam"> Nam</label><br />
<input type="radio" name="phai" id="nu" />
<label for="nu"> Nữ</label>
</body>
87. 8787
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Một số điều khiển khác
− Vùng nhập liệu – tag <textarea>: giống Text fields
nhưng cho phép nhập trên nhiều dòng
• Cols : xác định số ký tự trên 1 dòng
• Rows: xác định số dòng nhìn thấy trên điều khiển
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
Ví dụ:
<body>
<form name="nhap" >
Lý lịch:
<textarea cols="50" rows="5"> </textarea>
</form>
</body>
88. 8888
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Một số điều khiển khác
− Drop-down List – tag <select>: có dạng ComboBox hoặc
ListBox
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
<select id=" … " >
<option value=" … " selected="selected" >Mục chọn 1</option>
<option value=" … "> Mục chọn 2 </option>
<option value=" … "> Mục chọn 3 </option>
…
</select>
89. 8989
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Một số điều khiển khác
− Drop-down List – tag <select>: có dạng ComboBox hoặc
ListBox
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
Ví dụ: tạo điều khiển dạng ComboBox
<body>
<select id="momhoc">
<option value="1" selected="selected"> Lập trình web1 </option>
<option value="2"> Lập trình web2 </option>
<option value="3"> Đồ án thực tế </option>
</select>
</body>
90. 9090
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Một số điều khiển khác
− Drop-down List – tag <select>: có dạng ComboBox hoặc
ListBox
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
Ví dụ: tạo điều khiển dạng ListBox
<body>
<p>Hãy chọn phim mà bạn yêu thích, được phép chọn nhiều phim </p>
<select id="phim" size ="5" multiple="multiple" style="width:200">
<option value="1" selected="selected">Anh hùng xạ điêu</option>
<option value="2">Thập diện mai phục </option>
<option value="3">Báu vật hoàng cung</option>
<option value="4">Anh em nhà bác sĩ</option>
<option value="5">Ông bà Smith</option>
<option value="6">Mùa đu đủ xanh</option>
</select>
</body>
91. 9191
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Form và các điều khiển trên formForm và các điều khiển trên form
• Tạo form
• Các điều khiển cơ bản – Tag <input>
• Một số điều khiển khác
• Các sự kiện cơ bản
• Xử lý hiển thị kết quả lên trang web
92. 9292
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Các sự kiện cơ bản
− onload: xảy ra khi trang HTML được load, áp dụng cho
tag <body> và <frameset>
− onclick: xảy ra khi nhấn chuột lên điều khiển, thường áp
dụng cho các nút nhấn
− onchange: xảy ra khi thay đổi giá trị của điều khiển,
thường áp dụng cho điều khiển Drop-down List.
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
93. 9393
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Form và các điều khiển trên formForm và các điều khiển trên form
• Tạo form
• Các điều khiển cơ bản – Tag <input>
• Một số điều khiển khác
• Các sự kiện cơ bản
• Xử lý hiển thị kết quả lên trang web
94. 9494
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Xử lý hiển thị kết quả lên trang web
− Thường dùng tag <div> hoặc <label>, có 2 thuộc tính cơ
bản dùng để hiển thị kết quả:
• innerText : không nhận dạng chuỗi tag HTML có trong nội
dung xuất ra
Lưu ý: FireFox không hiểu thuộc tính innerText
• innerHTML: nhận dạng chuỗi tag HTML
Ví dụ: dùng innerText
<body>
<form name="nhap" >
<label id="cauchao" style="color:#FF0000"> </label>
<p><input type="button" name="kt" value="Kết thúc"
onClick="cauchao.innerText='Chúc mừng các bạn đã kết thúc bài học về
<b><u>form</u></b>' ">
<form name="nhap" >
</body>
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
ClickClick
95. 9595
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Xử lý hiển thị kết quả lên trang web
− Thường dùng tag <div> hoặc <label>, có 2 thuộc tính cơ
bản dùng để hiển thị kết quả:
Ví dụ: dùng innerHTML
<body>
<form name="nhap" >
<label id="cauchao" style="color:#FF0000"> </label>
<p><input type="button" name="kt" value="Kết thúc"
onClick="cauchao.innerHTML='Chúc mừng các bạn đã kết thúc bài học về
<b><u>form</u></b>' ">
<form name="nhap" >
</body>
Bài 2: Ngôn ngữ HTML
Form và các điều khiển trên form
ClickClick
96. 9696
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Bài 2: Ngôn ngữ HTML
HẾTHẾT
Hinweis der Redaktion
Thời lượng : 10 tiết
Giáo viên chuyển sang môi trường Dreamweaver minh họa phần Ví dụ
Minhoa_Bai02_slide38.html
Minhoa_Bai02_slide44.html
Ghi chú : Giáo viên minh hoạ thêm cho thuộc tính type Phần mở rộng : các danh sách lồng vào nhau <body><h3 style="color:#663333">Thực đơn </h3> <ul type ="square"> <li style="color: #3300FF ">Buổi sáng</li> <ol style="color: #000000 "> <li>Bánh canh cua</li> <li>Bún bò Huế</li> <li>Hủ tíếu Nam vang</li> </ol> <li style="color: #3300FF ">Buổi trưa</li> <ol style="color: #000000 "> <li>Cá lóc kho</li> <li>Thịt kho trứng</li> <li>Mục xào sa tế</li> </ol> <li style="color: #3300FF ">Chiều tối</li> <ol style="color: #000000 "> <li>Mì gói</li> <li>Bánh ướt</li> </ol> </ul></body>
Phần mở rộng : phân nhóm trong danh sách Ví dụ : tạo điều khiển dạng ComboBox có phân nhóm <body> <select id="momhoc" style="width:200" > <optgroup label ="Học phần 1"> <option value="1" selected="selected">Tin học cơ bản</option> <option value="2">Tin học văn phòng </option> </optgroup> <optgroup label ="Học phần 2"> <option value="3">Nhập môn lập trình</option> <option value="4">Kỹ thuật lập trình</option> </optgroup> </select> </body>