Heading, Paragraph dan Line Break

Kemarin kita telah belajar tentang tag – tag dasar yang menyusun sebuah web (bagi yang ingin membacanya klik ini ). sekarang kita akan sama – sama mempelajari apa itu heading, paragraph, link dan image. Mari kita bahas satu persatu.

Heading bisa kita sebut juga sebagai judul, di dalam judul biasanya terdapat sub judul lagi dan terus seperti itu. Maka dalam tag html judul pertama kita dapat mendeskripsikannya diantara “<h1>” dan “</h1>”, sub judul nya dengan “<h2>” dan “</h2”>, dan seterusnya.

Buat tagnya seperti yang kita bahas kemarin

<html>
 <body>
  <h1>Judul 1</h1>
  <h2>Judul 1.1</h2>
  <h3>Judul 1.1.1</h3>
 </body>
</html>

Simpan di notepad ato editor html lainnya (jika lupa cara save filenya, Anda bisa melihat postingan kemarin ). Kemudian hasilnya kira – kira akan seperti gambar di bawah :

Kita biasanya menemukan dalam sebuah web terdapat artikel / tulisan dan tak jarang juga kita menemukan paragrap. Nah bagaimana kita bisa menambahkan paragrap? Dalam tag html kita perlu menuliskan teks paragraf diantara <p> dan </p>. Lihat contoh dibawah ini :

<html>
 <body>
  <p>paragraf 1</p>
  <p>paragraf 2</p>
  <p>paragraf 3</p>
 </body>
</html>

Jangan lupakan end tag (</p>), kebanyakan dari browser dapat menampilkan paragraf meskipun kita tidak menyertakan end tag pada akhir paragraf, akan tetapi ada baiknya kita tetap menyertakannya guna untuk menghindari error. Simpan dengan ekstensi *.html (nama file bebas). Kemudian lihat hasilnya dengan menggunakan browser kesayangan😀

tag <br> disini berarti juga sebagai break, yaitu menempatkan posisi kursor kebawah (membuat garis baru). Perhatikan contoh dibawah ini :

<html>
 <body>
  <p>Ini adalah<br />sebuah para<br />graf dengan menggunakan break</p>
 </body>
</html>

Seperti biasa kemudian save file nya dengan ekstensi *.html dan lihat hasilnya.

Segitu dulu ya😀, mudah – mudahan bermanfaat bagi yang baru belajar. Jika ada saran atau kritik silahkan tinggalkan komentar. Kita sama – sama belajar ^_^.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s