Tugas 2


Nama : Dentha Jefry Yudhiantara
RP       : 5053231012
Prodi   : Rekayasa Perangkat Lunak
Kelas   : Pemograman Website (M)


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewreport" content="width=device-width, initial-scale=1.0"/>
        <title>Laman login</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .login{
                border-collapse: collapse;
                width: 60%;
            }

            h1{
                text-align: center;
            }
           
            body > form{
                display: flex;
                justify-content: center;
                flex-direction: column;
                border: 1px solid black;
                padding: 2rem;
                gap: 1rem;
            }

            input[type="submit"]{
                width: fit-content;
                align-self: self-end;
            }
        </style>
       
    </head>
    <body>
        <form>
            <h1>Login</h1>
            <table class="login">
            <tr>
                <td style="font-weight: bold">Username:</td>
                <td><input type="text" name="Username" size="12"/></td>
            </tr>
            <tr>
                <td style="font-weight: bold">Password:</td>
                <td><input type="text" name="Password" size="12"/></td>
            </tr>
        </table>
        <div class="check">
            <span>Remember me</span>
            <input type="checkbox"/>
        </div>
        <input type="submit" value="Login"/>
        </form>
    </body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel HTML</title>
    <style>
        table {
            border-collapse: collapse;
            width: 40%;
            margin:0 auto;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
        th {
            background-color: #1173b2;
            color: white;
        }
    </style>
</head>
 
<body>
    <table>
        <tr>
            <th rowspan="2">Nama</th>
            <th colspan="3">Nilai</th>
        </tr>
                 
        <tr>
            <th>Kimia</th>
            <th>Fisika</th>
            <th>Matematika</th>
        </tr>
                 
        <tr>
            <td>Dentha</td>
            <td>76</td>
            <td>80</td>
            <td>88</td>
        </tr>
                 
        <tr>
            <td>Harni</td>
            <td>84</td>
            <td>70</td>
            <td>91</td>
        </tr>
                 
        <tr>
           <td>Rifki</td>
           <td>96</td>
           <td>70</td>
           <td>86</td>
        </tr>
    </table>
</body>
 
</html>



Beli pupuk di atas jika ingin lombok atau cabai kalian subur.


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 380px;
            border-collapse: collapse;
            margin: 15px auto;
            border: 1px solid #000;
        }
        th {
            background-color: yellow;
            padding: 4px;
            font-size: 15px;
        }
        td {
            border: 1px solid #000;
            padding: 10px;
        }
        .fitur ul {
            list-style-type: disc;
            padding-left: 15px;
        }
        .gambar {
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th colspan="2">Produk Unggulan</th>
    </tr>
    <tr>
        <td class="gambar">
            <img src="https://filebroker-cdn.lazada.co.id/kf/Se43194f3d8054cfab842dcef342cb9e01.jpg" width="200" />
        </td>
        <td>
            <table>
                <tr>
                    <td>Nama</td>
                    <td>Pupuk Bosster Cabai</td>
                </tr>
                <tr>
                    <td>Harga</td>
                    <td>Rp 67.000</td>
                </tr>
                <tr>
                    <td>Fitur</td>
                    <td class="fitur">
                        <ul>
                            <li>Dilengkapi Dokumentasi</li>
                            <li>Ukuran: 250gr</li>
                            <li>Masa Tanam: 3 Bulan</li>
                            <li>Lisensi: MIT</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>



Komentar

Postingan populer dari blog ini

Tugas 6

tugas 9

Tugas 1 Pemrograman Web