TUGAS CODING PAK ANGGA

SOAL TUGAS HTML & CSS

Nama Kelompok:

• Atika Nanda R
• Raisha Septi F  

SOAL DAN JAWABAN:

Soal 1 (15 Poin)

Pertanyaan:

a. bentuk tampilan yang muncul seperti apa?

    #kotak persegi panjang dengan ukuran 200px x 100px berisi teks "Halo Dunia"

b. apa warna latar belakang dan warna teksnya? 

• Background: biru (blue) 
• Teks: putih (white)

c. dimana posisi teks berada?

• Horizontal >> karena teks-align: center;
• Vertikal >> karena lane-height: 100px; (sama dengan tingga box)

Soal 2 ( 15 Poin) 

Pertanyaan:

a. apakah tampilan menyerupai tombol? jelaskan.

    #Ya, menyerupai tombol karena:

• Ada padding
• Warna background
• Tidak ada border
• Ada border-radius

b. bagaimana bentuk sudut tombol?

#Sudutnya membulat karena border-radius: 8px;

c. apakah tombol terlihat kecil atau sedang? mengapa?

    #Terlihat sedang, karena padding 10px 25px membuat tombol cukup lebar dan tidak terlalu kecil

Soal 3 (20 Poin)

Tugas:

a. Gambar tampilan Ui yang dihasilkan 

• Lebar 250px
• Background abu abu muda (#eeeeee)
• Border hitam tebal 2px
• Didalam nya ada:
• Judul besar: budi
• Paragraf: Siswa TKJ

b. Jelaskan fungsi border dan padding pada kode diatas

• Border >> memberi garis tepi hitam disekeliling card.
• Padding >> memberi jarak antara isi teks dengan tepi kotak agar tidak menempel.

Soal 4 (20 Poin)

Pertanyaan:

a. Posisi menu ditampilkan secara vertikal atau horizontal?

    #Horizontal, karena .menu { display: flex; }

    (default flex arahnya kesamping atau row)

b. Ada berapa menu yang terlihat?

• Home
• Profil
• Logout

c. Warna apa yang muncul pada menu?

#Warna orange, karena .item { background-color: orange; }

Soal 5 (30 Poin)

Tugas:

a. Deskripsikan tampilan UI yang dihasilkan

    #Kotak peringatan (alert)

• Lebar 220px
• Backround merah
• Teks putih
• Ada padding 15px
• Berisi tulisan "perhatian!''

b. Ubahlah CSS agar:

• Warna background menjadi kuning 
• Teks berada ditengah 
• Sudut kotak menjadi melengkung