CSS "cascading style sheet" merupakan kode pemerograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain . Saat ini, hampir tidak ada website yang dibangun tanpa kode css.
Disini saya akan menerangkan langkah-langkah untuk pembuatan web sederhana menggunakan css dari berbagai sumber. Berikut tampilan website sederhana yang akan dibuat.
- Langkah awal bukalah software Notepad++ yang bisa kalian download di google.com. merupakan software gratis dan ringan.
- Lalu buatlah folder untuk menyimpan hasil website dengan nama yang kalian akan buat, saya membuat folder dengan nama sebarin ilmu.
- Setelah itu buatlah folder images di dalam folder sebarin ilmu, berguna untuk menyimpan gambar-gambar.
- Kemudian salin lah script berikut ke dalam notepad++ , dan simpan dalam folder sebarin ilmu dengan nama index.html
- Lalu salin juga script berikut ke dalam notepad++ dan simpan dengan nama style.css di dalam folder sebariin ilmu
{
margin: 0;
padding: 0;
}
body {
font-family: Calibri, Comic sans ms, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:white;
width:1000px;
height:160px;
}
#menu{
background-image:url(images/menu.jpg);
width:1000px;
height:30px;
text-align:center;
}
#content{
background-color:#EBEBEB;
width:700px;
float:left;
}
#right {
border-style:groove;
width:270px;
background-color:#EBEBEB;
float:right;
text-align:left;
}
#footer{
background-image:url(images/footer.jpg);
width:1000px;
height:90px;
text-align:center;
float :left;
}
Maka tampilan akan seperti dibawah ini
Saya menggunakan gambar dengan membuat sendiri di adobe potoshop dengan format .jpg. Untuk di masing-masing width nya berikan 1000px dan untuk height (header = 160, menu = 30, footer= 90) setelah itu tekan oke, maka buatlah dengan kreasi kalian sendiri dan simpan di dalam folder images.
- Setelah itu sisipkanlah artikel atau kalimat yang ingin kalian tampilkan dalam website, maka sisipkanlah dalam content di dalam index.html, seperti dibawah ini.
Tidak lupa berikan sedikit script kedalam style.css dibawah selector id content
.h2{
text-decoration:underline;
text-transform:uppercase;
font-family:Arial;
font-size:30px;
}
.preset{
font-style:italic;
font-weight:bold;
}
Saya tambahkan selector class h2 untuk heading dan selector preset untuk pengaturan font dengan tulisan miring dan bold. Maka akan terlihat seperti dibawah ini
- Setelah itu sisipkan kembali menu-menu yang akan ditampilkan nanti kedalam index.html, seperti dibawah ini
- Tidak lupa untuk menambahkan sedikit script di dalam style.css dalam selector id menu, bisa kalian salin script dibawah ini
a:link{
background-color:none;
color:#000099;
text-decoration:none;
font-size:14px;
}
a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}
a:link diperuntukkan mengatur keberadaan dari content atau image yang telah diberi link. pengaturan background color dari text tesebut dengan none dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka berikan text decoration dengan nilai none dengan font size 14 px.
a: hover adalah keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi abu-abu ( #999999 ) dengan warna tulisan menjadi putih ( #FFFFFF ), kali ini hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px.
a: active dimana keberadaan text ketika mouse di klik background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam ( #000000 ) lalu ketebalan kembalikan lagi seperti semula.
Maka menu akan terlihat seperti dibawah ini
- Setelah itu isilah content bagian kanan karena masih kosong, sisipkanlah kembali kalimat, atau potongan artikel yang akan di tampilkan nanti, sisipkanlah di bagian right dalam index.html, seperti dibawah ini
Saya menambahkan sedikit script border-style:groove; untuk membuat border atau garis pada content bagian kanan. Maka hasil akan terlihat seperti dibawah ini.
Ini merupakan bagian akhir dari website sederhana ini, sisipkanlah dalam index.html menu-menu yang akan ditampilkan nanti di bagian bawah website, seperti contoh dibawah.
Maka akan terlihat seperti dibawah ini
Selamat mengerjakan..
Author : Yunar Ratnawati
No comments:
Post a Comment