1. Apa itu HTML

HTML memang bahasa yang wajib dipelajari, bagi yang mau menjadi web developer.

Karena…

HTML merupakan bahasa dasar untuk membuat web.

Saya yakin, kamu sudah pernah mendengar HTML sebelumnya. Tapi tidak ada salahnya membaca kebali artikel ini.

Pada tutorial ini, kita akan benar-benar membahas dari nol hingga kamu bisa membuat halaman HTML sendiri.

Baiklah…

Mari kita mulai!

Apa itu HTML?

Mari kita lihat pengertian HTML menurut wikipedia:

HTML atau HyperText Markup Language merupakan sebuah bahasa markah untuk membuat halaman web. ¹

Paham kan maksudnya?

Kalau belum paham, sini saya jelaskan…

Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web.

Penanda atau markup ini, nanti akan kita sebut dengan Tag.

HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web.

Kalau kita ibaratkan nih..

HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun, hingga menjadi fondasi dasar.

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi pelengkapnya, yakni CSS dan Javascript.

CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web.

Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website.

Berikutnya, biar lebih paham.. kita akan membahas sejarah dan asal-usul HTML.

Sejarah dan Asal-usul HTML

Sejarah lengkap HTML bisa juga dibaca di:

• Sejarah dan Asal Usul HTML

Pada tutiorial ini, kita akan bahas sejarahnya secara singkat.

Cerita awal kemunculan HTML dimulai dari tahun 1980..

Saat itu seorang ilmuan bernama Tim Berners-Lee sedang bekerja di CERN.

CERN sendiri bukanlah perusahaan yang berkaitan tentang teknologi maupun internet. CERN adalah singkatan dari bahasa prancis: Conseil Européen pour la Recherche Nucléaire.

Yang artinya: Komisi Eropa untuk Penelitian Fisika Nuklir.

Para peneliti di CERN membutuhkan sebuah cara atau sistem agar bisa saling berbagi dokumen hasil penelitian.

Tim kemudian mencoba membuat ENQUIRE. Ini adalah software hypertext yang akan digunakan untuk berbagi dokumen.

Lalu di tahun 1989, Tim memperkenalkan ide tentang hypertext berbasis internet. Ini nantinya akan menjadi cikal-bakal HTML.

Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan system engineer di CERN. Akan tetapi proyek ini tidak resmi diadopsi oleh CERN.

Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul: “HTML Tags”.

Dokumen ini berisi penjelasan tentang 18 tags awal yang menjadi konsep dasar HTML.

HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language).

SGML adalah sebauah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, list, heading, dan lain-lain.

Bisa dibilang..

HTML adalah implementasi dari SGML.

Kalau kita lihat, beberapa tag seperti <title>, <p>, <li>, dan <h1> sampai <h6> berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML.

Salah satunya adalah Hyperlink, yang murni hasil pemikiran Tim Berners-Lee.

Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan segera menjadi perhatian berbagai ilmuwan komputer di seluruh dunia.

Perkembangan dan Versi HTML

HTML punya beberapa versi, dari versi yang paling tua hingga yang terbaru. Berikut ini perkembangan versi HTML:

