HTML Layouts

HTML layouts determine the structure and layout of a web page. HTML5 provides semantic elements for layouts.

Traditional Layout (Table)

<table width="100%">
    <tr>
        <td colspan="2">Header</td>
    </tr>
    <tr>
        <td width="200">Sidebar</td>
        <td>Main Content</td>
    </tr>
    <tr>
        <td colspan="2">Footer</td>
    </tr>
</table>

Layout with Divs

<div id="container">
    <div id="header">Header</div>
    <div id="sidebar">Sidebar</div>
    <div id="content">Main Content</div>
    <div id="footer">Footer</div>
</div>

Layout with Semantic Elements (HTML5)

<header>Header</header>
<nav>Navigation</nav>
<main>
    <article>
        <section>Section 1</section>
        <section>Section 2</section>
    </article>
    <aside>Sidebar</aside>
</main>
<footer>Footer</footer>

Case Study: Campus Website Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campus Website Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

        .container {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: auto 1fr auto;
            min-height: 100vh;
        }

        header {
            grid-column: 1 / -1;
            background: #1e40af;
            color: white;
            padding: 1rem;
        }

        nav {
            background: #1e3a8a;
            padding: 0.5rem 1rem;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 1rem;
        }

        nav a {
            color: white;
            text-decoration: none;
        }

        aside {
            background: #f3f4f6;
            padding: 1rem;
        }

        main {
            padding: 1rem;
        }

        footer {
            grid-column: 1 / -1;
            background: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Technology University</h1>
        </header>

        <nav>
            <ul>
                <li><a href="beranda.html">Home</a></li>
                <li><a href="academic.html">Academic</a></li>
                <li><a href="research.html">Research</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>

        <aside>
            <h2>Menu</h2>
            <ul>
                <li>Student</li>
                <li>Lecturer</li>
                <li>Staff</li>
            </ul>
        </aside>

        <main>
            <h2>Welcome</h2>
            <p>Welcome to the university portal.</p>
        </main>

        <footer>
            <p>&copy; 2024 Technology University</p>
        </footer>
    </div>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a dashboard layout.

<style>
    .dashboard {
        display: grid;
        grid-template-columns: 250px 1fr;
        grid-template-rows: 60px 1fr;
        height: 100vh;
    }

    .dashboard-header {
        grid-column: 1 / -1;
        background: #1f2937;
        color: white;
        display: flex;
        align-items: center;
        padding: 0 1rem;
    }

    .dashboard-sidebar {
        background: #111827;
        color: white;
        padding: 1rem;
    }

    .dashboard-main {
        background: #f3f4f6;
        padding: 1rem;
    }
</style>

<div class="dashboard">
    <header class="dashboard-header">
        <h1>Dashboard Admin</h1>
    </header>

    <aside class="dashboard-sidebar">
        <nav>
            <ul>
                <li>Dashboard</li>
                <li>Student</li>
                <li>Lecturer</li>
                <li>Settings</li>
            </ul>
        </nav>
    </aside>

    <main class="dashboard-main">
        <h2>Statistics</h2>
        <p>Campus data summary</p>
    </main>
</div>

Best Practices

1. Use semantic elements: For meaningful structure
2. CSS Grid or Flexbox: For modern layouts
3. Mobile-first: Design for mobile first
4. Accessibility: Make sure navigation is accessible
5. Responsive: Make sure the layout is responsive

Summary

HTML layouts determine the structure of a web page. Use semantic elements and CSS Grid/Flexbox for modern layouts.