hisman.org

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…

The Layout

hisman — Thu, 18 Sep 2008 10:37:46 +0000

Kemaren-maren, saya dah jelasin sedikit tentang background. Nah, sekarang saatnya kita bicara tentang layout.

Misalkan kamu mo bikin mading/poster nich.. Pas kamu ngebikin mading/poster tersebut kamu pasti mikirin ehm… layoutnya gimana ya?? Ehm..di sebelah sini mo di kasih apa ya, sebelah situ isinya apa ya, Yap, memang dalam desain mendesain sesuatu itu yang pertama kali dipikirin itu biasanya layoutnya mo gimana..

Begitu juga dalam mendesain sebuah web, kamu juga harus mikirin layoutnya gimana. Misal headernya mo ditaruh di mana, trus sidebarnya di mana, menunya, contentnya. Yah macem-macem dech…

Dalam CSS sendiri ada banyak property yang bisa digunakan untuk membuat layout dari web. Dan biasanya gak semua property itu dipake. Para web designer biasanya hanya memakai property yang diperlukan aja dan antara satu web designer dengan yang lain biasanya ada perbedaan dalam penggunaannya. Yah tergantung kreativitas masing-masinglah…

Property-property untuk layout gak akan saya jelasin di postingan ini, karena takutnya ntar postingan ini malah jadi kepanjangan,hehe (bilang aja males…) tapi akan saya jelasin sambil praktek di postingan-postingan selanjutnya…

Oke kembali ke layout lagi ya… Sebenernya sich ada beberapa layout standar. Standar disini maksudnya sering dipake orang-orang… ini contohnya (klo gak keliatan gambarnya di klik aja biar gede) :

Klo kamu liat emang layout-layout itu sangat standar sekali ya.. blog saya ini juga tergolong yang standar juga…

Tapi klo kamu kreatif kamu bisa bikin layout yang aneh-aneh, tapi harus tetap user friendly ya…

Sudah Saatnya untuk Fokus…

hisman — Sun, 14 Sep 2008 04:43:33 +0000

Kuliah di jurusan informatika bagi saya adalah kesenangan dan kadang bisa bikin pusing, karena tiap hari saya harus bergelut dengan yang namanya coding, banyak bahasa yang mesti dikuasai, contohnya aja semester kemaren baru bisa pascal dikit-dikit, eh sekarang sudah harus beralih lagi ke C …

Emang sih, ketika sudah mulai menguasai suatu bahasa dan berhasil membuat sebuah program sendiri pasti akan muncul kepuasan tersendiri (kepuasan seorang programmer).
Dan, pada tingkat satu pernah muncul gejolak pada diri saya yang ingin mempelajari,menguasai dan mendalami semuanya. Terlebih ketika saya sudah sedikit menguasai lebih dari satu bidang. Pas itu juga saya sudah mengumpulkan berbagai macam ebook yang siap dibaca (walaupun sampe sekarang gak ada yang dibaca :p).

Namun, seiring berjalannya waktu, segala keterbatasan itu muncul. Mulai dari waktu untuk belajar yang semakin lama semakin dibatasi dengan berbagai aktivitas2 dan tugas2 kuliah yang menumpuk dan harus diselesaikan, hingga kemampuan otak yang memang terbatas.

Karena itulah, sudah saatnya saya mulai fokus di satu bidang aja. Benar-benar fokus dan expert di bidang itu. Bidang yang saya pilih itu adalah web, kenapa? Karena saya lebih enjoy ngutak-ngatik web daripada bikin program yang rumit..

Untuk fokus memang banyak yang harus di korbankan, terutama ego diri sendiri yang selalu ingin mencoba segalanya. Saatnya saya mulai mengalahkan ego saya sendiri demi masa depan yang cerah (wew kyk apa aja ya), tapi itu yang harus saya lakukan karena saya sadar akan kemampuan saya dan kalau saya menuruti ego tersebut dapat dipastikan lulus dari kuliah ini pasti saya gak akan punya skill yang bisa dibanggakan.

So, web is my life now…

Bermain-main dikit lagi dengan background

hisman — Thu, 11 Sep 2008 14:33:36 +0000

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:






Latihan Background


Contoh Pengaplikasian Background

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…

Sedikit Penjelasan Tentang Background

hisman — Tue, 09 Sep 2008 04:23:30 +0000

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.

Peletakkan CSS di HTML

hisman — Sun, 07 Sep 2008 07:32:04 +0000

Kamu dah kenal CSS, belajar CSS, jenis-jenis selector di CSS juga kamu dah tau. Nah saatnya pengaplikasian, eits.. sebelum itu kamu harus tau CSS itu diletakkan dimana sich dalam dokumen HTML..
Ada tiga cara peletakkan CSS di HTML,yaitu :

1. Meletakkan CSS sebagai atribut pada suatu tag HTML, contoh :


heading1

2. Meletakkan CSS dengan memakai tag . Contohnya:






contoh

3. Meletakkan CSS di luar dokumen HTML dengan file tersendiri biasanya berextension “.css”, cara agar file HTML dan CSS saling berhubungan, bisa menggunakan tag di dalam tag . Contoh :

Cara ini biasanya digunakan ketika kamu memiliki banyak file HTML yang memiliki style yang sama, jadi cukup dengan membuat satu file .css kamu tinggal panggil2 file itu di lebih dari satu dokumen HTML.