»

Tutorial HTML Part 4 - Heading, Paragraf, dan Horizontal Rules Pada HTML

Pada dasarnya halaman web digunkan untuk menyampaikan informasi kepada publik salah satunya dalam bentuk teks. Terdapat dua bagian penting untuk informasi yang berbentuk teks yaitu Judul dan paragraf penjelasnya. Judul teks dalam HTML ditampilkan dengan menggunakan elemen headings dan untuk paragraf ditampilkan dengan elemen paragraf.

HEADINGS

Heading ditulis dengan menggunakan tag <h1> sampai <h6>. <h1> adalah tag heading yang paling besar dan <h6> adalah tag heading yang paling kecil. Semakin besar heading semakin penting judul yang ditampilkan.
  1. <h1> untuk membuat judul utama dari sebuah dokumen
  2. <h2> untuk membuat subjudul dari <h1>
  3. <h3> untuk membuat subjudul dari <h2>
  4. Begitu seterusnya sampai <h6>
Berikut contoh penulisan setiap element headings
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Headings</title>
</head>
<body>
    <h1> Heading 1 </h1>
    <h2> Heading 2 </h2>
    <h3> Heading 3 </h3>
    <h4> Heading 4 </h4>
    <h5> Heading 5 </h5>
    <h6> Heading 6 </h6>
</body>
</html>


Dari contoh diatas terlihat dari heading 1 sampai heading 6 memiliki ukuran yang berbeda-beda. Ukuran tersebut adalah ukuran default dari setiap elemen. Untuk mengubah ukurannya kalian bisa menambahkan attribut style seperti berikut.
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Headings</title>
</head>
<body>
    <h1 style="font-size : 5px"> Heading 1 dengan Style <h1>
    <h1> Heading 1 tanpa style <h1>
</body>
</html>

Terlihat perbedaan antara heading 1 yang telah diubah ukurannya dengan heading 1 defaultnya.
Headings memiliki ukuran yang besar dengan teks yang tebal. Meskipun begitu kalian jangan menggunkan headings untuk membuat teks tebal atau Bold karena pada dasarnya heading berfungsi untuk menunjukkan struktur teks yang kita buat. Untuk sebuah mesin pencari heading akan memudahkan user untuk menemukan kata kunci yang dicarinya.

PARAGRAF

Setelah membuat heading / Judul, pastinya ada teks penjelas yang biasa kita sebut paragraf. Yap untuk membuat sebuah paragraf terdapat dua tag yang bisa kita gunakan yaitu tag <p> dan tag <pre>. Yang umum digunakan adalah tag <p>. Perbedaan dari keaduanya adalah teks yang dibuat dengan tag <p> akan menyesuaikan dengan bentuk paragraf pada umumnya. Berapapun spasi atau baris bari (enter) yang kita tambahkan teks yang ditampilkan akan disesuaikan.
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Paragraf</title>
</head>
<body>
    <p>Berikut adalah      paragraf
       yang dibuat    dengan tag  <p>  tampilannya

           pada browser     akan disesuaikan. 
    </p>
</body>
</html>

Sedangkan untuk teks yang dibuat dengan tag <pre> akan ditampilkan sesuai dengan apa yang diketikkan.
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Paragraf</title>
</head>
<body>
    <pre>Berikut adalah      paragraf
       yang dibuat    dengan tag  <pre>  tampilannya

           pada browser     akan tetap. 
    </pre>
</body>
</html>

Kalian harus ingat untuk hanya menggunakan tag <p> untuk membuat sebuah paragraf. Bagaimana jika kita ingin membuat sebuah baris baru tetapi masih dalam satu paragraf? kalian bisa menggunakan tag <br> (line break). Sesuai namanya, element ini berfungsi untuk menutup sebuah baris dan membuat baris baru.
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Paragraf</title>
</head>
<body>
    <p>Berikut adalah paragraf yang dibuat dengan tag <br>
       <p> tampilannya pada browser akan disesuaikan. 
    </p>
</body>
</html>

HORIZONTAL RULES

Sesuai namanya elemen ini hanya menampilkan sebuah garis horizontal. Biasanya para blogger dan developer  web menggunakan elment ini untuk membagi bagian konten atau untuk menandai bagian akhir sebuah konten jika dalam satu dokumen terdapat beberapa konten yang berbeda. Tag yang digunakan dalam elemen ini adalah tag <hr>. Biar paham langsung saja kalian coba jalankan kode berikut
<!DOCTYPE html>
<html>
<head>
    <title>Horizontal Rules</title>
</head>
<body>
    <h1>Ini adalah heading</h1>
    <p>Ini adalah paragraf</p>
    <hr>
    <h1>Ini adalah heading</h1>
    <p>Ini adalah paragraf</p>
</body>
</html>
Dari contoh diatas, terlihat sebuah garis horizontal yang membagi konten menjadi dua bagian.
Kesimpulannya :
  1. Gunakan tag <h1> sampai <h6> untuk membuat heading atau judul dan subjudul
  2. Gunakan tag <p> untuk membuat paragraf dan tag <pre> jika kalian ingin mempertahnkan posisi/bentuk teks yang kalian buat
  3. Gunakan tag <hr> untuk membuat sebuah garis horizontal jika ingin membagi konten dalam dokumen.
Tutorial selanjutnya kita akan belajar dan Mengenal Attribut Style Pada HTML.

Postingan terkait:

— — Add Comment —

Belum ada tanggapan untuk "Tutorial HTML Part 4 - Heading, Paragraf, dan Horizontal Rules Pada HTML"

Post a Comment

Subscribe to: Post Comments (Atom)