hisman.org » CSS

Satuan Panjang di CSS (px,em dan %)

hisman — Thu, 11 Feb 2010 14:35:35 +0000

Di CSS itu ada beberapa satuan panjang yang dapat dipakai untuk mengisi value di beberapa property yang ada di css. Misalnya untuk mendefinisikan berapa lebarnya, tebal bordernya, besar font-nya, margin, padding dan lain-lain.

Ada tiga satuan panjang di CSS yang sering dipakai oleh orang-orang, yaitu pixel (px), em dan persen (%), selain ketiga itu sebenarnya masih ada lagi sih coba deh cari di gugel… hehe. Nah, di sini akan saya coba bahas tentang ketiga satuan panjang itu dan juga bedanya.

Untuk memperjelas, ada contoh penggunaannya :

Demo Contoh | Download Contoh

Di contoh, saya menggunakan 3 buah div, satu untuk mencoba pixel, satu untuk em dan yang satu lagi untuk persen.

HTML :





  Contoh Pemakaian px,em dan %
  



  
    Pixel
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis     pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
  

  
     Em
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
  

  
    Persen
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.

CSS :

*{
  margin: 0px;
  padding: 0px;
}

.box{
  border: 1px solid #ccc;
  margin: 10px auto;
  padding: 10px;
}

#px{
  width: 400px;
}

#em{
  width: 20em;
}

#persen{
  width: 30%;
}

1. Pixel (px)

Pixel ini merupakan satuan panjang yang besar kecilnya itu tergantung dari resolusi komputer yang kita pakai, misalnya untuk ukuran 800px akan terlihat sangat besar (menutupi layar) untuk komputer dengan resolusi 800 x 600, tapi akan tampak lebih kecil untuk resolusi 1024 x 768.

Untuk contoh kali ini, div yang pertama idnya px memiliki width yang satuan panjangnya pixel, yaitu sepanjang 400px, nah besar kecilnya 400px ini terlihat di monitor itu tergantung dari resolusi yang kita gunakan. Coba saja ganti-ganti resolusi komputer Anda saat melihat contoh ini.

2. em

em ini merupakan satuan panjang yang menunjukkan nilai berapa kalinya ukuran font yang sedang digunakan. Dari contoh, width-nya di set 20em, ini berarti width-nya itu sepanjang 20 x ukuran font yg digunakan, dalam hal ini ukuran font pada contoh (font-size) belum didefinisikan jadinya menggunakan ukuran font defaultnya browser yang kita gunakan.

Kalau di Firefox itu ukuran font defaultnya bisa di atur di tools->options->content->font and color disitu ada size-nya, coba aja diubah-ubah dan lihat contoh yang saya buat, lihat yang kotak bertuliskan em, pastinnya ukurannya yg terlihat juga akan berubah-ubah (membesar/mengecil) sesuai dengan ukuran font yang digunakan.

3. Persen (%)

Nah, kalau persen ini, ukurannya akan berubah-ubah sesuai ukuran browser kita, kalau 30% di contoh di atas ya 30% nya ukuran browser CMIIW. Coba deh browsernya di kecilin atau di gedein, pasti yang persen berubah-ubah..

Bagaimana apakah mengerti?? Silakan di explore lagi ya…

All About CSS Float Technique (2)

hisman — Sat, 16 Jan 2010 07:21:16 +0000

Ini adalah bagian kedua dari artikel berseri : All About CSS Float Technique. Di bagian pertama, saya sudah menjelaskan konsep dasar dari float itu dan juga ada sedikit contoh di sana. Nah, kali ini saya akan membahas contoh penggunaan float lebih lanjut lagi. Pertama, saya pake dua tag div, yaitu box1 dan box2 yang nantinya kedua div ini akan dipakai untuk mencoba teknik float:


 Box1
 Etiam eu est est,....



 Box2
 Etiam eu est est,....

