bài 1 xhtml cấu trúc nội dung web

MỤC TIÊU BÀI HỌCNhắ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

Trang 1

Bài 1 XHTML: Cấu trúc nội dung web

Trang 2

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

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

Trang 3

NHẮC LẠI VỀ HTML

Trang 4

NHẮC LẠI VỀ HTML

đánh dấu siêu văn bản

video, cũng như lưu tất cả vào một trong file

Được viết theo dạng thẻ (tag):

Có thể tự học về HTML, CSS và các công nghệ webtại:

http://www.w3schools.com

đánh dấu siêu văn bản

video, cũng như lưu tất cả vào một trong file

Được viết theo dạng thẻ (tag):

Có thể tự học về HTML, CSS và các công nghệ webtại:

http://www.w3schools.com

Trang 5

ĐỊNH NGHĨA XHTML, CSS

Trang 6

ĐỊ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ủaXML

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

XHTML (eXtensible HyperText Markup Language):

cho phép xác định từng yêu tố của nội dung

XHTML được xây dựng dựa trên cấu trúc tự do củaXML

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

Trang 7

ĐỊ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

Trang 8

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àiphải đạt chuẩn hợp lệ XHTML

Trang hợp lệ là trang chỉ sử dụng thẻ đã được định

nghĩa kiểu tài liệu)

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àiphải đạt chuẩn hợp lệ XHTML

Trang hợp lệ là trang chỉ sử dụng thẻ đã được định

nghĩa kiểu tài liệu)

Trang 10

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="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ìnhSEO (Search Engine Optimization: tối ưu hóa bộ

máy tìm kiếm) trang web

content="text/html; charset=utf-8" />

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ìnhSEO (Search Engine Optimization: tối ưu hóa bộ

máy tìm kiếm) trang web

content="text/html; charset=utf-8" />

Trang 11

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 >

<head>

<title>Mau trang XHTML 1.0 dung DOCTYPE kieu Strict</title>

<title>Mau trang XHTML 1.0 dung DOCTYPE kieu Strict</title>

Trang 12

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

Đây là đoạn dài và chứa không chỉ chứa

chữ đậm mà còn chứa

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

Đây là đoạn dài và chứa không chỉ chứa

chữ đậm mà còn chứa

Trang 13

CSS giúp tách việc xây dựng nội dung và việc trìnhbà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

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ộctính trình bày, mà chỉ tập trung vào việc định nghĩacấu trúc nội dung

CSS giúp tách việc xây dựng nội dung và việc trìnhbà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

Trang 14

ĐỊ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

Trang 15

Property2: Value2;}

Trang 16

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)

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

Trang 17

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:

Trang 18

CÔNG VIỆC THIẾT KẾ LAYOUT WEBSITE

Bảnthiết kế websiteBố cục Thiết kế

Layout

Bảnthiết kế websiteBố cục Thiết kế

Layout

Trang 19

CÁCH THIẾT KẾ LAYOUT WEBSITE

Trang 20

CÁCH THIẾT KẾ LAYOUT WEBSITE

Trang 21

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à CSS

Phầ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

Trang 23

FIREBUG

Trang 25

INSPECT ELEMENT

Sử dụng trên chrome

Dễ dàng kiểm tra từng thành phần XHTML, CSS, …

Trang 26

TỔNG KẾT

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

…