Ads by Yasya El Hakim
Tutorial Lengkap HTML: Responsive pada HTML - Bagian 26

Responsive Web Design merupakan penggunaan HTML dan CSS yang dapat digunakan untuk merubah ukuran, menyembunyikan, dan memperbesar, halaman HTML secara otomatis agar terlihat lebih menarik pada semua ukuran layar perangkat seperti Desktop, Tablet, dan Smartphone.

Catatan: Sebuah halaman web harus terlihat menarik pada semua ukuran layar maupun semua jenis perangkat.

Mengatur Viewport

Ketika kalian ingin membuat halaman web yang responsif, kalian dapat menggunakan elemen <meta>:

Contoh

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Fungsi dari meta viewport diatas adalah untuk mengatur Viewport pada halaman web dan dapat memberikan instruksi kepada browser untuk mengontrol dimensi halaman.

Gambar Responsive

Gambar Responsive adalah gambar yang dapat berubah ukurannya pada semua ukuran layar.

Menggunakan Property width

Pada CSS, property width harus memiliki nilai 100% agar dapat terlihat responsif.

Contoh
<img src="https://1.bp.blogspot.com/-RHymSBWNvnc/XYyaXArWsrI/AAAAAAAAGu0/uHXG_e2S1SUsn5BLe6lc3CwH5sm4d7OAQCLcBGAsYHQ/s1600/CSS.jpg" style="width:100%;"> 


Jika kalian memperbesar atau memperkecil ukuran jendela Browser, maka ukuran pada gambar diatas juga ikut berubah.

Menggunakan Property max-width

Jika property max-width memiliki nilai 100%, maka gambar akan menjadi lebih kecil dan tidak lebih besar dari gambar aslinya.

Contoh
<img src="https://1.bp.blogspot.com/-RHymSBWNvnc/XYyaXArWsrI/AAAAAAAAGu0/uHXG_e2S1SUsn5BLe6lc3CwH5sm4d7OAQCLcBGAsYHQ/s600/CSS.jpg" style="max-width:100%;height:auto;"> 


Menampilkan Gambar yang Berbeda untuk Setiap Ukuran Layar

Kalian dapat menggunakan elemen <picture> untuk menampilkan gambar yang berbeda pada setiap ukuran layar.

Contoh

<picture>
<source srcset="https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s600/HTML.jpg" media="(max-width: 600px)">
<source srcset="https://1.bp.blogspot.com/-RHymSBWNvnc/XYyaXArWsrI/AAAAAAAAGu0/uHXG_e2S1SUsn5BLe6lc3CwH5sm4d7OAQCLcBGAsYHQ/s600/CSS.jpg" media="(max-width: 1500px)">
<source srcset="https://4.bp.blogspot.com/-95vxTMUNRVk/XX0qUc8mQFI/AAAAAAAAGio/HoryuUsgDtgzfTyIKL7NNzFJJbvMfdd7QCPcBGAYYCw/s600/JavaScript.jpg">
<img src="https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s600/HTML.jpg" alt="Flowers">
</picture> 
Ubahlah ukuran jendela Browser kalian dan lihatlah perubahan dari gambar berikut:

Flowers

Ukuran Teks Responsive

Ukuran Teks dapat diatur dengan menggunakan unit "vw" yang merupakan singkatan dari "Viewport Width".

Contoh

<h1 style="font-size:10vw">Tutorial Lengkap HTML</h1>
Viewport adalah ukuran jendela browser. 1vw = 1% ukuran viewport. Jika lebar viewport 50%, maka 1vw adalah 0.5cm.

Media Query

Pada umumnya, Halaman Web yang responsive itu menggunakan Media Query.

Dengan menggunakan Media Query, kalian dapat menentukan tampilan yang berbeda pada setiap ukuran jendela browser.

Tips: Kalian akan mempelajari lebih lanjut tentang Media Query pada tutorial selanjutnya.

Framework

Terdapat banyak sekali CSS Framework yang menawarkan Responsive Design.

Dari beberapa Framework yang ada, kalian dapat menggunakanya secara gratis dan dapat kalian gunakan dengan mudah.

Berikut adalah beberapa Framework yang paling sering digunakan:
  • Bootstrap
  • Materialize
  • Material Design Lite
  • UIKit
  • dll

Sebelumnya: Tutorial Lengkap HTML: Elemen Layout pada HTML - Bagian 25
Selanjutnya: Tutorial Lengkap HTML: Computercode pada HTML - Bagian 27
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya