hisman.org » webdesign http://hisman.org webdesign source and tutorial Thu, 11 Feb 2010 14:35:35 +0000 http://wordpress.org/?v=abc en hourly 1 Satuan Panjang di CSS (px,em dan %) http://hisman.org/satuan-panjang-di-css.html http://hisman.org/satuan-panjang-di-css.html#comments Thu, 11 Feb 2010 14:35:35 +0000 hisman http://hisman.org/?p=218 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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Contoh Pemakaian px,em dan %</title>
  <link rel="stylesheet" href="stylel.css" type="text/css" />
</head>

<body>
  <div id="px">
    <h1>Pixel</h1>
    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.
  </div>

  <div id="em">
     <h1>Em</h1>
     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.
  </div>

  <div id="persen">
    <h1>Persen</h1>
    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.
  </div>
</body>
</html>

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…

]]> http://hisman.org/satuan-panjang-di-css.html/feed 2 All About CSS Float Technique (2) http://hisman.org/all-about-css-float-technique-2.html http://hisman.org/all-about-css-float-technique-2.html#comments Sat, 16 Jan 2010 07:21:16 +0000 hisman http://hisman.org/?p=204 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:

<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

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

<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box3">
 <h1>Box3</h1>
 <p>Etiam eu est est,....</p>
</div>

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

]]> http://hisman.org/all-about-css-float-technique-2.html/feed 3 CSS Box Model http://hisman.org/css-box-model.html http://hisman.org/css-box-model.html#comments Thu, 14 Jan 2010 09:50:11 +0000 hisman http://hisman.org/?p=177 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?

css box model

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 :

<p>Lorem ipsum dolor sit amet,</p>

“Lorem ipsum dolor sit amet,” merupakan content dari tag <p> 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.

<div id="themargin">
<p>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.</p>
</div>

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 / <p> . 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 <p> akan bernilai sama yaitu 10 pixel.

seluruh margin bernilai 10 pixel

yang berwarna abu-abu itu menggambarkan margin dari <p> .

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.

Marginnya beda-beda

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.

border

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;
 }

padding

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

]]> http://hisman.org/css-box-model.html/feed 3 Memahami Whitespace dalam Suatu Situs http://hisman.org/memahami-whitespace-dalam-suatu-situs.html http://hisman.org/memahami-whitespace-dalam-suatu-situs.html#comments Mon, 16 Feb 2009 02:00:03 +0000 hisman http://hisman.org/?p=94 Mungkin Kamu dah pada tau apa itu (pengertian dari) whitespace ya.. tapi gak ada salahnya saya bahas sedikit pengertian whitespace itu, yah itung-itung biar artikelnya agak panjang dikit, hehe…

Whitespace ini hanya istilah sih sebenernya. Istilah untuk suatu area pada halaman suatu situs yang gak ada tulisannya ataupun gambar-gambar atau bisa juga dibilang area kosong.

Sadar atau tidak sadar, ketika mendesain sebuah situs kita sering melupakan keberadaan whitespace ini pada situs yang kita desain tersebut. Kita sering kali ingin selalu mengisi setiap ruang pada situs kita dengan tulisan, gambar, foto2 dll.. yang pada akhirnya hal ini akan membuat situs kita menjadi sumpek dan terlalu padat.

Atau kadang kala kita juga secara tidak sadar menggunakan whitespace ini. Misalnya ketika menggunakan padding, atau saat kita kehabisan ide untuk mengisi sidebar pada situs kita dan membiarkannya tetap kosong. Nah, saat itu sebenernya kita sudah menciptakan suatu whitespace.

Kegunaan whitespace

Adanya whitespace di situs kamu dapat membuat pengunjung dari situs kamu itu menjadi lebih rileks dan nyaman dalam melihat / mengunjungi situs kamu, karena situs kamu jadi tidak lagi terlihat sumpek.

Selain itu, whitespace juga dapat membuat situs menjadi terlihat lebih rapi dan juga dengan adanya whitespace ini, pengunjung menjadi lebih mudah dalam melihat di mana navigasinya, di mana kontennya, sidebarnya dll yang akan membuat mereka lebih leluasa dalam menjelajah situs kita.

Apalagi kalau peletakkan whitespacenya sudah ditentukan / direncanakan sejak awal, wah pasti situsnya akan semakin terlihat umm… apa istilahnya ya… ummm… balance kali ya.. haha…

