2. Tag Dasar HTML

File html pada umumnya disimpan menggunakan ekstensi .html
seperti yang kita ketahui bahwa html digunakan untuk membuat sebuah tampilan website. didalamnya ada tabel, paragraf, teks tebal, dll.
Untuk membuat tabel, maka diperlukan tag <table>, untuk membuat paragraf diperlukan tag <p>.

langsung saja ya, silahkan dilihat kode index.html tadi

<!DOCTYPE html>
<html>
	<head>
		<title>Judul Halaman</title>	
	</head>
	
	<body>	
		<h2>Selamat Datang</h2>
		<p>Halo Guys, apa kabar hari ini?</p>
		<p>Pastinya kabar baik ya... Ayo tetap semangat</p>	
	</body>
</html>

 

Hasilnya:

Penjelasan singkatnya:

No Keterangan
1 <!DOCTYPE...>

Ditulis paling atas yang menunjukkan jenis dokumen dan versi HTML.

2 <html>

Tag ini merupakan tag utama pembuka HTML harus ditulis dibagian atas, dan ditutup di bagian bawah. Tag html berisi elemen dokumen HTML yang lain, misalkan head, title, body, dll.

3 <head>

Tag ini berfungsi untuk menempatkan header dokumen, tag header tidak ditampilkan didalam halaman web, misalnya tag title, link, style, keyword, description, dll.

4 <title>

Tag <title> harus berada dalam tag <head> dan berisi judul dokumen.

5 <body>

Semua yang ingin ditampilkan dalam halaman web ada di dalam tag body, misalnya <h1>, <div>, <p>, <b>, dll.

6 <h2>

Menghasilkan teks dengan ukuran heading2, h1 lebih besar, h3, h4, dst ukuran lebih kecil.

7 <p>

Tag ini untuk menuliskan paragraf dalam dokumen HTML.

Cukup mudah bukan? sekarang kami ingin menunjukkan beberapa tag penting dalam HTML. Tag2 dibawah ini sangat sering digunakan dalam website. Untuk lebih jelasnya silahkan dilihat dan di ketik ulang di editor sublime, beri nama file tag_dasar.html dan jangan copas karena dengan mengetik sendiri kode HTML, akan membuat kita menjadi lebih mudah memahami bahasa ini.

<!DOCTYPE html>
<html>

   <head>
      <title>Kumpulan tag dasar HTML yang sering digunakan</title>
   </head>
   
   <body>
      <h1>Ini adalah heading 1, teks besarrrr</h1>
      <p>
         Ini adalah paragraf pertama, bisa berisi teks yang panjang.
         <br />
         Untuk ganti baris menggunakan tag br <br />
         Untuk ganti baris menggunakan tag br <br />
         Untuk ganti baris menggunakan tag br
      </p>
      <p>
         Ini adalah paragraf kedua, juga bisa berisi teks yang panjang.
         <br />
         Untuk ganti baris menggunakan tag br <br />
         Untuk ganti baris menggunakan tag br <br />
         Untuk ganti baris menggunakan tag br
      </p>

      <center>
         <p>Ini adalah paragraf ketiga dimana teks ditampilkan ditengah</p>
      </center>
      <hr />
      Untuk membuat garis horizontal menggunakan tag hr

      <p>Tag br dan tag hr tidak memiliki pasangan, karena tidak ada teks/elemen didalamnya, jadi cukup ditulis br atau hr</p>

      <h3>Ini adalah heading 3, teks agak besar dikit</h1>
      <p>Teks tebal menggunakan tag b <b>saya tebal</b> atau tag strong <strong>saya tebal</strong></p>
      <p>Teks miring menggunakan tag i <i>saya miring</i> atau tag em <em>saya miring</em></p>
      <p>Teks garis bawah menggunakan tag u <u>saya underline</u></p>

   </body>
   
</html>

 

BUka browser http://localhost/belajar_html/tag_dasar.html Hasil kode diatas adalah spt dibawah ini:

Demikian materi tag dasar HTML, cukup mudah bukan. Untuk tag penting lainnya akan dibahas pada materi selanjutnya dibagian layout halaman.

Yuks ke materi berikutnya...