TUGAS DDPK PAK ANGGA MATERI HTML & CSS

SOAL TUGAS HTML & CSS

Nama Anggota Kelompok:

• Riris Nurul Falah
• Nia Dwi Anggraeni

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