Mengenal Tipe Elemen HTML – Pengembangan Web

Mari kita mengenal tipe elemen HTML , sebagai dasar pengembangan web. Kita akan melakukan dengan contoh beberapa tipe khusus elemen agar menjadi lebih nyata.

Jika Anda baru pertama kali mengenal HTML kami sarankan untuk membaca catatan awal mengenai html yang kami tulis di sini: Mengenal HTML.

Mengenal Tipe Elemen HTML
Mengenal tipe elemen HTML

Mengenal Tipe Element HTML: Reguler Element dan Empty Element

 Untuk reguler element

Elemen HTML dimulai dengan tag pembuka, di dalamnya berisi konten dan diakhiri dengan tag penutup.

Bentuk akan seperti berikut:

<SebuahTag>  Ini adalah konten Elemen </SebuahTag>

Defenisi:

  • Tag pembukanya/Opening Tag:                            <SebuahTag>
  • Tag penutupnya/ Clossing Tag:                              </SebuahTag>
  • Konten elemennya/ Content Element:                Ini adalah konten Elemen

Untuk empty element

Akan ada pengecualian untuk beberapa jenis elemen yang merupakan elemen kosong diistilahkan dengan (  Empty Element  ). Jenis Elemen ini tidak memiliki konten elemen dan tag penutup. Contohnya: <br>

Pada dokumen type HTML5 elemen jenis ini dapat dituliskan langsung.

Namun untuk penggunaan dalam pengkodean doctype lain Anda mungkin dituntut untuk membuat penutup tunggal agar tidak memberi pesan error.

Bentuknya akan seperti ini:

<br /> untuk Br, tidak perlu menuliskan <br> . . . </br>

Contoh lainnya  <hr> Elemen ini bisa juga dapat dituliskan tanpa adanya konten dan tag penutup.

Mengenal Element HTML: Parent dan Nested Element

 

Penggunaan elemen dapat berbentuk turunan diistilahkan dengan nested.

Maksud dari nested adalah adanya hirarki dalam elemen. Sebuah elemen dapat berisi elemen lagi.

Nested element juga dapat menjadi sebutan untuk elemen yang berada dalam elemen lain. Sementara elemen yang berisikan elemen disebut parent element.

Contoh:

<body>

<div>

<h1> HEADING </h1>

<p> PARAGRAF < /p>

</div>

</body>

Pertama ada elemen Body yang berisikan elemen Div di dalamnya. Di sini Body sebagai parent element, sedangkan Div di dalamnya sebagai nested element.

Dan kemudian kita lihat juga bahwa elemen Div memiliki elemen lain di dalamnya; yakni H1 dan P.

Berarti…

Elemen Div juga merupakan parent element untuk elemen H1 dan elemen P, Sedangkan Elemen H1 juga P adalah nested element dari Div.

Untuk memudahkan memahami ini, kita bisa analogikan element HTML seperti garis keturunan keluarga. Nenek, Ibu, Anak, Cucu, cicit dan seterusnya.

 

Mengenal Tipe Element HTML: Block Level Element dan Inline Element

 

Ini adalah pengelompokan element berdasar sifatnya terhadap ruang. Yakni Block-level yang akan melakukan blocking penuh pada ruang yang tersedia untuknya atau inline dengan tidak melakukan bloking pada ruang.

Block-level Element

Sifat dari Block-level element adalah mengambil ruang pada baris baru (new row/ new line) dan secara default akan melakukan bloking penuh pada ruangnya. Dia akan menyentuh sisi kanan dan sekaligus sisi kiri ruangnya.

Penggunaan blocking element sangat penting untuk membentuk ruang (space). Blocking element dapat menjadi wadah untuk elemen lain yang menjadi nested-nya.

Contoh yang termasuk block-level element adalah:

 

  • Divisi (Div)
  • Paragraf (P)
  • Heading (H1, H2, H3… H6 )
  • Dan lainnya

Inline Element

Sifat dari inline elemen adalah menggunakan ruang secara langsung tanpa memulai baris baru. Inline secara default tidak memenuhi ruang, dia hanya menggunakan ruang sebatas yang dibutuhkan oleh konten.

Konten yang ada di dalam inline element akan memakai ruang semaksimal yang di butuhkannya, namun bila tidak memberikan pengkondisian khusus maka konten tidak akan melewati batasan dari blocking element yang menjadi parentnya.

Contoh yang termasuk kelompok inline element:

 

  • Span (Span)
  • Image (Img)
  • Link (A)
  • Dan lainnya.

 

Mari kita coba membuat Dokumen HTML dengan jenis-jenis elemen yang sudah kita bahas di atas.

 

Praktik mengenal tipe-tipe elemen HTML

 

Silahkan buka notepad ( atau notepad++ maupun editor text lain yang mendukung pengkodean).

