Anak Males – Tutorial kali ini kita akan belajar untuk lebih mengenal lebih dalam ke bahasa HTML yaitu tag, elemen, dan atribut.
Apa itu Tag ?
Apa itu Elemen ?
Apa itu Atribut ?
Pertanyaan tersebut yang sekarang akan muncul, jadi mari kita mencoba membahasnya, beserta dengan perbedaan dari Tag, Elemen dan Atribut.
Baca Juga : Sejarahnya HTML
Apa Itu Tag HTML ?
Pengertian tag adalah penanda awal dan akhir sebuah elemen di dalam HTML yang berfungsi untuk mengirimkan perintah tertentu yang akan di eksekusi oleh web browser.
Perintah yang di kirimkan juga berbeda beda, tergantung dari nama tagnya. Tag biasanya di buat menggunakan kurung siku <…> kemudian di dalamnya bisa di isi dengan nama tagnya.
Contohnya seperti : <p>, <h1>, <a>, <body>, <head>
Tag selalu di tulis secara berpasangan yaitu tag pembuka dan tag penutup.
Namun tidak jarang terdapat sebuah tag yang tidak mempunyai penutup hanya tag pembukanya saja. Berikut ini adalah beberapa tag yang tidak mempunyai penutup.
- Tag Area (
<area>), fungsinya untuk mendefinisikan area pada image map. Image map merupakan sebuah gambar yang mempunyai area yang bisa di klik. - Tag Base (
<base>), yang berfungsi untuk membuat base URL dan target untuk sebuah link relatif. - Tag Br (
<br>), fungsinya adalah untuk membuat baris baru. - Tag Col (
<col>), fungsinya untuk memberikan atribut untuk kolom pada tabel. - Tag Embed (
<embed>), fungsinya untuk membuat container aplikasi eksternal. - Tag Hr (
<hr>), fungsinya untuk membuat garis horisontal - Tag Img (
<img>), seperti namanya tag ini untuk menampilkan image atau foto di dalam website - Tag Input (
<input>), fungsinya untuk membuat elemen input pada form. - Tag Keygen (
<keygen>), fungsinya untuk membuat kunci rahasia di dalam form. - Tag Link (
<link>), digunakan untuk mendefinisikan hubungan antara dokumen HTML dengan resource eksternal seperti CSS. Tidak hanya itu, Tag ini juga bisa digunakan untuk membuat favicon. - Tag Meta (
<meta>), digunakan untuk mendefinisikan metadata sebuah halaman website. - Tag Param (
<param>), digunakan untuk memberikan parameter kepada plugin yang di embed menggunakan elemen<object>. - Tag Source (
<source>), fungsinya untuk mendefinisikan sumber file dari media seperti<audio>dan<video> - Tag Track (
<track>), tag ini digunakan untuk mendefinisikan teks untuk elemen media. - Tag WBR (
<wbr>), tag ini hampir mirip dengan tag<br>, bedanya tidak langsung membuat baris baru.
Tag tersebut tidak mempunyai penutup, terus bagaimana caranya untuk menutup tag ini, sedangkan tidak mempunyai pasangan penutup ?.
Didalam XHTML, semua elemen memang harus di tutup. Cara untuk menutup tag ini adalah dengan menggunakan garis miring (/) di akhir tag.
Contohnya :
<br />
<hr /> Namun tidak hanya tag tanpa penutup saja, masih banyak sekali tag yang menggunakan penutup.
Setiap tag juga mempunyai fungsi masing masing, ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading dan masih banyak lagi.
Masih ingat sejarah HTML kan ?
Awal awal HTML di rilis hanya mempunyai kurang lebih 18 tag, namun seiring berjalannya waktu HTML sudah mempunyai sekitar 250 tag.
Tentu sudah banyak sekali kan. Terus apa kita harus menghafal semua tag yang ada di HTML ?
Kalau ingin menghafal satu persatu tidak masalah, tapi tidak harus namun cukup hafal tag tag penting saja yang akan sering di gunakan.
Berikut ini adalah beberapa tag yang perlu di ingat :
| Tag | Fungsi |
|---|---|
<html> | Untuk mendefinisikan file HTML |
<head> | Untuk membuat bagian head |
<body> | Untuk membuat bagian body |
<p> | Untuk membuat paragraf |
<h1> sampai <h6> | Untuk membuat judul |
<!-- --> | Untuk membuat komentar |
Nanti juga tau apa aja macam macam tag setelah belajar HTML ini selesai dan latihan membuat website sendiri.
Untuk sekarang kita hanya perlu tau apa itu tag html kemudian cara membuatnya bagaimana.
Cara Menulis Tag HTML
Kadang kita juga masih salah ketika ingin menuliskan tag pada HTML, ada yang lupa menggunakan penutup ada juga yang sering salah mengetik namanya.
Mungkin kita emang bisa sedikit meminimalisir dengan adanya teks editor yang sudah semakin canggih. Namun juga perlu pengetahuan supaya tidak bergantung pada teks editor terus menerus.
Berikut ini adalah beberapa tips yang bisa di ikuti ketika kita ingin menulis tag dengan benar :
1. Perhatikan Tag yang Wajib Ada di File HTML
Ada beberapa tag yang wajib ada di dalam dokumen HTML, jika tag ini tidak kita masukan ke dalam file, maka secara langsung kode tidak akan berjalan, atau istilah kodingnya error.
Maka dari itu, kita wajib memasukan beberapa tag ini, berikut ini adalah beberapa tag yang harus kita masukan :
<!DOCTYPE html>, untuk mendeklarasikan dokumen<html>, untuk menginisialisasi html<head>, untuk bagian head dokumen<title>, untuk membuat judul website<body>, untuk bagian body dokumen
2. Tag HTML Menggunakan Huruf Kecil
Alangkah lebih baiknya jika kita menghindari penggunaan huruf besar dalam menuliskan tag, memang bisa menggunakan huruf besar, namun dengan menggunakan huruf kecil kode kita tampak lebih rapih dan bersih.
Contohnya yang benar
<body>
<p>Belajar tentang tag di HTML</p>
</body> Contoh yang buruk
<BODY>
<P>Belajar tentang tag di HTML</P>
</BODY>Enak ngga di baca ?
Namun penggunaan huruf seperti ini juga terdapat pengecualian, yaitu untuk tag <!DOCTYPE html>. Bisa sih menggunakan huruf kecil, dan akan valid menurut W3C. Namun jika menggunakan huruf kecil akan terjadi error.
3. Pastikan untuk Menutup Tag HTML Dengan Benar
Tag HTML nantinya akan di tulis secara bertumpuk tumpuk, yang artinya di dalam sebuah tag maka ada tag lagi.
Ketika kita menumpuk tag bisa saja salah dan menjadikan kode HTML tidak valid.
Contoh tag yang benar
<ul>
<li>
<i>Belajar/i>
</li>
</ul>Tag ini benar karena tag <ul> di tutup terakhir, kemudian di dalam tag <ul> terdapat sebuah tag <li>, selanjutnya di dalam tag <li> terdapat tag <i>.
Namun tag yang salah adalah seperti berikut ini.
<ul>
<i>
<li>Belajar</i>
</ul>
</li>Gimana ? sudah tau perbedaan dari kedua contoh penulisan tag diatas ?
Apa Itu Elemen ?
Selanjutnya kita akan membahas mengenai elemen yang ada di HTML. Element adalah sebuah karakter yang ada di dalam sebuah tag dari tag pembuka sampai tag penutup.
Contohnya
<p>Anak Males</p>Jadi tulisan Anak Males itu termasuk kedalam elemen <p>. Intinya, apapun yang ada di dalam sebuah tag pembuka dan tag penutup itulah yang di namakan dengan elemen.
Elemen juga sering di sebut dengan node, karena elemen merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.
Jenis Jenis Elemen HTML
Hubungan antara elemen di HTML itu di bagi menjadi 5 jenis, berikut ini adalah beberapa jenis elemen HTML.
1. Parent Element
Di lihat dari namanya saja sudah bisa di ketahui bahwa parent elemen adalah sebuah elemen orang tua dari elemen yang ada di dalam elemen tersebut.
Parent elemen adalah sebuah elemen yang mempunyai elemen lainnya di dalamnya tepat satu tingkatan. Buat lebih jelasnya coba perhatikan kode di bawah ini.
<html>
<head>
<title>Parent Element Anak Males</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
<li>Ketiga</li>
</ul>
</body>
</html>
Jadi, kalau berkaca dari kode di atas maka tag <head> adalah parent elemen dari tag <title>. Sebanding dengan tag <body> juga merupakan parent elemen dari tag <ul>.
Namun yang perlu di ingat adalah tag <body> bukan sebuah parent elemen dari tag <li>. Karena <body> bukan orang tua dari <li>, namun di anggap kakek oleh tag <li>.
Yang menjadi parent dari <li> ya, tidak lain dan tidak bukan adalah <ul>.
2. Child Element
Yang kedua adalah child element. Apa itu child elemen ? Jadi child elemen adalah kebalikan dari parent elemen.
Jika parent elemen adalah orang tua langsung dari suatu elemen, maka child elemen adalah anak langsung dari sebuah elemen.
Masih dengan kode yang sama coba perhatikan.
<html>
<head>
<title>Child Element Anak Males</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
<li>Ketiga</li>
</ul>
</body>
</html>Sekarang kebalikannya, yaitu <title> adalah anak dari tag <head>. Begitu juga dengan tag tag lainnya.
Namun tetap saja tag <li> bukan anak dari tag <body>. Sangat mudah untuk memahami jenis jenis elemen ini.
3. Sibling Element
Sibling elemen ini mempunyai arti sebagai saudara kandung. Jadi yang termasuk kedalam sibling elemen adalah elemen yang mempunyai saudara kandung.
Contohnya seperti berikut ini.
<html>
<head>
<title>Sibling Element Anak Males</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
<li>Ketiga</li>
</ul>
<ol>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>
</body>
</html>Jadi penerapan sibling elemen ini di dalam kode tersebut bisa di lihat yaitu <ol> dan <ul>. Karena mereka berdua langsung di dalam tag <body>.
4. Ancestor Element
Kemudian yang keempat, untuk jenis jenis elemen ini adalah Ancestor Element. Apa itu Ancestor Element ?.
Ancestor ini artinya adalah leluhur. Jadi ancestor di dalam tag HTML adalah sebuah elemen yang di dalam elemen tersebut terdapat elemen lain.
Bingung ? Masih dengan kode program sebelumnya. Perhatikan.
<html>
<head>
<title>Ancestor Element Anak Males</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
<li>Ketiga</li>
</ul>
<ol>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>
</body>
</html>Jika di lihat di dalam kode program HTML diatas bisa di artikan kalau tag <html> merupakan ancestor dari tag <head>, <title>, <body>, <ol>, <ul>, <li> jadi apapun yang ada di dalam tag <html> bisa di sebut dengan ancestor element.
5. Descendant Element
Yang terakhir adalah descendant elemen yang artinya adalah keturunan. Maksudnya adalah sebuah elemen bisa di katakan sebagai descendant ketika elemen tersebut termasuk ke dalam elemen keturunan elemen lainnya.
Masih dengan kode yang sama, namun sedikit di tambah beberapa elemen html. Coba perhatikan.
<html>
<head>
<title>Ancestor Element Anak Males</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
<li>Ketiga</li>
</ul>
<ol>
<li><b>Satu</b></li>
<li>Dua</li>
<li>Tiga</li>
</ol>
</body>
</html>Contoh kode program di atas ini terdapat tag <b> yang merupakan descendant elemen dari tag <li>, <ol>, <body>, <html>.
Namun ada hal yang perlu di ingat juga, bahwa tag <b> bukan termasuk descendant elemen dari tag <ul> dan <head> karena tidak berada di dalam tag <ul> maupun <head>.
Apa Itu Atribut HTML ?
Nah, akhirnya kita menemukan titik akhir di pembahasan. Kali ini kita akan belajar HTML untuk mengetahui mengenai atribut yang ada di dalam HTML.
Atribut adalah sebuah kata khusus yang letaknya ada di dalam tag pembuka. Tidak jarang juga atribut di sebut dengan modifier yang akan menentukan perilaku elemen.
Contoh atribut di HTML :
<p width="400">Anak Males</p>Atribut bisa di tambahkan ke dalam elemen apapun, bahkan ada juga elemen yang mewajibkan menggunakan atribut.
Contoh elemen yang mewajibkan menggunakan atribut antara lain adalah <a> , <img>, <video> dan masih banyak tag lainnya.
<a href="https://anakmales.com">aku adalah anak males</a>Tag <a> adalah tag yang ada di dalam HTML untuk membuat link. Tag ini akan mewajibkan kita untuk menambahkan atribut href untuk menyatakan tujuan link tersebut.
Perlu di ketahui juga bahwa, jumlah atribut juga bisa lebih dari satu.
Contohnya seperti berikut.
<a href="https://anakmales.com" target="_blank">aku adalah anak males</a>Kita menambahkan target _blank kepada elemen tersebut untuk membuat link yang di klik maka akan mengarahkan ke halaman baru dan di buka pada tab baru di browser.
Jenis Jenis Atribut HTML
Tidak hanya elemen, namun atribut pun juga mempunyai jenis jenisnya sendiri. Ada atribut yang bersifat global dan bisa di tambahkan ke semua elemen. Ada pula atribut khusus yang hanya bisa di gunakan pada elemen tersebut.
Mari kita bahas mengenai jenis jenis atribut HTML ini.
1. Atribut Global
Seperti yang sudah kita ketahui bahwa, atribut global adalah atribut yang bisa di tambahkan ke dalam semua elemen HTML.
Coba perhatikan daftar atribut global berikut ini.
| Nama Atribut | Fungsi |
|---|---|
| class | Untuk menentukan class CSS yang akan di gunakan kedalam elemen HTML |
| id | Menentukan id unik elemen |
| dir | Menentukan arah teks elemen |
| hidden | Menyembunyikan elemen |
| lang | Menentukan bahasa yang di gunakan elemen |
| style | Menentukan CSS inline |
| title | Sebagai penanda informasi tambahan dari elemen |
| accesskey | Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen |
| draggable | Menentukan apakah elemen bisa di drag atau tidak |
| spellcheck | Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak |
| translate | Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak |
| tabindex | Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan) |
2. Atribut Even
Atribut even merupakan sebuah atribut yang di gunakan untuk menentukan aksi yang akan di lakukan saat terjadi sesuatu pada elemen.
Atrbut ini nanti akan banyak di gunakan ketika sudah masuk kedalam materi pembahasan pemrograman javascript.
Berikut ini adalah beberapa atribut event yang ada di dalam HTML.
| Nama Atribut | Fungsi |
|---|---|
| onload | Setelah loading selesai |
| onmessage | Ada pesan |
| onoffline | Tiba-tiba offline |
| ononline | Tiba-tiba online |
| onerror | Terjadi error |
| onafterprint | Setelah dokumen dicetak |
| onbeforeprint | Sebelum dokumen dicetak |
| onpageshow | User membuka kembali halaman web |
| onresize | Ukuran jendela browser berubah |
| onstorage | Area penyimpanan (Web Storage) di-update |
| onunload | Web browser ditutup |
Masih banyak lagi atribut event lainnya, bakalan panjang banget kalau di masukin kedalam sini.
3. Atribut Khusus
Atribut khusus ini seperti yang sudah kita bahas, yaitu sebuah atribut yang hanya bisa dipakai di tag HTML tertentu saja. Terkadang atribut ini tidak bisa digunakan pada elemen lainnya.
Berikut ini adalah beberapa atribut khusus dan penempatan pada tag HTML.
| Nama Atribut | Penerapan Tag |
|---|---|
| src | <img>, <iframe>, <audio>, <embed> |
| href | <a>, <link> |
| action | <form> |
| autoplay | <video>, <audio> |
Cara Menulis Atribut yang Benar
Dari semua contoh yang di berikan, pasti sudah tau caranya menulis atribut dong, karena penulisannya sangat mudah.
Untuk membuat atribut di HTML kita cukup menambahkannya pada tag pembuka dengan format atribut seperti berikut.
nama-atribut="nilai"Namun ada beberapa hal yang perlu di perhatikan agar penulisannya benar dan valid. Mari kita bahas sebagai berikut ini.
1. Menggunakan Huruf Kecil
Yang pertama tentu saja kita menuliskan atribut menggunakan huruf kecil. Sebenarnya menulis atribut menggunakan huruf besar, sah sah saja dan valid.
Namun dengan menggunakan huruf kecil lebih bisa di bilang estetik dan umumnya digunakan. Lagipula menggunakan huruf kecil mudah untuk di baca.
Berikut adalah perbandingannya.
Contoh yang enak di pandang :
<a href="https://anakmales.com" target="_blank">aku adalah anak males</a>Contoh yang ngga enak di pandang :
<a HREF="https://anakmales.com" TARGET="_BLANK">aku adalah anak males</a>2. Menggunakan Tanda Petik
Untuk membuat nilai atribut pada HTML kita harus menggunakan tanda petik. Karena jika terdapat lebih dari satu kata, maka akan menciptakan spasi dan dianggap sebagai atribut baru.
Berikut adalah perbandingan atribut HTML.
Contoh pertama :
<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>Contoh kedua :
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>Sebenarnya bebas mau pakai tanda petik ganda (“) atau tanda petik tunggal (‘).
Kemudian untuk menuliskan nilai atribut yang berupa angka kita bisa menuliskan tanda petik atau tidak juga boleh.
Contoh :
<img src="gambar.jpg" width=120 height=120 />Selanjutnya untuk atribut yang bernilai boolean kita juga boleh menulisnya ataupun tidak juga tidak masalah.
Contohnya :
<input type="text" required="true" />
<input type="text" required />3. Penggunaan Spasi
Kemudian untuk cara menulis atribut yang terakhir adalah masalah penggunaan spasi di dalam atribut.
Jika ada atribut yang mempunyai spasi lebih dari satu nama, maka atribut harus di tulis menggunakan tanda min (-) bukan menggunakan spasi.
Contohnya :
<div data-aos="fade">Hai Anak Males</div>Namun kita bisa menggunakan spasi untuk memisahkan atribut jika di dalam sebuah elemen HTML terdapat beberapa atribut.
Contohnya :
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos- delay="300" data-aos-offset="0">Hai Anak Males</div>Cara menuliskannya juga bisa seperti ini.
<div data-aos="fade-zoom-in"
data-aos-easing="ease-in-back"
data-aos-delay="300"
data-aos-offset="0">
Hai Anak Males
</div>Semua tergantung penggunaan dan kebutuhan masing masing.
Penutup
Mari kita tutup dengan rasa syukur karena kita telah berhasil melewati materi belajar HTML yang sangat sangat melelahkan.
Untuk selanjutnya kita akan belajar tentang heading di dalam HTML. Jadi sampai jumpa lagi pada tutorial tersebut.