Formatting: Heading

Tentang

Formatting Heading adalah format HTML untuk membuat elemen Heading/Judul bagian-bagian tertentu - (Demo).



Spesifikasi




Konfigurasi



Keterangan

line
Dekorasi garis di bagian bawah elemen. Pilih salah satu skin yang tersedia pada Daftar Skin. Ketika nilai berupa skin, terdapat garis di bagian bawah elemen dengan warna sesuai skin yang digunakan - (Lihat). Untuk menonaktifkan garis, set nilai ke none.

align
Rataan.

Nilai Keterangan
left Rata kiri
center Rata tengah
right Rata kanan
size
Ukuran.

Nilai Keterangan Pratinjau
default Ukuran akan sesuai tag heading yang digunakan pada elemen w-title. Atau seperti h2 jika tag yang digunakan selain tag heading.
Heading Size
h1 Ukuran seperti heading h1
Heading Size
h2 Ukuran seperti heading h2
Heading Size
h3 Ukuran seperti heading h3
Heading Size
h4 Ukuran seperti heading h4
Heading Size
normal Ukuran normal
Heading Size



Penggunaan

  1. Definisikan Tag HTML dengan format seperti berikut: 

            
<div class='w-heading'>
  <h2 class='w-title'>
	Judul Heading
  </h2>
  <div class='w-sub'>
	Sub atau deskripsi
  </div>
</div>

    Judul Heading

    Sub atau deskripsi

    Keterangan: Pada HTML diatas, tidak ada satupun konfigurasi yang ditambahkan. Semua konfigurasi akan mengambil Nilai Default.


  2. Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen dengan class w-heading.

    Contoh penambahan konfigurasi: 
            
<div class='w-heading' data-align='center' data-line='blue'>
  <h2 class='w-title'>
	Judul Heading
  </h2>
  <div class='w-sub'>
	Sub atau deskripsi
  </div>
</div>

    Judul Heading

    Sub atau deskripsi


    Formatting ini juga memungkinkan anda untuk mendefinisikan satu elemen saja (judul tanpa sub atau sebaliknya). 

            
<div class='w-heading'>
  <h2 class='w-title'>
	Judul Tanpa Sub
  </h2>
</div>

<br/>
<br/>

<div class='w-heading'>
  <div class='w-sub'>
	Sub Tanpa Judul
  </div>
</div>

    Judul Tanpa Sub



    Sub Tanpa Judul


    INFO: Semua contoh HTML yang anda jumpai sebelumnya menggunakan tag H2 untuk elemen Judul. Anda bisa menggunakan tag HTML lainnya sesuai kebutuhan.


Lainnya
Format Penulisan Cepat Penulisan heading bisa juga dilakukan seperti berikut: 

        
<div class='w-heading'>
  Judul
</div>

Judul


Keterangan: div bisa berupa elemen apa saja, misalnya h2, h3, h4, dan lain sebagainya.
Komentar