Kesimpulan

Keberadaan whitespace di dalam halaman sebuah web / situs sangatlah penting. Karena tanpa adanya whitespace, situs tersebut tidak akan enak untuk dilihat.

Makanya, ketika akan mendesain sebuah web / situs terutama saat merancang layoutnya, selalu sediakanlah ruang kosong atau whitespace di halaman web tersebut. Agar nantinya situs yang didesain tersebut tidak akan terlihat sumpek.

]]> http://hisman.org/memahami-whitespace-dalam-suatu-situs.html/feed 7 Sedikit Saran dalam Mendesain Web http://hisman.org/sedikit-saran-dalam-mendesain-web.html http://hisman.org/sedikit-saran-dalam-mendesain-web.html#comments Thu, 29 Jan 2009 04:41:04 +0000 hisman http://hisman.org/?p=92 Mendesain sebuah web/situs itu sama halnya dengan mendesain user interface sebuah aplikasi/software, ya karena web itu khan sebenarnya termasuk sebuah aplikasi juga…

Nah, desain dari web ataupun aplikasi-aplikasi yang lain itu sebenernya fungsinya itu untuk mempermudah user dalam menggunakan aplikasi/web tersebut.

Sebagus apapun tampilan grafis desainnya, tapi kalau tampilan-tampilan yang bagus itu malah mengganggu/membuat user tidak nyaman atau bahkan menyulitkan user dalam menggunakan web tersebut, maka desain tersebut bisa dikatakan kurang layak untuk web tersebut.

Ini ada sedikit saran untuk kamu yang ingin mendesain sebuah web.

  1. Kamu harus mengetahui apa aja kira-kira isi dan juga tema dari web yang akan kamu desain itu. Hal ini dapat membantu kamu ketika melakukan pemilihan warna, background, icon-icon, apa aja kira-kira yang akan diletakkan di halaman home dari web tersebut dll. Karena desain dari sebuah web itu harus mencerminkan isi/tema dari web tersebut.
  2. Ketahuilah tujuan/goal diciptakannya web tersebut. Setiap situs yang dibuat pasti memiliki tujuan tertentu, tujuan/goalnya itu biasanya menyuruh user untuk melakukan sesuatu,nah desain yang kamu buat itu harus mendukung tercapainya tujuan atau goal tersebut.
  3. Setelah mengetahui goal dari website tersebut, kamu juga harus mengetahuilah karakteristik,sifat-sifat ataupun kebiasaan user yang kira-kira akan menggunakan / mengakses web yang akan kamu desain. Terapkan hal tersebut di desain web kamu.
  4. Jangan memampilkan semua fungsionalitas yang ada. Hal ini dapat mengganggu kenyamanan, membuat bingung dan juga memecah konsentrasi user, jadinya malah user tidak melakukan sesuatu yang sesuai dengan goal dari web tersebut. Tampilkan yang penting-penting aja dan yang sesuai dengan tujuan utama dari web itu.
  5. Menu-menu yang penting hendaknya di taruh di atas aja, biar langsung keliatan sama usernya.
  6. Hindari scrolling ke samping, kalau ada scrolling bagusnya yang vertikal dan juga sebaiknya menu ataupun navigasi yang penting jangan ikut ter-scrolling.

Apa lagi ya…. Itu dulu ya, klo ada yang ingin menambahkan silahkan saja…

]]> http://hisman.org/sedikit-saran-dalam-mendesain-web.html/feed 7 Membuat layout yang ada menunya http://hisman.org/membuat-layout-yang-ada-menunya.html http://hisman.org/membuat-layout-yang-ada-menunya.html#comments Sat, 18 Oct 2008 00:40:18 +0000 hisman http://hisman.org/?p=78 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 :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout+menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
</div>
<div id="posting">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

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…

]]> http://hisman.org/membuat-layout-yang-ada-menunya.html/feed 1 Membuat layout web tanpa tabel http://hisman.org/membuat-layout-web-tanpa-tabel.html http://hisman.org/membuat-layout-web-tanpa-tabel.html#comments Wed, 15 Oct 2008 02:34:12 +0000 hisman http://hisman.org/?p=72 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 :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
   <div id="header">
   </div>

   <div id="content">
      <div id="sidebar">
      </div>

      <div id="posting">
      </div>
  </div>

  <div id="footer">
  </div>
