Belajar HTML Part 4: Bagaimana Cara Membuat Judul (Heading) Di HTML

Konten [Tampil]
Kali ini kami akan menjelaskan tentang mengenai bagaimana cara membuat heading di HTML. Dalam kita membuat sebuah dokumen HTML, kami sarankan untuk menambahkan heading pada setiap dokumen tersebut. Heading adalah sekumpulan frasa atau kata yang akan menjadi sebagai judul atau subjudul dalam suatu dokumen HTML.

Bagaimana Cara Membuat Judul (Heading) Di HTML

Dalam pemberian judul tentu juga sangat diperlukan karena untuk memberikan gambaran pada wacana atau artikel yang ada pada dokumen HTML yang kita buat. Heading bukanlah title (judul pada dokumen HTML) yang tampil menjadi judul dokumen HTML di title bar browser, akan tetapi heading tampil pada isian dokumen sebagai judul dari sebuah wacana atau tulisan artikel.

HTML menyediakan 6 tingkatan untuk penggunaan heading dengan mempunyai ukuran yang berbeda-beda. Penggunaan untuk tag heading dimulai dengan tag <Hx> dan diakhiri dengan tag </Hx> dimana x disini adalah nomor tingkatan heading dari Heading 1 sampai Heading 6 dimana semakin besar nilai x nya maka akan semakin kecil ukuran headingnya. Sebaliknya, semakin kecil nilai x nya, maka akan semakin besar tingkat kepentingan suatu judul dengan kata lain h1 memiliki posisi yang lebih penting dari h2 dan begitu pula seterusnya.

Beginilah penggunaan atribut pada heading, atribut yang menyertainya adalah ALIGN yang akan menyebabkan heading ditampilkan rata kanan, kiri ataupun rata tengah. Berikut ini tabel nilai atribut ALIGN pada sebuah heading


Nilai

Fungsi

Left

Supaya  meratakan heading ke kiri

Right

Supaya meratakan heading ke kanan

Center

Supaya meratakan heading ke tengah

Untuk lebih jelasnya, berikut kode untuk penggunaan heading :

<!DOCTYPE html>
<html>
 <head>
  <title> Belajar penggunaan Headings Di HTML</title>
 </head> 
<body>
  <h1 align="left"> Penggunaan Heading 1</h1>
  <h2 align="left"> Penggunaan Heading 2</h2>
  <h3 align="left"> Penggunaan Heading 3</h3>
  <h4 align="left"> Penggunaan Heading 4</h4>
  <h5 align="left"> Penggunaan Heading 5</h5>
  <h6 align="left"> Penggunaan Heading 6</h6>
 </body>
</html>

Setelah Anda menjalankan kode HTML diatas, maka hasilnya akan terlihat seperti gambar dibawah ini:

Bagaimana Cara Membuat Judul (Heading) Di HTML



Gambar diatas memperlihatkan dengan jelas bahwa perbedaan ukuran dari masing-masing tingkatan heading dari heading 1-6. Kemudian, hal yang perlu dipahami bahwa untuk penggunaan atribut align pada heading tidak disuport oleh penggunaan HTML5 karena sudah diganti dengan penggunaan CSS-nya.

Garis pemisah horizontal ( tag <hr> )


Selanjutnya kita akan membahas mengenai penggunaan tag <hr>. Anda dapat menggunakan tag <hr> untuk dapat membuat garis pemisah horizontal pada dokumen HTML. Tag <hr> secara default akan membuat garis pada sepanjang jendela browser kamu. Pada tag <hr> juga terdapat beberapa atribut penggunaannya yaitu :


Atribut

Fungsi

Align

Untuk membuat perataan garis, apakah garisnya akan rata kira, tengah ataupun kanan

Size

Mengatur ketebalan garis dengan menggunakan  nilai pixel

Noshade

memperlihatkan garis tanpa bayang-bayang 3D

Color

Menjadikan warna pada garis

Width

Mengatur lebar pada garis dengan menggunakan nilai pixel ataupun persen

Berikut contoh kode penggunaan tag <hr>:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan garis pemisah Horizontal pada HTML</title>
 </head>
 <body>
  <h1 align="left"> Heading 1</h1>
  <hr color="yellow" width="30%" size=4 align="left" >
  <h3 align="left"> Heading 3</h3>
 </body>
</html>


Maka hasilnya akan terlihat seperti dibawah ini setelah ditampilkan di browser:

Bagaimana Cara Membuat Judul (Heading) Di HTML


Dalam pengaturan width pada tag <hr> tersebut, kamu bisa menggunakan px (pixel) ataupun % (persen). Pada contoh diatas, kami menggunakan % (persen) dengan kata lain lebarnya adalah 30% dari lebar jendela browser kita. Jadi, jika kamu menjadikannya witdh-nya 100% maka tag <hr> akan selebar dari jendela browser kamu.

Kemudian, atribut-atribut pada tag <hr> yang sudah dijelaskan diatas, itu tidak didukung oleh HTML5 karena fungsinya sudah diganti dengan penggunaan CSS yang ada (default). Selain itu penggunaan pada HTML 4.01, pada tag <hr> didefinisikan menjadi garis horizontal, akan tetapi pada HTML5 didefinisikan menjadi thematic break seperti halnya sebagai pengalihan topik wacana, perubahan alur cerita dan lain sebagainya.


Pada artikel kedepan mungkin kamu akan bertemu dengan beberapa tag HTML yang tidak didukung oleh HTML5. Walaupun begitu, kami akan tetap menjelaskannya supaya kamu mengerti tentang fungsi dari tag-tag penggunaannya tersebut. Selanjutnya kita akan belajar mengenai bagaimana cara membuat paragraf pada HTML.

0 Comments

Posting Komentar

1. Berkomentarlah dengan sopan dan santun
2. komentar selalu dimoderasi
3. boleh meninggalkan link aktif dengan catatan berkomentar sesuai
dengan topik yang dibahas
4. semua komentar negatif seperti hoax, menyinggung, sara, pornografi, politik, dan hal negatif lain akan dihapus