CSS PART 8: penggunaan tinggi dan lebar di css.
PENGGUNAAN TINGGI DAN LEBAR DI CSS
ASSALAMUALAIKUM wr wb.
kali ini saya akan membahas tentang penggunaan height dan width teman-teman pasti pernah menggunakannya tapi apa mengerti maksudnya kalau masih belum mengerti berikut penjelasannya:
1.PENGERTIAN HEIGHT Dan WIDTH
Height digunakan untuk mengukur tinggi elemen.
Width digunakan untuk mengukur lebar elemen
Height digunakan untuk mengukur tinggi elemen.
Width digunakan untuk mengukur lebar elemen
2.MAKSUD dan TUJUAN.
untuk mengetahui cara penggunaan height dan width.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur tinggi dan lebar elemen pada tag HTML.
height dan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung.
Pengaturan max-width
The max-widthproperti digunakan untuk mengatur lebar maksimum dari suatu elemen.
The max-widthdapat ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung, atau diatur none (ini adalah default. Berarti bahwa tidak ada lebar maksimum).
Masalah dengan <div>di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen (500px). Browser kemudian menambahkan scrollbar horisontal ke halaman.
Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.
berikut ini penjelasan diatas:
untuk mengetahui cara penggunaan height dan width.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur tinggi dan lebar elemen pada tag HTML.
height dan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung.
Pengaturan max-width
The max-widthproperti digunakan untuk mengatur lebar maksimum dari suatu elemen.
The max-widthdapat ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung, atau diatur none (ini adalah default. Berarti bahwa tidak ada lebar maksimum).
Masalah dengan <div>di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen (500px). Browser kemudian menambahkan scrollbar horisontal ke halaman.
Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.
berikut ini penjelasan diatas:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: #43eacb;
height: 250px;
width: 290px;
}
</style>
<title></title>
</head>
<body>
<center><p>
<br>heightdan widthproperti yang digunakan untuk mengatur tinggi dan lebar elemen.
The heightdan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung. </br>
</p></center>
</body>
</html>
<html>
<head>
<style>
p{
background-color: #43eacb;
height: 250px;
width: 290px;
}
</style>
<title></title>
</head>
<body>
<center><p>
<br>heightdan widthproperti yang digunakan untuk mengatur tinggi dan lebar elemen.
The heightdan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung. </br>
</p></center>
</body>
</html>
ini hasil dari script di atas:
Dan ini contoh penggunaan max-width:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: #43eacb;
height: 250px;
max-width: 580px;
}
</style>
<title></title>
</head>
<body>
<center><p>
<br>heightdan widthproperti yang digunakan untuk mengatur tinggi dan lebar elemen.
The heightdan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung. </br>
</p></center>
</body>
</html>
<html>
<head>
<style>
p{
background-color: #43eacb;
height: 250px;
max-width: 580px;
}
</style>
<title></title>
</head>
<body>
<center><p>
<br>heightdan widthproperti yang digunakan untuk mengatur tinggi dan lebar elemen.
The heightdan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung. </br>
</p></center>
</body>
</html>
ini hasilnya:
sekian artikel dari saya apabila ada tulisan yang membuat anda tidak senang mohon maaf
REFERENSI:
WASSALAMUALAIKUM wr wb.
Komentar
Posting Komentar