Pada komputer Windows silahkan klik Start Menu —> All Program —> Accessories —> Notepad.

Cara menyimpan agar menjadi file html dengan klik Save —> Save As

 

  • Pada Dialog Save As yang muncul, pertama sekali gulir Save as Type menjadi All Files (*.*)
  • Untuk File Name silahkan beri nama apapun dengan menambahkan .html, nama file bisa menjadi html atau test.html
  • Encoding ganti menjadi utf-8 .
  • Silahkan simpan. Save.

 

Selanjutnya kita mulai membuat kerangka dasarnya. Silahkan klik penampil kode di bawah untuk menampilkannya. Anda dapat melakukan klik dua kali pada kode untuk melakukan blok. Salin semua kode ke notepad Anda

 

<! DOCTYPE html>

<html>

 <head>
  <title>Latihan Elemen</title>
 </head>

 <body>
 </body>

</html>

 

 

Setelah kode HTML di atas Anda salin ke notepad silahkan simpan. Anda akan punya sebuah file html. Silahkan buka di browser dengan klik dua kali pada file.

Namun file tersebut masih kosong. Semua elemen yang kita inginkan tampil akan diletakkan di antara Tag Body.

Yaitu dari open tag <body>  ke clossing tag </body>.

Mari kita coba…

Percobaan elemen html pertama

Letakan divisi yang ada pada penampil kode di bawah ke dalam Body berkas html Anda tadi.

<div style=”background-color:blue; padding:16px; margin:64px; min-height:200px;”>

</div>

<div style=”background-color:green; padding:16px; margin:64px; min-height:200px;”>

</div>

Silahkan Save (tidak perlu Save As).

Sekarang dapat dilihat hasilnya pada browser dengan melakukan refresh (F5) pada halaman. Setidaknya Anda akan melihat kotak berwarna biru dan hijau.

Memasukkan elemen baru ke dalam elemen div

Selanjutnya kita akan membuat divisi baru dengan warna berbeda di dalam divisi biru yang sudah ada.

Salin saja kode di bawah ini dan tempatkan pada div pertama tadi.

<div style=”background-color:white; padding:16px; margin:64px; min-height:200px;”>

</div>

Kodenya akan terlihat seperti berikut:

 

<div style=”background-color:blue; padding:16px; margin:64px; min-height:200px;”>

<div style=”background-color:white; padding:16px; margin:64px; min-height:200px;”>

</div>

</div>

 

Kemudian simpan, dan reload / refresh tampilan html Anda di browser. Maka akan ada kotak baru berwarna putih di dalam kotak biru.

 

Menambahkan lagi nested elemen ke dalam nested elemen yang sudah ada

 

Kita lanjutkan membuat nested element di dalam div berwarna putih tersebut.

Kode di bawah ini silahkan tempatkan di dalam div berwarna putih (white).  Mirip seperti sebelumnya.

<h1><strong>LATIHAN</strong></h1>

<p>Ini adalah contoh paragraf: Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

<p>Ini adalah contoh paragraf <strong>kedua</strong>: Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

<p>Ini adalah contoh paragraf <strong>ketiga</strong>: Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

<br />

<p>Ini adalah contoh paragraf keempat yang mendapat jarak karena di atasnya terdapat tag <strong>Br<strong>.</p>

<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

Bentuknya akan menjadi seperi ini.

 

<div style=”background-color:blue; padding:16px; margin:64px; min-height:200px;”>

<div style=”background-color:white; padding:16px; margin:64px; min-height:200px;”>

<h1><strong>LATIHAN</strong></h2>

<p>Ini adalah contoh paragraf: Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

<p>Ini adalah contoh paragraf <strong>kedua</strong>: Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

<p>Ini adalah contoh paragraf <strong>ketiga</strong>: Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

<br />

<p>Ini adalah contoh paragraf keempat yang mendapat jarak karena di atasnya terdapat tag <strong>Br<strong>.</p>

<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>

</div>

</div>

Setelah kode disalin silahkan simpan dan lihat hasilnya di browser.

Anda akan mempunyai konten di dalam  kotak putih.

 

***

 

Sampai di sini dulu Mengenal Tipe Elemen HTML kita akan lanjutkan kembali catatan mengenai HTML pada posting kelanjutannya.

Jika ada yang ingin ditanyakan tentang “Mengenal Tipe Elemen HTML” jangan ragu untuk meninggalkan jejak pada kolom komentar di bawah. (mk/end)



BIla catatan merupakan artikel panjang, silahkan menggunakan menu paginasi halaman yang tersedia di bagian bawah kolom text reader ini guna mengakses part selanjutnya




2 Balasan kepada “Mengenal Tipe Elemen HTML – Pengembangan Web”

    1. Benar, hanya saja akan jarang di temukan karena div lebih sering menjadi parent element sehingga mesti membungkus child element yang ada padanya. Dan terimakasih Sodiyc


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *