Selamat berjumpa lagi dengan tutorial selanjutnya, kita akan mengubah bagian dari sisi layout border dengan CSS (Cascading Style Sheets). Layout merupakan suatu tampilan dari element, dengan mengedit sudut border, ketebalan border, maka suatu tampilan, akan semakin menarik. Penggunaan layout ini, hanya memerlukan kode properti sederhana, yaitu “border” di tamabah dengan value atau isi.
Terdapat berbagai value untuk properti border, seperti dashed, none, solid. Dengan value dashed, maka garis akan tampak seperti putus-putus, sedengkan none digunakan untuk mebuat layoit tanpa border. Lalu ada solid, merupakan garis lurus.
Dalam design border, ada properti yang menarik untuk diterapkan, yaitu “border-radius”. Dengan properti ini, maka setiap sudut dari layout bisa kita buat melengkung. Ukuran yang digunakan bisa memakai percent “%” ataupun pixel “px”.
Berikut merupakan properti keseluruhan dari border dan border-radius:
Border : …Ketebalan (px)… jenis-border….. warna ;
Border-radius : ……nilai atau ukuran (px / %)…..;
Jika kita sisipkan dalam tag <style> dengan selector “p”, ketebalan “1px”, jenis bordernya “solid”, dan warna nya merah. Lalu untuk sudutnya dibuat sedikit melengkung misalnya 7px, Maka akan tampak seperti berikut :
<style type="text/css">
p {border : 1px solid red;border-radius : 7px;}
</style>
Lalu, bagaimana jika kita masukan dalam kode html ?, kita akan coba konfigurasikan dengan html. Dimana bagian body kita edit dengan border “dashed” (tanpa radius), lalu bagian paragraf kita edit dengan border “solid“. Dan juga sebuah foto yang akan kita ubah seperti lingkaran.
Oh ya, siapkan juga gambar, yang harus disimpan dalam satu folder bersama file html yang sedang kita buat ini. gambar edit dulu, dimana ukuran panjang dan lebarnya harus sama, disini saya menggunakan foto “aku.jpg“. Oke, Langsung saja ini dia kode nya, silahkan ketik menggunakan notepad anda.
<html>
<head>
<style type="text/css">
body {border : 2px dashed red;
padding :5px;
}
.img {
width :60px;
height :60px;
border :2px solid #d9d7d7;
border-radius:50%;
overflow :hidden;
}
.img img{
width :100%;
height :100%;
}
p {
border :2px solid #d9d7d7;
padding:5px;
border-radius:7px;
}
a {
background :#db0e0e;
color :white;
font-family:verdana;
text-decoration:none;
padding:4px 9px;
border :1px solid #e92121;
border-radius:5px;
}
</style>
</head>
<body>
<div class="img">
<img src="aku.jpg">
</div>
<p>
perkenalkan nama saya adalah mario tegur, saya suka menegur orang, ketika ia duduk saya tegur. apalagi jika sedang berdiri saya juga tegur dia.<br/>
pasti anda bertanya, kalo semua posisi di tegur lalu itu orang harus seperti apa ?. saya jawab simple aja "sebagai mario tegur maka itu orang harus jadi aring dan jangan urang".
</p>
<a href="#">Selengkapnya tentang saya</a>
</body>
</html>
Setelah beres, silahkan simpan dengan nama “border.html”. lalu buka file ini dengan browser kesayangan anda, boleh menggunakan apapun seperti google chrome, mozilla firefox, ataupun internet explorer.
Ini tempilan sebulam kita design (tanpa border) :
Dan ini merupakan tampilan setelah kita memakai border :
Penjelasan kode html diatas.
Seperti biasa dalam kode html :
- Kita menggunakan <html> dan </html> sebagai kode yang menyatakan bahwa ini adalah file html.
- Lalu didalamnya kita menggunakan kode <head> dan head sebagai pembungkus, pada tag ini biasanya diisi dengan link css, kode css, Script JavaScript, ataupun daengantag meta.
- Lalu ada tag <body> dan </body> untuk manampilkan isi.
- Tag <br/> untuk garis baru
- Tag <div> untuk membungkus element, diakhiri dengan </div>
- Lalu tag <p> merupakan tag paragraf, diakhiri dengan </p>
- Tag <img> untuk membuat gambar
- Tag terakhir adalah <a> dan </a>, digunakan untuk membuat link.
- Sekarang penjelasan tentang style
- Tag <style> dan </style> digunakan untuk menyatakan bahwa area di dalamnya adalah bagian untuk mendesign.
- Body + p + .img + .img img + a : merupakan selector, untuk membuat selector sangat mudah. Jika nama tagnya <img> maka selectornya menjadi “img” , jika tag <img> berada pada <div class=”ini”>, maka selectornya menjadi .ini img
Sedangkan, untuk stylenya :
- border : untuk membuat garis luar
- background : membuat latar belakang
- border-radius : untuk membuat sudut melengkung
- padding : jarak dari luar kedalam
- text-decoration : mengatur decorasi text, pada link diatas dengan value “none”, untuk menghilangkan garis bawah pada link.
- color : menentukan warna text
- font-family : mengubah jenis text
- overflow : hidden untuk membuat element yang di dalamnya tidak melewati komponen utama.
- width : jarak atau ukuran ke samping
- height : jarak dari atas kebawah
Tutorial Selsai…mari baca lagi..