DDPK HTML CSS

 DDPK HTML CSS

Nama kelompok: 

• reva alika regina putri
• ririt virantika nur sasmita

SOAL 1

Pertanyaan:

a. bentuk tampilan yang muncul seperti apa?

    jawaban: sebuah kotak persegi panjang dengan lebar 200px dan tinggi 100px,didalam kotak tersebut terdapat tulisan "halo dunia"

b.apa warna latar belakang dan warna teksnya?

jawaban: background color blue dan warna text putih

c. dimana posisi teks berada?

jawaban: di tengah tengah kotak

SOAL 2

Pertanyaan:

a. apakah tampilan menyerupai tombol?jelaskan.

jawaban: yaa, karena elemen html <button>secara inheren dirancang sebagai tombol.

b. bagaimana bentuk sudut tombol?

jawaban: membulat 

c. apakah tombol terlihat kecil atau sedang?mengapa?

jawaban: sedang, karena ukuran tombol ditentukan oleh padding.

SOAL 3

tugas:

a.gambar tampilan UI yang dihasilkan

jawaban: tampilan UI akan menampilkan sebuah kotak abu abu dengan teks "budi" dan  "siswa tkj" didalamnya, dibatasi oleh garis tepi hitam 

b. jelaskan fungsi border dan padding pada kode diatas

jawaban: border befungsi menentukan garis tepi disekeliling elemen, sedangkan padding berfungsi untuk menentukan ruang kosong antara konten elemen dan garis tepinya 

SOAL 4

pertanyaan: 

a. posisi menu ditampilkan secara vertikal atau horizontal?

jawaban: horizontal

b. ada berapa menu yang terlihat? 

jawaban: 3

c. warna apa yang muncul pada menu?

jawaban: orange

SOAL 5

tugas:

a. deskripsikan tampilan UI yang dihasilkan

jawaban: tampilan UI yang dihasilkan adalah sebuah kotak dengan lebar 220px, padding 50px, latar belakang berwarna merah, dan teks berwarna putih yang berisi "perhatian"

b. ubahlah css agar:

• warna background ,menjadi kuning
• teks berada ditengah
• sudut kotak menjadi melengkung

step 1 

untuk mengubah warna latar belakang menjadi kuning, properti background-color harus diubah dari red menjadi yellow.

step 2

untuk menengahkan text, properti text-align dengan nilai center ditambahkan.

step 3

untuk membuat sudut kotak melengkung, properti-radius ditambahkan.misalnya ,dengan nilai 10px

kode css yang telah diubah:

\

.alert {

    width:  220px;

    padding: 15px;

    background-color: yellow;

    color: white;

    text-align: center;

    border-radius: 10px; /* nilai radius dapat disesuaikan */

}