Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Width Dan Height Pada CSS
Setelah kita belajar tentang property margin dan padding yang berfungsi mengatur jarak antar Tag / Element HTML, maka pada tutorial kali ini kita kan mempelajari tentang dua buah property yang juga tidak kalah penting dalam pengaturan tampilan sebuah website, yaitu property width dan height.
Apa itu property width dan height dan bagaimana cara menggunakannya?
Mari kita bahas satu persatu.
Tapi sebelum kita mulai memasuki pembahasannya, silahkan anda buat terlebih dahulu sebuah folder didesktop anda dengan nama belajar_property_width_height_css dan pastikan teks editor dan browser kesayangan anda bisa berfungsi dengan baik.
Jika sudah maka sekarang saatnya kita mulai tutorialnya.
MENGENAL PROPERTY WIDTH DAN HEIGHT
Property width merupakan property berfungsi untuk mengatur ukuran lebar sebuah Tag / Element HTML, sedangkan property height merupakan property berfungsi untuk mengatur ukuran tinggi sebuah Tag / Element HTML.
Kedua property ini tentu sangat penting dan sangat diperlukan dan merupakan bagian yang tidak terpisahkan dari sebuah website karena masing-masing Tag atau Element pada sebuah HTML perlu memiliki ukuran yang ideal sebab hal itu berpengaruh dalam pengaturan tataletak dan tampilan sebuah website.
Nilai Yang Bisa Digunakan Pada Property Width Dan Height
Nilai yang bisa digunakan pada kedua property ini diantaranya adalah :
- auto : memberikan ukuran secara otomatis.
contoh penulisan kode :
width : auto;
- ukuran : yaitu dengan menentukan ukuran tertentu semisal 10px.
contoh penulisan kode :
width : 50px;
- persentase : memberikan ukuran berupa persentase.
contoh penulisan kode :
width : 20%;
Cara Menggunakan Property Width dan Height
Setelah kita mengerti fungsi dari kedua property width dan height dan nilai yang bisa digunakan pada kedua property tersbut berdasarkan penjelasan diatas maka sekarang kita akan belajar tentang cara penggunaan kedua property tersebut.
Silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Propert Width Dan Height</title>
<style type="text/css">
.kolom_lebar{
width: 50%;
}
.kolom_tinggi {
height: 300px;
}
table{
margin-top: 30px;
}
</style>
</head>
<body>
<table border="3">
<tr>
<td class="kolom_lebar">INI ADALAH KOLOM YANG MEMILIKI LEBAR 50%</td>
</tr>
</table>
<table border="3">
<tr>
<td class="kolom_tinggi">INI ADALAH KOLOM YANG MEMILIKI TINGGI 300px</td>
</tr>
</table>
</body>
</html>
Kemudian simpan dengan nama width_height_css.html didalam folder belajar_property_width_height_css, lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :
Nah itulah pembahasan tentang Cara Menggunakan Property Width dan Height pada kode CSS.
Agar lebih bersemangat saya beri sebuah contoh desaign sederhana untuk anda yang sedang mempelajari kode CSS ini. Berikut kodenya :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>Belajar Mempraktekkan Kode CSS</title>
<style type="text/css">
body{
margin: 0;
}
table{
border-collapse: collapse;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
a{
color:#0f009a;
text-decoration: none;
}
.nav{
background-color: #d0d0fd;
}
.nav-menu{
color:#0f009a;
border: 5 solid #0f009a;
margin-left: 20px;
font-size: 22px;
}
.judul{
padding: 20px;
height: 150px;
font-size: 32px;
}
.kanan, .kiri{
width: 20%;
background-color: #d0d0fd;
}
.tengah{
width: 60%;
max-width: 60%;
}
.kanan,.kiri, .tengah{
height: 400px;
}
.kanan, .kiri, .tengah, .footer{
padding: 10px;
}
.judul, .footer{
width: 100%;
background-color: #0f009a;
color: white;
}
.footer {
text-align: center;
font-size: 18px;
}
.konten{
padding: 10px;
border-bottom: 5px solid #0f009a;
color: #0f007a;
}
.konten:hover{
background-color: rgba(0,0, 200,0.3);
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3" class="nav"><b class="nav-menu"> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a> </b>
</td>
</tr>
<tr>
<td colspan="3" class="judul">
<h2>Tutorial Belajar CSS Untuk Pemula</h2>
</td>
</tr>
<tr>
<td class="kiri">
<a href="">Mengenal Apa Itu CSS</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Mengenal Apa Itu CSS</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Cara Memasukkan Kode CSS Kedalam File HTML</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Mengenal Macam-Macam Selector</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Belajar Warna Dalam CSS</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Belajar Warna Dalam CSS (bagian - kedua)</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Color Pada CSS</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Background Pada CSS</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Background Pada CSS (bagian kedua)</a>
<hr>
<a href="">Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Border Pada CSS</a>
</td>
<td class="tengah" valign="top">
<div class="konten"><h1>
<a href="">MENGENAL APA ITU CSS</a></h1>
<p>Sebagai pengembang website, mempelajari bahasa pemrograman khususnya bahasa
pemrograman yang ditujukan untuk pembuatan dan pengembangan website merupakan
sesuatu yang sangat penting, karena website itu sendiri terdiri dari rangkaian
kode-kode khusus yang tersusun rapi yang kemudian kode-kode tersebut dibaca oleh
komputer dan diproses lalu ditampilkan kepada pengguna dengan berbagai macam
tampilan sebagaimana yang sering kita lihat ketika kita berselancar diinternet.
<a href="">Baca Selengkapnya .... </a>
</p></div>
<br>
<div class="konten"> <h1>
<a href="">BELAJAR CSS DASAR</a></h1>
<p>Diantara bahasa pemrograman yang paling mendasar untuk dipelajari oleh
pengembang website yang baru saja terjun ke dunia website adalah HTML dan CSS.
HTML sendiri merupakan bahasa pemrogaman yang paling mendasar yang wajib dipelajari
dan dipahami pertama kali, bahkan sangat penting untuk dikuasai jika kita ingin
menjadi pengembang website yang handal sebelum akhirnya kita melangkah untuk
mempelajari bahasa pemrograman yang lain. <a href="">Baca Selengkapnya .... </a>
</p>
</div>
</td>
</tr>
<tr>
<td colspan="3" class="footer">Copyright©ibnulhusainan</td>
</tr>
</table>
</body>
</html>
Hampir semua kode yang digunakan adalah kode-kode yang telah kita pelajari.
Silahkan ketik atau copy-paste kode diatas kedalam teks editor anda (buat file baru) kemudian simpan didalam folder belajar_property_width_height_css dengan nama design_sederhana.html kemudian jalankan di browser anda, maka hasilnya kira-kira seperti ini :
Silahkan gunakan sebagai bahan pembelajaran. Anda bisa mengeditny sesuka anda.
Untuk property yang belum anda ketahui in sya aLLAH akan kita pelajari nanti satu persatu.
Bagaimana belajar CSSnya? Seru kan?
Semakin banyak yang anda pelajari akan semakin membuat anda senang in sya aLLAH.
Lalu, selanjutnya kita belajar apa lagi?
In sya aLLAH ditutorial selanjutnya kita akan belajar tentang :
Nah, ini bagian yang paling seru!!! Langsung saja baca tutorialnya disini >>>
Semoga Bermanfaat.