Tải phần mềm miễn phí

Slide hướng dẫn làm web bằng thẻ div cơ bản

Click vào link này để xem slide full màn hình

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:

1. Khung HTML càng gọn gàng (ít thẻ) càng tốt.
2. 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.
3. 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ó.

1. Demo: http://dangminhtuan.googlepages.com/web00.html (dow full 21 bước ở link  bên dưới cùng bài viết)
2. Bước 1: Xác định font chữ dùng cho trang web
3. Bước 2: Căn lề giữa trang web
4. Bước 3: Thềm lề cho trang, và điều chỉnh phần footer
5. 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
6. Bước 5: Cho các vùng chuyển động sang trái và phải
7. Bước 6: Thêm chiều cao cho các vùng
8. Bước 7: Trang trí cho các liên kết
9. Bước 8: Thêm màu nền
10. Bước 9: Trang trí phần tiêu đề chính
11. Bước 10: Trang trí jump link
12. Bước 11: Trang trí menu chính
13. Bước 12: Trang trí link và text ở sidebar
14. Bước 13: Trang trí List và Text ở footer
15. Bước 14: Trang trí phần đường dẫn
16. Bước 15: Trang trí phần nội dung và phần heading của sidebar
17. Bước 16: Trang trí phần trích dẫn và phần tác giả
18. Bước 17: Trang trí List trong nội dung chính
19. Bước 18: Thêm màu nền cho toàn trang
20. Bước 19: Thêm hình nền vào các phần để hoàn thiện trang
21. Bước cuối cùng: Chuyển CSS thành một file riêng

Nguồn: dangminhtuan1981