ETS
Nama: Nadiah Nuri Aisyah
NRP: 5025211210
Kelas: PWEB B
1. Jelaskan apa yang dimaksud dengan web responsive? Bagaimana cara membangunnya?
Jawab:
Responsive web design atau desain web responsif adalah sebuah teknik atau metode bagi web designer untuk membuat suatu layout website yang dapat menyesuaikan diri sesuai dengan ukuran layar pengguna. Baik dari ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi device yang digunakan.
Cara membuat website responsive:
1) Mengatur Viewport
Untuk membuat situs web yang responsif, tambahkan tag <meta> berikut ini ke semua halaman web Anda:
Contoh
<meta name="viewport" content="width=lebar-perangkat, skala awal=1.0">
2) Menggunakan Gambar Responsif
- Menggunakan Properti width (lebar)
Jika properti lebar CSS ditetapkan ke 100%, gambar akan menjadi responsif dan berskala naik dan turun:
Contoh
<img src="img_girl.jpg" style="width:100%;">
- Menggunakan Properti max-width (lebar maksimal)
Jika properti max-width ditetapkan ke 100%, gambar akan diperkecil jika memang harus diperkecil, tetapi jangan pernah memperbesarnya menjadi lebih besar daripada ukuran aslinya:
Contoh
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
- Menampilkan Gambar yang Berbeda Tergantung pada Lebar Browser
Elemen HTML <picture> memungkinkan Anda menentukan gambar yang berbeda untuk ukuran jendela browser yang berbeda. Ubah ukuran jendela browser untuk melihat bagaimana gambar di bawah ini berubah tergantung pada lebarnya:
Contoh
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Bunga">
<picture>
3) Menggunakan Ukuran Teks Responsif
Ukuran teks dapat ditetapkan dengan unit "vw", yang berarti "lebar viewport".
Contoh
<h1 style="font-size:10vw" >Hello World</h1>
4) Query Media
Selain mengubah ukuran teks dan gambar, query media juga umum digunakan dalam halaman web responsif. Dengan query media, Anda dapat menentukan gaya yang sama sekali berbeda untuk ukuran browser yang berbeda.
2. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.
Jawab:
3. Sebuah perusahaan ingin membuat aplikasi web untuk portal berita. Fungsi aplikasi untuk display berita terbaru, pengelompokan kategori, lowongan pekerjaan, informasi iklan atau event kegiatan. Selain itu tersedia juga form untuk pembaca memasukkan artikel atau opini yang ingin dimuat di portal berita. Desainkan front end website perpustakaan.
Jawab:
Video demo: yt
Link: github
Referensi:
https://glints.com/id/lowongan/responsive-web-design-adalah/
https://www.w3schools.com/html/html_responsive.asp
Komentar
Posting Komentar