Kamis, 31 Oktober 2024

P.WEB_Tugas 8 (Bootstrap)

Berliana Panca Dewi Nurhidayah

5053231028


Membuat page Sign in dan Register



 Kode yang digunakan untuuk membuat page tersebut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>

    <!-- Tambahkan Link ke Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f2f2f2;
        }

        .signup-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            width: 100%;
        }

        .signup-container h2 {
            text-align: center;
            color: #333;
        }

        .signup-container input[type="text"],
        .signup-container input[type="email"],
        .signup-container input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        .signup-container input[type="checkbox"] {
            margin-right: 8px;
        }

        .signup-container label {
            font-size: 14px;
            color: #666;
        }

        .signup-container .buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .signup-container button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            color: white;
        }

        .signup-container .register-btn {
            background-color: #007bff;
        }

        .signup-container .signin-btn {
            background-color: #28a745;
        }

        .signup-container .terms {
            font-size: 12px;
            color: #888;
            text-align: center;
            margin-top: 15px;
        }

        .signup-container .terms a {
            color: #007bff;
            text-decoration: none;
        }

        .signup-container .terms a:hover {
            text-decoration: underline;
        }

        body {
            background-color: #ffffff;
            background-image: url('bgawan.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>

<div class="signup-container">
    <h2>Create an Account</h2>
    <form action="#" method="post">
        <div class="mb-3">
            <input type="text" name="first_name" class="form-control" placeholder="First Name" required>
        </div>
        <div class="mb-3">
            <input type="text" name="last_name" class="form-control" placeholder="Last Name" required>
        </div>
        <div class="mb-3">
            <input type="text" name="display_name" class="form-control" placeholder="Display Name" required>
        </div>
        <div class="mb-3">
            <input type="email" name="email" class="form-control" placeholder="Email Address" required>
        </div>
        <div class="mb-3">
            <input type="password" name="password" class="form-control" placeholder="Password" required>
        </div>
        <div class="mb-3">
            <input type="password" name="confirm_password" class="form-control" placeholder="Confirm Password" required>
        </div>

        <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" name="terms" required>
            <label class="form-check-label" for="terms">I agree to the <a href="#">Terms and Conditions</a></label>
        </div>

        <div class="buttons">
            <button type="submit" class="btn register-btn">Register</button>
            <button type="button" class="btn signin-btn">Sign In</button>
        </div>
    </form>
    <div class="terms">
        By clicking Register, you agree to our <a href="#">Terms and Conditions</a>.
    </div>
</div>

<!-- Tambahkan Link ke Bootstrap JS dan Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

di Tidak ada komentar:

Rabu, 23 Oktober 2024

ETS - PWEB (BERLIANA PANCA_5053231028)

 

Berliana Panca Dewi Nurhidayah

5053231028

ETS P.WEB

 

1.     1. Apa itu responsive web design dan sebutkan dua Teknik yang sering digunakan untuk mencapainya?

-        Responsive Web Design adalah pendekatan dalam pengembangan website yang memastikan tampilan dan fungsionalitas situs web tetap optimal dan mudah digunakan di berbagai ukuran layar dan perangkat, mulai dari desktop hingga ponsel. Prinsip utamanya adalah memastikan bahwa konten dan layout dapat beradaptasi dengan perubahan ukuran jendela browser tanpa kehilangan kualitas user experience.

Dua teknik yang sering digunakan untuk mencapai responsive web design:

1)  Media Queries: Teknik ini digunakan untuk menerapkan gaya CSS yang berbeda berdasarkan lebar layar, orientasi, atau resolusi perangkat. Dengan media queries, kita bisa mengatur tampilan elemen website agar sesuai dengan berbagai ukuran layar (misalnya mengubah ukuran font, lebar kolom, atau menyembunyikan elemen tertentu).

2)  Flexible Grid Layouts: Teknik ini menggunakan grid berbasis persentase atau unit fleksibel seperti vw (viewport width) atau rem daripada ukuran tetap (seperti pixel). Hal ini memungkinkan elemen-elemen di dalam halaman untuk beradaptasi secara proporsional dengan ukuran layar.

 

2  2. Apa fungsi elemen <meta> dalam HTML dan sebutkan salah satu atribut penting yang dimilikinya? Berikan contoh penggunaan dalam bentuk kode kemudian beri penjelasan.

