Bài giảng Thiết kế Wed - Bài 5: XHTML
1. Giới thiệu XHTML
• 2. Vai trò của XHTML
• 3. Sự khác nhau giữa XHTML và HTML
• 4. Cú pháp XHTML
• 5. Kiểu định nghĩa tài liệu
• 6. Chuyển đổi HTML sang XHTML
Tóm tắt nội dung Bài giảng Thiết kế Wed - Bài 5: XHTML, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
8/2/2010 1 1 Bài 5. XHTML Đỗ Bá Lâm Viện CNTT&TT - ĐHBKHN 2 Nội dung • 1. Giới thiệu XHTML • 2. Vai trò của XHTML • 3. Sự khác nhau giữa XHTML và HTML • 4. Cú pháp XHTML • 5. Kiểu định nghĩa tài liệu • 6. Chuyển đổi HTML sang XHTML 8/2/2010 2 3 1. Giới thiệu XHTML • XHTML viết tắt của từ eXtensible Hypertext Markup Language • XHMTL là một HTML mà mô tả một ứng dụng XML • XHTML chứa đựng tất cả các thẻ trong HTML 4.01 kết hợp với cú pháp XML • XHTML được mong đợi sẽ thay thế HTML 4 1. Giới thiệu XHTML • Lịch sử XHTML – XHTML 1.0 được công nhận là chuẩn Web vào ngày 26/1/2000 – W3C định nghĩa XHTML là phiên bản cuối cùng của HTML. – XHTML sẽ dần dần thay thế HTML – Tất cả các trình duyệt mới đều hỗ trợ XHTML 8/2/2010 3 5 2. Vai trò của XHTML • XML: ngôn ngữ mô tả cấu trúc và định nghĩa dữ liệu • HTML: ngôn ngữ mô tả cách thức dữ liệu hiển thị => XHTML: cho phép mô tả cấu trúc và cách thức hiển thị dữ liệu 6 2. Vai trò của XHTML • HTML: không yêu cầu định dạng chặt chẽ và nghiêm ngặt => Yêu cầu một ngôn ngữ đúng khuôn dạng • XML: là một ngôn ngữ định dạng đúng khuôn dạng => XHTML: cho chúng ta viết các tài liệu đúng khuôn dạng và có thể làm việc trên tất cả các trình duyệt 8/2/2010 4 7 3. Sự khác nhau giữa XHTML và HTML • Thẻ trong XHTML – Sử dụng lại toàn bộ các thẻ của HTML – Kết hợp với quy tắt XML • Khác biệt 1. Các thẻ XHTML phải sắp xếp đúng thứ tự HTML: Bold and Italic XHTML: Bold and Italic 8 3. Sự khác nhau giữa XHTML và HTML • Khác biệt 2. Các tài liệu XML phải hợp khuôn dạng …. …. 8/2/2010 5 9 3. Sự khác nhau giữa XHTML và HTML • Khác biệt 3. Các thẻ và thuộc tính phải ở dạng chữ thường Incorrect: This is a paragraph Correct: This is a paragraph 10 3. Sự khác nhau giữa XHTML và HTML • Khác biệt 4. Tất cả các thẻ phải được đóng Incorrect This is a paragraph Correct This is a paragraph 8/2/2010 6 11 3. Sự khác nhau giữa XHTML và HTML • Khác biệt 4. Tất cả các thẻ phải được đóng • Các thẻ chỉ có thẻ mở mà không kết thúc phải kết thúc bằng “/>” • Các thẻ liên kết không được chứa lồng thẻ khác • Thẻ không thể chứa thẻ , , … • Nên đặt thêm dấu khoảng trống trước dấu “/”: , 12 3. Sự khác nhau giữa XHTML và HTML • Khác biệt 4. Tất cả các thẻ phải được đóng Incorrect: This is a break Here is an image Correct: This is a break Here is an image 8/2/2010 7 13 4. Cú pháp XHTML • Quy tắt chung – Tên thuộc tính ở dạng chữ thường – Giá trị thuộc tính ở trong dấu nháy – Thuộc tính hạn chế bị cấm – Thuộc tính id thay thế cho tên thuộc tính – Bắt buộc phải có các thẻ định nghĩa XHTML DTD 14 4. Cú pháp XHTML • 1. Tên thuộc tính ở dạng chữ thường Incorrect Correct 8/2/2010 8 15 4. Cú pháp XHTML • 2. Giá trị các thuộc tính phải được trích dẫn “” Incorrect Correct 16 4. Cú pháp XHTML • 3. Không thể sử dụng các thuộc tính mà không có giá trị Incorrect Correct <input checked=“checked” 8/2/2010 9 17 4. Cú pháp XHTML • 4. Thuộc tính id thay thế thuộc tính name – HTML định nghĩa thuộc tính name cho một số thẻ: a, applet, frame, iframe, img, map – XHTML thay thế thuộc tính name bằng id Incorrect Correct 18 4. Cú pháp XHTML • 5. Thuộc tính lang Hello 8/2/2010 10 19 4. Cú pháp XHTML • 6. Các thành phần bắt buộc của XHTML – HTML: định dạng tự do, có thể không cần , – XHTML: yêu cầu • Phải có khai báo DOCTYPE • Các thành phần html, head, body được trình bày, tiêu đề bên trong head 20 4. Cú pháp XHTML • 6. Các thành phần bắt buộc của XHTML <html xmlns= > Title here Body text goes here 8/2/2010 11 21 4. Cú pháp XHTML • 6. Các thành phần bắt buộc của XHTML – Khai báo DOCTYPE phải đặt ở dòng đầu tiên của tài liệu – Thuộc tính xmlns trong thẻ là bắt buộc trong tài liệu XHTML 22 5. Kiểu định nghĩa tài liệu DTD • Document Type Definitions (DTD) • Đặc điểm – DTD chỉ rõ cú pháp của một trang Web – Mô tả chính xác ngôn ngữ máy tính có thể đọc cú pháp và ngữ pháp của định dạng XHTML • Các kiểu – STRICT – TRANSITIONAL – FRAMESET 8/2/2010 12 23 5. Kiểu định nghĩa tài liệu DTD 1. Kiểu định nghĩa hạn chế (STRICT) • Bao gồm những định nghĩa thẻ XHTML đơn giản, thường sử dụng nhất. Thường đi kèm với CSS • Khai báo <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN ” /xhtml1-strict.dtd”> 24 5. Kiểu định nghĩa tài liệu DTD 2. Kiểu định nghĩa chuyển tiếp (XHTML 1.0 Transitional) • Được sử dụng khi muốn hỗ trợ các trình duyệt không hiểu CSS • Khai báo <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional //EN” /xhtml1-transitional.dtd”> 8/2/2010 13 25 5. Kiểu định nghĩa tài liệu DTD 3. Kiểu định nghĩa khung (XHTML 1.0 Frameset) • Được sử dụng khi muốn sử dụng các khung để chia cửa sổ • Khai báo <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset //EN” /xhtml1-frameset.dtd”> 26 6. Chuyển đổi HTML sang XHTML • Thực hiện – Chuyển hết tên thẻ và thuộc tính về chữ thường – Thay đổi các thẻ mở, đóng theo quy ước của XHTML – Bổ sung giá trị cho các thuộc tính thiếu, cho các giá trị vào trong dấu nháy – Thêm định nghĩa DOCTYPE vào dòng đầu tài liệu • Phần mềm: TID • Kiểm tra cú pháp: 8/2/2010 14 27 Câu hỏi
File đính kèm:
Bài giảng Thiết kế Wed - Bài 5 XHTML.pdf