Di dalam div-nya ada tag h1 dan p, biar keliatan ada isinya. Nah, hasil dari kode html di atas bisa dilihat di sini. Terlihat khan bahwa div yang id-nya box2 terletak di bawah box1, ya itu karena sifatnya tag div, yang didefinisikan duluan akan terletak paling atas. Selanjutnya, kita coba menggunakan teknik float pada div-div ini, sebelumnya dua div ini dikasih background dulu biar lebih keliatan kotaknya.

Yang pertama di float, hmm.. box1 aja deh, di float left. Hasil yang diharapkan adalah box1 berada di sebelah kirinya box2. O iya, beberapa cara pada contoh kali ini sebenarnya sudah pernah diterapkan ketika saya membahas tentang cara membuat layout tanpa tabel, tapi diulang lagi dikit biar lebih paham..hehe…

#box1{
  float: left;
  background: green;
  color: white;
}

#box2{
  background: purple;
  color: white;
}

Lalu kita lihat hasilnya di sini, hmm… tidak ada perubahan ya box1 nya tetap berada di atas box2, kenapa itu terjadi? Apakah floatnya tidak berjalan? Sebenarnya float yang diberikan ke box1 itu sudah berjalan, box1 sudah mengambang/ melayang ke arah kiri. Namun, width / lebar dari box1 belum ditentukan dan ini membuat lebar dari box1 adalah sama dengan lebar browser, jadinya karena tidak muat maka box2 terpaksa terletak di bawah box1 tidak di sebelah kanannya, nah coba tentukan width dari box1 berapa pun asal jangan melebihi lebar browser Anda, lalu refresh browsernya dan liat hasilnya.

Sekarang yang box2 nya, di float left atau right? bisa keduanya sih, tapi hasilnya akan sedikit berbeda, kalau box2nya di float left, box2 akan berada di sebelah kanan box1 serta box1 dan box2 akan berdempetan kecuali kalau box1 dan box2 diset marginnya.

#box1{
  float: left;
  background: green;
  color: white;
  width: 400px;
}

#box2{
  float: left;
  background: purple;
  color: white;
  width: 300px;
}

Hasilnya ini. Sedangkan jika box2 di float right, tetap box2 ada di kanannya box1 tapi akan ada sedikit jarak antara box1 dan box2, coba lihat ini untuk yang box2-nya di float right.

Sudah mengerti??

Lalu, gimana kalau ada tiga div trus ingin dijadikan tiga kolom?? Kita coba saja, misal ketiga divnya seperti ini ,,hmmm


 Box1
 Etiam eu est est,....



 Box2
 Etiam eu est est,....



 Box3
 Etiam eu est est,....

Nah, css-nya seperti apa?? simpelnya sih seperti ini :

#box1{
  float: left;
  background: green;
  color: white;
  width: 150px;
  height: 700px;
}

#box2{
  float: left;
  background: purple;
  color: white;
  width: 300px;
  height: 700px;
}

#box3{
  float: left;
  background: cyan;
  color: black;
  width: 150px;
  height: 700px;
}

Hasilnya

Box1, box2 dan box3 di float left, trus kalau mau box2 / box3 di float right bisa juga atau kalau semua ingin di float right juga bisa, silahkan dicoba-coba sendiri dan liat perbedaannya..

Download Source Code

CSS Box Model

hisman — Thu, 14 Jan 2010 09:50:11 +0000

Setiap kali kita membuat suatu tag html, css akan menganggap tag itu bagaikan sebuah kotak (box). Saat kita mendesain / mebuat layout, kotak ini yang nantinya akan ditata sesuai keinginan kita dengan css. Konsep ini sering disebut css box model. Lalu, apa saja isi kotak itu?

Gambar di atas merupakan penggambaran dari css box model. Dari gambar tersebut terlihat isi dari css box model ini adalah content, padding, border, dan margin.

Content merupakan isi dari tag html yang kita buat, biasanya berupa tulisan. Dia ada diurutan paling dalam dari yang lainnya. Misal :

Lorem ipsum dolor sit amet,

