[ETS Pemrograman Web]

ETS Pemrograman Web

Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)

Link Demo: 


Jawaban ETS Pemrogaman Web No 1-4:


ETS Pemrograman Web

Soal

  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 pendekatan dalam web development yang menggunakan HTML dan CSS untuk mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web secara otomatis, agar website bisa menyesuaikan tampilannya di berbagai jenis layar dan ukuran perangkat (desktop, tablet, dan ponsel). Teknik yang sering digunakan yaitu teknik media query dan grid layout.


  1. Meta tag ditambahkan ke kode HTML untuk memberitahu informasi penting ke mesin pencari tentang halaman web dan bagaimana halaman web tersebut harus ditampilkan. Memaksimalkan meta tag dapat membantu menaikkan peringkat konten atau halaman sebuah situs, jumlah klik, serta pengalaman pembaca. Salah satu atribut penting dari elemen <meta> adalah charset. digunakan untuk menentukan bagaimana teks akan ditampilkan.

Contoh penggunaan:

  • <meta charset=”...” …> digunakan untuk menentukan encoding karakter dari halaman HTML, yang menentukan bagaimana teks akan ditampilkan.

  • <meta name=”description” …> digunakan untuk memberi deskripsi singkat isi halaman web.

  • <meta name=”keywords” …> digunakan untuk memberi daftar kata kunci yang terkait dengan halaman web tersebut.

  • <meta name=”author” …> digunakan untuk menyebutkan nama penulis halaman.

  • <meta name=”viewport” …> digunakan untuk menetukan bagaimana halaman web ditampilkan di perangkat mobile.


  1. Hasil:

  • 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 (beserta tombol yang akan menuju form)


Link GitHub: https://github.com/rukiwatsuyoidesune/Web-ETSLandingPage.git

Link Deploy: https://sumberkurniamakmur.vercel.app


  1. Hasil:


Komentar

Postingan populer dari blog ini

[Tugas Study Case] Simple Landing Page

[Tugas Pertemuan ke-1] Portofolio

[Tugas Pertemuan ke-3] Tabel