NEW
Font size
WorksheetsQuiz HTML Bootstrap
Total questions: 31
Worksheet time: 5mins
Tag pembuka yang benar untuk mendeklarasikan dokumen HTML5 adalah…
<!DOCTYPE html>
<doctype html5>
<html5>
<!DOCTYPE HTML5>
<meta doctype="html">
Elemen yang umumnya berisi metadata (judul halaman, meta charset, link CSS) adalah…
<body>
<head>
<header>
<title>
<footer>
Tag HTML yang tepat untuk membuat paragraf adalah…
<br>
<span>
<p>
<hr>
<label>
Untuk membuat tautan ke halaman lain, atribut yang wajib ada pada <a> adalah…
alt
title
id
href
target
Pada tag <img>, atribut yang paling penting untuk aksesibilitas adalah…
width
height
loading
referrerpolicy
alt
List bernomor (1,2,3,…) dibuat dengan tag…
<ol>
<ul>
<li>
<dl>
<menu>
Struktur tabel yang benar adalah…
<table><tr><th></th><td></td></tr></table>
<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>
<table><body><row><cell></cell></row></body></table>
<table><trow><tcol></tcol></trow></table>
<table><head><row></row></head></table>
Yang termasuk elemen semantik HTML5, kecuali…
<header>
<nav>
<main>
<section>
<font>
Contoh elemen inline adalah…
<div>
<section>
<header>
<span>
<main>
Pernyataan yang benar tentang id dan class adalah…
Satu halaman tidak boleh memiliki lebih dari satu class
Satu elemen hanya boleh punya satu class
Nilai id boleh diulang pada banyak elemen
id bersifat unik pada halaman, class bisa dipakai banyak elemen
class hanya untuk CSS, id hanya untuk JS
Input form yang memvalidasi format email menggunakan…
<input type="email">
<input type="text" pattern="email">
<input type="mail">
<input email>
<input type="username">
Supaya label terhubung dengan input, gunakan…
<label name="nama"> dan input name="nama"
<label for="nama"> dan input id="nama"
<label id="nama"> dan input for="nama"
<label value="nama"> dan input value="nama"
<label data="nama"> dan input data="nama"
Tombol yang mengirim form ketika diklik adalah…
<button type="button">
<button type="reset">
<button type="submit">
<button type="send">
<button> tanpa atribut
Baris meta di bawah ini berfungsi untuk responsif di perangkat mobile…
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="...">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="...">
<meta charset="iso-8859-1">
Cara menautkan file CSS eksternal yang benar…
<script src="style.css"></script>
<style src="style.css">
<css href="style.css">
<link rel="stylesheet" href="style.css">
<meta rel="stylesheet" href="style.css">
Untuk memakai Bootstrap 5 dari CDN, umumnya kita menaruh CSS di…
<head>
Akhir <body>
Di dalam <footer>
Di dalam <main>
Di dalam <nav>
Banyak komponen Bootstrap (dropdown, modal) butuh JS bundle yang berisi…
jQuery saja
Popper sudah termasuk di bootstrap.bundle.min.js
Hanya Popper tanpa Bootstrap
Tidak perlu JS sama sekali
Vanilla JS + React
Urutan grid Bootstrap yang benar…
container > col > row
row > container > col
container > row > col
col > row > container
container > grid > cell
Yang termasuk breakpoint Bootstrap, kecuali…
sm
md
lg
tablet
xl
Kelas utilitas untuk padding dan margin berturut-turut adalah…
m-* untuk padding, p-* untuk margin
p-* untuk padding, m-* untuk margin
g-* untuk padding, m-* untuk margin
gap-* untuk padding, p-* untuk margin
pd-* untuk padding, mg-* untuk margin
Struktur komponen card Bootstrap yang lazim adalah…
.card > .card-head
.card > .card-body
.card > .body
.card > .content
.card > .card-main
Untuk memakai Font Awesome 6 via CDN, kita menautkan…
File .js saja
File .css Font Awesome di <head>
File .woff2 langsung
File .ttf langsung
Tidak perlu file apa pun
Cara menampilkan ikon lonceng FA6 yang benar adalah…
<i class="fa fa-beli"></i>
<icon class="fa-solid fa-bell"></icon>
<i class="fa-solid fa-bell"></i>
<span class="fa-regular-bell"></span>
<i class="fab fa-bell"></i>
Jika kita mau membuat Ikon untuk halaman beranda maka FA6 yang benar adalah…
<i class="fa fa-home"></i>
<icon class="fa-solid fa-home"></icon>
<i class="fa-solid fa-house"></i>
<span class="fa-regular-house"></span>
<i class="fab fa-house-home"></i>
Praktik aman saat membuka link di tab baru adalah menambahkan…
target="_new"
target="_blank" rel="noopener"
rel="nofollow noopener" tanpa target
download
aria-hidden="true"
Atribut wajib agar data input terkirim ke server dengan nama field adalah…
id
placeholder
value
required
name
Untuk membuat baris baru dalam teks, gunakan…
<br>
</br>
<lb>
<newline>
<line>
Pernyataan yang benar tentang elemen void (tidak punya tag penutup) adalah…
<p> adalah elemen void
<img> tidak memerlukan penutup
<div> elemen void
<span> elemen void
<script> elemen void
Pernyataan DOCTYPE yang valid untuk HTML5…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE xhtml>
<!DOCTYPE html>
<meta doctype="html">
<!DOCTYPE HTML SYSTEM>
Untuk menghubungkan label dan input di form Bootstrap, praktik paling tepat…
Gunakan for pada label yang sama dengan id pada input
Gunakan class yang sama di label dan input
Taruh label di dalam input
Pakai name yang sama di label dan input
Gunakan placeholder sebagai label
Yang bukan bagian dari sistem grid Bootstrap…
.container
.row
.col-*
.stack
Utility responsive seperti .col-md-6
