Estimasi Waktu Baca: 6 menit

Pemanasan

Pada artikel sebelumnya kita dapat menentukan dan mengatur style dari suatu elemen dengan mengacu pada jenis elemennya.

Namun ada masalah di sini, bagaimana jika hanya elemen tertentu yang memiliki style berbeda dari yang lain dan bagaimana juga bila style yang sama dapat diterapkan di berbagai elemen?

Nah di sinilah peran dari atribut id dan class dibutuhkan.

Untuk mengetahui fungsi dari kedua atribut ini mari simak pembahasan berikut.

Mengenal Id di HTML

Atribut id berfungsi untuk menentukan identitas unik suatu elemen. Jadi nilai yang diberikan haruslah unik, unik di sini artinya kita tidak diizinkan membuat lebih dari satu id dengan nilai yang sama.

Atribut id sering digunakan untuk menunjuk ke nama id pada lembar gaya (style sheet). Hal ini juga dapat digunakan Javascript untuk mengakses dan memanipulasi elemen dengan nama id tertentu.

Cara mendefinisikan style untuk id tertentu adalah dengan menjadikannya sebagai selector menggunakan tanda pagar atau hash (#) diikuti dengan nama atau nilai dari atribut id.

Untuk lebih jelasnya lihat contoh penerapan berikut


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
	<style type="text/css">
		#judul{
			background-color: black;
			color: white;
			padding: 5px;
		}
	</style>
</head>
<body>		
	<h1 id="judul">Tutorial Id HTML</h1>
</body>
</html>

Keluaran:

Membuat Bookmark dengan Id dan Link