“Lorem ipsum dolor sit amet,” merupakan content dari tag

di atas.

Padding merupakan jarak dari content tag tersebut ke batas tepi dari tag tersebut, dan border adalah batas tepi tersebut.

Lalu, margin merupakan jarak dari batas tepi (border) dari tag itu ke luar / ke tag lain yang ada di sekitarnya.

Biar lebih jelas, langsung ke contoh aja ya :

Contoh

Untuk contoh ini, saya menggunakan dua tag html yaitu div dan juga paragraf. Tag div saya gunakan hanya untuk menggambarkan margin dari paragraf, karena agak sulit untuk melihat secara langsung margin itu. Tag paragrafnya itu berada di dalam tag div tadi.


Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida.

Ingat, div yang ber-id themargin itu hanya untuk menggambarkan bagaimana margin itu terlihat. Jadi, di sini kita hanya fokus di tag paragraf saja.

Pertama, saya inisialisasikan css untuk div yang id-nya themargin.

#themargin{
      background: #D4D0C8;
      width: 300px;
      border: 1px solid white;
    }

Lalu, kita akan bermain-main dengan tag paragrafnya /

. Tapi sebelum itu tag paragrafnya dikasih background putih dulu biar beda dengan themargin-nya. Trus, saatnya mencoba-coba :D

1. Margin

Pendefinisian margin di css menggunakan properti margin, atau bisa juga memakai properti margin-top, margin-bottom, margin-left dan juga margin-right untuk yang spesifiknya. Tapi untuk contoh kali ini saya hanya memakai properti margin saja biar lebih simpel.

Value dari properti margin ini adalah nilai dari margin yang kita inginkan bisa dalam pixel (px) , persen (%), ataupun em (px,% dan em akan saya bahas lain kali :Peace: ).

Dengan properti margin ini, kita bisa mendefinisikan ke-4 margin (atas, bawah, kanan, kiri) sekaligus dari tag yang kita buat sebelumnya (dalam hal ini tag paragraf).

Mendefinisikan ke-4 margin sekaligus dengan nilai yang sama

Untuk melakukan hal ini kita cukup menaruh satu nilai saja pada properti marginnya, contoh :

  p{
      background: white;
      margin: 10px;
    }

Dari contoh tersebut, seluruh margin (atas,bawah,kanan, dan kiri) dari tag

akan bernilai sama yaitu 10 pixel.

yang berwarna abu-abu itu menggambarkan margin dari

Masing-masing nilai margin tidak sama

Kalau kondisinya seperti ini, maka value dari properti marginnya akan berisi empat nilai dengan urutan nilai pertama untuk margin atas, nilai kedua untuk margin kanan, nilai ketiga untuk margin bawah dan nilai keempat untuk margin kiri.

Contohnya seperti ini :

  p{
      background: white;
      margin: 10px 30px 15px 50px;
    }

dari contoh itu, margin atasnya 10 pixel, margin kanan 30 pixel, margin bawah 15 pixel dan margin kiri 50 pixel.

Margin atas = bawah dan Margin kiri = kanan

Caranya dengan memberi dua nilai pada properti marginnya, dengan urutan nilai pertama berisi besarnya margin atas dan bawah, nilai kedua berisi besarnya margin kiri dan kanan. Contoh :

  p{
      background: white;
      margin: 10px 30px;
    }

Dengan cara di atas, maka margin atas dan bawahnya akan bernilai 10 pixel, sedangkan margin kiri dan kanannya akan bernilai 30 pixel.

2. Border

Margin sudah, sekarang saya akan coba menambahkan border pada paragraf yang sudah bermargin tadi, sebelumnya marginnya saya jadikan 10 pixel semua dulu biar enak.

Mendefinisikan border bisa menggunakan properti border untuk secara umum, tapi kalau ingin lebih detail bisa memakai properti border-top, border-bottom, border-left dll. Saya akan pakai yang border saja biar lebih gampang. Untuk simpelnya value yang saya isikan di border ini ada tiga bagian, ini yang biasa saya pakai.