</div>
</body>
</html>

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.

]]> http://hisman.org/membuat-layout-web-tanpa-tabel.html/feed 15 Bermain-main dikit lagi dengan background http://hisman.org/bermain-main-dikit-lagi-dengan-background.html http://hisman.org/bermain-main-dikit-lagi-dengan-background.html#comments Thu, 11 Sep 2008 14:33:36 +0000 hisman http://hisman.org/?p=52 Oke, saya sudah menjelaskan sedikit tentang background. Nah, sekarang saatnya memulai pengaplikasiannya.

Pada contoh pengaplikasian background ini kemungkinan gak akan banyak-banyak contoh. Klo kamu masih kurang, silakan explore sendiri aja ya…

Kita mulai ya…

Misal, saya punya kode HTML kayak gini:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan Background</title>
</head>
<body>
<h2>Contoh Pengaplikasian Background</h2>
<div id="bg1">
</div>
<div id="bg2">
</div>
</body>
</html>

Saya akan akan mencoba menambahkan background pada tag h2 dan tag div. ini adalah kode CSSnya :


h2 {
background-color: #D3D3D3;
}

#bg1{
background-image:url(images/020.png);
background-color:#EAEAEA;
background-repeat:no-repeat;
background-position:top right;
width:300px;
height:100px;
}

#bg2{
background:url(images/bg2.jpg) repeat-y;
width:613px;
height:300px;
margin-top:30px;
}

Untuk meletakkan kode CSSnya, terserah kamu ya apa mo langsung di dalam dokumen HTMLnya atau di luar dokumen HTML (beda file).

Sedikit penjelasannya:

1. Untuk tag h2 diberi background dengan warna #D3D3D3 (warna apa ya itu)..

2. Untuk tag div yang id nya bg1, gambar “020.png”akan berada di pojok kanan atas, karena memakai background-position: top right.

3. Tag div ber-id bg2, gambar “bg2.jpg” yang heightnya hanya 1px diulang secara vertikal sampai 300px. Cara ini bisa menghemat kapasitas image, dengan memotong image tersebut menjadi berukuran kecil dan mengulangnya dengan bantuan property background-repeat.

Oke, cuman satu aja ya contohnya. Hehe.. silakan explore sendiri. File latihan di atas bisa di download disini…

Selamat mencoba…

]]> http://hisman.org/bermain-main-dikit-lagi-dengan-background.html/feed 1 Sedikit Penjelasan Tentang Background http://hisman.org/sedikit-penjelasan-tentang-background.html http://hisman.org/sedikit-penjelasan-tentang-background.html#comments Tue, 09 Sep 2008 04:23:30 +0000 hisman http://hisman.org/?p=48 Yap,,kali ini saya akan bahas mengenai bagaimana menambahkan background dengan CSS. Namun, sebelumnya ini beberapa hal tentang background yang perlu kamu tau, dan mungkin kamu sudah tau hal-hal ini:

1. Background dapat berupa warna ataupun gambar, atau bahkan bisa terdiri dari dua unsur tersebut.

2. Kamu bisa ngasih background di elemen HTML manapun, kamu tinggal ubah-ubah selectornya aja.

Ada 6 property di CSS,yang bisa digunakan untuk menambahkan background pada dokumen HTML kita, yaitu background-color, background-image, background-attachment, background-position, background-repeat, dan background. Saya jelasin satu-satu ya

1. background-color

Sesuai namanya, guna dari property ini adalah memberi warna pada background. Value dari property ini ya warna-warna yang ingin diberikan pada background.

Contohnya:


body{
     background-color:#000000;
}

