Seorang blogger makassar,Yang Senang Mengenal Dunia Maya,Dunia Yang Tanpa Batas...!!!

BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS….

January 25, 2008

BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS.

Pengertian css.

CSS ( Cascading Style Sheets ) adalah bahasa yang digunakan untuk menentukan tampilan ( persentasi ) dari suatu website. CSS tidak hanya memberikan kontrol yang lebih baik kepada kita untuk mengatur tampilan, namun juga menghilangkan kaharusan menggunakan tag persentasi didalam website.

CSS merupakan teknologi internet yang direkomendasikan oleh World Wide Web Consortium (W3C) pada tahun 1996, CSS kini terdapat dua versi, yaitu CSS1 & CSS2.
CSS1 berpusat pada formating dokumen HTML, dan CSS2 untuk memenuhi kebutuhan format dokumen supaya bisa ditampilkan diprinter.

Keunggulan CSS

Mempersingkat penulisan tag HTML.
Mempercepat proses rendering atau pembacaan HTML karena tidak ada pengulangan penulisan Mudah dan cepat dalam me-maintenace.
CSS bisa melakukan apa yang tidak bisa dilakukan HTML, seperti memberi warna pada input box atau scrollbar.
Dapat melakukan berbagai konfigurasi terhadap tampilan

Penggunaan CSS Pada Situs

CSS lebih diminati untuk pengaturan tulisan dalam sebuah situs, beberapa situs terkenal menggunakan CSS seperti YAHOO!.

Aplikasi Open Source menggunakan CSS untuk memudahkan penggunanya dalam memodifikasi tampilan, contoh :
CMS : MAMBO, JOMLA
BLOG : WORDPRESS
IMAGE GALLERY : COPPERMINE
FORUM DISKUSI : PhpBB

Penulisan Script CSS dibagi menjadi empat :

Inline Style Sheet
Embedded Style Sheet
Linked Style Sheet
Multi Style Sheet

Inline Style Sheet

Penulisan CSS dengan aturan Inline Style Sheet ini dilakukan dalam elemen HTML. Metode ini jarang digunakan karena tidak efisien, fungsinya sendiri hampir sama dengan menuliskan poperti dalam HTML, tetapi penggunaannya bersifat khusus
Contoh :
<p style=“color : blue”>

Embedded Style Sheet

Penulisan Sintak CSS dalam dokumen HTML, dengan menggunakan tag <style> dan </style> Contoh :
<style type=“text/css”>
h1 {color: red}
</style>

Linked Style Sheet

Penulisan sintak CSS di dalam halaman yang berbeda atau terpisah dalam HTML, dengan menggunakan tag <link rel> yang ditempatkan pada bagian tag <HEAD>
Memiliki keuntungan kemudahan dalam mengedit script CSS karena hanya file CSS saja yang diubah.

Contoh :
<link rel=“stylesheet” type=“text/css” href=“http://domain.com/contoh.css”>

Multi Style Sheet

Biasanya menggunakan kombinasi antara Linked Style Sheet dan Embedded Style Sheet, nilai yang tidak terdefinisikan akan di turunkan dari style sheet yang lebih general.

Contoh :

<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“contoh.css”>
<style type=“text/css”>
h3 {
text-align : left;
font-size : 20pt;
}
</style>
</head>
<body>
<h3>Ini menggunakan Multi Style Sheet, dimana warna menggunakan LINKED STYLE SHEET</h3>
</body>
</html>