Value pertama mendefinisikan tebal dari bordernya, trus value kedua itu tipe bordernya apakah solid, dotted (titik) dll, dan value ketiga menyatakan warna dari border tersebut. Posisi ketiga value ini bisa dibalik-balik. Contoh cssnya gini :

 p{
      background: white;
      margin: 10px;
      border: 1px solid black;
 }

Dengan css seperti di atas, maka akan muncul border dengan tebal 1 pixel tipenya solid dan berwarna hitam.

keliatan bordernya khan?? itu lho yang berwarna hitam mengelilingi textnya.

3. Padding

Mendefinisikan padding di css memakai properti padding, cara mengisi valuenya sama dengan cara mengisi value margin yang sudah dijelaskan di atas. Jadi tidak akan saya jelaskan lagi biar gak kepanjangan. hehe :beer:

Contoh penggunaan padding :

 p{
      background: white;
      margin: 10px;
      border: 1px solid black;
      padding: 10px;
 }

Setelah di beri padding, akan terlihat adanya jarak antara konten paragraf dengan bordernya, dalam hal ini jarak tersebut sebesar 10 pixel.

4. Content

Yang bisa diatur dari content ini adalah width dan height nya, width itu lebarnya ke kanan dan height adalah tingginya ke bawah. Pada contoh kali ini, yang akan diatur adalah width-nya saja.

 p{
      background: white;
      margin: 10px;
      border: 1px solid black;
      padding: 10px;
      width: 200px;
 }

Karena width dari paragraf di set 200 pixel, jadinya kotak paragrafnya mengecil. O iya, jangan lupa width yang diatur di css ini hanya merupakan lebar dari kontennya belum termasuk padding dan border. Jadi total width-nya termasuk padding dan border adalah 200px + 20px (padding kanan dan kiri) + 2px (border kanan dan kiri) = 222 pixel.

Mungkin cuman segitu tentang css box model, dah kepanjangan artikelnya, hehe…

View Demo | Download Source Code

All About CSS Float Technique (1)

hisman — Wed, 13 Jan 2010 07:50:06 +0000

Yup, kali ini saya akan mencoba membahas tentang teknik float di css. Artikel ini merupakan artikel berseri yang gak tau kapan selesainya . Pokoknya saya akan coba bahas segala yang saya tau tentang float. Kalau ada yang mau mengoreksi silahkan . Langsung aja ya…

Apa itu float?

Float itu bahasa inggris, klo di indonesia-in tuh artinya mengambang atau melayang. contohnya aja klo di restoran mesen minuman avocado float, nah di minumannya khan selain ada alpukatnya ada juga yang mengambang-ngambang di atasnya .

Di css ada properti yang namanya float. Valuenya itu ada right, left dan none. Lah, trus kalau kita pake properti ini apa yang mengambang?? yang mengambang itu adalah selektor (bisa tag, id atau class) yang dikasih properti float di css. Mengambangnya bisa ke kiri atau ke kanan tergantung dari valuenya.

Contohnya aja pas membuat layout tanpa tabel, di situ khan seharusnya posisi sidebarnya berada di atas posting. Karena di css-nya sidebar di kasih properti float yang valuenya left, trus yang posting juga dikasih float tapi valuenya right, makanya sidebarnya melayang/mengambang ke sebelah kirinya posting, begitu juga yang posting mengambang ke kanannya sidebar.

Float ini gak cuman bisa di kasih di tag div seperti yang dicontohkan di atas, tapi juga bisa dikasih ke tag-tag html yang lain, baik yang inline tag atau block tag. Dan juga, penggunaan float ini biasanya berhubungan dengan pembuatan layout dari suatu website.

Contoh penggunaan float yang lain nih, hmm… misal pengen buat kyk gini, pictnya :

Pertama-tama, kita buat dulu paragraf yg isinya kata-kata gak jelas di atas . Kira-kira gini :


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.