• [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
• HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertamakali beredar di pasaran dan dirilis oleh IETF;
• [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan;
• HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertamakali.
• HTML 4.0 (24 April 1998) versi pengembangan dari yang seblumnya;
• HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0;
• XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi XML;
• XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
• HTML 5 (28 Oktober 2014) versi html saat ini.

Versi [draft] adalah versi yang tidak resmi dirilis ke pasaran. Bentuknya cuma masih dalam draft speksifikasi saja.

Artinya..

Tidak ada yang menggunakan versi [draft] untuk membuat web.

Lalu, versi mana yang akan kita pakai?

Tentunya versi terbaru, yakni HTML 5.

Peralatan untuk Belajar HTML

Nah, sekarang.. Tiba saatnya kita praktik!

Tapi sebelum itu, kamu harus siapkan beberapa alat yang akan digunakan untuk praktik.

Adapun peralatan yang harus kamu persiapkan adalah:

1. Teks Editor untuk Menulis HTML

Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks editor apapun.

Notepad boleh, Notepad++ juga boleh..

Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML.

Namun, pada tutorial ini.. kita akan menggunakan teks editor Visual Studio Code.

2. Web Browser untuk Membuka HTML

Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebeas menggunakan web browser apapun.

Saran saya sih.. gunakan web browser yang terbaru, karena kita juga akan menggunakan HTML versi yang terbaru.

Firefox atau Google Chrome, saya kira sudah cukup.

Membuat Dokumen HTML Pertamamu

Kini tiba saatnya, kamu harus mencoba sendiri membuat dokumen HTML. Caranya sangat mudah.

Mari kita mulai dengan membuka teks editor, lalu tulislah kode berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Setelah itu, simpan dengan nama hello-world.html.

Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan tanda petik "hello-world.html" agar ekstensinya .html, bukan .txt.

Atau kamu bisa aktifkan fitur show extension pada Windows Explorer, agar bisa tahu ekstensi filenya.

Caranya.. masuk ke menu View, lalu centang File name extensions.

Oke.. lanjut!

Sekarang cobalah buka file hello-world.html dengan web browser.. maka hasilnya:

Selamat! 🎉

Kita sudah berhasil membuat halaman web pertama dengan HTML.

Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan dulu tentang nama file untuk HTML.

Nama File untuk HTML

Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML:

1. Extensi file HTML

Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.

Contohnya seperti ini:

Nama filenya adalah hello-world.txt.

Sedah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser akan menampilkan isi file tersebut apa adanya.

2. Nama Khusus untuk Homepage

Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama index.html. Karena ia akan otomatis dibuka saat website dikunjungi.

Contohnya, saat kamu membuka www.petanikode.com.. maka file HTML yang akan dibuka adalah index.html yang berada di server petanikode.

3. Hindari Beberapa Hal ini..

Penggunaan Spasi

Nama file HTML biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan spasi pada nama file HTML, agar URL yang dibentuk lebih bagus.

Spasi pada URL, biasanya akan otomatis diubah menjadi %20.

Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau undescore (_).

Jangan Alay!

Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan simbol.

Contoh:

• HeLLoWORLD.html
• da*#$.html

Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca.. baik oleh manusia, maupun mesin.

Baiklah, berikutnya kita akan pelajari tentang kode-kode HTML.

Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat:

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag <html> dan di dalamnya terdapat tag <head> dan <body>.

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:

1. Bagian Deklarasi
2. Bagian HEAD
3. Bagian BODY

Mari kita bahas satu-per-satu:

1. Bagian Deklarasi

Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.

Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.

Nah, untuk HTML versi 4.. beda lagi cara deklarasinya.

Contoh untuk HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cukup panjang bukan..

Lalu apakah boleh kita tidak menulis kode <!DOCTYPE html> ini?

Boleh-boleh saja.. dokumen HTML-nya akan tetap bisa dibuka di web browser. Tapi, ini tentunya akan melanggar aturan standar yang dibuat W3C.

O ya, kita bisa mengecek.. apakah HTML yang ditulis sudah benar atau tidak di https://validator.w3.org/.

Lanjut…

Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML:

<html lang="en">

Tag <html> wajib ada di setiap dokumen HTML..

Pada tag ini, kita memberikan atribut lang="en" untuk menyatakan kalau konten dokumen HTML ini akan menggunakan bahasa inggris.

Nah di dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag <head> dan tag <body>.

Setelah itu barulah terakhir tag HTML ditutup dengan </html>.

2. Bagian HEAD

Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup dengan </head>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.

Seperti:

• Tag meta untuk SEO;
• Tag <title> untuk judul;
• Tempat menulis kode CSS dan Javascript;
• dan lain-lain.

3. Bagian BODY

Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari tag <body> dan ditutup dengan </body>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf.

2. Pengenalan

HTML Dasar: Pengenalan (Halo Dunia!)

Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language. Ia adalah bahasa markah [1] yang dibangun dan disusun untuk merepresentasikan sebuah halaman web.

Jika sebuah halaman website adalah tubuh manusia, maka HTML ini kita bisa ibaratkan sebagai tulangnya.

Kenapa?

Karena ia merepresentasikan struktur bagan tubuh sebuah halaman web.

Tiga Unsur Penyusun Halaman Web

Untuk bisa menguasai pemrograman web secara komprehensif, setidaknya kita harus mempelajari 3 unsur penting penyusun halaman web [2]:

• HTML
• CSS
• Javascript

HTML sebagai tulang, sendi, dan hal-hal lain yang merepresentasikan struktur bangunan tubuh halaman web.

Sedangkan bagian tubuh lainnya seperti kulit, rambut, atau aksesoris lain yang menyelimuti tubuh seperti pakaian, sepatu, topi dan sebagainya, maka itu direpresentasikan dan didefinisikan oleh CSS.

Ada pun javascript, maka tugasnya adalah sebagai motor penggerak sendi-sendi dari halaman web. Jika kita ingin sebuah popup muncul ketika tombol tertentu ditekan, atau kita ingin menampilkan countdown waktu, atau membuat slider gambar, zoom gambar, dan lain sebagainya. Maka hal-hal interaktif tersebut adalah tugas yang akan diemban oleh javascript.

Kenapa Harus Mempelajari HTML?

Pertanyaan selanjutnya: Kenapa harus mempelajari HTML?

• HTML adalah dasar dari segala dasar pemrograman web. Sehingga mempelajarinya tidak bisa dihindarkan lagi.
• Jika kita seorang blogger, maka memahami HTML akan membantu kita untuk mengubah template blog.
• Membuat kita memahami apa yang terjadi ketika meng-copy-paste tulisan dari internet ke dalam Microsoft Word atau Google Docs.
• Sebagai pintu utama sebelum mempelajari CSS dan Javascript (DOM).
• Dan lain sebagainya.

Contoh HTML Sederhana

Kode HTML tersusun dari elemen, tag, dan konten.

Berikut ini contoh kode HTML yang sangat sederhana.

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar HTML Dasar | Jago Ngoding</title>
</head>
<body>
  <h1>Halo, dunia!</h1>
  <p>Aku akan mempelajari HTML</p>
</body>
</html>

Kode di atas berisi beberapa informasi seperti:

• tipe dokumen (yakni html)
• judul dokumen (<title>)
• dan konten dokumen (<body>) yang memiliki 2 elemen:
  • heading Halo, dunia!
  • dan paragraf Aku akan mempelajari HTML

Membuat dan Menampilkan Halaman Web HTML

Pada dasarnya, hampir semua halaman yang kita akses di internet adalah dokumen HTML –tanpa kita sadari.

Sehingga, untuk menampilkan halaman web HTML kita hanya perlu file HTML dan browser.

File HTML bisa berupa file asli yang ada di lokal PC kita, atau alamat web yang bisa diakses online.

Contoh.

1. Kita bisa membuat sebuah file baru dengan nama halo-dunia.html.

   Kalian bisa menggunakan berbagai macam teks editor. Semisal:

   • notepad
   • notepad++
   • sublime text
   • vscode
   • atom
   • vim
   • dan lain sebagainya.

   Yang penting, kalian bisa membuat file dengan ekstensi .html.

2. Lalu paste kode HTML halo dunia di atas ke dalam file halo-dunia.html yang sudah kita buat.

3. Buka file manager, cari lokasi file.

   

4. Buka file tersebut dengan browser:

   • bisa dengan klik 2x
   • atau tekan ENTER
   • atau klik kanan open -> with browser.

Setelah terbuka dengan baik, maka dokumen halo-dunia.html akan menghasilkan output kira-kira seperti berikut:

Bahasan-Bahasan Dasar HTML

Pada dasarnya, HTML adalah bahasa markup yang senantiasa berkembang. Pernah mempelajarinya di masa lalu tidak menjamin ilmu yang kita ketahui tetap relevan hingga sekarang dan tahun-tahun yang akan datang.

Agar tetap bisa mengikuti perkembangannya dengan baik, kita perlu menguasai dasar-dasar dari HTML.

Insyaallah pada seri tutorial html ini, kita akan mempelajari pokok-pokok HTML meliputi: istilah-istilah dasar tag, elemen, dan atribut; sifat inline dan block pada suatu elemen; heading; paragraf; tipografi; tabel; form; link; media; dan sebagainya.

Pembahasan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang senjata atau perkakas-perkakas yang bisa kita gunakan untuk ngoding HTML.

Stay tune!

Referensi

[1] https://id.wikipedia.org/wiki/HTML - diakses tanggal 14 Februari 2021
[2] https://www.internetingishard.com/html-and-css/introduction/ - diakses 14 Februari 2021

3. Tag Element Attribute

HTML Dasar: Tag Element Attribute

Apa itu Tag?

HTML adalah sebuah markup yang membentuk struktur tubuh halaman web. HTML tersusun dari berbagai element. Dan tiap element, selalu ditulis dengan sebuah tag pembuka <nama-tag> dan tag penutup </nama-tag>. Meskipun ada beberapa tag yang hanya perlu dibuka, dan tidak perlu ditutup.

Jadi, tag adalah teks yang berada di antara tanda <..> dan juga </...>.

Dan, tag di dalam HTML bertugas untuk membuat atau membangun sebuah elemen [1].

Di antara contoh-contoh tag dalam HTML:

• <html> - elemen root dari dokumen HTML
• <head> - untuk mendefinisikan meta data, judul, styles, dan lain-lain dari dokumen HTML
• <body> - untuk mendefinisikan body dari dokumen HTML (body adalah bagian yang terlihat oleh user)
• <p> - untuk membuat elemen paragraf
• <a> - untuk membuat elemen link
• <button> - untuk membuat elemen tombol

Apa itu Elemen?

Elemen dalam HTML adalah sebuah komponen HTML. Elemen juga bisa dikatakan sebagai node atau simpul yang membentuk hirarki pohon dokumen HTML [2].

Bayangkan kita memiliki dua buah tombol html seperti berikut:

Berarti, kita memiliki 2 buah elemen HTML berupa tombol.

Cara membuatnya pun dengan menuliskan dua buah tag dengan nama <button>.

Sebagaimana dalam kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Elemen Pada HTML</title>
  </head>
  <body>
    <button>Tombol Kiri</button>
    <button>Tombol Kanan</button>
  </body>
</html>

Seperti yang telah dijelaskan di atas, tiap elemen HTML akan membentuk satu node (simpul) tersendiri dalam susuan hirarki HTML. Sehingga jika kita gambar dalam bentuk pohon diagram, penampakan dari 2 tombol di atas adalah seperti ini:

NB: elemen <head> dan turunannya adalah elemen yang tidak tampak secara langsung pada user. Berbeda dengan elemen <body> yang mana hasilkan akan langsung terlihat oleh user.

Apa itu Atribut?

Selain dua unsur penting di atas HTML juga memiliki sebuah istilah lain yang tidak kalah penting, yaitu atribut.

Apa itu atribut?

Atribut adalah sebuah tambahan argumen atau aksesoris terhadap suatu elemen HTML. Atribut hanya ditulis pada tag pembuka. Dan atribut berfungsi untuk menambahkan informasi tambahan pada suatu elemen HTML [3].

Contoh:

<img src="https://jagongoding.com/images/jagongoding-logo-full.png">

Kode di atas akan menampilkan sebuah gambar berikut:

Kita juga bisa mengatur panjang dan tinggi dari elemen gambar dengan menambahkan atribut width dan atribut height. Perhatikan contoh berikut:

<img
  src="https://jagongoding.com/images/jagongoding-logo-full.png"
  width="120"
  height="40">

Hasilnya:

Penjelasan

• Tag <img> bertugas untuk membuat elemen gambar
• Tag <img> termasuk tag yang hanya perlu pembuka, tanpa tag penutup
• Tag <img> memiliki atribut src, height dan width
• Atribut src berfungsi untuk menambahkan informasi url gambar yang akan ditampilkan oleh elemen <img>
• Atribut height memberikan informasi tinggi gambar
• Atribut width memberikan informasi lebar gambar

Kesimpulan

Setelah melakukan beberapa percobaan di atas, kita bisa memetik beberapa kesimpulan kunci. Di antaranya:

• HTML adalah dokumen yang tersusun dari berbagai macam elemen
• Elemen didefinisikan dengan menuliskan tag pembuka dan tag penutup (kecuali beberapa elemen yang tidak perlu tag penutup)
• Tag adalah apa yang ada di antara tanda <...> dan </...>
• Elemen bisa memiliki atribut, yang berfungsi untuk memberikan informasi tambahan pada suatu elemen

Kode Program Lengkap

Untuk kode program lengkap dari tutorial ini, bisa kalian akses pada repository github html-dasar.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang struktur dasar dokumen HTML.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Glossary/Tag - diakses tanggal 14 Februari 2021
[2] https://en.wikipedia.org/wiki/HTML_element - diakses tanggal 14 Februari 2021
[3] https://www.w3schools.com/html/html_attributes.asp - diakses tanggal 14 Februari 2021

4. HTML Dasar: Struktur Utama

Struktur Utama

Bismillahirahhmanirrahim.

Kita akan lanjutkan lagi seri tutorial belajar html dasar ini.

Sedikit mengulang pertemuan yang lalu, sebelumnya kita telah membahas tentang beberapa pengertian dari istilah-istilah dasar pada HTML, di antaranya:

• Tag: yaitu sintaks <..> dan </..> yang digunakan untuk membuat sebuah elemen HTML.
• Elemen: yaitu objek atau simpul HTML yang membentuk satu-kesatuan struktur halaman web.
• Atribut: adalah informasi tambahan untuk elemen HTML yang kita buat, misal atribut lebar dan tinggi pada tag <img>.

Struktur Tag, Konten, dan Atribut

Kita juga telah membahas tentang bagaimana struktur penulisan tag pada HTML.

Berikut ini contohnya:

<div>
  <h1>Selamat Datang</h1>

  <img src="/path/gambar.png">
</div>

Jika kita bedah, kita bisa mendapatkan beberapa informasi:

Itu adalah sekelumit struktur dasar penulisan tag konten dan atribut pada HTML.

Akan tetapi –lebih umum dari pada itu– terdapat beberapa struktur pokok yang menjadi bagian utama dokumen HTML. Dan itu lah yang akan menjadi topik bahasan kita kali ini.

Struktur Pokok HTML

Masih ingat dua tombol yang kita buat pada pertemuan sebelumnya?

<!DOCTYPE html>
<html>
  <head>
    <title>Elemen Pada HTML</title>
  </head>
  <body>
    <button>Tombol Kiri</button>
    <button>Tombol Kanan</button>
  </body>
</html>

Pada kode markup tersebut, terdapat beberapa komponen penyusun dokumen HTML:

1. <!DOCTYPE html>

   Bagian ini memperjelas jenis dokumen yang sedang ditampilkan oleh browser. Apakah dokumen tersebut adalah benar-benar dokumen HTML5 (bukan dokumen markup lainnya seperti XML atau XHTML). Mendefinisikannya cukup penting agar dokumen HTML yang kita bangung bisa di-parsing dengan baik oleh semua browser [1].

2. Dokumen <html>

   Menandakan kapan dan di mana dokumen html dimulai.

3. Bagian <head>

   Adalah bagian yang tidak terlihat oleh user, akan tetapi memiliki peran penting untuk menyiapkan berbagai informasi terkait halaman web.

4. Bagian <body>

   Ini adalah bagian di mana semua konten yang akan dilihat user ditulis.

Kita akan bahas lebih detil satu-persatu.

Bagian Head

Tag <head> pada dokumen HTML adalah bagian yang tidak terlihat oleh user. Akan tetapi, ia memiliki berbagai macam informasi yang berkaitan dengan dokumen HTML tersebut, baik informasi yang kasat mata maupun yang tidak.

Sebagai contoh, kita memiliki kode markup berikut:

<head>
  <title>Elemen Pada HTML</title>
</head>

Kode markup di atas akan memberitahu browser bahwa Judul dari dokumen yang sedang ditampilkan adalah “Elemen Pada HTML”.

Di mana ia akan ditampilkan?

Judul Dokumen (<title>)

Judul dokumen akan ditampilkan di berbagai tempat oleh browser. Yang paling utama adalah di dalam judul tab:

Bahkan juga ditampilkan ketika kita mem-bookmark suatu halaman:

Karakter Encoding

Berikutnya, di antara hal umum yang diletakkan pada bagian <head> adalah pendefinisian karakter encoding yang harus digunakan browser.

Karakter encoding yang bersifat universal dan paling sering kita jumpai adalah utf-8.

<meta charset="utf-8">

Dari situ, halaman web kita bisa menampilkan berbagai macam karakter dari berbagai macam bahasa.

Contohnya kita bisa menampilkan karakter Bahasa Inggris, Jepang, dan juga Bahasa Arab:

<body>
  <p>Contoh bahasa Jepang: こんにちは皆さん</p>
  <p>Contoh bahasa Arab: مرحبا بكم جميعا</p>
</body>

Output dari kode di atas adalah sebagai berikut:

Favicon Halaman Web

Termasuk hal yang umum didefinisikan di dalam element <head> adalah favicon. Ia adalah icon berukuran kecil dari dokumen web. Icon tersebut ditampilkan di berbagai tempat di antaranya di:

• Tab browser
• Menu bookmark browser
• Menu history
• Pencarian google
• dan sebagainya

Cara mendefinisikan icon dari dokumen web adalah sebagai berikut:

<!-- Standar -->
<link
  rel="shortcut icon"
  href="https://jagongoding.com/images/jagongoding-logo.png" />

<!-- Khusus beberapa device iOS -->
<link
  rel="apple-touch-icon"
  href="https://jagongoding.com/images/jagongoding-logo.png" />

Jangan lupa bahwa kode markup di atas harus diletakkan di dalam <head> HTML.

Halaman Responsive

Di antara hal lain yang biasa kita temui pada element <head> pada sebuah halaman web adalah:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Apa itu?

Kode markup di atas akan menginstruksi browser bahwa ukuran panjang dokumen web adalah seukuran device. Meta viewport sangat penting agar sebuah dokumen web bisa ditampilkan secara responsive di berbagai ukuran layar.

Mau tahu bedanya?

Silakan buka dua halaman web di bawah ini dari browser ponsel kalian masing-masing:

1. Halaman 1 (dengan meta viewport)
2. Halaman 2 (tanpa meta viewport)

Tampak jelas perbedaannya bukan?

Penulis dan Deskripsi

Selain itu, ada banyak sekali metadata yang bisa kita tempatkan pada element <head>. Di antaranya adalah informasi tentang penulis dan informasi tentang konten halaman web itu sendiri.

<meta name="author" content="Nurul Huda">
<meta
  name="description"
  content="Jago Ngoding adalah sebuah blog yang berhubungan
    dengan kegiatan programming atau ngoding. Di sini terdapat
    artikel tentang android, linux, web, python,
    dan lain sebagainya">

Deskripsi halaman web biasanya akan dipilih oleh mesin pencari sebagai “overview” singkat untuk setiap hasil pencarian.

Dan masih banyak lagi hal-hal lain yang masih bisa kita tempatkan pada element <head>.

Styling CSS

Struktur penting berikutnya pada dokumen HTML adalah css.

CSS merupakan singkatan dari Cascading Style Sheets. Bertugas untuk mengatur bagaimana suatu halaman web akan ditampilkan pada halaman browser [2].

Kita bisa mendefinisikan CSS suatu halaman web dengan beberapa cara. Cara yang paling umum adalah dengan menempatkan link di dalam tag <head> yang mengarah kepada file .css.

Atau, kita juga bisa langsung membuat element <style> di dalam <head>, dan ini biasa disebut sebagai internal style.

Perhatikan contoh berikut:

<head>
  ...
  <style>
    body {
      background-color: #272727;
      padding: 20px;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
    }
  
    button {
      background-color: rgb(11, 148, 197);
      padding: 15px;
      border-radius: 5px;
      border: none;
      color: white;
    }
  </style>
</head>

Hasil dari css di atas akan mengubah halaman ini:

Menjadi:

Semakin seru bukan? 😎

Bagian Body

Selanjutnya termasuk unsur penting pada dokumen HTML adalah bagian tag <body>. Seperti yang sudah berlalu penjelasannya, ia adalah bagian yang benar-benar terlihat langsung oleh user.

Di dalamnya kita bisa meletakkan gambar, tombol, form, tabel, list, teks, video, dan sebagainya.

Javascript

Yang terakhir tapi bukan yang paling akhir ialah: javascript.

Ia adalah struktur halaman web yang memiliki peran cukup vital.

Javascript bisa membuat suatu halaman web menjadi lebih interaktif dan fungsional. Semisal menambah video player, menampilkan maps, membuat games, dan sebagainya.

Sama seperti CSS, javascript bisa ditambahkan baik secara internal mau pun eksternal.

Akan tetapi jika secara eksternal, javascript biasanya diletakkan di bagian bawah dokumen html tepat sebelum tag body ditutup </body>.

Perhatikan contoh berikut:

<body>
  ...

  <script>
    const tombolKiri = document.querySelector('button')

    tombolKiri.addEventListener('click', () => {
      const teks = document.createElement('p')
      teks.innerHTML = 'Tombol diklik'

      document.body.appendChild(teks)

      setTimeout(() => {
        teks.remove()
      }, 1000)
    })
  </script>
</body>

Coba klik tombol kiri di bawah ini, dan lihat apa yang terjadi:

Setiap kali tombol yang sebelah kiri diklik, javascript (js) akan menginstruksikan browser untuk menampilkan paragraf baru dengan teks Tombol diklik. Dan setelah 1 detik, teks tersebut akan hilang kembali.

Keren bukan? 🤩

Poin-Poin Penting

Ok. Segini dulu untuk pertemuan kali ini. Kita telah membahas beberapa hal penting di antaranya:

• Bagian <head> pada dokumen HTML berisi berbagai macam metadata dan informasi tambahan mengenai halaman web.
• CSS pada HTML berfungsi untuk mengatur bagaimana struktur komponen HTML ditampilkan.
• Sedangkan javascript, ia akan memberikan “kemampuan lebih” pada sebuah halaman web sehingga ia bisa menjadi lebih interaktif dan lebih fungsional.

Kode Program Lengkap

Seperti biasa, kode program lengkap dari pertemuan kali ini bisa kalian dapatkan pada repository html-dasar.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan yang akan datang kita akan membahas element inline dan element block pada HTML.

Stay tune, jangan lupa share ke kawan-kawan kalian ya!

Terima kasih banyak.

Referensi

[1] https://www.w3.org/QA/Tips/Doctype – diakses tanggal 21 Februari 2021
[2] https://developer.mozilla.org/en-US/docs/Glossary/CSS – diakses tanggal 21 Februari 2021

5. Inline dan Block Elemen

HTML Dasar: Inline dan Block Elemen

Jenis Elemen HTML Berdasarkan Flow Layout

Dokumen HTML adalah cara untuk mendefinisikan struktur suatu halaman web, ia tersusun dan terbentuk dari gabungan elemen-elemen yang dalam suatu pohon hirarki.

Dan ditinjau dari flow-layout-nya, elemen pada HTML dibagi menjadi 2:

• Elemen inline
• dan Elemen block

Apa bedanya?

Mari kita bahas satu-persatu.

Block Element

Jika ditampilkan, blok elemen pada HTML akan memenuhi 100% dari lebar komponen atasnya [1]. Misalkan komponen utama browser memiliki lebar 1280px, maka blok elemen akan memenuhinya.

Selain itu, ia juga akan membuat baris baru setiap kali didefinisikan. Sehingga jika kita memiliki sebuah elemen lalu ingin menampilkan elemen tersebut dalam baris baru, kita bisa menggunakan element tipe block.

Contoh elemen-elemen yang bersifat blok level:

• <div>
• <main>
• <article>
• <p>
• <section>
• <figure>
• <h1> - <h6>
• dan lain sebagainya

Inline Element

Sedangkan inline element jika ia ditampilkan, ia tidak akan memenuhi ruang horizontal dari elemen parent-nya. Justru ia hanya akan memanjang sesuai dengan ukuran konten.

Misalkan ada sebuah <span> dengan konten Jakarta, maka lebar dari elemen tersebut hanya seukuran kontennya yaitu 7 karakter –tentu saja bisa kita atur sendiri dengan CSS–.

Selain itu, berbeda dengan blok elemen, inline element tidak akan membuat baris baru setiap kali didefinisikan.

Di antara elemen-elemen yang bersifat inline adalah:

• <a>
• <span>
• <img>
• <button>
• <input>
• dan lain sebagainya.

Khusus untuk <span>, ia merupakan tag atau elemen generic yang dapat kita gunakan untuk membungkus konten satu baris (inline).

Contoh Perbedaan Elemen Block dan Element Inline

Untuk lebih memahami perbedaan antara keduanya, kita langsung praktikkan saja.

Buat file html baru, tulis struktur utama HTML. Lalu pada element <body>, tambahkan kode program berikut:

<body>
  <h1>Udara Panas</h1>
  <p>
    Meskipun udara sangat panas, aku tetap berangkat
    ke <strong>Sekolah</strong> menggunakan <span>payung</span>.
  </p>
</body>

Hasil:

Penjelasan:

Kalau kita perhatikan, kita bisa simpulkan:

• Bahwa element <h1> memenuhi ruang horizontal yang ada.
• Begitu pula element <p>, ia juga memenuhi ruang horizontal yang ada, dan ia juga membuat baris baru.
• Hal ini berbeda dengan element <strong> dan juga <span> yang tidak membuat baris baru dan tidak memanjang hingga 100% ukuran parent.

Agar semakin jelas, mari kita tambahkan border dan warna dengan CSS.

Silakan tambahkan kode di bawah di dalam tag <head>:

<head>
  <style>
  h1, p {
    border: 2px solid lightblue;
  }

  span, strong {
    background-color: gold;
  }
  </style>
</head>

Jika kita buka hasilnya, kita akan mendapatkan gambaran yang lebih jelas:

Perubahaan Istilah di HTML 5

Perlu diketahui bahwa pengkategorian elemen HTML menjadi 2 (inline dan block) adalah cara lama sebelum HTML versi 5. Ada pun sekarang, 2 kategori tersebut lebih dikenal sebagai Flow Layout pada CSS [2].

Lebih dari itu, HTML5 juga memiliki konsep baru dalam pengkategorian elemen yang didefinisikan sebagai Content Categories [3], di antara kategorinya adalah:

• Main content categories
• Form-related categories
• Specific content categories
• dan lain-lain

Meskipun begitu, mengetahui 2 kategori ini tetap tidak ada salahnya dan ia juga masih relevan hingga saat ini [1].

Kesimpulan

Dari pertemuan ini kita bisa simpulkan beberapa poin penting, di antaranya:

• Awalnya, pengkategorian elemen HTML terbagi menjadi 2: inline dan block.
• Block element akan memenuhi lebar space dari element parent (atau kontainer).
• Block element juga akan membuat baris baru setiap kali didefinisikan.
• Inline element hanya akan memiliki lebar sesuai kontennya.
• Inline element tidak membuat baris baru ketika didefinisikan.
• HTML5 memiliki konsep pengkategorian yang lebih beragam, dan istilah inline dan block element adalah istilah lama.
• Mengetahui konsep inline dan block element pada HTML tetap masih relevan hingga saat ini.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas heading pada HTML!

Stay tune dan tetap ngopi!

Terima kasih banyak 😎

Referensi

[1] https://www.freecodecamp.org/news/inline-elements-and-block-elements-in-html-explained/ – diakses tanggal 21 Februari 2021
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements – diakses tanggal 21 Februari 2021
[3] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories – diakses tanggal 21 Februari 2021

6. 6 Jenis Heading

HTML Dasar: 6 Jenis Heading

Pada pertemuan kali ini kita akan membahas salah satu hal paling dasar pada dokumen HTML: yaitu Heading.

Heading Pada HTML

Apa itu Heading?

Heading merupakan tag di dalam HTML yang mendefinisikan judul atau sub-judul serta hirarki dari dokumen HTML yang ditampilkan kepada user [1].

Terdapat 6 level heading pada HTML, yang paling tinggi adalah <h1> dan yang paling rendah adalah <h6>.

Berikut ini adalah contoh heading pada HTML:

<h1>h1 - Heading tertinggi</h1>
<h2>h2 - Heading level 2</h2>
<h3>h3 - Heading level 3</h3>
<h4>h4 - Heading Level 4</h4>
<h5>h5 - Heading level 5</h5>
<h6>h6 - Heading level terakhir</h6>

Kode HTML di atas akan memproduksi output sebagai berikut:

Kita bisa lihat di atas bahwa semakin kecil level heading, maka ukuran font-nya pun semakin kecil. Tentu saja ukuran font, style, warna, dan lain-lain bisa kita ubah lebih lanjut menggunakan CSS.

Heading Merupakan Salah Satu Pembentuk Struktur Dokumen

Faktanya, penggunakan heading pada dokumen HTML tidak boleh asal-asalan karena heading merupakan salah satu pembentuk struktur dokumen HTML [2].

Bahkan dengan memanfaatkan struktur heading yang benar, mesin pencari seperti Google atau pun tools yang lain bisa otomatis mengenali “daftar isi” suatu halaman HTML.

Contoh penggunaan heading sebagai pembentuk struktur dokumen:

<h1>Pengenalan HTML</h1>

<h2>Pengertian HTML</h2>
<p>
  HTML adalah bahasa markup yang digunakan untuk
  mendefinisikan suatu halaman web
</p>

<h2>Contoh Penggunaan HTML</h2>

<h3>Contoh 1: Hello world</h3>
<p>...</p>

<h3>Contoh 2: Menampilkan Gambar</h3>
<p>...</p>

<h2>Kesimpulan</h2>
<p>...</p>

Output:

Kesalahan Heading Yang Sering Ditemukan

Berikut ini adalah beberapa kesalahan umum tentang penggunaan heading yang seharusnya kita hindari:

1. Menggunakan heading untuk menyesuaikan ukuran teks.

Terkadang menggunakan tag <h1> sebagai judul dokumen HTML tidak terlalu pas karena ukurannya yang terlalu besar. Akhirnya, alih-alih menggunakan <h1> sebagai judul utama, kita justru menggunakan <h2> karena dianggap ukuran font-nya lebih sesuai.

Ini adalah praktik yang salah.

Hal yang harusnya kita lakukan adalah: tetap menggunakan tag <h1> sebagai judul utama, lalu mengatur ukuran font yang sesuai dengan CSS font-size.

Contoh di mana <h2> lebih besar dari pada <h1>:

<h1 style="font-size: 12pt">INI JUDUL UTAMA</h1>

<h2>INI SUB-JUDUL</h2>

2. Harusnya satu dokumen / halaman HTML hanya memiliki satu elemen <h1>.

Menggunakan <h1> lebih dari satu kali memang tidak akan menyebabkan error, hanya saja ia bukanlah praktik yang disarankan terlebih dalam ranah SEO di mana seharusnya satu dokumen hanya memiliki satu judul. Hal ini mirip dengan buku yang mana satu buku harusnya hanya memiliki satu judul saja.

3. Menggunakan heading secara acak (tidak urut sesuai hirarki).

Terkadang kita menggunakan heading HTML sekenanya dan suka-suka, tidak memperdulikan struktur hirarki yang benar seperti kapan menggunakan h3, kapan menggunakan h4, dan sebagainya.

Harusnya heading yang kita gunakan adalah berurutan sesuai levelnya, yaitu setelah <h1> adalah <h2>, setelah <h2> adalah <h3>, dan seterusnya. Bukan setelah <h1> langsung menggunakan <h3>. Ini adalah praktik yang keliru.

Penggunaan yang salah ❌❌:

<h1>Judul Utama</h1>
<h3>Sub judul</h3>
<h4>Sub-Sub judul</h4>

Penggunaan yang benar ✅✅:

<h1>Judul Utama</h1>
<h2>Sub judul</h2>
<h3>Sub-Sub judul</h3>

Kesimpulan

Dari sini bisa kita simpulkan bahwa heading dalam HTML memiliki 6 level: yang paling tinggi adalah <h1> dan yang paling rendah adalah <h6>.

Hal selanjutnya adalah: posisi heading sangatlah penting dalam sebuah dokumen HTML karena ia merepresentasikan struktur konten dari dokumen HTML.

Dan karena hal tersebut, kita harusnya tidak asal-asalan dalam menggunakan heading HTML, akan tetapi tetap memikirkan struktur hirarki yang tepat sesuai level konten suatu dokumen.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang paragraf pada HTML.

Stay tune!

Referensi

[1] https://www.w3schools.com/html/html_headings.asp – diakses tanggal 6 Juni 2021
[2] https://www.tutorialrepublic.com/html-tutorial/html-headings.php – diakses tanggal 6 Juni 2021

7. Paragraf

HTML Dasar: Paragraf

Pendahuluan

Paragraf merupakan sekumpulan teks atau kalimat yang tampak pada halaman web. Sebuah paragraf selalu dimulai dari baris baru, dan antar satu paragraf dengan paragraf lainnya biasanya terpisahkan dengan sebuah jarak.

Meskipun biasanya paragraf berisi hanya sekumpulan teks, tetapi ia sebenarnya juga bisa digunakan untuk mengelompokkan gambar dan juga form isian [1].

Membuat Paragraf di HTML

Di dalam HTML, kita bisa mendefinisikan paragraf dengan tag <p> dan ditutup dengan tag </p>. Ia merupakan block element sehingga akan memenuhi layar dan akan membuat baris baru secara default.

Perhatikan contoh berikut:

<p>Belajar membuat paragraf.</p>
<p>Membuat paragraf sangat mudah sekali.</p>

Output:

Berurusan Dengan Karakter Putih (White Space)

Di dalam tag <p> pada HTML, karakter putih apa pun akan dianggap sebagai satu spasi. Sehingga meskipun kita menambahkan karakter ganti baris, karakter tab, multi spasi, yang ditampilkan pun akan tetap sama yaitu satu spasi saja.

Perhatikan contoh berikut:

<p>Aku punya tangan
kanan dan kiri
setiap tangan ada 5 jari
</p>

<p>Satu ibu jari,    satu telunjuk,
    jari tengah,    jari manis,
dan     kelingking
</p>

Output:

Membuat Ganti Baris

Berikutnya kita bisa membuat ganti baris di dalam sebuah paragraf menggunakan tag <br>. Tag <br> merupakan tag yang tidak memiliki penutup.

Perhatikan contoh berikut:

<p>Ini paragraf <br> pertama kesukaanku</p>
<p>Ini paragraf kedua favoritku</p>

Hasil:

Pada kode di atas, kita membuat line break dengan tag <br> sehingga browser akan menambahkan baris baru di dalam sebuah paragraf.

Contoh lain:

<p>Aku punya tangan <br>
kanan dan kiri <br>
setiap tangan ada 5 jari <br>
</p>

<p>Satu ibu jari,<br>satu telunjuk, 
<br>jari tengah,<br>jari manis,
<br>dan     kelingking
</p>

Hasil keluaran:

Membuat Garis Lurus Horizontal

Selain itu kita juga bisa menggunakan tag <hr> untuk membuat garis horizontal baik di dalam paragraf mau pun di luar paragraf.

Perhatikan contoh berikut:

<h2>Paragraf 1</h2>
<p>Contoh teks paragraf pertama</p>
<hr>
<h2>Paragraf 2</h2>
<p>Contoh teks paragraf kedua</p>

Hasil:

Atribut Tag

Tag <p> tidak memiliki atribut khusus, ia mendukung global atribut atau atribut umum yang bisa kita gunakan di hampir semua tag HTML seperti:

• id
• class
• style
• dan lain sebagainya

Catatan: atribut align sudah kadaluarsa di HTML 5 sehingga ia harusnya sudah tidak digunakan lagi untuk melakukan perataan teks [2]. Sebagai gantinya kita bisa menggunakan CSS.

Perataan Teks

Untuk melakukan perataan teks seperti rata tengah, rata kiri, rata kanan, rata kanan-kiri, kita bisa memanfaatkan CSS text-align.

Perhatikan contoh berikut:

<p style="text-align: right">
  Aku sangat senang karena aku bisa belajar HTML dengan mudah
<p>
<p style="text-align: center">
  Setelah belajar HTML, ingin sekali rasanya aku belajar hal
  yang lebih serius lagi seperti misalnya CSS, kemudian JS.
<p>
<p style="text-align: justify">
  Mempelajari cara membuat halaman web memang sulit,
  tapi kalau kita sungguh-sungguh dan kita jalani dengan
  penuh semangat, semuanya akan terasa lebih ringan.
<p>
<p>
  Oleh karena itu aku harus tetap semangat
</p>

Hasil:

Mendefinisikan Teks Terformat

Yang terakhir tapi bukan yang paling akhir, kita bisa membuat sebuah kumpulan teks dalam bentuk yang terformat: alias apa yang kita definisikan dalam kode html akan ditampilkan apa adanya tanpa ada konversi karakter putih menjadi satu buah spasi.

Perhatikan contoh berikut:

<pre>
Aku punya tangan
kanan dan kiri
setiap tangan ada 5 jari
</pre>

<pre>Satu ibu jari,
   satu telunjuk, 
jari tengah,     jari manis,
  dan     kelingking
</pre>

Hasil:

Kesimpulan

Dari pertemuan kali ini bisa kita simpulkan beberapa poin:

1. Paragraf pada HTML didefinisikan dengan tag <p>
2. Tag <p> merupakan block element yang mana setiap kali didefinisikan, ia akan memenuhi lebar layar dan akan membuat baris baru.
3. Tag <p> akan menganggap semua karakter putih sebagai satu buah spasi.
4. Kita bisa menampilkan teks apa adanya menggunakan tag <pre>

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang komentar pada HTML.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p – diakses tanggal 9 Juni 2021
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p#attributes – diakses tanggal 9 Juni 2021

8. Belajar Komentar

HTML Dasar: Belajar Komentar

Pembahasan berikutnya pada seri belajar HTML dasar ini adalah tentang komentar pada HTML.

Apa itu komentar pada HTML?

Komentar Pada HTML

Komentar pada HTML adalah sebuah tag/element yang digunakan untuk meninggalkan sebuah catatan pada dokumen HTML kita [1]. Catatan tersebut bisa berupa deskripsi/tujuan suatu bagian kode HTML, atau juga bisa digunakan untuk memberikan rekomendasi, atau bahkan untuk menyembunyikan sementara sebuah kode HTML dengan tujuan debug.

Komentar pada HTML akan diabaikan oleh web browser, ia tidak akan ditampilkan sehingga user tidak akan melihat apa-apa. Komentar bahkan bisa mempermudah orang lain untuk memahami struktur kode HTML kita dan akan membuat kode kita semakin mudah dibaca [2].

Cara Membuat Komentar Pada HTML

Komentar pada HTML diawali dengan tag <!-- dan diakhiri dengan -->. Sehingga konten apa pun yang diletakkan di antara keduanya akan benar-benar diabaikan dan tidak ditampilkan sama sekali.

Perhatikan contoh berikut:

<!-- Sebuah komentar yang bisa kita baca -->
<h1>Judul Dokumen</h1>
<!-- Akan tetapi komentar tidak akan ditampilkan pada browser -->
<p>Teks deskripsi suatu dokumen</p>

Hasil keluaran:

Shortcut Membuat Komentar

Dalam kebanyakan teks editor modern (seperti misalnya VSCode atau VSCodium), kita bisa menggunakan kombinasi tombol Ctrl+/ untuk membuat/membatalkan komentar.

Perhatikan demonstrasi berikut:

Tujuan Umum Penggunaan Komentar

Secara umum komentar bisa kita gunakan untuk memberikan informasi tambahan tentang kode HTML yang kita tulis sehingga ia menjadi lebih “hidup” atau lebih mudah untuk dipahami baik oleh kita sendiri lebih-lebih untuk orang lain.

Di antara tujuan umum penggunaan komentar pada HTML adalah:

1. Memberikan deskripsi tentang kode HTML yang kita tulis. Hal ini sangat berguna apalagi jika dokumen memiliki ribuan elemen yang rumit.
2. Menyembunyikan sementara beberapa bagian kode HTML untuk tujuan debug.
3. Kita juga bisa menulis komentar sebagai catatan todo-list agar kita tidak lupa hal apa yang harus kita lakukan selanjutnya.
4. Jika bekerja dengan tim, komentar pada HTML juga bisa kita gunakan untuk berkomunikasi dengan kawan di ujung layar yang berbeda 😁

Agar lebih jelas, mari kita coba buat contoh untuk masing-masing tujuan di atas.

Contoh 1: Memberikan deskripsi kode HTML

Contoh yang pertama adalah penggunaan yang paling umum yaitu kita memberikan informasi yang berkaitan dengan kode HTML yang kita tulis.

Perhatikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!-- awal header -->
  <header>
    <h1>Halaman ini responsive</h1>
  </header>
  <!-- akhir header -->

  <!-- Gambar ini ditampilkan apa adanya tanpa pengaturan ukuran -->
  <img src="/images/jagongoding-logo-full.png" alt="">
</body>
</html>

Contoh 2: “Menyembunyikan” sementara suatu elemen HTML

Contoh yang kedua kita bisa menggunakan untuk menyembunyikan sebuah element atau beberapa elemen HTML untuk kepentingan tertentu semisal debug.

Perhatikan kode di bawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!-- awal header -->
  <!-- <header>
    <h1>Halaman ini responsive</h1>
  </header> -->
  <!-- akhir header -->

  <img src="/images/jagongoding-logo-full.png" alt="">
</body>
</html>

Pada kode di atas kita menyembunyikan tag <header> beserta kontennya.

Contoh 3: Untuk membuat list “TODO”

Selain itu kita juga bisa menyisipkan list “TODO” yaitu hal apa saja yang harus kita lakukan selanjutnya, hal ini kita lakukan agar kita tidak lupa akan hal-hal yang penting.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!-- awal header -->
  <header>
    <h1>Halaman ini responsive</h1>
  </header>
  <!-- akhir header -->

  <!-- TODO: jangan lupa di sini nanti tampilkan beberapa paragraf-->

  <img src="/images/jagongoding-logo-full.png" alt="">

  <!-- TODO: DI SINI JUGA JANGAN LUPA TAMBAHKAN FOOTER -->
</body>
</html>

Dan biasanya komentar TODO akan memiliki warna yang berbeda pada teks editor modern.

Perhatikan tangkapan layar berikut dari teks editor VSCodium yang saya gunakan:

Dengan pewarnaan yang berbeda seperti itu tentu saja akan membuat kita “tidak kelewatan”.

Contoh 4: Curhat dan Tukar Pesan

Selain itu, jika kita bekerja dengan tim, kita bisa memanfaatkan komentar HTML untuk berkomunikasi serta bertukar pesan antar programmer.

Perhatikan contoh berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!--
    Please bro jangan hapus kode ini, meskipun agak belibet
    tapi ini working
   -->
  <header>
    <h1>Halaman ini responsive</h1>
  </header>

  <img src="/images/jagongoding-logo-full.png" alt="">
</body>
</html>

Kode Program Lengkap

Sekian dulu untuk pertemuan kali ini.

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara memformat teks pada HTML seperti cetak tebal, cetak miring, garis bawah, teks tercoret dan lain-lain.

Stay tune!

Referensi

[1] https://www.freecodecamp.org/news/html-comments-how-to-comment-out-your-html-code/ – diakses tanggal 10 Juni 2021
[2] https://www.tutorialspoint.com/html/html_comments.htm – diakses tanggal 10 Juni 2021

9. Pemformatan Teks

HTML Dasar: Pemformatan Teks

HTML memberikan kita keleluasaan untuk melakukan formatting teks seperti yang kita lakukan pada teks prosesor semisal Microsoft Office dan lain sebagainya.

Contoh pemformatan teks yang bisa kita lakukan pada HTML semisal: mencetak tebal, mencetak miring, memberi garis bawah, memberi stabilo (marker) dan lain sebagainya.

Pada pertemuan kali ini, kita akan mempelajari dan mencoba satu persatu pemformatan teks yang bisa kita lakukan di dalam dokumen HTML.

Teks Tebal

Yang pertama adalah membuat teks menjadi cetak tebal.

Untuk membuat teks menjadi cetak tebal kita bisa menggunakan dua buah tag:

1. Tag <b></b>
2. dan tag <strong></strong>

Keduanya akan mengubah teks apa pun menjadi tercetak tebal.

Perhatikan contoh berikut:

<p>
  Mencetak tebal sebuah teks <strong>sangat penting untuk
  memberikan</strong> tekanan atau penegasan pada suatu kalimat
</p>

<p>
  Tanpa teks yang tercetak tebal, sebuah paragraf akan
  <b>terlihat monoton</b> dan membosankan karena pembaca
  akan <strong>kesulitan</strong> menemukan intisarinya.
</p>

Hasil keluaran:

Teks Miring

Format berikutnya adalah membuat teks menjadi miring.

Untuk membuat sebuah teks menjadi miring, kita bisa menggunakan tag baik tag <i> atau tag <em>.

Tag <i> untuk italic dan tag <em> untuk emphasis (penegasan).

Perhatikan contoh berikut:

<p>
  Teks miring <i>bisa</i> kita gunakan untuk
  <em>memberikan penekanan</em> terhadap suatu kalimat.
</p>

<p>
  Atau bisa juga kita gunakan untuk penulisan
  <i>foreign words</i> atau kata-kata asing.
</p>

Hasil keluaran:

Apa bedanya tag <i> dan <em>?

Secara tampilan keduanya sama, tidak ada perbedaan. Yang menjadi pembeda hanyalah secara semantic, tag <i> digunakan untuk memiringkan teks (secara universal), dan tag <em> lebih cocok digunakan sebagai penegasan [1]. Jadi ini mostly hanya soal tujuannya saja yang berbeda.

Contoh lainnya:

<h1><i>Teks ini adalah teks italic biasa</i></h1>
<h1><em>Sedangkan teks ini memiliki makna penegasan</em></h1>

Hasil keluaran:

Teks Garis Bawah

Pemformatan teks berikutnya yang bisa kita lakukan dengan HTML adalah memberikan garis bawah pada suatu kalimat.

Untuk melakukannya kita bisa menggunakan baik tag <u> yang bermakna underline, atau tag <ins> yang bermakna insert.

Perhatikan contoh berikut:

<p>
  <ins>Pemformatan teks</ins> berikutnya yang bisa kita lakukan
  dengan HTML adalah <u>memberikan garis bawah</u> pada suatu kalimat.
</p>

<p>
  Untuk melakukannya kita bisa <u>menggunakan</u> baik tag &lt;u&gt;
  yang bermakna <i>underline</i>, <ins>atau</ins> tag &lt;ins&gt;
  yang bermakna <i>insert</i>.
</p>

Hasil keluaran:

Teks Dicoret

Berikutnya kita bisa membuat sebuah teks menjadi tercoret dengan Microsoft Word HTML.

Caranya adalah menggunakan baik tag <s> atau strikethrough mau pun tag <del> atau delete.

Perhatikan contoh berikut:

<h1>Terkadang kita butuh untuk mencoret <s>sesuatu</s></h1>
<p>
  Aku sangat suka mencoret-coret <del>tembok rumah</del> di atas kertas.
</p>

Hasil keluaran:

Teks Pangkat

Berikutnya adalah: kita bisa membuat format teks pangkat dengan HTML. Baik pangkat atas mau pun pangkat bawah.

Untuk pangkat atas kita bisa menggunakan tag <sup>, sedangkan pangkat bawah bisa menggunakan tag <sub>.

Ingat: bedanya adalah huruf p dan huruf b 😁

Contoh:

<h2>satu pangkat <sup>dua</sup></h2>
<h2>satu pangkat <sub>tiga</sub></h2>

<hr>

<p>
  2<sup>3</sup> = 8
</p>

<p>
  Air = H<sub>2</sub>O
</p>

Hasil keluaran:

Teks Stabilo (Marker)

Berikutnya kita bisa membuat sebuah marker atau penanda terhadap sebuah kalimat yang penting seakan-akan kita menggunakan stabilo.

Untuk melakukannya kita bisa menggunakan tag <mark>.

Perhatikan contoh berikut:

<h1>Penggunaan <mark>stabilo</mark></h1>

<p>
  Untuk hal-hal yang bersifat penting, kita bisa
  <mark>memanfaatkan fitur stabilo</mark>.
</p>

Hasil keluaran:

Kita juga bisa memanfaatkan style CSS background atau background-color untuk menggunakan warna lain semisal warna pink, orange, magenta, cyan dan lain sebagainya.

Perhatikan contoh berikut;

<p>
  <mark style="background: pink">Ini adalah</mark> sebuah teks penting
</p>
<p>
  Ini adalah <mark style="background: orange">sebuah teks</mark> penting
</p>
<p>
  Ini adalah sebuah <mark style="background: magenta">teks</mark> penting
</p>
<p>
  Ini adalah sebuah teks <mark style="background: orange">penting</mark>
</p>

Hasil keluaran:

Teks Kecil

Yang berikutnya adalah kita bisa membuat sebuah teks menjadi lebih kecil dari pada ukuran normal pada HTML.

Untuk melakukannya kita bisa menggunakan tag <small>.

Perhatikan contoh berikut:

<h2>Aku adalah <small>sebuah judul</small></h2>

<p>
  Ini adalah <small>contoh paragraf</small> di mana <br>
  ada beberapa <br>
  <small>teks yang</small> terlihat <br>
  lebih kecil <small>dari</small> ukuran normal.
</p>

Hasil keluaran:

Gabungan Dari Beberapa Format

Yang terakhir tapi bukan yang paling akhir: kita bisa menggabungkan berbagai pemformatan teks pada HTML secara sekaligus. Misalkan kita bisa menggabungkan antara teks bercetak tebal dengan garis bawah, atau teks stabilo dengan tercoret, teks berukuran kecil yang juga miring, dan lain sebagainya.

Perhatikan contoh berikut:

<p>
  Misalkan kita bisa <b><u><i>menggabungkan</i></u></b>
  antara teks bercetak tebal <b><u>dengan garis bawah</u></b>,
  atau teks <mark><s>stabilo dengan tercoret</s></mark>
  dan lain sebagainya.
</p>

Hasil keluaran:

Kesimpulan

Kesimpulannya, HTML memberikan kita keleluasaan untuk mengatur dan memformat sebuah teks yang ditampilkan pada layar agar terlihat lebih menarik serta memiliki “makna lebih”.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang tag frasa pada dokumen HTML.

Stay tune!

Referensi

[1] https://www.geeksforgeeks.org/difference-between-i-and-em-tag-of-html/ – diakses tanggal 11 Juni 2021

10. Frasa Teks

HTML Dasar: Frasa Teks

Pada pertemuan kali ini kita masih membahas tag-tag HTML yang berhubungan dengan teks atau frasa.

Tag HTML frasa merupakan tag-tag khusus dengan tujuan untuk memperjelas bahwa suatu kata atau kalimat memiliki “makna” tertentu. Seperti misalnya tag <address> berarti merepresentasikan sebuah alamat dan tag <dfn> berarti sebuah definisi atau istilah khusus.

Beberapa tag yang akan kita bahas kali ini mungkin sudah pernah kalian temukan pada pertemuan-pertemuan sebelumnya.

Mari kita coba satu persatu!

Tag Empasis <em>

Yang pertama adalah tag empasis (<em>). Ia berfungsi untuk memberikan penekanan terhadap suatu kata atau kalimat. Dan output yang dihasilkan dari tag <em> akan dicetak miring.

Perhatikan contoh berikut;

Teks empasis digunakan untuk
<em>melakukan penekanan<em> terhadap suatu kata/kalimat.

Hasi keluaran:

Tag Stabilo <mark>

Berikutnya adalah tag <mark> untuk memberi tanda pada suatu kata atau kalimat yang penting.

Tag ini telah kita bahas pada pertemuan sebelumnya tentang pemformatan teks. Di mana teks atau kalimat yang berada di dalam element <mark> akan ditandai dengan warna kuning seperti halnya stabilo.

Perhatikan contoh berikut:

<h1>Penggunaan <mark>stabilo</mark></h1>

<p>
  Untuk hal-hal yang bersifat penting, kita bisa
  <mark>memanfaatkan fitur stabilo</mark>.
</p>

Hasil keluaran:

Kita juga bisa memanfaatkan style CSS background atau background-color untuk menggunakan warna lain semisal warna pink, orange, magenta, cyan dan lain sebagainya.

Perhatikan contoh berikut;

<p>
  <mark style="background: pink">Ini adalah</mark> sebuah teks penting
</p>
<p>
  Ini adalah <mark style="background: orange">sebuah teks</mark> penting
</p>
<p>
  Ini adalah sebuah <mark style="background: magenta">teks</mark> penting
</p>
<p>
  Ini adalah sebuah teks <mark style="background: orange">penting</mark>
</p>

Hasil keluaran:

Tag Strong <strong>

Berikutnya adalah tag <strong>, ia berfungsi untuk memberikan penekanan terhadap suatu kata atau kalimat.

Kata atau kalimat yang berada di dalam element <strong> akan dicetak tebal.

Tag <strong> mirip dengan tag <b>, sama-sama membuat teks menjadi tercetak tebal. Akan tetapi tag <strong> memiliki makna bahwa suatu teks memang penting dan layak untuk diberikan penekanan lebih.

Perhatikan contoh berikut:

Kita bisa menggunakan tag strong untuk <strong>memberikan
penekanan terhadap suatu kata</strong>.

Hasil keluaran:

Tag Singkatan <abbr>

Berikutnya kita bisa membuat kata singkatan (atau abbreviation) menggunakan tag <abbr>.

Kita juga bisa menambahkan atribut title pada tag <abbr> agar ketika teks di-hover, tooltip akan muncul.

Perhatikan contoh berikut:

Apakah kalian menyukai
<abbr title="Hypertext Markup Language">HTML</abbr>?

Hasil keluaran:

Perhatikan kata HTML di atas, terdapat garis titik-titik di bawahnya, dan jika kita arahkan mouse ke tulisan tersebut, browser akan menampilkan tooltip Hypertext Markup Language.

Tag Untuk Istilah Spesial / Definisi <dfn>

Berikutnya kita bisa mengapit teks berisi sebuah istilah tertentu menggunakan tag <dfn>.

Perhatikan contoh berikut:

<p>
  <dfn>HTML</dfn> adalah sebuah bahasa markup yang mendefinisikan
  struktur dokumen web
</p>

Hasil keluaran:

Tag Quote <blockquote>

Berikutnya kita bisa menulis quote pada suatu kalimat / paragraf menggunakan tag <blockquote>.

Perhatikan contoh berikut:

<p>Terdapat sebuah pribahasa:</p>
<blockquote>
  Berakit-rakit ke hulu, berenang-renang ketepian.
  Bersakit-sakit dahulu, bersenang-senang kemudian.
</blockquote> 
<p>
  Yang berarti kita harus berjuang terlebih dahulu
  sebelum menikmati hasil
</p>

Hasil keluaran:

Atau dengan CSS, kita bisa mengubah teks <blockquote> hingga ditampilkan seperti berikut:

Tag Quote Singkat <q>

Selain menggunakan tag <blockquote>, kita juga bisa menggunakan tag <q> untuk mengutip suatu kata atau kalimat dengan tanda petik.

Perhatikan contoh berikut:

Banyak orang bilang bahwa HTML bukanlah <q>bahasa pemrograman</q>.

Hasil keluaran:

Tag Untuk Kode Pemrograman <code>

Berikutnya jika kita ingin menampilkan potongan kode pemrograman, kita bisa menggunakan tag <code>.

Yang perlu diperhatikan adalah bahwa tag <code> bersifat inline, sehingga ia tidak membuat baris baru pada suatu dokumen.

Perhatikan contoh berikut:

<p>
  Di dalam bahasa pemrograman python, fungsi <code>len()</code>
  dipanggil untuk mendapatkan panjang suatu list, string,
  tuple, dan objek iterable lainnya.
</p>

Hasil keluaran:

Tag Untuk Tombol Keyboard <kbd>

Berikutnya, kita bisa menggunakan tag <kbd> untuk memberitahu user tentang sebuah kombinasi tombol keyboard seperti misalnya Ctrl+C atau Ctrl+V

Perhatikan contoh berikut:

Hendaknya para mahasiswa tidak mengandalkan <kbd>Ctrl+C</kbd>
dan <kbd>Ctrl+V</kbd> ketika mengerjakan tugas.

Hasil keluaran:

Tag Alamat <address>

Berikutnya kita bisa menggunakan tag <address> untuk memberikan “makna” bahwa suatu teks merupakan sebuah alamat.

Perhatikan contoh berikut:

Budi tinggal di: <address>Jl Mawar Melati</address>.

Hasil keluaran:

Dari keluaran di atas kita bisa simpulkan bahwa tag <address> merupakan block tag di mana browser akan membuat baris baru pada elemen tersebut.

Sitasi Sumber <cite>

Berikutnya kita bisa mengutip perkataan seseorang, atau mengutip sebuah jurnal, buku, dan lain-lain menggunakan tag <cite>.

Perhatikan contoh berikut:

<blockquote>
  Beri aku 1.000 orang tua, niscaya akan kucabut semeru
  dari akarnya, dan beri aku 10 pemuda niscaya akan
  kuguncangkan dunia
</blockquote>

<cite>–Soekarno–</cite>

Hasil keluaran:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang tag tautan (link) pada dokumen HTML.

Stay tune!

11. Link

HTML Dasar: Link

Sebuah situs web umumnya adalah kumpulan dari dokumen-dokumen HTML. Masing-masing halaman/dokumen saling berkaitan satu sama lain.

Contoh yang paling dasar adalah: sebuah halaman web biasanya memiliki minimal 3 buah halaman:

1. Halaman home di url /index.html
2. Halaman tentang kami di url /tentang-kami.html
3. dan Halaman kontak di url /kontak.html

Sebagai user, kita bisa mengunjungi halaman-halaman tersebut langsung dengan menuliskan alamatnya di dalam browser. Akan tetapi cara ini tentu saja tidak efisien, selain kita harus buang waktu untuk mengetik url, kita juga harus menghafal url-url tersebut.

Oleh karena itu HTML memberikan kita sebuah fitur yang bernama hyperlink atau anchor tag.

Apa itu Hyperlink atau Anchor Tag?

Hyperlink merupakan sebuah teks atau tombol di dalam dokumen HTML yang kalau kita klik, ia akan membawa kita menuju halaman lain.

Jadi kalau kita misalkan mengklik menu Home, browser akan membawa kita ke halaman home. Jika kita mengklik menu About, browser akan membawa kita ke halaman about dan seterusnya, maka menu-menu tersebut dikatakan sebuah hyperlink atau lebih singkatnya sering juga disebut sebagai link.

Di dalam HTML, link didefinisikan dengan tag <a> yang merupakan singkatan dari anchor yang berarti jangkar.

Atribut href

Tag <a> setidaknya harus memiliki satu atribut yaitu atribut href, di mana pada atribut tersebut kita akan mendefinisikan URL dari link yang kita buat.

Perhatikan contoh berikut:

<p>Kita bisa mengunjungi sosial media melalui link berikut:</p>

<p>
  <a href="https://facebook.com">Facebook</a> <br>
  <a href="https://instagram.com">Instagram</a> <br>
  <a href="https://twitter.com">Twitter</a>
</p>

Hasil keluaran:

Jika kita mengklik link-link di atas, browser akan mengarahkan kita ke URL yang terdapat pada atribut href.

Tampilan Link

Secara default, link pada setiap browser akan ditampilkan dengan ketentuan berikut:

• Link yang belum pernah dikunjungi akan ditampilkan dengan warna biru dan memiliki garis bawah.
• Link yang sudah pernah dikunjungi akan ditampilkan dengan warna ungu dan memiliki garis bawah.
• Dan link yang dalam keadaan aktif akan berwarna merah dan memiliki garis bawah.

Untuk mencoba link yang sedang aktif, kita bisa mengklik sebuah link lalu menahannya, kemudian link yang kita tahan tersebut warnanya akan berubah menjadi merah.

Tentu saja, kita bisa mengatur tampilan sebuah link dengan CSS.

Perhatikan contoh berikut:

<a
  href="http://facebook.com"
  style="background-color: #3b5998; color: white;
    padding: .5rem 1.25rem; border-radius: .3rem;
    text-decoration: none">
  Facebook
</a>

Hasil keluaran:

Lebih terlihat seperti tombol bukan?

Atribut target

Berikutnya, tag <a> memiliki atribut target yang bisa kita isi dengan beberapa nilai:

• _self - ini adalah default. Link akan dibuka di halaman yang sedang aktif.
• _blank - link akan dibuka dalam tab baru.
• _parent - link akan dibuka pada parent frame (jika suatu dokumen dimuat dalam <iframe>)
• _top - link akan dibuka pada frame paling atas (jika suatu dokumen dimuat dalam <iframe> bertingkat)

Perhatikan contoh berikut:

<h1>Contoh link berdasarkan targetnya:</h1>

<p>
  <a href="https://jagongoding.com/web/html/dasar/overview">
    Tutorial HTML Dasar (self)
  </a>
</p>
<p>
  <a
    href="https://jagongoding.com/web/php/dasar/overview"
    target="_blank">
    Tutorial PHP Dasar (blank)
  </a>
</p>
<p>
  <a
    href="https://jagongoding.com/python/dasar/overview"
    target="_parent">
    Tutorial Python Dasar (parent)
  </a>
</p>
<p>
  <a
    href="https://jagongoding.com/python/menengah/overview"
    target="_top">
    Tutorial Python Menengah (top)
  </a>
</p>

Hasil keluaran:

Pada contoh di atas mungkin nilai _self, _top dan _parent tidak terlihat bedanya. Ketiganya sama-sama membuka link pada halaman yang sedang aktif (halaman yang sedang teman-teman buka sekarang). Akan tetapi jika kita mengklik link dengan target _blank, browser akan membawa kita menuju sebuah tab baru.

Atribut title

Berikutnya kita bisa menambahkan atribut title pada tag <a>.

Fungsi dari atribut title adalah untuk menampilkan sebuah tooltip ketika user mengarahkan kursornya ke atas sebuah link.

Perhatikan contoh berikut:

<p>
  Untuk lebih lengkapnya silakan kunjungi
  halaman <a href="https://jagongoding.com/python"
  title="Tutorial Python">berikut</a>
</p>

Hasil keluaran:

Teman-teman bisa mengarahkan kursor di atas tulisan berikut, nanti browser akan menampilkan sebuah tooltip dengan tulisan Tutorial Python.

URL Relatif vs URL Absolut

Berikutnya adalah perbedaan antara URL relatif dan URL absolut.

URL absolut adalah URL yang ditulis secara lengkap mulai dari domain dan path-nya.

Ada pun URL relatif adalah URL yang hanya ditulis path-nya saja tanpa domain. Dan browser akan otomatis menganggap domain dari link tersebut adalah domain dari situs yang sedang kita buka.

Perhatikan contoh berikut:

<h4>Contoh URL lengkap</h4>

<a href="https://jagongoding.com/python/dasar/overview">
  Tutorial Python
</a>

<h4>Contoh URL relatif</h4>

<a href="/web/php/dasar/overview">
  Tutorial PHP
</a>

Hasil keluaran:

Membuat Link Berupa Gambar

Selain link berupa teks, kita juga bisa membuat link yang berupa gambar.

Caranya sangat mudah yaitu kita hanya perlu meletakkan tag <img> di dalam tag <a>.

Perhatikan contoh berikut:

<a href="/">
  <img src="https://jagongoding.com/images/jagongoding-logo-full.png">
</a>

Hasil keluaran:

Membuat Link ke Alamat Email

Selain link yang mengarah ke sebuah halaman web (dengan protokol http mau pun https), sebuah link juga bisa mengarah ke sebuah email.

Kita bisa melakukan hal tersebut dengan menulis mailto:{alamat-email} di dalam atribut href.

Perhatikan contoh berikut:

<p>
  Silakan hubungi email berikut:
</p>

<a href="mailto:indonesiagoid@mail.​kominfo.go.id">
  indonesiagoid@mail.​kominfo.go.id
</a>

Hasil keluaran:

Jika kalian klik link email di atas, sistem akan mengarahkan ke aplikasi pembuka email (tergantung dari konfigurasi OS masing-masing pengguna).

Membuat Link ke Nomor Telpon

Yang terakhir tapi bukan yang paling akhir, kita juga bisa membuat link yang mengarah ke sebuah nomor telpon. Yang mana jika kita klik link tersebut, browser akan mengarahkan kita untuk langsung menghubungi (menelpon) nomor tersebut (tentunya hal ini hanya bisa dilakukan jika dokumen HTML dibuka lewat perangkat ponsel).

Untuk membuat link yang mengarah ke sebuah nomor telpon, kita bisa menulis tel:{nomor-telpon} pada atribut href.

Perhatikan contoh berikut:

Silakan hubungi ambulan di nomor
telpon <a href="tel:118">118</a>

Hasil keluaran:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang macam-macam cara menampilkan gambar pada dokumen HTML.

Stay tune!

12. Menampilkan Gambar

HTML Dasar: Berbagai Cara Menampilkan Gambar

Sebuah halaman web tidak mungkin bisa dipisahkan dengan gambar. Halaman web yang berisi hanya teks tanpa gambar akan membuat pengunjung bosan, kalau pengunjung bosan, ia tidak akan betah berlama-lama dan akan buru-buru menekan tombol close tab.

Oleh karena itu: menambahkan gambar ke dalam halaman website adalah suatu yang esensial.

Ada beberapa cara untuk menampilkan gambar di dalam sebuah dokumen HTML.

Tag <img>

Cara yang pertama dan yang paling umum adalah menggunakan tag <img>. Tag <img> membutuhkan setidaknya satu buah atribut yaitu atribut src.

Di mana dalam atribut tersebut, kita mendefinisikan url atau alamat dari gambar yang ingin kita tampilkan.

Misalkan kita ingin menampilkan sebuah gambar dengan url:

https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp

Kita bisa melakukannya seperti ini:

<h3>Tutorial Python Dasar</h3>

<img src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

Hasil keluaran:

Mengatur Ukuran Gambar

Kita bisa mengatur ukuran gambar pada tag <img> dengan dua cara:

1. Menambahkan atribut width atau height.
2. Atau melakukannya dengan CSS.

Perhatikan contoh berikut:

<h3>Mengatur ukuran gambar dengan atribut width/height</h3>

<img
  width="100"
  height="100"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

<h3>Mengatur ukuran gambar dengan css width/height</h3>

<img
  style="width: 150px; height: 150px"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

Hasil keluaran:

Kalau kita perhatikan hasil di atas, gambarnya terlihat penyet karena ukuran rasionya tidak sesuai.

Untuk menghindari hal tersebut, kita bisa mengatur salah satu atribut dengan ukuran auto.

Perhatikan contoh berikut:

<h3>Tinggi auto</h3>

<img
  width="150"
  height="auto"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

<h3>Lebar auto</h3>

<img
  width="auto"
  height="200"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

Hasil keluaran:

Pada output di atas, kedua gambar yang kita tampilkan sudah tidak penyet lagi.

Atribut Alternatif alt

Selain atribut height dan width, kita juga bisa menggunakan atribut alt yang berarti alternatif.

Alternatif dari apa?

Alternatif jika gambar yang kita tampilkan ternyata tidak bisa tampil, baik karena koneksi internet bermasalah atau karena url gambar yang kita tulis ternyata tidak benar.

Nah, dalam kondisi ini, browser akan menampilkan isi dari atribut alt sebagai gantinya.

Perhatikan contoh di bawah:

<h3>Upacara Bendera</h3>

<img
  src="url-random.jpeg"
  alt="Ini gambar tiang bendera">

Pada contoh di atas, kita akan menampilkan gambar dengan alamat url-random.jpeg yang sebenarnya tidak ada wujudnya, sehingga browser akan menampilkan tag alt sebagai gantinya.

Perhatikan hasil keluaran berikut:

Bandingkan jika tag <img> ditulis tanpa atribut alt:

<h3>Upacara Bendera</h3>

<img
  src="url-random.jpeg">

Hasil keluaran:

Tidak ada tulisan apa pun, hanya ada gambar pigora pecah.

Tag <figure>

Selain tag <img> “telanjang”, kita juga bisa menambahkan tag <figure> sebagai pembungkus.

Dengan tag <figure>, kita bisa memberikan caption pada gambar yang kita tampilkan.

Perhatikan contoh berikut:

<h3>Gambar Tanpa Caption</h3>

<img
  width="150"
  height="auto"
  src="/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

<h3>Gambar Dengan Caption</h3>

<figure>
  <img
    width="150"
    height="auto"
    src="/storage/2020/09/python-dasar/tutorial-python-dasar.webp">
  <figcaption>
    Gambar 1: tutorial belajar python untuk pemula
  </figcaption>
</figure>

Hasil keluaran:

Secara default tag <figure> akan menambah jarak sebelah kiri beberapa pixel, kita bisa mengaturnya lebih lanjut dengan CSS.

Tag <picture>

Yang terakhir tapi bukan yang paling akhir, kita bisa menampilkan lebih dari satu gambar sesuai dengan ukuran layar.

Maksudnya: untuk layar ukuran besar (desktop), kita bisa meminta browser untuk menampilkan gambar ukuran besar. Sedangkan untuk layar ukuran kecil (seperti di ponsel), kita bisa meminta browser untuk menampilkan gambar yang kecil.

Teknik ini bisa menghemat kuota internet agar pengguna ponsel tidak terlalu banyak mengunduh data.

Perhatikan contoh berikut:

<h3>Kita punya 2 gambar</h3>

<p>
  Gambar satu: <br>

  <img src="https://jagongoding.com/storage/2021/07/html-gambar/merah.webp">
</p>
<p>
  Gambar dua: <br>

  <img src="https://jagongoding.com/storage/2021/07/html-gambar/biru.webp">
</p>

Hasil keluaran:

Sekarang kita ingin gambar merah akan ditampilkan di desktop, sedangkan gambar biru akan ditampilkan di ponsel.

Kita bisa mengubah kode di atas menjadi seperti ini:

<picture>
  <!-- Ukuran minimum 580px -->
  <source
    media="(min-width: 580px)"
    srcset="https://jagongoding.com/storage/2021/07/html-gambar/merah.webp">

  <!-- Ukuran maksimum 579px -->
  <source
    media="(max-width: 579px)"
    srcset="https://jagongoding.com/storage/2021/07/html-gambar/biru.webp">

  <!-- Default -->
  <img src="https://jagongoding.com/storage/2021/07/html-gambar/merah.webp">
</picture>

Hasil keluaran:

Teman-teman silakan resize ukuran browser (jika pakai desktop) dan lihat bahwa gambar yang ditampilkan browser akan berubah: jika ukuran jendela/layar minimal 580px, gambar yang ditampilkan adalah merah, sedangkan sebaliknya jika ukuran maksimal layar/jendela adalah 579px, maka gambar biru yang akan ditampilkan.

Atau teman-teman juga bisa mencoba membuka artikel ini di HP dan juga di Desktop dan temukan perbedaannya.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas list pada dokumen HTML.

Stay tune!

13. List

HTML Dasar: List

Jika kita menggunakan aplikasi teks prosesor seperti Microsoft Word, Google Docs, mau pun Libre Office, kita pasti akan menemukan sebuah fitur yang bernama list.

List kita gunakan untuk menampilkan teks dalam bentuk daftar, baik itu daftar nama, daftar kontak, daftar isi, kerangka artikel, dan lain sebagainya.

Sama seperti itu, HTML juga menyediakan kita 3 buah tag untuk menampilkan list.

Jenis-Jenis Tag List

Ada tiga jenis tag list pada HTML:

1. Ordered List <ol>
2. Unordered List <ul>
3. Description List <dl>

Mari kita bahas satu persatu.

Ordered List

Yang pertama adalah ordered list, ia merupakan list dengan item terurut.

Ordered list biasanya dimulai dari angka 1 sampai angka ke-n.

Kita bisa membuat ordered list dengan gabungan dari tag <ol> dan <li>.

Perhatikan contoh berikut:

<h2>Contoh List Terurut</h2>

<p>Daftar hobi saya:</p>
<ol>
  <li>Berenang</li>
  <li>Berlari</li>
  <li>Menulis</li>
  <li>Membaca</li>
  <li>Memasak</li>
</ol>

Hasil keluaran:

Kita bisa perhatikan hasil keluaran di atas bahwa di sebelah kiri tiap item, terdapat marker berupa angka dari 1 sampai n.

Atribut Tag <ol>

Tag <ol> memiliki setidaknya 2 atribut:

• atribut type untuk mengatur tipe angka
• atribut start untuk mengatur angka awal

Atribut Type

Atribut type berfungsi untuk mengatur tipe dari angka pada setiap item list.

Terdapat 5 nilai yang bisa kita gunakan untuk atribut type, yaitu:

1. Nilai 1 untuk menampilkan angka 1, 2, 3 dan seterusnya
2. Nilai a untuk menampilkan huruf a, b, c dan seterusnya
3. Nilai A untuk menampilkan huruf A, B, C dan seterusnya
4. Nilai i untuk menampilkan angka romawi i, ii, iii dan seterusnya
5. Nilai I untuk menampilkan angka romawi I, II, III dan seterusnya

Perhatikan contoh berikut:

<h2>a, b, c</h2>
<ol type="a">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
</ol>

<h2>A, B, C</h2>
<ol type="A">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
</ol>

<h2>i, ii, iii</h2>
<ol type="i">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

<h2>I, II, III</h2>
<ol type="I">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

Hasil keluaran:

Atribut Start

Selain itu, kita bisa menggunakan atribut start untuk memulai list tidak dari angka 1 akan tetapi langsung dari angka tertentu.

Perhatikan contoh berikut:

<h2>List Langsung Dari 10</h2>
<ol start="10">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

Hasil keluaran:

Sayangnya atribut start hanya bisa kita gunakan untuk tipe angka.

<h2>List Langsung Dari K (Tidak Bisa)</h2>
<ol type="a" start="k">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

Hasil Keluaran:

Pada contoh di atas, kita telah memberi nilai k pada atribut start akan tetapi list tersebut tetap dimulai dari huruf a.

Unordered List

Jenis list berikutnya yang bisa kita gunakan adalah unordered list atau list tak terurut.

Untuk membuatnya, kita bisa menggunakan gabungan dari tag <ul> dan tag <li>.

Perhatikan contoh berikut;

<h2>Contoh list tak terurut</h2>

<p>Saya suka makan:</p>
<ul>
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

Hasil Keluaran:

Atribut Type

Kalau kita perhatikan hasil keluaran di atas, di sebelah kiri tiap item terdapat marker berupa bulat-bulat lingkaran warna hitam.

Kita bisa mengganti bagian tersebut menggunakan atribut type pada tag <ul>.

Atribut <type> memiliki 4 buah nilai, yaitu:

1. disc - ini adalah bulat-bulat default
2. circle - mengatur marker agar menggunakan lingkaran (bolong)
3. square - mengatur marker menjadi persegi
4. none - tanpa marker

Perhatikan contoh berikut:

<h2>Marker disc</h2>

<ul type="disc">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

<h2>Marker circle</h2>

<ul type="circle">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

<h2>Marker square</h2>

<ul type="square">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

<h2>Marker none</h2>

<ul type="none">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

Hasil Keluaran:

Custom Gambar

Selain itu, kita juga bisa menggunakan CSS untuk membuat marker berupa gambar.

Perhatikan contoh berikut:

<style>
  ul {
    list-style-image: url(https://ik.imagekit.io/jagongoding/images/jagongoding-logo.png?tr=w-15);
  }
</style>

<p>Aku ingin belajar:</p>
<ul>
  <li>PHP</li>
  <li>Python</li>
  <li>HTML</li>
  <li>Linux</li>
</ul>

Hasil Keluaran:

Pada contoh di atas kita telah mengganti marker dari tiap item menjadi image dengan url: https://ik.imagekit.io/jagongoding/images/jagongoding-logo.png?tr=w-15.

Description List

Jenis list yang berikutnya adalah description list. Ia merupakan sebuah list dengan sifat deskriptif, kita gunakan untuk menjelaskan sesuatu baik istilah, nama, dan lain sebagainya.

Ada 3 sintaks yang kita gunakan untuk membuat description list:

1. <dl> untuk parent-nya
2. <dt> untuk teks istilah
3. <dd> untuk teks deskripsi

Perhatikan contoh berikut:

<dl>
  <dt>PHP</dt>
  <dd>adalah bahasa pemrograman untuk membuat website</dd>

  <dt>Python</dt>
  <dd>adalah bahasa pemrograman sederhana dengan tujuan umum</dd>

  <dt>HTML</dt>
  <dd>
    adalah bahasa markup untuk mendefinisikan struktur
    halaman website
  </dd>
</dl>

Hasil Keluaran:

List Bersarang / Bertingkat

Yang terakhir dan bukan yang paling akhir: sebuah list di dalam HTML bisa bersifat nested atau bertingkat.

Alias: di dalam list masih ada list lagi.

Hal ini sangat umum kita jumpai di dalam aplikasi pemrosesan teks. Akan tetapi, bagaimana cara membuatnya di dalam HTML?

Cara membuatnya gampang: kita hanya perlu membuat list baru di dalam tag <li>.

Perhatikan contoh berikut:

<ol>
  <li>
    Pendahuluan
    <ol>
      <li>Latar Belakang</li>
      <li>Rumusan Masalah</li>
      <li>Batasan Masalah</li>
      <li>Tujuan</li>
      <li>Manfaat</li>
    </ol>
  </li>
  <li>
    Daftar Pustaka
    <ol>
      <li>Teori</li>
      <li>Hipotesis</li>
    </ol>
  </li>
</ol>

Hasil Keluaran:

Contoh untuk <ul>:

<ul>
  <li>
    Makanan favorit
    <ul>
      <li>Nasi Goreng</li>
      <li>Nasi Pecel</li>
    </ul>
  </li>
  <li>
    Minuman favorit
    <ul>
      <li>
        Kopi

        <ul>
          <li>Kopi Hitam</li>
          <li>Kopi Susu</li>
        </ul>
      </li>
      <li>Jus Tomat</li>
    </ul>
  </li>
</ul>

Hasil Keluaran:

Kita juga bisa menggabungkan antara <ul> dan <ol> secara bersamaan:

<ul>
  <li>
    Makanan favorit
    <ol>
      <li>Nasi Goreng</li>
      <li>Nasi Pecel</li>
    </ol>
  </li>
  <li>
    Minuman favorit
    <ol>
      <li>
        Kopi

        <ul>
          <li>Kopi Hitam</li>
          <li>Kopi Susu</li>
        </ul>
      </li>
      <li>Jus Tomat</li>
    </ol>
  </li>
</ul>

Hasil Keluaran:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas cara membuat tabel pada dokumen HTML.

Stay tune!

14. Table

HTML Dasar: Belajar Membuat Table

Dengan memanfaatkan tabel, kita bisa menampilkan data kepada user dalam bentuk kolom dan baris.

Seperti ini:

Mari kita perhatikan tabel di atas.

Tabel di atas memiliki:

• 4 buah kolom (No, Nama, Jenis Kelamin, dan Asal).
• 7 buah baris (baris pertama dihitung 1)
• dan memiliki 28 sel (4 kolom x 7 baris).

Di dalam HTML, kita bisa membuat tabel dengan berbagai macam konfigurasi dan kustomisasinya. Seperti memberi warna, mengatur jarak, panjang kolom, mengatur border, dan lain sebagainya.

Kurang lebih pengaturan tabel di HTML sama saja seperti pengaturan tabel di dalam aplikasi pemrosesan teks semisal Microsoft Word, Google Docs, Libre Office dan lain sebagainya.

Cara Membuat Tabel di HTML

Untuk membuat tabel di dalam HTML, kita membutuhkan tag-tag berikut:

1. Tag <table>
2. Tag <thead>
3. Tag <tbody>
4. Tag <tfoot>

Tag <table> sebagai kontainer.

Sedangkan tag <thead> sebagai tempat kita meletakkan nama kolom (baris paling atas sendiri).

Dan tag <tbody> adalah tempat kita menampilkan data.

Dan yang terakhir adalah tag <tfoot> untuk membuat “footer” atau bagian bawah dari suatu tabel.

4 tag di atas adalah tag yang mendefinisikan struktur dasar untuk setiap bagian dari tabel.

Sedangkan untuk mendefinikan baris dan kolom, kita membutuhkan tag-tag berikut:

• Tag <tr> (table row) untuk mendefinisikan tiap baris pada tabel.
• Tag <td> (table data) untuk mendefinisikan tiap sel pada tabel.
• Tag <th> (table head) untuk mendefinisikan tiap nama kolom pada tabel.

Perhatikan contoh berikut:

<table>
  <!-- Bagian kepala tabel -->
  <thead>
    <tr>
      <th>Baris</th>
      <th>Kolom</th>
    </tr>
  </thead>
  <!-- Bagian body tabel -->
  <tbody>
    <tr>
      <td>Sel 1</td>
      <td>Sel 2</td>
    </tr>
    <tr>
      <td>Sel 3</td>
      <td>Sel 4</td>
    </tr>
    <tr>
      <td>Sel 5</td>
      <td>Sel 6</td>
    </tr>
  </tbody>
</table>

Kode HTML di atas akan menghasilkan keluaran seperti berikut:

Memberi Garis (Border)

Pada output di atas, tabel yang kita buat tidak memiliki border atau garis.

Kita bisa menambah dan mengatur ukuran baris pada tabel dengan menambahkan atribut border.

Pada kode HTML sebelumnya, coba ubah tag pembuka tabel menjadi seperti ini:

<table border="1">
  ...
</table>

Kode di atas akan membuat tabel kita memiliki border dengan ukuran 1 piksel.

Berikut ini hasil keluarannya:

Lebih asik bukan?

Tapi masih ada yang kurang, tabelnya terlalu mepet!

Memberi Jarak Antar Sel dan Konten (padding)

Agar tabelnya tidak terlalu mepet, kita bisa memberikan jarak dengan menambahkan atribut cellpadding pada tag <table>.

Ubah kode HTML sebelumnya menjadi:

<table border="1" cellpadding="5">
  ...
</table>

Atribut cellpadding="12" di atas akan memberi instruksi agar kepada browser agar memberikan jarak (padding) 5px kepada tabel kita.

Berikut ini hasil keluarannya:

Sekarang tabelnya sudah terlihat lebih lega.

Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)

Selain mengatur jarak antara konten dan sel menggunakan atribut cellpadding, kita juga bisa melakukan hal sebaliknya yaitu memberi jarak antar satu sel dengan sel lainnya menggunakan atribut cellspacing.

Perhatikan contoh berikut:

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

Hasil keluaran:

Bagian Footer Table

Berikutnya kita bisa menambahkan footer pada suatu table dengan menambahkan tag <tfoot>.

Tag <tfoot> hampir sama dengan tag <thead>, hanya saja ia ditempatkan di bagian paling bawah.

Coba ubah kode table sebelumnya menjadi seperti ini:

<table border="1" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

Hasil keluaran:

Mengatur Panjang Tabel

Berikutnya kita bisa memanfaatkan atribut width untuk mengatur panjang tabel.

Kita bisa mengaturnya dengan berbagai macam satuan semisal pixel, atau juga bisa menggunakan persentase.

Berikut ini contoh mengubah tabel dengan atribut width:

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

Hasil keluaran:

Menggabungkan Sel

Berikutnya kita bisa melakukan merge cells pada tabel. Ia merupakan teknik menggabungkan dua atau lebih sel menjadi satu.

Ada dua tipe penggabungan sel pada tabel HTML:

1. Penggabungan kolom dengan colspan.
2. Penggabungan baris dengan rowspan.

Colspan

Dengan atribut colspan, kita akan mengubah tabel seperti ini:

Menjadi seperti ini:

Berikut ini kode programnya sebelum colspan:

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

Dan setelah colspan:

<table>
  <thead>
    <tr>
      <th colspan="2">Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  ...
</table>

Rowspan

Sedangkan dengan atribut rowspan, kita bisa mengubah tabel seperti ini:

Menjadi seperti ini:

Kode program asli sebelum rowspan:

<table>
  <tbody>
    <tr>
      <td>4</td>
      <th>x</th>
      <td>5</td>
      <th>=</th>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>25</td>
    </tr>
    <tr>
      <td>6</td>
      <td>5</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Kode program asli setelah pakai rowspan:

<style>
  th {
    vertical-align: middle;
  }
</style>

<table>
  <tbody>
    <tr>
      <td>4</td>
      <th rowspan="3">x</th>
      <td>5</td>
      <th rowspan="3">=</th>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>25</td>
    </tr>
    <tr>
      <td>6</td>
      <td>5</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Pada kode di atas kita menambahkan style vertical-align: middle; agar teks x dan = diletakkan pada tengah sel secara vertikal.

Gabungan Antara Rowspan dan Colspan

Berikutnya kita bisa membuat tabel yang lebih kompleks lagi dengan menggabungkan antara rowspan dan colspan.

Sehingga tabel yang awalnya terlihat seperti ini:

Menjadi seperti ini:

Kode program dari tabel yang kedua adalah seperti berikut:

<table>
  <thead>
    <tr>
      <th colspan="2">Nama</th>
      <th rowspan="2">Asal</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
      <td>Makassar</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
      <td>Semarang</td>
    </tr>
    <tr>
      <td>Doni</td>
      <td>Sutrisno</td>
      <td>Jogja</td>
    </tr>
  </tbody>
</table>

Teman-teman bisa menghapus rowspan dan colspan agar tabel di atas terlihat struktur aslinya.

Cara Mewarnai Tabel

Sebenarnya kita bisa memanfaatkan atribut bgcolor pada tag <table>, <td>, mau pun <th> untuk mengubah warna latar dari sebuah tabel, baik secara keseluruhan atau pun pada sel tertentu.

Atau kita juga bisa menggunakan atribut bordercolor untuk mengatur warna border pada tabel.

Tapi, sayangnya, atribut-atribut tersebut sudah deprecated alias kadaluarsa pada HTML5 dan sudah harusnya kita ganti dengan penggunaan CSS.

Berikut ini contoh mewarnai tabel, border, dan mengatur padding dengan CSS:

<style>
  table {
    background-color: #bfffcd;
    color: #2e733d;
    border-collapse: collapse;
  }

  table, th, td {
    border: 1px solid #2e733d;
  }

  table td, table th {
    padding: 10px;
  }
</style>

<table>
  <tbody>
    <tr>
      <th>Nama</th>
      <td>:</td>
      <td>Nurul Huda</td>
    </tr>
    <tr>
      <th>Asal</th>
      <td>:</td>
      <td>Jawa Timur</td>
    </tr>
  </tbody>
</table>

Hasil keluaran dari kode di atas adalah:

Catatan Deprekasi di HTML5

Banyak dari tutorial-tutorial HTML yang beredar di internet masih menyertakan cara-cara yang sudah kadaluarsa. Yang dimaksud kadaluarsa adalah cara-cara tersebut sudah bukan lagi masuk pada spesifikasi HTML5.

Menurut MDN Web Docs, ada beberapa atribut yang berhubungan dengan tabel yang seharusnya sudah tidak dipakai lagi di HTML5.

Berikut ini daftar atribut yang telah deprecated:

• align

  Bisa diganti CSS text-align

• bgcolor

  Bisa diganti dengan CSS background-color

• border

  Bsa diganti dengan CSS border

• cellpadding

  Bisa diganti dengan CSS padding pada <td> atau <th>

• cellspacing

  Bisa diganti dengan CSS border-spacing dan border-collapse

• width

  Bisa diganti dengan CSS width

• frame

• summary

• rules

Kenapa pada tutorial ini kita masih menggunakan beberapa atribut yang sudah kadaluarsa?

Jawabannya adalah: karena kita masih belum masuk pembahasan CSS dan juga agar kita mengenal sejarah sintaks lama HTML.

Kesimpulan

Di dalam dokumen HTML, kita bisa menyajikan data dalam bentuk tabel. Tabel didefinisikan dengan tag <table> sebagai kontainer, lalu tag <thead> untuk bagian header, tag <tbody> untuk bagian body table, dan tag <tfoot> untuk bagian footer.

Sedangkan untuk membuat baris pada tabel kita menggunakan tag <tr>, dan untuk cell-nya kita bisa menggunakan baik tag <td> atau pun tag <th>.

Selain itu, kita juga bisa melakukan merge cells pada HTML dengan memanfaatkan atribut rowspan dan colspan.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara menambahkan CSS ke dalam dokumen HTML.

Stay tune!

Referensi

[1] - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table – diakses tanggal 15 Juli 2021

15. Menambahkan CSS

HTML Dasar: Menambahkan CSS

Pada pertemuan-pertemuan sebelumnya kita telah membahas berbagai macam tag pada HTML, baik yang berhubungan dengan teks, paragraf, gambar, link, list hingga tabel.

Akan tetapi kebanyakan dari elemen atau tag-tag tersebut ditampilkan apa adanya secara default, tanpa adanya sentuhan dari CSS.

Nah, pada pertemuan kali ini kita akan membahas secara singkat tentang cara menambahkan CSS pada dokumen HTML.

Apa itu CSS?

CSS merupakan singkatan dari Cascading Style Sheet, yaitu sebuah susunan kode yang kita gunakan untuk mengatur bagaimana dokumen HTML akan ditampilkan. Yang dimaksud mengatur di sini adalah: mengganti warna, tata letak, border, bayangan, posisi, background, dan lain sebagainya.

Faktanya, semua halaman web pada era ini hampir pasti menggunakan CSS. Sehingga semua situs yang kita jelajahi di internet (termasuk jago ngoding sendiri) adalah contoh penggunaan CSS.

Memasukkan CSS pada HTML

Untuk memasukkan CSS kepada HTML terdapat 3 cara:

1. Menggunakan CSS inline.
2. Menggunakan CSS internal.
3. dan Menggunakan CSS eksternal.

Kalau mau ditambahkan lagi: kita juga bisa mengatur CSS suatu element HTML dengan javascript, umumnya cara ini hanya digunakan pada komponen-komponen yang kompleks misalnya seperti komponen grafik.

1. Menggunakan CSS Inline

Cara pertama dan paling singkat adalah menggunakan CSS Inline.

CSS inline adalah sebuah kode CSS yang kita sematkan pada element apa pun di dalam body HTML, langsung menggunakan atribut style.

Misalkan kita punya dua button yang awalnya seperti ini:

<button>Masuk</button>
<button>Daftar</button>

Masuk Daftar

Kita bisa mengubah gaya dari dua tombol di atas dengan menambahkan atribut style secara langsung seperti ini:

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

Masuk Daftar

Nah, cara di atas dinamakan CSS inline, karena kita langsung menyisipkan CSS pada baris itu juga.

2. Menggunakan CSS Internal

Cara yang kedua adalah menggunakan CSS internal. CSS internal adalah CSS yang diletakkan pada bagian <head> suatu halaman HTML.

Misalkan kita memiliki dua buah link seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Dengan hasil keluaran:

Kita bisa tambahkan tag <style> di bagian <head> seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sehingga hasil keluaran dua tombol di atas menjadi lebih berwarna dan enak dilihat:

Insyaallah kedepannya kita akan membahas CSS lebih detil dalam seri tutorial tersendiri.

3. Menggunakan CSS Eksternal

Dan cara ketiga untuk menambahkan CSS kedalam sebuah halaman HTML adalah menggunakan CSS Eksternal.

Yang dimaksud eksternal adalah kita membuat file tersendiri yang berekstensi .css. Kemudian file tersebut kita hubungkan ke dalam halaman HTML menggunakan tag <link>.

Misalkan kita memiliki struktur direktori seperti berikut:

├── index.html
└── style
    └── app.css

Jadi kita memiliki dua buah file:

1. Yang pertama index.html
2. dan yang kedua adalah style/app.css

Kita bisa menambahkan tag <link> pada bagian <head> yang mengarah kepada file style/app.css seperti berikut:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Eksternal</title>

  <link rel="stylesheet" href="./style/app.css">
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sedangkan isi dari file style/app.css adalah sebagai berikut:

a {
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

a:first-of-type {
  background-color: #1fc296;
}

a:last-of-type {
  background-color: #d45a5a;
}

Catatan: Pada penggunaan CSS eksternal kita tidak perlu menggunakan tag <style>.

Hasil keluaran dari kode di atas adalah:

Catatan: tanda ./ pada ./style/app.css (href tag <link>) menandakan direktori yang sama dengan file index.html. Misalkan file css berada pada “parent” directory, maka kita menggunakan dua buah titik (../) sebagai pengganti.

Misal kita memiliki struktur file seperti ini:

├── blog
│   ├── linux
│   │   └── tutorial-ubuntu.html
│   └── tutorial-python.html
├── index.html
└── style
    └── app.css

Kita memiliki 3 buah file html dan satu buah file css. Maka link yang mengarah ke file css tersebut akan berbeda-beda (relatif terhadap lokasi file yang memanggilnya).

Link pada file index.html akan terlihat seperti kode di bawah:

<link rel="stylesheet" href="./app/style.css">

Sedangkan link pada file blog/tutorial-python.html seperti ini:

<link rel="stylesheet" href="../app/style.css">

Dan yang terakhir, link pada file blog/linux/tutorial-ubuntu.html akan terlihat seperti berikut:

<link rel="stylesheet" href="../../app/style.css">

Link url seperti di atas dinamakan relative uri.

Kapan Menggunakan CSS inline, internal, dan eksternal?

Secara ideal di dalam real project, kita harus selalu menggunakan CSS eksternal.

Kenapa?

Agar susunan file di dalam project kita menjadi lebih rapi. Dan juga: agar kita bisa menggunakan satu file CSS yang sama untuk lebih dari satu halaman HTML.

Akan tetapi, ada kalanya kita lebih memilih penggunaan CSS internal mau pun inline. Seperti misalnya ketika kita hanya butuh sedikit CSS pada element tertentu saja, atau hanya pada halaman tertentu saja, maka kita bisa menggunakan CSS internal mau pun CSS inline.

Kesimpulan

HTML adalah kode markup yang digunakan untuk mendefinisikan struktur halaman web. Sedangkan CSS, ia merupakan pelengkap bagi HTML di mana tugasnya adalah memberikan “gaya” atau style kepada halaman HTML agar terlihat lebih bagus dan ramah pengguna.

Untuk menambahkan CSS pada suatu halaman HTML, kita bisa menggunakan 3 buah cara yaitu; inline, internal, dan eksternal.

CSS inline artinya kita menyisipkan CSS secara langsung pada suatu elemen HTML menggunakan atribut style.

Sedangkan CSS internal artinya kita menyisipkan CSS pada bagian <head> menggunakan tag <style>.

Dan yang terakhir CSS eksternal adalah kita membuat satu file khusus dengan ekstensi .css, kemudian memasukkannya ke dalam dokumen HTML menggunakan tag <link>.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang id dan class pada dokumen HTML.

Stay tune!

16. Id dan Class

HTML Dasar: Id dan Class

Pada pertmuan kali ini kita akan membahas 2 buah atribut global pada HTML yaitu atribut id dan atribut class.

Keduanya dikatakan sebagai atribut global karena bisa kita gunakan pada semua elemen HTML.

Mengenal Atribut Global id

Atribut id adalah singkatan dari identifier atau identity. Seperti namanya, ia berfungsi sebagai id / identitas unik dari setiap elemen.

Misal kita memiliki tiga buah tombol:

Login
Register
Logout

Kita bisa memberikan atribut id kepada 3 buah tombol di atas untuk kebutuhan identifikasi lebih lanjut.

Sintaks dan Aturan Nilai Id

Sintaks dari atribut id sama seperti penulisan atribut pada umumnya di dalam dokumen HTML:

<elemen id="nilai">

Dan untuk nilai dari atribut id, kita bisa memberikan nilai sesuka kita asalkan memenuhi aturan berikut:

• harus memiliki setidaknya satu karakter (baik huruf, simbol mau pun angka)
• tidak boleh mengandung karakter putih (seperti spasi, tab, atau ganti baris)

Opsional:

• nilai dari atribut id harus diawali oleh huruf untuk menghindari masalah kompabilitas antar browser [1].

Tambahan:

• Nilai dari atribut id bersifat case sensitive, sehingga nilai Jakarta berbeda dengan jAkArtA.
• Nilai dari atribut id harus unik dalam satu halaman. Kita tidak boleh menggunakan satu id yang sama untuk lebih dari satu elemen.

Fungsi Atribut id

Fungsi atribut id adalah sebagai “pengait” terhadap suatu elemen tertentu pada dokumen HTML.

Sehingga jika kita ingin untuk memanipulasi SATU elemen tertentu pada HTML, baik memanipulasi gaya (style) dengan CSS, atau memberikan aksi dengan javascript (seperti misal ketika elemen tersebut diklik, aksi apa yang akan dilakukan), kita bisa menggunakan pengait id untuk mendapatkan elemen tersebut.

Contoh Penggunaan CSS

Agar lebih jelas, perhatikan 3 tombol HTML berikut:

Login
Register
Logout

Kita akan memberi warna hanya kepada tombol Register, bagaimana caranya?

Yang pertama harus kita lakukan adalah memberikan id kepada tombol register, kemudian menggunakan selector #<nama-id> dengan CSS.

Perhatikan contoh berikut:

<button>Login</button> <br>
<button id="tombol-register">Register</button> <br>
<button>Logout</button> <br>

CSS:

#tombol-register {
  background: red;
  color: white;
  padding: 8px;
}

Hasil keluaran:

Login
Register
Logout

Pembahasan tentang ini masuk dalam materi selector pada CSS.

Contoh Penggunaan Javascript

Pemberian atribut id pada suatu elemen juga bisa kita manfaatkan untuk memberi aksi pada elemen tersebut.

Coba klik tombol berwarna merah ini:

Login
Register
Logout

Aksi di atas merupakan hasil dari kode program berikut:

const tombolRegister = document.querySelector('#tombol-register')

tombolRegister.addEventListener('click', () => {
  alert('tombol merah diklik!')
})

Pemanggilan element tombol register berdasarkan id-nya terjadi pada kode berikut:

document.querySelector('#tombol-register')

Insyaallah kita akan membahas lebih lanjut tentang javascript pada seri tutorial yang akan datang.

Contoh Sebagai Fragment Identifier

Selain itu, atribut id pada dokumen HTML berfungsi sebagai fragment identifier.

Artinya, browser bisa menemukan suatu elemen dengan id tertentu jika URL ditambahkan dengan tanda #<nama-id>.

Contoh yang paling gampang adalah tutorial yang sedang kalian baca ini.

Semua sub-judul pada halaman ini rata-rata menggunakan tag <h2> mau pun <h3>, dan keduanya sama-sama memiliki id, bisa kalian cek melalui inspect element browser.

Misalkan kita mau kembali ke posisi atas, ke bagian sub judul “Mengenal Atribut Global Id”.

Teman-teman bisa kunjungi url di bawah:

/web/html/dasar/id-dan-class/#mengenal-atribut-global-id

Atau jika ingin ke bagian “Sintaks dan Aturan Nilai Id”, tinggal ganti saja url hashtag-nya menjadi seperti ini:

/web/html/dasar/id-dan-class/#sintaks-dan-aturan-nilai-id

Ketika diklik, browser akan melakukan scroll otomatis ke elemen dengan id yang sesuai. Teknik fragment identifier ini saya gunakan hampir di semua tulisan di blog ini untuk fitur Daftar Isi.

Mengenal Atribut Global class

Atribut global berikutnya adalah class. Fungsi dari atribut ini juga sama dengan atribut id: yaitu memberikan CSS dan Javascript akses untuk men-target suatu elemen pada HTML, baik untuk mengubah tampilannya atau untuk menambahkan suatu aksi tertentu.

Sintaks dan Aturan Nilai

Sintaks dari atribut class sama seperti penulisan atribut pada umumnya:

<elemen class="nilai">

Dan untuk nilai dari atribut class, ada beberapa ketentuan:

1. Harus diawali oleh huruf (a-z atau A-Z)
2. Bisa mengandung angka, huruf, dash (-), dan underscore (_)

Kita bisa menggunakan lebih dari satu class dengan memisahkannya menggunakan spasi.

Contoh:

<button class="btn btn-danger">
  Hapus Data
</button>

Pada sintaks di atas, element <button> memiliki dua buah class yaitu:

• btn
• dan btn-danger

Contoh Penggunaan CSS

Untuk melakukan styling CSS berdasarkan nama class suatu elemen, kita bisa menggunakan selector titik . lalu diikuti nama class-nya.

Misalkan kita memiliki css berikut:

.btn {
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.red {
  color: #f5392c;
}

.bg-red {
  background-color: #f5392c;
}

.blue {
  color: #4cc0e0;
}

.bg-blue {
  background-color: #4cc0e0;
}

.white {
  color: #fffafa;
}

Dan kita punya 4 tombol berikut:

Merah Putih Merah Biru Putih Biru

Kita bisa mengubah gaya atau style dari tombol-tombol di atas dengan menambahkan nama class yang sudah didefinisikan di dalam CSS.

Di sini semua tombol saya berikan class btn:

<button class="btn">Merah</button>
<button class="btn">Putih Merah</button>
<button class="btn">Biru</button>
<button class="btn">Putih Biru</button>

Begini hasilnya:

Dan ketika saya tambahkan kelas yang berbeda-beda seperti ini:

<button class="btn bg-red white">Merah</button>
<button class="btn red">Putih Merah</button>
<button class="btn bg-blue white">Biru</button>
<button class="btn blue">Putih Biru</button>

Hasilnya terlihat lebih variatif:

Contoh Penggunaan Javascript

Untuk penggunaan javascript contohnya sama saja.

Kita hanya perlu mengganti selector # menjadi . jika menggunakan fungsi document.querySelector.

Perhatikan contoh berikut:

<button class="tombol">
  Klik <span class="hasil"></span>
</button>

<script>
  const tombol = document.querySelector('.tombol')
  const hasil = tombol.querySelector('.hasil')

  tombol.addEventListener('click', () => {
    hasil.innerHTML = parseInt(hasil) + 1
  })
</script>

Hasil keluaran dari kode di atas adalah seperti ini:

Coba klik tombol di atas dan lihat hasilnya.

Kesimpulan

Atribut id dan atribut class adalah dua buah atribut global yang berfungsi untuk memberikan identitas dan pengelompokan terhadap suatu elemen HTML.

Perbedaan antara keduanya adalah:

• atribut id bersifat unik, nama id tidak boleh dipakai lebih dari satu kali di dalam satu halaman HTML
• sedangkan nilai dari atribut class bisa digunakan berkali-kali.
• atribut id tidak boleh memiliki karakter putih seperti spasi, sedangkan atribut class boleh menggunakan spasi jika satu element memiliki lebih dari satu class.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang tag iframe pada dokumen HTML.

Stay tune!

Referensi

[1] - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#:~:text=Though%20this%20restriction%20has%20been%20lifted%20in%20HTML5%2C%20an%20ID%20should%20start%20with%20a%20letter%20for%20compatibility – diakses tanggal 17 Juli 2021

17. Iframe

HTML Dasar: Iframe

Tag <iframe> pada dokumen HTML adalah sebuah tag yang berfungsi untuk menampilkan sebuah halaman web (HTML) di dalam halaman web yang lain.

Contohnya seperti ini:

Atau seperti ini:

Pada contoh di atas, kita sedang menampilkan iframe yang memuat halaman HTML lain.

Sintaks iframe

Contoh dari sintaks <iframe> adalah sebagai berikut:

<iframe src="url" title="judul"></iframe>

Yang perlu diperhatikan adalah setiap <iframe> harus ditulis dengan tag pembuka dan tag penutup lengkap meskipun ia tidak memiliki konten.

Atribut Tag Iframe

Tag <iframe> memiliki beberapa atribut di antaranya:

• src - untuk memuat halaman dengan url tertentu
• srcdoc - untuk memuat kode HTML secara inline
• title - sebagai tooltip dan akan dibaca oleh screen reader untuk aksesibilitas
• width - lebar element
• height - tinggi element
• loading - untuk pengaturan lazy load atau tidak

Serta atribut global lainnya seperti:

• id
• class
• style
• dan sebagainya

Contoh iframe yang menampilkan url https://jagongoding.com/.

<iframe
  src="https://jagongoding.com/"
></iframe>

Hasil keluaran:

Atau kita juga bisa memuat kode HTML langsung secara inline menggunakan atribut srcdoc.

Perhatikan contoh berikut:

<iframe
  srcdoc="<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h1>"
></iframe>

Hasil keluaran:

Width dan Height

Pada hasil keluaran di atas, ukuran iframe kita nampak kecil. Itu terjadi karena kita tidak mengatur lebar dan tinggi dari iframe tersebut.

Untuk mengaturnya, ada dua cara:

1. Menggunakan atribut width dan height
2. Atau menggunakan CSS width dan height

Contoh menggunakan atribut:

<iframe
  src="https://jagongoding.com/"
  width="100%"
  height="300"
></iframe>

Contoh menggunakan CSS:

<iframe
  src="https://jagongoding.com/"
  style="width: 100%; height: 300px"
></iframe>

Hasil keluaran:

Perilaku Link di Dalam Iframe

Link di dalam <iframe> akan ditangani secara internal di dalam iframe itu sendiri. Jadi misalkan kita meng-klik link yang ada di dalam iframe, maka halaman yang baru akan ditampilkan di dalam iframe itu sendiri, sedangkan halaman parent / induk tidak berubah kemana-mana.

Jika kita ingin link yang ada di dalam iframe ditangani oleh halaman parent, kita bisa menggunakan target _parent atau target _top pada tag <a> seperti yang telah kita pelajari dalam pembahasan macam-macam target link.

Embed Youtube

Di antara fitur iframe yang sering digunakan di dalam dunia web adalah: embedding content.

Salah satunya adalah embed video youtube.

Jika kita ingin memuat video youtube di dalam dokumen HTML, kita bisa klik tombol share yang ada di halaman youtube, kemudian pilih Embed, lalu salin kodenya ke dalam HTML kita.

Pilih tombol share:

Pilih embed:

Lalu salin kodenya:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mzUn6bG3BKM"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Hasil keluaran:

Embed Instagram

Selain youtube, kita juga bisa memuat sebuah postingan instagram dalam dokumen HTML.

Akan tetapi kodenya cukup panjang dan rumit (meskipun ujung-ujungnya pakai iframe juga ketika di-inspect element).

Berikut ini contoh embed gambar dari instagram:

Embed Twitter

Hampir sama seperti instagram, twitter juga bisa kita embed dengan mudah, berikut contohnya:

Embed PDF

Selain itu, tag <iframe> juga bisa kita gunakan untuk meng-embed file PDF.

Kita hanya perlu mengganti src agar mengarah ke sebuah file PDF.

<iframe src="[lokasi-file-pdf.pdf]"></iframe>

Sebagai contoh, saya sudah menyiapkan file pdf sederhana di dalam url /storage/2021/07/html-iframe/belajar-iframe.pdf.

Sehingga untuk menampilkannya dalam iframe, saya hanya perlu menjadikan url tersebut sebagai nilai dari atribut src:

<iframe
  width="100%"
  height="400"
  src="/storage/2021/07/html-iframe/belajar-iframe.pdf"
></iframe>

Hasil keluaran (tidak working di Google Chrome mobile):

Tambahan: Tidak Semua Situs Bisa Kita Embed

Karena hal-hal yang berkaitan dengan sekuritas, sebagian situs tidak bisa kita buka lewat <iframe>. Misalnya saja seperti google.com, facebook.com, dan lain sebagainya.

Jika kita ingin situs kita tidak bisa dimuat melalui iframe, kita harus meng-handle-nya dari sisi server (bukan dari sisi HTML).

Kesimpulan

Iframe adalah sebuah tag / element HTML yang memungkinkan kita untuk memuat halaman web di dalam halaman web yang lain.

Teknik ini seringkali digunakan untuk melakukan embedding content seperti embed video youtube, post instagram, tweet di twitter, dan lain sebagainya.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara menampilkan simbol dan emoji pada HTML.

18. Simbol Dan Emoji

HTML Dasar: Simbol Dan Emoji

Ada banyak sekali simbol-simbol yang tidak bisa kita ketik secara manual (karena tidak ada di keyboard). Sebut saja seperti simbol sigma ∑, simbol copyright ©, mata uang euro €, akar √, atau bahkan sampai emoji seperti 😂😬😁😅😆😎.

Di dalam aplikasi teks prosesor seperti Microsoft Office, Google Docs, atau Libre Office, penulisan simbol atau emoji sangat mudah dilakukan: kita hanya perlu mencari tombol symbol kemudian mengklik simbol yang kita inginkan.

Tangkapan layar untuk menambahkan simbol pada libre office:

Menambahkan Simbol Pada HTML

Terdapat 3 cara untuk menambahkan simbol pada HTML:

1. Cara yang pertama dan yang paling mudah adalah: melakukan copy/paste dari aplikasi lain. Kita bisa mencari sebuah simbol baik dari dokumen web, dari aplikasi teks prosesor, dan lain sebagainya, kemudian menyalinnya ke dalam dokumen HTML kita.

2. Cara yang kedua adalah: menggunakan nama entitas. Sebagian besar simbol memiliki nama entitas. Kita bisa menggunakan paduan sintaks &<nama-entitas>; untuk menampilkan simbol tertentu.

   Misal kita ingin menampilkan simbol dengan nama entitas copy dan euro, kita bisa menuliskannya seperti berikut:

   • € = €
   • © = ©

3. Cara yang ketiga adalah menggunakan kode entitas. Sintaks penulisannya sama seperti jika kita menggunakan nama entitas, kita hanya perlu mengganti namanya dengan kodenya:

   • © = ©
   • € = €

Entitas

Berikut ini adalah contoh karakter entitas pada HTML:

Contoh menggunakan simbol spasi:

<p>Aku             suka makan bakso</p>
<p>Aku &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; suka minum kopi</p>

Hasil keluaran:

Contoh yang salah untuk menampilkan simbol (<) dan (>): ❌❌❌❌

<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>

Hasil keluaran:

Contoh yang benar: ✅✅✅✅

<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>

Hasil keluaran:

Kumpulan Simbol

Lebih lengkapnya: Referensi simbol matematika.

Emoji

Untuk menampilkan emot (emoji) kita juga bisa melakukan 3 cara:

• langsung copy paste dari sumber lain.
• menggunakan kode desimal tiap emoji &#<nomor>;.
• dan menggunakan kode hexadecimal tiap emoji &#x<hexa>.

Perhatikan contoh berikut:

<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>

Hasil keluaran:

Kumpulan Emoji Wajah

Untuk mendapatkan list emoji lebih lengkap silakan kunjungi getemoji.com, kalian tinggal melakukan salin dan tempel dari situs tersebut.

Kesimpulan

Tidak semua simbol dan karakter tersedia di keyboard kita. Oleh karena itu HTML memberikan kita sebuah cara untuk menampilkan simbol, karakter, atau bahkan emoji menggunakan entitas &[kode];.

Selain cara manual seperti itu, kita juga bisa melakukan praktik salin / tempel untuk menambahkan simbol atau emoji yang kita inginkan.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang pengenalan form HTML.

Stay tune!

19. Pengenalan Form

HTML Dasar: Pengenalan Form

Di antara fitur penting dari HTML adalah: tag form. Yaitu sebuah tag yang kita gunakan untuk mengkoleksi inputan dari user, konsep ini sama seperti konsep formulir di dunia nyata.

Umumnya, sebuah website selalu memiliki fitur form, contoh paling umum yang sering kita temui adalah:

• form login
• form sign up
• form komentar di suatu blog / media

Berikut ini contoh form HTML:

Form HTML seperti contoh di atas tersusun dari 4 buah jenis tag yaitu:

1. Tag <form> - sebagai kontainer
2. Tag <input> - sebagai field (kolom isian)
3. Tag <label> - sebagai label
4. dan Tag <button> - sebagai tombol

Mari kita bahas satu per satu.

Elemen <form>

Yang paling utama adalah tag atau element <form>. Ia adalah sebuah tag pembungkus atau kontainer yang merepresentasikan sebuah “formulir” di mana satu formulir bisa memiliki banyak kolom isian.

<form>
  ...
  <!-- berbagai macam kolom isian -->
  ...
</form>

Tag <form> sendiri tidak memiliki tampilan apa pun alias tidak terlihat secara kasat mata, akan tetapi kita tetap harus mendefinisikannya agar formulir yang kita buat bisa bekerja dengan baik.

Elemen <input>

Di dalam HTML, terdapat banyak jenis model isian mulai dari teks, file, ceklis, dan sebagainya yang insyaallah akan kita bahas lebih detil pada beberapa pertemuan berikutnya.

Dan sebagian besar jenis model isian tersebut menggunakan tag <input>.

Perhatikan kode HTML di bawah:

<input type="text" name="nama" value="Soekarno">

Hasil keluaran:

Tag input memiliki 2 buah atribut dasar yaitu:

• type
• dan name.

Atribut type digunakan untuk mendefinisikan tipe isian, sedangkan atribut name adalah sebagai nama dari isian tersebut.

Beberapa jenis tipe isian tag input seperti text (default), radio, checkbox, submit, button dan lain sebagainya:

<!-- tipe teks biasa -->
<input type="text"> 

<!-- tipe pilihan (seperti pilihan a, b, c, d) -->
<input type="radio">

<!-- tipe ceklis -->
<input type="checkbox">

<!-- tombol untuk submit -->
<input type="submit">

<!-- tombol bukan untuk submit -->
<input type="button">

<!--
  atribut tipe yang lain insyaallah akan
  kita bahas pada beberapa pertemuan yg akan datang
-->

Mari kita coba beberapa tipe input di atas.

Kolom Isian Teks

Yang pertama adalah kolom isian teks, ia adalah sebuah tag input dengan atribut type="text" yang berfungsi untuk mengkoleksi isian teks dari user.

Bahkan tanpa menulis type="text" pun, tipe default dari sebuah input adalah text.

Perhatikan kode berikut:

<form>
  <div>
    <label for="nama-depan">Nama Depan</label> <br>
    <input id="nama-depan" name="nama_depan" placeholder="Nama Depan">
  </div>

  <div style="margin-top: 1rem">
    <label for="nama-belakang">Nama Belakang</label> <br>
    <input id="nama-belakang" name="nama_belakang" placeholder="Nama Belakang">
  </div>
</form>

Hasil keluaran:

Pada kode di atas, kita menggunakan elemen <div> untuk membungkus elemen <label> dan <input>. Penggunaan elemen <div> di sini hanya berfungsi agar label dan input ditampilkan di dalam baris baru, jadi tanpa menggunakan <div> pun tidak masalah.

Satu lagi, karena element <label> dan <input> merupakan elemen inline, maka kita harus menggunakan “cara tertentu” (semisal menggunakan tag <br>) agar label dan input ditampilkan dalam baris baru.

Kalau tidak menggunakan div mau pun br (seperti contoh di bawah):

<form>
  <label for="nama-depan">Nama Depan</label>
  <input id="nama-depan" type="text" name="nama_depan" placeholder="Nama Depan">

  <label for="nama-belakang">Nama Belakang</label>
  <input id="nama-belakang" type="text" name="nama_belakang" placeholder="Nama Belakang">
</form>

Hasil keluarannya akan menjadi inline:

Kita juga bisa melakukan modifikasi inline mau pun block dengan CSS.

Elemen <label>

Coba perhatikan kode HTML di atas: kita memiliki dua buah elemen <label>.

Elemen <label> memang terlihat seperti elemen <span> pada umumnya, akan tetapi ia memiliki fungsi khusus: yaitu untuk melabeli sebuah field inputan.

Karena ketika screen reader membaca konten halaman HTML, lalu menemukan sebuah inputan, ia akan membaca label yang bersangkutan.

Fungsi lain dari tag <label> adalah: ketika kita mengklik label, maka browser akan meletakkan fokus pada kolom isian yang terhubung dengannya.

Kita bisa menghubungkan sebuah <label> dan <input> dengan atribut for untuk label, dan atribut id pada <input> dengan nilai yang sama persis.

Perhatikan contoh berikut:

<label for="isian-nama">Nama</label>
<br>
<br>
<input id="isian-nama">

Pada kode di atas, element <input> memiliki id isian-nama, dan elemen label memiliki atribut for dengan nilai yang sama yaitu isian-nama

Hasil keluaran:

Coba klik label “Nama” dan perhatikan bahwa browser akan meletakkan fokus kepada elemen input.

Radio Button

Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana kita bisa menawarkan beberapa opsi kepada user. Akan tetapi hanya satu opsi saja yang boleh dipilih.

Perhatikan contoh berikut:

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="radio" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="radio" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="radio" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="radio" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="radio" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Hasil keluaran:

Pada pilihan di atas, kita hanya bisa memilih masing-masing satu saja.

Yang perlu diperhatikan adalah atribut name dari tiap radio button harus memiliki nilai yang sama dalam satu set pilihan. Pada contoh di atas, kita memiliki 2 buah set pilihan oleh karena itu namanya pun ada 2 yaitu: jenis_kelamin dan bahasa_asing.

Check Boxes

Berikutnya adalah checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set opsi.

Mari kita ganti semua type="radio" pada kode sebelumnya menjadi type="checkbox".

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="checkbox" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="checkbox" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="checkbox" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="checkbox" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="checkbox" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Berikut ini hasil keluarannya:

Pada contoh di atas kita bisa memilih (mencentang) semua opsi yang ada. 😂

Elemen Tombol Submit

Elemen input berikutnya yang akan kita bahas pada pengenalan form kali ini adalah input type submit.

Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika input ini diklik, maka form akan tersubmit dan browser akan mulai mengirim data.

Perhatikan contoh berikut:

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <input type="submit" value="Simpan">
</form>

Hasil keluaran:

Kita juga bisa menggunakan element <button> di dalam sebuah form:

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <button>Simpan</button>
</form>

Button yang berada di dalam sebuah form akan otomatis dianggap type="submit". Jika kita ingin membuat tombol biasa yang tidak men-submit <form>, kita bisa menambahkan atribut type="button".

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <button type="button">Simpan</button>
</form>

Pada kode di atas, ketika tombol “Simpan” diklik, ia tidak akan men-submit form karena ia bertipe tombol biasa (type="button"), bukan bertipe submit.

Bagaimana Cara Memproses Form?

Ketika sebuah <form> disubmit, baik menggunakan element <button> mau pun <input type="submit">, browser akan mengirimkan data tersebut kepada URL yang didefinisikan pada atribut action di dalam tag form.

Ada pun jika atribut action tidak didefinisikan, maka browser akan menggunakan URL sekarang sebagai tujuan pengiriman data.

Contoh:

<form action="/proses-pendaftaran">
  ...
</form>

Pada contoh di atas, ketika form disubmit, browser akan mengirimkan data yang ada menuju URL /proses-pendaftaran.

Apa yang terjadi pada URL /proses-pendaftaran?

Pada URL tersebut terdapat sebuah aplikasi/program yang berjalan di server (bukan di browser). Tugas dari program tersebut adalah mengelola data yang dikirim seperti misalnya menyimpan data tersebut ke dalam sebuah database.

Bahasa yang umum digunakan di dalam server adalah python, nodejs, PHP, dan lain sebagainya.

Untuk mendapatkan gambaran lebih jelas, kalian bisa membaca tutorial cara membuat dan memproses form HTML dengan PHP.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang atribut apa saja yang ada pada element form.

Stay tune!

20. Atribut Form

HTML Dasar: Atribut Form

Pada pertemuan sebelumnya kita telah membahas tentang pengenalan dasar untuk Form HTML. Kita telah membahas tentang element form, input, dan beberapa tipenya.

Dan pada pertemuan kali ini, kita masih akan membahas tentang form: lebih tepatnya tentang jenis-jenis atribut yang tersedia untuk tag <form>.

Atribut Action

Atribut pertama dari tag form adalah atribut action. Kita sudah singgung hal ini pada pertemuan sebelumnya.

Atribut action berfungsi untuk menentukan URL tujuan di mana data dari suatu <form> akan dikirimkan lalu diolah ketika ia disubmit. Jadi ketika suatu form disubmit, browser akan mengirimkan seluruh data yang ada pada form tersebut menuju URL yang didefinisikan dalam atribut action. Jika atribut action tidak didefinisikan, maka browser akan menggunakan URL sekarang sebagai tujuan.

Perhatikan kode berikut:

<form action="/proses-data">
  <label>Nama</label> <br>
  <input type="text" name="nama">
</form>

Pada kode di atas data isian nama akan dikirimkan ke URL /proses-data ketika form tersebut disubmit.

Idealnya atribut action akan kita pahami lebih detil (dan juga akan kita praktikkan) ketika mempelajari bahasa pemrograman server side seperti Python, nodejs, atau PHP dan lain sebagainya.

Atribut Target

Atribut berikutnya adalah atribut target. Atribut target pada element form hampir sama dengan atribut target pada element a.

Ia berfungsi untuk mengatur perilaku browser ketika suatu form disubmit.

Apakah browser akan melakukan redirect langsung pada tab yang sedang aktif? Atau apakah browser akan membuat tab baru?

Itu semua bisa kita atur menggunakan atribut target pada tag <form>.

Berikut ini adalah nilai yang bisa kita gunakan untuk atribut target:

Perhatikan contoh berikut di mana suatu form akan dibuka pada tab baru ketika ada event submit.

<form action="/proses-data" target="_blank">
  ...
</form>

Ketika disubmit, hasil dari form di atas akan dibuka pada tab baru karena ia memiliki atribut target dengan nilai _blank.

Atribut Method

Berikutnya adalah atribut method. Atribut ini digunakan untuk mendefinisikan method HTTP apa yang harus digunakan browser ketika mengirim data dari form.

Sebagaimana yang kita tahu, protokol HTTP/HTTPS memiliki beberapa method request: di antaranya yang paling sering digunakan adalah method GET dan method POST.

Data yang dikirim dengan method GET akan ditampilkan di URL, sedangkan data yang dikirim menggunakan method POST akan disimpan di dalam body request dan tidak di-ekspos di dalam URL.

Sehingga jangan pernah kita mengirimkan data-data sensitif menggunakan method GET karena data tersebut bisa terlihat dengan mata telanjang.

Berikut ini contoh form HTML dengan method GET dan POST:

<form method="GET">
  ...
</form>

<form method="POST">
  ...
</form>

Kalian bisa membaca lebih lanjut tentang perbedaan method GET dan POST dalam menghandle data form menggunakan bahasa pemrograman PHP.

Atribut Autocompelete

Atribut berikutnya yang bisa kita gunakan pada tag <form> adalah atribut autocomplete. Atribut ini memiliki 2 buah nilai yaitu:

• on
• dan off

“On” artinya fitur autocomplete pada suatu form akan diaktifkan, sebaliknya nilai “off” artinya fitur autocomplete untuk form yang bersangkutan tidak diaktifkan.

Perhatikan contoh berikut:

<h2>Form dengan autocomplete</h2>

<!--
  fitur autocomplete akan hidup secara default
  tanpa harus mendefinisikan atribut autocomplete
-->
<form autocomplete="on">
  <label>Nama</label>
  <input name="name"> <br>
  <label>Email</label>
  <input name="email" type="email"> <br>
  <label>Nomor Telpon</label>
  <input name="phone">
</form>

Hasil keluaran:

Coba klik atau ketikkan nama, email, dan nomor telpon pada form di atas, apakah kalian mendapatkan “saran” autocomplete dari browser?

Sekarang coba dengan autocomplete="off":

<h2>Form tanpa autocomplete</h2>

<form autocomplete="off">
  <label>Nama</label>
  <input name="name"> <br>
  <label>Email</label>
  <input name="email" type="email"> <br>
  <label>Nomor Telpon</label>
  <input name="phone">
</form>

Hasil keluaran:

Browser akan menggunakan atribut name sebagai patokan untuk melakukan autocomplete. Jadi misalkan kita pernah mengisi sebuah kolom isian dengan nama email di suatu situs A, kemudian kita menemukan inputan dengan nama yang sama (yaitu email) pada situs B, browser akan menggunakan history data yang kita tulis di situs A sebagai autocomplete.

Atribut Enctype

Atribut berikutnya adalah atribut enctype yang berarti encoding type atau tipe enkode.

Atribut ini umumnya kita gunakan ketika kita membuat form upload file dengan memberi atribut enctype="multipart/form-data". Hal itu kita lakukan agar browser bisa mengirimkan file dari local menuju server dengan format encoding yang benar.

Berikut ini contoh penggunaan encytpe:

<form method="POST' enctype="multipart/form-data">
  ...
</form>

Catatan: atribut enctype hanya support untuk method POST.

Atribut-Atribut yang Lain

Berikut ini list atribut-atribut element <form> yang lebih lengkap beserta dengan deskripsinya:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang macam-macam element inputan sebuah form.

Stay tune!

21. Element Form

HTML Dasar: Macam-Macam Element Form

Pada pertemuan kali ini kita akan membahas berbagai macam element yang berada di dalam element <form>.

Kita telah mencoba element <input> pada pertemuan-pertemuan sebelumnya, akan tetapi masih ada banyak lagi element lain yang bisa kita gunakan untuk menyusun sebuah form pada HTML.

Element-element tersebut adalah:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

Mari kita coba satu persatu element di atas.

Element <input>

Seperti yang sudah kita ketahui, element <input> merupakan element form terbanyak yang digunakan. Ia memiliki banyak tipe dan banyak tampilan mulai dari teks, password, email, tanggal, dan lain sebagainya.

Perhatikan contoh berikut:

<label for="isian-nama">Nama</label> <br>
<input id="isian-nama" type="text" name="name">

Hasil keluaran:

Contoh di atas merupakan tipe paling dasar dari element <input>.

Selanjutnya, kalian bisa membaca tentang tipe-tipe yang ada pada element input untuk mengenal lebih jauh tentang element <input>.

Element <select> dan <option>

Element form berikutnya adalah: select dan option.

Kita bisa menggunakan keduanya untuk membuat sebuah dropdown pilihan.

Element <select> berperan sebagai kontainer, sedangkan element <option> berperan sebagai daftar pilihan atau opsi.

Perhatikan contoh berikut:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option value="lk">Laki-laki</option>
  <option value="pr">Perempuan</option>
  <option value="rahasia">Rahasia</option>
</select>

Hasil keluaran:

Kita telah membuat satu buah dropdown jenis kelamin dengan 3 buah opsi pilihan.

Pilih Opsi Aktif

Opsi yang aktif secara default adalah adalah opsi yang pertama. Akan tetapi, kita bisa mengatur opsi mana yang aktif secara default dengan memberikan atribut selected pada suatu <option>.

Perhatikan contoh berikut:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option value="lk">Laki-laki</option>
  <option value="pr" selected>Perempuan</option>
  <option value="rahasia">Rahasia</option>
</select>

Hasil keluaran:

Pada hasil di atas, opsi “Perempuan” otomatis ter-select saat pertama kali halaman dimuat.

Disable Opsi

Kita juga bisa men-disable sebuah opsi dengan menambahkan atribut disabled pada tag <option>.

Opsi yang memiliki atribut disabled tidak akan bisa dipilih.

Perhatikan contoh berikut:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option value="lk">Laki-laki</option>
  <option value="pr">Perempuan</option>
  <option value="rahasia" disabled>Rahasia</option>
</select>

Hasil keluaran:

Kita juga bisa menggabungkan atribut disabled serta selected dalam satu opsi secara bersamaan:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option disabled selected>Pilih Jenis Kelamin</option>
  <option value="lk">Laki-laki</option>
  <option value="pr">Perempuan</option>
  <option value="rahasia" disabled>Rahasia</option>
</select>

Hasil keluaran:

Atribut size

Kita juga bisa menggunakan atribut size pada tag <select> untuk mengatur berapa item yang akan ditampilkan. Nilai default dari atribut ini adalah 1.

Perhatikan contoh berikut:

<select size="4">
  <option>Jakarta</option>
  <option>Surabaya</option>
  <option>Bandung</option>
  <option>Bekasi</option>
  <option>Makassar</option>
  <option>Samarinda</option>
</select>

Hasil keluaran:

Select multi opsi

Kita juga bisa menggunakan atribut multiple pada tag <select> untuk mengaktifkan fitur multi opsi, di mana kita bisa memilih lebih dari satu opsi pada satu element <select>.

Perhatikan contoh berikut:

<label for="kota">Kota</label>
<select id="kota" multiple>
  <option>Jakarta</option>
  <option>Surabaya</option>
  <option>Bandung</option>
  <option>Bekasi</option>
  <option>Makassar</option>
  <option>Samarinda</option>
</select>

Hasil keluaran:

Kita bisa menahan tombol Ctrl di windows atau linux, atau tombol Cmd pada MacOS lalu memilih opsi mana saja yang kita inginkan.

Element <textarea>

Element berikutnya yang bisa kita gunakan untuk mengambil inputan user adalah element <textarea>.

Ia merupakan element “teks” akan tetapi bisa memuat lebih dari satu baris.

Perhatikan contoh berikut:

<form>
  <label for="nama">Nama</label> <br>
  <input id="nama" name="nama" value="Suparman"> <br>

  <label for="alamat">Alamat</label> <br>
  <textarea id="alamat" name="alamat">Surabaya</textarea> <br>
</form>

Hasil keluaran:

Pada hasil di atas kita bisa perhatikan bahwa:

• Element textarea memiliki ukuran tinggi (height) yang lebih besar dari pada input teks biasa.
• Element textarea bisa diisi lebih dari satu baris dengan menekan enter.
• Element area memiliki fitur “resize” di pojok kanan bawah.

Mengatur ukuran textarea

Kita bisa mengatur ukuran dari textarea menggunakan dua buah atribut:

• rows
• dan cols

Atribut rows untuk jumlah baris, sedangkan atribut cols untuk lebar dari element textarea.

Perhatikan contoh berikut:

<form>
  <label for="nama">Nama</label> <br>
  <input id="nama" name="nama" value="Suparman"> <br>

  <label for="alamat">Alamat 1</label> <br>
  <textarea
    id="alamat-1"
    name="alamat_1"
    rows="5"
    cols="20"
  >Surabaya</textarea> <br>

  <label for="alamat-2">Alamat 2</label> <br>
  <textarea
    id="alamat-2"
    name="alamat_2"
    rows="3"
    cols="30"
  >Malang</textarea> <br>
</form>

Hasil keluaran:

Atau kita juga bisa mendefinisikan panjang dan tinggi suatu element textarea menggunakan CSS height dan width.

Element <button>

Element berikutnya yang bisa kita gunakan dalam membuat sebuah formulir isian adalah: button.

Button memiliki 2 buah tipe:

• type="button"
• dan type="submit"

Tombol dengan type="submit" akan dianggap sebagai pen-submit suatu form. Jika ia diklik, maka form yang ada bersangkutan akan tersubmit. Ada pun tombol dengan type="button", maka ia hanya dianggap tombol biasa tanpa tugas khusus.

Perhatikan contoh berikut:

<button onclick="alert('Tombol ini diklik!')">
  Klik Saya!
</button>

Hasil keluaran:

Element <fieldset> dan <legend>

Element form berikutnya yang bisa kita gunakan adalah element <fieldset> dan element <legend>.

Dua element ini digunakan untuk mengelompokkan kolom isian dalam suatu formulir HTML.

Perhatikan hasil keluaran berikut:

Kode HTML dari hasil keluaran di atas adalah sebagai berikut:

<form>
  <fieldset>
    <legend>Data Diri</legend>
    <label for="nama">Nama</label><br>
    <input id="nama" name="nama"><br>
    <label for="asal">Asal</label><br>
    <input id="asal" name="asal"><br>
  </fieldset>
  <br>
  <fieldset>
    <legend>Blog & Sosmed</legend>
    <label for="instagram">Instagram</label><br>
    <input id="instagram" name="instagram" type="url"><br>
    <label for="facebook">Facebook</label><br>
    <input id="facebook" name="facebook" type="url"><br>
    <label for="twitter">Twitter</label><br>
    <input id="twitter" name="twitter" type="url"><br>
    <label for="Youtube">Youtube</label><br>
    <input id="Youtube" name="Youtube" type="url"><br>
  </fieldset>
</form>

Element <datalist>

Berikutnya adalah element <datalist>, elemen ini hampir sama seperti gabungan antara input dan select.

Jadi element datalist akan memberikan kita “autocomplete” dari data yang sudah kita siapkan.

Perhatikan kode HTML di bawah:

<form>
  <input list="nama-kota">
  <datalist id="nama-kota">
    <option value="Surabaya">
    <option value="Jakarta">
    <option value="Makassar">
    <option value="Bekasi">
    <option value="Bandung">
    <option value="Semarang">
    <option value="Samarinda">
  </datalist>
</form>

Hasil keluaran:

Coba ketikkan huruf “b” pada input di atas, maka browser akan memberikan saran autocomplete dari data yang sudah kita definisikan dalam element <datalist>.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang macam-macam tipe dari element input HTML.

Stay tune!

22. Tipe Element Input

HTML Dasar: Tipe Element Input

Pertemuan kali ini adalah pertemuan ke-4 kita tentang Form HTML. Pada pertemuan-pertemuan sebelumnya kita telah membahas tentang pengenalan dasar form, macam-macam atribut tag form, dan macam-macam element form.

Pada kesempatan kali ini kita akan membahas lebih detil tentang atribut type yang ada pada element <input>.

Macam-Macam Tipe Input

Seperti yang kita tahu, dalam membangun sebuah formulir HTML, kita bisa menggunakan berbagai macam element.

Seperti halnya element <input>, <select>, <textarea>, dan lain sebagainya.

Akan tetapi, yang perlu kita ketahui lebih dalam adalah: element <input> sendiri memiliki banyak tipe isian.

Berikut ini list tipe dari input element berdasarkan abjad:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text"> - ini adalah default
• <input type="time">
• <input type="url">
• <input type="week">

Bagi saya pribadi yang telah mempelajari HTML lebih dari 5 tahun yang lalu, sebagian besar dari tipe-tipe di atas adalah “hal yang baru”. Dan melihat perkembangan dunia web yang semakin kompleks, tidak menutup kemungkinan bahwa di tahun-tahun yang akan datang, tipe input pada HTML akan semakin bertambah.

Note: terkadang tidak semua tipe didukung oleh semua browser.

Tipe text

Tipe yang pertama adalah tipe text. Tipe ini merupakan tipe yang paling dasar dalam sebuah <input>, bahkan tanpa mendefinisikan atribut type pun browser akan memilih tipe ini sebagai default.

Fungsi dari tipe text adalah untuk mengambil isian berupa teks.

Contoh:

<label for="nama">Nama</label> <br>
<input id="nama" type="text">

Hasil keluaran:

Tipe email

Tipe input yang berikutnya adalah tipe email.

Tipe ini memiliki fitur validasi di mana jika isian kita bukan berupa format email yang valid, maka form tidak bisa disubmit.

Perhatikan contoh berikut:

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

Hasil keluaran:

Jika kita tekan tombol Button di atas sedangkan nilai atau value dari input tersebut bukan dalam format email, maka browser akan memberikan peringatan dan form tidak akan bisa disubmit.

Tipe password

Berikutnya adalah tipe password. Tipe ini akan mengubah semua karakter yang kita ketik ke dalam karakter bintang *.

Perhatikan contoh berikut:

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

Hasil keluaran:

Tipe number

Berikutnya adalah tipe number. Tipe ini membatasi isian user hanya pada karakter numerik saja. Sehingga user tidak bisa mengisi karakter huruf, karakter putih, dan lain sebagainya.

Plus: browser akan menambahkan dua buah tombol atas dan bawah untuk mengubah angka isian.

Perhatikan contoh berikut:

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

Hasil keluaran:

Catatan: selain mengklik tombol atas dan bawah, kita juga bisa menggunakan tombol navigasi atas bawah di keyboard untuk mengubah angka.

Beberapa atribut untuk type number:

• min - menentukan angka minimal
• max - menentukan angka maksimal
• step - menentukan kelipatan (nilai yang tidak sesuai kelipatan tidak bisa di-input, dan default dari atribut ini adalah 1)

Contoh penggunaan atribut step:

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

Hasil keluaran:

Tipe url

Berikutnya adalah tipe url. Sesuai dengan namanya, tipe ini akan memvalidasi suatu isian apakah ia sudah sesuai format url yang valid atau tidak. Jika tidak sesuai, maka form tidak akan bisa disubmit.

Perhatikan contoh berikut:

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

Hasil keluaran:

Tipe tel

Tipe tel adalah sebuah input untuk memasukkan nomor telepon. Akan tetapi yang perlu diperhatikan adalah tipe tel ini tidak sama dengan tipe email mau pun tipe url yang otomatis memvalidasi isian user.

Pada tipe tel, kita masih harus mendefinisikan secara manual pola dari nomor telpon yang kita inginkan. Hal ini karena nomor telpon di berbagai negera memiliki format yang berbeda-beda [1].

Perhatikan contoh berikut:

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

Hasil keluaran:

Pada contoh di atas, isian hanya akan dikatakan valid jika untuk format seperti ini:

• 1234-1234-1234
• 0837-3021-3222
• dan seterusnya

Tipe date

Tipe input berikutnya yang bisa kita gunakan adalah tipe date.

Tipe ini akan menampilkan sebuah datepicker tergantung dari browser dan juga OS. Tampilan date picker di windows akan berbeda dengan yang ada di Mac OS, begitu juga datepicker di android akan berbeda dengan iOS.

Perhatikan contoh berikut:

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

Hasil keluaran:

Kita juga bisa memanfaatkan atribut min dan max untuk mengatur tanggal minimum dan tanggal maximum.

Nilai min dan max tersebut ditulis dengan format: YYYY-MM-dd.

Selain itu kita juga bisa mengatur tanggal menggunakan atribut value dengan format yang sama.

Perhatikan contoh berikut:

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

Hasil keluaran:

Tipe datetime-local

Tipe input berikutnya adalah datetime-local.

Tipe ini akan menampilkan date picker + time picker. Jadi tidak hanya tanggal saja, tapi kita bisa juga memilih jam.

Kita tinggal ubah kode sebelumnya dari type date menjadi datetime-local:

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

Hasil keluaran:

Dan untuk mengatur nilai default, kita bisa menggunakan atribut value dengan format: YYYY:MM:DDThh:mm (dalam waktu UTC).

Jadi misal kita ingin mengatur nilai default menjadi tanggal 17 Agustus 2021 jam 7 WIB, maka kita bisa tulis seperti ini:

2021-08-17T01:00.

Contoh:

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
  value="2021-08-17T01:00"
>

Hasil keluaran:

Penting: meskipun hasil keluarannya ditampilkan pukul 01:00 AM, tapi format waktu YYYY:MM:DDThh:mm adalah waktu UTC. Sehingga jika dikonversi ke waktu WIB (UTC+7), hasilnya menjadi pukul 07:00 pagi.

Tipe time

Tipe input berikutnya adalah tipe input time, tipe ini akan membuat kolom isian berupa pilihan jam.

Perhatikan contoh berikut:

<label for="isian-waktu">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu"
  name="waktu_pembayaran"
  type="time"
>

Hasil keluaran:

Tipe month

Tipe berikutnya adalah tipe month, berfungsi untuk membuat kolom isian bulan.

Perhatikan contoh berikut:

<label for="isian-bulan">Bulan Lahir</label> <br>
<input
  id="isian-bulan"
  name="bulan_lahir"
  type="month"
>

Hasil keluaran:

Tipe week

Hampir sama dengan tipe input month, hanya saja tipe input week digunakan untuk mengambil pekan dalam tahun.

Jadi pekan pertama di bulan januari adalah pekan 1.

Sedangkan pekan kedua di bulan februari adalah pekan ke 5 dan seterusnya.

<label for="isian-pekan">Pekan Lahir</label> <br>
<input
  id="isian-pekan"
  name="pekan_lahir"
  type="week"
>

Hasil keluaran:

Note: sampai saat artikel ini ditulis, tidak ada tipe inputan year, hal itu karena kita bisa menggunakan tipe data number menggunakan atribut min dan max, misal: min=2000 dan max=2021.

Tipe radio

Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana kita bisa menawarkan beberapa opsi kepada user. Akan tetapi hanya satu opsi saja yang boleh dipilih.

Perhatikan contoh berikut:

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="radio" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="radio" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="radio" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="radio" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="radio" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Hasil keluaran:

Pada pilihan di atas, kita hanya bisa memilih masing-masing satu saja.

Yang perlu diperhatikan adalah atribut name dari tiap radio button harus memiliki nilai yang sama dalam satu set pilihan. Pada contoh di atas, kita memiliki 2 buah set pilihan oleh karena itu namanya pun ada 2 yaitu: jenis_kelamin dan bahasa_asing.

Tipe checkbox

Selanjutnya adalah tipe input checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set opsi.

Mari kita ganti semua type="radio" pada kode sebelumnya menjadi type="checkbox".

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="checkbox" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="checkbox" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="checkbox" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="checkbox" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="checkbox" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Berikut ini hasil keluarannya:

Pada contoh di atas kita bisa memilih (mencentang) semua opsi yang ada. 😂

Tipe file

Selanjutnya adalah tipe input file, tipe ini akan membuat tombol “Browser” pada browser. Dan ketika tombol tersebut diklik, browser akan menampilkan jendela baru (bagi pengguna dekstop) untuk mengambil file, ada pun untuk android dan iOS, browser akan membuka file eksplorer atau aplikasi yang sejenis.

Perhatikan contoh berikut:

<label for="isian-foto">Upload Foto</label> <br>
<input
  id="isian-foto"
  name="foto"
  type="file"
>

Hasil keluaran:

Kita bisa menambahkan atribut accept untuk mengatur file apa saja yang boleh diupload. Misalkan kita ingin mengijinkan hanya file gambar seperti png, jpg atau jpeg, maka atribut accept akan terlihat seperti ini:

<label for="isian-foto">Upload Foto</label> <br>
<input
  id="isian-foto"
  name="foto"
  type="file"
  accept="image/png,image/jpg,image/jpeg"
>

Hasil keluaran:

Contoh accept untuk file-file lain:

• accept=".pdf" - file pdf
• accept=".doc, .docx" - untuk file doc atau docx
• accept=".ppt, .pptx" - untuk file ppt atau pptx
• dan lain sebagainya.

Catatan: validasi file di atas hanya terjadi di sisi client, dan kita tetap harus melakukan validasi file yang diupload di sisi server.

Tipe range

Berikutnya adalah tipe input range, ia adalah tipe isian berupa slider. Bisa kita temukan pada pengaturan volume.

Perhatikan contoh berikut:

<label for="isian-volume">Atur Volume</label> <br>
<input
  id="isian-volume"
  name="foto"
  type="range"
>

Hasil keluaran:

Rentang nilai default untuk tipe range adalah 0 sampai 100. Kita bisa menggantinya menggunakan atribut min dan max.

Tipe color

Berikutnya adalah tipe input color, tipe ini akan memunculkan sebuah color picker ketika diklik.

Perhatikan contoh berikut:

<label for="isian-warna">Atur Warna Latar</label> <br>
<input
  id="isian-warna"
  name="warna"
  type="color"
>

Hasil keluaran:

Tipe search

Tipe berikutnya adalah tipe search, tipe ini tidak memiliki fitur spesial tertentu. Ia mirip dengan text biasa akan tetapi jika kita mengetikkan sesuatu, maka akan muncul tombol x pada bagian kanan input.

Perhatikan contoh berikut:

<label for="isian-pencarian">Cari sesuatu</label> <br>
<input
  id="isian-pencarian"
  name="keyword"
  type="search"
>

Hasil keluaran:

Tipe submit

Tipe input berikutnya adalah tipe submit.

Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika tombol ini diklik, maka form akan tersubmit dan browser akan mulai mengirim data.

Perhatikan contoh berikut:

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <input type="submit" value="Simpan">
</form>

Hasil keluaran:

Tipe reset

Selanjutnya adalah tipe reset. Tipe ini akan mengembalikan state atau data dari suatu form ke nilai awalnya.

Jika nilai awal sebuah input adalah kosong, maka ketika direset ia akan kembali kosong. Tapi jika nilai awalnya sudah terisi sesuatu, maka ketika direset datanya akan kembali seperti yang sudah diset sebelumnya.

Perhatikan contoh berikut:

<form>
  <label for="isian-nama">Nama</label> <br>
  <input
    id="isian-nama"
    name="nama"
    type="text"
    value="Andi Mukhlish"
  >

  <br><br>

  <input type="reset" value="Reset dari awal">
</form>

Hasil keluaran:

Coba ubah isi dari input di atas, kemudian klik tombol reset.

Tipe hidden

Yang terakhir tapi bukan yang paling akhir adalah tipe input hidden. Sesuai namanya, tipe input ini tidak akan menampilkan input apa pun pada halaman web. Akan tetapi, nama dan nilai dari kolom isian tersebut tetap akan dikirimkan ke server pada saat submit.

Perhatikan contoh berikut:

<input type="hidden" name="sebuah_nama" value="sebuah_nilai">

<input type="submit">

Hasil keluaran:

Yang tampil hanya tombol submit bukan?

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang atribut apa saja yang terdapat pada element input.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel#:~:text=%3Cinput%3E%20elements%20of,around%20the%20world. – diakses tanggal 27 Juli 2021

23. Legend

HTML <legend> Tag dan fieldset

Contoh

<form action="#">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>