Sebagai situs yang menyediakan informasi antara pengembang web dan pengguna yang membutuhkan pengembang web berkualitas. WDI turut serta berbagi informasi penting tentang berbagai istilah yang sering digunakan oleh web developer dengan nama WDI Wiki. Temukan istilah yang Anda perlukan untuk mendukung komunikasi dengan pengembang web
Daftar Kategori. Web, Desain Web, Pengembangan Aplikasi Seluler, Pemasaran Digital, Pembuatan Fotografi/Video
Menemukan
Tubuh
Kategori. Web
Body adalah bagian dari body atau isi dari sebuah dokumen HTML. Yaitu tag HTML yang biasanya digunakan untuk membuka dan menutup semua konten yang terdapat dalam dokumen HTML, seperti teks, grafik, tautan, dll.
Tag adalah penanda untuk menandai elemen dalam dokumen HTML. Fungsi dari tag adalah memberikan petunjuk atau perintah kepada browser tentang bagaimana objek berupa teks, video, dll akan ditampilkan berdasarkan tag yang digunakan. Selain itu, isi tag body juga bisa digunakan untuk mengatur warna background atau gambar background font pada halaman HTML.
Secara umum, dokumen HTML terdiri dari dua bagian yaitu bagian head dan body. Bagian head untuk mengatur informasi mengenai dokumen, sedangkan bagian body merupakan tempat meletakkan kode-kode yang tampil pada browser. Bagian body merupakan bagian dari dokumen HTML dimana segala yang ada di dalam body tersebut akan muncul ketika diakses. Elemen body ditandai dengan tag dan akan diakhiri menggunakan tag . Bagian ini menjadi elemen terbesar dalam dokumen HTML dan di dalam sebuah dokumen, hanya akan terdapat satu elemen . Di dalam satu halaman website tidak boleh terdapat dua tag head dan dua tag body. Tag body juga berfungsi untuk menyimpan semua tag yang tampil di halaman website, seperti tag
, , atau tag lain.
Tag body dapat menyertakan atribut global, artinya tag dapat memasukkan semua atribut yang termasuk dalam atribut global yang umumnya berlaku untuk tag HTML. Selain body atau tag, ada dua tag lain yang wajib dimiliki setiap dokumen, yaitu
Tag, elemen, dan atribut adalah tiga bagian penting dari HTML. Bagi Anda yang baru belajar HTML, wajib untuk mengetahui tiga hal ini
Apa itu Tag?
Apa itu Elemen?
Apa itu Atribut?
Dan apa perbedaan antara Tag, Elemen, dan Atribut?
Mari berdiskusi…
Apa itu Tag?
Tag adalah penanda awalan dan akhiran dari suatu elemen dalam HTML. Tag dibuat dengan tanda kurung siku (<BODY> <P>Belajar tentang tag di HTML</P> </BODY> _5), kemudian di dalamnya berisi nama tag dan terkadang juga ditambahkan dengan atribut
Contoh. <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 6, <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 7, <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 8, <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 9, dan seterusnya
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutup. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (<i><b><u>memasak</u></b></i>0) di depan nama tag
Setiap tag memiliki fungsinya masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dll
Ingat sejarah HTML?
Di masa lalu. Awalnya HTML hanya memiliki 18 tag. Sekarang HTML memiliki sekitar 250 tag
Wow. banyak ya
Apakah kita harus menghafal semua tag ini?
Jawabannya
Anda tidak harus, Anda hanya tidak bisa menghafalnya. Hanya tahu tag dasar
Berikut adalah daftar tag dasar, yang menurut saya harus Anda ingat
Fungsi Tag<i><b><u>memasak</u></b></i>1 untuk memulai dokumen HTML<BODY> <P>Belajar tentang tag di HTML</P> </BODY> 9 untuk membuat bagian kepala<BODY> <P>Belajar tentang tag di HTML</P> </BODY> 8 untuk membuat bagian isi<i><b><u>memasak</u></b></i>4 hingga <i><b><u>memasak</u></b></i>5 untuk membuat judul pada artikel<BODY> <P>Belajar tentang tag di HTML</P> </BODY> 6 untuk membuat paragraf<i><b><u>memasak</u></b></i>7 untuk membuat komentarKami telah mencoba beberapa tag ini di tutorial pertama dan beberapa belum
Bikin santai aja. Nanti saya juga akan memperkenalkan tag lain yang umum digunakan dalam pengembangan web
Untuk saat ini, pahami saja. Apa itu tag dan bagaimana menulisnya
Cara Menulis Tag HTML yang Benar
Beberapa orang sering melakukan kesalahan dalam penulisan tag. Ada yang lupa ditutup, ada yang salah ketik nama, dan sejenisnya
Berikut beberapa saran yang harus diikuti untuk menulis tag dengan benar
1. Tag wajib
Ada beberapa tag yang harus ada dalam HTML. Anda harus menulis tag ini. jika tidak, bisa jadi kode HTML Anda akan error menurut validator W3C
Berikut ini adalah daftar tag yang harus ada dalam HTML
- <i><b><u>memasak</u></b></i>8 — untuk deklarasi tipe dokumen;
- <i><b><u>memasak</u></b></i>1 — tag utama dalam HTML;
- <BODY> <P>Belajar tentang tag di HTML</P> </BODY> _9 — untuk bagian kepala dokumen;
- <a href="//petanikode.com">Petanikode.com</a>_1 — untuk judul web;
- <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 8 — untuk bagian tubuh dokumen
2. Gunakan Huruf Kecil
Hindari penggunaan huruf kapital dalam penulisan nama tag dan sebaiknya gunakan huruf kecil saja
Huruf kecil lebih mudah diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi
Contoh. (bagus)
<body> <p>Belajar tentang tag di HTML</p> </body>
Contoh. (buruk)
<BODY> <P>Belajar tentang tag di HTML</P> </BODY>
Namun khusus untuk tag <i><b><u>memasak</u></b></i>_8. itu ditulis dengan huruf kapital. Bahkan bisa juga dengan huruf kecil dan akan valid menurut validator W3C
Namun untuk dokumen XHTML, menggunakan <a href="//petanikode.com">Petanikode.com</a>4 dengan huruf kecil akan mengakibatkan error
3. Pastikan untuk Menutup Tag dengan Benar
Tag HTML nantinya akan ditulis secara bertumpuk. Artinya, di dalam tag tersebut ada tag lain. Terkadang kita sering salah dalam menutup tag yang bertumpuk tersebut. Akibatnya, kode HTML kami tidak valid
Tapi tenang. Saya punya resepnya agar mudah diingat
Jika Anda mengerti maksud dari lelucon di atas, maka baguslah. Saya tidak perlu menjelaskan lagi
Namun jika Anda belum mengerti, berikut penjelasannya
Tag yang dibuat pertama harus ditutup terakhir. Tidak ditutup dulu
Contoh
<i><b><u>memasak</u></b></i>
Tag <a href="//petanikode.com">Petanikode.com</a>5 ditutup paling akhir, karena ditulis paling awal. Kemudian tag <a href="//petanikode.com">Petanikode.com</a>_6 ditutup terlebih dahulu karena berada di dalam tag <a href="//petanikode.com">Petanikode.com</a>7 dan <a href="//petanikode.com">Petanikode.com</a>5
Apa itu Elemen?
Elemen dalam HTML adalah komponen yang menyusun dokumen HTML. Elemen terkadang juga disebut sebagai node, karena merupakan salah satu jenis node yang mengatur dokumen HTML dalam diagram pohon HTML.
Dalam diagram, ada tiga jenis node. yaitu. Node Elemen, Node atribut, dan Node teks
Elemen terdiri dari tag pembuka, tag konten, dan tag penutup. Terkadang beberapa atribut juga ditambahkan
Contoh
Pada contoh di atas terdapat elemen <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 6 dengan atribut <img src="gambar.jpg" width="100" height="100" />0 dan memiliki isi teks yaitu <img src="gambar.jpg" width="100" height="100" />1
Elemen tidak selalu berisi teks, terkadang juga berisi elemen lain. Kami biasanya menyebutnya elemen bersarang atau elemen di dalam elemen
Jika digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini
Ada banyak jenis elemen HTML. Ada elemen khusus untuk teks, ada elemen untuk multimedia, skrip, tabel, metadata, dll. Nanti kita akan mempelajarinya secara bertahap. Anda dapat membaca semua jenis elemen HTML di sini. Referensi elemen HTML
Beberapa elemen HTML terkadang ditambahkan atribut sebagai pelengkap
Apa itu Atribut?
Atribut adalah kata-kata khusus yang ada di dalam tag pembuka. Atribut juga disebut sebagai pengubah yang akan menentukan perilaku elemen
Atribut dapat ditambahkan ke elemen apa pun. Ada juga elemen yang membutuhkan penggunaan atribut seperti elemen <BODY> <P>Belajar tentang tag di HTML</P> </BODY> 7, <img src="gambar.jpg" width="100" height="100" />3, <img src="gambar.jpg" width="100" height="100" />4, dll.
Contoh
<a href="//petanikode.com">Petanikode.com</a>
Tag <BODY> <P>Belajar tentang tag di HTML</P> </BODY> _7 adalah tag untuk membuat link. Tag ini memerlukan penambahan atribut <img src="gambar.jpg" width="100" height="100" />6 untuk menentukan halaman tujuan dari tautan
Jumlah atribut pada suatu elemen bisa lebih dari satu
Contoh
<img src="gambar.jpg" width="100" height="100" />
Atribut <img src="gambar.jpg" width="100" height="100" />_7 adalah atribut khusus untuk tag <img src="gambar.jpg" width="100" height="100" />3 yang fungsinya untuk menentukan gambar yang akan ditampilkan. Kemudian atribut <img src="gambar.jpg" width="100" height="100" />9 dan bana-atribut="nilai"0 merupakan atribut yang mengatur ukuran
Jenis Atribut HTML
Setiap elemen terkadang memiliki atribut khusus yang hanya dapat digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan dapat ditambahkan ke semua elemen
Berikut adalah jenis-jenis atribut yang harus diketahui
1. Atribut Global
Atribut global adalah atribut yang dapat ditambahkan ke semua elemen HTML
Berikut ini adalah daftar atribut global dan fungsinya
Name AttributeDescription or functionbana-atribut="nilai"1Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemenbana-atribut="nilai"2Menentukan kelas CSS yang akan digunakanbana-atribut="nilai"3Menentukan konten elemen dapat diedit atau tidakbana-atribut="nilai"4Digunakan untuk menyimpan databana-atribut="nilai"5Menentukan arah teks dari elemen_Menentukan__c___4 apakah elemen dapat diseret atau tidakbana-atribut="nilai"7Untuk menyembunyikan elemen unikbana-atribut="nilai"8Menentukan elemenbana-atribut="nilai"9Menentukan bahasa yang digunakan untuk konten elemen<p align="center">Belajar HTML di Petani Kode</p>0Menentukan apakah konten elemen harus dieja secara tata bahasa atau tidak<p align="center">Belajar HTML di Petani Kode</p>1Menentukan inline CSS untuk elemen<p align="center">Belajar HTML di Petani Kode</p>_2Menentukan tab atau indeks elemen ditekan)<p align="center">Belajar HTML di Petani Kode</p>3Menentukan informasi tambahan tentang elemen<p align="center">Belajar HTML di Petani Kode</p>4Menentukan apakah konten elemen dapat diterjemahkan atau tidak2. Atribut acara
Atribut event adalah atribut yang digunakan untuk menentukan tindakan yang akan dilakukan ketika terjadi sesuatu pada elemen tersebut. Atribut ini nantinya akan banyak digunakan dalam pemrograman Javascript
Berikut ini adalah daftar atribut event ketika sesuatu terjadi di jendela browser
Nama atributValueFunction. Menjalankan script<p align="center">Belajar HTML di Petani Kode</p>5kode javascriptsetelah dokumen dicetak<p align="center">Belajar HTML di Petani Kode</p>6kode javascriptsebelum dokumen dicetak<p align="center">Belajar HTML di Petani Kode</p>7kode javascriptsebelum saat dokumen tidak ter-load<p align="center">Belajar HTML di Petani Kode</p>8kode javascriptsaat terjadi error<p align="center">Belajar HTML di Petani Kode</p>9kode javascriptsaat terjadi perubahan pada bagian anchor di URL<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>0kode javascriptsetelah loading selesai<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>1kode javascriptsaat ada pesan<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>2kode javascriptsaat tiba-tiba offline<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>3kode javascriptsaat tiba-tiba online<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>4kode javascriptsaat user tidak sedang membuka halaman web<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>5kode javascriptsaat pengguna membuka kembali halaman web<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>_6 kode javascript saat riwayat browser berubah<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>7 kode javascript saat ukuran jendela browser berubah<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>8 kode javascript saat area penyimpanan (Penyimpanan Web) diperbarui<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>9 kode javascript saat browser web ditutupSelain atribut tersebut, masih banyak atribut event lainnya. Anda dapat melihat semuanya di. Atribut Acara HTML
3. Atribut Spesifik
Atribut khusus adalah atribut yang hanya dapat digunakan pada elemen tertentu dan terkadang atribut tersebut tidak dapat digunakan pada elemen lainnya
Contoh
Nama atributBisa dipakai di tag<img src="gambar.jpg" width="100" height="100" />7<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>1, <h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>2, <h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>3, <img src="gambar.jpg" width="100" height="100" />3, dll<img src="gambar.jpg" width="100" height="100" />6<BODY> <P>Belajar tentang tag di HTML</P> </BODY> 7, <h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>7<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>8<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>9<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>0<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>1, <img src="gambar.jpg" width="100" height="100" />4Cara Menulis Atribut yang Tepat
Menulis atribut sebenarnya mudah. kita tinggal menambahkannya pada tag pembuka dengan format seperti ini
bana-atribut="nilai"
Namun, ada beberapa hal yang perlu diperhatikan agar listing tersebut benar dan valid
1. Gunakan Huruf Kecil
Penulisan atribut dengan huruf kapital hanya valid, bahkan valid menurut validator W3C
Tapi saya sarankan menggunakan huruf kecil saja. Karena lebih umum digunakan dan juga mudah dibaca
Contoh. (bagus)
<p align="center">Belajar HTML di Petani Kode</p>
Contoh. (kurang bagus)
<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>
2. Gunakan Tanda Kutip
Gunakan tanda kutip untuk mengisi nilai atribut yang berisi teks
Mengapa?
Karena jika ada lebih dari satu kata maka akan menimbulkan spasi dan akan dianggap sebagai atribut baru
Contoh. (bagus)
<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>
Contoh. (buruk)
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>
Tanda kutip yang digunakan, bisa berupa tanda kutip ganda (<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>3) dan juga tanda kutip tunggal (<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>4)
Nah, untuk nilai numeriknya bisa menggunakan tanda kutip atau tidak
Contoh
<BODY> <P>Belajar tentang tag di HTML</P> </BODY> 0
Kemudian, untuk atribut dengan nilai boolean (<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>5 dan <h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>6). nilainya dapat ditulis atau tidak
Contoh
<BODY> <P>Belajar tentang tag di HTML</P> </BODY> _1
3. Penggunaan Ruang
Jika ada atribut yang memiliki nama lebih dari satu, maka ditulis dengan tanda min (<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>7), bukan spasi
Contoh
<BODY> <P>Belajar tentang tag di HTML</P> </BODY> _2
Kemudian, spasi juga digunakan untuk memisahkan dua atribut atau lebih
Contoh
<BODY> <P>Belajar tentang tag di HTML</P> </BODY> _3
Bisa juga ditulis seperti ini
<BODY> <P>Belajar tentang tag di HTML</P> </BODY> _4
Apa berikutnya?
Kami baru saja belajar tentang Tag, Atribut, dan Elemen dalam HTML. Saya pikir Anda dapat membedakan antara ketiga hal ini
Elemen adalah komponen yang membentuk dokumen HTML. Sedangkan Tag adalah penanda untuk memulai dan mengakhiri elemen. Kemudian atribut adalah pengubah untuk menentukan perilaku elemen
Nah, selanjutnya kita akan mengenal elemen-elemen dasar dalam HTML seperti paragraf, heading, list, table, link, form, dll.