trus biar agak rapih dikit paragrafnya kita kasih css dikit :

 p {
      width: 300px;
      padding: 5px;
      border: 1px solid #ccc;
    }

tampilannya jadi gini :

Lalu, kita susupi awal paragraf tadi dengan gambar yang telah disediakan sebelumnya. HTMLnya jadi gini:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.

Nah, setelah dikasih gambar jadinya gini klo diliat di browser :

Posisi gambarnya jadi aneh ya. Biar agak bagus, kita akalin gambarnya pake float. Di css ditambahkan :

img{
  float: left;
}

Jadi, gambarnya itu akan mengambang ke kiri (karena value floatnya left), dan tulisan di sekitarnya akan ikut menyesuaikan (terpengaruh). Gini kira2 :

Abis itu, gambarnya dikasih border sama margin biar lebih sip lagi,

img{
 float: left;
 border: 1px solid #ccc;
 margin: 2px 10px 0px 0px;
}

Jadi deh..

Oke,,segitu dulu ya. Bersambung ke bagian duanya hehe :D

Download Souce Code

Pendefinisian warna di css

hisman — Sat, 18 Apr 2009 05:00:03 +0000

Di CSS, warna bisa diberikan ke text ataupun background. Untuk text sendiri pemberian warna menggunakan property color. Contohnya kayak gini :

h1{color : red;}

Sedangkan untuk background, property yang digunakan adalah background-color (sudah saya jelaskan penggunaannya di artikel tentang background.. )

Nah, yang akan di bahas kali ini adalah cara mendefinisikan warna-warna tersebut. Ada 5 cara untuk mendefinisikan sebuah warna pada css, hmm.. apa sajakah itu ??

1. Langsung menggunakan nama warnanya

Contohnya klo pengen ngasih warna putih di h1, langsung aja tulis begini :

h1{color : white;}

Tapi sayangnya klo pake cara ini, nama2 warna yang bisa didefinisakn oleh css cuman dikit. Klo gak salah cuman bisa 17 warna. Coba deh liat gambar di bawah ini

2. Menggunakan Hexadesimal

Nah, klo pake cara ini warna yang bisa didefinisikan bisa banyak. Contoh penulisannya begini nih :

h1{color : #FFFFFF;}

#FFFFFF = white, nah kamu bisa menggunakan photoshop untuk mendapatkan kode2 hexadesimal sesuai warna yang diinginkan.

3. Menggunakan Short Hexadesimal

Klo hexadesimal biasa khan kode nya ada 6 karakter ya, nah kode2 itu bisa disingkat menjadi 3 karakter aja (ini yang disebut dengan short hexadesimal). Contoh di CSSnya :

h1{color : #FFF;}

4. RGB Desimal

Contohnya :

h1{color : rgb(255,0,55);}

5. RGB Persen

RGB persen hampir sama dengan RGB desimal cuman nilai2 RGBnya itu dalam persen bukan dalam desimal. Cara ngedapetin nilai persennya gini nih. Hmm.. Misalkan RGB desimalnya : rgb(255,0,51) . Jadinya RGB persennya :

red : 255/255 x 100% = 100%
green : 0/255 x 100% = 0%
blue : 51/255 x 100% = 20%

di css nya :

h1{color : rgb(100%,0%,20%);}

Sumber : video tutorial CSS dari Lynda.com

Membuat layout yang ada menunya

hisman — Sat, 18 Oct 2008 00:40:18 +0000

Kemaren saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat dengan layout yang udah kita buat juga.

Coba buka ke dua file HTML menu sama layout yang dah di buat. Klo belum punya bisa di download disini dan disini.

Trus copy paste tag div yang idnya nav di file HTMLnya horizontal menu beserta isinya ke file HTMLnya layout, sehingga hasilnya seperti ini :






Layout+menu







Home
About
Contact
FAQ
Product

Dalam hal ini menunya kita taruh di header.

Trus copy paste juga CSS yang ada di file CSSnya horizontal menu ke file CSSnya layout sehingga ntar CSSnya layout jadi kayak gini :


body{
   background:#000000;
}
#wrapper {
   width:800px;
   margin:auto;
}
#header{
   background:#000099;
   height:200px;
}
#sidebar{
   background:#00CC66;
   float:left;
   width:250px;
   height:800px;
}
#posting{
   background:#FFFFFF;
   float:right;
   width:550px;
   height:800px;
}
#footer{
   background:#666666;
   height:300px;
   clear:both;
}
#nav ul{
   display:block;
   margin: 0px;
   padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
   color:#999999;
}
#nav li:hover{
   background:#00FFFF;
}