Kode CSS di atas akan membuat tag body memiliki background berwarna hitam (#000000 = hitam).

2. background-image

Kalo property yang ini berguna untuk membuat image/gambar menjadi background. Valuenya seperti ini

url(letak gambar).

Contohnya, saya ingin membuat gambar “bg.png” menjadi background dari tag body yang terletak di folder images (folder images dan file HTMLnya ada dalam satu folder), maka CSSnya jadi seperti ini:


body{
     background-image: url(images/bg.png);
}


3. background-attachment

Kamu pernah liat situs yang kalo situsnya discroll backgroundnya gak ikutan ke scroll, nah itu contoh salah satu pemakaian property background-attachment dengan value fixed. Value dari background-attachment yang laen namanya scroll, klo yang ini kebalikannya dari fixed.

Contohnya, misal pada contoh background-image, saya pengen gambar bg.png tidak berubah/tetap di posisinya ketika di scroll, maka saya tinggal menambahkan property background-attachment di kode CSSnya:


body{
     background-image: url(images/bg.png);
     background-attachment:fixed;
}

4. background-position

Posisi dari background dapat kamu atur dengan property ini. Valuenya bisa top, center, bottom, right, atau bisa juga kamu set sendiri menjadi berapa pixel,em, atau persen.

Contoh :


body{
      background-image: url(images/bg.png);
      background-attachment:fixed;
      background-position: top;
}

5. background-repeat

Property ini gunanya untuk mengulang gambar pada background jika width atau height dari gambar tersebut lebih kecil dari halaman HTML yang dibuat. Untuk valuenya ada repeat, no-repeat, repeat-x, repeat-y.

Klo valuenya repeat, gambarnya akan diulang terus sampai halamannya penuh, klo no-repeat gambar tidak akan diulang, repeat-x akan membuat gambar diulang secara horizontal aja sedangkan value repeat-y akan mengulang gambar secara vertikal. Secara default klo kamu gak ngeset value dari property ini maka valuenya otomatis adalah repeat.

Contohnya:


body{
      background-image: url(images/bg.png);
      background-attachment:fixed;
      background-position: top;
      background-repeat: no-repeat;
}

6. background

Nah, klo property background berguna untuk mempersingkat penulisan property-property yang ada di atas. Misalnya pada contoh property background-repeat, kamu bisa menuliskannya hanya dengan begini:


body{
    background: url(images/bg.png) fixed top no-repeat;
}

Ingat setiap value dipisahkan dengan spasi.

]]> http://hisman.org/sedikit-penjelasan-tentang-background.html/feed 7 Pake Flash?? Pikir-pikir dulu dech.. http://hisman.org/pake-flash-pikir-pikir-dulu-dech.html http://hisman.org/pake-flash-pikir-pikir-dulu-dech.html#comments Sat, 23 Aug 2008 09:31:16 +0000 hisman http://hisman.org/?p=15 Kamu bisa menggunakan Flash? Bisa membuat animasi dengan Flash?? Dan ingin menaruhnya di website/blog kamu?? Sebaiknya dipikir baik2 dulu dech..

Lho Kenapa????

Eh.. Malah nanya,, Gini nich… sebenernya sich ngedesain web pake flash tuch menarik dan hasilnya pun pasti bagus, Tapi ada berbagai permasalahan yang membuat para webdesigner jarang yang make flash. Diantaranya ini nich:

  • Gak semua browser yang di pake orang tuch support atau sudah terinstall plugin flash player di browser tersebut, dan banyak yang tidak support karena browser default (tidak diinstall plugin/addon apa2 oleh si pemakai) kebanyakan tidak support flash.
  • Kalaupun browsernya sudah support, flash dapat membuat loading page menjadi lambat, nah loading page yang cepat khan salah satu syarat desain web yang baik.
  • Nah, karena gak semua browser support dan loading pagenya bisa jadi lambat, flash ini dapat mengganggu kenyamanan pengunjung web kamu.

Udah tau khan masalah yang ditimbulkan oleh flash, masih mau memasang flash di web/blog kamu?? Kalo masih pengen, saya punya saran nich:

  • Konten dari flash yang pengen kamu pasang itu sebaiknya bukanlah hal yang penting, karena gak semua browser support sama flash, jadi kalau pengunjung kamu memakai browser yg tidak support tersebut dan flash buatan kamu gak keluar, jadi ya tidak berpengaruh apa2 terhadap web kamu. Dan juga untuk menu sebaiknya jangan pake flash, pake aja CSS udah lumayan bagus kok.
  • Jangan kebanyakan memajang flash di satu halaman, karena akan membuat loading pagenya semakin lambat (kasihan dunks pengunjung web kamu), kecuali klo pengunjungnya rata2 kebanyakan dari negara2 maju, lah kalo pengunjungnya dari Indonesia yang notabene kecepatan koneksi internetnya gak seberapa khan kasihan.
]]> http://hisman.org/pake-flash-pikir-pikir-dulu-dech.html/feed 7