Beranda / PRAKTIK PW : LAYOUT WEB HTML SEDERHANA

PRAKTIK PW : LAYOUT WEB HTML SEDERHANA

admin novi Posting Komentar

 PRAKTIK PW : LAYOUT WEB HTML SEDERHANA


Silahkan Pilih Dua Layout di bawah ini sesuai dengan keinginan dan praktikkan script code nya :

Layout 1 : Tampilan

Layout 1 : Script Code

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Web Sederhana</title>
</head>

<body>
    <table border="1" width="100%" cellspacing="0" cellpadding="10">
        <!-- Header -->
        <tr>
            <td colspan="3" align="center" style="background-color: #f2f2f2;">
                <h1>Header</h1>
            </td>
        </tr>
        
        <!-- Menu Sidebar dan Konten Utama -->
        <tr>
            <!-- Menu Sidebar -->
            <td width="20%" valign="top">
                <h3>Menu</h3>
                <ul>
                    <li><a href="#">Beranda</a></li>
                    <li><a href="#">Tentang</a></li>
                    <li><a href="#">Kontak</a></li>
                </ul>
            </td>
            
            <!-- Konten Utama -->
            <td width="60%" valign="top">
                <h2>Konten Utama</h2>
                <p>Ini adalah bagian konten utama. Anda dapat menambahkan teks, gambar, atau elemen lainnya di sini.</p>
            </td>
            
            <!-- Sidebar Kanan -->
            <td width="20%" valign="top">
                <h3>Sidebar Kanan</h3>
                <p>Ini adalah sidebar tambahan untuk menampilkan informasi lain.</p>
            </td>
        </tr>
        
        <!-- Footer -->
        <tr>
            <td colspan="3" align="center" style="background-color: #f2f2f2;">
                <p>&copy; 2024 Layout Sederhana Pemograman WEb</p>
            </td>
        </tr>
    </table>
</body>
</html>
Layout 2 : Tampilan

Layout 2 : Script Code

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Web Sederhana</title>
</head>
<body>
    <!-- Layout Utama -->
    <table border="1" width="100%" cellspacing="0" cellpadding="10">
        <!-- Header -->
        <tr>
            <td colspan="3" align="center" style="background-color: #f2f2f2;">
                <h1>Header</h1>
            </td>
        </tr>
    </table>

    <!-- Menu Horizontal di Bawah Header -->
    <table width="100%" border="1" cellspacing="0" cellpadding="10">
        <tr align="center">
            <td style="border-right: 1px solid black;"><a href="#">Beranda</a></td>
            <td style="border-right: 1px solid black;"><a href="#">Tentang</a></td>
            <td style="border-right: 1px solid black;"><a href="#">Layanan</a></td>
            <td><a href="#">Kontak</a></td> <!-- Menu terakhir tanpa border kanan -->
        </tr>
    </table>

    <!-- Konten Utama dan Sidebar -->
    <table border="1" width="100%" cellspacing="0" cellpadding="10">
        <tr>
            <!-- Sidebar Kiri -->
            <td width="20%" valign="top">
                <h3>Sidebar Kiri</h3>
                <p>Ini adalah bagian sidebar kiri.</p>
            </td>
            
            <!-- Konten Utama -->
            <td width="60%" valign="top">
                <h2>Konten Utama</h2>
                <p>Ini adalah bagian konten utama. Anda dapat menambahkan teks, gambar, atau elemen lainnya di sini.</p>
            </td>
            
            <!-- Sidebar Kanan -->
            <td width="20%" valign="top">
                <h3>Sidebar Kanan</h3>
                <p>Ini adalah bagian sidebar kanan.</p>
            </td>
        </tr>
        
        <!-- Footer -->
        <tr>
            <td colspan="3" align="center" style="background-color: #f2f2f2;">
                <p>&copy; 2024 Layout Sederhana</p>
            </td>
        </tr>
    </table>
</body>
</html>

Posting Komentar untuk "PRAKTIK PW : LAYOUT WEB HTML SEDERHANA"