DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Html # Membuat Heading Dan Paragraf Html

advertisement
Membuat Heading dan Paragraf

Pada artikel sebelumnya kita telah belajar tentang elemen-elemen html.
Pada artikel ini kita akan belajar membuat sebuah heading dan paragraf.
mengetahui penggunaan heading sangatlah penting dalam membangun website yang ramah bagi mesin pencarian (google bing, yahoo dan lainnya).

Apa Itu Heading?

Heading adalah elemen html yang berfungsi untuk menunjukan bagian terpenting dari sebuah halaman web.
Heading dibuat menggunakan tag <H1> sampai <H6>.
Semakin kecil angka dibelakang huruf H, semaking peting bagian tersebut di halaman web.
Khusus untuk tag <H1>penggunaanya hanya boleh satu kali di satu halaman web dan biasanya digunakan untuk membungkus judul artikel atau nama website itu sendiri.
Hal ini terkait dengan yang namanya optimasi seo on page.

Membuat Heading

Membuat elemen heading pada halaman home atau beranda website

Jika kita ingin mengimplementasikan heading tag pada halaman beranda atau home.
Maka aturannya adalah gunakan <h1> untuk judul website dan <h2> untuk list atau feed artikel.
Contohnya seperti kode berikut,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
        <h1>Deretcode.com : Webiste tutorial</h1>
	<span>Daftar Artikel</span><hr/>
	<h2>Tutorial html</h2>
	<h2>Tutorial css</h2>
	<h2>Tutorial javascript</h2>
	<h2>Tutorial php</h2>
    </body>
</html>
Hasilnya,
Membuat elemen heading pada halaman beranda

Membuat elemen heading pada halaman postingan atau artikel

Jika kita ingin mengimplementasikan heading tag pada halaman artikel.
Maka aturannya adalah gunakan <h1> untuk judul artikel,  <h2> untuk subjudul, <h3> untuk subjudul dari <h2> dan seterusnya.
Contoh kode html seperti berikut,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar Html Dasar</title>
    </head>
    <body>
        <span>Deretcode.com : Webiste tutorial</span>
	<article>
	  <h1>Tutorial Html</h1>
	  <p>Ini Adalah Tutorial Html</p>
	  <h2>Apa Itu Html?</h2>
	      <p>Html adalah struktur halaman web</p>
	  <h2>Cara Membuat Html</h2>
	      <h3>Tulis kode html</h3>
	      <h3>Buka simpan file</h3>
	      <h3>Buka browser</h3>
	</article>
    </body>
</html>
Hasilnya,
Penggunaan elemen heading pada halaman artikel

Apa Itu Elemen Paragraf?

Paragraf adalah elemen yang berisi teks kalimat yang dibungkus menggunakan tag <p>.
Biasanya elemen ini digunakan untuk membuat paragraf pada sebuah artikel.
Contoh paragraf

Membuat Elemen Paragraf

Untuk membuat elemen paragraf caranya cukup mudah tinggal tulis teks paragraf didalam elemen <p>.
Contohnya seperti kode berikut,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
    <article>
        <h1>Apa Itu Paragraf</h1>
	<p>Paragraf adalah kumpulan kalimat yang biasanya mempunyai satu ide pokok dan cara penulisannya sedikit menjorok ke bagian dalam atau menggunakan garis baru. Nama lain dari paragraf adalah alinea.</p>
	<p>Paragraf terdiri dari beberapa jenis, mulai dari jenis paragraf berdasarkan isinya fungsinya dan juga peletakan gagasan utama dari sebuah tulisan.</p>
	<p>Paragraf juga mempunyai syarat, fungsi, ciri dan unsur-unsur yang akan kita bahasa dalam artikel singkat ini.</p>
    </article>
    </body>
</html>
Kenapa harus harus pake elemen <p>, bukannya bisa juga pake elemen<div>?
Sebenarnya tidak diharuskan, ini hanya saran saja.
Memang hasilnya akan terlihat sama saja, namun jika kita menggunakan tag <p> maka kita memberitahukan kepada mesin pencarian (google,yahoo, bing dll) bahwa isi dari elemen tersebut adalah paragraf.
Berbeda halnya ketika kita menggunakan tag <div> yang penggunaannya bersifat general, maka mesin pencarian butuh sedikit usaha untuk mengidentifikasi isi dari elemen tersebut. 

Tag pendukung elemen paragraf

Untuk membuat paragraf, ada beberapa elemen pendukung lainnya. Septi untuk membuat tulisan tebal, miring, garis bawah dan lain-lain.

Menebalkan tulisan

Untuk membuat menebalkan teks, kita bisa menggunakan tag <b> ,
Contohnya,
<p>Apa Itu <b>Paragraf</b></p>
Membuat teks tebal

Membuat tulisan miring

Untuk membuat teks miring kita bisa menggunakan tag <i>
Contohnya,
<p>Apa Itu <i>Paragraf</i></p>
Mem buat teks miring

Membuat garis bawah

Untuk membuat teks bergaris bawah kita bisa menggunakan tag <u>
Contohnya,
<p>Apa Itu <u>Paragraf</u></p>
Membuat teks bergaris bawah

Membuat baris baru.

Untuk membuat baris baru pada teks, kita bisa menggunakan single tag <br/>
Contohnya,
<p>Apa Itu <br/>Paragraf</p>
Membuat baris baru

Dan masih banyak tag teks formatting lainnya yang bisa kita gunakan untuk membuat paragraf yang informatif.

Sampai disini tutorial heading dan paragraf di html. Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis dikolom komentar.
advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat Heading Dan Paragraf Html"

Silahkan berkomentar dengan baik dan bijak!