Bookmark memungkinkan pembaca untuk lompat menuju bagian tertentu pada halaman website. Bookmark akan sangat berguna dan wajib hukumnya bila halaman website yang kita buat terlampau panjang.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
</head>
<body>
	<a href="#html">Tutorial HTML</a> ||
	<a href="#css">Tutorial CSS</a> ||
	<a href="#javascript">Tutorial Javascript</a>
	<h1 id="html">Tutorial HTML</h1>
	<p>
		Lorem ipsum dolor sit amet, duo putant constituam et, cu vis ludus tempor democritum. Vel te affert blandit. Vis te decore appetere lobortis, eos te nostrum vituperatoribus, nostro reprehendunt mediocritatem ne qui. Dicat facer et per, an nostrud perpetua cotidieque his, qui gloriatur complectitur eu. Duo at veritus cotidieque, stet impetus pertinacia at qui. Ullum minim iracundia ut nam, per id suas graece mnesarchum.

		Ut has ferri eleifend, omnis urbanitas comprehensam cu cum. Ad quo purto prodesset interesset. Tale labore no mel. Suas hinc veri ne sed, duo nibh quodsi eligendi an. Scaevola repudiare necessitatibus ex mea, vix graecis quaerendum at. Usu meis volutpat voluptatum ut, iudico equidem eos no.

		Pro modus munere ei, vero autem ornatus sit te. Verear periculis usu in, aperiam aliquam qui ut. Duo cu doming mollis, mel zril integre at. Homero mediocrem te duo, mazim atomorum ad cum, ex tibique intellegat his. At sit unum reprehendunt.

		Aliquando honestatis usu te, prompta disputationi ius cu, diceret habemus ut mel. Iudicabit molestiae consequuntur his an. No vis partem nonumes antiopam, no illud choro erroribus vel. Eos ad wisi causae deterruisset. Vim timeam principes reformidans ei, cu omnis feugait detracto per. Ea mea consul reformidans, pro et dictas dissentiet. Te idque debet deterruisset vim.

		Percipit insolens at mel, quo cu quem prima putant. In iracundia comprehensam pro. Pro ut aperiam recusabo. Et mei prima consul albucius, vide nominavi incorrupte eos eu, ut has suscipit nominati. Nam enim dicta dolores no. Mucius mnesarchum est id.
	</p>
	<h1 id="css">Tutorial CSS</h1>
	<p>
		Lorem ipsum dolor sit amet, duo putant constituam et, cu vis ludus tempor democritum. Vel te affert blandit. Vis te decore appetere lobortis, eos te nostrum vituperatoribus, nostro reprehendunt mediocritatem ne qui. Dicat facer et per, an nostrud perpetua cotidieque his, qui gloriatur complectitur eu. Duo at veritus cotidieque, stet impetus pertinacia at qui. Ullum minim iracundia ut nam, per id suas graece mnesarchum.

		Ut has ferri eleifend, omnis urbanitas comprehensam cu cum. Ad quo purto prodesset interesset. Tale labore no mel. Suas hinc veri ne sed, duo nibh quodsi eligendi an. Scaevola repudiare necessitatibus ex mea, vix graecis quaerendum at. Usu meis volutpat voluptatum ut, iudico equidem eos no.

		Pro modus munere ei, vero autem ornatus sit te. Verear periculis usu in, aperiam aliquam qui ut. Duo cu doming mollis, mel zril integre at. Homero mediocrem te duo, mazim atomorum ad cum, ex tibique intellegat his. At sit unum reprehendunt.

		Aliquando honestatis usu te, prompta disputationi ius cu, diceret habemus ut mel. Iudicabit molestiae consequuntur his an. No vis partem nonumes antiopam, no illud choro erroribus vel. Eos ad wisi causae deterruisset. Vim timeam principes reformidans ei, cu omnis feugait detracto per. Ea mea consul reformidans, pro et dictas dissentiet. Te idque debet deterruisset vim.

		Percipit insolens at mel, quo cu quem prima putant. In iracundia comprehensam pro. Pro ut aperiam recusabo. Et mei prima consul albucius, vide nominavi incorrupte eos eu, ut has suscipit nominati. Nam enim dicta dolores no. Mucius mnesarchum est id.
	</p>
	<h1 id="javascript">Tutorial Javascript</h1>
	<p>
		Lorem ipsum dolor sit amet, duo putant constituam et, cu vis ludus tempor democritum. Vel te affert blandit. Vis te decore appetere lobortis, eos te nostrum vituperatoribus, nostro reprehendunt mediocritatem ne qui. Dicat facer et per, an nostrud perpetua cotidieque his, qui gloriatur complectitur eu. Duo at veritus cotidieque, stet impetus pertinacia at qui. Ullum minim iracundia ut nam, per id suas graece mnesarchum.

		Ut has ferri eleifend, omnis urbanitas comprehensam cu cum. Ad quo purto prodesset interesset. Tale labore no mel. Suas hinc veri ne sed, duo nibh quodsi eligendi an. Scaevola repudiare necessitatibus ex mea, vix graecis quaerendum at. Usu meis volutpat voluptatum ut, iudico equidem eos no.

		Pro modus munere ei, vero autem ornatus sit te. Verear periculis usu in, aperiam aliquam qui ut. Duo cu doming mollis, mel zril integre at. Homero mediocrem te duo, mazim atomorum ad cum, ex tibique intellegat his. At sit unum reprehendunt.

		Aliquando honestatis usu te, prompta disputationi ius cu, diceret habemus ut mel. Iudicabit molestiae consequuntur his an. No vis partem nonumes antiopam, no illud choro erroribus vel. Eos ad wisi causae deterruisset. Vim timeam principes reformidans ei, cu omnis feugait detracto per. Ea mea consul reformidans, pro et dictas dissentiet. Te idque debet deterruisset vim.

		Percipit insolens at mel, quo cu quem prima putant. In iracundia comprehensam pro. Pro ut aperiam recusabo. Et mei prima consul albucius, vide nominavi incorrupte eos eu, ut has suscipit nominati. Nam enim dicta dolores no. Mucius mnesarchum est id.
	</p>
