NEW
Font size
WorksheetsAsessmen Sumatif Akhir Semester Gasal 24/25 Kelas XI
Total questions: 50
Worksheet time: 1hrs 1mins
Apa itu Web Browser?
Alat untuk mengedit halaman web
Aplikasi untuk mengakses dan menampilkan halaman web
Bahasa pemrograman untuk membuat situs web
Server tempat menyimpan halaman web
Apa fungsi utama dari HTML dalam pengembangan web?
Memberikan gaya pada halaman web
Menyusun struktur dan konten pada halaman web
Menghubungkan halaman web ke basis data
Menganimasikan elemen halaman web
Tag HTML apa yang digunakan untuk menampilkan gambar?
<img>
<image>
<picture>
<src>
Apa fungsi tag <a> dalam HTML?
Menyisipkan gambar
Membuat tautan (link) ke halaman lain
Menampilkan audio
Menampilkan video
Apa fungsi dari atribut alt pada tag <img>?
Mengubah ukuran gambar
Memberikan teks alternatif jika gambar tidak dapat ditampilkan
Menambahkan tautan ke gambar
Menambah animasi pada gambar
Tag HTML apa yang digunakan untuk membuat tabel?
<tbl>
<tr>
<table>
<tab>
Apa kepanjangan dari CSS?
Cascading Style Sheets
Computer Style Sheets
Creative Style Sheets
Colorful Style Sheets
Apa fungsi dari CSS dalam pengembangan web?
Menghubungkan halaman web ke server
Menyusun konten di halaman web
Memberikan gaya dan tata letak pada elemen halaman web
Menjalankan program di server
Properti CSS apa yang digunakan untuk mengubah warna latar belakang elemen?
color
background-color
border-color
text-color
Apa arti dari atribut href dalam tag <a>?
Warna teks tautan
Ukuran tautan
URL tujuan tautan
Menampilkan gambar
Tag apa yang digunakan untuk menandai judul besar dalam HTML?
<title>
<h1>
<header>
<big>
Manakah tag yang digunakan untuk membuat paragraf dalam HTML?
<prg>
<par>
<p>
<txt>
CSS digunakan untuk apa pada halaman web?
Mengedit konten
Menata tampilan dan tata letak
Menyimpan data
Membuat server
Di mana kita biasanya meletakkan file JavaScript eksternal dalam HTML?
Di dalam tag <head>
Di dalam tag <body>
Bisa di <head> atau <body>
Di dalam tag <footer>
Apa properti CSS untuk mengatur ukuran font?
font-color
font-size
text-size
text-font
Manakah tag yang digunakan untuk menyematkan video di HTML?
<vid>
<video>
<movie>
<media>
Apa kegunaan dari tag <form> dalam HTML?
Menampilkan tabel
Menampilkan formulir input data pengguna
Menampilkan paragraf
Menampilkan gambar
Properti CSS apa yang digunakan untuk mengubah gaya huruf menjadi miring?
text-style: italic;
font-style: italic;
style: italic;
text-transform: italic;
Apa fungsi utama dari JavaScript dalam pengembangan web?
Mengatur struktur konten
Menambahkan interaktivitas pada halaman web
Memberikan gaya pada halaman web
Menyimpan data di server
Atribut HTML apa yang digunakan untuk menyisipkan tautan pada tag <img>?
src
href
link
img-link
Tag apa yang digunakan untuk membuat daftar berurutan di HTML?
<ul>
<li>
<dl>
<ol>
Apa fungsi tag <head> dalam HTML?
Untuk menampilkan teks
Untuk menyimpan informasi meta dan link ke file CSS/JS
Untuk menampilkan gambar
Untuk menampilkan tabel
Apa fungsi dari display: none; di CSS?
Menyembunyikan elemen dari halaman tanpa menghapusnya
Menampilkan elemen
Mengubah warna elemen
Menyusun elemen di tengah halaman
Perintah JavaScript mana yang digunakan untuk menampilkan pesan di dalam dialog?
alert()
message()
notify()
dialog()
Properti CSS apa yang digunakan untuk menambahkan garis bawah pada teks?
text-underline
underline
text-decoration: underline;
text-style: underline;
Seorang desainer web membuat sebuah halaman website yang memuat informasi tentang sebuah restoran. Elemen-elemen berikut digunakan dalam website tersebut:
Header: Berisi logo restoran, navigasi utama, dan informasi kontak.
Main Content: Berisi menu makanan, foto-foto, dan deskripsi singkat.
Footer: Menyediakan tautan ke media sosial, alamat restoran, dan formulir kontak
Jika elemen header dihapus dari halaman ini, apa dampak terbesar terhadap pengalaman pengguna?
Pengguna akan kesulitan menemukan menu makanan.
Pengguna akan kehilangan akses ke informasi utama dan navigasi.
Tidak ada perubahan signifikan pada pengalaman pengguna.
Footer akan menggantikan fungsi header secara otomatis.
Pengguna akan kesulitan mengakses tautan media sosial
Sebuah website e-commerce baru saja dirilis, tetapi pengunjung mengeluhkan bahwa mereka kesulitan menemukan produk yang diinginkan.
Berikut adalah elemen-elemen yang digunakan di halaman produk:
Sidebar Filter: Untuk menyaring kategori produk.
Grid View: Untuk menampilkan produk dengan gambar kecil tanpa deskripsi lengkap.
Search Bar: Untuk mencari produk secara langsung.
Elemen apa yang perlu ditingkatkan untuk memperbaiki navigasi pengguna?
Tambahkan deskripsi lengkap pada Grid View.
Hapus Sidebar Filter agar halaman lebih bersih.
Tambahkan animasi pada Search Bar.
Perkecil ukuran gambar pada Grid View.
Gunakan menu dropdown untuk menggantikan Sidebar Filter.
Anda diminta membuat prototipe website edukasi dengan tema "Belajar HTML dan CSS". Elemen mana yang paling relevan untuk mendukung pembelajaran interaktif?
Header dengan animasi berlebihan.
Video tutorial dan area latihan langsung (live editor).
Tabel statis yang hanya menjelaskan definisi HTML.
Halaman penuh teks tanpa multimedia.
Menu dropdown yang rumit dan sulit dinavigasi.
Sebuah website berita menggunakan elemen-elemen berikut:
Carousel: Untuk menampilkan berita utama secara bergulir.
Sidebar: Untuk menampilkan berita populer dan kategori berita.
Main Content Area: Menampilkan artikel berita lengkap.
Jika target audiens website adalah pembaca dengan usia 50 tahun ke atas, elemen mana yang perlu dioptimalkan?
Menghapus Carousel karena dapat membingungkan.
Mengurangi ukuran teks pada Main Content Area.
Menambahkan efek transisi animasi di Sidebar.
Menghilangkan Sidebar sepenuhnya.
Menambah jumlah berita pada Carousel agar lebih informatif.
Sebuah perusahaan ingin meningkatkan performa website mereka di perangkat mobile. Namun, mereka menemukan bahwa elemen-elemen seperti tabel harga, galeri gambar, dan form pendaftaran sering kali menyebabkan waktu loading menjadi lambat.
Apa langkah terbaik untuk mengoptimalkan elemen-elemen tersebut?
Menghapus tabel harga dari versi mobile.
Mengompresi gambar di galeri dan mengurangi jumlah gambar.
Menghapus semua elemen form pendaftaran.
Menggunakan animasi tambahan pada tabel harga untuk menarik perhatian.
Memperbesar ukuran form pendaftaran agar lebih mudah dilihat.
Sebuah developer membuat website dengan struktur berikut:
<header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<section>
<h1>Judul Artikel</h1>
<p>Ini adalah paragraf pertama artikel.</p>
</section>
<footer>
<p>Hak Cipta © 2024</p>
</footer>
Namun, ketika diuji coba, tampilan navigasi tidak muncul di halaman website. Apa kemungkinan penyebab masalah tersebut?
Tag <header> tidak mendukung tag <nav>.
Tag <ul> tidak memiliki atribut class atau id.
Tidak ada CSS yang mengatur elemen navigasi tersebut.
Tag <footer> menyebabkan konflik dengan elemen <nav>.
Tag <section> tidak memiliki tag pembuka dan penutup yang lengkap.
Seorang siswa diminta membuat tampilan grid layout menggunakan CSS yang harus memenuhi kriteria berikut:
1. Memiliki 3 kolom yang masing-masing berukuran sama.
2. Memiliki jarak antar-kolom sebesar 20px.
3. Kolom harus responsif dan dapat menyesuaikan ukuran layar.
Manakah properti CSS yang paling tepat untuk memenuhi kriteria tersebut?
display: flex; justify-content: center; gap: 20px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
display: table; width: 100%; border-spacing: 20px;
display: block; margin: auto; padding: 20px;
display: inline-block; width: 33%; margin-right: 20px;
Seorang developer membuat form login berikut:
<form action="/login" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Login</button>
</form>
Namun, pengguna melaporkan bahwa ketika mereka memasukkan data yang salah, tidak ada pesan kesalahan yang muncul. Apa langkah terbaik untuk meningkatkan form ini?
Menambahkan placeholder pada input untuk memandu pengguna.
Menggunakan atribut required pada kedua input.
Menambahkan validasi menggunakan JavaScript untuk memberikan pesan kesalahan.
Mengganti metode post menjadi get untuk melihat data input di URL.
Menambahkan lebih banyak label untuk memperjelas fungsi form.
HTML menggunakan elemen untuk membuat struktur sebuah dokumen web. Seorang siswa menulis kode berikut:
<h1>Judul Website</h1>
<p>Ini adalah paragraf pertama.</p>
<div>
<p>Ini adalah paragraf kedua.</p>
</div>
Apa kelebihan penggunaan elemen <div> dalam struktur HTML di atas?
Membantu meningkatkan aksesibilitas konten.
Membuat paragraf lebih menarik dengan desain otomatis.
Memberikan struktur yang lebih fleksibel untuk gaya menggunakan CSS.
Mengubah elemen menjadi responsif tanpa CSS tambahan.
Menghapus kebutuhan untuk menggunakan elemen lain seperti <p>.
CSS digunakan untuk memperindah tampilan HTML. Berikut adalah beberapa cara menghubungkan CSS dengan dokumen HTML:
1. Inline CSS
2. Internal CSS
3. External CSS
Jika sebuah website besar memiliki lebih dari 100 halaman, metode mana yang paling efisien dan mengapa?
Inline CSS karena perubahan dapat dilakukan langsung di setiap elemen.
Internal CSS karena lebih mudah diatur dalam satu file HTML.
External CSS karena gaya dapat digunakan ulang di seluruh halaman.
Internal CSS karena tidak memerlukan file terpisah.
Inline CSS karena dapat dioptimalkan untuk setiap elemen unik.
Seorang siswa ingin membuat sebuah tabel menggunakan HTML untuk menampilkan data jadwal pelajaran sebagai berikut:
Kode HTML mana yang paling tepat untuk membuat tabel tersebut?
<table>
<tr><td>Hari</td><td>Mata Pelajaran</td><td>Jam</td></tr>
<tr><td>Senin</td><td>Matematika</td><td>08:00</td></tr>
</table>
<table>
<tr><th>Hari</th><th>Mata Pelajaran</th><th>Jam</th></tr>
<tr><td>Senin</td><td>Matematika</td><td>08:00</td></tr>
<tr><td>Selasa</td><td>Bahasa Inggris</td><td>10:00</td></tr>
</table>
<table>
<td>Hari</td>
<td>Senin</td>
<td>Matematika</td>
<td>08:00</td>
</table>
<table>
<tr><td>Hari</td><td>Mata Pelajaran</td></tr>
<tr><td>Senin</td><td>08:00</td></tr>
</table>
<table>
<tr><th>Hari</th></tr>
<tr><td>Senin</td></tr>
</table>
Seorang siswa ingin membuat tautan yang, ketika diklik, membuka halaman baru. Bagaimana cara menuliskannya dalam HTML?
<a href="https://example.com">Klik di sini</a>
<a href="https://example.com" target="_blank">Klik di sini</a>
<a href="https://example.com" open="_blank">Klik di sini</a>
<a link="https://example.com" target="_blank">Klik di sini</a>
<a src="https://example.com" newtab="true">Klik di sini</a>
HTML memiliki berbagai elemen untuk menampilkan konten multimedia seperti audio dan video. Sebuah developer ingin menambahkan file video ke website yang dapat diputar langsung di browser. Tag HTML apa yang paling tepat untuk digunakan?
<media>
<object>
<iframe>
<video>
<embed>
Berikut adalah struktur HTML:
<a href="https://example.com" title="Contoh Tautan">Klik di sini</a>
Apa fungsi atribut title dalam tag <a>?
Menentukan ukuran font teks tautan.
Menampilkan teks tambahan ketika kursor diarahkan ke tautan.
Membuka tautan dalam tab baru.
Menambahkan animasi pada teks tautan.
Mengganti teks "Klik di sini" secara otomatis.
Sebuah halaman HTML menggunakan elemen berikut:
<table>
<tr>
<td>Nama</td>
<td>Usia</td>
</tr>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
</table>
Developer ingin menambahkan judul kolom pada tabel ini agar lebih jelas. Elemen HTML apa yang harus digunakan?
Ganti <td> dengan <th> pada baris pertama.
Tambahkan atribut caption pada elemen <table>.
Tambahkan elemen <thead> sebelum baris pertama.
Ganti <table> dengan <header>.
Tambahkan elemen <title> di dalam tabel.
Anda diminta untuk membuat daftar kategori produk yang akan ditampilkan pada halaman utama sebuah toko online. Setiap kategori terdiri dari nama kategori dan gambar ikon yang menggambarkan kategori tersebut. Tag HTML manakah yang paling tepat digunakan untuk membuat daftar kategori ini dengan format yang terstruktur dan dapat dipahami dengan mudah oleh pengguna dan mesin pencari?
Menggunakan elemen <ol> untuk membuat daftar terurut dengan nama kategori
Menggunakan elemen <ul> dengan elemen <li> untuk setiap kategori, dan menyertakan gambar di dalam setiap elemen <li>
Menggunakan elemen <dl> untuk mendefinisikan kategori dan deskripsi
Menggunakan elemen <table> untuk menata kategori dalam baris dan kolom
Menggunakan elemen <div> untuk setiap kategori dan menambahkan gambar sebagai latar belakang
Pada sebuah halaman web berita, Anda ingin membuat daftar topik-topik utama dengan setiap topik diikuti oleh beberapa artikel terkait. Bagaimana Anda sebaiknya menyusun struktur HTML untuk mencapai tujuan ini?
Menggunakan <ul> untuk daftar topik dan <ol> untuk daftar artikel terkait di dalam setiap item topik
Menggunakan <ol> untuk daftar topik utama dan <ul> untuk daftar artikel di dalam setiap item topik
Menggunakan <dl> untuk mendefinisikan topik dan artikel dalam format deskripsi
Menggunakan <nav> untuk mendefinisikan daftar topik dan artikel
Menggunakan <div> untuk membuat daftar dengan menambahkan tag <p> untuk setiap artikel terkait
Anda ingin menampilkan daftar menu navigasi horizontal di bagian atas halaman dengan menggunakan tag HTML. Menu harus ditata sedemikian rupa sehingga setiap item menu muncul secara horizontal. Tag HTML dan CSS yang tepat untuk ini adalah...
Gunakan <ul> untuk daftar menu, dan atur setiap <li> menjadi inline dengan CSS display: inline
Gunakan <ol> untuk daftar menu, dan atur setiap <li> menjadi inline dengan CSS display: block
Gunakan <nav> untuk daftar menu, dan atur setiap <a> menjadi inline dengan CSS display: inline-block
Gunakan <dl> untuk daftar menu, dengan <dt> untuk setiap item dan <dd> untuk deskripsi menu
Gunakan <ul> untuk daftar menu, dan setiap item menu dibuat menggunakan elemen <span>
Studi Kasus:
Pada halaman produk e-commerce, Anda ingin menampilkan daftar produk beserta harga dan deskripsi singkatnya. Setiap produk harus terdiri dari nama produk, gambar, harga, dan deskripsi. Daftar produk akan ditampilkan secara terurut berdasarkan kategori produk.
Pertanyaan:
Tag HTML manakah yang paling tepat untuk menampilkan daftar produk ini dengan struktur yang jelas dan mudah dipahami?
Gunakan <ul> untuk daftar produk, dan setiap produk dalam elemen <li> dengan nama, gambar, harga, dan deskripsi di dalamnya
Gunakan <ol> untuk daftar produk, dan setiap produk dalam elemen <li>
Gunakan <dl> dengan <dt> untuk nama produk dan <dd> untuk harga dan deskripsi
Gunakan <table> untuk menampilkan produk dalam baris dan kolom
Gunakan <section> untuk setiap kategori produk dan <div> untuk setiap produk
Studi Kasus:
Anda sedang membuat halaman web yang menampilkan daftar pertanyaan yang sering diajukan (FAQ). Setiap pertanyaan diikuti oleh jawaban. Anda ingin menggunakan struktur HTML yang tepat untuk memastikan bahwa informasi ini mudah diakses dan dipahami oleh pengunjung.
Pertanyaan:
Tag HTML yang paling tepat untuk menampilkan daftar FAQ adalah...
Gunakan <ul> dengan elemen <li> untuk setiap pertanyaan, dan jawaban di dalam elemen <p>
Gunakan <dl> dengan <dt> untuk pertanyaan dan <dd> untuk jawaban
Gunakan <ol> dengan elemen <li> untuk setiap pertanyaan dan jawaban
Gunakan <section> untuk setiap pertanyaan dan <article> untuk jawaban
Gunakan <nav> untuk daftar pertanyaan dan jawaban
Bagian dalam penggalan kode berikut yang disebut sebagai tag penutup adalah ….
<p>mati satu tumbuh seribu</p>
<p>
mati satu tumbuh seribu
<p>mati satu tumbuh seribu</p>
</p>
p
<html>
<head>
<title>Website-ku</title>
</head>
<body>
ini adalah <br> kalimat pertama
</body>
</html>
Coding diatas akan menampilkan hasil ....
iniadalahkalimapertama
ini adalah
kalimat pertama
ini
adalah
kalimat
pertama
ini adalah br kalimat pertama
ini adalah kalimat pertama
<html>
<head>
<title></title>
</head>
<body>
CO<sub>2</sub> H<sub>2</sub>O
</body>
</html>
Coding diatas akan menampilkan hasil ....
Tiga Struktur dasar Tag HTML yaitu…
title – head – body
html – head– body
html – head – title
html – title – table
title - body - head
Perhatikan kode html beikut ini:
<ul>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ul>
Hasil dari kode html di atas adalah …
