Pada tutorial kali ini kita akan membahas mengenai pembuatan judul dan paragraf html, karena hal yang paling utama pada sebuah website adalah informasi yang terdapat didalamnya, sebagian besar informasi yang terkandung didalam sebuah website utamanya adalah rangkaian teks atau kalimat sebuah tulisan, sehingga penggunaan judul dan paragraf html menjadi sangat penting sebagai sebuah landasan dasar teknik penulisan yang baik dan enak untuk di baca, pemberian judul pada sebuah tulisan tidak jauh dari sebuah paragraf, dimana judul menjadi awal dalam mendefisinikan sebuah tulisan, sedangkan paragraf adalah satu kalimat atau kumpulan kalimat pada sebuah tulisan. Maka dari itu tutorial dalam pembuatan judul dan paragraf html dibuat sebagai landasan awal dalam belajar html.
Cara Membuat Judul (Heading) HTML
Umumnya pembuatan judul atau heading memiliki 6 tingkatan yaitu h1 – h6, dimana semakin besar nilai heading tersebut maka akan semakin kecil ukuran tulisan judul tersebut. Begitupun pada bahasa HTML, dalam penulisan sebuah judul atau heading html memiliki tag khusus yaitu <h1> – <h6>. Tag heading ini adalah salah satu tag yang ditulis dengan berpasangan, yaitu tag pembuka dan penutup </h1> – </h6> sebagai pembatas sebuah judul dengan paragraf, dibawah ini adalah contoh penulisan judul dan paragraf html.
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Judul atau Heading pada HTML</title>
</head>
<body>
<h1>Judul atau Heading dengan tag H1</h1>
<h2>Judul atau Heading dengan tag H2</h2>
<h3>Judul atau Heading dengan tag H3</h3>
<h4>Judul atau Heading dengan tag H4</h4>
<h5>Judul atau Heading dengan tag H5</h5>
<h6>Judul atau Heading dengan tag H6</h6>
</body>
</html>Code language: HTML, XML (xml)Dari contoh kode html di atas dalam penulisan judul atau heading pada sebuah website maka akan tampil seperti gambar di bawah ini.
Dari gambar diatas terlihat bahwa setiap nilai heading semakin besar maka akan menghasilkan ukuran teks atau font yang sebaliknya, yaitu semakin kecil. Selain itu penggunaan heading termasuk salah satu teknik dalam meningkatkan jumlah pengunjung pada web, dimana pada mesin pencari google lebih menekankan penggunaan tag heading ini.
Cara Membuat Paragraf HTML
Dalam pembuatan paragraf pada html digunakan tag <p>, tag ini di tulisan secara berpasangan yaitu memiliki tag pembuka dan penutup (<p>…</p>) sebagai pembatas antar paragraf.
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Paragraf di HTML</title>
</head>
<body>
<p>Contoh paragraf pertama</p>
<p>Contoh paragraf kedua</p>
</body>
</html>Code language: HTML, XML (xml)Dari kode di atas maka akan menghasilkan baris baru yang memiliki jarak pembatas antara salah satu paragraf dengan paragraf lainnya.
Mari kita lihat bagaimana sebuah paragraf pada html apabila memiliki banyak teks di dalamnya. Sebagai contoh penulis menggunakan standar teks dummy untuk konten teks yang di tampilkan.
Dari contoh gambar di atas terlihat sebuah teks tersusun rapih, sehingga pembaca akan lebih mudah dalam membaca tulisan atau artikel dalam sebuah karya tulis dan terlihat enak untuk di baca.
Mengatur Perataan Teks Dalam Paragraf HTML
Seperti halnya microsoft word atau segala jenis aplikasi yang berhubungan dengan alat bantu dalam penulisan pasti memiliki sebuah fitur perataan pada sebuah tulisan, dimana fungsi ini berguna untuk memberikan posisi perataan pada setiap paragraf. Dalam meratakan sebuah paragraf pada umumnya memiliki 4 posisi yaitu:
- Align Left (Rata kiri)
Untuk membuat posisi teks menjadi rata kiri. - Align Center (Rata tengah)
Untuk membuat posisi teks menjadi rata tengah. - Align Right (Rata kanan)
Untuk membuat posisi teks menjadi rata kanan. - Justify (Rata kiri-kanan)
Untuk mebuat posisi teks sama rata, atau rata kiri-kanan.
Untuk membuat perataan posisi pada html hanya perlu menambahkan sebuah atribut “align” pada tag <p>, penggunaan atribut seperti ini <p align="posisi pertaan">, contoh kode html lengkap untuk mengatur pertaan pada paragraf.
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Paragraf di HTML</title>
</head>
<body>
<p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at quam enim. Suspendisse nibh massa, tempus eu magna at, dictum pulvinar velit. Aenean eget neque vitae purus pulvinar viverra dapibus vitae quam. Donec ac sem sed sem ultricies scelerisque. In sodales porta nulla id pellentesque. Sed auctor dolor ac lorem accumsan, at aliquam ligula sollicitudin.</p>
<p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu maximus mauris. Integer sed neque id leo ultricies malesuada. Proin tincidunt finibus magna et ullamcorper. Phasellus eu nisl odio. Aliquam ac nibh et neque ultricies laoreet. Nunc auctor feugiat tellus non convallis.</p>
<p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at quam enim. Suspendisse nibh massa, tempus eu magna at, dictum pulvinar velit. Aenean eget neque vitae purus pulvinar viverra dapibus vitae quam. Donec ac sem sed sem ultricies scelerisque. In sodales porta nulla id pellentesque. Sed auctor dolor ac lorem accumsan, at aliquam ligula sollicitudin.</p>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu maximus mauris. Integer sed neque id leo ultricies malesuada. Proin tincidunt finibus magna et ullamcorper. Phasellus eu nisl odio. Aliquam ac nibh et neque ultricies laoreet. Nunc auctor feugiat tellus non convallis.</p>
</body>
</html>Code language: HTML, XML (xml)Dari kode html di atas maka akan tampil seperti gambar di bawah ini.
Fungsi perataan pada teks sebuah paragraf ini sangat bermanfaat sekali apalagi jika pembaca adalah seorang penulis yang sangat memperdulikan kerapihan dalam karya tulisnya maka dari itu teknik dalam pengaturan judul dan paragraf sangat dibutuhkan.
Demikian tutorial kali pembuatan judul dan paragraf html ini, untuk selanjutnya akan lebih di bahas mengenai penggunaan teks pada html, mulai dari gaya huruf, pewarnaan dan lain-lain. Semoga tulisan ini berguna serta bermanfaat bagi penulis juga pembaca.
