Pada sesi kali ini kita akan membahas tentang pengenalan element dan attributes pada HTML. Apa itu Element? Pengertian Attributes, contoh dan jenis Element pada HTML. Lansung saja kita bahas…
Pengertian Element
Element atau yang biasa disebut dengan Tag merupakan sebuah instruksi kepada browser untuk mendefenisikan fungsi dari tags itu sendiri. Tags memiliki berbagai fungsi dan kegunaannya. kamu bisa melihat daftar tags di sini Tags HTML.
Biasanya Tags memliki pembuka
isi content
dan penutup
, dalam penulisannya bisa dilakukan seperti ini
<namatag> isi tags </namatag>
Okee sekarang kita sudah tau bagaimana cara penulisan tags HTML.
Pengertian Attributes
Atribut merupakan sebuah informasi yang di sisipkan pada tags pembuka HTML. Biasanya ini digunakan untuk selector CSS
atau Javascript
. Lalu Bagaimana cara membuat atribut pada tags HTML. Sekarang coba kita buat contohnya.
<namatag attributes="value"> isi tags </namatag>
Attribut yang tidak memiliki value
atau nilai, contoh pembuatannya seperti berikut.
<namatag attributes> isi tags </namatag>
Attribut yang memiliki 2 atau lebih value
yang dipisahkan dengan space
atau spasi, contohnya seperti berikut.
<namatag attributes="value1 value2 value-3 value-value4"> isi tags </namatag>
total dari attribut tersebut adalah 4.
Contoh Element dan Attributes
Sekarang coba kita contohkan untuk penggunaan aslinya. Misalkan kita membuat sebuah tag untuk membuat sebuah paragraf, maka kita membutuhkan nama tag-nya yaitu <p>
. Ingat untuk membuat tag ada pembuka isi dan penutup.
contoh 1: membuat Paragraf
<p> ini merupakan sebuah paragraf </p>
contoh 2 : membuat Heading
<h1>Heading 1 </h1>
Sekarang kita akan membuat contoh untuk membuat atribut
contoh 1:memiliki banyak atribut
<img src="gambar.jpg" width="20" height=""20>
contoh 2: atribut ini memiliki beberapa nilai, dan juga bisa memiliki satu nilai.
<p class="paragraf content"> </p>
Jenis-Jenis Element
Element juga memiliki jenis-jenisnya. Berikut Jenis Element HTML
-
Empety Element (Element Tanpa Penutup)
Tags HTML juga memiliki tags tanpa penutup dan tidak memiliki konten. Berikut beberapa tags yang tidak memiliki penutup:
Tags Fungsi <td>
Berfungsi sebagai menambahkan baris <input>
Berfungsi sebagai memasukkan data <img>
Berfungsi sebagai menampilkan gambar <hr>
Berfungsi untuk memberikan baris horizontal
- Nested HTML Elements (Element Bersarang) adalah Element yang berada didalam element, di ibaratkan seperti folder di dalam folder, dan begitu seterusnya.
- Semua dokumen HTML merupakan Nested Element jika dokumen tersebut memiliki struktur HTML yang baik. Karena root dari script HTML ada
<html>
dan di tutup dengan</html>
. - Berikut contoh Nested Element
<body>
<p>paragraf</p>
</body>
Script tersebut merupakan bagian kecil dari Nested Element, Pembungkus tag paragraf adalah tag body. Maka yang menjadi root berdasarkan script di atas adalah tag <body>
. Mari kita coba dengan script yang lebih kompleks
<div class="section section-header pb-7">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 text-center">
<h1 class="display-2 mb-4">Hallo Sobat TDF Programming</h1>
<p class="lead mb-5">selamat datang di tdf programming</p>
</div>
</div>
</div>
</div>
Pertanyaan
- Sekarang sebutkan root pembungkus dari tags
<p>
danh1
? - Berapa jumlah
value
atribut pada tag<p>
danh1
? - Sebutkan apa nama attribut tags
<p>
danh1
? - Sebukan
value
atribut tag<p>
danh1
.
jawaban:
- Pembungkus tags
<p>
danh1
adalah
<div class="section section-header pb-7">...</div>
-
Attribut pada tag
<p>
2, dan attribut pada tag<h1>
2. Total attribut dari kedua tags tersebut adalah4
-
nama attributnya adalah
class
-
value tags
<h1>
=display-2
danmb-4
value tags
<p>
=lead
danmb-5
Sekarang kamu jawab soal berikut dan coba jawab di kolom komentar :D
<div class="row mb-5">
<div class="col-md-4 col-lg-4 text-center">
<a target="blank" href="a">
<div class="icon-box mb-4">
<input class="input text" type="text" placeholder >
</div>
</a>
<h2 class="h5 icon-box-title">Visit us</h2>
<span>
Nagari Panyakalan Kecamatan Kubung Kabupaten Solok, Sumatera Barat Indonesia
</span>
</div>
</div>
Pertanyaan
- Sekarang sebutkan root dari script tersebut?
- Berapa jumlah
value
atribut pada tag<h2>
? - Sebutkan apa nama attribut tag
<input>
? - Sebukan
value
atribut tag<input>
?
Kesimpulan
Element biasanya disebut dengan Tags yang fungsi bermacam-macam tergantung apa fungsinya. kamu tidak perlu menghafal dari seluruh tags tersebut, cukup pahami fungsinya dan ulang terus nanti kamu akan ingat sendiri karena sering di ulang. dan begitupun dengan attribut.