ETS pemrograman web

 1. Apa itu responsie web design dan sebutkan dua teknik yang sering digunakan untuk menapainya?

Responsive web design adalah pendekatan dalam pembuatan website yang bertujuan agar tampilan dan fungsi situs dapat menyesuaikan dengan berbagai ukuran layar dan perangkat, seperti smartphone, tablet, dan desktop. Ini memastikan pengalaman pengguna yang konsisten dan optimal, terlepas dari perangkat yang digunakan.

Dua teknik yang sering digunakan untuk mencapai responsive web design adalah:

  1. Media Queries: Ini adalah aturan CSS yang memungkinkan pengembang untuk menerapkan gaya yang berbeda berdasarkan karakteristik perangkat, seperti lebar layar, tinggi, dan resolusi. Dengan media queries, desainer dapat mengubah tata letak, ukuran font, dan elemen lainnya agar sesuai dengan ukuran layar.

  2. Flexible Grid Layouts: Ini melibatkan penggunaan grid yang fleksibel, di mana elemen-elemen pada halaman web diatur dalam kolom dan baris yang dapat menyesuaikan proporsinya berdasarkan ukuran layar. Misalnya, menggunakan persentase alih-alih piksel untuk lebar kolom agar dapat beradaptasi dengan ukuran layar yang berbeda.


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

Elemen <meta> dalam HTML digunakan untuk memberikan metadata tentang dokumen. Metadata ini tidak ditampilkan secara langsung di halaman, tetapi menyediakan informasi penting untuk browser dan mesin pencari, seperti deskripsi halaman, pengaturan karakter, dan pengaturan viewport.

Salah satu atribut penting yang dimiliki elemen <meta> adalah charset, yang digunakan untuk menentukan set karakter yang digunakan dalam dokumen HTML.

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contoh Halaman</title>

</head>

<body>

    <h1>Selamat Datang di Halaman Ini!</h1>

    <p>Ini adalah contoh penggunaan elemen <meta> dalam HTML.</p>

</body>

</html>

Penjelasan:

  1. <meta charset="UTF-8">: Menentukan bahwa dokumen menggunakan set karakter UTF-8, yang mendukung berbagai karakter dan simbol dari banyak bahasa. Ini penting agar teks ditampilkan dengan benar, terutama jika menggunakan karakter non-Latin.

  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ini membantu membuat halaman responsif. Atribut ini mengatur lebar tampilan agar sesuai dengan lebar perangkat dan mengatur skala awal untuk tampilan. Ini sangat berguna untuk desain yang responsif di perangkat mobile.

Penggunaan elemen <meta> dengan benar sangat penting untuk SEO dan pengalaman pengguna.

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

  • Header dengan logo dan naigasi (Home, Produk, Tentang kami, Hubungi Kami).
  • Bagian utama dengan gambar produk unggulan dan tombol "Beli Sekarang".
  • Footer dengan alamat toko dan link media sosial.
Buatlah desain web nya kemudian implementasikan dalam kode.

Klik Disini!














4. Seorang klien membutuhkan data member dalam galaman web produk. Buatlah sebuah form dan pengecekannya dengan javasript untuk memastikan isian datanya benar.


function validateForm() {
            const firstName = document.getElementById('firstName').value.trim();
            const lastName = document.getElementById('lastName').value.trim();
            const email = document.getElementById('email').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const errorMessage = document.getElementById('errorMessage');

            // Regex patterns
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            const phonePattern = /^[0-9]+$/;

            // Validate if fields are not empty
            if (!firstName) {
                errorMessage.textContent = "Nama depan tidak boleh kosong.";
                return false;
            }
            if (firstName.length > 50) {
                errorMessage.textContent = "Nama depan maksimal 50 karakter.";
                return false;
            }

            if (!lastName) {
                errorMessage.textContent = "Nama belakang tidak boleh kosong.";
                return false;
            }
            if (lastName.length > 50) {
                errorMessage.textContent = "Nama belakang maksimal 50 karakter.";
                return false;
            }

            if (!email) {
                errorMessage.textContent = "Email tidak boleh kosong.";
                return false;
            }
            if (!emailPattern.test(email)) {
                errorMessage.textContent = "Email tidak valid.";
                return false;
            }
            if (email.length > 100) {
                errorMessage.textContent = "Email maksimal 100 karakter.";
                return false;
            }

            if (!phone) {
                errorMessage.textContent = "Nomor telepon tidak boleh kosong.";
                return false;
            }
            if (!phonePattern.test(phone)) {
                errorMessage.textContent = "Nomor telepon hanya boleh berisi angka.";
                return false;
            }
            if (phone.length > 15) {
                errorMessage.textContent = "Nomor telepon maksimal 15 digit.";
                return false;
            }

            // Clear error message if all validations pass
            errorMessage.textContent = "";
            alert("Data berhasil disubmit!");
            return true;
        }

Comments

Post a Comment

Popular posts from this blog

Latihan Mandiri Membuat Website

Link Hasil:   https://jasmineaziza.onrender.com source code: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Jasmine Aziza - Portfolio</title>     <style>         body {             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             margin: 0;             padding: 20px;             background-color: #f4f4f4;             color: #333;         }         header {             display: flex;             align-items: center;             background-color: #4CAF50;     ...
Read more

Bootstrap

Image
 link :  Klik disini! CSS: /* style.css */ body , html {     margin: 0 ;     padding: 0 ;     width: 100% ;     height: 100% ; } .container-fluid {     padding: 0 ; /* Pastikan tidak ada padding di container-fluid */ } img {     width: 100% ;     height: 100px ;     object-fit: cover; } @media (max-width: 576px ) {     .responsive-img {         height: 200px ;         object-fit: cover;     } } index.html: <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title >Login Page</ title >     < link       href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"       rel = "...
Read more

Tugas 7-CSS-Landing Page

Image
 Link : Klik Disini ! index.html: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Product Advertisement</ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < header >         < h1 >MINE</ h1 >         < nav >             < a href = "#" >Home</ a >             < a href = "#" >About</ a >             < a href = "#" >Contact</ a >         </ nav >     </ header >     < div class = "container" >         < div class = "image-section" >   ...
Read more