Widodo

#HTML Dasar Part 3 - Pengertian Tag Paragraf dan Heading dalam HTML

Pengertian Tag Paragraf  dan Heading dalam HTML

Pengertian Tag Paragraf  dan Heading dalam HTML: Paragraf dan teks memegang peranan cukup penting dalam desain website. Oleh karena tu, kita perlu mengetahui tag dan aturan menulis kode HTML untuk membuat paragraf serta teks yang mernarik. Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML sederhana. Contoh penggunakan paragraf untuk membuat paragraf baru adalah sebagai berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Saya Sedang belajar Paragraf</title><!-- Judul -->
    </head>
<body>
     Asiknya saya belajar HTML dengan mudah (paragraf 1)
     Belajar bersama s-widodo.com (paragraf 2)
</body>
</html>

Demo

Kode diatas setalah kita simpan dan kita jalankan dibrowser makan Paragraf 1 dan 2 akan menyambung , Dengan bergitu kode HTML diatas pada dasarnya tidak menghasilkan tampilan berbeda dengan kode HTML dibawah ini :

<!DOCTYPE html>
<html>
    <head>
       <title>Saya Sedang belajar Paragraf</title><!-- Judul -->
   </head>
<body>
      Asiknya saya belajar HTML dengan mudah (paragraf 1) Belajar bersama s-widodo.com (paragraf 2)
</body>
</html>

Kalau kita ingin memisahkan dua baris teks itu, maka kita harus memberi tahu web browser bahwa keduanya harus dibuat terpisah. Salah satunya adalah membuat tag untuk paragraf.

HTML menyediakan tag khusus untuk membuat paragraf , yaitu dengan menggunakan tag <p> pada masing-masing baris teks dan lihat bagaiman di dalam jendelan browser anda saat ini jika penulan kode seperti dibawah ini :

 <!DOCTYPE html>
<html>
     <head>
         <title>Saya Sedang belajar Paragraf</title><!-- Judul -->
     </head>
<body>
    <p>Asiknya saya belajar HTML dengan mudah (paragraf 1)<p>
    <p>Belajar bersama s-widodo.com (paragraf 2)<p>
</body>
</html>

Demo

Maka kali ini kita akan melihat bahwa kedua paragraf diatas akan terpisah berada pada posisi masing-masing yaitu 1 teks dalam  baris. Setelah kita memahami apa itu tag <p> untuk membuat membuat baris paragraf sekarang kita bisa melanjutkan untuk membuat paragraf baru dengan cara lain untuk memisahkan  teks-teks dibaris yang berbeda-beda adalah dengan menggunakan tag <br> (break). Dengan demikian , Anda bisa menulis penggunakan tag <br> sebagai berikut ini:

<!DOCTYPE html>
<html>
    <head>
         <title>Saya Sedang belajar Paragraf</title><!-- Judul -->
    </head>
<body>
     Asiknya saya belajar HTML dengan mudah (paragraf 1)
     <br>
     Belajar bersama s-widodo.com (paragraf 2)
</body>
</html>

Demo

Jika kode HTML diatas ditampilkan pada jendela browser, maka hasilnya hampir sama dengan menggunkan tag <p>. Namun, pemisahan baris menggunakan tag <br> tidaklah dimaksudkan untuk membuat paragraf baru. Tag <br> hanya berfungsiuntuk membuat baris baru.Umumnya tag <br> diletakkan didalam tag <p>....</p>.

Di dalam sebuah paragraf. Terkadang kita ingin membuat penekanan pada bagian teks tertentu ini bisa dilakukan dengan berbagai cara, misalnya dengan menebalkan atau memiringkan teks tersebut. Ada beberapa metode untuk menebalkan atau memiringkan teks, namun umumnya dengan memanfaatkan tag emphasis (penekanan) yang terdiri dari 2 tag, yaitu:

  • <em> untuk memmiringkan teks
  • <strong> untuk menebalkan teks

Contoh penggunaan tag <em> dan <strong> didalam kode HTML.

<!DOCTYPE html>
<html>
    <head>
      <title>Saya Sedang belajar Paragraf</title><!-- Judul -->
    </head>
<body>
    <p>Asiknya saya belajar HTML dengan mudah menggunkan teks <em>miring</em> (paragraf 1)
      <br>
    Belajar bersama s-widodo.com dengan teks <strong>tebal</strong> (paragraf 2)</p>
</body>
</html>

Demo

Selain tag <em> dan tag <strong> anda juga bisa menggunakan tag <i> (italic) untuk memiringkan huruf dan tag <b> (bold) untuk menebalkan huruf.

Heading

Didalam HTML, struktur dokumen pun bisa dibuat menggunakan tag tertentu. HTML menyediakan tag khusus untuk membuat judul, atau didalam HTML lebih dikenal dengan istilah Heading. Heading dibuat terpisah dari paragraf karena tag heading biasanya digunakan untuk pembuatan juduldari suatu paragraf atau bagian dari teks yang dianggap sebagai judul.

Tag heading didalam HTML terdiri dari 6 jenis yang mewakili masing-masing tingkatan, yaitu mulai dari <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Tag heading ditampilkan secara default akan ditampilkan oleh web browser dengan huruf tebal (bold) dengan ukuran yang beragam. Tag header <h1> memiliki ukuran huruf paling besar, sadangkan tag <h6> berukuran terkecil.

berikut contoh penggunaan tag heading dalam HTML.

Demo

Dalam praktiknya, tag heading dikombinasikan dengan tag paragraf agar terbentuk struktur dokumen yang dibaca dan dipahami. berikut contoh struktur dokumen HTML sederhana menggunakan tag <p> dan beberapa tag heading.

<!DOCTYPE html>
<html>
    <head>
        <title>Saya Sedang belajar Paragraf & Heading</title><!-- Judul -->
    </head>
<body>
    <h1>Belajar Heading</h1>
       <p>Asiknya belajar HTML dengan mudah</p>
    <h3>Belajar HTML oleh s-widodo.com</h3>
      <p>S-widodo.com Digital Marketing adalah suatu layanan yang bergerak dibidang jasa pembuatan website di Lampung, solusi pembuatan website, berupa jasa web design, pembuatan corporate website, toko online, dll.<p>
</body>
</html>

Pengunaan tag umumnya digunakan untuk mewakili judul sebuah konten artikel / berita sehingga di anggap dapat mewakili keseluruhan konten(isi beita). Sekiranya itulah penggunaan tag Paragraf dan Heading dalam HTML. Semoga Artikel yang kami sampaikan bermanfaat bagi Anda yang saat ini masih belajar HTML Dasar. 



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing