Trong ngôn ngữ lập trình HTML thì container chính là 1 phần tử có thể chứa được nhiều phần tử khác như <div>, <span>… Show Mỗi lớp .container hay .container-fluid có thể được sử dụng cho các phần tử này. Lớp này được áp dụng cho 1 phần tử sẽ và sẽ làm cho phần từ này có chiều rộng là 100%. Code html ví dụ:
Trong bài này thì chúng ta sẽ nói về các thẻ HTML được gọi chung chung là container
Vậy container có nghĩa là một cái gì đó có chứa một cái gì đó khác ở bên trong nó. Đúng là như vậy rồi. Tuy nhiên trong bài này chúng ta sẽ nói về những container lớn hơn kìa. Những container này sẽ không mô tả kiểu nội dung đặc trưng như văn bản hay hình ảnh, mà thay vào đó lại được sử dụng để nhóm các phần tử HTML khác thành các phần của trang web. Ví dụ như: thanh điều hướng, khu nội dung chính, chân trang, ... Và dưới đây là những thẻ container phổ biến mà bạn có thể chọn để cấu trúc trang web của mình: 1| <nav></nav> - Tên viết đầy đủ là navigation. Đại ý nói là bạn có thể dùng thẻ này để nhóm các liên kết điều hướng chính của website. 2| <header></header> - Container này được sử dụng để nhóm các nội dung giới thiệu. 3| <article></article> - Là một article, một bài viết hoàn chỉnh. 4| <section></section> - Có nghĩa là một phân đoạn, là một khối nội dung không được đầy đủ như article. 5| <main></main> - Nếu như một trang đơn không phải là một article và có chứa một danh sách các trích đoạn giới thiệu thì chúng ta nên nhóm tất cả các section đó bằng main. 6| <aside></aside> - Mình đoán là bạn đã từng nhìn thấy nhiều trang web có một cột điều hướng nhỏ được đặt ở bên cạnh khu vực hiển thị nội dung chính. Là nó đấy. Chính container này. 7| <footer></footer> - Một khối nội dung được đặt ở chân trang web. 8| <div></div> - Viết đầy đủ là division nghĩa là chia tách. Thẻ này không có ý nghĩa gì đối với cấu trúc trang web của bạn. Tuy nhiên đây lại là container được sử dụng nhiều nhất. Khi mà bạn không biết nên lựa chọn container nào trong số đã liệt kê trước đó thì đây chính là lựa chọn đơn giản nhất. Xem các container hoạt động nàoHãy lấy ví dụ là chúng ta đang tạo ra một trang web đơn giản có vài liên kết điều hướng ở trên cùng, một vài section để giới thiệu gì đó, và một footer ghi thông tin bản quyền sáng tạo. Chúng ta cũng giả định luôn là thanh điều hướng sẽ có màu nền tối và chữ màu trắng, các section thì được đặt trên một hình nền đẹp, và phần footer cũng sẽ có màu nền tối đi kèm chữ trắng. Tới đây thì mã HTML của chúng ta sẽ trông có dạng như thế này. <nav> <a href="#">A T R E E</a> <a href="#about">About</a> <a href="#work">Work</a> <a href="#contact">Contact</a> </nav> <main> <section id="about"> <h1>Hi! I'm a tree.</h1> <p>I love light, earth and water.</p> </section> <section id="work"> <h2>I'm an oxygen producer.</h2> <p>I produce oxygen to make life better.</p> </section> <section id="contact"> <h2>You can find me somewhere outhere.</h2> <p>Yes, I also have an email address: [email protected]</p> </section> </main> <footer> Copyright Nature @ Universe </footer>Kết quả
Kết quả hiển thị trên trình duyệt của bạn tốt chứ? Nếu không giống như trong hình minh họa ở phía trên thì... chắc chắn đó là lỗi của mình rồi. Thật xin lỗi bạn. Mình quên chưa nói cho bạn biết rằng những thẻ container này sẽ chỉ đơn giản là nhóm các phần tử HTML khác với nhau chứ không tạo ra hiệu ứng hiển thị gì khác cả. Bạn hãy thêm dòng mã này vào phần đầu của trang đơn và làm mới Tab trên trình duyệt web xem thế nào nhé. <link rel="stylesheet" href="https://codenart.github.io/css/atree.css">Lần này thì thế nào? Bạn có nhìn thấy phép màu nào đã xảy ra không? Đó là CSS! CSS là cái gì? Tại sao chúng ta lại cần CSS?Có một vài điều rất quan trọng mà mình muốn nói với bạn ngay từ bài viết đầu tiên nhưng kỳ thực là tại vì mình đãng trí quá nên quên mất. HTML chỉ có thể giúp chúng ta nói với trình duyệt hiển thị những cái gì; Còn về việc bảo trình duyệt trình bày những nội dung đó như thế nào thì chúng ta lại cần tới sự hỗ trợ của CSS nữa. CSS cũng là một ngôn ngữ rất đơn giản được thiết kế để giúp chúng ta nói chuyện được với các trình duyệt web thôi. Không có gì cao siêu cả đâu. Và bởi vì hiện tại bạn đã biết những thẻ HTML phổ biến, đây chính là thời điểm hoàn hảo để chúng ta bắt đầu học CSS. Các bài viết về HTML của mình vẫn sẽ được tiếp tục. Tuy nhiên thì mình khuyến khích bạn sử dụng ở dạng tham khảo thông tin khi cần thiết chứ không cần đọc tuần tự hết đâu. Bởi vì như vậy bạn sẽ cảm thấy nhàm chán lắm, mình hứa đấy. Việc học HTML chỉ có vậy thôi. Thử một vài thẻ HTML và làm mới Tab trên trình duyệt web. Ồ... từ từ đã... hình như việc học CSS cũng không hẳn là có gì khác lắm so với HTML. Nhưng mà mình hứa với bạn là việc học CSS sẽ thú vị hơn nhiều. Còn một điều quan trọng nữa mà mình muốn nói với bạn về HTML container. Cho mình xin thêm 30s để hoàn thành bài hướng dẫn này đã nhé. Sau đó chúng ta sẽ bắt đầu bài học CSS đầu tiên. Những container lớn nhấtĐúng vậy, có một vài container đặc biệt mà mình đã không nói đến trong phần đầu tiên.
Poof! <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>Đây là biểu mẫu HTML cơ bản và là được sử dụng làm tiêu chuẩn cho bất kỳ văn bản HTML nào. Những ví dụ trước đó của chúng ta đều hoạt động tốt là bởi vì các trình duyệt web hiện đại đều có một tính năng thông minh tự động giúp chúng ta áp dụng biểu mẫu này và đặt tất cả nội dung vào bên trong <body></body>. <head></head> được sử dụng để nhóm các phần tử HTML cung cấp các thông tin bổ sung liên quan tới trang web của chúng ta cho các trình duyệt. Những phần tử này sẽ không được hiển thị trên trang web nhưng sẽ âm thầm giúp ích cho chúng ta. Kế đến là một cặp thẻ <title></title> giúp chúng ta đặt tên cho trang đơn và hiển thị tên này trên Tab. <html></html> là container gốc của văn bản HTML. Chỉ là một cái gì đó giống với một cái <div></div> mà thôi. Không có gì đặc biệt đâu. Và <!doctype html>, phần tử này giúp chúng ta nói với trình duyệt là: văn bản này là HTML. Chúng ta không cần phải lần mò chi tiết về thẻ này đâu. Câu chuyện của nó thuộc về lịch sử của các ngôn ngữ đánh dấu. Tốt nhất là chúng ta cứ nên để yên cái lịch sử đó ở phần đầu của các văn bản HTML là được. Bài hướng dẫn của chúng ta về HTML container đã xong xuôi rồi. Hãy nghỉ giải lao một chút và bắt đầu bài học CSS đầu tiên nhé. Ludovico Einaudi - The Mountain [CSS] Bài 1 - CSS Là Cái Gì? Tại Sao Chúng Ta Lại Cần CSS? [HTML] Bài 5 - Danh Sách & Bảng |
