Cara menggunakan target child javascript

Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML. Bagi kamu yang baru belajar HTML, wajib hukumnya untuk mengetahui ketiga Hal ini.

Apa itu Tag?

Apa itu Elemen?

Apa itu Atribut?

Serta apa perbedaan Tag, Elemen, dan Atribut?

Mari kita bahas…

Apa itu Tag?

Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku [

Belajar tentang tag di HTML
 

5], lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.

Contoh:

Belajar tentang tag di HTML
 

6,

Belajar tentang tag di HTML
 

7,

Belajar tentang tag di HTML
 

8,

Belajar tentang tag di HTML
 

9, dan sebagainya.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring [

memasak

0] di depan nama tag.

Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain.

Masih ingat sejarah HTML?

Dulu.. awalnya HTML cuma punya 18 tag. Sekarang HTML sudah punya sekitar 250 tag.

Wah! banyak ya.

Apa semua tag ini harus kita hafal?

Jawabannya:

Tidak harus, saja juga tidak bisa menghafal semanya. Cukup ketahui tag-tag dasar saja.

Berikut ini daftar tag-tag dasar, yang menurut saya harus kamu ingat.

TagFungsi

memasak

1untuk memulai dokumen HTML

Belajar tentang tag di HTML
 

9untuk membuat bagian head

Belajar tentang tag di HTML
 

8untuk membuat bagian body

memasak

4 sampai

memasak

5untuk membuat heading pada artikel

Belajar tentang tag di HTML
 

6untuk membuat paragraf

memasak

7untuk membuat komentar

Beberapa tag ini sudah kita coba pada tutorial pertama dan juga ada yang belum.

Tenang saja.. Nanti juga saya akan perkenalkan tag-tag lain yang umum digunakan dalam pembuatan web.

Untuk saat ini, cukup pahami: Apa itu tag dan cara menulisnya.

Cara Menulis Tag HTML yang Benar!

Beberapa orang kadang sering salah dalam menuliskan tag. Ada yang lupa menutup, ada yang salah mengetik namanya, dan semacamnya.

Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:

1. Tag-tag wajib

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

• memasak

  8 — untuk deklarasi type dokumen;

• memasak

  1 — tag utama dalam HTML;

• 
  Belajar tentang tag di HTML
   

  9 — untuk bagian kepala dari dokumen;

• Petanikode.com

  1 — untuk judul web;

• 
  Belajar tentang tag di HTML
   

  8 — untuk bagian body dari dokumen.

2. Gunakan Huruf Kecil

Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja.

Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.

Contoh: [bagus]

Belajar tentang tag di HTML
 

Contoh: [buruk]

Belajar tentang tag di HTML
 

Tapi khusus untuk tag

memasak

8.. ia ditulis dengan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C.

Tapi untuk dokumen XHTML, menggunakan

Petanikode.com

4 dengan huruf kecil akan mengakibatkan error.

3. Pastikan Menutup Tag dengan Benar

Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.

Tapi tenang saja.. saya punya resep agar kamu mudah mengingatnya:

Jika kamu paham maksud dari jokes di atas, maka bagus.. saya tidak perlu jelaskan lagi.

Tapi kalau belum paham, berikut ini penjelasannya:

Tag yang pertama dibuat, harus ditutup terakhir. Bukan ditutup pertama.

Contoh:

memasak

Tag

Petanikode.com

5 ditutup terakhir, karena ia yang ditulis pertama. Lalu tag

Petanikode.com

6 ditutup pertama kali karena ia berada di dalam tag

Petanikode.com

7 dan

Petanikode.com

5.

Apa itu Elemen?

Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.

HTML Tree [sumber: w3schools.com]

Pada diagram tersebut, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan Node teks.

Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan beberapa atribut.

Contoh:

Pada contoh di atas, terdapat satu elemen

Belajar tentang tag di HTML
 

6 dengan atribut

0 dan memiliki isi berupa teks, yakni

1.

Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini biasanya kita sebut dengan nested element atau elemen di dalam elemen.

Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:

Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk multimedia, script, tabel, metadata, dll. Nanti kita akan pelajari ini secara bertahap. Semua jenis elemen HTML bisa kamu baca di sini: HTML elements reference.

Beberapa elemen HTML kadang ditambahkan atribut sebagai pelengkap.

Apa itu Atribut?

Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perliaku dari elemen.

Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan atribut seperti elemen

Belajar tentang tag di HTML
 

7,

3,

4, dll.

Contoh:

Petanikode.com

Tag

Belajar tentang tag di HTML
 

7 adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut

6 untuk menyatakan halaman tujuan dari link.

Jumlah atribut pada elemen bisa lebih dari satu.

Contoh:

Atribut

7 adalah atribut khusus untuk tag

3 yang fungsinya untuk menentukan gambar yang akan ditampilkan. Lalu atrubut

9 dan

bana-atribut="nilai"

0 adalah atribut yang mengatur ukurannya.

Jenis-jenis Atribut HTML

Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.

Berikut ini jenis-jenis atribut yang harus diketahui:

1. Atribut Global

Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.

Berikut ini daftar atribut global dan fungsinya:

Nama AtributDeskripsi atau fungsi

bana-atribut="nilai"

1Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen

bana-atribut="nilai"

2Menentukan class CSS yang akan digunakan

bana-atribut="nilai"

3Menentukan isi elemen bisa diedit atau tidak

bana-atribut="nilai"

4Digunakan untuk menyimpan data

bana-atribut="nilai"

5Menentukan arah teks dari elemen [kiri ke kanan atau sebaliknya]

bana-atribut="nilai"

6Menentukan apakah elemen bisa di drag atau tidak

bana-atribut="nilai"

7untuk menyembunyikan elemen

bana-atribut="nilai"

8Menentukan id unik untuk elemen

bana-atribut="nilai"

9Menentukan bahasa yang digunakan untuk isi elemen

Belajar HTML di Petani Kode

0Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak

Belajar HTML di Petani Kode

1Menentukan inline CSS untuk elemen

Belajar HTML di Petani Kode

2Menentukan urutan atau indeks tab dari elemen [saat tombol tab ditekan]

Belajar HTML di Petani Kode

3Menentukan informasi tambahan tentang elemen

Belajar HTML di Petani Kode

4Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak

2. Atribut Event

Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada pemrograman Javascript.

Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:

Nama atributNilaiFungsi: Menjalankan script

Belajar HTML di Petani Kode

5kode javascriptsetelah dokumen dicetak

Belajar HTML di Petani Kode

6kode javascriptsebelum dokumen dicetak

Belajar HTML di Petani Kode

7kode javascriptsebelum saat dokumen tidak ter-load

Belajar HTML di Petani Kode

8kode javascriptsaat terjadi error

Belajar HTML di Petani Kode

9kode javascriptsaat terjadi perubahan pada bagian anchor di URL

Belajar HTML di Petani Kode

0kode javascriptsetelah loading selesai

Belajar HTML di Petani Kode

1kode javascriptsaat ada pesan

Belajar HTML di Petani Kode

2kode javascriptsaat tiba-tiba offline

Belajar HTML di Petani Kode

3kode javascriptsaat tiba-tiba online

Belajar HTML di Petani Kode

4kode javascriptsaat user tidak sedang membuka halaman web

Belajar HTML di Petani Kode

5kode javascriptsaat user membuka kembali halaman web

Belajar HTML di Petani Kode

6kode javascriptsaat history browser berubah

Belajar HTML di Petani Kode

7kode javascriptsaat ukuran jendela browser berubah

Belajar HTML di Petani Kode

8kode javascriptsaat area penyimpanan [Web Storage] di-update

Belajar HTML di Petani Kode

9kode javascriptsaat web browser ditutup

Selain atribut tersebut, masih banyak lagi atribut event yang lainnya. Semuanya bisa kamu lihat di: HTML Event Attributes.

3. Atribut Khusus

Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut ini tidak bisa digunakan pada elemen yang lain.

Contoh:

Nama atributBisa dipakai di tag

7

Belajar HTML

1,

Belajar HTML

2,

Belajar HTML

3,

3, dll

6

Belajar tentang tag di HTML
 

7,

Belajar HTML

7

Belajar HTML

8

Belajar HTML

9

Belajar HTML

0

Belajar HTML

1,

4

Cara Menulis Atribut yang Benar!

Penulisan atribut sebenarnya gampang.. kita hanya perlu menambahkannya pada tag pembuka dengan format seperti ini:

bana-atribut="nilai"

Namun, ada beberapa hal yang perlu diperhatikan agar penilisannya benar dan valid:

1. Gunakan Huruf Kecil

Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut validator W3C.

Tapi saya sarankan menggunakan huruf kecil saja. Karena lebih umum digunakan dan juga mudah terbaca.

Contoh: [bagus]

Belajar HTML di Petani Kode

Contoh: [kurang bagus]

Belajar HTML di Petani Kode

2. Guanakan Tanda Petik

Gunkan tanda petik untuk mengisi nilai atribut yang mengandung teks.

Mengapa?

Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.

Contoh: [bagus]

Belajar HTML

Contoh: [buruk]

Belajar HTML

Tanda petik yang digunakan, boleh petik ganda [

Belajar HTML

3] dan juga petik tunggal [

Belajar HTML

4].

Nah untuk nilai angka, boleh pakai tanda petik dan juga boleh tidak.

Contoh:

Belajar tentang tag di HTML
 

0

Lalu, untuk atribut yang bernilai boolean [

Belajar HTML

5 dan

Belajar HTML

6].. nilainya boleh ditulis dan boleh tidak.

Contoh:

Belajar tentang tag di HTML
 

1

3. Penggunaan Spasi

Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min [

Belajar HTML

7], bukan spasi.

Contoh:

Belajar tentang tag di HTML
 

2

Lalu, spasis juga digunakan untuk memisahkan dua atau lebih atribut.

Contoh:

Belajar tentang tag di HTML
 

3

Bisa juga ditulis seperti ini:

Belajar tentang tag di HTML
 

4

Apa Selanjutnya?

Kita baru saja belajar tentang Tag, Atribut, dan Elemen dalam HTML. Saya kira kamu sudah dapat membedakan ketiga hal ini.

Elemen adalah komponen yang menyusun dokuemn HTML. Sedangkan Tag adalah penanda untuk memulai dan mengakhiri elemen. Lalu atribut adalah modifier untuk menentukan perilaku elemen.

Nah, selanjutnya kita akan berkenalan dengan elemen-elemen dasar di HTML seperti paragraf, heading, list, tabel, link, form, dan lain-lain.