EDM Arena
➡ EDM Arena is live now! Join us and experience the vibe! ⬅ ◥◣ GitHub EDM Arena
PWEB - ETS
Nama : Valentino Aruan
NRP : 5053231006
Kelas : PWEB - M
1. Apa itu responsive web design dan sebutkan dua teknik yang sering digunakan untuk mencapainya?
Responsive web design adalah pendekatan dalam web development yang
membuat website bisa menyesuaikan tampilannya di berbagai jenis layar dan
ukuran perangkat.
Secara sederhana, website responsive adalah sebutan untuk website yang dapat
menyesuaikan layout pada tampilan dengan setiap device menggunakan ukuran
berbeda ketika mengaksesnya.
Tujuan utamanya adalah memastikan konten dan elemen website mudah dibaca
sekaligus dinavigasi tanpa perlu terlalu sering men-scroll halaman, baik
saat diakses melalui desktop, tablet, maupun smartphone.
Flexible Grid Layouts:
Menggunakan grid fleksibel yang memungkinkan elemen dalam sebuah halaman
untuk beradaptasi sesuai dengan ukuran layar dengan menggunakan satuan
persentase (%) atau satuan fleksibel lainnya, sehingga tata letak dapat
menyesuaikan secara proporsional.
Media query CSS:
Merupakan teknik dalam web development untuk membuat tampilan website yang
responsif di berbagai jenis layar dan perangkat, baik itu ponsel, tablet,
maupun desktop. Teknik ini membantu untuk menentukan aturan CSS yang berbeda
di berbagai kondisi, seperti lebar layar, tinggi, resolusi, dan orientasi
perangkat.
2. Apa fungsi elemen <meta> dalam HTML dan sebutkan
salah satu atribut penting yang dimilikinya? Berikan contoh penggunaan datam
bentuk kode kemudian beri penjelasan.
Elemen <meta> dalam HTML digunakan untuk menyediakan metadata
tentang dokumen web yang berguna bagi browser dan mesin pencari., seperti
informasi tentang karakter set, kata kunci untuk SEO, deskripsi halaman, dan
informasi lain yang tidak ditampilkan langsung di halaman.
Salah satu atribut penting dari elemen ini adalah name.
Atribut name digunakan untuk memberi tahu tentang jenis
informasi apa yang disampaikan, seperti deskripsi halaman, kata kunci, atau
informasi penulis. Atribut ini biasanya diikuti oleh atribut content, yang
berisi nilai atau informasi spesifik.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="description" content="Toko online yang menjual peralatan elektronik berkualitas tinggi">
<meta name="keywords" content="elektronik, toko online, gadget">
<meta name="author" content="Valen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valen Store - Toko Elektronik Terpercaya</title>
</head>
<body>
<h1>Selamat Datang di Valen Store</h1>
</body>
</html>
Penjelasan:
· <meta charset="UTF-8">: Menetapkan encoding karakter halaman web menjadi UTF-8, yang memungkinkan halaman web menampilkan berbagai karakter dari banyak bahasa dengan benar.
· <meta name="description" content="...">: Menyediakan deskripsi singkat tentang isi halaman, biasanya digunakan oleh mesin pencari seperti Google untuk menampilkan potongan teks dalam hasil pencarian.
· <meta name="keywords" content="...">: Memuat kata kunci yang terkait dengan halaman, meskipun banyak mesin pencari modern tidak lagi menggunakannya secara aktif.
· <meta name="author" content="...">: Memberikan informasi tentang siapa penulis atau pemilik halaman web.
· <meta name="viewport" content="...">: Membantu membuat halaman web responsif, agar tampilan halaman menyesuaikan dengan ukuran layar perangkat, terutama di ponsel.
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 ungulan dan tombol
"Beli Sekarang”.
•
Footer dengan alamat toko dan link media social.
Buatlah desain webnya kemudian implementasikan
dalam kode.
Code:
4.
Seorang klien membutuhkan data member dalam halaman web
produk. Buatlah sebuah form dan pengecekannya dengan javascript untuk
memastikan isian datanya benar.
Code :
Postingan populer dari blog ini
EAS - Pemrograman Web M
➡ EDM Arena is live now! Join us and experience the vibe! ⬅ Soal Evaluasi Akhir Semester Deskripsikan Topik Final Project yang dikerjakan, dan jelaskan fitur yang tersedia di dalam aplikasi. Topik Final Project: EDM Arena : Portal Berita dan Kalender Event EDM Proyek ini adalah sebuah aplikasi web yang berfungsi sebagai portal berita untuk penggemar musik EDM. Selain menyajikan berita terbaru tentang dunia EDM, aplikasi ini menyediakan kalender event EDM yang mencakup festival atau konser mendatang, yang dapat dicari berdasarkan lokasi, tanggal, atau genre. Tujuan aplikasi adalah memberikan informasi yang relevan, mudah diakses, dan menarik untuk komunitas EDM, sehingga pengguna dapat tetap terhubung dengan dunia musik elektronik. Fitur Utama: · Berita Terkini o Artikel tentang rilisan lagu terbaru, ulasan event, dan wawancara eksklusif dengan DJ. o Kategori artikel seperti "New Releases," "Event Reviews...
Dokumentasi Pembuatan Website Pribadi
Link Website Link Repository HTML : Digunakan untuk membuat struktur halaman, termasuk header, bagian utama, dan sections. CSS : Mengatur gaya dan layout halaman, termasuk warna, font, dan responsivitas. Memastikan bahwa desain konsisten dan halaman dapat digulir dengan mudah untuk melihat konten tambahan. JavaScript : Menambahkan interaktivitas, terutama dengan efek Parallax Scrolling. Ini menciptakan ilusi kedalaman dengan membuat elemen di halaman bergerak dengan kecepatan berbeda saat digulir. Efek Parallax Scrolling : Meningkatkan pengalaman visual dengan memberikan efek 3D saat elemen bergerak dengan kecepatan yang berbeda tergantung pada posisi scroll atau kursor.
Komentar
Posting Komentar