HTML Web • 06/10/2019

Tutorial HTML: Heading, Paragraf dan Text Formatting

avatar of Azhari Sikumbang

Azhari Sikumbang

@azhari

Share on

Bagian penting selanjutnya, adalah heading, paragraph dan pemformatan pada teks. Seperti halnya ketika kita menulis karangan, kita butuh judul, konten teks, atau beberapa bagina utama yang kita butuh format khusus. Begitu juga pada HTML, implementasi itu kita terapkan dengan tag HTML.

Heading Pada HTML

Seperti sebuah karangan, untuk tau maksudnya, hal pertama mungkin kita membaca judul (heading) dari karangan tersebut. Begitu juga ketika kita ingin mencarinya, kita tinggal ingat judul. Nah, hal ini lah yang dilakukan search engine (seperti google, bing, dan lain lain) dalam melakukan pengindeksan setiap kontennya. Heading akan memberi struktur pada sebuah website, search engine akan mengutakan pembacaan heading, kemudian dilanjut ke bagian konten webnya. Jadi, sangat diwajibkan penggunaan heading pada halaman web.

Pada HTML, ada 6 tingkatan pada heading, dimana kita bisa menggunakan sesuai kepentingan. Mereka yaitu, <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Sementara untuk pemakaiannya, <h1> dianggap sebagai Heading utama dan terpenting, selanjutnya <h2> untuk bagian yang dianggap penting, <h3> untuk bagian yang agak penting,dan begitu seterusnya hingga <h6>.

Heading juga mengambil satu baris pada dokumen HTML.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar HTML: Heading, Paragraf dan Text Formatting</title>
</head>
<body>
 <h1>Bagian Heading 1</h1>
 <h2>Bagian Heading 2</h2>
 <h3>Bagian Heading 3</h3>
 <h4>Bagian Heading 4</h4>
 <h5>Bagian Heading 5</h5>
 <h6>Bagian Heading 6</h6>
</body>
</html>

Dan hasilnya,

Dasar HTML : Heading, Paragraf, dan Text

Paragraf Pada HTML

Paragraf, ditunjukkan dengan tulisan biasa, yang menunjukkan konten dari halaman website. Dengan penggunaan paragraf ini penulisan konten menjadi lebih teratur, dan terstruktur.

Paragraf didefenisikan dengan <p>….</p>. Berikut contohnya,

<!DOCTYPE html>
<html>
<head>
 <title>Belajar HTML: Heading, Paragraf dan Text Formatting</title>
</head>
<body>
 <p>Ini Paragraf pertama saya</p>
 <p>Ini Paragraf lainnya</p>
 <p>Ini Paragraf yang lain lagi !</p>
</body>
</html>

Berikut hasilnya,

HTML Dasar : Paragraf result

ext Formatting Pada HTML

Seperti ketika membaca buku atau novel, kita sering menemukan bagian tebal, miring, atau format-format tambahan lainnya. Hal ini disengaja untuk lebih memperjelas maksud dan tujuan dari tulisan kita. Begitu juga pada HTML, hal ini didefenisikan dengan format tag tertentu.

Huruf Tebal (Bold dan Strong)

Keberadaan huruf tebal ini sering ditujukan untuk teks penting. Ada dua pencetakan teks tebal pada html, bold (<b>…</b>) dan strong (<strong>…</strong>). Perbedaannya, huruf bold hanya dianggap tebal, sementara strong dianggap sebagai teks yang lebih penting.

Ini adalah teks <b>tebal</b> atau <b>bold</b>.

Hasilnya,

HTML Dasar : Tesk Result

Sementara untuk strong,

Ini adalah teks <strong>tebal</strong> atau <strong>strong</strong>.

Dasar HTML : Tesk Result 2

Huruf Miring (italic dan emphasized)

Sama seperti bold dan strong, italic dan emphasized, juga punya perbedaan di seberapa penting teks nya. Sementara untuk tampilan masih nampak sama saja.

Ini adalah teks <i>miring</i> atau <i>italic</i>.

Dasar HTML : Tesk Result 3

Huruf Bergaris Bawah (underline)

Untuk underline didefenisikan sebagai <u>….</u>.

Teks ini diberi <u>garis</u> bawah.

HTML Dasar : Teks Tesilt 4

Baris Baru dan Garis Horizontal

Pada penulisan konten, tentu kita ingin ada penyetopan pada bagian tertentu dan melanjutkannya ke baris selanjutnya. Nah, salah satu solusinya adalah Break Line <br>. Sementara, garis horizontal akan memberikan efek garis memanjang, yang didefenisikan dengan <hr> atau horizontal line.

Hari ini saya belajar HTML <br> Bagian Text Formating <hr> Tetap Semangat !!!

HTML Dasar : Tesk Result 8

Itu adalah beberapa bagian dari format teks, masih banyak lagi.

Kesimpulan

Dalam penulisan sebuah halaman website, kita pasti memerlukan judul oleh heading, kemudian diikuti oleh konten yang merupakan hasil dari paragraf dan beberapa format teks yang mengikutinya.