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

pdf26 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Ngày: 01/09/2014 | Lượt xem: 843 | Lượt tải: 1download
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 26

File đính kèm:

  • pdfBài 1_XHTML_Cấu trúc nội dung web.pdf
Tài liệu liên quan