(sumber penjelasan singkat ini, diambil tempat kursus online saya
yang diberikan pada setiap member yakni:http://braintutor.brainmatics.com/)

diatas adalah beberapa penjelasan singkat mengenai CSS, sekarang mari kita buat contoh website yang menggunakan CSS.
Pertama kita siapkan software pendukung untuk membuat atau mendesign web.terserah anda mau make apa.tapi saya disini menggunakan dreamweaver 8 untuk membuatnya.jika perlengkapannya sudah ada,yuk….kita rame-rame belajar……

Gbr01.tampilan dreamveaver

jika dreamveaver sudah ada dan sudah siap seperti tampilan diatas,artinya kita sudah siap untuk memulainya.

klik menu file==>New==>General==>CSS,OK lalu tekan enter.sperti contoh dibawah ini

Gbr02.membuka lembar CSS.

setelah memilih lembar CSS, artinya CSS siap kita buat.

Ini ada contoh CSS yang abis saya buat,saya akan coba menjelaskan dari beberapa script CSS yang abis saya buat.

Contoh:

body
{
width: 638px;
background: url(image/bg01.gif);
height: auto !important;
display: block;
margin: auto !important;
}

penjelasan:

body disini merupakan perintah yang berarti memulai memberikan style CSS.tag body tersebut memiliki pengertian bahwa halaman yang akan ditampilkan akan sesuai dengan parameter tersebut jika tak ada isi sedikitpun pada halaman tersebut.disini kita hanya menggunakan sistem perhitungan pixel agar lebih mudah mengaturnya.seperti width:638px; ,sedangkan background bisa kita menggunakan latar warna ataupun gambar.sy menggunakan tambahan !important seperti beberapa script yang kita jumpai nantinya,agar tampilan diweb kita nantinya,tampilannya akan sama dgn browse yang lain,seperti Firefox,IE dll.auto digunakan disini ukurannya sesuai dgn isi dari web kita.sedangkan perintah margin untuk menengahkan layout atau tampilan web kita.

#layout
{
background-color: #FFFFFF;
width: 638px !important;
border-left: #CCCCCC 2px solid;
border-right: #CCCCCC 2px solid;
border-bottom: #CCCCCC 2px solid;
margin: auto !important;
padding: 2px 0px 0px 2px;
color: #333333;
height: auto !important;
display: block;
}

penjelasan:

Layout,merupakan tampilan utama pada suatu web.

#snipet
{
background-color: #CCCCCC;
border: #0000FF 1px;
font-size: 10px;
width: 624px;
}

penjelasan:

snipet sama halnya sebuah catatan kecil pada lembar document.tapi catatan kecil ini terdapat dibagian atas.seperti halnya dengan header yang terdapat pada microsoft office.

#coloum
{
width: 590px !important;
height: auto !important;
padding-left: 10px;
padding-right: 10px;
}

#coloum_a
{
background-color: #CCCCCC;
width: 585px !important;
height: auto !important;
padding-left: 10px;
padding-right: 10px;
border: #CCCCCC 1px solid;
}

penjelasan:

colom dan coloum_a,merupakan kolom untuk menempatkan sebuah artikel nantinya.disini hanya membedakan ukurannya saja. Karna nantinya akan terbentuk atau kita buat yakni, kolom dalam kolom.

#broadcumb
{
width: 624px !important;
height: 25px !important;
}
#menu_horizontal ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#menu_horizontal ul li
{
display: inline;
width: 560px;
}
#menu_horizontal ul li a
{
text-decoration: none;
padding: .1em 1em;
color: #6699FF;
background-color: #FFFFFF;
font-family : sans-serif;
font-size : 10pt;
font-weight : bold;
}

#menu_horizontal ul li a:hover
{
color: #FFFFFF;
background-color: #6699FF;
}

penjelasan:

broadcumb,adalah tempat meletekkan sebuah menu seperti menu home dll,yang terdapat pada header web. karna broadcumb dan snipet sudah termasuk dalam bagian header. Sedangkan, menu_horizontal_ul beserta kawan-kawannya hanya merupakaan tambahan agar ketika kita mengklik salah satu menu terlihat seperti timbul atau tombol itu hidup.

#header_banner_left
{
width: 441px;
height: 247px;
background-image: url(image/image01.jpg);
float: left;
}
#header_banner_right
{
height: 247px;
width: 180px;
background-image: url(image/bg_03.gif);
float: right;
}

Posted in ilmu kmputer | Comments (1)

BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS.[bagian II]

penjelasan:
header_banner_left dan header_banner_right, merupakan perintah untuk membuat kolom header. Tetapi disini kita memisahkannya,ada yang kanan dan ada header sebelah kiri.fungsinya yaitu. Agar gambar yag nantinya yang kita masukkan ataupun kita selipkan dapat diatur atau dikelompokkan.

.cleardiv {
clear: both !important;
height: 10px !important;
}
penjelasan:
cleardiv,berfungsi untuk membersihkan div-div yang telah dibuat. Agar nantinya, apabila kita membuat fungsi div selanjutnya tidak saling menumpuk.

.menu_title
{
background-image: url(image/obj_ba_01.gif);
width: 175px;
height: 25px;
color: #208FFF;
border: medium;
font-weight: bold;
font-style:italic;
font-size: 18px;
float: left;
}

penjelasan:
menu_title, hanya berfungsi sebagai background. terserah anda mau memakainya atau tidak.

#div_kiri
{
float: left;
width: 624px;
height: auto !important;
padding-left: 5px;
padding-right: 5px;
margin: auto;
}

#div_kiri_kiri{
float: left;
width: 195px;
height: 350px !important;
background-color: #FFFFFF;
margin-left: 1px;
border-color:#CCCCCC;
border-style:solid;
}

penjelasan:
div_kiri dan div_kiri_kiri, berfungsi untuk membuat sebuah kolom yang nantinya terbentuk dalam 3[tiga] bagian.tapi sekali lagi terserah anda ingin memasangnya atau tidak.

.clear_all
{
clear: both !important;
}

penjelasan:
clear_all,fungsi samanya sama dgn cleardiv yakni membersihkan div-div yang telah dibuat. Agar nantinya, apabila kita membuat fungsi div selanjutnya tidak saling menumpuk.

Posted in ilmu kmputer | No Comments »

Mengapa cobaan ini begitu berat……

January 18, 2008

Ya………..Allah……..

kubersujud kepadamu….

memohon segala kearifanmu.

aku bermohon…….

berikanlah aku kebahagian walau sekali dalam hidupku ini…. emoticon

berikanlah aku kekuatan dalam menghadapi semua cobaan emoticon

Posted in Sekilas Cerita Anak Makassar | No Comments »

Januari……[12 januari 2008]

January 12, 2008

Bulan januari

januari…………
ng terasa…engkau datang lagi…
menghampiri aku dengan senyum…

januari…
engkau begitu begitu mewah
begitu sempurna,sebab engkau yang memimpin segalan bulan

Januari…
engkau mengingatkan aku oleh sesosok wanita
dimana aku mengenal dia saat dibulan januari..

hari ini tanggal 12 januari
bertepatan tanggal pertemuan aku dengannya,
ng terasa udah setahun aku mengenal dia
ia sesosok wanita sederhana
tunduk bila dipandang oleh kaum Adam
melemparkan senyuman setiap orang yang menyapa

januari…….
kepingin rasanya mengulang kembali semua kenangan
yang pernah ada bersamanya..

namun,cukup sebuah kenangan dan cerita indah

Januari…
seandainya engkau memberikan aku waktu..
bisa berjumpa engkau ditahun mendatang..

Kuingin,saat berjumpa dengan engkau…
aku telah bersamanya…

disebuah ikatan…yang kami inginkan bersama..
yakni nahligia rumah tangga……

Januari,doakan aku yah….
semoga kita bisa berjumpa kembali…..

Posted in Sekilas Cerita Anak Makassar | Comments (1)