Để làm dc một trang html cơ bản các bạn cần nắm rõ các thẻ cần thiết, chúng ta hãy thử kết hợp các thẻ định dạng nội dung và nhóm thẻ inline để tạo file html với nội dung trang web như bên dưới. Phân tích phần cơ bản trang web Với những phân tích trên, ta thấy những phần như: header, global navigation, page body, content, sidebar, footer đều là những phần nội dung lớn, do đó ta sẽ sử dụng thẻ <div></div> cho những thành phần này: PHP: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tiêu đề trang web</title></head><body><div id="header">Viết nội dung phần header ở đây</div><div id="gNav">Viết nội dung phần global navigation ở đây</div><div id="pageBody"><div id="content">Viết nội dung phần content ở đây</div><div id="sidebar">Viết nội dung phần sidebar ở đây</div></div><div id="footer">Viết nội dung phần footer ở đây</div></body></html> Chúng ta sử dụng thẻ <div id="layout"> để bao các thẻ bên trong thẻ <body> mục đích để dễ điều khiển phần khung của trang: PHP: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tiêu đề trang web</title></head><body><div id="layout"><div id="header">Viết nội dung phần header ở đây</div><div id="gNav">Viết nội dung phần global navigation ở đây</div><div id="pageBody"><div id="content">Viết nội dung phần content ở đây</div><div id="sidebar">Viết nội dung phần sidebar ở đây</div></div><div id="footer">Viết nội dung phần footer ở đây</div></div></body></html> Để thuận tiện cho việc xác định vị trí các thẻ đóng, ta sử dụng comment để đánh dấu vị trí của các thẻ, lưu ý là những comment này không có giá trị layout hay thể hiện nội dung, đơn giản chỉ để cho tiện xác định các thẻ đóng: PHP: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tiêu đề trang web</title></head><body><div id="layout"><div id="header">Viết nội dung phần header ở đây<!-- / id header --></div><div id="gNav">Viết nội dung phần global navigation ở đây<!-- / id gNav --></div> <div id="pageBody"><div id="content">Viết nội dung phần content ở đây<!-- / id content --></div><div id="sidebar">Viết nội dung phần sidebar ở đây<!-- / id sidebar --></div><!-- / id pageBody --></div><div id="footer">Viết nội dung phần footer ở đây<!-- / id footer --></div><!-- / id layout --></div></body></html> Nguồn: hocwebchuan.com
