HTML Dasar Part 7 : Cara Membuat Paragraf di HTML

By -
HTML Dasar Part 7: Cara Membuat Paragraf di HTML

mahaamesha.blogspot.com Pada tutorial yang lalu kita telah membahas tentang struktur dasar HTML. Setelah kita mengenal bagaimana itu strtuktur dasar HTML, pada tutorial kali ini kita akan membahas cara membuat paragraf di HTML.
----------------------------------------------------------------------------------------------------
Agan / aganwati wajib hukumnya tahu tag-tag dasar HTML, termasuk tag paragraf. Dengan begitu, kita akan mudah menyusun kode struktur dari HTML. Tag dasar HTML yang akan kita bahas adalah seputar tag paragraf, diantaranya <p>; <br>; <em>; dan <strong>.
Tag Paragraf <p>
HTML menyediakan kode khusus dalam pembuatan paragraf, yaitu dengan penulisan tag dengan kode “p” (tanpa tanda petik) atau <p>…</p>.
Agar memudahkan dalam memahami cara pembuatan paragraf pada HTML, kita akan membuat struktur HTML berdasarkan tutorial sebelumnya, yaitu struktur dasarHTML. Silahkan agan / aganwati kembali membuka Notepad ++, lalu ketikkan kode berikut.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
          <title>Ma Haamesha</title>
</head>
<body>
          <h5>Tutorial HTML Part 7 - Tag Dasar</h5>
          Belajar buat paragraf pertama.
          Ini paragraf kedua.
</body>
</html>
Setelah itu save dengan format .html sebagai Tag Dasar.html, lalu launch di web browser.

Pada gambar tersebut, agan / aganwati akan melihat bahwa struktur HTML yang kita ketikkan tadi ternyata tidak membentuk paragraf yang terpisah, melainkan dalam satu paragraf yang sama. Hal yang sama juga akan terjadi apabila kita kita menuliskannya seperti berikut.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
          <title>Ma Haamesha</title>
</head>
<body>
          <h5>Tutorial HTML Part 7 - Tag Dasar</h5>
          Belajar buat paragraf pertama.                            Ini paragraf kedua.
</body>
</html>
Apabila kita launch struktur HTML baru di atas, maka hasilnya tetap tidak membentuk paragraf baru. Ini artinya berapapun enter atau spasi maupun tab yang kita ketikkan tidak akan membentuk paragraf baru. Karenanya, kita membutuhkan tag khusus untuk membuat paragraf untuk memberitahu web browser bahwa kita akan membuat paragraf baru.

“NB : Enter / Spasi / Tab dalam penyusunan struktur HTML akan diabaikan, sehingga ketiganya tadi tidak dapat menggantikan fungsi tag dalam HTML.”


Sekarang kita gunakan tag paragraph dalam penulisan struktur HTML dengan menggunakan kode “p”. Mari kita revisi kode HTML sebelumnya dengan menambahkan tag <p>.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
          <title>Ma Haamesha</title>
</head>
<body>
          <h5>Tutorial HTML Part 7 - Tag Dasar</h5>
          <p>Belajar buat paragraf pertama.</p>
          <p>Ini paragraf kedua.</p>
<p>Ini paragraph kesekian kalinya :] </p>
</body>
</html>
Setelah kita revisi, maka masing-masing kalimat tersebut akan terpisah menjadi paragraf baru. Dimana setiap tag paragraf, web browser akan dengan sendirinya memberikan spasi atau jarak antar paragraf.

----------------------------------------------------------------------------------------------------
Tag Break <br>
Tag Break atau <br> dapat menjadi alternatif untuk memisahkan kedua paragraf. Kadang kala, ada penulis yang menggantikan tag <p> dengan tag <br>. Hal ini karena fungsi dari kedua tag tersebut memang hampir sama, yaitu sebagai pemisah antar kalimat / paragraf. mahaamesha.blogspot.com
Berikut contoh penggunaan tag <br> :
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
          <title>Ma Haamesha</title>
</head>
<body>
          <h5>Tutorial HTML Part 7 - Tag Dasar</h5>
          Belajar buat paragraf pertama.
          <br>
          Ini paragraf kedua.
