HTML (Hypertext Markup Language) adalah bahasa pengkodean yang digunakan untuk membangun situs (web) yang ideal. Saat ini, HTML tetap menjadi fondasi dasar dalam mengelola situs sehingga menguasainya menjadi keharusan di era digital seperti saat ini. Oleh karena itu, berikut telah disediakan sejumlah soal praktik dan pembahasan mengenai implementasi HTML sehingga diharapkan dapat menjadi sumber latihan untuk memantapkan penguasaannya. Soal telah disusun sedemikian rupa dari yang sederhana menuju kompleks sesuai nomor urutnya. Ada baiknya apabila pembaca mempelajari teorinya terlebih dahulu agar dapat menyelesaikan soal-soal yang ada dengan performa yang lebih baik.
Soal Nomor 1
Perhatikan skrip kode berikut.
<html>
<body>
Semoga dunia lekas pulih!
</body>
</html>
Agar tulisan yang ditampilkan berwarna merah, perubahan yang tepat pada skrip kode di atas adalah $\cdots \cdot$
- Baris ke-2 diubah menjadi <body text = “red”>
- Baris ke-4 diubah menjadi </body text = “red”>
- Baris ke-2 diubah menjadi <body bgcolor = “red”>
- Baris ke-4 diubah menjadi </body bgcolor= “red”>
- Baris ke-2 diubah menjadi <body text = “blue”>
Atribut HTML yang digunakan untuk mengubah warna tulisan menjadi merah adalah text. Karena tulisan yang diinginkan berwarna merah, maka value untuk text adalah “red”. Atribut dan value tersebut diletakkan di dalam tag pembuka <body>. Jadi, skrip kode yang diubah adalah pada baris ke-2, yaitu menjadi <body text = “red”>.
- Opsi B salah karena atribut dan value diletakkan di tag penutup body.
- Opsi C salah karena atribut bgcolor mengubah warna latar belakang tampilan, bukan warna tulisan.
- Opsi D mengikuti kesalahan yang ada pada opsi B dan C.
- Opsi E salah karena tulisan yang ditampilkan berwarna biru, bukan merah.
(Jawaban A)
Soal Nomor 2
Seorang penilai meminta untuk dibuatkan tampilan sederhana di browser dengan menggunakan HTML. Adapun ketentuannya adalah sebagai berikut.
- Judul yang ditampilkan pada jendela browser adalah “My Diary”.
- Tulisan pada bagian body bebas, asalkan memuat kata “berlibur”. Tulisan harus berwarna hitam.
- Warna latar pada tampilan di browser adalah abu-abu (gray).
Skrip kode yang paling sesuai dengan ketentuan di atas adalah $\cdots \cdot$
<html>
<head>
<title>My Diary</title>
</head>
<body bgcolor = "gray">
Keluargaku membatalkan liburan karena tiket pesawat terjual habis.
</body>
</html
<html>
<head>
<title>My Diary</title>
</head>
<body bgcolor = "gray">
Aku berlibur di rumah nenek untuk merayakan tahun baru.
</body>
</html>
<html>
<head>
<title>Buku Harian Saya</title>
</head>
<body bgcolor = "gray">
Aku berlibur di rumah nenek untuk merayakan tahun baru.
</body>
</html>
<html>
<head>
<title>My Diary</title>
</head>
<body background = "gray">
Aku berlibur di Kota Taipei, Taiwan.
</body>
</html>
<html>
<head>
<title>My Diary</title>
</head>
<body text = "red" bgcolor = "gray">
Aku berlibur di rumah nenek untuk merayakan tahun baru.
</body>
</html>
Untuk membuat judul pada tampilan browser menjadi sedemikian rupa, gunakan elemen <title> yang terapit oleh elemen <head>. Tulisan pada body memperhatikan ketentuan nomor 2 dan secara bawaan (default), tulisan memang sudah berwarna hitam. Untuk mengubah warna latar pada tampilan browser menjadi abu-abu, gunakan atribut bgcolor dengan value “gray” yang diletakkan di dalam tag pembuka <body>. Opsi B memenuhi semua ketentuan tersebut.
- Opsi A salah karena tidak ada kata “berlibur” sehingga melanggar ketentuan nomor 2.
- Opsi C salah karena judul yang ditampilkan adalah “Buku Harian Saya” sehingga melanggar ketentuan nomor 1.
- Opsi D salah karena atribut background difungsikan untuk mengubah latar belakang tampilan dalam bentuk gambar, bukan difungsikan untuk mengubah warna latar belakang.
- Opsi E salah karena tulisan yang ditampilkan akan berwarna merah, bukan hitam.
(Jawaban B)
Soal Nomor 3
Perhatikan skrip kode berikut.
<html>
<head>
<title>Catatan Matematika</title>
</head>
<body bgcolor = "silver">
<b>Paul Dirac</b> quoted that God used beautiful <u>mathematics</u> in creating the <i>world</i>.
</body>
</html>
Pernyataan berikut yang tidak sesuai dengan keluaran (output) skrip kode di atas adalah $\cdots \cdot$
- Latar tampilan akan berwarna perak (silver)
- Judul yang tampil pada jendela browser adalah Catatan Matematika
- Tulisan “Paul Dirac” akan tercetak tebal
- Tulisan “mathematics” akan digarisbawahi
- Tulisan “world” akan tercetak tebal dan italik
Elemen <title> menampilkan judul pada jendela browser, yakni Catatan Matematika. Di dalam tag pembuka <body>, terdapat atribut bgcolor dengan value “silver” yang akan membuat tampilan latar menjadi berwarna perak. Elemen <b>, <u>, dan <i> berturut-turut difungsikan untuk membuat tulisan yang terapit menjadi tercetak tebal, digarisbawahi, dan italik.
- Opsi E salah karena tulisan “world” harusnya tercetak italik saja sebagaimana hanya diapit oleh elemen <i>. Jika pengguna ingin menampilkan tulisan tercetak tebal dan italik sekaligus, gunakan dua elemen <i><b> secara beruntun. Misalnya: <i><b>world</b></i>.
(Jawaban E)
Soal Nomor 4
Skrip kode HTML yang tepat untuk memunculkan tampilan seperti berikut adalah $\cdots \cdot$
<html>
<head>
<title>Catatan Matematika</title>
</head>
<body text="blue">
Nilai dari 2<sup>3</sup> sama dengan 8. <br>
Nilai dari 3<sup>3</sup> sama dengan 27. <br>
Nilai dari 4<sup>3</sup> sama dengan 64.
</body>
</html>
<html>
<head>
<title>Catatan Matematika</title>
</head>
<body text="blue">
Nilai dari 2<sup>3</sup> sama dengan 8.
Nilai dari 3<sup>3</sup> sama dengan 27.
Nilai dari 4<sup>3</sup> sama dengan 64.
</body>
</html>
<html>
<head>
<title>Catatan Fisika</title>
</head>
<body text="blue">
Nilai dari 2<sup>3</sup> sama dengan 8. <br>
Nilai dari 3<sup>3</sup> sama dengan 27. <br>
Nilai dari 4<sup>3</sup> sama dengan 64.
</body>
</html>
<html>
<head>
<title>Catatan Matematika</title>
</head>
<body>
Nilai dari 2<sup>3</sup> sama dengan 8. <br>
Nilai dari 3<sup>3</sup> sama dengan 27. <br>
Nilai dari 4<sup>3</sup> sama dengan 64.
</body>
</html
<html>
<head>
<title>Catatan Matematika</title>
</head>
<body text = "blue" bgcolor="blue">
Nilai dari 2<sup>3</sup> sama dengan 8. <br>
Nilai dari 3<sup>3</sup> sama dengan 27. <br>
Nilai dari 4<sup>3</sup> sama dengan 64.
</body>
</html>
Elemen <title> menampilkan judul pada jendela browser, yakni Catatan Matematika. Di dalam tag pembuka <body>, harus terdapat atribut text dengan value “blue” agar tulisan menjadi berwarna biru. Tulisan yang diapit dalam elemen body menyesuaikan dengan apa yang ditampilkan. Simbol pangkat (superscript) ditampilkan dengan menggunakan elemen <sup>. Elemen <br> harus dipakai untuk berpindah ke baris berikutnya. Opsi A memenuhi semuanya.
- Opsi B salah karena tag <br> tidak dituliskan sehingga tulisan akan bersambung.
- Opsi C salah karena judulnya salah, seharusnya Catatan Matematika.
- Opsi D salah karena tidak ada atribut text dengan value “blue” sehingga tulisan justru berwarna hitam.
- Opsi E salah karena atribut bgcolor dengan value“blue” akan membuat tampilan latar menjadi berwarna biru.
(Jawaban A)
Soal Nomor 5
Perhatikan skrip kode berikut.
<html>
<head>
<title>Statistika</title>
</head>
<body text="red">
<b>Statistika adalah cabang <u>ilmu matematika</u> yang mempelajari tentang pengambilan, pengolahan, dan penarikan kesimpulan <br>
yang tepat atas data yang diperoleh dari suatu hasil pengamatan atau penelitian.
</body>
</html>
Pembuat program ingin membuat tampilan tulisan “Statistika” yang hanya tercetak tebal, tetapi ketika skrip kode dijalankan, semua tulisan yang diapit oleh body menjadi tercetak tebal. Perbaikan yang tepat agar tampilannya sesuai dengan yang diinginkan oleh si pembuat program adalah $\cdots \cdot$
- Tag penutup </b> dituliskan setelah kata “Statistika”
- Pasangan tag <u> dan </u> harus dihapus
- Memendekkan kalimatnya dengan menghapus beberapa kata
- Tag penutup </b> dituliskan di akhir kalimat
- Tag <b> tidak perlu ditulis
Perhatikan bahwa elemen <b> tidak diberi tag penutup sehingga program mengeksekusi semua tulisan yang diapit oleh body menjadi tercetak tebal. Agar hanya tulisan “Statistika” yang tercetak tebal, tambahkan tag penutup </b> setelah kata “Statistika”, yaitu menjadi <b>Statistika</b>.
(Jawaban A)
Soal Nomor 6
Perhatikan skrip kode dan tampilannya pada browser berikut.
<html>
<head>
<title>Komentar</title>
</head>
<body text="purple">
<b>Komentar</b> adalah salah satu fitur yang dapat dipakai oleh pengguna HTML. <br>
<b>Komentar</b> difungsikan untuk membantu pengguna dalam membaca/menafsirkan skrip kode. <br>
<!-- sekilas tentang komentar-->
</body>
</html>
Ketidaksesuaian tampilan yang ditunjukkan pada gambar di atas adalah $\cdots \cdot$
- Tulisannya seharusnya tidak berwarna ungu, melainkan hitam
- Kalimatnya seharusnya bersambung ke samping, tidak berpindah ke baris berikutnya
- Kata “komentar” pada kalimat pertama dan kedua seharusnya tercetak miring, bukan tercetak tebal
- Tulisan “sekilas tentang komentar” seharusnya tidak muncul
- Tulisan “sekilas tentang komentar” seharusnya berwarna hitam
Tulisan pada body berwarna ungu karena adanya atribut text dengan value “purple” di dalam elemen <body>. Elemen <br> membuat kalimat berpindah ke baris berikutnya. Elemen <b> membuat tulisan tercetak tebal (bold). Tulisan “sekilas tentang komentar” seharusnya tidak muncul karena dituliskan dalam sintaks komentar <!– komentar –>. Sebagai informasi tambahan, tombol singkat (shortcut) untuk menjadikan satu baris HTML menjadi komentar adalah dengan menekan tombol Ctrl + / pada papan ketik.
- Opsi D menunjukkan ketidaksesuaian yang tepat.
(Jawaban D)
Soal Nomor 7
Untuk membuat tampilan informasi dalam bentuk artikel, sebaiknya kita membedakan tulisan dari segi ukuran dan tampilan pada bagian judul dan paragraf dengan menggunakan tag heading <h1>, <h2>, <h3>, dan seterusnya. Pernyataan berikut ini yang tepat mengenai tag heading pada sintaks HTML adalah $\cdots \cdot$
- Semakin besar angka heading, semakin besar pula ukuran hurufnya
- Semakin kecil angka heading, semakin besar ukuran hurufnya
- <h1> merupakan tag heading yang menampilkan ukuran tulisan terkecil
- Setiap huruf yang diapit oleh tag heading memiliki ukuran yang sama
- Ukuran tulisan dengan tag <h3> lebih besar dari ukuran tulisan dengan tag <h2>
HTML mendefinisikan 6 tingkatan heading, yaitu h1, h2, h3, h4, h5, dan h6. Heading h1 merupakan heading yang menandakan bahwa tulisan yang diapitnya sangat penting sehingga tampilan tulisannya paling besar dan mencolok, sedangkan h6 adalah kebalikannya. Jadi, pernyataan yang tepat adalah semakin kecil angka heading, semakin besar ukuran hurufnya.
(Jawaban B)
Soal Nomor 8
Perhatikan skrip kode berikut.
<html>
<head>
<title>Cabang Ilmu Matematika</title>
</head>
<body>
<h2>
<ol>
<li>Aritmetika
<li>Aljabar
<li>Geometri
<li>Teori Bilangan
<li>Trigonometri
<li>Kalkulus
<li>Kombinatorika
<li>Teori Peluang dan Statistika
</ol>
</body>
</html>
Jika pemrogram ingin memulai penomoran dari nomor 3, bukan nomor 1 seperti biasanya, maka perubahan yang tepat pada skrip kode di atas adalah $\cdots \cdot$
- Elemen <h2> pada baris ke-6 dihapus
- Menambahkan atribut start dengan value “3” di dalam tag <body>
- Menambahkan atribut start dengan value “3” di dalam tag <ol>
- Pasangan tag <ol> dan </ol> dihapus
- Baris ke-8 diubah menjadi <li3>Aritmetika
Untuk mengubah angka dimulainya penomoran, gunakan atribut start yang dituliskan di dalam elemen <ol> (ordered list). Dalam kasus ini, baris ke-7 diubah menjadi <ol start= “3”>. Jika dijalankan, nomor pertama akan dimulai dari 3, bukan 1, seperti yang tampak pada gambar berikut.
(Jawaban C)
Soal Nomor 9
Perhatikan skrip kode berikut.
<html>
<head>
<title>Perilaku yang Mencerminkan Makna Pancasila</title>
</head>
<body>
<ol style="font-size: 12pt; list-style-type: lower-roman;">
<li>Toleran terhadap perbedaan
<li>Menghargai dan menghormati sesama
<li>Mencintai produk dalam negeri
<li>Menyelesaikan masalah dengan musyawarah
<li>Berbuat adil terhadap sesama
</ol>
</body>
</html>
Jika pemrogram ingin mengganti penomoran dengan menggunakan simbol huruf kapital Romawi (I, II, III, IV, V), maka perubahan yang tepat terkait skrip kode di atas adalah $\cdots \cdot$
- Baris ke-6: mengganti value dari list-style-type menjadi upper-roman
- Baris ke-6: mengganti value dari font-size menjadi 14pt
- Baris ke-6: menghapus atribut list-style-type beserta value-nya
- Baris ke-6: menghapus seluruh atribut di dalam tag pembuka <ol>
- Baris ke-12: menghapus tag penutup </ol>
Atribut list-style-type yang merupakan properti dari style di dalam tag pembuka <ol> berfungsi untuk mengganti penomoran dengan berbagai macam simbol. Jika value yang dimasukkan adalah lower-roman, penomoran akan menggunakan huruf kecil Romawi (i, ii, iii, iv, v) seperti yang tampak pada gambar berikut.
Agar penomoran berubah menjadi simbol huruf kapital Romawi (I, II, III, IV, V), ganti lower-roman menjadi upper-roman pada baris ke-6 sehingga menjadi seperti berikut.
<html>
<head>
<title>Perilaku yang Mencerminkan Makna Pancasila</title>
</head>
<body>
<ol style="font-size: 12pt; list-style-type: upper-roman;">
<li>Toleran terhadap perbedaan
<li>Menghargai dan menghormati sesama
<li>Mencintai produk dalam negeri
<li>Menyelesaikan masalah dengan musyawarah
<li>Berbuat adil terhadap sesama
</ol>
</body>
</html>
(Jawaban A)
Soal Nomor 10
Perhatikan tampilan berikut.
Skrip kode yang tepat untuk membuat tampilan seperti di atas adalah $\cdots \cdot$
<html>
<body style="background-color:powderblue; font-family: georgia; font-size: 12pt; text-align: justify;">
<p>Whatsapp dan Skype telah mendisrupsi industri telekomunikasi dengan
meluncurkan layanan pesan dan telepon gratis. Uber mendisrupsi layanan taksi
dengan menawarkan model bisnis berbagi (<i>sharing business model</i>) yang
sangat efisien. AirBnB mendisrupsi industri hotel dan penginapan dengan
mempertemukan permintaan dan penawaran secara efisien, transparan, dan
demokratis.</p>
<p>Contoh disrupsi industri di atas merupakan sekian dari banyak perubahan
yang terjadi. Thomas Friedman menyebut saat ini sebagai era akselerasi
peradaban (<i>the age of acceleration</i>). Seiring masuknya peradaban manusia
ke era akselerasi, semakin hebat pula gelombang disrupsi industri yang bakal
terjadi.</p>
</body>
</html>
<html>
<body style="background-color:powderblue; font-family: georgia; font-size: 12pt; text-align: left; text-indent: 0.4in;">
<p>Whatsapp dan Skype telah mendisrupsi industri telekomunikasi dengan
meluncurkan layanan pesan dan telepon gratis. Uber mendisrupsi layanan taksi
dengan menawarkan model bisnis berbagi (<i>sharing business model</i>) yang
sangat efisien. AirBnB mendisrupsi industri hotel dan penginapan dengan
mempertemukan permintaan dan penawaran secara efisien, transparan, dan
demokratis.</p>
<p>Contoh disrupsi industri di atas merupakan sekian dari banyak perubahan
yang terjadi. Thomas Friedman menyebut saat ini sebagai era akselerasi
peradaban (<i>the age of acceleration</i>). Seiring masuknya peradaban manusia
ke era akselerasi, semakin hebat pula gelombang disrupsi industri yang bakal
terjadi.</p>
</body>
</html>
<html>
<body style="background-color:powderblue; font-family: georgia; font-size: 12pt; text-align: justify; text-indent: 0.4in;">
<p>Whatsapp dan Skype telah mendisrupsi industri telekomunikasi dengan
meluncurkan layanan pesan dan telepon gratis. Uber mendisrupsi layanan taksi
dengan menawarkan model bisnis berbagi (<i>sharing business model</i>) yang
sangat efisien. AirBnB mendisrupsi industri hotel dan penginapan dengan
mempertemukan permintaan dan penawaran secara efisien, transparan, dan
demokratis.</p>
<p>Contoh disrupsi industri di atas merupakan sekian dari banyak perubahan
yang terjadi. Thomas Friedman menyebut saat ini sebagai era akselerasi
peradaban (<i>the age of acceleration</i>). Seiring masuknya peradaban manusia
ke era akselerasi, semakin hebat pula gelombang disrupsi industri yang bakal
terjadi.</p>
</body>
</html>
<html>
<body style="font-family: georgia; font-size: 12pt; text-align: justify; text-indent: 0.4in;">
<p>Whatsapp dan Skype telah mendisrupsi industri telekomunikasi dengan
meluncurkan layanan pesan dan telepon gratis. Uber mendisrupsi layanan taksi
dengan menawarkan model bisnis berbagi (<i>sharing business model</i>) yang
sangat efisien. AirBnB mendisrupsi industri hotel dan penginapan dengan
mempertemukan permintaan dan penawaran secara efisien, transparan, dan
demokratis.</p>
<p>Contoh disrupsi industri di atas merupakan sekian dari banyak perubahan
yang terjadi. Thomas Friedman menyebut saat ini sebagai era akselerasi
peradaban (<i>the age of acceleration</i>). Seiring masuknya peradaban manusia
ke era akselerasi, semakin hebat pula gelombang disrupsi industri yang bakal
terjadi.</p>
</body>
</html>
<html>
<body style="background-color:powderblue; font-family: georgia; font-size: 12pt; text-align: justify; text-indent: 0.4in;">
<p>Whatsapp dan Skype telah mendisrupsi industri telekomunikasi dengan
meluncurkan layanan pesan dan telepon gratis. Uber mendisrupsi layanan taksi
dengan menawarkan model bisnis berbagi (sharing business model) yang sangat
efisien. AirBnB mendisrupsi industri hotel dan penginapan dengan mempertemukan
permintaan dan penawaran secara efisien, transparan, dan demokratis.</p>
<p>Contoh disrupsi industri di atas merupakan sekian dari banyak perubahan
yang terjadi. Thomas Friedman menyebut saat ini sebagai era akselerasi
peradaban (the age of acceleration). Seiring masuknya peradaban manusia ke era
akselerasi, semakin hebat pula gelombang disrupsi industri yang bakal terjadi.</p>
</body>
</html>
Berdasarkan tampilan yang muncul, atribut yang harus ada di dalam tag pembuka <body> adalah sebagai berikut.
- Atribut style dengan properti background-color: powderblue untuk menampilkan warna latar belakang.
- Atribut style dengan properti font-family: georgia untuk menggunakan jenis tulisan Georgia.
- Atribut style dengan properti font-size: 12pt untuk membuat ukuran tulisan menjadi 12pt.
- Atribut style dengan properti text-align: justify untuk membuat tulisan rata kiri-kanan.
- Atribut style dengan properti text-indent: 0.4in untuk membuat baris pertama paragraf menjadi menjorok ke dalam sejauh 0,4 inci.
Opsi C dan E memenuhi semua kriteria ini, tetapi opsi E tidak tepat karena tulisan sharing business model dan the age of acceleration tidak italik.
(Jawaban C)
Soal Nomor 11
Perhatikan skrip kode berikut.
<html>
<head>
<title>Seputar Matematika</title>
</head>
<body>
<ul>
<li>Jenis-jenis Fungsi
<ol>
<li>Fungsi polinomial
<li>Fungsi mutlak
<li><mark>Fungsi trigonometri</mark>
<li>Fungsi eksponen
<li>Fungsi rasional
<li><b>Fungsi logaritma</b>
</ol>
<li>Jenis-jenis Matriks
<ol>
<li>Matriks persegi
<li><b><i>Matriks persegi panjang</i></b>
<li>Matriks nol
<li><del>Matriks diagonal</del>
<li>Matriks identitas
</ol>
</ul>
</body>
</html>
Pernyataan berikut yang tepat mengenai keluaran (output) dari skrip kode di atas adalah $\cdots \cdot$
- Ada 3 poin daftar tidak terurut yang tampil pada keluaran
- Tulisan “Fungsi trigonometri” akan tampil dalam warna merah dan tercetak tebal
- Tulisan “Fungsi logaritma” akan tercetak italik
- Tulisan “Matriks persegi panjang” akan tercetak italik dan tebal
- Tulisan “Matriks diagonal” akan tampil tercoret oleh dua garis horizontal
Perhatikan bahwa pada baris ke-19, tulisan “Matriks persegi panjang” diapit oleh elemen <b> dan <i>. Ini menunjukkan bahwa tulisan tersebut akan tampil dalam keadaan tercetak italik dan tebal.
- Opsi A salah karena daftar tidak terurut (unordered list) yang tampil hanya ada dua poin, yakni Jenis-jenis Fungsi dan Jenis-jenis Matriks.
- Opsi B salah karena elemen <mark> membuat tulisan yang diapitnya diberi efek tersorot atau highlight (distabilo kuning).
- Opsi C salah karena elemen <b> membuat tulisan yang diapitnya tercetak tebal, bukan italik.
- Opsi E salah karena elemen <del> membuat tulisan yang diapitnya tercoret oleh satu garis horizontal, bukan dua.
Tampilan program ketika skrip kode dijalankan seperti tampak pada gambar di bawah.
(Jawaban D)
Soal Nomor 12
Perhatikan skrip kode berikut.
<html>
<head>
<title>Simbol Matematika</title>
</head>
<body align="left">
<h3>
<ol>
<li>Membahas simbol operator dalam matematika, ∑ dan &prod adalah dua di antaranya.
<li>Membahas huruf Yunani yang banyak dipakai dalam matematika, α, β, dan ε adalah tiga di antaranya.
<li>Membahas himpunan, kita bakal bertemu dengan simbol ∈, ∉ ∅, ∩, dan ∪.
</ol>
</body>
</html>
Setelah dijalankan, ada bagian dari keluaran yang tidak sesuai dengan yang diharapkan pemrogram. Bagian yang dimaksud terletak pada skrip kode di atas baris ke-$\cdots \cdot$
A. 3 C. 8 E. 10
B. 6 D. 9
Tampilan saat skrip kode tersebut dijalankan di browser adalah seperti berikut.
Tampak pada gambar di atas bahwa pada poin nomor 1, &prod tidak tampil sebagai operator perkalian deret, yaitu ∏ (baca: pi), karena tidak diakhiri tanda titik koma. Sintaks yang tepat adalah ∏. Jadi, bagian yang dimaksud terletak pada skrip kode baris ke-8.
(Jawaban C)
Soal Nomor 13
Perhatikan skrip kode berikut.
<html>
<body>
<table border="3">
<tr> <!--tr = table row-->
<th>No.</th> <!--th = table header-->
<th>Nama</th>
<th>Usia (Tahun)</th>
</tr>
<tr>
<td>1.</td> <!--td = table data-->
<td>Dinda Silvia Evifani</td>
<td>18</td>
</tr>
<tr>
<td>2.</td>
<td>Stevanni</td>
<td>16</td>
</tr>
<tr>
<td>3.</td>
<td>Calista Meryl</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Jika dijalankan, keluaran yang tampil adalah tabel yang berukuran $\cdots \cdot$
A. $2 \times 2$ D. $3 \times 3$
B. $2 \times 3$ E. $4 \times 3$
C. $3 \times 2$
Perhatikan skrip kode tersebut. Baris ke-4 sampai 8 mendefinisikan baris pertama tabel dengan 3 kolom. Kolom pertama adalah No., kolom kedua adalah Nama, dan kolom ketiga adalah Usia (Tahun). Baris ke-9 sampai 13 mendefinisikan baris kedua, baris ke-14 sampai 18 mendefinisikan baris ketiga, dan baris ke-19 sampai 23 mendefinisikan baris keempat. Jadi, tabel yang terbentuk memiliki 4 baris dan 3 kolom sehingga ukurannya adalah $\boxed{4 \times 3}$
(Jawaban E)
Soal Nomor 14
Perhatikan skrip kode berikut.
<html>
<body>
<table border="4" >
<tr align="center">
<td>Kelas</td>
<td>Nama Lengkap</td>
<td>Nilai</td>
</tr>
<tr align="center">
<td rowspan="3" align="center">XII MIPA B</td>
<td>Anjel Love</td>
<td>82</td>
</tr>
<tr align="center">
<td>Auryn Putri</td>
<td>94</td>
</tr>
<tr align="center">
<td>Emanuela Aloysius</td>
<td>88</td>
</tr>
<tr align="center">
<td rowspan="3" align="center">XII MIPA C</td>
<td>Bonifasius Panyoka</td>
<td>93</td>
</tr>
<tr align="center">
<td>Carollus Dhimas Davin</td>
<td>90</td>
</tr>
<tr align="center">
<td>Fransiska Maria Nur</td>
<td>75</td>
</tr>
</table>
</body>
</html>
Pernyataan berikut yang tepat mengenai keluaran yang tampil ketika skrip kode di atas dijalankan adalah $\cdots \cdot$
- Posisi/letak tabel ada di tengah
- Tabel terdiri dari 3 baris dan 3 kolom
- Anjel Love, Auryn Putri, dan Emanuela Aloysius merupakan siswa kelas XII MIPA B
- Nilai Bonifasius Panyoka adalah 90
- Ada 4 siswa kelas XII MIPA C yang terdata pada tabel
Jika skrip kode dijalankan di browser, keluaran yang tampil adalah seperti berikut.
Atribut rowspan dengan value “3” yang terletak di dalam tag pembuka <td> digunakan untuk menggabungkan 3 baris sel tabel menjadi satu sel (atau disebut juga merge cell). Atribut align dengan value “center” yang terletak di dalam tag pembuka <tr> digunakan untuk menempatkan tulisan di tengah pada baris yang bersangkutan. Pernyataan yang tepat ditunjukkan oleh opsi C bahwa Anjel Love, Auryn Putri, dan Emanuela Aloysius merupakan siswa kelas XII MIPA B.
- Opsi A salah karena posisi tabel seharusnya di kiri layar. Ini dikarenakan pada baris ke-3, tidak ada atribut align = “center” di dalam tag pembuka <table>. Dengan kata lain, agar tabel terletak di tengah, baris ke-3 harus diubah menjadi <table border = “4” align = “center”>.
- Opsi B salah karena tabel seharusnya terdiri dari 7 baris dan 3 kolom.
- Opsi D salah karena jelas bahwa nilai Bonifasius Panyoka adalah 93, bukan 90.
- Opsi E salah karena jelas bahwa hanya ada 3 siswa kelas XII MIPA C yang terdata pada tabel, yaitu Bonifasius Panyoka, Carollus Davin Dhimas, dan Fransiska Maria Nur.
(Jawaban C)
Soal Nomor 15
Perhatikan tampilan dari keluaran skrip kode HTML berikut.
Skrip kode yang dimasukkan adalah sebagai berikut.
<html>
<body>
<table border="4" bordercolor="red" cellspacing="5">
<caption><b>Hasil Penilaian Lomba Membuat Mural</b></caption>
<tr align="center">
<td rowspan="3">Aspek</td>
<td colspan="2">Kelas</td>
</tr>
<tr align="center">
<td>XI MIPA A</td>
<td>XI MIPA B</td>
<td>XI MIPA C</td>
</tr>
<tr align="center">
<td>Pengetahuan</td>
<td>73</td>
<td>80</td>
<td>75</td>
</tr>
<tr align="center">
<td>Kreativitas</td>
<td>92</td>
<td>84</td>
<td>80</td>
</tr>
<tr align="center">
<td>Kegesitan</td>
<td>80</td>
<td>93</td>
<td>90</td>
</tr>
<tr align="center">
<td>Jumlah Skor</td>
<td><b>245</b></td>
<td><b>257</b></td>
<td><b>245</b></td>
</tr>
</table>
</body>
</html>
Diketahui bahwa ada 4 baris pada skrip kode di atas yang tidak sesuai dengan keluaran yang ditampilkan. Baris tersebut adalah sebagai berikut beserta perbaikannya, kecuali $\cdots \cdot$
- Baris ke-3: atribut bordercolor seharusnya memiliki value “blue”, bukan “red”
- Baris ke-4: elemen <b> harus dihapus
- Baris ke-6: atribut rowspan seharusnya memiliki value “2” sebagaimana tampak pada tabel bahwa ada 2 baris yang digabungkan
- Baris ke-7: atribut colspan seharusnya memiliki value “3” sebagaimana tampak pada tabel bahwa ada 3 kolom yang digabungkan
- Baris ke-33: elemen <b> perlu ditambahkan di antara tulisan Jumlah Skor
Pernyataan pada opsi B, yaitu pada baris ke-4, elemen <b> harus dihapus, tidak sesuai. Perhatikan bahwa elemen <b> berfungsi untuk membuat tulisan menjadi tercetak tebal. Tampak pada caption tabel bahwa tulisan “Hasil Penilaian Lomba Membuat Mural” tercetak tebal sehingga elemen <b> memang harus termuat di sana.
(Jawaban B)