Sabtu, 26 Desember 2020

All post

Belajar HTML #04: Cara Membuat Heading di HTML

sektiono Desember 26, 2020 Leave a Reply
Belajar HTML #04: Cara Membuat Heading di HTML







Bayangkan jika artikel yang sedang kamu baca ini tidak memiliki judul.

Pasti tidak akan menarik!

Tidak ada judul dan juga sub judul.

Kamu bisa saja akan bingung membacanya.

Karena itu..

Kita membutuhkan judul, atau dalam HTML dikenal dengan Heading.

Apa itu heading?

dan bagaimana cara membuatnya?

Ayo kita bahas!


Apa itu Heading?

Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel.

Jika kamu sering menulis artikel, pasti ini tidak asing buatmu.





Lalu, bagaimana caranya membuat judul di HTML?

Mari kita bahas:
Cara Membuat Heading di HTML

Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1> digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya.

Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag <h1> adalah yang paling besar, dan tag <h6> paling kecil.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Ini Judul Level 1</h1> <h2>Ini Judul Level 2</h2> <h3>Ini Judul Level 3</h3> <h4>Ini Judul Level 4</h4> <h5>Ini Judul Level 5</h5> <h6>Ini Judul Level 6</h6> </body> </html>


Hasilnya:





Tag <h1> biasanya dipakai pada judul artikel. Lalu tag <h2>, <h3>, <h4>, <h5>, dan <h6> dipakai pada sub judul atau sub heading.

Mari kita coba membuat sebuah artikel yang dilengkapi dengan heading. Buatlah file HTML baru kemudian isi dengan kode berikut:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>


Hasilnya:





Berdasarkan pengalaman saya—dalam menulis artikel—tag <h5> dan <h6> jarang sekali dipakai, karena judul yang dibuat hanya sampai pada level 2, 3, dan 4.

Urutan Penulisan Heading

Apakah boleh menulis judul yang tidak urut?

Maksudnya.. seperti menggunakan <h6> untuk judul awal, lalu berikutnya <h4> untuk sub judul.

Ini boleh-boleh saja, tapi kurang bagus untuk SEO. 1

Penulisan judul yang bagus adalah judul yang mengikuti levelnya.





Judul <h1> pada level pertama, <h2> pada level ke-2, dan seterusnya.
Atribut untuk Heading

Masih ingat tentang atribut?

Ya, dia adalah _______

Sudah lupa ya?

Coba buka lagi pembahasan tentang: Apa itu Tag, Elemen, dan Atribut di HTML?

Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut globel.

Contohnya seperti:id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan Javascript;
class untuk memberikan nama class yang akan dipakai oleh CSS;
style untuk memberikan kode css secara langsung;
title untuk menambahkan informasi tambahan;
dll.

Daftar atribut global, bisa kamu lihat di MDN: HTML Global Attributes.
Perbedaan Heading dengan Title dan Header

Meskipun sama-sama digunakan untuk urusan judul, tapi tiga elemen ini berbeda.Heading adalah judul untuk artikel dan bagian artikel yang dibuat dengan tag <h1> sampai <h6>
Title adalah judul dari web yang dibuat dengan tag <title>
Header adalah bagian kepala (kop) pada web yang dibaut dengan tag <header>

Coba perhatikan gambar berikut:





Sudah jelas kan bedanya?

Tag <title> untuk judul yang ditampilkan di web beowser. Tag <header> sama seperti kop surat. Lalu heading <h1> sampai <h6> menjadi judul untuk artikel.
Bonus: Heading Style

Sebenarnya ini termasuk dalam pembahasa materi tentang CSS. Karena itu, saya menjadikannya bonus yang boleh kamu baca dan juga boleh tidak.

Jadi..

Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik.

Berikut ini beberapa style yang sering digunakan pada heading:
Heading dengan Garis Bawah

Heading dengan garis bawa bisa kita buat dengan memanfaatkan tag <hr> dan juga CSS.

Contoh menggunakan tag <hr>:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>


Hasilnya:





Contoh menggunakan CSS:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>


Hasilnya:




Text Case untuk Heading

Heading kadang ditulis dengan berbagai style case. Ada yang menggunakan huruf besar semua, ada juga yang menggunakan huruf besar di awal kata saja.

Contoh:
INI HEADING DENGAN HURUF BESAR SEMUA Ini Heading Dengan Huruf Beasr Di Depan Saja


