Layout trong HTML

Layout giúp trang web trông đẹp hơn. Và việc thiết kế Layout là khá tốn kém thời gian và công sức.

Ngày nay, tất cả các site hiện đại đang sử dụng nền tảng CSS và Javascript để tạo các trang web phản hồi tốt và có nhiều tính năng động. Nhưng bạn có thể tạo ra một Layout đẹp bằng cách đơn giản là sử dụng các table hoặc các thẻ div, span trong HTML kết hợp với các thẻ định dạng. Chương này chúng tôi sẽ cung cấp cho bạn một vài ví dụ về cách tạo một Layout đơn giản nhưng hiệu quả cho web của bạn bằng cách chỉ sử dụng HTML và các thuộc tính.

Sử dụng bảng trong HTML

Cách phổ biến nhất và đơn giản nhất để tạo ra các layout là sử dụng thẻ trong HTML. Những bảng này sắp xếp các dữ liệu vào các cột và hàng, vì thế bạn có thể lợi dụng hay sử dụng những hàng và cột này theo cách bạn muốn.

Ví dụ

Ví dụ sau về layout sử dụng một bảng với 3 hàng và 2 cột nhưng cột header và cột footer nối cả hai cột bằng cách sử dụng thuộc tính colspan:

Day la tieu de chinh cua trang Web
Main Menu HTML PHP PERL...	Loat bai huong dan cong nghe va lap trinh
Copyright © 2007 Tutorialspoint.com

Sau khi chạy đoạn mã trên sẽ tạo kết quả sau:

Thiết kế Layout có nhiều cột – Sử dụng bảng trong HTML

Bạn có thể thiết kế trang của bạn thành nhiều cột với các phần nội dung khác nhau. Bạn có thể giữ nội dung chính trong cột giữa và cột trái làm cột chứa menu, và cột phải dùng để đặt các quảng cáo. Loại layout này tương tự như cách chúng tôi bố trí trang web hiện tại.

Ví dụ

Sau đây là một ví dụ tạo một layout 3 cột:

  

    

      Main Menu

      HTML

      PHP

      PERL...
    
    

        Loat bai huong dan cong nghe va lap trinh
    
    

      Right Menu

      HTML

      PHP

      PERL...
    
   
Kết quả khi chạy đoạn code trên là:


  

    

      Main Menu

      HTML

      PHP

      PERL...
    
    

        Loat bai huong dan cong nghe va lap trinh
    
    

        Right Menu

      HTML

      PHP

      PERL...