Bài 1 XHTML: Cấu trúc nội dung web

Nhắc lại về HTML Định nghĩa XHTML, CSS Cách thiết kế layout trang web Làm quen với cấu trúc một trang web Làm quen với những plugin kiểm tra mã XHTML và CSS trên những trình duyệt khác nhau

pdf26 trang | Chia sẻ: lylyngoc | Lượt xem: 1720 | Lượt tải: 1download
Bạn đang xem trước 20 trang tài liệu Bài 1 XHTML: Cấu trúc nội dung web, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Bài 1 XHTML: Cấu trúc nội dung web MỤC TIÊU BÀI HỌC Nhắc lại về HTML Định nghĩa XHTML, CSS Cách thiết kế layout trang web Làm quen với cấu trúc một trang web Làm quen với những plugin kiểm tra mã XHTML và CSS trên những trình duyệt khác nhau Slide 1 – XHTML: Cấu trúc nội dung web 2 NHẮC LẠI VỀ HTML NHẮC LẠI VỀ HTML HTML (Hypertext Markup Language): là ngôn ngữ đánh dấu siêu văn bản Cho phép định dạng văn bản, bổ sung hình ảnh, và video, cũng như lưu tất cả vào một trong file Được viết theo dạng thẻ (tag): Ví dụ: Có thể tự học về HTML, CSS và các công nghệ web tại: Slide 1 – XHTML: Cấu trúc nội dung web 4 ĐỊNH NGHĨA XHTML, CSS ĐỊNH NGHĨA XHTML XHTML (eXtensible HyperText Markup Language): cho phép xác định từng yêu tố của nội dung XHTML định nghĩa cấu trúc của tài liệu. XHTML được xây dựng dựa trên cấu trúc tự do của XML XHTML là cải tiến của HTML, định nghĩa một cấu trúc tài liệu chặt chẽ hơn Slide 1 – XHTML: Cấu trúc nội dung web 6 ĐỊNH NGHĨA XHTML XHTML vượt qua những hạn chế của HTML, có thể được chia sẻ giữa những dịch vụ web và những hệ thống dữ liệu khác. Ưu điểm của XHTML: Rõ ràng Dễ viết, dễ chỉnh sửa Linh động Nạp nhanh Slide 1 – XHTML: Cấu trúc nội dung web 7 CÁCH VIẾT XHTML Viết chuẩn mã XHTML sẽ giúp cho trang web hiển thị một cách tốt nhất trên nhiều trình duyệt và nhiều thiết bị Trang web muốn được các trình duyệt hỗ trợ lâu dài phải đạt chuẩn hợp lệ XHTML Trang hợp lệ là trang chỉ sử dụng thẻ đã được định nghĩa trong DTD (document type definition: định nghĩa kiểu tài liệu) Slide 1 – XHTML: Cấu trúc nội dung web 8 CÁCH VIẾT XHTML HỢP CHUẨN XHTML Khai báo DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ""> Khai báo không gian XML: <html xmlns="" lang="en" xml: lang="en"> Định nghĩa kiểu nội dung: <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> Thẻ đóng/ không đóng: rõ ràng, thẻ viết dưới dạng chữ thường, thuộc tính phải có giá trị Slide 1 – XHTML: Cấu trúc nội dung web 9 CÁCH VIẾT XHTML HỢP CHUẨN Khai báo DOCTYPE: đánh dấu cho trình duyệt sử dụng HTML, hay XHTML, hoặc cả hai. Có 3 loại DOCTYPE Khai báo không gian XML: liệt kê và xác định tất cả các thẻ hợp lệ <html xmlns=""> Khai báo nội dung: khai báo nội dung mô tả trang web. Có thể chứa nhiều từ khóa có ích cho quá trình SEO (Search Engine Optimization: tối ưu hóa bộ máy tìm kiếm) trang web <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Slide 1 – XHTML: Cấu trúc nội dung web 10 MẪU TRANG XHTML CƠ BẢN <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "> Mau trang XHTML 1.0 dung DOCTYPE kieu Strict nội dung/thẻ… Slide 1 – XHTML: Cấu trúc nội dung web 11 DÒNG CHẢY TRANG Nội dung của trang được trình bày từ trái sang phải (hoặc ngược lại) và từ trên xuống dưới, với thành phần là các khối Thành phần Block: nội dung các thành phần block sẽ nằm trên những dòng/khối khác nhau Ví dụ: Đây là tiêu đề mức 1 Đây là tiêu đề mức 2 Thành phần Inline: nội dung của các thành phần inline nằm trong cùng một dòng/khối Ví dụ: Đây là đoạn dài và chứa không chỉ chứa chữ đậm mà còn chứa liên kết Slide 1 – XHTML: Cấu trúc nội dung web 12 NHẮC LẠI VỀ CSS CSS là viết tắt của Cascading Style Sheets CSS định nghĩa cách thức hiển thị các thành phần HTML Nhờ có CSS, các thẻ HTML không cần có các thuộc tính trình bày, mà chỉ tập trung vào việc định nghĩa cấu trúc nội dung CSS giúp tách việc xây dựng nội dung và việc trình bày nội dung Các định nghĩa CSS có thể được lưu trong cùng file .html hoặc tách riêng trong file .css Slide 1 – XHTML: Cấu trúc nội dung web 13 ĐỊNH NGHĨA CSS CSS: cho phép định nghĩa style cho mỗi phần tử trên trang Cách sử dụng bảng trước đây khi chưa áp dụng CSS Slide 1 – XHTML: Cấu trúc nội dung web 14 Cách sử dụng bảng sau khi áp dụng CSS ĐỊNH NGHĨA CSS CSS của mỗi trang web gồm một tập các định nghĩa style (rule), có định dạng như sau: Ngày nay, phần lớn trình duyệt trên máy tính và thiết bị di động hỗ trợ chuẩn XHTML và CSS selector { Property1: Value1; Property2: Value2;} Slide 1 – XHTML: Cấu trúc nội dung web 15 ID & CLASS TRONG CSS Là thành phần định danh, được thêm vào thẻ Giúp áp chính xác CSS vào từng thẻ hoặc tập hợp thẻ Không nên viết id, class bắt đầu với ký tự số, biểu tượng (symbol) Slide 1 – XHTML: Cấu trúc nội dung web 16 .text_news {font-family: Tahoma, Geneva, sans-serif; font- size:11px; text-decoration:none;} #navi {width: 960px; float: left;} class id SƠ ĐỒ PHÂN CẤP CỦA TÀI LIỆU Mối quan hệ của các thẻ trong trang XHTML: cha – con Dựa trên mối quan hệ của các thẻ, có thể viết: Slide 1 – XHTML: Cấu trúc nội dung web 17 CÔNG VIỆC THIẾT KẾ LAYOUT WEBSITE Bản thiết kế Bố cục website Thiết kế Layout Slide 1 – XHTML: Cấu trúc nội dung web 18 CÁCH THIẾT KẾ LAYOUT WEBSITE Xác định bố cục website: cột Chia nhỏ từng thành phần trong web để dàn layout Xác định từng box chứa nội dung cụ thể gì? Xác định vị trí những box có thể kế thừa Slide 1 – XHTML: Cấu trúc nội dung web 19 CÁCH THIẾT KẾ LAYOUT WEBSITE Slide 1 – XHTML: Cấu trúc nội dung web 20 Một số trình duyệt có các plug-in hỗ trợ kiểm tra tính hợp chuẩn cũng như lỗi của mã XHTML và CSS Phần lớn các nhà phát triển web có sử dụng những công cụ này KIỂM TRA TRÊN TRÌNH DUYỆT Slide 1 – XHTML: Cấu trúc nội dung web 21 FIREBUG https://addons.mozilla.org/en- US/firefox/addon/firebug/ Là một add-on gắn trên firefox Dễ dàng kiểm tra từng thành phần XHTML, CSS, … Slide 1 – XHTML: Cấu trúc nội dung web 22 FIREBUG Slide 1 – XHTML: Cấu trúc nội dung web 23 IE TESTER debugbar.com/wiki/IETester/HomePage Kiểm tra trên trình duyệt: IE5  IE10 Slide 1 – XHTML: Cấu trúc nội dung web 24 INSPECT ELEMENT Sử dụng trên chrome Dễ dàng kiểm tra từng thành phần XHTML, CSS, … Slide 1 – XHTML: Cấu trúc nội dung web 25 TỔNG KẾT XHTML định nghĩa cấu trúc của tài liệu CSS cho phép định nghĩa style cho mỗi phần tử trên trang web Viết mã XHTML phải hợp lệ với tiêu chuẩn web để các trình duyệt khác nhau hiểu cùng một nghĩa Thành phần trên trang được chia làm hai loại block hoặc inline Có thể sử dụng các plug-in của trình duyệt để kiểm tra layout và lỗi XHTML, CSS: FireBug IE Tester Inspect Element … Slide 1 – XHTML: Cấu trúc nội dung web 26
Tài liệu liên quan