Latihan STS Kelas 11 Pemweb 2

Stimulus

<ul>

  <li><a href="page1.html">Home</a></li>

  <li><a href="page2.html">About</a></li>

  <li><a href="page3.html">Contact</a></li>

</ul>

Soal :Tag <ul> termasuk kategori….

• Inline-element
  
  

• Void-element
  
  

• Block-element
  
  

• Meta-element
  
  

• Empty-element

Stimulus :

<ul>

  <li><a href="page1.html">Home</a></li>

  <li><a href="page2.html">About</a></li>

  <li><a href="page3.html">Contact</a></li>

</ul>

Soal : Fungsi atribut href pada tag <a> adalah untuk….

• Menerapkan gaya

• Mendefinisikan tujuan link

• Menyisipkan gambar
  
  

• Menentukan judul
  
  

• Mengatur metadata

Stimulus :

<section>

  <h2>Profil</h2>

  <p>Nama: Andi<br>Jurusan: TKJ</p>

</section>

Soal : Tag <section> digunakan untuk….

• Menambahkan script

• Menyisipkan stylesheet

• Mengelompokan Konten tematis

• Membuat komentar

• Menyisipkan gambar

Stimulus :

<section>

  <h2>Profil</h2>

  <p>Nama: Andi<br>Jurusan: TKJ</p>

</section>

Soal : Menambahkan <header> sebelum <h2> dengan semantik lebih baik karena….

• Memudahkan penambahan CSS
  
  

• Tag bisa sekaligus inline
  
  

• Menyediakan konteks struktur halaman
  
  

• Menghilangkan paragraf
  
  

• Mencegah duplikasi

Stimulus :

<img src="logo.png" alt="Logo Perusahaan">

Soal : Atribut alt penting untuk aksesibilitas karena….

• Mempercepat loading
  
  

• Dapat dibaca oleh screen reader

• Mengurangi ukuran file
  
  

• Mencegah broken link
  
  

• Memvalidasi HTML

Stimulus :

<img src="logo.png" alt="Logo Perusahaan">

Soal : Jika src salah, browser akan menampilkan….

• Teks alt

• Konten deafult

• Placeholder bawaan

• Ikon patah

• Error 404

Stimulus

<article>

  <h3>Judul</h3>

  <p>Isi...</p>

</article>

<aside>

  <p>Catatan</p>

</aside>

Soal : Perbedaan semantik article vs aside adalah….

• Article untuk metadata, aside untuk konten utama

• Article untuk komentar, aside untuk sidebar
  
  

• Article dapat berdiri sendiri,aside adalah tambahan

• Keduanya sama

• Aside untuk heading, article untuk paragraf

Stimulus

<article>

  <h3>Judul</h3>

  <p>Isi...</p>

</article>

<aside>

  <p>Catatan</p>

</aside>

Soal : Bila aside dipindah ke footer, semantik berubah karena….

• Atribut berubah
  
  

• Posisi DOM ikut pengaruh
  
  

• Makna konten kontekstual

• Tag tidak boleh di footer

• Citra halaman rusak

Stimulus :

<div><span><strong>Hallo!</strong></span></div>

Soal : Hubungan block vs inline dalam kode ini….

• span mengandung block
  
  

• div inline
  
  

• strong block
  
  

• span inline berada di dalam div block

• div dalam span

Stimulus :

<div><span><strong>Hallo!</strong></span></div>

Soal : Jika <span> diganti <div>, apa dampaknya?

• strong jadi invalid
  
  

• Markup lebih semantik
  
  

• Struktur berubah ke block bertingkat

• Inline element tetap sama

• Tidak ada perubahan