ETS

-

Nama : Dentha Jefry Yudhiantara

NRP : 5053231012

ETS : Pweb(M)



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

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

  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.

Buatlah desain webnya kemudian implementasikan dalam kode.

  1. Seorang klien membutuhkan data member dalam halaman web produk. Buatlah sebuah form dan pengecekannya dengan javascript untuk memastikan isian datanya benar.



Jawab :


  1. Responsive Web Design adalah cara agar web dapat menyesuaikan tampilan dan fungsi yang ada sesuai dengan layar yang digunakan seperti ponsel, komputer, tablet, dll. Agar pengguna tetap nyaman untuk mengakses web di perangkat manapun.

Untuk 2 teknik yang sering digunakan yaitu:

  • Media queries merupakan fitur CSS yang dapat menerapkan gaya berbeda berdasarkan karakteristik perangkat yang digunakan.

  • Flexible Grid Layout teknik ini menggunakan persentase atau satuan relatif (seperti em, rem, atau vw) alih-alih satuan tetap seperti piksel. Ini membuat elemen-elemen di halaman web bisa otomatis menyesuaikan ukuran sesuai dengan lebar layar, sehingga tampilan selalu rapi di berbagai perangkat.


  1. Elemen <meta> dalam HTML berfungsi untuk menyediakan metadata, seperti informasi mengenai halaman web, seperti deskripsi, kata kunci, penulis, atau instruksi khusus untuk browser dan mesin pencari. Metadata ini tidak ditampilkan langsung pada halaman web, tetapi sangat penting untuk pengalaman keseluruhan dan kinerja halaman web.

Contoh:


Penjelasan:

Kode tersebut digunakan untuk memastikan halaman web tampil responsif di berbagai perangkat dengan menyesuaikan lebar halaman sesuai dengan lebar layar pengguna dan menetapkan skala awal tampilan menjadi 1:1 agar tidak diperbesar atau diperkecil saat pertama kali dibuka.


  1. Tampilan


Kode : github

Deploy : Landing Page













  1. Tampilan


Kode : github

Deploy : Formulir


Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 6

-
Gambar
Simple Landing Page Poco Nama : Dentha Jefry Yudhiantara NRP : 5053231012 Prodi : Rekayasa Perangkat Lunak Kelas : Pemograman Web(M) Code :  Code Tugas 6 Deploy :  Poco_Simple Landing Page
Baca selengkapnya

tugas 9

-
Gambar
Membuat Form Pendaftaran menggunakan PHP Nama : Dentha Jefry Yudhiantara NRP : 5053231012 Kelas : Pweb(M) github :  github deploy : ditunggu ya :) UI Landing Page : UI Formulir Pendaftaran : UI List Pendaftar : UI Edit Data Pendaftar :
Baca selengkapnya

Tugas 1 Pemrograman Web

-
Nama : Dentha Jefry Yudhiantara RP    : 5053231012 Prodi   : Rekayasa Perangkat Lunak Kelas   : Pemograman Website (M) Link Website :  Website Link GitHub  :  GitHub Di pertemuan pertama ini, kita dikenalkan dengan apa itu HTML dan CSS. Setelah disampaikan perkenalan tentang materi secara singkat di akhir sesi pembelajaran diberi penugasan untuk membuat CV dengan  website yang berisi tentang deskripsi diri, riwayat pendidikan, pengalaman-pengalaman seperti kepanitian bahkan pelatihan yang pernah diikuti. Dan juga saya belajar untuk membuat akun Blogger.  Dan dari apa yang saya mengerti saya dapat mengimplementasikan hal-hal berikut : 1. Memahami konsep penggunaan elemen HTML. 2. Menggunakan CSS sebagai pendukung tampilan wesbite. 3. Memahami  apa itu header, body, main, div, section, dan article. 4. Deploy menggunakan Hostinger Vercel. 5. Dapat mengumpulkan tugas dengan blogger seperti yang diminta.
Baca selengkapnya