Senin, 27 Maret 2017

Belajar HTML dan CSS Bagian 5 : Pengenalan Tag Paragraf Pada HTML

Pengenalan Tag Paragraf HTML

       Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 4 dimana kita telah membahas tentang Tag <html>. Bagi sahabat lupacode yang baru saja bergabung silahkan baca terlebih dahulu di artikel saya yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini.

lupacode - Belajar html dan bagian 5

      Pada malam hari yang berbahagia ini saya ingin melanjutkan pembahasan atau tutorial Belajar HTML ini pada pembahasan selanjutnya yaitu tentang Paragraf <html> kemudian tag yang akan kita gunakan adalah tag <p> </p> sebelum kita mencoba menggunakan tag <p> pada web kita, ada baiknya kita buat dulu folder baru dan kita kasih nama HTML lalu kita buat satu file baru dan saya kasih nama paragraf.html
       Pertama-tama kita buat terlebih dahulu struktur html nya didalam text editor kalian, dan disini saya menggunakan sublime. Lalu saya coba ketikan seperti ini :

<!DOCTYPE html>
<html>
<head>
            <title>Paragraf HTML</title>
</head>
<body>

<p>Ini adalah paragraf 1</p>

</body>
</html>

     Di dalam penulisan seperti ini kalian sudah menulisakan satu paragraf dan kalian bisa coba langsung buka file paragraf.html di dalam browser dan lihat hasilnya seperti apa. Untuk membuat paragraf selanjutnya kalian bisa coba dengan menuliskan tag <p> lagi seperti ini <p>Ini adalah paragraf 2</p> dan seterunya. Bagaimana sudah mulai mengerti ? mudah bukan hhehe ..
     Kalau kita membuat paragraf, html akan otomatis membuatkan spasi sebelum dan setelahnya sehingga ada jarak. Kalau kalian rasa jaraknya kurang banyak atau kalian ingin menambahkan jarak, kalian bisa menambahkan tag bantuan yaitu <br> dan <hr> br itu untuk membuat baris baru dan hr itu untuk membuat garis horizontal.
Pelajari Juga :
Kita coba menambahkan tag <br> dan <hr> contohnya seperti ini :

<!DOCTYPE html>
<html>
<head>
            <title>Paragraf HTML</title>
</head>
<body>

<p>Ini adalah paragraf 1 </p>
<br>
<p>Ini adalah <br> paragraf 2</p>
<hr>
</body>
</html>

     Bagaimana terlihat perubahannya sekarang bukan ? saya harap sahabat semua sudah mulai mengerti dasar tentang bagaimana cara kerja html itu. Tag selanjutnya yang akan kita bahas adalah tag <b></b>, <i></i>, <u></u> kalian sudah bisa menebak fungsi-fungsi dari tag ini, yaitu tag <b> untuk BOLD dan <i> untuk ITALIC kemudian <u> untuk UNDERLINE. Contoh penggunaannya seperti ini :

<!DOCTYPE html>
<html>
<head>
            <title>Paragraf HTML</title>
</head>
<body>

<p>Ini adalah paragraf 1 </p>
<br>
<p>Ini adalah <br> paragraf 2</p>
<hr>

<p><b>Selamat datang</b> <i>di kuliah pemrograman web 1</i></p>
<p><u>Nama saya adalah Resha alviana Muharam</u></p>
</body>
</html>


Sekarang kita lihat hasil di browsernya adalah seperti ini

lupacode - paragraf


     Kalau kalian ingin membuat paragraf yang memiliki makna, misalkan di dalamnya ada penekanan atau misalkan di dalam sebuah text itu penting, kalian bisa menggunakan tag <strong></strong>, & <em></em> em ini adalah singkatan dari empesize atau penekanan jadi em itu digunakan untuk membuat penekan yang kuat di dalam text dan untuk <strong> itu memberikan penekanan yang lebih kuat lagi. Hasilnya em itu membuat font menjadi miring seperti italic sedangkan strong itu membuat text menjadi tebal seperti bold. Contoh penggunaanya seperti ini :

<!DOCTYPE html>
<html>
<head>
            <title>Paragraf HTML</title>
</head>
<body>

<p>Ini adalah paragraf 1 </p>
<br>
<p>Ini adalah <br> paragraf 2</p>
<hr>

<p><b>Selamat datang</b> <i>di kuliah pemrograman web 1</i></p>
<p><u>Nama saya adalah Resha alviana Muharam</u></p>
<hr>

<p><strong>Pengumuman.</strong> Kuliah pemrograman web 1, senin 27 maret 2017 <em>ditiadakan!</em></p>
</body>
</html>

Dan kita lihat hasilnya adalah seperti ini

lupacode - paragraf strong


      Kita lihat, pengumuman dan ditiadakan menjadi cetak miring. Efeknya sama dengan italic dan bold tapi pada text pengumuman dan ditiadakan ini mempunya makna penekan yang berbeda tidak seperti pada tag <b> atau <i> Jika kita lihat, saya sudah membuat tiga paragraf dan agar tidak lupa sebaiknya kita kasih komentar dengan tag <!-- - -> sehingga menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
            <title>Paragraf HTML</title>
</head>
<body>

<!-- contoh penggunaan tag p, br dan hr -->
<p>Ini adalah paragraf 1 </p>
<br>
<p>Ini adalah <br> paragraf 2</p>
<hr>

<!-- contoh penggunaan tag b, i dan u -->
<p><b>Selamat datang</b> <i>di kuliah pemrograman web 1</i></p>
<p><u>Nama saya adalah Resha alviana Muharam</u></p>
<hr>

<!-- contoh penggunaan tag strong dan em -->
<p><strong>Pengumuman.</strong> Kuliah pemrograman web 1, senin 27 maret 2017 <em>ditiadakan!</em></p>
</body>
</html>

      Baiklah saya rasa cukup untuk tutorial pembahasan Belajar HTML Bagian 5 ini yaitu tentang Penggunaan tag Paragraf, kemudian kita akan masuk kedalam pembahasan yang selanjutnya yaitu Belajar HTML dan CSSBagian 6

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon