tai lieu thiet ke website
TRANSCRIPT
Bài 1XHTML: 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, CSSCách thiết kế layout trang webLàm quen với cấu trúc một trang webLà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
Nhắc lại về HTMLĐịnh nghĩa XHTML, CSSCách thiết kế layout trang webLàm quen với cấu trúc một trang webLà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ảnCho 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ụ: <table border=“1”></table>
Có thể tự học về HTML, CSS và các công nghệ webtại:
http://www.w3schools.com
HTML (Hypertext Markup Language): là ngôn ngữđánh dấu siêu văn bảnCho 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ụ: <table border=“1”></table>
Có thể tự học về HTML, CSS và các công nghệ webtại:
http://www.w3schools.com
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 dungXHTML đị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ủaXMLXHTML là cải tiến của HTML, định nghĩa một cấutrúc tài liệu chặt chẽ hơn
XHTML (eXtensible HyperText Markup Language):cho phép xác định từng yêu tố của nội dungXHTML đị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ủaXMLXHTML là cải tiến của HTML, định nghĩa một cấutrú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àngDễ viết, dễ chỉnh sửaLinh độngNạp nhanh
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àngDễ viết, dễ chỉnh sửaLinh độngNạ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ểnthị 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àiphải đạt chuẩn hợp lệ XHTMLTrang hợp lệ là trang chỉ sử dụng thẻ đã được địnhnghĩa trong DTD (document type definition: địnhnghĩa kiểu tài liệu)
Viết chuẩn mã XHTML sẽ giúp cho trang web hiểnthị 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àiphải đạt chuẩn hợp lệ XHTMLTrang hợp lệ là trang chỉ sử dụng thẻ đã được địnhnghĩa trong DTD (document type definition: địnhnghĩ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""http://www.w3.org/TR/html4/frameset.dtd">
Khai báo không gian XML: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:
lang="en">
Khai báo không gian XML: <html xmlns="http://www.w3.org/1999/xhtml" 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ạiDOCTYPEKhai báo không gian XML: liệt kê và xác định tất cảcác thẻ hợp lệ <htmlxmlns="http://www.w3.org/1999/xhtml">Khai báo nội dung: khai báo nội dung mô tả trangweb. Có thể chứa nhiều từ khóa có ích cho quá trìnhSEO (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
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ạiDOCTYPEKhai báo không gian XML: liệt kê và xác định tất cảcác thẻ hợp lệ <htmlxmlns="http://www.w3.org/1999/xhtml">Khai báo nội dung: khai báo nội dung mô tả trangweb. Có thể chứa nhiều từ khóa có ích cho quá trìnhSEO (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" />
MẪU TRANG XHTML CƠ BẢN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!--the DOCTYPE--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Mau trang XHTML 1.0 dung DOCTYPE kieu Strict</title>
</head><body>
nội dung/thẻ…</body></html>
Slide 1 – XHTML: Cấu trúc nội dung web 11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!--the DOCTYPE--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Mau trang XHTML 1.0 dung DOCTYPE kieu Strict</title>
</head><body>
nội dung/thẻ…</body></html>
DÒNG CHẢY TRANG
Nội dung của trang được trình bày từ trái sang phải (hoặcngược lại) và từ trên xuống dưới, với thành phần là các khốiThành phần Block: nội dung các thành phần block sẽ nằmtrên những dòng/khối khác nhauVí dụ:
<h1>Đây là tiêu đề mức 1</h1><h2>Đây là tiêu đề mức 2</h2>
Thành phần Inline: nội dung của các thành phần inline nằmtrong cùng một dòng/khốiVí dụ:
<p>Đây là đoạn dài và chứa không chỉ chứa<strong>chữ đậm </strong>mà còn chứa<a href="#">liên kết</a>
Slide 1 – XHTML: Cấu trúc nội dung web 12
Nội dung của trang được trình bày từ trái sang phải (hoặcngược lại) và từ trên xuống dưới, với thành phần là các khốiThành phần Block: nội dung các thành phần block sẽ nằmtrên những dòng/khối khác nhauVí dụ:
<h1>Đây là tiêu đề mức 1</h1><h2>Đây là tiêu đề mức 2</h2>
Thành phần Inline: nội dung của các thành phần inline nằmtrong cùng một dòng/khốiVí dụ:
<p>Đây là đoạn dài và chứa không chỉ chứa<strong>chữ đậm </strong>mà còn chứa<a href="#">liên kết</a>
NHẮC LẠI VỀ CSS
CSS là viết tắt của Cascading Style SheetsCSS định nghĩa cách thức hiển thị các thành phầnHTMLNhờ có CSS, các thẻ HTML không cần có các thuộctính trình bày, mà chỉ tập trung vào việc định nghĩacấu trúc nội dungCSS giúp tách việc xây dựng nội dung và việc trìnhbày nội dungCác định nghĩa CSS có thể được lưu trong cùng file.html hoặc tách riêng trong file .css
CSS là viết tắt của Cascading Style SheetsCSS định nghĩa cách thức hiển thị các thành phầnHTMLNhờ có CSS, các thẻ HTML không cần có các thuộctính trình bày, mà chỉ tập trung vào việc định nghĩacấu trúc nội dungCSS giúp tách việc xây dựng nội dung và việc trìnhbày nội dungCá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 đâykhi 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 ápdụng CSS
ĐỊNH NGHĨA CSS
CSS của mỗi trang web gồm một tập các định nghĩastyle (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;}
CSS của mỗi trang web gồm một tập các định nghĩastyle (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
Slide 1 – XHTML: Cấu trúc nội dung web 15
selector {Property1: Value1;Property2: Value2;}
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ợpthẻKhông nên viết id, class bắt đầu với ký tự số, biểutượng (symbol)
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ợpthẻKhông nên viết id, class bắt đầu với ký tự số, biểutượ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;}
classclass
idid
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:
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ảnthiết kế
Bố cụcwebsite
Thiết kếLayout
Slide 1 – XHTML: Cấu trúc nội dung web 18
Bảnthiết kế
Bố cụcwebsite
Thiết kếLayout
CÁCH THIẾT KẾ LAYOUT WEBSITE
Xác định bố cục website: cộtChia nhỏ từng thành phần trong web để dàn layoutXá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
Xác định bố cục website: cộtChia nhỏ từng thành phần trong web để dàn layoutXá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ínhhợp chuẩn cũng như lỗi của mã XHTML và CSSPhần lớn các nhà phát triển web có sử dụng nhữngcô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 firefoxDễ 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
http://www.my-debugbar.com/wiki/IETester/HomePageKiể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 chromeDễ 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ệuCSS cho phép định nghĩa style cho mỗi phần tử trêntrang webViết mã XHTML phải hợp lệ với tiêu chuẩn web để cáctrình duyệt khác nhau hiểu cùng một nghĩaThành phần trên trang được chia làm hai loại block hoặcinlineCó thể sử dụng các plug-in của trình duyệt để kiểm tralayout và lỗi XHTML, CSS:
FireBugIE TesterInspect Element…
XHTML định nghĩa cấu trúc của tài liệuCSS cho phép định nghĩa style cho mỗi phần tử trêntrang webViết mã XHTML phải hợp lệ với tiêu chuẩn web để cáctrình duyệt khác nhau hiểu cùng một nghĩaThành phần trên trang được chia làm hai loại block hoặcinlineCó thể sử dụng các plug-in của trình duyệt để kiểm tralayout và lỗi XHTML, CSS:
FireBugIE TesterInspect Element…
Slide 1 – XHTML: Cấu trúc nội dung web 26