Bài giảng Lập trình web - Ngôn ngữ HTML - Nguyễn Hoàng Tùng

NGÔN NGỮ HTML 
  Nguyễn Hoàng Tùng 
  Bộ môn Kỹ thuật phần mềm 
  nhoangtung@agu.edu.vn 
  www.nhtung.com 
Nội dung chính của slide này 
HTML là gì? 
Thẻ và thuộc tính của thẻ 
Thuộc tính chung (Global attributes) 
Thuộc tính sự kiện (Event attributes) 
MIME-type 
Trang web HTML đầu tiên 
Phân loại các thẻ HTML theo chức năng. 
16/08/2014 Lập trình Web 2 
HTML là gì? 
HTML: HyperText Markup Language – Ngôn ngữ đánh dấu 
siêu văn bản. 
Do Tim Berner Lee phát minh và được W3C (World Wide 
Web Consortium) đưa thành chuẩn năm 1994. 
HTML sử dụng các thẻ (tags) để định dạng dữ liệu. 
HTML không phân biệt chữ hoa, chữ thường. 
Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu 
viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với 
dự định. 
16/08/2014 Lập trình Web 3 
Lịch sử phát triển 
1989: HTML ra đời bởi Tim Berners-Lee dựa trên cơ sở của 
ngôn ngữ SGML (Standard Generalized Markup Language), 
1990: HTML 1.0 được đưa vào sử dụng, 
1994: HTML 2.0, 
1996: HTML 3.2, 
1999: HTML 4.01 (chuẩn phổ biến), 
2000: XHTML 1.0 (chuẩn phổ biến), 
2001: XHTML 1.1, 
2002: XHTML 2.0, 
2008: HTML 5 ra đời với nhiều tính năng nổi bật. 
16/08/2014 Lập trình Web 4 
Tim Berners-Lee 
Thẻ và thuộc tính của thẻ 
Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau. 
Có 2 loại thẻ: thẻ mở và thẻ đóng 
Cách viết thẻ: 
Thẻ mở: 
• Ví dụ: , , , 
Thẻ đóng tương ứng: 
• Ví dụ: , ,... 
Chú ý: Luôn có thẻ mở nhưng có thể không có thẻ đóng tương 
ứng. 
• Ví dụ: , , ,... không có thẻ đóng. 
Các thẻ có thể lồng nhau, nhưng không đan xen lẫn nhau. 
16/08/2014 Lập trình Web 5 
Thẻ và thuộc tính của thẻ 
Một thẻ có thể có các thuộc tính để bổ sung tác dụng cho thẻ. 
Mỗi thuộc tính phải có tên (tên_tt) và giá trị (giá_trị). 
tên_tt="giá_trị" (giá trị phải để trong cặp dấu nháy đơn hoặc đôi) 
Các thuộc tính luôn phải khai báo trong thẻ mở. 
Viết thẻ có thuộc tính: 
VD: Hello! 
Chú ý: 
Có thể thay đổi thứ tự, số lượng các thuộc tính. 
Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. 
Chỉ giống nhau ở các thẻ, thuộc tính cơ bản. 
16/08/2014 Lập trình Web 6 
Thuộc tính chung (Global attributes) 
Thuộc tính chung áp dụng cho tất cả các thẻ HTML. 
Danh sách các thuộc tính chung thường dùng: 
16/08/2014 Lập trình Web 7 
Thuộc tính sự kiện (Event attributes) 
Sự kiện là những hành động do người dùng hoặc hệ thống 
gây ra. Các hành động do người dùng gây ra có thể là di 
chuyển chuột, nhấn chuột, nhả chuột, nhấn phím, nhả phím, 
copy, kéo giãn cửa sổ, di chuyển cửa sổ, Các sự kiện do 
hệ thống gây ra có thể là nạp tài liệu, đóng cửa sổ,... 
Khi một sự kiện xảy ra, nó sẽ tự động thực thi các câu lệnh 
javascript tương ứng với sự kiện đó. 
Mỗi sự kiện khi xảy ra chúng đều có một cái tên và thường 
bắt đầu bằng từ on, ví dụ như onclick, onchange,... 
Cú pháp: tên_sự_kiện="mã_javascript" 
VD: onclick="alert('Bạn đã click chuột vào đây!');" 
16/08/2014 Lập trình Web 8 
Thuộc tính sự kiện (Event attributes) 
Danh sách các thuộc tính sự kiện thường dùng: 
16/08/2014 Lập trình Web 9 
MIME-type 
MIME: Multipurpose Internet Mail Extensions – là một chuẩn 
Internet về định dạng cho thư điện tử. 
MIME là một chuẩn mã hóa dùng để bổ sung cho giao thức 
SMTP trong gửi mail để gửi kèm các thông điệp đa phương 
tiện, MIME sử dụng mã hóa Base64 để chuyển các file phức 
tạp sang ASCII. 
MIME cho phép 07 loại dữ liệu: Application, Audio, Image, 
Message, Multipart, Text, Video. 
Xem thêm:  
16/08/2014 Lập trình Web 10 
MIME-type 
16/08/2014 Lập trình Web 11 
Trang web HTML đầu tiên 
Công cụ soạn thảo HTML: 
Notepad, Notepad++, Dreamweaver, MS FrontPage,... 
Trình duyệt web: 
Internet Explorer, Mozilla Firefox, Opera, Google Chrome,... 
16/08/2014 Lập trình Web 12 
Trang web HTML đầu tiên 
Mở Notepad++, gõ vào văn bản HTML bên dưới, sau đó lưu 
lại với tên hello.html 
Tập tin HTML thường có phần mở rộng là .htm, .html 
Để gõ dấu tiếng Việt phải lưu văn bản dưới dạng UTF-8 và 
phải có thẻ meta utf-8 để hiển thị tiếng Việt trên trình duyệt. 
16/08/2014 Lập trình Web 13 
Trang web HTML đầu tiên 
Nội dung trang web hello.html khi mở với trình duyệt Firefox. 
Phải đảm bảo rằng trang web sau khi thiết kế phải chạy ổn 
định trên hầu hết các trình duyệt (cross-browser). 
16/08/2014 Lập trình Web 14 
Phân loại các thẻ HTML theo chức năng 
Basic 
Meta Info 
Formatting 
Forms and Input 
Frames 
Images 
Audio, Video 
Links 
Lists 
Tables 
Styles and Semantics 
Programming 
16/08/2014 Lập trình Web 15 
Nhóm thẻ cơ bản (Basic) 
16/08/2014 Lập trình Web 16 
Nhóm thẻ thông tin (Meta Info) 
16/08/2014 Lập trình Web 17 
Nhóm thẻ định dạng (Formatting) 
16/08/2014 Lập trình Web 18 
Nhóm thẻ biểu mẫu và nhập liệu (Forms and Input) 
16/08/2014 Lập trình Web 19 
Nhóm thẻ khung chứa (Frames) 
16/08/2014 Lập trình Web 20 
Nhóm thẻ hình ảnh (Images) 
16/08/2014 Lập trình Web 21 
Nhóm thẻ nhạc, phim (Audio, Video) 
16/08/2014 Lập trình Web 22 
Nhóm thẻ liên kết (Links) 
16/08/2014 Lập trình Web 23 
Nhóm thẻ danh sách (Lists) 
16/08/2014 Lập trình Web 24 
Nhóm thẻ bảng biểu (Tables) 
16/08/2014 Lập trình Web 25 
Nhóm thẻ trang trí, bố cục (Styles and Semantics) 
16/08/2014 Lập trình Web 26 
Nhóm thẻ nhúng mã (Programming) 
16/08/2014 Lập trình Web 27 
Giải đáp thắc mắc 
16/08/2014 Lập trình Web 28