PRAKTIKUM PEMROGRAMAN WEB

Mata Pelajaran : Pemrograman Web

Materi Praktikum ke 7 :
1. Float
2. PseudoClass
3. PseudoElement
4. Units
5. Box Sizing
6. Grid

1. Nama : seinol
No. Presensi : 16
Kelas : XI PPLG 2

Tanggal Praktikum : 8 Agustus 2023

 BAB I
PENDAHULUAN
1.1Tujuan
a. untuk membuat elementmengambang.
b. untuk mendefinisikan suatu keadaan khusus dari suatuelemen.
c. untuk memanipulasi dan mengubah tampilan elemen HTML tertentu tanpaperlu
menambahkan elemen HTMLtambahan.
d. untuk mengukur nilai-nilai numerik seperti panjang, lebar, ukuran font, danlainnya.
e. untuk mengontrol bagaimana ukuran elemen HTML dihitung, terutama dalam hal
bagaimana lebar dan tinggi elemen tersebut dihitung dalam konteks padding dan
border.
f. untuk membuat tata letak tampilan halaman web yang lebih kompleks danadaptif.
1.2 DasarTeori
a. CSS float adalah property css yang digunakan untuk membuat element
mengambang. Biasanya property ini digunakan untuk membuat element di samping
elementlain.
b. Pseudo-classes berguna untuk mendefinisikan suatu keadaan khusus darisuatu
elemen.
Biasa pseudo-classes digunakan untuk;
Mengubah gaya elemen saat pengguna mengarahkan mouse ke elemennya. Mengubah
gaya tautan yang dikunjungi dan yang belum dikunjungi secara berbeda. Mengubah
gaya saat elemen tersebut dihover.
c. Pseudo element adalah element semu atau element palsu. Element semu?
Sebenarnya setiap kita membuat element pada HTML, ada element semu yang bisa
kita beri style. Pseudo element ditulis menggunakan 2 tanda titik dua (::) setelah
selector sepertiini.
d. CSS Units adalah satuan ukuran yang sering kita pakai dalam membuat suatustyle
element. Contoh penggunaan satuan ini sering kita temui ketika menggunakan
FontSize, Padding, Margin dan masih banyaklagi.
e. CSS Box Sizing adalah cara untuk menentukan bagaimana lebar dan tinggi suatu
elemendihitung.
Jika box-sizing tidak ditentukan nilainya, maka secara default lebar dan tinggi suatu
elemen akan dihitung seperti berikut :
lebar + padding + border = lebar asli dari elemen tinggi
+ padding + border = tinggi asli dari elemen
Ini berarti ketika kita menentukan lebar dan tinggi suatu elemen, maka seringkali
elemen akan tampak lebih besar dari pada yang kita tentukan. Hal ini terjadi karena
padding dan border juga dihitung ketika menentukan lebar atau tinggi elemen.
f. Grid adalah metode tata letak dua dimensi, yaitu dengan menggunakan CSS Grid kita
dapat mengatur baris dan kolom pada sebuah element sekaligus. Hal ini berbeda
dengan CSS Flexbox, dimana dengan menggunakan flexbox, kita hanya dapat
mengatur baris atau kolomsaja
 BAB II
LANGKAH PERCOBAAN

1. a. float left div{

/* Penjelasan*/
/* Membuat element mengambang ke
kiri */ float: left;
}
b. float right
div {
/* Penjelasan */
/* Membuat element mengambang ke
kanan */ float: right;
}
2. selector:pseudo-
class
{ property:value;
}
3. selector::pseudo-
element { property:value;
}
4. .class { margin-top:50px;
}
5. /*
Lebar elemen .div1 hanya akan mencakup konten didalamnya saja, sehingga lebar
sesungguhnya adalah:
300 + (50 * 2) + (1 * 2) = 402px
*/
.div1 { width: 300px;
height: 100px;
padding: 50px; border:
1px solidblue;
box-sizing: content-box;
}

/*
Lebar elemen .div2 sudah mencakup konten, padding, dan bordernya sehingga
lebar sesungguhnya akan tetap 300px.
*/

.div2 { width: 300px;

height:100px;
padding:50px; border:
1pxsolid red; box-
sizing: border-box;}
6. .container { display:
grid;
 BAB III
HASIL DAN PEMBAHASAN
`
Untuk melebarkan grid tersebut dapat digunakan dengan menambah dan mengurangi
ukuran rem di grid templat columns untuk kolom dan grid templat rows untuk baris
dengan ukuran yang sesuai.
 BAB IV KESIMPULAN

Kesimpulannya, pengaturan tata letak, ukuran, gaya, dan posisi elemen dalam halaman web
melalui CSS memiliki tujuan yang bervariasi, termasuk menciptakan tampilan yang menarik,
memberikan pengalaman pengguna yang baik, dan mengendalikan presentasi visual secara
keseluruhan.
 DAFTAR PUSTAKA

--https://github.com/bellshade/HTML-
CSS/tree/main/CSS/029%20CSS%20Pseudo%20Classes
-https://github.com/bellshade/HTML-
CSS/tree/main/CSS/030%20CSS%20Pseudo%20Elements
-https://github.com/bellshade/HTML-CSS/tree/main/CSS/034%20CSS%20Units
-https://github.com/bellshade/HTML-CSS/tree/main/CSS/054%20CSS%20Box%20Sizing-
https://github.com/bellshade/HTML-CSS/tree/main/CSS/057%20CSS%20Grid
https://github.com/bellshade/HTML-CSS/tree/main/CSS/027%20CSS%20Float