Simpen, dan jadi dech… Klo kamu bingung tentang kode-kode di atas, kamu bisa baca postingan sebelumnya tentang ngebuat layout dan juga horizontal menu.

File layout yang dah digabungin bisa di download di sini…

Membuat horizontal menu dengan CSS

hisman — Wed, 15 Oct 2008 02:58:59 +0000

Horizontal menu tau khan?? Contohnya klo di blog ini tuh menu yang ada di pojok kanan atas. Jadi kita akan coba buat menu kayak gitu dengan CSS (tapi sederhana dulu ya).

Sebenernya sich cara untuk ngebuat menu kayak gitu gak pake CSS juga bisa, contohnya aja kamu bisa pake flash, trus bisa juga pake HTML aja. Tapi yang lebih banyak di pakai untuk saat ini ya yang pake CSS, karena katanya sich lebih search engine friendly.

Seperti biasa kita buat file HTMLnya dulu. Isinya kayak gini :






Horizontal Menu





  
    Home
    About
    Contact
    FAQ
    Product

Kalau diperhatikan, ada tag

sama

ya? Tag-tag itu gunanya untuk ngebuat list (klo di Microsoft word itu namanya bullet).

Ngapa kita pake list untuk ngebuat menunya?

Karena agar menu yang kita buat itu lebih search engine friendly. (katanya sich google lebih menyukai situs dengan menu yang seperti itu).

Klo pake list itu khan jelek ya hasilnya (trus ke bawah lagi bukan horizontal). Nah kita pake CSS untuk ngebuat menu itu ke samping (horizontal).

Ini CSSnya :
```
#nav ul{
    display:block;
    margin: 0px;
    padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
}
#nav li:hover{
   background:#00FFFF;
}
```
Saya jelasin satu-satu ya?

~~Yang pertama, coba kamu liat di selector #nav ul, di situ ada property display yang valuenya block. Gunanya tuh untuk ngebuat tag~~

Membuat layout web tanpa tabel

hisman — Wed, 15 Oct 2008 02:34:12 +0000

Hai,, pa kabar nich?? Dah lama gak posting nich, dua minggu lebih kayaknya ya, sorry ya, hehehe…

O iya,, selamet hari raya idul fitri ya,,mohon maaf lahir dan batin. Telat ya ngucapinnya,, gak pa2 lah daripada gak sama sekali,,

Kemaren-kemaren khan (kemaren kapan ya?) saya dah sedikit apa itu layout dan juga alasan-alasan membuat layout web tanpa tabel, masih inget khan? Klo dah lupa coba baca aja lagi postingan yang ini dan ini.

Nah,,Kali ini saya akan coba bahas tentang cara ngebuat layout web tanpa menggunakan tabel. Tapi mungkin lebih ke praktek aja ya (langsung ke contoh).

Layout yang akan dicoba kali ini adalah layout standar yang memiliki header di atasnya, sidebar di kiri trus ada postingan dan juga ada footer di bawahnya. Kira-kira klo dah jadi kayak gini nich…

Pertama-tama,, kita buat dulu file htmlnya, namanya index.html biar enak. Karena kita cuman buat layout, jadi di file htmlnya itu kita bagi-bagi yang mana daerah header, sidebar , posting atau footer. Dalam hal ini cara menbagi daerah-daerah tersebut kita gunakan tag div (bukan tabel).

