Cara Sederhana Memahami Dokumen HTML

Cara Sederhana Memahami Dokumen HTML

ilustrasi cara sederhana memahami dokumen html

Pada artikel terakhir ini kita akan membahas cara penulisan atau kodingan dokumen HTML. Kita tidak akan membahas terlalu dalam karena seri artikel belajar HTML ini memang lebih fokus kearah konsep, bukan fokus kepada detil teknis. Yang akan kita bahas adalah HTML Element, atribut, dan struktur dokumen secara general.

Artikel ini adalah artikel terakhir dari seri artikel Seri Belajar HTML. Artikel sebelumnya dapat diakses melalui link berikut “Kerasnya Persaingan Aplikasi Web Browser“. Kami juga menyediakan kursus programming gratis melalui fasilitas free trial bagi yang ingin belajar HTML.

HTML Element

Konsep HTML Element merupakan konsep dasar pertama dalam penulisan dokumen HTML. Semua komponen HTML selalu ditulis dalam bentuk HTML Element. Semua komponen HTML mulai dari tulisan, paragraf, input text, header, judul bahkan sampai baris baru termasuk dalam HTML Element. HTML Element ini juga sering disebut dengan istilah Tag HTML.

HTML Element selalu dimulai dengan tanda pembuka < … > dan diakhiri oleh tanda penutup </ … >.

Secara garis besar format HTML Element adalah sebagai berikut :
< {Tag HTML} …. konten atau atribut Tag HTML>HTML Element lain atau konten dalam bentuk text</ {Tag HTML}>

Format elemen html
Format elemen html

Jenis-jenis HTML Element ini seperti <p> untuk membuat paragraf, <div> untuk membuat blok komponen, <input> untuk membuat input text, <h1> untuk membuat header dan lain sebagainya.

Contoh penulisan :

<h1>Ini adalah judul artikel</h1>

<p>Ini adalah sebuah paragraf</p>

<input type=”text”></input>

<div>Ini adalah suatu blok div</div>

HTML Element dapat berisi HTML Element lain didalamnya. Seperti contoh dibawah ini, HTML Element <div> berisi HTML Element <input>.

<div><input type=”text”></input></div>

Konsep ini adalah dasar berikutnya dalam memahami dokumen HTML, sering disebut sebagai konsep parent-child atau konsep induk-anak kalau dibahasa indonesiakan. HTML Element anak berada didalam HTML Element induk. Struktur dokumen HTML akan selalu mengikuti pola parent-child ini.

HTML Attribute

HTML Attribute adalah nilai-nilai yang diberikan kepada suatu HTML Element yang mempengaruhi tampilan, konten dan karakteristik HTML Element pada saat ditampilkan pada web browser. Nilai-nilai atau atribut ini selalu memakai format key value pair dan dipisah dengan =. Nilai value selalu berada didalam double quote atau single qoute.

Format HTML Attribute : key=”value” atau key=’value”

HTML Element dan HTML Attribute

Contoh HTML Attribute :

<input type=”text” value=”ini adalah isi input text”></input>

Contoh diatas adalah HTML Element input dengan dua atribut type dan value. Atribut type berisi value “text” sedangkan atribut value berisi value “ini adalah isi input text”.

Untuk kemudahan penulisan, beberapa HTML Atribute diizinkan untuk tidak memakai format key value pair, tapi langsung menuliskan valuenya saja. Contohnya atribut checked pada checkbox.

<input type=”checkbox” checked>Check this</input>

Struktur Dasar Dokumen HTML

Secara garis besar ada beberapa HTML Element yang harus ada dalam satu dokumen HTML, yaitu <html>, <head>, <title> dan <body>. Berikut posisi HTML Element tersebut dalam struktur dasar dokumen HTML :

Struktur dokumen HTML
Struktur dokumen HTML.

Berikut penjelasan detil masing-masing HTML Element tersebut :

1. HTML Element <html>

Elemen ini adalah induk paling atas dari struktur dokumen HTML, semua HTML Element lain akan menjadi anak dari HMTL Element <html>.

2. HTML Element <head>

Elemen ini adalah anak dari HTML Element <html>, bagian ini adalah tempat mengisi meta data dokumen HTML (meta data akan dijelaskan lebih detil pada artikel khusus nantinya).

3. HTML Element <title>

Elemen ini adalah anak dari HTML Element <head>, bagian ini adalah judul dokumen HTML dan judul akan ditampilkan pada bar paling atas web browser.

4. HTML Element <body>

Elemen ini adalah tampilan utama dokumen HTML dan berisi semua konten dan HTML Element lain selain tiga HTML Element yang sudah disebutkan diatas. Semua HTML Element yang berada dalam elemen <body> akan ditampilkan pada tampilan utama web browser.

Tentang Penulis

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0