Bài 5: Layout & Containers

📦 Layout & Containers là gì?

💡 Tại sao cần Container Elements?

Container elements giúp tổ chức và nhóm các nội dung lại với nhau, tạo cấu trúc cho trang web và hỗ trợ CSS styling. Chúng không có nghĩa semantic nhưng rất quan trọng cho layout.

📦

Block Containers

Elements chiếm toàn bộ chiều rộng, tạo layout chính

<div> <section> <article>

📏

Inline Containers

Elements nằm trong dòng, không xuống dòng

<span> <strong> <em>

📋

Generic Containers

Container không có semantic meaning

<div> - Block generic
<span> - Inline generic

🎨

CSS Integration

Kết hợp với CSS để tạo layout

Classes, IDs, Flexbox, Grid layout

📦 Thẻ <div> - Block Container

🏗️ Div là gì?

<div> (division) là thẻ block-level container generic, không có semantic meaning. Được sử dụng để nhóm elements lại với nhau cho mục đích styling và layout.

Cách sử dụng div cơ bản

<!-- Div đơn giản -->
<div>
    <h2>Tiêu đề section</h2>
    <p>Nội dung trong div này.</p>
</div>

<!-- Div với class và id -->
<div class="container main-content" id="content">
    <div class="row">
        <div class="column">Cột 1</div>
        <div class="column">Cột 2</div>
        <div class="column">Cột 3</div>
    </div>
</div>

<!-- Div lồng nhau (nested) -->
<div class="card">
    <div class="card-header">
        <h3>Card Title</h3>
    </div>
    <div class="card-body">
        <p>Card content goes here.</p>
        <div class="actions">
            <button>Action 1</button>
            <button>Action 2</button>
        </div>
    </div>
</div>

👁️ Cách div hiển thị (block level):

Div 1 - Chiếm full width

Div 2 - Tự động xuống dòng

Div 3 - Có thể chứa nhiều elements

Paragraph trong div

📏 Thẻ <span> - Inline Container

🔤 Span là gì?

<span> là thẻ inline container generic, không có semantic meaning. Được sử dụng để style một phần nhỏ của text hoặc inline content.

Cách sử dụng span

<!-- Span trong text -->
<p>Văn bản này có <span style="color: red;">màu đỏ</span> ở giữa.</p>

<!-- Span với class -->
<p>Giá sản phẩm: <span class="price">$99.99</span></p>
<p>Trạng thái: <span class="status active">Hoạt động</span></p>

<!-- Multiple spans -->
<h1>
    <span class="highlight">Web</span> 
    <span class="normal">Development</span>
</h1>

<!-- Span for icons/badges -->
<button>
    <span class="icon">📧</span>
    Send Email
    <span class="badge">3</span>
</button>

<!-- Span data attributes -->
<p>Temperature: <span data-temp="25" class="temperature">25°C</span></p>

👁️ Cách span hiển thị (inline):

Span Span 1 nằm Span 2 trong dòng Span 3 như thế này.

Chúng không xuống dòng trừ khi hết chỗ trong dòng hiện tại.

🔄 Block vs Inline Elements

🤔 Khác biệt cơ bản

Hiểu được sự khác biệt giữa block và inline elements là nền tảng để tạo layout trong HTML/CSS.

📦

Block Elements

Chiếm full width, tự động xuống dòng

Đặc điểm:
• Chiếm toàn bộ chiều rộng có thể
• Tự động xuống dòng mới
• Có thể chứa block và inline elements
• Có thể set width/height

📏

Inline Elements

Nằm trong dòng, không xuống dòng

Đặc điểm:
• Chỉ chiếm width của content
• Không tự động xuống dòng
• Chỉ chứa inline elements
• Không thể set width/height

🔄

Block Elements

Ví dụ các thẻ block

<div> <p> <h1-h6>
<header> <main> <footer>
<section> <article>

📝

Inline Elements

Ví dụ các thẻ inline

<span> <a> <strong>
<em> <img> <input>
<button> <code>

So sánh Block vs Inline

<!-- Block Elements -->
<div>Div 1 (block) - full width</div>
<div>Div 2 (block) - xuống dòng mới</div>
<p>Paragraph (block) - cũng xuống dòng</p>

<!-- Inline Elements -->
<span>Span 1</span>
<span>Span 2</span>
<a href="#">Link</a>
<strong>Bold</strong>

<!-- Mixed: Block chứa Inline -->
<div>
    Div này chứa <span>span</span>, <strong>strong</strong>, 
    và <a href="#">link</a> bên trong.
</div>

<!-- CSS Display Property -->
<span style="display: block;">Span hiển thị như block</span>
<div style="display: inline;">Div hiển thị như inline</div>
<div style="display: inline-block;">Div với inline-block</div>

🏗️ Layout Patterns phổ biến

📄 Website Layout chuẩn

Template layout HTML cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Website Layout</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; }
        .container { max-width: 1200px; margin: 0 auto; }
        header { background: #333; color: white; padding: 1rem; }
        nav { background: #666; padding: 0.5rem; }
        .content { display: flex; min-height: 400px; }
        main { flex: 1; padding: 1rem; background: #f4f4f4; }
        aside { width: 250px; padding: 1rem; background: #e9e9e9; }
        footer { background: #333; color: white; padding: 1rem; text-align: center; }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Website Header</h1>
        </header>
        
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
        
        <div class="content">
            <main>
                <h2>Main Content Area</h2>
                <p>Nội dung chính của trang web.</p>
            </main>
            
            <aside>
                <h3>Sidebar</h3>
                <ul>
                    <li>Link 1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                </ul>
            </aside>
        </div>
        
        <footer>
            <p>&copy; 2024 Website Name</p>
        </footer>
    </div>
</body>
</html>

Navigation: Home | About | Services | Contact

Main Content Area

Đây là nơi chứa nội dung chính của trang web. Có thể là bài viết, sản phẩm, hoặc bất kỳ content nào.

📱 Card Layout

Card components

<!-- Card Layout -->
<div class="card-container">
    <div class="card">
        <div class="card-header">
            <h3>Product 1</h3>
        </div>
        <div class="card-image">
            <img src="product1.jpg" alt="Product 1">
        </div>
        <div class="card-body">
            <p>Mô tả sản phẩm ngắn gọn.</p>
            <div class="price">
                <span class="currency">$</span>
                <span class="amount">29.99</span>
            </div>
        </div>
        <div class="card-footer">
            <button class="btn-primary">Add to Cart</button>
            <button class="btn-secondary">View Details</button>
        </div>
    </div>
    
    <div class="card">
        <!-- Card 2... -->
    </div>
    
    <div class="card">
        <!-- Card 3... -->
    </div>
</div>

📊 Grid Layout với div

👁️ 3-column grid layout:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

🏷️ Class và ID Attributes

🎯 Tại sao cần Class và ID?

Class và ID giúp nhận diện và nhóm các elements để áp dụng CSS styles và JavaScript. Chúng là cầu nối giữa HTML và CSS/JS.

🏷️

Class Attribute

Có thể tái sử dụng nhiều lần

class="button"
class="card primary"
Một element có thể có nhiều classes

🆔

ID Attribute

Duy nhất trong trang, không duplicate

id="header"
id="main-content"
Chỉ một element có thể có ID cụ thể

🎨

CSS Selectors

Cách target elements trong CSS

.class-name { } - Class selector
#id-name { } - ID selector
ID có priority cao hơn class

⚡

JavaScript

Truy cập elements với JS

document.getElementById()
document.getElementsByClassName()
document.querySelector()

Class và ID examples

<!-- Class examples -->
<div class="container">
    <div class="card product-card">
        <h3 class="card-title">Product Name</h3>
        <p class="card-description text-muted">Description...</p>
        <button class="btn btn-primary">Buy Now</button>
    </div>
    
    <div class="card service-card">
        <h3 class="card-title">Service Name</h3>
        <p class="card-description">Service info...</p>
        <button class="btn btn-secondary">Learn More</button>
    </div>
</div>

<!-- ID examples -->
<header id="main-header">
    <nav id="main-navigation">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main id="main-content">
    <section id="home">Home Section</section>
    <section id="about">About Section</section>
    <section id="contact">Contact Section</section>
</main>

<footer id="main-footer">Footer Content</footer>

<!-- Combining class and ID -->
<div id="hero-section" class="section hero-bg text-center">
    <h1 class="hero-title">Welcome</h1>
    <p class="hero-subtitle text-large">Subtitle here</p>
</div>

✅ Best Practices cho Class và ID:

🏷️ Class naming: Sử dụng kebab-case (dash-separated)
🆔 ID unique: Mỗi ID chỉ xuất hiện một lần trong trang
📝 Semantic naming: Đặt tên theo chức năng, không phải giao diện
🎨 CSS priority: Ưu tiên class hơn ID cho styling
⚡ JavaScript: Sử dụng ID cho JavaScript interactions
🔗 Anchor links: Dùng ID cho internal links (#section-name)

💪 Bài tập thực hành

🎯 Bài tập 1: Tạo Landing Page Layout

Yêu cầu bài tập

<!-- 
🎯 YÊU CẦU LANDING PAGE:
1. Container chính với class="main-container"

2. Header section (id="header"):
   - Logo (div class="logo")
   - Navigation (nav class="main-nav")

3. Hero section (id="hero"):
   - Div class="hero-content"
     - Heading h1 class="hero-title"
     - Paragraph class="hero-description"
     - Button class="cta-button primary"

4. Features section (id="features"):
   - Div class="container"
     - H2 class="section-title"
     - Div class="features-grid"
       - 3 divs class="feature-card":
         - Div class="feature-icon"
         - H3 class="feature-title"
         - P class="feature-description"

5. About section (id="about"):
   - Div class="about-content"
     - Div class="about-text" (left side)
     - Div class="about-image" (right side)

6. Footer section (id="footer"):
   - Div class="footer-content"
     - Div class="footer-links"
     - Div class="footer-social"

✅ YÊU CẦU KỸ THUẬT:
- Proper semantic HTML structure
- Meaningful class names
- Unique IDs for major sections
- Nested div structure for layout
- Comments để giải thích từng section
-->

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Landing Page</title>
    <style>
        /* Basic reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; }
        
        /* Add your CSS styling here */
        .main-container { max-width: 1200px; margin: 0 auto; }
        /* ... more CSS ... */
    </style>
</head>
<body>
    <!-- Viết HTML structure của bạn ở đây -->
    
    
    
</body>
</html>

🎯 Bài tập 2: E-commerce Product Grid

Product Grid Layout

<!-- 
🛒 YÊU CẦU PRODUCT GRID:
1. Main container (class="shop-container")

2. Header (class="shop-header"):
   - H1 class="page-title": "Our Products"
   - Div class="filter-bar":
     - Select class="category-filter"
     - Select class="sort-filter"

3. Products grid (class="products-grid"):
   - 6 product cards, mỗi card có structure:
     - Div class="product-card":
       - Div class="product-image":
         - Img placeholder
         - Span class="discount-badge" (nếu có sale)
       - Div class="product-info":
         - H3 class="product-name"
         - P class="product-description"
         - Div class="product-price":
           - Span class="current-price"
           - Span class="original-price" (nếu có sale)
         - Div class="product-actions":
           - Button class="btn add-to-cart"
           - Button class="btn wishlist"

4. Sidebar (class="shop-sidebar"):
   - Div class="filter-section":
     - H3 class="filter-title": "Categories"
     - Div class="filter-options" với checkboxes
   - Div class="filter-section":
     - H3 class="filter-title": "Price Range"
     - Div class="price-range-slider"

5. Pagination (class="pagination"):
   - Div class="pagination-info"
   - Div class="pagination-controls"

💡 BONUS:
- Product cards có hover effects
- Sale badges cho discounted products
- Star ratings (span class="rating")
- Product image galleries
- Quick view buttons
-->

<!-- Tạo product grid của bạn ở đây -->

💡 Tips làm bài tập:

📦 Container logic: Wrapper divs để control max-width
🏷️ Class naming: BEM methodology (block__element--modifier)
🆔 ID usage: Chỉ cho major sections hoặc JavaScript targets
🎨 CSS structure: Tổ chức CSS theo components
📱 Responsive thinking: Mobile-first approach
♿ Accessibility: Proper heading hierarchy và alt texts

📝 Tổng kết khóa học HTML

🎓 Những điều bạn đã học được trong 5 bài:

✅ Bài 1 - HTML Structure: Cấu trúc HTML, thẻ head, semantic tags
✅ Bài 2 - Text Tags: Headings, paragraphs, lists, formatting
✅ Bài 3 - Links & Media: Anchor tags, images, video, audio, iframe
✅ Bài 4 - Forms: Input elements, validation, form structure
✅ Bài 5 - Layout: Div, span, block vs inline, class & ID

🚀 Bước tiếp theo - Học CSS:

Bây giờ bạn đã nắm vững HTML, đã đến lúc học CSS để tạo giao diện đẹp mắt và responsive cho các trang web HTML của bạn!

🎨

CSS Fundamentals

Selectors, properties, values, cascade

📐

CSS Layout

Flexbox, Grid, positioning, responsive design

✨

CSS Effects

Animations, transitions, transforms

📱

Responsive Web

Media queries, mobile-first design

🏠 Quay về trang chủ

🎯 Lời khuyên cuối:

Practice: Làm nhiều project thực tế để củng cố kiến thức
Semantic HTML: Luôn ưu tiên meaning hơn appearance
Accessibility: Tạo web cho mọi người sử dụng
Performance: Tối ưu hóa images, clean code structure
Standards: Follow HTML5 best practices và web standards
Keep Learning: Web development luôn thay đổi, học hỏi liên tục!