File htmlnya kira-kira isinya kayak gini :






Layout

Klo kamu perhatikan, di file htmlnya itu ada tag div yang idnya wrapper ya? Gunanya buat apa ya?
Hmmm… kamu masih inget khan cara untuk ngebuat halaman web berada di tengah-tengah browser? Nah layout yang kita buat kali ini menggunakan teknik tersebut.

Trus di div yang idnya content, kita bagi dua jadi sidebar dan juga posting. Karena nantinya sidebarnya itu akan dibuat berada di sebelah kiri postingnya.

Nah, file html dah jadi, sekarang kita buat file cssnya yang isinya itu intinya adalah mengatur tag div-div yang kita buat.


body{
    background:#000000;
}
#wrapper {
    width:800px;
    margin:auto;
}
#header{
    background:#000099;
    height:200px;
}
#sidebar{
    background:#00CC66;
    float:left;
    width:250px;
    height:800px;
}
#posting{
    background:#FFFFFF;
    float:right;
    width:550px;
    height:800px;
}
#footer{
    background:#666666;
    height:300px;
    clear:both;
}

Untuk yang body, wrapper, header dah agak ngerti khan? Mungkin saya sedikit jelasin yang sidebar, posting sama footer soalnya di ketiga id tersebut ada property yang aneh, yaitu float sama clear.

Pertama yang sidebar sama posting dulu. Rencana kita khan sidebarnya itu berada di sebelah kiri postingnya ya? Sedangkan, secara default tag div yang kita gunakan itu memposisikan daerah-daerah yang di buat itu berada di atas atau di bawah.

Jadi secara default, sidebarnya itu ada di atasnya posting. Nah, agar sidebarnya berada di sebelah kiri posting maka kita gunakan property float dengan valuenya left untuk sidebar dan value right untuk postingnya.

Namun perlu diingat, agar teknik ini berhasil, maka width (lebar) dari sidebar dan juga postingnya itu harus di set dulu. Berapa lebarnya? Terserah kamu,tapi jumlah lebar sidebar dan posting tidak boleh lebih dari total halaman web yang dibuat. Dalam hal ini, halaman web yang kita buat lebarnya 800px jadi kita set sidebarnya 250px dan postingnya 550px (jumlahnya 800px khan).

Nah, sekarang yang footer. Buat apa sich ada property clear disitu??
Intinya gini aja dech. Di sidebar dan juga posting, khan kita memakai property float, agar footernya tidak terpengaruh property float yang digunakan, maka kita kasih property clear dengan value both.

Trus kenapa cuman footer? Headernya ga?

Soalnya headernya itu khan letaknya di atas sidebar dan posting jadi floatnya tidak terlalu berpengaruh bagi headernya.

Nah, layoutnya dah jadi. Kamu bisa berkreasi sendiri mencoba-coba biar tambah ngerti. O iy, kamu bisa download file latihan layout ini di sini.

Membuat halaman web berada di tengah-tengah browser

hisman — Sat, 20 Sep 2008 01:30:22 +0000

Sebenernya ada banyak cara biar halaman web yang kita buat terlihat berada di tengah-tengah browser. Tapi saya akan jelasin satu cara aja yang sering dipake sama para web designer, dan cara ini lebih kompatibel di kebanyakan browser.

Kita mulai ya… Coba kamu salin kode ini ke notepad trus simpen dengan nama tengah.html









Tengah








berada di tengah browser khan

Nah, sekarang buat CSSnya. CSS kita letakin di luar file HTML yang tadi karena di file HTML di atas udah diletakin tag (tapi harus satu folder ya)
Oke sekarang salin kode CSS ini ke notepad juga dan simpen dengan nama style.css


body{
       background:#000000;
}

#wrapper {
      background:#FFFFFF;
      width:700px;
      height:800px;
      margin:auto;
      padding:10px;
}

Coba file tengah.html nya di buka pake browser, gimana??

