Dalam kegiatan sebelumnya, Anda telah mempelajari:
- Dasar-dasar tag dan elemen HTML.
- Cara menyusun halaman web.
- HTML semantik dan praktik terbaik.
Dengan artikel ini, Anda akan terus mengembangkan pengetahuan HTML Anda dan membahas elemen HTML tambahan.
Elemen konten teks
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Elemen-elemen ini mendukung pembuatan konten teks dan menambahkan struktur, gaya, dan makna. Ada beberapa bagian konten teks yang dapat menggabungkan elemen-elemen berikut.
Elemen blockkutipan
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Contoh ini menunjukkan cara menggunakan elemen <blockquote>, yang menampilkan kutipan terkenal oleh Mahatma Gandhi. Ada begitu banyak kutipan bagus di luar sana yang memberikan konten dan makna yang berkesan. Pikirkan tentang beberapa tokoh inspiratif favorit Anda dan kutipan mereka.
Gunakan elemen <blockquote> saat menggunakan kutipan dan informasi referensi dari sumber. Elemen <blockquote> membuat indentasi dan perataan yang unik dalam presentasi, serta menggunakan tag pembuka dan penutup. <blockquote> sangat membantu saat menggunakan kutipan lebih panjang yang mencakup beberapa baris teks.
Anda juga dapat menggunakan berbagai elemen dalam elemen <blockquote>, seperti header, paragraf, atau daftar.
Elemen <details>
<details>
<summary>Details</summary>
Additional Information
</details>
Sering kali, halaman web akan memiliki bagian FAQ dan informasi tambahan yang tersedia bagi pengguna. Ada bagian FAQ yang umum untuk informasi produk, itinerari perjalanan, atau jenis skenario tanya jawab apa pun.
Elemen <details> berguna dengan menggunakan widget yang diungkapkan yang menyimpan informasi tambahan. Elemen ini menyertakan fungsi tombol bawaan dan pengguna dapat membuka dan menutup tombol. Saat tombol terbuka, konten informasi tambahan akan diluaskan dan dapat dibaca oleh pengguna. Saat tombol ditutup, konten informasi tambahan akan disembunyikan dari pengguna. Untuk menamai widget <details> itu sendiri, gunakan elemen <summary>.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Ini adalah cara kerja elemen <figure>. Di sini Anda melihat bahwa <figure>, yang digunakan bersama elemen <figcaption>, dapat digunakan untuk meningkatkan pengalaman visual.
Anda melihat gambar di seluruh web, dan data visual lain yang membantu setiap saat. Elemen visual membantu menarik perhatian pengunjung dan menciptakan pengalaman pengguna yang luar biasa. Elemen <figure> adalah cara memberi label pada gambar, tabel, diagram, dll. Cara kerjanya adalah dengan membuat konten mandiri sehubungan dengan konten utama.
Elemen <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
Elemen <time> memberikan makna dan semantik, yang memungkinkan fungsionalitas yang lebih baik dengan aktivitas seperti menjadwalkan janji temu secara online, memublikasikan tanggal dan waktu untuk artikel blog, arsip, dll. Beberapa contoh situs yang akan menggunakan elemen <time> mencakup penggunaan Google Kalender, memublikasikan artikel secara langsung di platform, atau membaca arsip historis online dari situs perpustakaan.
Elemen <time> mereferensikan waktu, dan dapat mewakili waktu untuk format 24 jam atau tanggal tertentu yang dapat disesuaikan untuk zona waktu dan lokasi. Elemen ini memerlukan tag pembuka dan penutup, <time> dan </time>. Anda dapat menambahkan atribut datetime agar tanggal dapat dibaca dalam format yang dapat dibaca mesin.
Metadata dokumen
<title>Sarah's Favorite Food Recipes</title>
Setiap kali Anda mengetik URL situs, akan ada nama <title> yang dapat dibaca di kolom URL atau tab halaman web. Ini adalah nama judul yang Anda lihat diberikan untuk halaman web. Elemen ini penting dan digunakan oleh mesin telusur untuk menampilkan daftar halaman web terkait di hasil penelusuran. Panjang judul dapat bervariasi dari yang singkat dan deskriptif, hingga lebih panjang dan lebih deskriptif.
Skenario: Anda memiliki laman web yang sedang Anda pikirkan, tetapi tidak dapat mengingat URL situs web tertentu. Ketik kata kunci di mesin telusur. Mesin telusur membantu melacak halaman web yang Anda cari, dan Anda dapat melihat nama <title> yang muncul di penelusuran.
Elemen konten yang disematkan
Selain konten teks, ada berbagai elemen konten tambahan untuk digunakan.
Elemen <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Saat selesai berbelanja item secara online dan mengklik opsi pembayaran Anda, seperti PayPal atau Apple Pay, fitur ini biasanya ditambahkan ke halaman web dengan <iframe>. Melihat peta online untuk menelusuri bisnis lokal adalah pengalaman umum lainnya. Jenis pengalaman pengguna ini di halaman web dapat ditambahkan dengan iframe. Pada contoh di atas, Anda akan melihat URL Wikipedia dalam iframe yang berjudul "Wikipedia".
Elemen <iframe> memungkinkan Anda menyisipkan konten dari sumber lain dan menyematkan bingkai di dalam halaman web. Aplikasi ini membuat bingkai berbentuk persegi panjang dan menampilkan konten di browser. Frame memungkinkan presentasi tata letak berbentuk jendela dalam elemen <iframe>. Ini adalah cara terbaik untuk menambahkan konten ke halaman web untuk meningkatkan pengalaman pengguna.
Elemen formulir
<progress max="100" value="30"> 30% </progress>
Saat menonton video yang lebih panjang, menyampaikan materi edukasi, atau mengisi aplikasi yang ekstensif, memiliki status progres visual dapat membantu melacak kemajuan Anda. Elemen <progress> sangat berguna untuk jenis skenario ini.
Elemen ini digambarkan sebagai panel visual dengan warna latar belakang. Panel visual dapat memiliki berbagai ukuran dan warna latar belakang. Dengan status progres, Anda dapat memilih untuk menggunakan atribut max dan value. Atribut max menetapkan bilangan floating point dan atribut value mencatat berapa banyak progres yang telah dicapai pada tugas.
Pembuatan Naskah
<canvas id="canvas"></canvas>
Agar dapat menggambar grafis dan animasi secara real time, gunakan elemen <canvas>. Tempatkan elemen <canvas> ke dalam halaman web HTML Anda untuk membuat kanvas. Elemen ini memerlukan kode JavaScript agar dapat menggambar dan membuat grafik.
Elemen isi tabel
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
Elemen <table>
Elemen <table> membuat tabel. Ini adalah titik awal untuk menambahkan elemen tambahan dengan baris dan kolom. Tabel sering muncul di laman web, menjadi cara yang berguna untuk mengatur dan menampilkan informasi. Salah satu kasus penggunaan untuk menggunakan elemen <table> adalah menampilkan informasi tabel kepada pengguna, seperti jenis informasi yang mungkin Anda temukan di spreadsheet.
Elemen <th>
Elemen <th> adalah header untuk sekelompok sel.
Elemen <tr>
Elemen <tr> menentukan baris sel dalam tabel. Dari sini, Anda bisa menambahkan data sel tertentu.
Elemen <td>
Elemen <td> membuat sel, yang menambahkan konten yang diperlukan.
Kesimpulan
Dalam artikel ini, Anda telah menemukan elemen HTML tambahan dan mengembangkan keterampilan {i>coding<i} Anda. Anda telah mempelajari lebih lanjut tentang konten, teks {i>inline<i}, konten yang disematkan, dan elemen tabel. Anda sekarang telah membangun pemahaman Anda tentang elemen HTML tambahan. Pertahankan pencapaian ini.