1. HTML merupkan singkatan dari...

A. Hyper Link Markup Leaguage

B. Hyper Team Markup Laguage
C. Hyper Tool Markup Laguage
D. Hyper Test Markup Laguage
E. Hyper Text Markup Laguage

2. Berikut ini perintah untuk mengganti baris pada HTML adalah...

A. br
B. tr
C. td
D. p
E. Insert

3. Perhatikan kode HTML berikut!

<i>Format apa ini</i><br/>
Kode program tersebut akan menghasilkan format teks….
A. Tebal
B. Miring
C. Coretan
D. Garis
bawah
E. Berjalan

4. Perhatikan kode HTML berikut!

<b>Format apa ini</b><br/>
Kode program tersebut akan menghasilkan format teks….
A. Tebal
B. Miring
C. Coretan
D. Garis
bawah
E. Berjalan

5. Perhatikan kode HTML berikut!

<blockquote>Kesuksesan harus direncanakan!</blockquote>
Kode HTML di atas merupakan tag untuk pemformatan teks yang berfungsi
untuk….
A. Mencetak tulisan tebal
B. Membuat paragraf
C. Mencetak kutipan
D. Mengatur ukuran teks
E. Mencetak tulisan berwarna
6. Perhatikan kode HTML berikut!
<u> The quick brown fox jumps over the lazy dog </u>
Pada kode tersebut, digunakan dua macam tag untuk pemformatan teks, yang
masing-masing fungsinya adalah….
A. Memiringkan teks
B. Memberi garis bawah pada teks
C. Menebalkan teks
D. Membuat teks paragraph
E. Mengatur ukuran teks

7. Perhatikan kode HTML berikut!

<del>Kesuksesan harus direncanakan!</del>
Kode HTML di atas merupakan tag untuk pemformatan teks yang berfungsi
untuk….
A. Mencetak tulisan tebal
B Mencetak tulisan bergaris di tengah (tercoret)
.
C Mencetak kutipan
.
D Mengatur ukuran teks
.
E. Mencetak tulisan bergaris di bawah

8. Perhatikan tampilan tabel berikut ini!

Potongan kode yang tepat untuk menampilkan tabel seperti gambar di atas
adalah….
A. <table border=1>
<tr>
<td>A</td>
<td colspan=2>C</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
B. <table border=1>
<tr>
<td colspan=2>A</td>
<td>C</td>
 </tr>
<tr>
<td>B</td>
</tr>
</table>
C <table border=1>
. <tr>
<td>A</td>
<td>C</td>
</tr>
<tr>
<td
colspan=2>B</td>
</tr>
</table>
D <table border=1>
. <tr>
<td>A</td>
<td rowspan=2>C</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
E. <table border=1>
<tr>
<td rowspan=2>A</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

9. Perhatikan tampilan tabel berikut ini!

Potongan kode yang tepat untuk menampilkan tabel seperti gambar di atas
adalah….
A. <table border=1>
<tr>
<td>Cell1</td>
 <td colspan=2>Cell2</td>
</tr>
<tr>
<td>Cell3</td>
</tr>
</table>
B. <table border=1>
<tr>
<td colspan=2>Cell1</td>
<td>Cell2</td>
</tr>
<tr>
<td>Cell3</td>
</tr>
</table>
C. <table border=1>
<tr>
<td>Cell1</td>
<td>Cell2</td>
</tr>
<tr>
<td rowspan=2>Cell3</td>
</tr>
</table>
D. <table border=1>
<tr>
<td>Cell1</td>
<td rowspan=2>Cell2</td>
</tr>
<tr>
<td>Cell3</td>
</tr>
</table>
E. <table border=1>
<tr>
<td
rowspan=2>Cell1</td>
<td>Cell2</td>
</tr>
<tr>
<td>Cell3</td>
</tr>
</table>
10. Perhatikan tampilan tabel berikut ini!

Kode HTML yang benar untuk membuat tampilan tabel seperti di atas adalah….6

A. <table border="1">
     <tr>
<td rowspan="2">1</td>
           <td
colspan="2">2</td>
     </tr>
     <tr>
<td>3</td>
<td>4</td>
     </tr>
</table>
B <table border="1">
.      <tr>
<td colspan="2">1</td>
           <td
rowspan="2">2</td>
     </tr>
     <tr>
<td>3</td>
<td>4</td>
     </tr>
</table>
C <table border="1">
.      <tr>
<td>1</td>
           <td>2</td>
     </tr>
     <tr>