</body>
</html>
Setelah kita launch pada web browser, hasilnya seperti berikut.
Fungsi dari tag <p> dan <br> hampir sama. Perbedaannya hanya terletak pada ada atau tidaknya spasi antar paragraf. Penggunaan tag <br> tidak memberikan spasi, sedangkan tag <p> memberikan spasi. Meskipun demikian, dalam penulisan struktur HTML kita tetap harus menggunakan kedua tag tersebut sesuai kebutuhan. Apabila agan / aganwati membutuhkan spasi antar paragraf, maka gunakanlah tag <p>.

“FYI : Dalam penulisan tag <br>, kita juga dapat menuliskannya sebagai <br/>. Penulisan <br/> merupakan versi xHTML yang dianggap lebih rapi. Namun, dalam standar penulisan HTML5, baik <br> atau <br/> sama-sama valid. ”




----------------------------------------------------------------------------------------------------
Tag Penekanan <b> <u> <i>
mahaamesha.blogspot.com Di dalam suatu paragraf, terkadang kita perlu untuk membuat penekanan pada kata-kata tertentu. Penekanan ini dapat dilakukan dengan menggunakan penebalan, garis bawah atau pun dengan garis miring.

Tag penebalan atau <b>…</b> berasal dari kata Bold yang merupakan sebuah tag yang digunakan untuk memberikan efek penebalan pada HTML. Selain dengan menggunakan tag <b>, kita juga dapat menggunakan tag <strong>…</strong>. Kedua tag tersebut memiliki fungsi yang sama. Pada versi xHTML, lebih disarankan dalam penggunaan tag <strong> daripada tag <b>. Hal ini karena, penggunaan tag <b> akan memberikan tampilan yang sedikit berbeda. Selain itu, tag tersebut juga dianggap using dan tidak dianggap valid oleh xHTML.

Tag garis bawah atau <u>…</u> berasal dari kata Underlined yang merupakan sebuah tag yang digunakan untuk memberikan efek tambahan garis bawah pada HTML. kita juga dapat menggunakan tag <em>…</em> untuk memberikan penekanan berupa garis bawah. Keduanya punya fungsi sama. Sama halnya dengan tag sebelum ini, tag <em> atau emphasis lebih disarankan penggunaannya bagi agan / aganwati yang menggunakan versi xHTML.

Tag garis miring atau <i>…</i> berasal dari kata Italic yang merupakan sebuah tag yang digunakan untuk memberikan efek garis miring pada kata yang diberikan penekanan dalam kode HTML.

Namun, bagi agan / aganwati yang menggunakan versi HTML5, penggunaan semua tag tersebut dianggap valid. Jadi, tidak perlu khawatir karena fungsi tag-tag yang berpasangan di atas akan menampilkan hasil yang sama. Berikut ini adalah contoh penggunaan ketiga teks tersebut.
1
2
3
4
5
6
7
8

9
10
11


12

13
14
<!DOCTYPE html>
<html>
<head>
          <title>Ma Haamesha</title>
</head>
<body>
          <h5>Tutorial HTML Part 7 - Tag Dasar</h5>
          Ini kalimat dengan <strong>tag strong</strong> dan <em>tag emphasis</em>.
<br/>
          Ini kalimat dengan <b>tag bold </b> dan <i>tag italic</i>.
<br/>
          Ini kalimat dengan <u>tag underlined</u>.

          <p><b><i><u>Kalau ini, Paragraf Baru dengan tag bold,italic,underlined</b></i></u></p>
</body>
</html>
Setelah mengetikkan kode tersebut di Notepad ++, launch di web browser dan akan nampak seperti gambar berikut.



“FYI : Meskipun spasi tidak berpengaruh dalam struktur HTML yang ditampilkan, tetapi spasi sangat membantu dalam mempermudah pembacaan struktur HTML.”





----------------------------------------------------------------------------------------------------
Nah, kurang lebih seperti itu seputar tutorial kali ini. Tidak perlu banyak-banyak dulu, kita belajar HTML, yang penting agan / aganwati konsisten dalam mempelajarinya. Meskipun kita belajar sedikit demi sedikit, apabila rutin kan hasilnya akan jadi bukit. Dan yang jelas, agan / aganwati benar-benar paham betul mengenai apa yang dipelajari, sehingga tidak mudah lupa materi yang sebelumnya.
Setelah mempelajari tutorial kali ini, HTML Dasar Part 7 – Cara Membuat Paragraf di HTML, selanjutnya kita akan mempelajari tentang cara membuat judul atau heading di HTML.

Created by mahaamesha :}


Comments

Post a Comment