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

  1. Mempersingkat penulisan tag HTML.

  2. Mempercepat proses rendering atau pembacaan HTML karena tidak ada pengulangan penulisan Mudah dan cepat dalam me-maintenace.

  3. CSS bisa melakukan apa yang tidak bisa dilakukan HTML, seperti memberi warna pada input box atau scrollbar.

  4. 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 :

  1. Inline Style Sheet

  2. Embedded Style Sheet

  3. Linked Style Sheet

  4. 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 |

2 Comments »

The URI to TrackBack this entry is: http://blognaachmad.blogsome.com/2008/01/25/belajar-membuat-website-menggunakan-cssbagian-i/trackback/

  1. makasi mas, bakalan saya pelajari!!! saya copy ya….

    Comment by dtrs — January 30, 2008 @ 8:59 am

  2. salam kenal mas, saya lagi pengen banget bljr bikin web, klo boleh saya minta tutorial di send e-mail ke saya.
    ini e-mail saya toelax2yahoo.co.id

    Comment by apan — February 14, 2009 @ 5:18 am

RSS feed for comments on this post.

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>



Anti-spam measure: please retype the above text into the box provided.

•