/ / / Mengenal Tag, Elemen dan Atribut HTML yang Sering Digunakan

Mengenal Tag, Elemen dan Atribut HTML yang Sering Digunakan

TukaNgoding - Melanjutkan pembelajaran kita tentang HTML, pada artikel sebelumnya kita telah mengetahui struktur dasar dari HTML dan kali ini kita akan belajar mengenai apa itu Tag, Elemen dan Atribut HTML yang sering digunakan dalam membuat sebuah website.

Bagian-bagian pada sebuah elemen HTML
Bagian-bagian pada sebuah elemen HTML

Mengenal Tag Tag HTML

Tag dalam HTML merupakan sebuah kode khusus (markup) yang disisipkan di dalam simbol '<' dan '>', tag digunakan untuk memberitahu browser bagaimana suatu text akan ditampilkan apakah sebagai sebuah paragraf, daftar, tabel, atau text biasa. hampir semua tag dalam HTML memiliki tag penutup, contohnya tag <body> memiliki tag penutup </body>. untuk menambahkan tag penutup kita hanya cukup menambahkan garis miring '/' setelah simbol kurung siku pertama '<'.

Berikut format penulisan tag HTML :
<tag_pembuka>.......</tag_penutup>

Penulisan tag HTML tidak case sensitive jadi sobat bisa menggunakan hurup besar ataupun kecil dalam penulisan tag.

Beberapa tag yang sering digunakan dalam pembuatan website :
Tag
Keterangan
<html></html>
 kode awal pembuatan dokumen html
<head></head>
 tag yang akan menyediakan informasi mengenai dokumen
<title></title>
 tag yang akan menampilkan judul dari halaman pada browser ketika file dibuka
<body></body>
 tag yang berisi halaman konten yang akan ditampilkan pada browser ketika file di buka
<h1></h1>
heading tingkat pertama untuk judul website
<h2></h2>
heading tingkat kedua untuk sub judul 
<h3></h3>
heading tingkat ketiga untuk sub judul 
<h4></h4>
heading tingkat ke-empat untuk sub judul 
<p></p>
tag untuk membuat suatu paragraf
<i></i>
tag untuk memiringkan teks 
<b></b>
tag untuk menebalkan teks 
<u></u>
tag untuk menggaris bawahi teks 
<ul></ul>
unordered list, untuk membuat list tidak terurut 
<ol></ol>
ordered list, untuk membuat list secara urut 
<li></li>
tag list yang ada dalam tag <ul> dan tag <ol> 
<small>
tag untuk memperkecil ukuran teks
<img>
tag untuk menambahkan gambar/image 
<table></table>
tag awal untuk membuat tabel
<tr></tr>
table row, untuk membuat baris pada tabel 
<th></th>
table headings, sebagai header tabel 
<td></td>
table data, sebagai tempat mengisi data pada tabel 
<a></a>
tag untuk membuat suatu link
<form></form>
tag awal pembuatan formulir
<input/>
tag untuk membuat inputan pada formulir
<select></select>
tag untuk membuat opsi pilihan pada formulir
<option></option>
tag untuk mendefinisikan opsi-opsi yang ada pada tag select
<textarea></textarea>
tag untuk membuat sebuah textarea berupa inputan yang bisa lebih dari satu baris

Bagaimana jika lupa tag penutup ?
Umumnya browser akan mengabaikannya tetapi akan berpengaruh pada elemen html.


Mengenal Elemen HTML

Elemen dalam HTML merupakan suatu kesatuan antara tag html dengan objek didalamnya, misalnya ketika membuat sebuah paragraf.

<p>Ini adalah paragraf</p>

kode diatas merupakan elemen dari tag <p>

<a href='http://tukangoding.blogspot.com'>TukaNgoding Blog</a>

kode diatas merupakan elemen dari tag <a>

Kesalahan yang paling sering terjadi dalam penulisan kode html adalah kita sering lupa menuliskan tag penutup atau lupa menuliskan simbol '/' pada tag penutupnya sehingga berpengaruh pada elemen html. Misalnya seperti berikut :

<b>Ini hurup bold<br/><i>Ini hurup italic</i><br/><u>Ini hurup underline</u>

pada kode diatas tag <b> tidak memiliki tag penutup sehingga elemen tag <b> akan menjangkau seluruh elemen dibawahnya yaitu tag <i> dan tag <u> akan menjadi elemen tag <b> sehingga teks yang ada pada tag tersebut akan menjadi bold.

Mengenal Atribut HTML

Atribut pada HTML merupakan sebuah informasi tambahan pada suatu tag misalnya ukuran hurup, warna, dll. Penulisan atribut dimulai dengan menuliskan nama atribut diikuti simbol 'sama dengan' lalu nilai dari atribut tersebut yang diapit oleh tanda kutip (bisa kutip satu ataupun kutip dua).

 Penulisan Atribut :
<tag nama_atribut = "nilai_atribut"></tag>

Contoh :
<a href='http://tukangoding.blogspot.com/'>TukaNgoding Blog</a>

Pada kode diatas kode href merupakan atribut yang ada pada tag <a> dan 'http://tukangoding.blogspot.com/' merupakan nilai dari atribut href tersebut.

Tidak semua atribut bisa digunakan pada semua tag html tetapi hanya bisa pada tag-tag tertentu saja misalnya tag href hanya bisa digunakan pada tag <a> dan tag <link>.

Latihan

Sebagai latihan supaya lebih paham silahkan sobat coba kode HTML berikut pada Text Editor sobat lalu simpan dengan nama latihan_html.html

<!DOCTYPE html>
<html>
 <head>
   <title>Belajar HTML, Mengenal Tag, Elemen dan Atribut</title>
 </head>
 <body bgcolor='yellow'>
   <h1>Belajar HTML, Mengenal Tag, Elemen dan Atribut</h1>
   <b>Ini elemen tag 'b' </b><br/>
   <i>Ini elemen tag 'i' </i><br/>
   <u>Ini elemen tag 'u' </u><br/>
   <p>Ini sebuah paragraf, halaman ini mengandung atribut bgcolor pada tag 'body' <br/>untuk merubah warna background halaman.</p>
 </body>
</html>

Lalu buka file tersebut menggunakan browser kesayangan sobat, sehingga hasilnya akan seperti berikut :

Mengenal Tag, Elemen dan Atribut HTML
Mengenal Tag, Elemen dan Atribut HTML

Demikian artikel pembelajaran kita kali ini mengenai Mengenal Tag, Elemen dan Atribut HTML, silahkan sobat coba latihan diatas lalu pahami kode-kodenya. Semoga bermanfaat, salam TukaNgoding !