Dasar Dimensi Website/Blog
Dasar Dimensi Website/Blog – Dimensi website/blog merupakan bagian dari Konsep CSS Layouting. Pada pembahasan artikel kali ini, penting sekali untuk memahami Property Display yang ada pada CSS. Untuk refresh secara garis besar, Property Display pada CSS memiliki default value, yaitu: inline dan block. Untuk elemen HTML yang memiliki value inline, maka ukurannya atau dimensinya tidak akan bisa diatur. Kecuali kita rubah default dari nilai property displaynya menjadi block atau inline block. Sedangkan untuk elemen HTML yang memiliki property display block, untuk ukurannya atau dimensinya bisa diatur. Ketika kita menambahkan elemen HTML yang memiliki value display adalah block, maka akan menambahkan baris baru, ketika ditambahkan elemen tersebut. Sedangkan untuk property display inline, ketika ditambahkan elemen HTML-nya maka elemen HTML yang baru akan berada sejajar atau dalam satu baris dengan elemen HTML sebelumnya.
Dasar dimensi website/blog sebenarnya sangat sederhana, karena hanya ada 2 jenis dimensi, yaitu :
1. Width adalah lebar bila diartikan dalam bahasa indonesia, merupakan suatu lintang bidang ke arah horizontal atau secara menyamping baik ke arah kanan atau arah kiri.
2. Height adalah yinggi bila diartikan dalam bahasa indonesia , merupakan suatu lintang bidang ke arah vertikal atau secara garis lurus baik keatas atau kebawah.
Namun penting kita memahami satuan ukuran dan perilaku dari satuan ukuran dari 2 jenis dimensi width dan height. Width dan height kita bisa gunakan secara bersama, ataupun hanya salah satu. Cara penggunaan ini juga, sebaiknya kita bisa pahami perilaku dari 2 jenis dimensi tersebut.
Pertama, saya akan bahas mengenai satuan ukurannya dari 2 jenis dimensi width dan height. Saya yakin, untuk satuan ukuran banyak diantara kita sudah tidak asing mendengar beberapa satuan ukuran yang sering kita jumpai dalam kehidupan sehari-hari. Bahkan kita pun sering menggunakannya. Untuk dimensi website/blog dalam CSS adalah width dan height yang memiliki satuan sebagai berikut :
1. px (pixel)
pixel adalah satuan absolute atau pasti. Satuan ini adalah satuan terkecil pembentuk suatu warna. Dimana 1 pixel mewakili 1 titik. Lihat contoh dibawah, dengan menggunakan elemen HTML div atau tag <div> yang memiliki property display block, sehingga bisa diatur width dan heightnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dimensi</title>
<style>
div {
width: 250px;
height: 300px;
}
</style>
</head>
<body>
<div>Dimensi</div>
</body>
</html>
2. % (persen)
Persen adalah satuan yang relatif terhadap elemen parentnya atau pembungkusnya suatu elemen HTML. Elemen HTML yang menggunakan satuan ini, maka ketika kita resize browser, elemen HTML tersebut akan selalu menyesuaikan dengan ukuran parentnya atau pembungkusnya. Kalau pembungkusnya itu adalah body atau browser secara keseluruhan, maka dimensi dari elemen HTML tersebut akan selalu menyesuaikan dengan besar browsernya.
<html lang="en">
<head>
<title>Dimensi</title>
<style>
div {
width: 100%;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
Dimensi</div>
</body>
</html> |
| Satuan Pixel dan Persen |
3. Ukuran yang ada didunia nyata
in : inch
cm : centimeter
mm : milimeter
pt : point
pc : pica
Notes : untuk point dan pica biasanya digunakan untuk kebutuhan printing untuk mengatur font. untuk kebutuhan dimensi website atau blog, kita akan sering menggunaka px atau %.
Width dan height bisa digunakan tidak harus bersamaan, atau bisa digunakan salah satunya saja. Ketika salah satu dimensi digunakan, maka dimensi yang lainnya akan menyesuaikan terhadap isi konten website/blog. Lihat contoh dibawah untuk satu kalimat dan beberapa kalimat yang hanya menggunakan dimensi width saja, maka heightnya akan menyesuaikan isi dari konten yang bersangkutan. Widthnya akan tetap dipertahankan sesuai dengan ukuran yang sudah berikan pada stylenya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dimensi</title>
<style>
div {
width: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<h1>Dimensi</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sint soluta quos rem, nulla commodi consequuntur odio quae, libero incidunt modi ea minus, natus quo esse iure nam. Cumque totam, assumenda quos ex consectetur veritatis tempora cum dignissimos itaque illo qui saepe minus pariatur debitis, magnam blanditiis. Possimus id, dolores ad iste molestiae illo eius deleniti optio voluptas reiciendis ratione iure eligendi quaerat natus voluptates nemo, odio quod. Minus hic suscipit est quisquam ratione eaque culpa quia ipsum, possimus sunt atque explicabo expedita, assumenda corporis tempore repudiandae? Fugit quas unde, blanditiis dolores repudiandae, possimus necessitatibus? Voluptatum, dolores eveniet consequuntur praesentium?</p>
</div>
</body>
</html>
Lain halnya ketika kita sudah mengatur widht dan heightnya secara pasti, lalu ketika isi dari konten melebihi batas dari width dan heightnya, maka kelebihan konten tersebut akan melewati width dan height yang sudah dibuat. Secara default konten yang melebih dimensi memiliki nilai visible, artinya konten yang melebihi dimensi akan diperlihatkan, walaupun melebihi ukuran dimensi elemen HTML yang membungkusnya. Untuk lebih jelas lihat contoh dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dimensi</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<h1>Dimensi</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sint soluta quos rem, nulla commodi consequuntur odio quae, libero incidunt modi ea minus, natus quo esse iure nam. Cumque totam, assumenda quos ex consectetur veritatis tempora cum dignissimos itaque illo qui saepe minus pariatur debitis, magnam blanditiis. Possimus id, dolores ad iste molestiae illo eius deleniti optio voluptas reiciendis ratione iure eligendi quaerat natus voluptates nemo, odio quod. Minus hic suscipit est quisquam ratione eaque culpa quia ipsum, possimus sunt atque explicabo expedita, assumenda corporis tempore repudiandae? Fugit quas unde, blanditiis dolores repudiandae, possimus necessitatibus? Voluptatum, dolores eveniet consequuntur praesentium?</p>
</div>
</body>
</html>
 |
| Width & Height |
Untuk mengatasi kelebihan konten tersebut seperti kasus diatas, kita bisa mengatasinya dengan menggunakan property CSS, yaitu overflow. Property overflow ini memiliki 4 nilai yang bisa kita berikan, yaitu:
● Visible adalah nilai atau value default dari property overflow ini. tanpa kita harus memberikan property css overflow, maka secara otomatis kelebihan konten yang ada akan diperlihatkan. Maksudnya apabila ada konten yang keluar dari elemen parent-nya atau pembungkusnya, maka akan diperlihatkan apa adanya konten tersebut.
● Auto merupakan nilai yang kita bisa berikan pada pada property overflow ini, sehingga ketika suatu konten melebihi elemen parent-nya, maka secara otomatis css akan memberikan style scroll pada konten tersebut. Namun, bila kontennya mencukupi elemen pembungkusnya, maka scrollnya akan hilang.
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
overflow: auto;
}
</style>
● Hidden adalah nilai yang kita bisa berikan pada property overflow ini, sehingga ketika suatu konten yang diberikan property overflow dengan nilai hidden, maka kelebihan konten yang melebihi elemen pembungkusnya akan disembunyikan, sehingga kita tidak bisa mengaksesnya.
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
</style>
● Scroll merupakan nilai dari property overflow yang perilakunya hampir mirip dengan nilai auto. Bedanya kalau kita menggunakan nilai property overflow dengan value scroll ini, maka baik ada kelebihan konten atau tidak ada kelebihan konten yang melebihi elemen parentnya, style scroll akan tetap ada.
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
overflow: scroll;
}
</style>
 |
| Overflow Visible & Hidden |
 |
| Overflow Auto & Scroll |
Sekian untuk penjelasan dimensi dari sebuah halaman website, semoga bisa berguna buat teman-teman yang baru belajar membuat website.
Post a Comment for "Dasar Dimensi Website/Blog "
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan