Đây đoạn dài chứa khơng chứa chữ đậm mà cịn chứa liên kết Slide – XHTML: Cấu trúc nội dung web 12 NHẮC LẠI VỀ CSS CSS viết tắt Cascading Style Sheets CSS định nghĩa cách thức hiển thị thành phần HTML Nhờ có CSS, thẻ HTML khơng cần có thuộc tính trình bày, mà 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 việc trình bày nội dung Các định nghĩa CSS lưu file html tách riêng file css Slide – XHTML: Cấu trúc nội dung web 13 ĐỊNH NGHĨA CSS CSS: cho phép định nghĩa style cho phần tử trang Cách sử dụng bảng trước chưa áp dụng CSS Cách sử dụng bảng sau áp dụng CSS Slide – XHTML: Cấu trúc nội dung web 14 ĐỊNH NGHĨA CSS CSS trang web gồm tập định nghĩa style (rule), có định dạng sau: selector { Property1: Value1; Property2: Value2;} Ngày nay, phần lớn trình duyệt máy tính thiết bị di động hỗ trợ chuẩn XHTML CSS Slide – XHTML: Cấu trúc nội dung web 15 ID & CLASS TRONG CSS Là thành phần định danh, thêm vào thẻ Giúp áp xác CSS vào thẻ 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) text_news {font-family: Tahoma, Geneva, sans-serif; fontsize:11px; text-decoration:none;} class #navi {width: 960px; float: left;} id Slide – XHTML: Cấu trúc nội dung web 16 SƠ ĐỒ PHÂN CẤP CỦA TÀI LIỆU Mối quan hệ thẻ trang XHTML: cha – Dựa mối quan hệ thẻ, viết: Slide – XHTML: Cấu trúc nội dung web 17 CÔNG VIỆC THIẾT KẾ LAYOUT WEBSITE Bản thiết kế Slide – XHTML: Cấu trúc nội dung web Bố cục website Thiết kế Layout 18 CÁCH THIẾT KẾ LAYOUT WEBSITE Xác định bố cục website: cột Chia nhỏ thành phần web để dàn layout Xác định box chứa nội dung cụ thể gì? Xác định vị trí box kế thừa Slide – XHTML: Cấu trúc nội dung web 19 CÁCH THIẾT KẾ LAYOUT WEBSITE Slide – XHTML: Cấu trúc nội dung web 20 KIỂM TRA TRÊN TRÌNH DUYỆT Một số trình duyệt có plug-in hỗ trợ kiểm tra tính hợp chuẩn lỗi mã XHTML CSS Phần lớn nhà phát triển web có sử dụng công cụ Slide – XHTML: Cấu trúc nội dung web 21 FIREBUG https://addons.mozilla.org/enUS/firefox/addon/firebug/ Là add-on gắn firefox Dễ dàng kiểm tra thành phần XHTML, CSS, … Slide – XHTML: Cấu trúc nội dung web 22 FIREBUG Slide – XHTML: Cấu trúc nội dung web 23 IE TESTER http://www.mydebugbar.com/wiki/IETester/HomePage Kiểm tra trình duyệt: IE5 IE10 Slide – XHTML: Cấu trúc nội dung web 24 INSPECT ELEMENT Sử dụng chrome Dễ dàng kiểm tra thành phần XHTML, CSS, … Slide – XHTML: Cấu trúc nội dung web 25 TỔNG KẾT XHTML định nghĩa cấu trúc tài liệu CSS cho phép định nghĩa style cho phần tử trang web Viết mã XHTML phải hợp lệ với tiêu chuẩn web để trình duyệt khác hiểu nghĩa Thành phần trang chia làm hai loại block inline Có thể sử dụng plug-in trình duyệt để kiểm tra layout lỗi XHTML, CSS: FireBug IE Tester Inspect Element … Slide – XHTML: Cấu trúc nội dung web 26 ... tố nội dung XHTML định nghĩa cấu trúc tài liệu XHTML xây dựng dựa cấu trúc tự XML XHTML cải tiến HTML, định nghĩa cấu trúc tài liệu chặt chẽ Slide – XHTML: Cấu trúc nội dung web ĐỊNH NGHĨA XHTML. .. viết: Slide – XHTML: Cấu trúc nội dung web 17 CÔNG VIỆC THIẾT KẾ LAYOUT WEBSITE Bản thiết kế Slide – XHTML: Cấu trúc nội dung web Bố cục website Thiết kế Layout 18 CÁCH THIẾT KẾ LAYOUT WEBSITE Xá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 việc trình bày nội dung Các định nghĩa CSS lưu file html tách riêng file css Slide – XHTML: Cấu trúc nội dung web 13 ĐỊNH NGHĨA