Tutorial HTML 3 - Judul dan Paragraf
















 


Sebelumnya saya sudah bahas sedikit cara membuat judul dan paragraf pada tutorial HTML pertama, namun itu hanya pengenalan saja. Sekarang saya akan coba bahas lebih detail lagi.

Judul

Judul atau heading merupakan elemen yang penting dalam pembuatan dokumen HTML. 
Judul ditentukan oleh tag <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Semakin besar nilainya, maka semakin kecil ukuran teks judulnya.

Coba peraktekan contoh di bawah

<html>
<body>
 
<h1>Ini Sebuah Judul</h1>
<h2>Ini Sebuah Judul</h2>
<h3>Ini Sebuah Judul</h3>
<h4>Ini Sebuah Judul</h4>
<h5>Ini Sebuah Judul</h5>
<h6>Ini Sebuah Judul</h6>
 
</body>
</html> 

Code HTML di atas akan menghasilkan seperti ini

html heading
















Judul sangatlah penting dalam dokumen HTML

Gunakan tag judul hanya untuk membuat judul, jangan menggunakannya untuk membuat teks tebal dan besar, karena mesin pencari menggunakan judul untuk mengindeks struktur dan isi konten dari halaman web kita.

Tag H1 memiliki ukuran teks yang paling besar seharusnya di gunakan untuk judul utama, di lanjutkan H2, dan seterusnya, semakin besar maka judul tersebut semakin kurang penting.

Paragraf

Untuk membuat sebuah dokumen pasti memerlukan paragraf, membuat paragraf pada HTML menggunakan tag <p> yang berarti paragraph.

Coba praktekan dan lihat hasilnya

<html>
<body>

<p>Ini sebuah paragraf</p>
<p>Ini sebuah paragraf</p>
<p>Ini sebuah paragraf</p>

</body>
</html>


Dari hasil kode HTML di atas, kita bisa lihat setiap menambahkan paragraf baru, maka secara otomatis akan terdapat baris kosong antara atas dan bawah paragraf.


Jangan lupa menambahkan tag penutup

<p>Ini sebuah paragraf
<p>Ini sebuah paragraf
<p>Ini sebuah paragraf

Walaupun kode di atas akan di tampilkan dengan benar oleh kebanyakan browser, tapi jangan pedulikan itu. Melupakan tag penutup dapat menghasilkan error atau hasil yang tidak di inginkan.

Catatan:  Versi HTML yang akan datang tidak akan mengijinkan untuk melewatkan tag penutup.

HTML Output

Kita tidak akan yakin bagai mana HTML akan ditampilkan, layar besar atau kecil, serta ukuran jendela akan membuat hasil yang berbeda.

Pada HTML kita tidak bisa mengubah output hanya dengan menambahkan jarak atau spasi lebih, serta baris baru lebih dari kode HTML yang kita buat.

Browser akan menghapus spasi serta garis baru yang berlebihan saat di tampilkan.

Spasi yang banyak hanya akan di tampilkan menjadi satu spasi saja, dan baris baru yang lebih juga hanya akan menjadi satu spasi saja, sedangkan baris baru antar paragraf tidak akan menghasilkan apa-apa.

Dari pada bingung, coba praktekan contoh di bawah, dan lihat hasilnya

<html>
<body>

<p>Spasi lebih.           spasi lebih.          spasi lebih.           spasi lebih.</p>
<p>
Baris baru lebih.



baris baru lebih.



baris baru lebih.



baris baru lebih.
</p>





<p>Baris baru lebih antar paragraf</p>

</html>
</html>

Pada contoh diatas, pada kode HTML paragraf pertama menggunakan spasi lebih banyak, dan hasilnya cuma menghasilkan satu spasi.
Paragraf kedua menggunakan baris baru yang lebih, tapi hanya menghasilkan spasi juga (satu spasi).
Jarak antara paragraf 2 dan 3 ditambahkan baris baru yang lebih, tapi tidak menghasilkan apa-apa.


Oke cukup dulu sampai di sini,  tidak usah terlalu panjang supaya tidak enek belajarnya. Kita lanjutkan pada artikel selanjutnya beserta penyelesaian masalah pada kode di atas.


coba kode html di sini




0 komentar:

Posting Komentar

 
© 2012 Alusplus | Blogger.com