hisman.org » hisman 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 All About CSS Float Technique (1) http://hisman.org/all-about-css-float-technique-1.html http://hisman.org/all-about-css-float-technique-1.html#comments Wed, 13 Jan 2010 07:50:06 +0000 hisman http://hisman.org/?p=155 Yup, kali ini saya akan mencoba membahas tentang teknik float di css. Artikel ini merupakan artikel berseri yang gak tau kapan selesainya :Peace: . Pokoknya saya akan coba bahas segala yang saya tau tentang float. Kalau ada yang mau mengoreksi silahkan :D . 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 :o .

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 :D . Kira-kira gini :

<p>
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.
</p>

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:

<p><img src="images/me.gif" />
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.
</p>

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

]]> http://hisman.org/all-about-css-float-technique-1.html/feed 3 WeBuilder 2010 tool alternatif selain Dreamweaver http://hisman.org/webuilder-2010-tool-alternatif-selain-dreamweaver.html http://hisman.org/webuilder-2010-tool-alternatif-selain-dreamweaver.html#comments Tue, 12 Jan 2010 04:00:44 +0000 hisman http://hisman.org/?p=149 Dreamweaver merupakan tool/software pembuat website yang cukup terkenal dan powerfull. Beberapa webdeveloper menggunakan tool ini saat membuat suatu website. Saya juga awalnya menggunakan dreamweaver untuk membantu saya dalam pembuatan web.

Tapi lama-lama pake dreamweaver kadang bosen juga.. hehe. trus gak sengaja nemu webuilder 2010, tampilannya sederhana mirip kayak word 2003 kyknya, fungsi-fungsi yang ada di dreamweaver hampir ada semua di sini. Lumayan ringan juga installernya aja cuman sekitar 7 MB-an. Nih screenshotnya :

ini link resminya : http://www.blumentals.net/webuilder . Tapi sayang webuilder ini gak gratis alias bayar, yang bisa di download dari link resminya cuman demonya (limited 30 kali pake).

Tapi ada bajakannya kok, hehe… yang pengen coba bisa di download ada yang ngeshare nih di kaskus.

]]> http://hisman.org/webuilder-2010-tool-alternatif-selain-dreamweaver.html/feed 4 Cara Lain Membuat Horizontal Menu dengan CSS http://hisman.org/cara-lain-membuat-horizontal-menu-dengan-css.html http://hisman.org/cara-lain-membuat-horizontal-menu-dengan-css.html#comments Mon, 11 Jan 2010 11:17:38 +0000 hisman http://hisman.org/?p=135 Sebelumnya, saya pernah membahas tentang cara membuat menu horizontal dengan css. Pada artikel tersebut, menunya dibangun dengan list (di htmlnya) yang sejatinya terlihat ke bawah (vertikal) tidak horizontal. Nah, css-nya yang membuat menu itu menjadi terlihat horizontal, di artikel itu menggunakan teknik float. Lebih lengkapnya silahkan kunjungi aja artikelnya.

Nah, kali ini kita akan coba membuat menu horizontal juga tapi dengan cara yang sedikit berbeda dengan artikel sebelumnya. Untuk menunya, tetap menggunakan list, yang berbeda hanya pada css-nya saja, terutama teknik yang digunakan untuk membuat tampilan menunya menjadi horizontal.

Oke, untuk contohnya kita buat dua file yang pertama adalah file index.html untuk isi htmlnya dan file style.css untuk cssnya.

Isi file index.html nya 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" xml:lang="en" lang="en">

<head>
  <title>Horizontal Menu (Cara Lain)</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <ul id="nav">
    <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>
</body>

</html>

trus untuk isi file style.css :


#nav li {
  display: inline;
}

#nav a {
  padding:3px 5px 3px 5px;
  border: 1px solid #ccc;
  text-decoration: none;
}

#nav a:hover{
  background: #00FFFF;
}

Yup, kira-kira gitu isinya. Trus, penjelasannya kira-kira gini :

Pertama untuk yang file index.html nya :

Hampir sama dengan cara yang pertama, tetap memakai list untuk menunya. Listnya :

  <ul id="nav">
    <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>

Trus, untuk memanggil file style.css menggunakan ini :


<link rel="stylesheet" href="style.css" type="text/css" />

Nah, sekarang yang file style.css nya. Di sini mungkin yang akan sedikit berbeda. Intinya sih gini, artikel sebelumnya itu khan memakai teknik float untuk membuat tampilan listnya (menunya) menjadi horizontal. Cara yang sekarang ini tidak memakai float tetapi memakai properti display untuk merubah tag <li></li> yang tadinya merupakan block element menjadi inline element, sehingga akan terlihat horizontal. Sintaks cssnya yang ini :


#nav li {
  display: inline;
}

yang penting cuman di situ, kalo sintaks css yang lain itu hanya untuk mendesain tampilannya aja biar agak lebih bagus. Itu tergantung kreasi Anda.

Demo | Source code

]]> http://hisman.org/cara-lain-membuat-horizontal-menu-dengan-css.html/feed 0 Pendefinisian warna di css http://hisman.org/pendefinisian-warna-di-css.html http://hisman.org/pendefinisian-warna-di-css.html#comments Sat, 18 Apr 2009 05:00:03 +0000 hisman http://hisman.org/?p=111 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

warna

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.

hexadesimal

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

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

]]> http://hisman.org/pendefinisian-warna-di-css.html/feed 1 Nyobain kompress gambar di smush.it http://hisman.org/nyobain-kompress-gambar-di-smushit.html http://hisman.org/nyobain-kompress-gambar-di-smushit.html#comments Thu, 19 Mar 2009 04:07:34 +0000 hisman http://hisman.org/?p=101 Hai, smua… hehe… kali ini mungkin saya cuman pengen ngebahas tentang hasil coba-coba saya make salah satu tool online untuk mengkompress gambar, namanya smush.it.

home nya smush.it

Smush.it ini mengklaim bisa mengecilkan ukuran file gambar kita tanpa mengubah kualitas gambarnya, seperti yang tertulis di halaman home nya smush.it, nih saya kutip :

Smushit.com is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images – without changing their look or visual quality. 

Makanya saya pengen cobain nih tool. hehe… khan lumayan tuh kalo pengen nampilin gambar2 di web, bisa di kompress dulu di situs ini. Nah, setelah saya cobain hasilnya begini nih :

Habis kompress di smush.it 

Kalo gak keliatan gambarnya di klik aja biar agak gede…

Coba kamu liat bagian yg di merah-merahin… Nah, di situ keliatan berapa byte atau berapa persen kapasitas yang berhasil di kurangin sama dia. Emang sich gak gede2 amat, paling gede dari file yg saya masukkin cuman 30kb atau sekitar 16,66%.

Tapi yah lumayan lah, berkurang segitu. O iya, setelah saya donlot file hasil kompresannya dia, ternyata bener kualitas gambarnya gak terlalu berubah, mirip dengan aslinya (sebelum di kompress). Klo gak percaya coba liat nih :

Sebelum di kompress

Setelah di kompress

O iya, klo ada yang tau tempat kompress gambar yang lebih bagus dari smush.it sharing2 dunk….

]]> http://hisman.org/nyobain-kompress-gambar-di-smushit.html/feed 0 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