Cara membuat heading pada HTML

Cara Membuat Heading Pada HTML


Pembahasan pembelajaran html sederhana selanjutnya adalah Cara Membuat Heading Pada HTML. Apa itu heading html ? bagaimana cara membuat heading pada html ?

Heading html merupakan tag atau element HTML yang fungsinya adalah untuk menunjukkan bagian penting pada halaman web. Element tag heading html ini memiliki 6 tingkatan yang berurutan, yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6>. Heading ini bisa digunakan untuk menambah struktur sebuah halaman web. Apa perbedaan masing-masing heading? Perbedaan masing-masing heading adalah ukuran teks, yaitu dari besar hingga kecil.

Bagi SobatCula yang belum mengerti tentang tag, element, dan atribut html bisa membaca artikel sebelumnya yaitu, Apa itu tag, element, dan atribut html ? Agar lebih bisa memahami pembahasan pembelajaran html pada tingkatan yang lebih tinggi.

Oke, kita lanjut pada pembahasan heading html.

Heading html berukuran dari besar hingga kecil. Artinya, <h1> lebih besar dari <h2>, <h2> lebih besar dari <h3>, begitupun seterusnya hingga <h6>.

Bagaimana penggunaan heading html ?

Penggunaan masing-masing html pun berbeda. Berikut adalah penggunaan masing-masing tag/element heading yang sering dijumpai pada halaman web : 

  • <h1> merupakan heading yang dipakai untuk penulisan judul utama dari suatu dokumen
  • <h2> merupakan heading yang dipakai sebagai subheading dari <h1>
  • <h3> merupakan heading yang dipakai sebagai subheading dari <h2>
Untuk penggunaan heading selanjutnya, yaitu <h4>,<h5>, dan <h6> tergantung dari masing-masing programmer/developer web sendiri. Bisa untuk memperindah halaman web atau agar lebih terlihat rapi dan profesional. Tergantung dari kebutuhan dan keinginan.

Sudah bisa membuat heading ? Berikut adalah penerapan masing-masing cara membuat heading pada html :

cara membuat heading 1

<!DOCTYPE html>
<html>
<head>
<tittle></tittle>
</head>
<body>
<h1>Belajar membuat heading satu</h1>
</body>
</html> 

Hasilnya adalah seperti ini :



Belajar cara membuat Heading 1 hingga heading 6

<!DOCTYPE html>
<html>
<head>
<tittle></tittle>
</head>
<body>
<h1>Belajar membuat heading 1</h1>
<h2>Belajar membuat heading 2</h2>
<h3>Belajar membuat heading 3</h3>
<h4>Belajar membuat heading 4</h4>
<h5>Belajar membuat heading 5</h5>
<h6>Belajar membuat heading 6</h6>
</body>
</html>

maka hasilnya akan seperti ini :


Nah, dari contoh kedua yang telah saya paparkan, nampak bahwa terjadi perbedaan ukuran dari masing-masing heading. Heading 1 lebih besar dari heading 2, heading 2 lebih besar dari heading 3, dan seterusnya seperti pada gambar.

Sekarang kita akan belajar tentang penggunaan heading di dalam tag lain. Memangnya boleh mas? Boleh kok, penulisan heading memang boleh digunakan di dalam penggunaan jenis tag yang lainnya. Contohnya adalah memberikan link pada suatu heading atau menghubungkan heading dengan halaman yang lain.

Contoh :


<!DOCTYPE html>
<html>
<head>
<tittle></tittle>
</head>
<body>
<a href="http://www.jalanbadak.com/"><h1>Belajar membuat link pada heading</h1></a>
</body>
</html>

Maka hasilnya adalah seperti ini :
Selanjutnya mari kita terapkan penggunaan heading di dalam tag yang lain, yaitu sebagai berikut :


<!DOCTYPE html>
<html>
<head>
<tittle></tittle>
<head>
<body>
<b><h1>Belajar cara membuat heading tebal</h1></b>
<a align="right"><h2>Belajar cara membuat heading rata kanan</h2></a>
<center><h3>Belajar cara membuat heading di tengah</h3></center>
</body>
<html>

jadinya adalah sepeti ini :

Setelah pembahasan kali ini tentang Cara membuat heading, terus ikuti update jalanbadak.com agar nggak ketinggalan info menariknya.

bantu sebarkan kalo menurutmu ini bermanfaat!

Subscribe to receive free email updates:

0 Response to "Cara membuat heading pada HTML"

Post a Comment