Selasa, 15 September 2015

Tutorial HTML Dasar : 5. Headings dan Paragraphs

19.38


Setelah sebelumnya belajar tentang Mengenal apa itu elemen dan atribut pada HTML, jika belum silakan klik linknya, maka sekarang kita akan belajar mengenal heading terlebih dahulu.

Headings

Headings adalah tag yang digunakan apabila ada suatu kata penting atau semacam judul dalam HTML. Tapi, perlu diingat, banyak yang salah menggunakan headings ini, biasanya ada yang menggunakan ini untuk memperbesar kata dan menebalkannya atau Bold. Itu salah kaprah sobat, Headings ini digunakan untuk sebuah heading atau kata awal seperti judul dari teks. Headings ini ada 6 mulai dari <h1>, <h2>,<h3>,<h4>,<h5>, dan <h6>. Tag headings ini juga harus dipilih sobat, jika <h1>, ini adalah kata yang paling penting. Sebaliknya <h6> ini untuk kata yang penting juga, tapi setelah tag heading yang lain.

Tag headings beda dengan tag title yah, karena kalau title itu, judul web atau blognya bukan untuk judul artikel sobat. Untuk tambahan Pengetahuan sahabat, saya kasih tahu tag tambahan yaitu tag garis horizontal <hr>. Tag ini tidak ada penutupnya seperti yang sudah saya jelaskan pada postingan sebelumnya, saya akan berikan contoh untuk latihan sobat sekalian :

<!doctype html>
<html>
     <head>
           <title>Belajar Headings</title>
     </head>
     <body>
           <h1>ini adalah headings</h1>
           <hr>         
           <h2>ini adalah headings</h2>
           <hr>
           <h3>ini adalah headings</h3>
           <hr>
           <h4>ini adalah headings</h4>
           <hr>
           <h5>ini adalah headings</h5>
           <hr>
           <h6>ini adalah headings</h6>
     </body>
</html>


Bisa kita lihat setelah kita coba contoh diatas, headings yang paling penting berukuran lebih besar, dan setelah heading ada sebuah garis horizontal. Nah sekarang kita lanjut ke paragraphs yaaa...

Paragraphs

Paragraphs adalah sebuah tag untuk membuat paragraf di sebuah file html kita. Tag paragraphs seperti ini "<p>". Nah , sekarang pada tau kan tag paragraf itu tandanya apa, sebenarnya di pembahasan sebelumnya saya sering posting tentang "<p>" ini. Tag paragraphs ini akan otomatis mengosongkan baris atas dan bawahnya. Oh iya hampir lupa, tag paragraphs ini akan mengabaikan spasi yang berlebih dan hanya menampilkan satu spasi saja. Contoh :

<!doctype html>
<html>
     <head>
           <title>Belajar Paragraphs</title>
     </head>
     <body>
           <p>Sedang     belajar      paragraphs</p>      </body>
</html>
coding paragraphs pakai spasi


tampilan paragraphs pakai spasi

 Tag paragraf juga mengabaikan enter. Contoh :


 <!doctype html>
<html>
     <head>
           <title>Belajar Paragraphs</title>
     </head>
     <body>
           <p>Sedang    
                 belajar    
                 paragraphs</p>      </body>
</html>
coding paragraphs pakai enter


Hasilnya sama kan ??. Baik saya akan tambah pengetahuan HTML sahabat dengan tag baru yaitu "<br>". <br> adalah tag break line atau garis baru. Tag <br> ini tanpa penutup ya sobat. Dan satu lagi tag <pre>. Tag <pre> ini adalah preformatted text. Jadi setiap elemen atau isi dari tag ini akan diikuti sesuai tulisan di htmlnya. Masih bingung penjelasannya, gini aja deh, kan kalo tag paragraphs itu akan mengabaikan spasi yang berlebih dan enter. Tapi, kalau tag <pre> ini akan mengeluarkan elemen sesuai yang kita tulis di text editor kita dan biasanya fontnya itu akan berubah menjadi courier. Contoh :



Tuh kan, tag <pre> ini akan mengikuti gaya tulisan kita di text editor. Tag <pre> ini sangan jarang sekali digunakan karena mengikuti tulisan kita di text editor atau elemen kita. Jangan lupa pakai tag penutup di tag <pre> ini.

Berarti kita sudah mempelajari beberapa tag dari tadi, mari kita lihat tag apa saja :

<h1>...<h6> : Headings<hr> : Horizontal Line<p> : paragraphs<br> : line break / garis baru<pre> : preformatted text
 Terima kasih telah membaca postingan saya. maaf bila ada kesalahan dalam apapun di blog ini, silakan komentar saja di bawah. Semoga bermanfaat sobat. Jangan lupa mampir lagi yaa....

0 komentar

Diberdayakan oleh Blogger.