Nah, untuk membuat style case heading ini, Kita bisa menggunakan CSS dengan atribut text-transform.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-transform: uppercase;">Heading dengan huruf Besar semua</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> <h1 style="text-transform: capitalize;">Heading dengan huruf Besar di awal kata</h1> <p> Properti text-transform berfungsi untuk menentukan style case dari teks. Properti ini bisa diberikan nilai capitalize, uppercase, lowercase, initial, none, inherit. </p> </body> </html>


Hasilnya:




Warna untuk Heading

Sama seperti elemen yang lainnya, heading juga dapat kita berikan warna dengan bantuan CSS. Warna bisa kita berikan pada teks dan latar belakang atau background.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="color: red;">Heading dengan warna Merah</h1> <p> Atribut color adalah atribut CSS yang berfungsi untuk memberikan warna pada teks. Pada contoh ini, teks pada heading akan berwarna merah, karena kita memberikan warna red untuk color. </p> <h2 style="background-color: yellow;">Heading dengan Latar Kuning</h2> <p> Atribut background-color adalah atribut untuk memberikan warna latar (background) pada elemen tertentu. Pada contoh ini, kita memberikan warna latar kuning untuk heading. </p> </body> </html>


Hasilnya:





Nah untuk style lainnya, silahkan berkreasi sendiri.
Apa Selanjutnya?

Kita sudah belajar tentang cara membuat heading di HTML. Hal yang perlu kamu ingat adalah tag-tag untuk membuat heading, yakni dimulai dari <h1> sampai <h6>.

Berikutnya, silahkan pelajari tentang:Belajar HTML #05: Membuat Link pada HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML
All post

Belajar HTML #03: Membuat Paragraf pada HTML

sektiono Desember 26, 2020 Leave a Reply
Belajar HTML #03: Membuat Paragraf pada HTML






Setelah belajar tentang apa itu HTML, Tag, Elemen, dan Atribut. Berikutnya, kita akan belajar tentang elemen-elemen dasar pada HTML yang sering digunakan dalam membuat web.

Mari kita mulai dengan mengenal elemen paragraf.


Membuat Paragraf di HTML

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p> </body> </html>


Hasilnya:




Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>


Hasilnya:





Atribut align merupakan atribut yang digunakan untuk pertaan teks pada paragraf. Namun, menurut validator W3C.. penggunaan tag ini sebaiknya diganti dengan CSS.

Mengapa demikian?

Karena atribut align dapat merubah tampilan dari web. Ini sebenarnya tigas dari CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.

Contoh perataan menggunakan CSS:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p style="text-align: center">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>


Hasilnya:




Tag <br> untuk Membuat Paragraf

Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag <p>.

Fungsi utama tag <br> adalah untuk membuat baris baru.

Contoh:

Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag <p>.
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #3</title> </head> <body> <p>Rambut berantakan tak pernah di sisir Orang melihat tertawa kesenangan Pengangguran berserakan seperti pasir Kurang usaha dan keterampilan</p> </body> </html>


Hasilnya:





Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia akan tetap ditampilkan seperti baris.

Di sinilah saatnya kita harus menggunakan tag <br>. Maka, kode di atas.. bisa kita perbaiki menjadi seperti ini:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #3</title> </head> <body> <p>Rambut berantakan tak pernah di sisir <br /> Orang melihat tertawa kesenangan <br /> Pengangguran berserakan seperti pasir <br /> Kurang usaha dan keterampilan</p> </body> </html>


Hasilnya:





Oh iya, tag <br> adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini <br />.

Tag <br> boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.
Tag <hr> untuk Membuat Garis

Sama seperti tag <br>, tag <hr> juga bukanlah tag untuk membuat paragraf.

Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <hr /> <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p> </body> </html>


Hasilnya:




Tag <pre>

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.

Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.

Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <h1>Hujan Bulan Juni</h1> <p>oleh Sapardi Djoko Damono</p> <pre> tak ada yang lebih tabah dari hujan bulan Juni dirahasiakannya rintik rindunya kepada pohon berbunga itu tak ada yang lebih bijak dari hujan bulan Juni dihapusnya jejak-jejak kakinya yang ragu-ragu di jalan itu tak ada yang lebih arif dari hujan bulan Juni dibiarkannya yang tak terucapkan diserap akar pohon bunga itu </pre> </body> </html>