</body>
</html>

Keluaran:

Menggunakan Id pada Javascript

Selain digunakan sebagai penanda suatu elemen untuk menentukan style tertentu padanya. Atribut id juga sering digunakan sebagai penanda elemen yang nantinya elemen terkait akan dapat diakses dan dimanipulasi oleh Javascript.

Javascript dapat mengakses elemen dengan id tertentu menggunakan fungsi getElementById().


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class di HTML</title>
</head>
<body>
	<h1 id="judul">Manusia: Halo Dunia!</h1>
	<button onclick="sapaBalik()">Sapa balik!</button>

	<script type="text/javascript">
		function sapaBalik(){
			document.getElementById("judul").innerHTML = "Dunia: Oh Halo juga Manusia!";
		}
	</script>
</body>
</html>

Keluaran

Mengenal Class di HTML

Atribut class berfungsi untuk menentukan nama class dari suatu elemen. Berbeda dengan id yang bersifat unik, class diperbolehkan untuk digunakan oleh lebih dari satu elemen yang ditandainya.

Atribut class juga sering digunakan untuk menunjuk ke nama class pada lembar gaya (style sheet). Hal ini juga dapat digunakan Javascript untuk mengakses dan memanipulasi elemen dengan nama class tertentu.

Cara mendefinisikan style untuk class tertentu adalah dengan menjadikannya sebagai selector menggunakan tanda titik atau dot (.) diikuti dengan nama atau nilai dari atribut class.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
	<style type="text/css">
		.judul{
			background-color: blue;
			color: white;
			padding: 5px;
		}
	</style>
</head>
<body>		
	<h1 class="judul">Tutorial Class HTML</h1>
</body>
</html>

Keluaran:

Berbagi Class yang Sama

Karena kelas tidak bersifat unik maka kita diizinkan untuk menentukan banyak class dengan nilai yang sama untuk banyak elemen dalam dokumen HTML.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
	<style type="text/css">
		.judul{
			background-color: orange;
			color: white;
			padding: 5px;
		}
	</style>
</head>
<body>		
	<h1 class="judul">Tutorial HTML</h1>

	<h1 class="judul">Tutorial CSS</h1>

	<h1 class="judul">Tutorial Javascript</h1>	
</body>
</html>

Keluaran:

Menentukan Banyak Class dalam Satu Elemen

Kita diperbolehkan untuk menentukan lebih dari satu nilai atau nama class yang berbeda dalam satu elemen.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
	<style type="text/css">
		.judul{
			background-color: orange;
			color: white;
			padding: 5px;
		}
		.huruf{
			font-family: "Baar Sophia";
			font-style: italic;
		}
	</style>
</head>
<body>		
	<h1 class="judul huruf">Tutorial HTML</h1>
</body>
</html>

Keluaran:

Menggunakan Class pada Javascript

Selain digunakan sebagai penanda suatu elemen untuk menentukan style tertentu padanya. Atribut class juga sering digunakan sebagai penanda elemen yang nantinya elemen terkait akan dapat diakses dan dimanipulasi oleh Javascript.

Javascript dapat mengakses elemen dengan class tertentu menggunakan fungsi getElementsByClassName().


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
</head>
<body>
	<h1>HTML singkatan dari...?</h1>
	<p class="jawab">Hypertext Markup Language</p>

	<h1>CSS singkatan dari...?</h1>
	<p class="jawab">Cascading Style Sheet</p>

	<h1>PHP singkatan dari...?</h1>
	<p class="jawab">PHP: Hypertext Prepocessor</p>

	<button onclick="sembunyikan()">Sembunyikan Jawaban</button>

	<script type="text/javascript">
		function sembunyikan() {
			var jawaban = document.getElementsByClassName("jawab");
			for (var i = 0; i < jawaban.length; i++) {
				jawaban[i].style.display = "none";
			}
		}
	</script>
</body>
</html>

Keluaran: