Paragraf dan Heading dalam sebuah HTML adalah hal yang wajib ada, paragraf digunakan untuk membagi isi dari halaman HTML menjadi beberapa bagian. Sedangkan Heading digunakan untuk memberikan judul pada setiap paragraf. Untuk lebih jelasnya silahkan baca ulasannya dibawah ini :
Baca juga :
Mengenal Lebih Dalam Struktur Body HTML
Paragraf HTML
Pada tutorial Belajar HTML kali ini kita akan membahas tentang tag paragraf, bagaimana penulisan tag paragraf dan bagaimana cara membuat paragraf di HTML. Untuk memahaminya, kita kembali terlebih dahulu membuat contoh. Silahkan buka kembali text editor, lalu ketikkan kode berikut:
Contoh penggunaan tag paragraf:
<!DOCTYPE html>
<html>
<head>
<title>Title Web Anda</title>
</head>
<body>
Berikut Ini Adalah Paragraf Pertama
Berikut Ini Adalah Paragraf Kedua
</body>
</html>
Coba pastekan kode diatas ke code editor kalian. Save sebagai paragraf.html, lalu jalankan di web browser. Kita akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Dalam HTML, spasi akan diabaikan, termasuk jika kita merubahnya menjadi :
Contoh penggunaan tag paragraf 2:
<!DOCTYPE html>
<html>
<head>
<title>Title dari Websiteku</title>
</head>
<body>
Berikut ini adalah paragraf pertama berikut ini adalah paragraf kedua
</body>
</html>
Kita harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf.
Tag Paragraf (<p>)
Untuk membuat suatu paragraf, HTML telah menyediakan tag khusus yaitu : <p>
Contoh penggunaan tag paragraf 3:
<!DOCTYPE html>
<html>
<head>
<title>Title Web Anda</title>
</head>
<body>
<p>Berikut ini adalah paragraf pertama</p>
<p>Berikut ini adalah paragraf kedua</p>
</body>
</html>
Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.
Tag Break (<br>)
Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).
Contoh penggunaan tag <br>:
<!DOCTYPE html>
<html>
<head>
<title>title dari websiteku</title>
</head>
<body>
ini adalah paragraf pertama
<br />
ini adalah paragraf kedua
</body>
</html>
Maka kita akan melihat hasil yang hampir sama. Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki pasangan, dan karena disarankan untuk menutup tag, maka tag bar ditulis menjadi <br/> Kita tetap bisa menggunakan tag break tanpa penutup, dan efeknya akan sama. Hanya untuk aturan HTML dan agar kode kita konsisten, hendaknya disarankan
menggunakan <br/> Pemisahan paragraf menggunakan tag break juga kurang disarankan, karena kode HTML kita akan menjadi lebih sistemik dan teratur jika menggunakan <p>.
Tag untuk penebalan dan garis miring (<em> dan <strong>)
Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan menebalkan kata, atau dengan garis miring. Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong>
untuk strong emphasis. Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.
Contoh penggunaan tag <em> dan <strong>:
<!DOCTYPE html>
<html>
<head>
<title>title dari websiteku</title>
</head>
<body>
<p>ini adalah kalimat <em>pertama</em>,
sedangkan ini adalah kalimat <strong>kedua</strong></p>
</body>
</html>
Heading HTML
Heading HTML biasanya digunakan untuk judul postingan/artikel dalam halaman web. Tag heading terdiri dari beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading Pertama</h1>
<h2>Heading Kedua</h2>
<h3>Heading Ketiga</h3>
<h4>Heading Keempat</h4>
<h5>Heading Kelima</h5>
<h6>Heading Keenam</h6>
</body>
</html>
Agar lebih memahami tag-tag tersebut kalian bisa mencoba membuat website sederhanda menggunakan notepad dengan tag-tag tersebut.
Baca juga :
Pengenalan Dasar Programming Web
EmoticonEmoticon