Bài giảng Thiết kế Web - 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
Tóm tắt nội dung Bài giảng Thiết kế Web - 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 "TẢI VỀ" ở 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
Cách sử dụng bảng sau khi áp
dụng CSS
Slide 1 – XHTML: Cấu trúc nội dung web 14
ĐỊ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:
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
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)
.text_news {font-family: Tahoma, Geneva, sans-serif; font-
size:11px; text-decoration:none;}
class
#navi {width: 960px; float: left;}
id
Slide 1 – 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ệ 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 Bố cục Thiết kế
thiết kế website 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
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
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 26File đính kèm:
Bài 1_XHTML_Cấu trúc nội dung web.pdf