<td colspan="2">3</td>
 <td rowspan="2">4</td>
     </tr>
</table>
D <table border="1">
.      <tr>
<td>1</td>
           <td></td>
           <td
rowspan="2">2</td>
     </tr>
     <tr>
<td>3</td>
<td>4</td>
           <td></td>
     </tr>
</table>
E. <table border="1">
     <tr>
<td colspan="1">1</td>
           <td colspan="1"></td>
     </tr>
     <tr>
<td>3</td>
<td>4</td>
           <td
rowspan=”2”>2</td>
     </tr>
</table>

11. Perintah yang digunakan untuk mengarahkan pada alamat www.contoh.com

adalah...
A. <a hreff="https://www.contoh.com/">Kunjungi contoh</a>
B. <a haref="https://www.contoh.com/">Kunjungi contoh</a>
C <a hreff "https://www.contoh.com/">Kunjungi contoh</a>
.
D <a href "https://www.contoh.com/">Kunjungi contoh</a>
.
E. <a href="https://www.contoh.com/">Kunjungi
contoh</a>
12.

Perhatikan gambar, kode program untuk formulir jenis kelamin adalah….

A. Jenis Kelamin: 
<input type="radio" name="JK" value="laki" /> Laki-laki
<input type="radio" name="JK" value="perempuan" /> Perempuan

B. <select name="Jenis Kelamin" >

     <option value=" 1 "> Laki-laki</option>
     <option value=" 2 “>Perempuan</option>
 </select>
C. Jenis Kelamin: <input type="text" name="JK_laki" /> Laki-laki
      <input type="text" name="JK_perempuan" checked /> Perempuan
D. Jenis Kelamin: <input type="checkbox" name="JK_laki" /> Laki-laki
      <input type="checkbox" name="JK_perempuan" checked />
Perempuan
E. Jenis Kelamin: <input type="select" name="JK_laki" /> Laki-laki
      <input type="select" name="JK_perempuan" checked /> Perempuan

13. Perhatikan gambar pada nomor 12, kode program untuk formulir hobi adalah….
A. Hobi: <input type="radio" name="hobi_baca" /> Membaca Buku
      <input type="radio" name="hobi_nulis" checked /> Menulis
      <input type="radio" name="hobi_mancing" /> Memancing
B. <select name="hobi" >
     <option value=" hobi_nulis "> Nulis</option>
     <option>Mancing</option>
    <option value=" hobi_mancing " selected>Nulis</option>
 </select>
C Hobi: <input type="text" name="hobi_baca" /> Membaca Buku
.       <input type="text" name="hobi_nulis" checked /> Menulis
      <input type="text" name="hobi_mancing" /> Memancing
D Hobi: <input type="checkbox" name="hobi"baca" /> Membaca
. Buku
      <input type="checkbox" name="hobi_nulis" checked />
Menulis
      <input type="checkbox" name="hobi_mancing" /> Memancing
E. Hobi: <input type="select" name="hobi_baca" /> Membaca Buku
      <input type="select" name="hobi_nulis" checked /> Menulis
      <input type="select" name="hobi_mancing" /> Memancing

14.

Kode HTML yang benar untuk membuat tampilan seperti pada gambar tersebut
adalah….
A. <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
         h1 {
            color: red;
        }
    </style>
 
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Isi dari berita utama adalah berita
intinya
    </p>
 
    <h2>
        Paragraf kedua.
    </h2>
  </body>
</html>

B. <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Isi dari berita utama adalah berita intiny
a
    </p>
 
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

C <!DOCTYPE html>
. <html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>
 
   <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Isi dari berita utama adalah berita
intinya
    </p>
 
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

D <!DOCTYPE html>
. <html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
        h1 {
            color: red;
        }
        p {
            font-size: 50px;
        }
    </style>
 
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Isi dari berita utama adalah berita intiny
a
    </p>
 
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

E. <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
        p {
             font-size: 50px;
        }
    </style>
 
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Isi dari berita utama adalah berita intiny
a
    </p>
 
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

15. Sebuah paragrap pada suatu halaman web site membutuhkan ukuran 200x200
pixel dengan latarbelakang kuning. Kode HTML untuk program tersebut
adalah….
A.     <p  style=  "background-color:  yellow;",
    "width: 200px;",
    "height: 200px;"
    >       
    Isi dari berita utama adalah berita intinya
    </p>
B     <p  style=  "background-color:  yellow;
.                 width: 200px;
                height: 200px;"
    >       
        Isi dari berita utama adalah berita