Oke, ni sedikit penjelasannya :

Di file HTML, kita ngebuat sebuah blok dari tag div yang kita kasih id namanya wrapper. Nah, trus di CSSnya kita atur tag div yang idnya wrapper tadi.

Untuk property background pada tag body dan wrapper dah tau khan fungsinya, trus di wrappernya ada width sama height, klo width itu ngatur lebarnya kesampingnya mo berapa pixel (dalam hal ini saya pake satuan pixel) dan height itu kebawahnya berapa pixel (px).

Trus ada margin:auto , nah property itulah yang ngebuat halaman HTML tadi berada di tengah browser, klo yang terakhir padding:10px; itu buat nentuin jarak dari kotak wrapper tadi ke isinya (dalam hal ini text yang ada) berapa pixel.

Nah, jadi klo kamu naro tulisan atau apapun di dalam tag div yang idnya wrapper tersebut, akan terlihat berada di tengah browser. Dah ngerti khan??

O iya, supaya trik ini berhasil selain kamu ngeset margin:auto ,kamu juga harus ngeset berapa widthnya. Klo contoh di atas saya ngeset widthnya jadi 700 pixel.

Kamu bisa ngedownload file latihan tersebut disini..

No Table For Layout

hisman — Fri, 19 Sep 2008 09:54:21 +0000

Buat kamu yang masih sering gunain tabel untuk ngedesain layout, sebaiknya mulai dari sekarang tinggalin kebiasaan kamu yang gak baek itu dan mulailah beralih ke CSS.

Kenapa?

Make tabel itu gak praktis, menyusahkan, agak maksa, denger-denger kurang search engine friendly dan yang paling penting saat ini banyak perusahaan yang menginginkan situsnya didesain dengan meminimalisir penggunaan tabel (tableless), so, daripada kamu kehilangan orderan lebih baik hijrah ke CSS…

Buat kamu yang baru belajar web design, pasti bingung apa yang saya tulis di atas… hehe…

Mari saya jelaskan…

Di dalam HTML itu ada yang namanya tag table yang fungsinya itu sebenernya untuk ngebuat tabel. Khan klo tabel itu ada border2 yang ngebatasin tiap kolom-kolomnya, tapi di tag table ini border itu bisa dihilangkan dengan tambahan atribut, Nah, dari sinilah para web designer jaman dulu gunain teknik ini untuk ngedesain layout web mereka.

Dan teknik ini terus diturunkan dan masih dipake sampe sekarang, walaupun udah ada cara yang praktis yaitu dengan CSS, tapi ya namanya kebiasaan susah dihilangin. Untungnya saya yang newbie ini belum pernah belajar teknik pake tabel tersebut (cuman tau teorinya).

Kenapa saya bilang pake tabel itu gak praktis dan agak maksa??

Gini nich, klo kamu ngedesain/ngebuat layout pake tabel, nulis tagnya khan di dalam HTML, soalnya tag table itu khan tagnya HTML yang berarti klo kamu mo ngerubah layout sewaktu-waktu, misal sidebarnya yang tadinya di kiri mo dipindah ke kanan, berarti kamu harus ngerubah juga konten yang ada di tag tablenya.

Ingat itu baru satu halaman HTML klo 100 halaman HTML web kamu mo dirubah, wah….
Lain halnya klo kamu gunain CSS, kamu tinggal ngerubah kode CSSnya aja dan semua halaman HTML yang berlayout sama akan berubah… lebih praktis khan??

Trus klo yang masalah maksa, ehm ya emang maksa. Tag table itu khan fungsinya untuk ngebuat tabel, kok malah digunain buat layout.

Oke… tinggalkanlah penggunaan tabel buat layout, meskipun menurut kamu itu lebih mudah, tapi selanjutnya kamu pasti merasakan kesusahannya. Dan buat yang newbie yang masih gak tau apa2 untuk ngebuat layout bagusnya belajar yang pake CSS aja biar langsung kebiasaan…