Belajar Materialize #7 : Heading pada Materialize

Belajar Materialize #7 : Heading pada Materialize – Hai sahabat kodingin, berjumpa lagi dengan saya Didik Prabowo. Kali ini membahas mengenai seri Belajar Materialize menggunakan bahasa Indonesia. Sebelumnya kita sudah membahas beberapa tutorial Belajar Meterialize.

Jika sahabat kodingin belum belajar dari awal, silahkan pelajari dulu beberapa daftar tutorial Materialize :

Pada Tahap ini kita akan “belajar menggunakan Tag Heading HTML” pada Framework Materialize. Pasti anda sudah tahu mengeai apa itu Heading Tag pada HTML.

Apa Itu Heading Tag ?

Heading Tag merupakan sebuah teks dengan 6 variasi yang mempunyai ukuran bertahap dari 1 sampai 6. Penggunaan Heading Tag ini sering kali di gunakan untuk membuat halaman website.

Heading tags memiliki ukuran berbeda-beda, berikut ini ukuran asli heading tag dari heading 1 sampai heading 6.

  • Heading 1, Memiliki ukuran 2em.
  • Heading 2, Memiliki Ukuran 1,5em.
  • Heading 3, Memiliki Ukuran 1.17em.
  • Heading 4, Memiliki Ukuran 1em.
  • Heading 5, Memiliki Ukuran 0.83em.
  • Heading 6, Memiliki Ukuran 0.67em.

Berdasarkan ukuran di atas pasti anda sudah bisa membayangkan seberapa besar masing-masing heading pada Tag HTML.

Cara Membuat heading dengan Materialize

Penggunaan Contoh Heading menggunakan Materialize cukup mudah, kita tidak perlu menambahkan class tertentu maka hasilnya sudah sesuai dengan tampilan class materialize.

Jika kita bedah ada element css default mengenai class pada Heading satu sampai dengan heading enam.

Berikut ini “contoh menggunakan heading pada Materialize”.

Perhatikan pada Kode diatas, tidak ada class tambahan yang digunakan. Dan Lihat hasilnya.

Belajar Materialize #7 : Heading pada Materialize

Perhatikan gambar di atas, tampilan headingnya tidak seperti heading normal tag HTML biasa, namun ada tambahan CSS yang lumayan keren dan menarik.

Membuat Custom Heading pada Materialize

Untuk mengubah tampilan heading dapat dilakukan dengan menambahkan element css baru, misalnya anda ingin mengubah text nya menjadi rata tengah.

Berikut ini contoh “menggunakan custom CSS pada Heading Tag HTML”.

Perhatikan kode diatas, saya menambahkan elemen CSS internal pada bagian <head>. Dan Lihat hasilnya.

Membuat Custom Heading pada Materialize
Membuat Custom Heading pada Materialize

CSS yang saya tambahkan yaitu dengan mengubah warna menjadi merah.

Kita Sudah berhasil membuat custom CSS pada Materialize. Bukan hanya mengubah warna text saja, anda juga dapat “mengubah ukuran text pada heading”.

Baca Juga…

Sekian Tutorial Membuat Heading Tag HTML pada Materialize, sampai jumpa di seri belajar Tutorial materialize lainnya.

Terima Kasih.

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.
Leave a Reply