Belajar Materialize #8 : Media pada Materialize

Belajar Materialize #8 : Media pada Materialize – Halo sahabat kodingin, berjumpa lagi dengan saya admin kodingin.com. Kali ini masih membahas seri Belajar Materialize. Saya ucapkan terima kasih yang sudah mengkuti belajar materialize sampai tahap ini.

Pada Kesempatan kali ini kita akan belajar mengenai “media yang ada di dalam framework CSS” yaitu Materialize.

Media di dalam materialize di bedakan menjadi 2 yaitu gambar dan video. Suatu halaman website sifatnya wajib memiliki gambar, apalagi jika konten yang disajikan sebuah webiste portal berita sebagai informasi.

Gambar Memiliiki peranan penting untuk mendukung konten yang ada di dalam suatu halaman website, misalnya saja website mengenai “tutorial pemrograman”.

Sedangkan… Video dapat digunakan sebagai penerjemah konten yang berupa teks, misalnya website anda menyajikan konten tentang tutorial belajar Golang, maka dengan menggunakan video dapat memerpumudah pengguna untuk belajar pemroraman Golang.

Belajar Materialize #8 : Media pada Materialize

Situs besar seperti detik, liputan 6 di lengkapi dengan banyak varian gambar, mulai dari gambar sebagai fakta maupun gambar pemanis lainnya.

Yuk Kita bahas “Media pada Materialize” mengenai cara penggunaannya.

Gambar pada Materialize

Sudah tahu kah cara menampilkan gambar dengan HTML ?

Untuk menampilkan gambar caranya cukup mudah, namun kali ini yang saya bahas class yang ada untuk menampiilkan gambar pada materialize.

Class yang digunakan untuk membuat gambar lebih responsive menggunakan selector class dengan name “responsive-img”. Jika di lihat style nya berisi style css seperti pada kode di bawah ini.

Kode diatas artinya gambar di tampilkan dalam ukuran penuh terhadap class di luarnya dan memiliki tinggi yang cocok sesuai dengan resolusi dan ukuran gambar.

Selain class .responsive-img terdapat class selector dengan nama .circle, class tersebut membuat gambar menjadi bentuk bulat.

Contoh Menampilkan Gambar menggunakan Materialize

Sebelumnya menampilkan gambar yang perlu di lakukan memilih gambar yang ingin di tampilkan, silahkan letakkan gambar anda di projek latihan anda.

Sebagai contoh saya meletakkan gambar dengan nama gambar.jpg sejajar dengan file index.html.

Seperti ini cara menampilkan gambar pada materialize.

Berikut ini contoh kode lengkap menampilkan gambar dengan HTML menggunakan Materialize.

Perhatikan kode diatas, saya tidak hanya menambahkan class untuk tag gambar, melainkan saya membungkus nya dalam class lainnya.

Ketika di jalankan maka hasilnya seperti gambar di bawah ini.

Contoh Menampilkan Gambar menggunakan Materialize
Contoh Menampilkan Gambar menggunakan Materialize

Perhatikan gambar diatas, terdapat 2 gambar dengan bentuk bulat dan responsive untuk semua device, seperti android dan tablet. Selain itu saya juga menambahkan tag Heading sebagai pelengkap saja.

Contoh Menampilkan Video menggunakan Materialize

Sekarang kita bahas cara “menampilkan video dengan tag HTML menggunakan Materialize”. Video dapat anda gunakan dari media yang bersifat online / sudah ada atau video dari local komputer anda.

Untuk menampilkan video dapat menggunakan tag iframe dan di bungkus dengan class yang bernama .video-container.

Berikut ini contoh potongan kode.

Kode lengkapp untuk menampilkan video seperti kode di bawah ini.

Perhatikan kode di atas, saya mengambil video dari youtube dengan judul video yaitu “ST12 – JANGAN MARAH MARAH [OFFICIAL MUSIC VIDEO]”.

Sekarang mari kita jalankan di browser dan lihat hasilnya.

Contoh Menampilkan Video menggunakan Materialize
Contoh Menampilkan Video menggunakan Materialize

Nah , video sudah tampil di halaman contoh websiste yang kita buat, anda dapat mengubah ukuran video nya yang berkaitan dengan tinggi dan lebar video.

Kesimpulan…

Media pada Materialize di bagi menjadi 2 yaitu untuk menampilkan gambar dan Video, dimana untuk menampilkan gambar di materialize dapat menggunakan selector class .responsive-img dan circle.

Sedangkan untuk menampilkan video dapat menggunakan iframe, iframe harus di bungkus dengan nama selector class yaitu .container-video.

Baca Juga…

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

One comment

  1. […] Belajar Materialize #8 : Media pada Materialize […]

Leave a Reply