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
Slide 1 – XHTML: Cấu trúc nội dung web
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ụ: <table border=“1”></table>
Có thể tự học về HTML, CSS và các công nghệ web tại:
4
ĐỊNH NGHĨA XHTML, CSS
ĐỊNH NGHĨA XHTML
Slide 1 – XHTML: Cấu trúc nội dung web
6
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
ĐỊNH NGHĨA XHTML
Slide 1 – XHTML: Cấu trúc nội dung web
7
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
CÁCH VIẾT XHTML
Slide 1 – XHTML: Cấu trúc nội dung web
8
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)
CÁCH VIẾT XHTML HỢP CHUẨN
Slide 1 – XHTML: Cấu trúc nội dung web
9
XHTML
ai
DO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
áo
g an
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml: lang="en">
n
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
ẻ
ẻ t
CÁCH VIẾT XHTML HỢP CHUẨN
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ạ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="http://www.w3.org/1999/xhtml">
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" />
MẪU TRANG XHTML CƠ BẢN
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
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ặ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ụ:
<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ằm trong cùng một dòng/khối
Ví 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
Slide 1 – XHTML: Cấu trúc nội dung web
13
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
ĐỊNH NGHĨA CSS
Slide 1 – XHTML: Cấu trúc nội dung web
14
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
Cách sử dụng bảng sau khi áp dụng CSS
ĐỊNH NGHĨA CSS
Slide 1 – XHTML: Cấu trúc nội dung web
15
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:
selector { Property1: Value1; Property2: Value2;}
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
ID & CLASS TRONG CSS
Slide 1 – XHTML: Cấu trúc nội dung web
16
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)
.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
Slide 1 – XHTML: Cấu trúc nội dung web
17
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:
CÔNG VIỆC THIẾT KẾ LAYOUT WEBSITE
Slide 1 – XHTML: Cấu trúc nội dung web
18
Bản thiết kế
Bố cục website
Thiết kế Layout
CÁCH THIẾT KẾ LAYOUT WEBSITE
Slide 1 – XHTML: Cấu trúc nội dung web
19
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
CÁCH THIẾT KẾ LAYOUT WEBSITE
Slide 1 – 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ó 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
Slide 1 – XHTML: Cấu trúc nội dung web
21
FIREBUG
Slide 1 – XHTML: Cấu trúc nội dung web
22
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, …
FIREBUG
Slide 1 – XHTML: Cấu trúc nội dung web
23
IE TESTER
Slide 1 – XHTML: Cấu trúc nội dung web
24
http://www.my- debugbar.com/wiki/IETester/HomePage
Kiểm tra trên trình duyệt: IE5 🡪 IE10
INSPECT ELEMENT
Slide 1 – XHTML: Cấu trúc nội dung web
25
Sử dụng trên chrome
Dễ dàng kiểm tra từng thành phần XHTML, CSS, …
TỔNG KẾT
Slide 1 – XHTML: Cấu trúc nội dung web
26
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
…