Bài giảng Lập trình Web - Phần 1: 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, Tim Berners-Lee 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 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 Lists Meta Info Tables Formatting Styles and Semantics Forms and Input Programming Frames Images Audio, Video Links 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