Ditulis oleh Miftahul Fuji Handoko  
Membuat Paragraf dan Judul - Belajar Bahasa HTML -  

Sudah lama rasanya saya tidak melajutkan tutorial belajar bahasa html, maaf jika sobat sekalian menunggu begitu lama. Untuk mengobati rasa kangen sobat semua tentang belajar bahasa html, kali ini saya akan membahas cara membuat paragraf dan judul pada bahasa html. Sekeder pengetahuan bagian Paragraf dan judul termasuk pengetahuan yang penting untuk dipelajari, buat apa kita membuat blog atau website tetapi tidak memiliki paragraf dan judul

Jika saya analogikan seperti membuat kue, untuk membuat 'kue' paragraf tentu kita harus tahu bahan-bahannya bukan? Untuk membuat 'kue' paragraf bahan-bahan yang dibutuhkan hanyalah <p>, sedangkan untuk judul kita akan membutuhkan <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setelah bahan-bahannya kita ketahui maka kita akan mulai membuat 'kue'nya. Masih ingat kan struktur html itu seperti apa? yap seperti hamburger, maka untuk membuat 'kue' paragraf ini kalian akan menjepit isi dari paragraf kalian dengan bahan yang telah kalian ketahui sebelumnya yaitu <p> dan </p>. 

Bayangkan jika kalian akan bercerita mengenai pengalaman kalian liburan ke pantai. Tentunya paragraf yang akan kalian buat tidak begitu jauh dari apa yang kami tulis berikut ini,

"Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer. Kami pergi kesana karena diajak oleh Ayah untuk melepas penat. Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai disana pukul 11 siang.

Sesampainya disana kami langsung mencari restoran karena kami semua sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap semalam di hotel dan pulang keesokan harinya."

Untuk membuat paragraf seperti diatas maka kita tulis struktur html dasar yaitu <html>, <head>, dan <body> lalu kita masukkan bahan untuk membuat paragraf yaitu <p> lalu masukkan isinya, seperti berikut :


<html> 
       <head> 
          <title>Belajar Membuat Paragraf</title> 
       </head> 
       <body> 
            
        <p> 
      "Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.  
      Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.  
      Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai  
     disana pukul 11 siang. 
    </p> 
      <p> 
     Sesampainya disana kami langsung mencari restoran karena kami semua  
      sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang  
    telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung  
       menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan  
       bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah  
     menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada  
      pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari  
       terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap  
     semalam di hotel dan pulang keesokan harinya." 
       </p>     
    
      </body> 
   </html>  


 Jika sobat memperhatikan kode html diatas, karena contoh paragraf terdiri dari dua paragraf maka kode yang dibuat pun harus menggunakan dua <p> dan dua </p>. Kalian dapat mencoba kode diatas ke dalam papan tulis yang disediakan dibawah. Lalu bagaimana agar paragraf yang kalian tampilkan memakai huruf miring semua seperti pada contoh diatas? Untuk membuat tulisan miring atau cetak tebal, atau bergaris bawah kalian harus mengetahui bahan tambahan yang diperlukan, yaitu <i>, <b>, dan <u>. Masing-masing tag ini merupakan kepanjangan dari italic (huruf miring), bold (cetak tebal), dan underline (garis bawah). Cara memakai bahan-bahan ini bagaimana? Sama seperti hamburger kita, dijepit saja isinya, lihat kode dibawah ini :
   <html>  
   <head>  
  <title>Belajar Membuat Paragraf</title>  
   </head>  
  <body>  
 
 <p>  
  <i>  
  "Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.   
  Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.   
 Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai   
  disana pukul 11 siang.  
 </i>  
  </p>  
  <p>  
 <i>  
  Sesampainya disana kami langsung mencari restoran karena kami semua   
 sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang   
  telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung   
 menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan   
  bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah   
  menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada   
  pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari   
  terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap   
  semalam di hotel dan pulang keesokan harinya."  
  </i>  
  </p>      
 
  </body>  
  </html> 
 Dalam membuat paragraf tentu kalian sewaktu-waktu akan membutuhkan paragraf yang rata kiri, rata kanan, rata tengah, dan rata kanan kiri. Untuk membuat ini kalian akan membutuhkan atribut yang bernama "align". Ada 4 nilai align, yaitu left (rata kiri), right (rata kanan), centre (rata tengah), dan justify (rata kanan kiri). Sekarang lihat kode dibawah untuk cara pemakaian atribut ini :
 <p align="right">  
  Sesampainya disana kami langsung mencari restoran karena kami semua   
  sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang   
 telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung   
  menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan   
  bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah   
 menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada   
  pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari   
 terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap   
 semalam di hotel dan pulang keesokan harinya.  
  </p>  

Sesampainya disana kami langsung mencari restoran karena kami semua sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap semalam di hotel dan pulang keesokan harinya.

Untuk menjadikannya rata kiri atau tengah tinggal mengganti kode "right" menjadi "left" atau "centre".

Judul dari paragraf atau Heading dalam bahasa Inggris menggunakan bahan-bahan yang telah disebutkan di awal tulisan yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. <h1> adalah judul utama dan paling besar sedangkan <h6> adalah yang paling kecil. Contoh penulisan judul paragraf dapat kalian lihat dibawah.

  <h1>Contoh Judul Paragraf</h1>  
  <h2>Contoh Judul Paragraf</h2>  
  <h3>Contoh Judul Paragraf</h3>  
  <h4>Contoh Judul Paragraf</h4>  
  <h5>Contoh Judul Paragraf</h5>  
   <h6>Contoh Judul Paragraf</h6>  

<h1>Contoh Judul Paragraf</h1>
<h2>Contoh Judul Paragraf</h2>
<h3>Contoh Judul Paragraf</h3>
<h4>Contoh Judul Paragraf</h4>
<h5>Contoh Judul Paragraf</h5>
<h6>Contoh Judul Paragraf</h6>

Kalian dapat melihat perbedaan keenam judul tersebut dengan menuliskannya di papan tulis.

Pada bagian penjelasan tag dijelaskan atribut-atribut lain yang berkaitan dengan paragraf dan judul. Kalian dapat menemukannya secara lengkap disana.


Demikian tutorial pembahasan cara membuat paragraf dan judul pada html. Semoga bermanfaat bagi kalian yang sedang belajar bahasa html, untuk tutorial yang lainnya saya akan membahas pada lain kesempatan.





sumber : hxxp://klikbelajar.com/pembuatan-situs/html/paragraf-dan-judul.php


4.5

Leave a Reply