Hasilnya:





Coba perhatikan!

Paragraf yang kita buat di dalam kode HTML akan ditampilkan dengan format yang sama seperti yang kita tulis di sana.

Biasanya tag <pre> sering digunakan untuk menampilkan source code. Karena, tag ini menggunakan font Monospace atau Courier New (di Windows).
Tag <p> vs Tag <div>

Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag <div> sering ‘disalahgunakan’ untuk membuat paragraf.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <div>Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</div> <div>Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</div> </body> </html>


Ini boleh-boleh, saja. Tapi hasilnya tidak akan sama seperti tag <p>.





Paragraf yang dibuat dengan tag <div> tidak akan memiliki jarak margin antar paragraf.

Tag <div> biasanya digunakan untuk membungkus teks yang ada di luar artikel. Contoh seperti teks pada footer, header, sidebar, dll.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p> <hr /> <footer> <div>&copy; 2020 Belajar HTML by Petani Kode</div> </footer> </body> </html>


Hasilnya:




Bonus: Paragraph Style

Sebenarnya ini ranah pembahasan tentang CSS bukan HTML. Karena itu, kamu boleh baca dan juga boleh tidak.

Paragraph Style adalah style CSS yang kita berikan kepada paragraf agar tampil lebih menarik.

Berikut ini beberapa style yang bisa diberikan pada paragraf:
1. Baris Pertama Masuk ke Dalam

Baris pertama pada paragraf kadang sering ditulis masuk ke dalam atau ini juga disebut dengan indentasi.

Contoh:





Bagaimanakah cara membuat yang seperti itu di HTML?

Gampang!

Kita bisa memanfaatkan style CSS.
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <h1>Paragraf Indentasi</h1> <p style="text-indent: 45px;">Contoh ini baris pertama yang ditulis masuk ke dalam. Baris kedua tetap ditulis seperti biasa. Dan juga baris Ke-3 ditulis seperti biasa.</p> </body> </html>


Hasilnya:





Atribut style merupakan atribut untuk menambahkan style CSS. Pada contoh di atas kita menambahkan text-indent dengan nilai 45px, nilai ini akan menentukan jarak (ke dalam) dari baris pertama.
2. Warna untuk Paragraf

Warna bisa kita berikan kepada teks dan background. Properti CSS yang digunakan untuk memberikan warna adalah color (untuk teks) dan background-color (untuk background).

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <h1>Warna untuk Paragraf</h1> <p style="color: blue;">Contoh paragraf dengan warna teks biru. Ini baris kedua dari paragraf. Semua teks yang ada di dalam paragraf ini akan berwarna biru.</p> <p style="color: white; background-color:purple">Contoh paragraf dengan warna teks putih dan warna background-nya adalah ungu. Ini baris kedua dari paragraf. Semua teks yang ada di dalam paragraf ini akan berwarna putih.</p> </body> </html>


Hasilnya:




3. Mengubah Jenis Font

Tidak suka dengan jenis font yang digunakan, kamu bisa menggantinya dengan style CSS.

Caranya..

Kita bisa gunakan properti font-family lalu diberikan nilai dengan nama font yang akan digunakan.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <h1>Font untuk Paragraf</h1> <p style="font-family: Arial;">Ini adalah contoh paragraf yang menggunakan font Arial. Semua teks pada paragraf ini akan menggunakan font Arial. Arial adalah salah satu font yang umum digunakan pada Windows.</p> <p style="font-family: 'Times New Roman'">Ini adalah paragraf yang menggunakan font Times New Roman. Font ini juga umum digunakan dalam penulisan teks. Perhatikan penulisan Times New Roman pada style CSS, ia diapit dengan tanda petik karena mengandung lebih dari satu kata.</p> </body> </html>


Hasilnya:




Apa Selanjutnya?

Pada tutorial ini, kita sudah belajar beberapa tag:<p> untuk membuat paragraf;
<hr> untuk membuat garis lurus;
<br> untuk membuat baris baru;
<div> untuk membuat paragraf di luar artikel atau layaout;
<pre> untuk membuat paragraf dengan format yang sudah ditentukan.

Ini adalah tag-tag dasar yang perlu diingat dalam membuat paragraf di HTML.

Selanjutnya, silahkan pelajari tentang:Belajar HTML #04: Membuat Heading di HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML
All post

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

