Tugas DDPK Pak Angga Materi HTML&CSS

 SOAL TUGAS HTML & CSS


Nama Anggota Kelompok:

  • Nia Dwi Anggraeni
  • Riris Nurul Falah

Kelas: X TKJ

SOAL 1

Code HTML&CSS

Pertanyaan:

a. Bentuk tampilan yang muncul seperti apa? 

b. Apa warna latar belakang dan warnateksnya? 

c. Di mana posisi teks berada? 


Jawaban:

Hasil dari HTML & CSS

a. Tampilannya berupa kotak persegi panjang berukuran 200px × 100px

b. -Background (latarbelakang): biru🟦

    -Warna teks: putih⬜

c. Teks berada ditengah kotak, baik secara:

    -Horizontal (karena text-align: center) 

    -Vertikal (karena line-height: 100px sama dengan          tinggi box) 


SOAL 2

Code HTML & CSS

Pertanyaan:

a. Apakah tampilan menyerupai tombol? Jelaskan!

b. Bagaimana bentuk sudut tombol? 

c. Apakah tombol terlihat kecil atau sedang? Mengapa? 


Jawaban:

Hasil dari HTML & CSS

a. Ya, karena menggunakan elemen <button> dan diberi CSS yang membuatnya terlihat seperti tombol modern. 
b. Sudut tombol melingkar/rounded, karena 
border-radius:8px.
c. Tombol terlihat sedang, karena padding 10px 25px memberi ruang cukup besar didalam tombol sehingga tidak terlalu kecil. 

SOAL 3
Code dari HTML & CSS


Tugas:
a. Gambar lah tampilan UI yang dihasilkan
b. Jelaskan fungsi border dan padding pada kode diatas

Jawaban:

 


a. Sebuah kartu (card) berbentuk kotak lebar 250px dengan:

  • Judul: Budi
  • Deskripsi: Siswa TKJ
  •  Latar belakang abu-abu muda
  • Garis tepi hitam

b. •Border:2px solid black; memberi garis tepi disekelilingi card. 

    •Padding:15px; memberi jarak antar isi(teks) dan  tepi kotak, agar teks tidak menempel pada border. 


SOAL 4

Code dari HTML & CSS


Pertanyaan:

a. Posisi menu ditampilkan secara vertikal atau horizontal? 

b. Ada berapa menu yang terlihat? 

c. Warna apa yang muncul pada menu? 


Jawaban:



a. Ditampilkan secara horizontal (mendatar) karena:

Display:flex;

Secara default flex menampilkan item dalam satu baris (row) . 

b. Ada tiga menu yaitu :

1. Home

2. Profil

3. Logout

c. Menu berwarna :

Background:orange 🟧

Teks:warna hitam⬛


SOAl 5

Code dari HTML & CSS


Tugas:

a. Deskripsikan tampilan UI yang dihasilkan

b. Ubahlah CSS agar:

   •Warna background menjadi kuning🟨

   •Teks berada ditengah 

   •Sudut kotak menjadi melengkung


Jawaban:

Sebelum CSS Diubah



Code dari CSS Diubah


Setelah CSS Diubah



a. Tampilan berupa kotak alert berwarna merah dengan:

•Lebar 220px

•Padding 15 px

•Background merah 🔴

•Teks putih ⚪

Isi teksnya :

Perhatikan! 

Jadi terlihat seperti kotak peringatan (warning /alert box) . 

b. •Background kuning 

    •Teks tengah 

    •Sudut melengkung







c. 


Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS DOKUMENTASI HARIAN

Gambar
Mengumpulkan 100 Foto dalam 1 Minggu 1) Candi Borobudur 2) Candi Prambanan 3) Candi Penataran 4) Candi Sewu 5)  Game Roblox 6)  7) Candi Arjuna 8) Candi Plaosan 9) SKABIMA 10) MATSAMARA 11) MIM 02 Merden 12)  13)  14)  15)  16) 17)  18)  19)  20)  21)  22)  23)  24)  25) Telaga Warna Dieng 26) Gunung Slamet 27) Bukit Sikunir 28) Gunung Prau 29) Gunung Kembang 30) Gunung Sindoro 31) Gunung Sumbing 32) Gunung Telomoyo 33) Gunung Bismo 34) Kristal Ametis 35) Gunung Rinjani 36) Gunung Bromo 37) Gunung Andong 38) Gunung Merapi 39) Gunung Merbabu 40) Gunung Semeru 41) Gunung Jayawijaya 42) Masjid Al-Jabbar 43) Gunung Ciremai 44) Museum Geologi 45) Gunung Tambora 46) Gunung Agung 47) Gunung Salak 48) Gunung Galunggung 49) Gunung Anak Krakatau 50) Gunung Lawu 51) Gunung Ijen 52) Gunung Papandayan 53) Gunung Tangkuban Perahu 54) Si Bruno Well 56) Si Lily 57) Si Oren 58) Si Imut 59) 4 Black Bersaudara 60) Anggrek Hitam 61) Kant...
Baca selengkapnya

ULANGAN HARIAN DDPK

  SOAL MICROSOFT WORD #1 1. Apa yang dimaksud dengan Microsoft Word? 2. Sebutkan fungsi utama Microsoft Word! 3. Apa fungsi dari menu Home pada Microsoft Word? 4. Apa kegunaan Save dan Save As? 5. Sebutkan fungsi tombol Bold, Italic, dan Underline! 6. Apa yang dimaksud dengan Paragraph dalam Microsoft Word? 7. Bagaimana cara menyisipkan gambar di Microsoft Word? 8. Apa fungsi dari Header dan Footer? 9. Apa kegunaan fitur Spelling & Grammar? 10. Apa ekstensi (format) default file Microsoft Word? Jawaban Soal Microsoft Word #1 1. Apa yang dimaksud dengan Microsoft Word? Microsoft Word adalah perangkat lunak pengolah kata yang digunakan untuk membuat, mengedit, dan memformat dokumen teks seperti surat, laporan, dan makalah. 2. Sebutkan fungsi utama Microsoft Word! Fungsi utama Microsoft Word adalah mengolah dokumen teks, meliputi mengetik, mengedit, menyimpan, dan mencetak dokumen. 3. Apa fungsi dari menu Home pada Microsoft Word? Menu Home berfungsi untuk pengaturan dasar teks, s...
Baca selengkapnya