Hướng dẫn làm web bằng thẻ DIV, CSS (cơ bản)

Nếu bạn có bao giờ tự hỏi: Nên dùng thẻ gì để dựng web? Table, hay Tableless (không dùng table), div hay divless (không dùng div) thì bài viết này dành cho bạn.

HTML được coi như tấm thân, CSS được coi như quần áo. Quần áo có đẹp, nhưng head và body tệ thì cũng vứt đi. Còn kể cả không có quần áo, nhưng head và body ngon thì vẫn được đánh giá tốt . Một trang web chuyên nghiệp hay không được nhìn nhận ngay ở cách họ xây dựng HTML.

Do đó, đây là bước đầu tiên, và cũng là bước quan trọng nhất đối với việc xây dựng site, và đây cũng là bước còn phải điều chỉnh trong quá trình xây dựng site. Để xây dựng bộ khung HTML tốt ta tuân theo 3 nguyên tắc sau:
Khung HTML càng gọn gàng (ít thẻ) càng tốt.
Các thẻ phải có ý nghĩa (semantic). Đoạn văn dùng thẻ p. Tiêu đề dùng thẻ h1, h2, h3. Danh sách dùng thẻ ul, li, hoặc dl, dd, dt. Dữ liệu dạng bảng (tabular data) thì dùng table, tr, td…. Tránh lạm dụng div (còn gọi là divitis). Chỉ dùng div khi không thể dùng những thẻ HTML có sẵn như vừa nêu. Nên dùng class, chỉ khi nào không thể dùng class thì mới dùng id.
Trường hợp không thể không thêm thẻ (như gặp tình huống khó như multi background, hoặc rounded corner, hoặc gặp tình huống cần hack như box model hack) thì mới thêm thẻ vào cấu trúc đã có.
Demo: http://dangminhtuan.googlepages.com/web00.html (dow full 21 bước ở link bên dưới cùng bài viết)

Bước 1: Xác định font chữ dùng cho trang web
Bước 2: Căn lề giữa trang web
Bước 3: Thềm lề cho trang, và điều chỉnh phần footer
Bước 4: Đặt chiều rộng cho các vùng trên web để chuẩn bị cho bước tiếp theo
Bước 5: Cho các vùng chuyển động sang trái và phải
Bước 6: Thêm chiều cao cho các vùng
Bước 7: Trang trí cho các liên kết
Bước 8: Thêm màu nền
Bước 9: Trang trí phần tiêu đề chính
Bước 10: Trang trí jump link
Bước 11: Trang trí menu chính
Bước 12: Trang trí link và text ở sidebar
Bước 13: Trang trí List và Text ở footer
Bước 14: Trang trí phần đường dẫn
Bước 15: Trang trí phần nội dung và phần heading của sidebar
Bước 16: Trang trí phần trích dẫn và phần tác giả
Bước 17: Trang trí List trong nội dung chính
Bước 18: Thêm màu nền cho toàn trang
Bước 19: Thêm hình nền vào các phần để hoàn thiện trang
Bước cuối cùng: Chuyển CSS thành một file riêng
http://www.mediafire.com/?zo8qi669z9rc7j5

Thanks: dangminhtuan1981