sektiono Desember 26, 2020 Leave a Reply
Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?






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 sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.

Contoh: <p>, <a>, <body>, <head>, 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 (/) 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<html> untuk memulai dokumen HTML
<head> untuk membuat bagian head
<body> untuk membuat bagian body
<h1> sampai <h6> untuk membuat heading pada artikel
<p> untuk membuat paragraf
<!-- --> untuk 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:<!DOCTYPE html> — untuk deklarasi type dokumen;
<html> — tag utama dalam HTML;
<head> — untuk bagian kepala dari dokumen;
<title> — untuk judul web;
<body> — 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)
<body> <p>Belajar tentang tag di HTML</p> </body>


Contoh: (buruk)
<BODY> <P>Belajar tentang tag di HTML</P> </BODY>


Tapi khusus untuk tag <!DOCTYPE html>.. ia ditulis dengan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C.

Tapi untuk dokumen XHTML, menggunakan DOCTYPE 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:
<i><b><u>memasak</u></b></i>


Tag <i> ditutup terakhir, karena ia yang ditulis pertama. Lalu tag </u> ditutup pertama kali karena ia berada di dalam tag <b> dan <i>.
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 <p> dengan atribut align="center" dan memiliki isi berupa teks, yakni Hello World!.

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 <a>, <img>, <video>, dll.

Contoh:
<a href="https://petanikode.com">Petanikode.com</a>


Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk menyatakan halaman tujuan dari link.

Jumlah atribut pada elemen bisa lebih dari satu.

Contoh:
<img src="gambar.jpg" width="100" height="100" />


Atribut src adalah atribut khusus untuk tag <img> yang fungsinya untuk menentukan gambar yang akan ditampilkan. Lalu atrubut width dan height 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 fungsiaccesskey Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen
class Menentukan class CSS yang akan digunakan
contenteditable Menentukan isi elemen bisa diedit atau tidak
data-* Digunakan untuk menyimpan data
dir Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya)
draggable Menentukan apakah elemen bisa di drag atau tidak
hidden untuk menyembunyikan elemen
id Menentukan id unik untuk elemen
lang Menentukan bahasa yang digunakan untuk isi elemen
spellcheck Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak
style Menentukan inline CSS untuk elemen
tabindex Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan)
title Menentukan informasi tambahan tentang elemen
translate Menentukan 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 scriptonafterprint kode javascript setelah dokumen dicetak
onbeforeprint kode javascript sebelum dokumen dicetak
onbeforeunload kode javascript sebelum saat dokumen tidak ter-load
onerror kode javascript saat terjadi error
onhashchange kode javascript saat terjadi perubahan pada bagian anchor di URL
onload kode javascript setelah loading selesai
onmessage kode javascript saat ada pesan
onoffline kode javascript saat tiba-tiba offline
ononline kode javascript saat tiba-tiba online
onpagehide kode javascript saat user tidak sedang membuka halaman web
onpageshow kode javascript saat user membuka kembali halaman web
onpopstate kode javascript saat history browser berubah
onresize kode javascript saat ukuran jendela browser berubah
onstorage kode javascript saat area penyimpanan (Web Storage) di-update
onunload kode javascript saat 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 tagsrc <audio>, <embed>, <iframe>, <img>, dll
href <a>, <link>
action <form>
autoplay <audio>, <video>

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)
<p align="center">Belajar HTML di Petani Kode</p>


Contoh: (kurang bagus)
<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>

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)
<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>


Contoh: (buruk)
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>


Tanda petik yang digunakan, boleh petik ganda (") dan juga petik tunggal (').

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

Contoh:
<img src="gambar.jpg" width=120 height=120 />


Lalu, untuk atribut yang bernilai boolean (true dan false).. nilainya boleh ditulis dan boleh tidak.

Contoh:
<input type="text" required="true" /> <input type="text" required />

3. Penggunaan Spasi

Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min (-), bukan spasi.

Contoh:
<img data-src="gambar.jpg" />


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

Contoh:
<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />


Bisa juga ditulis seperti ini:
<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />

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.

Karena itu, silahkan lanjutkan pelajari tentang:Belajar HTML #03: Membuat Paragraf pada HTML
Belajar HTML #04: Membuat Heading pada HTML
Belajar HTML #05: Membuat Komentar pada HTML
Belajar HTML #06: Text Formatting pada HTML
Belajar HTML #07: Membuat link di HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML