hisman.org » HTML

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…

Cara Lain Membuat Horizontal Menu dengan CSS

hisman — Mon, 11 Jan 2010 11:17:38 +0000

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 :







  Horizontal Menu (Cara Lain)
  



  
    Home
    About
    Contact
    FAQ
    Product

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 :

  
    Home
    About
    Contact
    FAQ
    Product

Trus, untuk memanggil file style.css menggunakan ini :

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

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

Sedikit penjelasan tentang tag div

hisman — Sun, 25 Jan 2009 07:32:53 +0000

Pada beberapa artikel saya sebelumnya misalnya tentang membuat layout dan membuat menu, saya selalu menggunakan tag div di kode HTMLnya, nah sebenernya apa sih gunanya tag div itu??

div itu singkatan dari division, tag ini merupakan block element yang berguna untuk menggabungkan atau membuat group tag-tag/element-element baik itu block ataupun inline element yang ada di dalam tag div itu.

Misalnya



Judul
Deskripsi

Nah, tag h1 dan p yang ada di dalam tag div di atas itu menjadi satu group yang idnya itu header. Secara default, tag div yang ditulis di atas tag div yang lain, ketika ditampilkan di browser juga berada di atas tag div yang di bawahnya. Makanya ketika membuat layout tanpa tabel, di CSSnya kita memakai property float untuk membuat tag div itu berada di kanan atau kiri tag div yang lain.

Ada lagi temennya tag div, yaitu tag span. Tag span ini sama-sama membuat group tag yang ada di dalamnya, tapi karena span merupakan inline element, jadi yang di group juga cuman inline element juga…

Inline element dan Block element pada HTML

hisman — Wed, 21 Jan 2009 03:12:04 +0000

Oke… kali ini saya akan bahas tentang inline element dan block element pada HTML, apa itu??

Sebenernya element-element pada HTML itu terbagi dua jenis yaitu ada yang merupakan inline element dan juga ada yang block, apa bedanya? Hmm… saya jelasin satu-satu ya…

Pertama yang inline element dulu, dari namanya dah keliatan khan?? Hehe… inline element itu adalah element pada HTML yang cuman sebaris, nah lho bingung khan?? pokoknya ya gitu dech,, gak boleh protes , yang termasuk inline element itu contohnya tag-tag , , , dll deh…hehe…

Nah, beda halnya dengan yang block element, yang ini lawannya yang tadi, berarti gak cuman sebaris, hehe… yang termasuk block element contohnya tag-tag

dan sebagainya…

Makanya di dalam block element boleh di taruh block element lagi atau inline element, sedangkan di dalam inline element gak boleh di taruh block element, cuman bisa di taruh inline element juga. Contohnya :



Contoh 1
ini boleh dilakukan


ini tidak boleh

ini boleh

Yang ini boleh

Dah ngerti khan?? tambahan, element-element tersebut, di CSS bisa dirubah bentuknya yang tadinya inline bisa jadi block dengan property display.

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

Berkenalan Dengan HTML

hisman — Thu, 04 Sep 2008 10:25:28 +0000

Oke mamen,, masih semangat belajar webdesign? Nah, kali ini kita kenalan dulu yuk sama yang namanya HTML, karena rasanya kalo mo belajar webdesign ataupun ngedesian web harus tau terlebih dahulu HTML…

Saya tau kamu yang udah sering berinternet ria pasti udah gak asing lagi telinganya sama yang namanya HTML. Tapi gak apa kalo saya bahas sedikit disini, biar lebih kenal dan lebih dekat lagi dengan HTML. Karena kalau kamu pengen jadi seorang webdesigner pastinya HTML akan jadi makanan sehari-hari kamu .

Umm.. pengertian HTML apa ya??saya juga sebenernya bingung sich. Klo kepanjangannya sih HyperText Markup Language (hahlah apa ya artinya ada yang tau??). Cuman yang pasti HTML ada di setiap source code website2 yang ada saat ini. Coba aja kamu buka sorce code website ini pasti ada HTMLnya..

Trus tag-tag HTML itu seperti apa ??

Nah ini contohnya : belajar webdesign Kalau kamu ngeliat kode-kode mirip kayak gitu ya itu yang namanya HTML. Klo kamu pengen memperdalam/belajar kode-kode HTML kamu bisa ke situs HTML dog.

Sedikit penjelasan dari tag belajar webdesign :
adalah tag pembuka, trus href itu attribute. ”http://hisman.org” merupakan attribute value dan adalah tag penutup.

Secara umum, struktur dari sebuah dokumen HTML adalah sebagai berikut :

Kalo kamu perhatikan, pada tag !DOCTYPE ada juga yang memakai DTD XHTML 1.0 Transitional, jadi tagnya :

Mana yang sering kamu liat? Yang strict atau yang transitional. Hmm. Kalau saya jujur sering ngeliat yang transitional. Template blog saya ini juga pake yang transitional. Soalnya kalo kamu buatnya pake dreamweaver, tag DOCTYPE itu langsung ada dan defaultnya transitional. Walaupun sebenernya katanya sich yang ideal itu pake yang strict.

Konten web yang kamu liat di browser itu ada di dalam tag . Jadi kalau kamu mau ngisi konten ya di dalam tag tersebut. Kalau di dalam tag gak akan muncul di browser.

Nah, dah mulai kenal sama HTML?? Oke tunggu artikel berikutnya tentang CSS..