intinya
</p>    
C     <p  style=  "background-color:  yellow,
.                 width: 200px,
                height: 200px"
    >       
        Isi dari berita utama adalah berita intinya
 </p>    
D <p  style=  "background-color:  yellow;
.                 width: 200;
                height: 200;"
    >       
        Isi dari berita utama adalah berita intinya
</p>    
E. <p  style=  "background-color:  yellow,
                width: 200,
                height: 200"
    >       
        Isi dari berita utama adalah berita intinya
</p>    

16. Seorang programer ingin membuat sebuah halaman login untuk siswa dengan
ketentuan sebagai berikut:
 Terdapat inputan form NIS berupa angka
 Terdapat inputan password dengan tampilan disensor
 Terdapat button untuk melakukan aksi login
Untuk membuat sebuah form seperti ilustrasi diatas, kode HTML yang tepat
adalah….
A. <form action="login.php" method="get">
      <input type="number" name="nis" placeholder="NIS"><br>
      <input type="password" name="pass" placeholder="Kata Sandi"><br>
      <input type="submit" name="submit" value="Masuk">
</form>
B <form action="login.php" method="post">
.       <input type="number" name="nis" placeholder="NIS"><br>
      <input type="password" name="pass" placeholder="Kata
Sandi"><br>
      <input type="submit" name="submit" value="Masuk">
</form>
C <form action="login.php" method="get">
.       <input type="numeric" name="nis" placeholder="NIS"><br>
      <input type="password" name="pass" placeholder="Kata Sandi"><br>
      <input type="submit" name="submit" value="Masuk">
</form>
D <form action="login.php" method="post">
.       <input type="numeric" name="nis" placeholder="NIS"><br>
      <input type="password" name="pass" placeholder="Kata Sandi"><br>
      <input type="submit" name="submit" value="Masuk">
</form>
E. <form action="login.php" method="post">
      <input type="text" name="nis" placeholder="NIS"><br>
      <input type="password" name="pass" placeholder="Kata Sandi"><br>
      <input type="submit" name="submit" value="Masuk">
 </form>

17. Seorang programer ingin membuat sebuah halaman input nama dan tanggal
lahir siswa dengan ketentuan sebagai berikut:
 Terdapat inputan form nama
 Terdapat inputan tanggal dengan tampilan DD/MM/YYY
 Terdapat button untuk melakukan penyimpanan
Untuk membuat sebuah form seperti ilustrasi diatas, kode HTML yang tepat
adalah….
A. <form action="simpan.php" method="post"><br>
     <input type="text" name="nama"><br>
     <input type="text" name="tgl_lahir"><br>
     <input type="submit" name="submit" value="Simpan">
</form>
B <form action="simpan.php" method="post"><br>
.      <input type="text" name="nama"><br>
     <input type="date" name="tgl_lahir"><br>
     <input type="submit" name="submit"
value="Simpan">
</form>
C <form action="simpan.php" method="get"><br>
.      <input type="number" name="nama"><br>
     <input type="date" name="tgl_lahir"><br>
     <input type="submit" name="submit" value="Simpan">
</form>
D <form action="simpan.php" method="get"><br>
.      <input type="text" name="nama"><br>
     <input type="text" name="tgl_lahir"><br>
     <input type="submit" name="submit" value="Simpan">
</form>
E. <form action="simpan.php" method="post"><br>
     <input type="text" name="nama"><br>
     <input type="number" name="tgl_lahir"><br>
     <input type="submit" name="submit" value="Simpan">
</form>

18. Perhatikan tampilan berikut!

Sebuah halaman web ingin menampilkan setiap paragraf dengan ukuran font
12px, jenis font arial, dan tulisan tercetak miring. Kode CSS yang benar untuk
membuat tampilan seperti ilustrasi tersebut adalah….
A. <p style=”font-family: ‘Arial’; font-size: 12px; font-style: italic”>Sukses UN
RPL 2020</p>
B. <p style =”font-style: ‘Arial’;font-size: 12px;font-type: italic”>Sukses UN RPL
2020</p>
C. <p style =”text-family: ‘Arial’;font-size: 12px;text-transform: italic”>Sukses UN RPL
2020</p>
D. <p class=”font: ‘Arial’;text-size: 12px;text-style: italic”>Sukses UN RPL 2020</p>
E. <p class=”font-family: ‘Arial’;text-size: 12px;text-transform: italic”>Sukses UN RPL
2020</p>

19. Potongan kode berikut yang tepat untuk menampilkan gambar sebagai kaitan
adalah….
A. <img src=”gambar.jpg”>
B. <img href=”http://test.com”>
C. <a> <img src=”gambar.jpg”> </a>
D. <a href=”http://test.com”> </a>
E. <a href=” http://test.com”> <img src=”gambar.jpg”> </a>

20. Perhatikan gambar berikut.

Potongan kode yang tepat untuk menampilkan komponen form di atas adalah….
A. <input type="checkbox"> I Agree to The Privacy Policy
B. <input type="submit"> I Agree to The Privacy Policy
C. <input type="radio"> I Agree to The Privacy Policy
D. <input type="text"> I Agree to The Privacy Policy
E. <input type="tel"> I Agree to The Privacy Policy

21. Halaman web akan menampilkan sebuah gambar dengan ukuran lebar 512 px
dan tinggi 256 px. Potongan kode CSS yang perlu ditambahkan adalah….
A. img { width: 512; height:256; }
B. image { width: 512; height: 256; }
C. <img width=”512” height=”256”>
D. img { width: 256; height: 512px; }
E. <img src=”gambar.png” style=”width:512px; height:256px;”>

22. Sebuah halaman web ingin menampilkan sebuah button berlatar belakang
merah bertuliskan “Hapus” berwarna putih, dan memiliki garis tepi warna hitam
dengan setiap tepinya sedikit melengkung. Kode CSS yang benar untuk
membuat tampilan seperti ilustrasi tersebut adalah….
A. <button style="background: red;border: 1px solid #000;border-radius:
5px;color: white">Hapus</button>
B. <button style="background: red;border: 1px solid #000;color:
white">Hapus</button>
C. <button style="background: red;border: 1px solid #fff;border-radius: 5px;color:
black">Hapus</button>
D. <button style="background: white;border: 1px solid red;color:
black">Hapus</button>
E. <button style="background: red;border: 1px solid #000;border-radius:
5px">Hapus</button>
23. Perhatikan gambar berikut.

Kode CSS yang benar untuk membuat tampilan seperti pada gambar diatas
adalah…
A. p{
background-color: #C2F670;
width: 200px;
height: 200px;
border: 4px solid red;
padding: 2em;
margin: 0;
      }
B. p{
background-color: #C2F670;
width: 200px;
height: 200px;
border: 4px solid red;
padding: 0;
margin: 2em;
      }
C. p{
background-color: #C2F670;
width: 200px;
height: 200px;
border: 4px dashed red;
padding: 2em;
margin: 0;
      }
D. p{
background-color: #C2F670;
width: 200px;
 height: 200px;
border: 4px dashed red;
padding: 0;
margin: 2em;
      }
E. p{
background-color: #C2F670;
width: 200px;
height: 200px;
border: 4px solid red;
      }

24. Perhatikan gambar berikut.

 Paragraf kedua pada halaman HTML tersebut menggunakan properti position
dengan value…
A. Default
B.Static
C. Relative
D. Absolute
E.Fixed

25. Untuk menyisipkan kode CSS di dalam tag HTML, atribut yang perlu
ditambahkan adalah ….
A. id
B. rel
C. class
D. style
E. href

26. Perhatikan gambar berikut.

  
Agar hyperlink dapat mengarahkan user menuju ke halaman home.html, nilai
atribut href yang ditambahkan pada potongan kode tersebut adalah….
A. #home
B. home
C. profil 
D. home.html 
E. profil.html

27. Perhatikan potongan kode berikut.

Jenis selector yang digunakan pada potongan kode tersebut adalah…

A. ID selector
B. Tag selector
C. Class selector
D. Child selector
E. Universal selector

28. Perhatikan potongan kode berikut.

  
Keluaran yang ditampilkan pada browser adalah….
A. Teks Paragraf 1 berwarna merah
B. Teks Paragraf 2 berwarna merah
C. Teks Paragraf 1 dan 2 berwarna merah
D. Teks Paragraf 1 dan 3 berwarna merah
E. Teks Paragraf 1,2, dan 3 berwarna merah

29. Tag <ol> digunakan untuk membuat list...

A. List tidak terurut
B. List terurut tapi berantakan
C. List terurut
D. List tunggal
E. List jamak

30. Dalam tag <form> dalam HTML, tedapat dua jenis method yaitu...
A. GET & POST
B. HTTPS & POST
C. HTTP & HTTPS
D. POST dan SELF
E. HTTP dan SELF