ETS Pemweb 2024
Blog Pengumpulan ETS
Nama
NRP
Mata Kuliah / Kelas
Tugas
:
:
:
:
Muhammad Tabah Pristiawan
5053231019
Pemrograman Web M / RPL
ETS
Soal ETS Pemgrograman Web
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.
4. Seorang klien membutuhkan data member dalam halaman web produk. Buatlah sebuah form dan pengecekannya dengan javascript untuk memastikan isian datanya benar.
Jawaban ETS Pemgrograman Web
1. Responsive web design adalah pendekatan dalam pembuatan situs web yang bertujuan agar tampilan dan fungsionalitas situs tersebut dapat menyesuaikan dengan berbagai ukuran layar dan perangkat, seperti smartphone, tablet, laptop, atau desktop. Tujuannya adalah agar pengguna mendapatkan pengalaman yang optimal di semua perangkat, baik dari segi tata letak, navigasi, maupun aksesibilitas.
Ada dua teknik yang sering digunakan untuk mencapai responsive web design:
Media Queries
- Media queries memungkinkan pengembang web untuk menerapkan gaya CSS yang berbeda tergantung pada karakteristik perangkat seperti lebar layar, tinggi layar, resolusi, atau orientasi (portrait atau landscape). Ini memungkinkan desain menyesuaikan dengan berbagai ukuran layar.
Flexible Grid and Layout (Grid dan Tata Letak Fleksibel)
- Grid fleksibel menggunakan persentase (%) atau satuan relatif seperti
ematauremuntuk menentukan ukuran elemen, bukan menggunakan satuan tetap seperti piksel. Ini membuat elemen-elemen di halaman bisa menyesuaikan ukurannya secara proporsional sesuai dengan ukuran layar.
2. Elemen
<meta> dalam HTML digunakan untuk menyimpan metadata (informasi tentang dokumen web) yang tidak terlihat oleh pengguna tetapi penting untuk browser, search engine, dan aplikasi web. Metadata tersebut bisa berupa informasi tentang pengkodean karakter, penulis dokumen, kata kunci, deskripsi halaman, dan lain-lain.Salah satu atribut penting yang dimiliki elemen <meta> adalah name atau charset.
name: Digunakan untuk mendefinisikan jenis metadata yang diberikan.charset: Digunakan untuk mendefinisikan jenis pengkodean karakter yang digunakan dalam dokumen.
<!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="Toko Elektronik terbaik menjual berbagai produk elektronik terbaru dengan harga terjangkau.">
<meta name="keywords" content="elektronik, toko, belanja online, gadget, teknologi">
<meta name="author" content="Nama Penulis">
<title>Toko Elektronik</title>
</head>
<body>
</body>
</html>
Penjelasan:
<meta charset="UTF-8">:- Menentukan pengkodean karakter yang digunakan pada halaman. Dalam contoh ini, pengkodean
UTF-8digunakan untuk mendukung berbagai karakter internasional. Ini penting agar karakter-karakter seperti simbol atau huruf dari berbagai bahasa dapat ditampilkan dengan benar.
- Menentukan pengkodean karakter yang digunakan pada halaman. Dalam contoh ini, pengkodean
<meta name="viewport" content="width=device-width, initial-scale=1.0">:- Elemen ini sangat penting untuk responsive web design.
width=device-widthmemastikan bahwa lebar viewport (area tampilan di browser) sesuai dengan lebar perangkat, sehingga tata letak menyesuaikan dengan ukuran layar.initial-scale=1.0mengatur skala tampilan awal, memastikan halaman tidak diperbesar atau diperkecil saat pertama kali dibuka di perangkat seluler.
- Elemen ini sangat penting untuk responsive web design.
<meta name="description" content="Toko Elektronik terbaik...">:- Ini menyediakan deskripsi singkat tentang halaman yang sering digunakan oleh mesin pencari dalam hasil pencarian. Deskripsi yang relevan dan jelas dapat meningkatkan SEO (Search Engine Optimization).
<meta name="keywords" content="elektronik, toko...">:- Menyediakan kata kunci yang membantu mesin pencari mengidentifikasi topik halaman. Meskipun mesin pencari modern seperti Google sudah tidak terlalu memprioritaskan atribut ini, masih berguna untuk beberapa layanan.
<meta name="author" content="Nama Penulis">:- Menyebutkan siapa penulis halaman, yang bisa digunakan untuk informasi tentang kepemilikan atau tanggung jawab konten
Komentar
Posting Komentar