Langsung ke konten utama

belajar CSS dasar bersama part 5 : Width dan Height property css

  


dalam judul diatas kita kali ini akan mencoba panjang dan lebar atau width dan height di css. kita juga akan mencoba memahami bagaimana kinerja properti width dan height ini dalam css, namun sebelumnya izinkan diri ini untuk mengucapkan

Salam sobat semua


Alhamdulillah atas segala nikmat yang sudah Allah berikan kepada diri ini, dan nikmat bisa menulis dan berbagi lagi dengan kalian.

hanya dengan izin-Nya lah kita bisa melakukan sesuatu yang baik ini.


dalam kesempatan kali ini kita akan mencoba properti yang namanya width dan height. pastilah bagi kalian yang paham dan bisa bahasa inggris bisa 

langsung menebak fungsi dari dua properti tersebut. ya benar untuk properti width fungsinya untuk mengatur lebar dan height untuk mengatur tinggi.

dan untuk nilai atau value dari properti tersebut kita bisa menggunakan pixel (px), em atau persen (%).


1. langsung saja buka file yang kemaren atau bisa juga buat file lagi kawan. dan ketikkan atau copy paste kode berikut dalam file css nya

#main{
border:7px solid blue;
width:750px;
}

dan dalam file html bisa di ketik atau copy paste seperti berikut

<html>

<head>

<title>My Web</title>

<link href="style/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="main">

<p>Ini adala isi dari main content yang akan saya buat sebagai website pertama saya</p>

<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat website prtama saya</p>

</div>

</body>

</html>

maka dari kode diatas jika kita benar dan tepat maka akan diperoleh hasil seperti berikut

2. jika kita lihat dari hasil diatas maka kita akan memperoleh suatu penafsiran bahwa lebar dari selector main menjadi selebar 750px. dan sekarang kita coba ubah nilai

dari width tersebut dengan persen sehingga menjadi seperti berikut

#main{
border:7px solid blue;
width:100%;
}

maka dari kode tersebut menghasilkan seperti berikut.



 tampak jelas sekali hasil diatas ukuran lebar selector main jadi penuh karena kita memakai nilai 100%. dan ketika kita memakai persen maka untuk ukuran lebar tersbeut

akan mengikuti lebar dari browser, jadi ketika browser mengecil maka selector main akan juga mengecil. sekarang kita coba dan akan menghasilkan seperti berikut.



3. sedangkan untuk properti height itu untuk mengatur tinggi selector. jadi untuk nilai saya sangat jarang sekali memakai bahkan hampir tidak pernah memakai persen
ataupun em. yang saya pakai pixel (px). oke kita langsung coba kawan seperti kode berikut
#main{
border:7px solid blue;
width:100%;
height:550px;
}

maka kode diatas akan menampilkan seperti berikut



 4. selain itu saya juga kadang sering menggunakan properti max-width dan min-width. max-width ini berfungsi untuk mengatur batas paling tinggi ukuran lebar suatu

selector kawan, jadi meskipun browser atau konten membesar maka selector akan membesar sampai batas nilai max-width. sekarang kita coba kode berikut

#main{
border:7px solid blue;
max-width:550px;
width:100%;
}

maka hasil kode diatas akan didapatkan hasil seperti berikut



 jika browser kita kecilkan maka akan didapat spserti berikut



 5. dan min-width digunakan untuk mengatur batas paling rendah untuk ukuran lebar suatu selector, jadi meskipun browser atau konten mengecil maka selector akan mengecil

sampai batas nilai min-width. sekarang kita langsung coba biar lebih jelas dan paham kode berikut.

#main{
border:7px solid blue;
min-width:550px;
width:100%;
}

dari kode diatas akan dihasilkan seperti berikut


dan jika browser atua konten kita kecilkan maka akan sperti berikut


nah untuk tulisan kali ini saya rasa cukup sekian dulu, dan dari awal sampai akhir tulisan ini mudah-mudahan bisa bermanfaat untuk kita terutama khususnya untuk
saya pribadi. dan kita lanjut di next tulisan kawan.

salam sobat semua.

#css #html #selector #width #height #max #min #free #share #berbagi #gratis #web #websites #website

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya