Jika pada postingan website sebelumnya kita menggunakan HTML maka sekarang kita akan menghias tampilan dari website dengan CSS.
Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya ;
Contoh penulisan code CSS
body adalah sebagai Selector.
background-color adalah Properti.
white adalah Nilai/values.
Deklarasi adalah bagian yang berada didalam "{ }" yaitu properti dan nilai.
Selector adalah bagian atau elemen yang ingin kita atur stylenya.
Properti adalah komponen yang kita butuhkan
Nilai/value adalah nilai dari deklarasi yang kita inginkan
Untuk menghias website nya, harap pastikan bahwa pada laptop telah terinstal :
1. Notepad++ atau bisa di donwload disini
2. Browser firefox atau google chrome
Setelah itu mari kita mulai tutorial ini.
Silahkan copas script berikut :
Cascading Style Sheet (CSS)
adalah sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.CSS inilah yang bertanggung jawab atas penampilan web anda dimata pengunjung melalui browser internet.Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya ;
- Selector
- Properti
- Deklarasi
- Nilai/Values
Contoh penulisan code CSS
body {background-color: white;}
Ket:body adalah sebagai Selector.
background-color adalah Properti.
white adalah Nilai/values.
Deklarasi adalah bagian yang berada didalam "{ }" yaitu properti dan nilai.
Selector adalah bagian atau elemen yang ingin kita atur stylenya.
Properti adalah komponen yang kita butuhkan
Nilai/value adalah nilai dari deklarasi yang kita inginkan
Untuk menghias website nya, harap pastikan bahwa pada laptop telah terinstal :
1. Notepad++ atau bisa di donwload disini
2. Browser firefox atau google chrome
Setelah itu mari kita mulai tutorial ini.
Silahkan copas script berikut :
1: <head>
2: <style>
3: body{
4: background-image: url('341857671_164.jpg');
5: background-repeat: no-repeat;
6: background-color: rgb(252, 252, 252);
7: }
8: #wrapper{
9: width: 1180px;
10: margin: 0 auto;
11: background-size:1200px;
12: font-family:Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
13: }
14:
15: .box {
16: margin: 31px 31px 31px 470px;
17: width: 683px;
18: background: rgb(228, 144, 144);
19: padding: 20px;
20: border-radius: 12px;
21: opacity: 0.8;
22: float: right;
23: border: 9px solid rgb(80, 181, 221);
24: box-shadow: 14px 17px 19px rgb(224, 68, 68);
25: }
26: #title {
27: float: right;
28: width: 550px;
29: margin: 0px 31px;
30: padding-top: 1px;
31: text-align: center;
32: font-size: 23px;
33: text-align: right;
34: }
35: #title h1 {
36: font-size: 2em;
37: }
38: table {
39: text-align:right;
40: width: 680px;
41: }
42: table td{
43: vertical-align:top;
44: }
45: </style>
46: </head>
47: <body>
48: <div id='wrapper'>
49: <div id='title'><h1>Dinda Prasetia</h1>@ndadutt</div>
50:
51: <div class='box'>
52: <table>
53: <tr><td colspan="3"><h3>Personal Details</h3></td></tr>
54: <tr><td>Name </td><td>:</td><td>Dinda Prasetia</td></tr>
55: <tr><td>Place, Date of Birth </td><td>:</td><td>Depok, December 01th, 1990</td></tr>
56: <tr><td>Sex </td><td>:</td><td>Female</td></tr>
57: <tr><td>Address </td><td>:</td><td>Jambu No.2 Rt.002/007<br/> Depok 16431</td></tr>
58: <tr><td>Nationality </td><td>:</td><td>Indonesia</td></tr>
59: <tr><td>E-mail </td><td>:</td><td>dindaprasetia@yahoo.com</td></tr>
60: </table>
61: </div>
62:
63: <div class='box'>
64: <table>
65: <tr><td colspan="3"><h3>Formal Education</h3></td></tr>
66: <tr><td>1995 - 2007 </td><td>:</td><td>Mardi Yuana Kindergarten, Depok</td></tr>
67: <tr><td>1997 - 2003 </td><td>:</td><td>Mardi Yuana Elementary School, Depok</td></tr>
68: <tr><td>2003 - 2006 </td><td>:</td><td>Mardi Yuana Junior High School, Depok</td></tr>
69: <tr><td>2006 - 2009 </td><td>:</td><td>Bintara Senior High School, Depok</td></tr>
70: <tr><td>2009 - present </td><td>:</td><td>Gunadarma University</td></tr>
71: </table>
72: </div>
73:
74: <div class='box'>
75: <table>
76: <tr><td colspan="3"><h3>Working Experience</h3></td></tr>
77: <tr><td>June 2010 - August 2012 </td><td>:</td><td>Working at Multimedia Laboratory-Gunadarma University<br/> (Honorer Asistant)</td></tr>
78: <tr><td>August 2012 - September 2012 </td><td>:</td><td>Working at Al-Fath Junior High School-Cirendeu<br/> (Honorer IT Teacher)</td></tr>
79: <tr><td>August 2012 - present </td><td>:</td><td>Working at Multimedia Laboratory-Gunadarma University<br/> (Permanent Asistant)</td></tr>
80: </table>
81: </div>
82: </div>
83: <a href='hal2.php' style="float: right;padding: 20px;margin: 0 146px 0 0;"><button>next</button></a>
84: </body>
script diatas merupakan script untuk halaman pertama.. dibawah ini adalah script untuk halaman kedua :)
1: <head>
2: <style>
3: body{
4: background-image: url('341857671_164.jpg');
5: background-repeat: no-repeat;
6: background-color: rgb(252, 252, 252);
7: }
8: #wrapper{
9: width: 1180px;
10: margin: 0 auto;
11: background-size:1200px;
12: font-family:Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
13: }
14:
15: .box {
16: margin: 31px 31px 31px 470px;
17: width: 683px;
18: background: rgb(228, 144, 144);
19: padding: 20px;
20: border-radius: 12px;
21: opacity: 0.8;
22: float: right;
23: border: 9px solid rgb(80, 181, 221);
24: box-shadow: 14px 17px 19px rgb(224, 68, 68);
25: }
26: #title {
27: float: right;
28: width: 550px;
29: margin: 0px 31px;
30: padding-top: 1px;
31: text-align: center;
32: font-size: 23px;
33: text-align: right;
34: }
35: #title h1 {
36: font-size: 2em;
37: }
38: table {
39: text-align:right;
40: width: 680px;
41: }
42: table td{
43: vertical-align:top;
44: }
45: table img{
46: width :300px;
47: height:300px;
48: }
49: </style>
50: </head>
51: <body>
52: <div id='wrapper'>
53: <div id='title'><h1>Dinda Prasetia</h1>@ndadutt</div>
54:
55: <div class='box'>
56: <table>
57: <tr><td colspan="3"><h3>Seminar</h3></td></tr>
58: <tr><td style="width:20%">5 Maret 2013 </td><td>:</td><td>Seminar Pengembangan Mobile Aplikasi Berbasis Teknologi Android</td></tr>
59: <tr><td>26 Maret 2013 </td><td>:</td><td>Perspektif Terhadap Interaksi Manusia dan Teknologi Dalam Menghadapi Era Globalisasi</td></tr>
60: <tr><td>26 Maret 2013 </td><td>:</td><td>Seminar Uni-Industry Collaboration "Berkarir Sebagai Profesional di Bidang Keamanan Informasi"</td></tr>
61: </table>
62: </div>
63:
64:
65: <div class='box'>
66: <table>
67: <tr><td colspan="3"><h2>Portofolio</h2><h3>Penulisan Ilmiah</h3><h3>Aplikasi AR Magic Book Ensiklopedia Kupu-Kupu Berbasis Desktop</h3></td></tr>
68:
69:
70: </table>
71: <table><tr><td><img src='1.jpg'></td><td><img src='2.jpg'></td></tr></table>
72:
73: </div>
74: </div>
75: <a href='index.php' style="float: right;padding: 20px;"><button>prev</button></a>
76: </body>
penjelasan dari script :
· #wrapper{}
untuk mendeklarasikan selektor wrapper, pada bagian ini berisi juga sintaks untuk mengatur ukuran margin dan background size serta jenis tulisan yang ingin dipakai maupun ditampilkan pada website.
· .box{}
untuk mendeklarasikan class 'box', pada bagian ini terdapat sintaks untuk mengatur ukuran dari box yang ingin dibuat serta border/bingkai dari box.
· #title h1{}
untuk mendeklarasikan title atau judul pada website.
 |
| Printscreen Halaman 1 |
 |
| Printscreen Halaman 2 |
demikian cara dalam menghias website dengan menggunakan CSS. semoga membantu dalam belajar. :)
Referensi: http://www.spiderbeat.com/2012/04/apa-itu-css.html
