Tag h1 s/d h6 adalah elemen yang berfungsi untuk membuat "judul" diberbagai bagian blog dan lebih dikenal sebagai "heading". Elemen h1 s/d h6 ditetapkan dalam 6 tingkatan "heading" dengan ukuran font berbeda. Tag h1 merupakan elemen dengan font berukuran terbesar, kemudian diikuti tag h2 hingga h6. Dalam desain web, tag h1 lebih banyak digunakan sebagai pembentuk "blog title" atau untuk membuat "nama blog". Tag ini selanjutnya dipadukan dengan tag "a" hingga membentuk sebuah "link".
Sekalipun tanpa pengaturan secara khusus, semua browser secara otomatis akan menampilkan tag h1 s/d tag h6 (heading) dengan bentuk dan karakter tertentu (dg ukuran font tertentu sesuai tag yg digunakan), namun pengaturan ulang melalui kode css sangat penting dilakukan agar didapatkan bentuk dan karakter tag h1 s/d h6 yang sesuai dengan keinginan (ini menunjukkan betapa pentingnya belajar kode css sekaligus desain blog/web). Pengaturan terutama dilakukan pada ukuran font. Pengaturan yang berbeda juga dapat dilakukan saat tag h1 s/d h6 digunakan bersama dengan tag "a" untuk membuat link.
Sekalipun tanpa pengaturan secara khusus, semua browser secara otomatis akan menampilkan tag h1 s/d tag h6 (heading) dengan bentuk dan karakter tertentu (dg ukuran font tertentu sesuai tag yg digunakan), namun pengaturan ulang melalui kode css sangat penting dilakukan agar didapatkan bentuk dan karakter tag h1 s/d h6 yang sesuai dengan keinginan (ini menunjukkan betapa pentingnya belajar kode css sekaligus desain blog/web). Pengaturan terutama dilakukan pada ukuran font. Pengaturan yang berbeda juga dapat dilakukan saat tag h1 s/d h6 digunakan bersama dengan tag "a" untuk membuat link.
Contoh :
<h1>Blog Title</h1>
<h1> <a href="URL">Blog Title</a> </h1>Dalam bentuk yang lebih detail sbb:
<h1> <a href="http://gubhugreyot.blogspot.com">Tutorial Blogger - gubhugreyot</a> </h1>
Kode html di atas (yang ke-2) akan menghasilkan bentuk sbb:
Tutorial Blogger - gubhugreyot
Jika tag h1 biasa digunakan sebagai "elemen pembentuk blog title", maka h2 banyak digunakan untuk "widget title" atau memberi "nama widget", sedang h3 untuk "posts title" atau untuk menuliskan "judul posting".
Contoh penggunaan tag h2:
<h2>widgets title</h2>
<h2>Popular Posts</h2>
Dari kode di atas akan menghasilkan bentuk sbb:
Popular Posts
Contoh penggunaan tag h3:
<h3>posts title</h3>
<h3><a href="URL">posts title</a></h3>
<h3><a href="http://gubhugreyot.blogspot.com/2012/04/create-404-error-page-in-blogger-with.html">Create 404 Error page with CSS3</a></h3>
Kode html di atas akan menghasilkan bentuk sbb:
Create 404 Error page with CSS3
Penggunaan tag h1 s/ h3 pada "blog title", "widget title" dan "post title" biasa menggunakan attribute class, seperti misalnya h1 class="title", h2 class="widget-title", h3 class="post-title", seperti misalnya:<h3 class="post-title" ><a href="http://gubhugreyot.blogspot.com/2012/04/create-404-error-page-in-blogger-with.html">Create 404 Error page with CSS3</a></h3>
Contoh pengaturan ukuran font tag h1 s/d h6
h1{
font-size:40px;
}
h2{
font-size:27px;
}
h3{
font-size:22px;
}
h4{
font-size:18px;
}
h5{
font-size:16px;
}
h6{
font-size:14px;
}
Contoh setting font-size tag h1 s/d h6 dalam % (persen)
h1{
font-size:160%;
}
h2{
font-size:150%;
}
h3{
font-size:140%;
}
h4{
font-size:130%;
}
h5{
font-size:120%;
}
h6{
font-size:110%;
}Dibawah telah disertakan demo elemen h1 s/d h6, baik ketika digunakan bersama tag "a" untuk membentuk link, ataupun terpisah. Disertakan juga penggunaan attribute "class" untuk membentuk fungsi secara khusus.
Please click the button to display. Continue with editing code and click to see the results!
Terima kasih pencerahannya
BalasHapusbutik busana muslim
Mantab mas bro...sangat bermanfaat. tambah terus postingannya. moga lancar jaya..
BalasHapustrus kalo iFrame itu apa sih Mas?
BalasHapuspas saya lihat tulisannya: "IFrames: Bad: IFrames are not indexed at all, and you have 1."
saya masih bingung hehe
BalasHapusuntuk mengatur font deskripsi nya gimana ms
BalasHapus