Contents
Sebelum anda melangkah ke pembahasan lebih jauh, Perpusteknik.com akan membahas lebih detail apa itu tag? Apa itu atribut? dan apa itu elemen? sebab setiap kali menjalankan desain kode HTML, kita tag bisa lepas dari namanya Tag, Atribut dan elemen, karena struktur HTML terdiri dari ketiga bagian ini. Untuk itu perpusteknik.com akan membahasnya satu persatu :
1. Apa itu Tag?
Tag merupakan sebuah tanda yang akan memberitau web browser bahwa ini adalah Tag dari HTML, sebagaimana yang diketahui, bahasa HTML adalah bahasa yang digunakan oleh web browser dalam menampilkan halaman website. Sesuai dengan konsep bahasa dari HTML (HyperText Markup Language). Tag ini adalah bagian dari markup. Tanpa tag web browser akan menampilkan kode HTML dengan tulisan biasa saja. Contohnya perhatikan desain kode HTML berikut :
<strong> ini adalah tulisan tebal </strong> <br> <em> ini adalah tulisan miring </em> <br> <u> Ini adalah tulisan bergaris bawah </u> <br> Tulisan ini tidak memiliki tag HTML
[sc name=”iklan umum link”]
Dari source code di atas, anda melihat dari baris 1 sampai baris 3 terdiri dari tag HTML yang dimana baris 1 akan membuat tulisan menjadi tebal, baris 2 menjadi tulisan miring dan baris 3 membuat tulisan menjadi tulisan bergaris bawah. sedangkan baris ke 4 hanya akan menampilkan tulisan biasa. jika di generate pada web browser hasilnya akan menjadi seperti gambar dibawah :
oh ya, fungsi dari tag <br> sendiri adalah menjadikan setiap kalimat akan tampil di baris baru. Tanpa tag-tag inilah tulisan hanya akan menjadi tulisan biasa. Dengan menggunakan tag HTML akan membuat web browser paham dan mengerti seperti apa halaman website yang ingin anda tampilkan. Jika anda ingin mempelajari tag HTML beserta fungsinya anda dapat melihat tautan berikut : Tag-tag pada html beserta fungsinya. Untuk aturan penulisan dari tag sendiri ada tag yang mengharuskan untuk menulis tag pembuka dan tag penutup, contohnya <p> …… </p> dan ada juga tag tanpa harus menyertakan tag penutup contohnya tag <br> hal ini akan anda pelajari pada stage-stage selanjutnya di WebHTML, untuk saat ini, ambil dulu kesimpulan yang sederhana yang membuat anda nyaman memahami apa itu tag? Selanjutnya…
[sc name=”Iklan teknik sesuai konten”]
2. Apa itu Atribut?
Atribut merupakan informasi tambahan yang digunakan untuk mengelompokkan Tag pada kondisi tertentu, fungsi atribut biasanya di gunakan untuk pengelompokkan style CSS atau menjadikan Tag HTML lebih fungsional berdasarkan kebutuhan yang ingin di tampilkan di halaman website. Sebagai contohnya saya akan mencontohkan atribut HTML untuk pengelompokkan CSS :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.text-merah {color: red;}
.text-hijau {color: green;}
.text-biru {color: blue;}
</style>
</head>
<body>
<p class="text-merah"> Ini adalah tulisan berwarna merah </p>
<p class="text-hijau"> Ini adalah tulisan berwarna hijau </p>
<p class="text-biru"> ini adalah tulisan berwarna biru </p>
</body>
</html>
Dari desain kode HTML diatas, anda melihat di antara tag <body> …… </body> terdapat 3 elemen tag <p> …. </p>, tetapi setiap tag <p> …. </p> memiliki nilai atribut yang berbeda-beda. Inilah yang dimaksudkan atribut HTML di fungsikan untuk pengelompokkan CSS, dimana dengan CSS menjadikan kalimat yang berada di antara tag <p> ….. </p> membuat tulisan memiliki warna yang berbeda-beda walaupun memiliki tag HTML yang sama. Jika di generate di web browser, maka tampilannya akan menjadi seperti dibawah ini :
Contoh lain penggunaan atribut untuk membuat halaman web lebih fungsional adalah sebagai berikut :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="generate.php" method="get"> <p> Nama : <input type="text" name="nama_anda" required> </p> <p> Alamat : <input type="text" name="alamat_anda" required> </p> <p> <input type="submit" value="Proses"> </p> </form> </body> </html>
Desain Kode HTML di atas memiliki Tag <form> …. </form> dan di dalam tag tersebut terdapat Tag <input ….. >, tag ini memiliki berbagai macam atribut yang menjadikan form menjadi lebih fungsional. dimana dengan menulis kode HTML di atas, web browser akan mengerti bahwa saya ingin menyediakan halaman web, di dalam halaman tersebut terdapat formulir isian yang ditujukan kepada pengunjung bahwa mereka harus mengisi nama dan alamat, form tersebut tidak boleh di kosongkan. Jika dikosongkan maka data tidak akan di proses. hasil generate yang dilakukan oleh web browser dapat dilihat digambar berikut :
[su_note]
Catatan :
Jika anda merasa sulit memahami kode-kode HTML diatas, ambil dulu kesimpulan sederhana yang membuat anda nyaman memahami apa itu atribut?
[/su_note]
3. Apa itu Elemen?
Elemen merupakan kumpulan dari Tag dan Atribut. Dalam penulisan kode HTML, seorang web desain dan web programming memiliki cara yang berbeda-beda dalam menulis kode. dimana kadang kumpulan antara tag dan atribut berakhir dalam 1 baris dan kadang juga kumpulan dari tag dan atribut berakhir dalam beberapa baris. Mari lihat kedua contoh berikut yang menerangkan lebih lanjut apa itu elemen?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.text-merah {color: red;}
.text-hijau {color: green;}
.text-biru {color: blue;}
</style>
</head>
<body>
<p class="text-merah"> Ini adalah tulisan berwarna merah </p>
<p class="text-hijau">
Ini adalah tulisan berwarna hijau
</p>
<p class="text-biru"> ini adalah tulisan berwarna biru </p>
</body>
</html>
kode HTML diatas merupakan kode HTML yang diambil pada bahasan Apa itu atribut? di pengelompokkan CSS. dimana anda melihat bahwa tag <p class=”text-merah”> …. </p> dan tag <p class=”text-biru”> …. </p> elemennya terdiri dalam 1 baris yaitu baris ke 12 dan baris 16, sedangkan tag <p class=”text-hijau”> …. </p> elemenya terdiri dari 3 baris yaitu baris ke 13-15.
[sc name=”Subscribe website ini”]