Elemen <meta> dalam HTML digunakan untuk menyimpan metadata (informasi tentang data) mengenai dokumen web. Metadata ini tidak terlihat oleh pengguna secara langsung, tetapi sangat penting untuk pengaturan halaman, optimasi mesin pencari (SEO), dan membantu browser dalam menampilkan halaman dengan benar.

Salah satu atribut penting dari elemen <meta> adalah name atau charset, tergantung pada penggunaan. Atribut charset biasanya digunakan untuk menentukan set karakter yang digunakan oleh halaman, sedangkan name digunakan untuk memberikan informasi spesifik seperti deskripsi, kata kunci, atau pengaturan tampilan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A responsive website about renewable energy solutions.">
    <title>Renewable Energy Solutions</title>
</head>
<body>
    <h1>Welcome to Renewable Energy Solutions</h1>
</body>
</html>

Penjelasan:

  • <meta charset="UTF-8">: Mengatur set karakter yang digunakan menjadi UTF-8, yang mendukung hampir semua karakter dalam berbagai bahasa.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Memberitahu browser untuk menyesuaikan skala halaman dengan ukuran layar perangkat, yang merupakan bagian penting dari responsive web design.
  • <meta name="description" content="A responsive website about renewable energy solutions.">: Memberikan deskripsi singkat tentang isi halaman web, yang penting untuk SEO agar mesin pencari dapat memahami topik halama.



    • 3. Buatlah halaman landing page sederhana untuk sebuah toko online yang menjual produk elektronik. Halaman ini harus mencakup:

    • Header dengan logo dan navigasi (Home, Produk, Tentang Kami, Hubungi Kami)
    • Bagian utama dengan gambar produk unggulan dan tombol "Beli Sekarang"
    • Footer dengan alamat toko dan link media sosial



    Berikut merupakan kode untuk landing page toko online menjual produk elektronik:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>myBox.</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: Arial, sans-serif;
                background-color: #f4f4f4;
                color: #333;
            }
            header {
                background-color: #000;
                color: #fff;
                padding: 15px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 40px;
            }
            header h1 {
                font-size: 24px;
            }
            nav {
                display: flex;
                gap: 20px;
            }
            nav a {
                color: #fff;
                text-decoration: none;
                font-size: 18px;
            }
            nav a:hover {
                text-decoration: underline;
            }
            .main {
                text-align: center;
                padding: 30px 10px;
                background-color: #fff;
            }
            .main h2 {
                font-size: 32px;
                margin-bottom: 20px;
            }
            .main p {
                font-size: 18px;
                margin-bottom: 20px;
            }
            .main .btn {
                background-color: #007BFF;
                color: #fff;
                padding: 10px 20px;
                text-decoration: none;
                font-size: 20px;
                border-radius: 5px;
                transition: background-color 0.3s ease;
            }
            .main .btn:hover {
                background-color: #0056b3;
            }

            /* Style for images section */
            .products-section {
                display: flex;
                justify-content: center;
                gap: 20px;
                padding: 10px 0;
            }
            .products-section img {
                width: 280px;
                height: auto;
                border-radius: 10px;
                box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1);
            }

            footer {
                background-color: #000;
                color: #fff;
                text-align: center;
                padding: 20px 10px;
                margin-top: 40px;
            }
            footer p {
                font-size: 16px;
                margin-bottom: 10px;
            }
            footer .social-links {
                margin-top: 10px;
            }
            footer .social-links a {
                color: #fff;
                margin: 0 15px;
                font-size: 20px;
                text-decoration: none;
            }
            footer .social-links a:hover {
                color: #007BFF;
            }
        </style>
    </head>
    <body>

        <header>
            <h1>myBox.</h1>
            <nav>
                <a href="#">Home</a>
                <a href="#">Produk</a>
                <a href="#">Tentang Kami</a>
                <a href="#">Hubungi Kami</a>
            </nav>
        </header>

        <div class="main">
            <h2>Temukan Gadget Impianmu di myBox!</h2>
            <p>iPad dari myBox sebagai Solusi Sempurna untuk Kebutuhan Digital Anda </p>
            <p>Harga Mulai Dari: Rp7.000.000</p>
            <a href="#" class="btn">Beli Sekarang</a>
        </div>

        <div class="products-section">
            <img src="ipadyellow.jpg" alt="iPad 10">
            <img src="ipadpro.jpeg" alt="iPad Pro">
            <img src="ipadair3.jpeg" alt="iPad Air">
        </div>

        <footer>
            <p>Jl. Elektronik No. 123, Surabaya, Indonesia
                | 085159035050 | email: myBox@kstore.com | IG: @myBoxindonesia | X:myBoxindonesia</p>
       
        </footer>

    </body>
    </html>


    4. Seorang clien membutuhkan data member dalam halaman web produk. Buatlah sebuah form dan pengecekan nya dengan javascript untuk memastikan isian datanya benar.


    dan jika form berhasil teersubmit, tampilannya akan seperti ini 


    terdapat pemberitahuan "Pendaftaran Berhasil"

    Berikut adalah kode untuk membuat Formulir Pendafataran 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form Data Member</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 500px;
                margin: 0 auto;
                padding: 20px;
                color: white
            }
            form {
                display: flex;
                flex-direction: column;
            }
            input, select {
                margin: 10px 0;
                padding: 10px;
                font-size: 1em;
            }
            .error {
                color: red;
                font-size: 0.9em;
            }
            button {
                background-color: #5ad1f5;
                color: white;
                padding: 10px;
                border: none;
                cursor: pointer;
            }
            button:hover {
                background-color: #5ad1f5;
            }

            body {
                font-family: Arial, sans-serif;
                max-width: 500px;
                margin: 0 auto;
                padding: 20px;
                background-image: url('bckform.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>

        <h2>Form Pendaftaran Member</h2>
        <form id="memberForm">
            <label for="name">Nama Lengkap:</label>
            <input type="text" id="name" name="name">
            <span class="error" id="nameError"></span>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email">
            <span class="error" id="emailError"></span>

            <label for="age">Umur:</label>
            <input type="number" id="age" name="age">
            <span class="error" id="ageError"></span>

            <label for="gender">Jenis Kelamin:</label>
            <select id="gender" name="gender">
                <option value="">Pilih jenis kelamin</option>
                <option value="male">Laki-laki</option>
                <option value="female">Perempuan</option>
            </select>
            <span class="error" id="genderError"></span>

            <button type="submit">Daftar</button>
        </form>

        <script>
            document.getElementById('memberForm').addEventListener('submit', function(event) {
                event.preventDefault();

                let isValid = true;

                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const age = document.getElementById('age').value;
                const gender = document.getElementById('gender').value;

                const nameError = document.getElementById('nameError');
                const emailError = document.getElementById('emailError');
                const ageError = document.getElementById('ageError');
                const genderError = document.getElementById('genderError');

                nameError.textContent = '';
                emailError.textContent = '';
                ageError.textContent = '';
                genderError.textContent = '';

                if (name === '') {
                    nameError.textContent = 'Nama tidak boleh kosong';
                    isValid = false;
                }

                const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
                if (email === '') {
                    emailError.textContent = 'Email tidak boleh kosong';
                    isValid = false;
                } else if (!email.match(emailPattern)) {
                    emailError.textContent = 'Format email tidak valid';
                    isValid = false;
                }

                if (age === '' || age < 1) {
                    ageError.textContent = 'Masukkan umur yang valid';
                    isValid = false;
                }

                if (gender === '') {
                    genderError.textContent = 'Pilih jenis kelamin';
                    isValid = false;
                }

                if (isValid) {
                    alert('Pendaftaran Berhasil!');
                }
            });
        </script>

    </body>
    </html>









    di Tidak ada komentar:
    Langganan: Postingan (Atom)

    EAS - FP PWEB

    NAMA      : Berliana Panca Dewi Nurhidayah NRP           : 5053231028 KELAS    : RPL Deskripsi    : Jawaban EAS 1. Deskripsikan Topik Final ...

    • PEMROGRAMAN WEBSITE - STUDY CASE
       Oktober 03, 2024 Nama : Berliana Panca Dewi Nurhidayah NRP : 5053231028 Case : Invitation Page Desc : Membuat website untuk undangan, disin...
    • PEMROGRAMAN WEBSITE_TUGAS 3
       PEMROGRAMAN WEBSITE_TUGAS 3 18/9/24 BERLIANA PANCA DEWI NURHIDAYAH  5053231028 Membuat poster tentang Event and Show. Saya membuat acara ko...
    • PEMROGRAMAN WEBSITE_MINGGU 5
       BERLIANA PANCA DEWI NURHIDAYAH 5053231028 Deskripsi : Membuat HMTL 5, dengan detail membuat layout, header, dll. disini aku buat tampian re...