HTML POST Basic-HTML

Basic HTML - Pengenalan Element dan Attributes HTML

4. Basic HTML - Pengenalan Element dan Attributes HTML

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

  1. 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

  1. 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


  1. Sekarang sebutkan root pembungkus dari tags <p> dan h1?
  2. Berapa jumlah value atribut pada tag <p> dan h1?
  3. Sebutkan apa nama attribut tags <p> dan h1?
  4. Sebukan value atribut tag <p> dan h1.

jawaban:

  1. Pembungkus tags <p> dan h1 adalah
<div class="section section-header pb-7">...</div>
  1. Attribut pada tag <p> 2, dan attribut pada tag <h1> 2. Total attribut dari kedua tags tersebut adalah 4

  2. nama attributnya adalah class

  3. value tags <h1> = display-2 dan mb-4

    value tags <p> = lead dan mb-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


  1. Sekarang sebutkan root dari script tersebut?
  2. Berapa jumlah value atribut pada tag <h2>?
  3. Sebutkan apa nama attribut tag <input>?
  4. 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.


Sumber

W3School Element

W3School Attribute