Blog > Archive for July 2013

Archive for July 2013

Pengantar CSS

Sebenarnya saya juga baru kenal dan memulai belajar CSS. Tulisan ini saya buat sekedar untuk mengingat apa yang baru saya pelajari dan mudah-mudahan bermanfaat bagi yang memerlukannya.
Karena saya belum jago CSS, maka kalau ada kesalahan dan kekurangannya yaa diharap maklum aja dan Bagi yang udah jago saya ucapkan terima kasih kalau mau mengoreksi dan menambal kekurangan tersebut. Bagi yang masih awam kaya saya, yoo kita belajar sama-sama dan saling berbagi ilmu.
CSS singkatan dari Cascading Style Sheet.
Jangan tanya artinya yah…, saya sendiri juga masih bingung tentang artinya hehehee…
Yang penting bagi kita eh maaf saya … pokoknya CSS itu semacam kumpulan kode-kode untuk mengatur tampilan halaman blog atau HTML kita.
(sorry bagi yang dah jago CSS, definisi diatas adalah definisi saya sendiri, tolong koreksinya)
Sebelum belajar CSS, sebaiknya siapkan text editor semacam notepad untuk menulis text CSS anda dan tentu saja Web Browser macam IE, Firefox, Opera untuk mencoba tampilan CSS anda.
Untuk Web browser lebih banyak lebih baik, karena tidak semua kode CSS di support oleh semua browser. Jadi seba
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Syntax CSS I

Cara Penulisan / Syntax CSS

Syntax CSS terdiri dari 3 bagian yaitu: selector, property dan value
selector {property: value}
Selector adalah nama bagian halaman HTML yang akan kita definisikan
Property adalah atribut atau perlengkapan yang akan kita definisikan/kita rubah
Value adalah nilai dari property, setiap property mempunyai satu value.
Dalam penulisannya property dan value dipisahkan dengan titik dua dan diletakkan dalam kurung kurawal

Contoh
Body {background: red}

Jika kita mempunyai lebih dari satu property, maka setiap property harus dipisah dengan titik koma.
Contoh
p {text-align:center;color:red}

Untuk memudahkan pembacaan, setiap property sebaiknya ditulis dalam baris yang terpisah.
Contoh
p
{
text-align: center;
color: black;
font-family: arial
}

Pengelompokan Selector

Selector yang mempunyai pengaturan yang sama bisa kita kelompokkan menjadi satu dengan syarat setiap selector harus dipisahkan dengan tanda koma.
Misalnya kita ingin membuat 4 header dengan nama h1,h2,h3,h4 dan mempunyai warna text yang sama yaitu merah. Maka kita bisa membuatnya dengan kode CSS begini:
h1,h2,h3,h4
{
color: red
}
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Memasang Kode CSS

Cara memasang kode CSS terbagi menjadi tiga cara
  • Eksternal CSS
  • Internal CSS
  • Inline CSS

Eksternal CSS

Eksternal CSS sangat ideal digunakan jika kita punya kode CSS yang sama untuk beberapa halaman Web. Langkah membuat eksternal CSS:
Pertama kita harus menuliskan kode CSS nya dulu dengan teks editor kesukaan kita misalnya notepad kemudian simpan dengan ekstensi .css.
Kedua buat suatu link untuk memanggil kode yang telah kita buat tersebut. Link tag ini harus terletak didalam bagian head.
Contoh:
Untuk memudahkan pembahasan, kita coba aja yok …

Bukalah notepad anda, kemudian ketik kode dibawah ini:
p {
margin-left: 20px;
color: blue;
}
body {background: yellow}

dan simpanlah dengan nama coba-eksternal.css misalnya di folder d:\Ngeblog\
Kemudian Klik Menu-File-New, ketikkan kode berikut
<html>
<head>
<link rel="stylesheet" type="text/css"
href="d:\Ngeblog\coba-eksternal.css" />
</head>
<body>
<p>Coba Eksternal CSS </p></body>
</html>

Setelah selesai simpanlah dengan ekstensi .htm, misalnya d:\Ngeblog\coba-eksternal-style.htm , nah… sekarang saatnya kita mencoba kode css kita. Coba buka Internet Explorer kemudian klik Menu File – Open dan Browse untuk mencari d:\Ngeblog\coba-eksternal-style.htm.  setelah itu klik OK.
Coba rubah file css misalnya color : red atau yang lainnya dan tekan F5 pada browser mu untuk melihat perubahannya.

Internal CSS

Kita bisa langsung menuliskan kode CSS kita dengan menggunakan tag <style> pada bagian dokumen HTML. Internal CSS biasa dipakai jika setiap dokumen HTML memiliki kode yang berbeda-beda.

Contoh:
Yok kita buka kembali notepad nya    ( kalau udah ditutup XxXxXx)
Ketik kode berikut:

<html>
<head>
<style type="text/css">
p {
margin-left: 20px;
color: blue;
}
body {background: yellow}
</style>
</head>
<body>
<p>Coba Internal CSS </p>
</body>
</html>


Kemudian simpanlah dengan nama coba-internal-style.htm. Untuk melihat tampilannya coba buka kembali Internet Explorer dan Open file coba-internal-style.htm tersebut.
Nah…. Udah tampil khan.

Inline CSS

Inline Css ialah cara menuliskan kode CSS langsung pada elemen HTML yang akan diformat. Cara ini biasa digunakan untuk memformat suatu elemen hanya untuk sekali saja.
Contoh:
Biasa…, buka notepad dulu….lalu ketik
<p style="color: blue; margin-left: 20px; background: yellow">
Coba Inline CSS
</p>

Simpan dengan ekstensi .htm dan buka dengan IE untuk melihat tampilannya.

CSS Gabungan

Kita bisa menggabungkan dua atau tiga cara penulisan CSS diatas sekaligus.
Perlu diingat: Jika suatu elemen memiliki lebih dari satu kode, maka dia akan menggunakan kode yang paling spesifik.
Bila terdapat pengaturan yang sama, maka Kode CSS yang dianggap paling spesifik adalah Inline CSS, kemudian Internal CSS dan terakhir Eksternal CSS.

Untuk meningkatkan kemahiran, silakan mencoba sendiri membuat contoh dokumen yang memiliki kode CSS lebih dari satu.
Bila udah mencoba… bilang ke saya yaaa…. XxXxXx…
Ternyata CSS ga sesulit yang dibayangkan…, ya thoooo
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Syntax CSS II

Class Selector

Dengan menggunakan class selector kita bisa mendefinisikan corak yang berbeda pada suatu elemen HTML yang sama.

Sebagai missal kita ingin mempunyai paragraph dengan 2 macam tipe yaitu: satu paragraph dengan text rata kanan dan satu lagi rata tengah.
Cara mendifinisikannya deang class selector ialah:

p.kanan {text-align: right}
p.tengah {text-align: center}

Selector p (paragraf) mempunyai 2 class selector yaitu kanan dan tengah yang masing-masing mempunyai property yang berbeda.

Kita harus memanggil class yang sesuai untuk membuat paragraph sesuai dengan keinginana kita.
Contoh untuk membuat paragraph dengan text rata kanan

<p class="kanan">
Paragrap ini ditulis rata kanan.
</p>

Untuk rata tengah
<p class="tengah">
Paragrap ini ditulis rata tengah.
</p>


Kita bisa mengaplikasikan beberapa class dalam satu elemen dengan sintaksis sbb:

<p class="tengah merah">
Paragraph rata tengah dengan tulisan warna merah.
</p>


Kita bisa menghilangkan nama selektoc untuk mendefinisikan class yang mungkin akan digunakan dalam semua elemen HTML. Contoh berikut akan membuat semua elemen HTML dengan class=”tengah” baik itu header, paragraph atau yang lainnya akan ditulis rata tengah.
.tengah {text-align: center}



Contoh penggunaannya

<h1 class="tengah">
Header ditulis rata tengah.
</h1>   
<p class="tengah">
Paragraph yang juga ditulis rata tengah.
</p>


Catatan : Nama Class tidak boleh diawali dengan angka karena tidak akan bekerja in Mozilla/Firefox.


Komentar CSS
Komentar biasa digunakan untuk menjelaskan kode kita yang sangat membantu sewaktu kita akan mengedit kembali kode-kode trersebut. Komentar dalam CSS diawali dengan "/*", dan tutup dengan "*/"
Contoh

p
{
text-align: center;
/* Ini Komentar saya*/
color: black;
font-family: arial
}
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Unit

Ada baiknya mengetahui CSS Units sebelum kita memulai ke pembahasan selanjutnya. CSS Units adalah satuan pengukuran yang sering digunakan dalam membuat kode CSS.
Tabel CSS Units

Units Deskripsi
% prosentase
in inchi
cm centi meter
mm mili meter
em 1em = ukuran huruf yang berlaku
ex kurang lebih setengah ukuran huruf
pt point ( 1 point = 1/72 inchi )
pc pica ( 1pc = 12 point )
px pixels ( satu titik pada layar monitor )
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Memasang Kode CSS

Cara memasang kode CSS terbagi menjadi tiga cara
  • Eksternal CSS
  • Internal CSS
  • Inline CSS

Eksternal CSS

Eksternal CSS sangat ideal digunakan jika kita punya kode CSS yang sama untuk beberapa halaman Web. Langkah membuat eksternal CSS:
Pertama kita harus menuliskan kode CSS nya dulu dengan teks editor kesukaan kita misalnya notepad kemudian simpan dengan ekstensi .css.
Kedua buat suatu link untuk memanggil kode yang telah kita buat tersebut. Link tag ini harus terletak didalam bagian head.
Contoh:
Untuk memudahkan pembahasan, kita coba aja yok …

Bukalah notepad anda, kemudian ketik kode dibawah ini:
p {
margin-left: 20px;
color: blue;
}
body {background: yellow}

dan simpanlah dengan nama coba-eksternal.css misalnya di folder d:\Ngeblog\
Kemudian Klik Menu-File-New, ketikkan kode berikut
<html>
<head>
<link rel="stylesheet" type="text/css"
href="d:\Ngeblog\coba-eksternal.css" />
</head>
<body>
<p>Coba Eksternal CSS </p></body>
</html>

Setelah selesai simpanlah dengan ekstensi .htm, misalnya d:\Ngeblog\coba-eksternal-style.htm , nah… sekarang saatnya kita mencoba kode css kita. Coba buka Internet Explorer kemudian klik Menu File – Open dan Browse untuk mencari d:\Ngeblog\coba-eksternal-style.htm.  setelah itu klik OK.
Coba rubah file css misalnya color : red atau yang lainnya dan tekan F5 pada browser mu untuk melihat perubahannya.

Internal CSS

Kita bisa langsung menuliskan kode CSS kita dengan menggunakan tag <style> pada bagian dokumen HTML. Internal CSS biasa dipakai jika setiap dokumen HTML memiliki kode yang berbeda-beda.

Contoh:
Yok kita buka kembali notepad nya    ( kalau udah ditutup XxXxXx)
Ketik kode berikut:

<html>
<head>
<style type="text/css">
p {
margin-left: 20px;
color: blue;
}
body {background: yellow}
</style>
</head>
<body>
<p>Coba Internal CSS </p>
</body>
</html>


Kemudian simpanlah dengan nama coba-internal-style.htm. Untuk melihat tampilannya coba buka kembali Internet Explorer dan Open file coba-internal-style.htm tersebut.
Nah…. Udah tampil khan.

Inline CSS

Inline Css ialah cara menuliskan kode CSS langsung pada elemen HTML yang akan diformat. Cara ini biasa digunakan untuk memformat suatu elemen hanya untuk sekali saja.
Contoh:
Biasa…, buka notepad dulu….lalu ketik
<p style="color: blue; margin-left: 20px; background: yellow">
Coba Inline CSS
</p>

Simpan dengan ekstensi .htm dan buka dengan IE untuk melihat tampilannya.

CSS Gabungan

Kita bisa menggabungkan dua atau tiga cara penulisan CSS diatas sekaligus.
Perlu diingat: Jika suatu elemen memiliki lebih dari satu kode, maka dia akan menggunakan kode yang paling spesifik.
Bila terdapat pengaturan yang sama, maka Kode CSS yang dianggap paling spesifik adalah Inline CSS, kemudian Internal CSS dan terakhir Eksternal CSS.

Untuk meningkatkan kemahiran, silakan mencoba sendiri membuat contoh dokumen yang memiliki kode CSS lebih dari satu.
Bila udah mencoba… bilang ke saya yaaa…. XxXxXx…
Ternyata CSS ga sesulit yang dibayangkan…, ya thoooo
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Background Color

Property background-color digunakan untuk memberikan warna pada latar belakang suatu elemen. Property ini mempunyai 4 value yaitu:
  1. color-rgb      ( untuk memberikan warna dengan menuliskan kode RGB -nya )
  2. color-hex     ( untuk memberikan warna dengan menuliskan kode hexadecimal -nya )
  3. color-name  ( untuk memberikan warna dengan menuliskan nama -nya )
  4. transparent ( untuk membuat background yang transparan)
Supaya lebih mudah, kita langsung praktek aja yok....
Udah nyiapin notepad-nya khan...
Kalau udah ketik atau copy paste aja kode berikut:

<html>
<head>

<style type="text/css">
/* Ini contoh penggunaan color-rgb*/
p {background-color: rgb(250,0,255)}

/* Ini contoh penggunaan color-name*/
body {background-color: yellow}

/* Ini contoh penggunaan color-hex*/
h1 {background-color: #00ff00}

/* Ini contoh penggunaan tranparrent*/
h2 {background-color: transparent}

</style>

</head>

<body>
Background body di set dengan color-name
<h1>Background Header 1 diset dengan kode hexadesimal</h1>
<h2>Background Header 2 di set Transparan</h2>
<p>Background Paragrap diset dengan kode RGB</p>

</body>
</html>
Simpan dengan nama background-color.htm dan lihatlah tampilannya pada browsermu.
Hasilnya akan tampak seperti dibawah ini.



Background body di set dengan color-name

Background Header 1 diset
dengan kode hexadesimal


Background Header 2 di set Transparan


Background Paragrap diset dengan kode RGB

Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Background CSS

Properti background pada CSS digunakan untuk:
  • Mengatur warna Latar belakang suatu elemen
  • Menjadikan gambar sebagai latar belakang suatu elemen
  • Mengatur posisi latar belakang gambar dalam suatu halaman.
  • Melakukan pengulangan gambar secara vertikal dan horizontal
Sebelum membahas property backbround lebih lanjut, ada baiknya kita mengetahui property-property yang berhubungan dengan background.
Tabel Property yang berhubungan dengan background:

PropertyDeskripsiValue
backgroundUntuk mengatur semua property background sekaligusbackground-color
background-image
background-position
background-attachment
background-repeate
background-
color		Untuk mengeset warna latar belakang pada suatu elemencolor-rgb
color-hex
color-name
transparent
background-
image		Untuk mengeset sebuah gambar menjadi latar belakang pada suatu elemenurl(URL)
none
background-positionUntuk mengeset posisi gambar latar belakangtop left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-attachmentUntuk memilih posisi gambar akan tetap atau menghilang pada waktu di scrollscroll
fixed
background-repeateUntuk mengeset pengulangan sebuah gambarrepeat
repeat-x
repeat-y
no-repeat
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Background Image

Property background-image digunakan untuk menyisipkan sebuah gambar menjadi latar belakang suatu elemen. Property ini mempunyai dua nilai(value) yaitu: url(URL) dan none. Value none berfungsi untuk menghilangkan gambar background sedang Value url diikuti alamat url dalam tanda kurung berfungsi untuk memanggil gambar yang akan jadikan background.
Untuk mencoba property background-image, sebaiknya siapkan sebuah gambar yang akan digunakan sebagai background misalnya seperti ini



dan kita simpan di d:\Ngeblog\back.jpg
Atau boleh juga gambar kamu sendiri , asal bukan gambar artis bugil aja.....

Sekarang coba ketik kodenya di notepad:
<html>
<head>
<style type="text/css">
body
{
background-image: url(d:/Ngeblog/back2.jpg)

}
</style>
</head>
<body>
Coba Background Image
</body>
<html>

Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Background Repeat

Property background-repeat digunakan untuk mengatur pengulangan sebuah gambar background. Ada empat nilai untuk property ini yaitu:
1. repeat (default) - untuk membuat gambar background memenuhi elemen.
2. repeat-x - untuk membuat pengulangan secara horisontal.
3. repeat-y - untuk membuat pengulangan secara vertikal.
4. no-repeat - untuk membuat gambar background ditampilkan sekali saja.

yok maass..., langsung dicoba....

Contoh untuk background-repeat:repeat

<html>
<head>
<style type="text/css">
body
{
background-image: url(d:/Ngeblog/back.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
Coba Background Image di repeat
</body>
</html>

Hasil tampilan kode diatas akan seperti ini:


Coba Background Image di repeat
.
.
.
.
.
.
.

Ini Tampilan untuk background-repeat: repeat-x


Coba Background Image dengan repeat-x
( pengulangan horisontal )
.
.
.
.
.
.
.

Ini Tampilan untuk background-repeat: repeat-y


Coba Background Image dengan repeat-y
( pengulangan vertikal )
.
.
.
.
.
.
.

Ini Tampilan untuk background-repeat: no-repeat


Background Image hanya sekali ditampilkan
( tidak ada pengulangan)
.
.
.
.
.
.
.
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Background Position

Property background-position digunakan untuk mengatur posisi background pada suatu elemen halaman. Nilai (Value) property ini menunjukkan pada lokasi mana suatu gambar bisa dipasang. Saya nggak akan memberikan contoh pemakaian value-nya satu persatu, tetapi akan memberi satu contoh dan selanjutnya terserah anda....

Kita akan coba menggunakan yahoo emotion sebagai background. Kalau belum punya kopi aja dari sini dan simpan gambarnya di d:\Ngeblog\24.gif


Selanjutnya seperti biasa copy atau ketik kode berikut di notepad
<html>
<head>
<style type="text/css">
body
{
background-image:url('d:\Ngeblog\24.gif');
background-repeat:no-repeat;
background-position: center;
}
</style>
</head>

<body>
<p>Posisi gambar background diletakkan diatas tengah-tengah elemen.</p>
</body>
</html>


Simpan dan coba buka dibrowsermu, maka......
Tampilanmu akan tampak seperti ini



Posisi gambar background diletakkan diatas
tengah-tengah elemen.

Ini Contoh background-position: center


Posisi gambar background diletakkan di
tengah-tengah elemen.

Ini Contoh background-position: left top


Posisi gambar background diletakkan dikiri atas elemen.


yang lainnya coba sendiri yah....., ngopi dulu ahh..

Oh yaa, sampai lupa nih... (untung setelah ngopi jadi inget...)
Sebenarnya kita bisa mengatur posisi gambar kita tanpa terpaku pada posisi yang terdapat dalam tabel background-position yang lalu, yaitu dengan menggunakan nilai persentase (%) dan nilai pixels (px). Dengan cara ini kita bisa lebih bebas mengatur posisi gambar kita.

Contoh kode CSS untuk mengatur posisi gambar dengan persentase (%)


<html>
<head>
<style type="text/css">
body
{
background-image: url('d:\Ngeblog\24.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 10% 20%;
}
</style>
</head>

<body>
<p>Gambar diletakkan pada posisi 10% dari lebar elemen, dan 20% dari tingi elemen.</p>
</body>
</html>


Kode diatas akan menempatkan gambar kita pada posisi sejauh 10% lebar elemen dari sebelah kiri dan sejauh 20% tinggi elemen dari sebelah atas elemen.
Dalam Browser akan nampak seperti dibawah ini:



Gambar diletakkan pada posisi 10% dari lebar elemen,
dan 20% dari tingi elemen.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


Contoh kode CSS untuk mengatur posisi gambar dengan pixels (px)


<html>
<head>
<style type="text/css">
body
{
background-image: url('d:\Ngeblog\24.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 150px 30px;
}
</style>
</head>

<body>
<p>Gambar diletakkan pada posisi 150 piksel dari sebelah kiri, dan 30 piksel dari sebelah atas elemen.</p>
</body>
</html>


Kode diatas akan menempatkan gambar kita pada posisi sejauh 150 piksel dari sebelah kiri dan sejauh 30 piksel dari sebelah atas elemen.
Dalam Browser akan nampak seperti dibawah ini:



Gambar diletakkan pada posisi 150 piksel dari sebelah kiri,
dan 30 piksel dari sebelah atas elemen.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


Nah gimana..? Jadi tambah asyik thoooo...
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Background Attachment

Ingin membuat gambar kita tetap kelihatan walaupun layar discroll ? ehh ternyata sangat mudah membuatnya dengan kode css. Nggak usah pusing-pusing , tinggal pakai property background-attachment

Langsung dicoba aja yok...


<html>
<head>
<style type="text/css">
body
{
background-image:
url(d:\Ngeblog\24.gif);
background-repeat:
no-repeat;
background-position: top left;
background-attachment: fixed
}
</style>
</head>

<body>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
</body>

</html>

Posisi gambar kita nantinya akan menetap dipojok kiri atas dan akan menetap disitu walaupun layarnya kita scroll..

Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....

Bila ingin gambarnya menghilang waktu discroll, maka rubah value-nya menjadi background-attachment: scroll , maka gambar akan menghilang jika di scroll.
Nah.. , mudah khan..
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Text

Dengan menggunakan Kode CSS, kita bisa mengatur text halaman html kita dengan mudah. Pengaturan ini meliputi :
1. Color (warna)
  • Text color
  • Text background-color
2. Space (spasi)
  • Spasi antar karakter
  • Spasi antar baris
3. Paragraf
  • Indent
  • Arah Paragraf
  • Align (Perataan Text)
4. Effect (Dekorasi Text)

Baiklah kita akan coba membahasnya satu-persatu,....
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Property Background

Untuk menghemat waktu , kita bisa mendeklarasikan semua property background mulai dari background-color, background-image, background-repeat, background-position dan background-attachment sekaligus. Untuk keperluan ini kita cukup memakai property background saja.

Langsung kita coba aja nya, biar lebih mudah...
Ini contoh kode CSS nya :

<html>
<head>
<style type="text/css">
body
{
background: yellow url('d:\Ngeblog\24.gif')  no-repeat top center fixed ;
}
</style>
</head>

<body>
<p>Atur Property background sekaligus</p>
<p>Atur Property background sekaligus</p>
<p>Atur Property background sekaligus</p>
</body>

</html>


Dengan Kode CSS diatas, berarti kita akan membuat background dengan keadaan:
background-color = yellow
background-image = d:\Ngeblog\24.gif
background-repeat = no-repeat
background-position = top center
background-attachment = fixed

Dalam tampilan browser, Kode Css diatas akan tampak kira-kira seperti ini



Atur Property background sekaligus
Atur Property background sekaligus
Atur Property background sekaligus


Ngapain yaa belajar semua property satu-persatu, kalau akhirnya bisa diatur sekaligus. cape deeeehhh...
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS text color

Kode CSS dapat digunakan untuk mengatur warna text dan warna latar belakang text. Pemilihan warna text bisa dilakukan dengan tiga cara (hampir sama dengan background-color) yaitu :
1. Memasukkan kode RGB-nya.
2. Memasukkan nilai Hexadesimalnya.
3. Memasukkan nama warnanya.

Contoh Kode CSS untuk mengatur Warna


<html>

<head>
<style type="text/css">
h1 {color: rgb(0,0,255)}
h2 {color: #dda0dd}
p {color: red}
</style>
</head>

<body>
<h1>Warna text Header 1 ini di atur dengan menuliskan
kode RGB warna</h1>
<h2>Warna text Header 2 ini di atur dengan menuliskan
nilai desimal warna</h2>
<p>Warna text Paragrap ini di atur dengan menuliskan
nama warnanya </p>
</body>

</html>


Contoh Tampilan kode di atas




Warna text Header 1 ini di
atur dengan menuliskan
kode RGB warna


Warna text Header 2 ini di atur
dengan menuliskan nilai hexadesimal
warna


Warna text Paragrap ini di atur dengan menuliskan
nama warnanya



Sekarang kita akan mencoba membuat warna background untuk text kita. Disini saya akan memberi contoh dengan color name saja, Supaya cepet mahir, yang lainnya coba sendiri yaa.... 

<html>
<style type="text/css">
span.latar
{
background-color: yellow
}
</style>
</head>

<body>
<p>
<span class="latar">Text ini di kasih latar belakang.
</span>
Text yang ini tidak di kasih latar belakang.
</p>
</body>
</html>

Hasilnya akan tampak seperti ini



Text ini di kasih latar belakang. Text yang ini tidak
di kasih latar belakang.
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS text space

Adanya kode CSS memungkinkan kita untuk mengatur jarak spasi antar karakter , spasi antar kata dan spasi antar baris dengan sangat mudah. Kalau kita ingin membuat jarak spasi yang lain daripada yang lain, maka kode CSS menjadi salah satu alternatifnya.
Property yang kita gunakan ialah :
  • letter-spacing ( untuk mengatur spasi antar karakter )
  • line-height ( untuk mengatur spasi antar baris )
  • word-spacing ( untuk mengatur spasi antar kata )
CSS letter-spacing

Property letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti) lihat css unit
Contoh kode CSS untuk mengatur spasi antar karakter:


<html>

<head>
<style type="text/css">
h1 {letter-spacing: -2px}
h3 {letter-spacing: 0.5cm}
</style>
</head>

<body>
<h1>Header 1 menggunakan spasi = -2 piksel </h1>
<h3>Header 3 menggunakan spasi = 0.5 centi meter </h3>
</body>

</html>

Contoh Tampilan:


Header 1 menggunakan spasi = -2
piksel 


Header 3 meng


gunakan spasi =


0.5 centi meter


CSS line-height

Property line-height mempunyai empat nilai (value) yaitu
- normal (default)
- angka ( angka ini akan dikalikan ukuran huruf yang berlaku)
- panjang (memberikan jarak yang pasti) lihat css unit
- % (prosentase dari ukuran huruf yang berlaku)

Contoh kode CSS untuk mengatur spasi antar baris:

<html>

<head>
<style type="text/css">
p.rapet {line-height: 90%}
p.renggang {line-height: 2em}
p.panjang {line-height: 5}
</style>
</head>

<body>
<p>Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
</p>
<p class="rapet">
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
</p>
<p class="renggang">
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
</p>
<p class="panjang">
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
</p>

</body>

</html>

Contoh Tampilan:

Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.



Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.


Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.


Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.


CSS word-spacing

Property letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti) lihat css unit
Contoh kode CSS untuk mengatur spasi antar kata:


<html>

<head>
<style type="text/css">
p
{
word-spacing: 1cm
}
</style>
</head>

<body>
<p>Paragrap ini menggunakan spasi antar kata 1 cm</p>
</body>

</html>

Contoh Tampilan:




Paragrap ini menggunakan spasi antar


kata 1 cm

Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Paragrap

Kita akan coba menggunakan kode CSS untuk mengatur paragrap.
Property yang digunakan untuk mengatur paragrap yaitu :
1. text-indent (Mengatur Indentasi).
2. direction (Mengatur Arah Paragrap).
3. text-align (Mengatur Perataan).
CSS text-indent
Cara penulisan text-indent:
p {text-indent: 1cm}
untuk mengisi nilai (value) dari text-indent lihat pada bagian CSS Units.
Contoh Penggunaan
<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>

<body>
<p>
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
</p>
</body>

</html>

Tampilan pada browser:
Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm. Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.

CSS Direction
Property direction mempunyai 2 macam nilai(value) yaitu:
1. ltr (left to right)
2. rtl (right to left)
Value ltr adalah default, sedang value rtl biasa digunakan kalau kita membuat paragrap dengan arah dari kanan ke kiri, seperti yang digunakan pada tulisan arab.
Cara penulisan direction:
p {direction: rtl}
Contoh paragrap pada text-indent, kalau kita tambahkan property direction:rtl, maka akan tampak pada browser:
Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm. Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.


CSS text-align

CSS dapat mengatur perataan text dengan propperty text-align. Property ini mempunyai 4 macam nilai (value) yaotu:
1. left (Paragrap/Text rata kiri) (default)
2. right (Paragrap rata kanan)
3. center (Paragrap rata tengah)
4. justify (Paragrap rata kiri kanan)
Cara penulisan text-align:
p {text-align: right}
Contoh Penggunaan
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

<body>
<h1>Header 1 rata tengah</h1>
<h2>Header 2 rata kiri</h2>
<h3>Header 3 rata kanan</h3>
</body>

</html>






Header 1 rata tengah


Header 2 rata kiri


Header 3 rata kanan

Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS text-decoration

Sesuai dengan namanya, property text-decoration digunakan untuk mempercantik text halaman HTML kita.
Cara penulisan
p {text-decoration: overline}

Nilai (value) text-decoration ada 5 macam yaitu:
overline              - untuk membuat tulisan dengan dekorasi garis diatasnya
line-through      - untuk membuat tulisan dengan dekorasi garis ditengahnya
underline           - untuk membuat tulisan dengan dekorasi garis bawah
blink                   - untuk membuat tulisan berkedip
none                   - untuk membuat tulisan tanpa dekorasi

Untuk lebih jelasnya kita coba aja yaa



<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<p><a href="http://4gratisfree.blogspot.com/">Sebuah link</a></p>
</body>

</html>

Contoh Tampilan dalam Browser

Header 1 

Header 2

Header 3

Header 4

Sebuah link

Dalam contoh diatas, sebuah link yang biasanya selalu disertai garis bawah bisa kita buat tanpa garis bawah.
Nah.. udah deh, sekarang kita bisa mempercantik halaman HTML kita dengan text-decoration. Tapi bisa juga memperjelek yaa, coba kalau semua tulisan di over-through.....
Property text-transform
Dalam menulis halaman HTML, seringkali kita pengen membuat suatu tulisan dengan huruf besar semua atau dengan huruf kecil semua, tetapi kita sering kali lupa menekan tombol Caps Lock sehingga tulisan kita mesti dihapus dulu baru ditulis ulang sesuai keinginan. Sebenarnya ada suatu property yang memudahkan kita untuk keperluan tersebut yaitu property text-transform.
Dengan property ini kita bisa membuat tulisan dengan huruf Kapital semua, huruf kecil semua atau setiap kata diawali dengan huruf kapital tanpa takut salah ketik. Karena secara otomatis browser akan mengikuti perintah CSS kita sesuai dengan keinginan kita.
Contoh pemakaian text-transform

<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>

<body>
<p class="uppercase">Paragrap ini ditulis dengan huruf kapital</p>

<p class="lowercase">Paragrap ini DITULIS dengan huruf kecil semua</p>

<p class="capitalize">Setiap kata diawali huruf kapital</p>
</body>

</html>

Dalam contoh diatas, ketiga contoh paragrap sengaja ditulis dengan huruf besar dan kecil campur aduk. Kesengajaan ini hanya untuk melihat fungsi text-transform yang sebenarnya.
Tampilan Browser


Paragrap ini ditulis dengan huruf kapital

Paragrap ini DITULIS dengan huruf kecil semua

Setiap kata diawali huruf kapital


Mudah kan !!! :D DALINGGRA
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS font

Dengan menggunakan Property CSS Font kita bisa mengubah jenis huruf, ketebalan, ukuran huruf dan gaya penulisan.
Property yang berhubungan dengan font:
1. font-family
2. font-size
3. font-stretch
4. font-style
5. font-variant
6. font-weight
Nanti kita akan mencoba satu-persatu property tersebut, tapi agak sabar yaa....
Lagi agak sibuk nih...
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS font-family

Property CSS font-family digunakan untuk menentukan jenis huruf yang akan kita pakai dalam halaman HTML kita. 
Cara penulisan :

p {font-family: courier}
Contoh kode CSS untuk menentukan jenis huruf

<html>
<head>
<style type="text/css">
h1 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>

<body>
<h2>Jenis huruf times untuk header 1</h2>
<p>Paragrap dengan huruf courier</p>
<p class="sansserif">Paragrap dengan huruf sansserif</p>
</body>

</html>

Hasil tampilan


Jenis huruf times untuk header 2


Paragrap dengan huruf courier


Paragrap dengan huruf sansserif

Nilai (value) dari property ini berisikan jenis-jenis huruf yang akan kita tentukan.
Selamat mencoba....
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS font-size

Sesuai dengan namanya, Property font-size digunakan untuk menentukan ukuran huruf tulisan halaman HTML kita. Nilai (value) yang bisa diterapkan untuk properti ini ialah:

Value (nilai) Keterangan
xx-small
x-small
small
medium
large
x-large
xx-large
Untuk menentukan ukuran yang berbeda-beda dari yang sangat kecil (xx-small) sampai yang paling besar (xx-large)
Nilai default-nya adalah medium
smaller Membuat ukuran huruf lebih kecil sedikit dari ukuran aslinya
largerMembuat ukuran huruf lebih besar sedikit dari ukuran aslinya
panjangMembuat ukuran huruf dengan besaran tertentu  lihat CSS Unit
% Menentukan ukuran huruf dengan prosentase dari ukuran aslinya

Langsung contoh aja yaa

<html>
<head>
<style type="text/css">
h1 {font-size: 100%}
p.large {font-size: large}
p {font-size: 1cm}
</style>
</head>

<body>
<h1>Header 1 dengan ukuran huruf 100%</h1>
<p class="large">Paragrap dengan ukuran huruf large</p>
<p>Paragrap dengan ukuran huruf 1cm</p>
</body>

</html>

Pada contoh kode diatas, Ukuran huruf Header 1 diset 100%, ini berarti sebesar huruf normal pada paragrap. Bedanya hanya pada ketebalannya saja.
Hasil kode diatas



Header 1 dengan ukuran huruf 100%


Paragrap dengan ukuran huruf large


Paragrap dengan
ukuran huruf 1cm

biar cepet mahir, value yang lainnya harap dicoba sendiri... XxXxXx
sorry yaa, cuman cari alasan aja...   padahal sih lagi rada males..
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS font-style

Setelah beberapa waktu agak repot, akhirnya sempet juga nerusin CSS...
Sekarang langsung aja yahh ke font-style...
Properti CSS font-style digunakan untuk memformat bentuk huruf sesuai dengan kebutuhan kita, tapi sayangnya hanya ada 3 nilai (value) untuk properti ini yaitu:
- normal : default
- italic : miring
- oblique : miring juga (saya coba ga ada bedanya dengan italic.... ga tahu deh bedanya apa... )

Biarin dehh ntar kalo sempet kita cari sama-sama perbedaannya, sekarang langsung kita coba aja yaa...(jangan lupa siapin notepad dan browser kamu)

<html>
<head>
<style type="text/css">
/*kita coba ketiga valuenya sekaligus*/
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>

<body>
<h1>Header 1 dengan huruf italic</h1>
<h2>Header 2 dengan huruf normal</h2>
<p>Paragrap dengan huruf oblique</p>
</body>

</html>

Tampilan Browsernya :






Header 1 dengan huruf italic


Header 2 dengan huruf normal


Paragrap dengan bentuk huruf oblique



Sayang yaa.. value nya cuman 3 macam , coba kalau banyak khan tambah asyik jadinya....
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS font-weight

Properti font-weight gunakan untuk mengatur seberapa tebal atau tipis suatu huruf akan ditampilkan.
Kalau dalam Word kita hanya mengenal mode normal dan bold saja, Maka disini kita bisa mengatur ketebalan huruf dengan variasi yang lebih banyak.

Sintaks penulisan CSS font-weight

p {font-weight: bold}

Nilai (value) yang bisa dipakai untuk font-weight :




Value Keterangan
normal Default, biasa aja
bold Tebal
bolderLebih tebal dari bold
lighterLebih tipis dari normal
100
200
300
400
500
600
700
800
900		 Mengatur ketebalan huruf dengan dari tipis sekali sampai tebal banget..., ukuran normal=400 dan bold=700

Contoh :

<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.tipis {font-weight: lighter}
p.tebel {font-weight: bold}
p.tebelan {font-weight: 900}
</style>
</head>

<body>
<p class="normal">Paragraph normal</p>

<p class="tipis">Paragraph tipis</p>

<p class="tebel">Paragraph tebel</p>

<p class="tebelan">Paragraph lebih tebel</p>
</body>

</html>


Tampilan browser:


Paragraph normal


Paragraph tipis


Paragraph tebel


Paragraph lebih tebel



Value yang lainnya coba sendiri aja yaa..., biar cepet mahir...
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS font-variant

Properti font-variant digunakan untuk membuat/memformat suatu text menjadi huruf kapital semua tetapi dengan ukuran sedikit lebih kecil dari ukuran huruf kapital yang normal.
Dari pada susah-susah ngebayanginnya, lebih baik kita praktekin aja langsung..


<html>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">PARAGRAPH DENGAN HURUF KAPITAL</p>
<p class="small">paragraph dengan font variant small-caps</p>
</body>

</html>

Tampilan di browser :



PARAGRAPH DENGAN HURUF KAPITAL


paragraph dengan font variant small-cap


karena font-variant ngga punya value lain, contohnya cukup satu aja yaaaaa... :D
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Border

Kita bisa menggunakan kode CSS untuk membuat bingkai atau border suatu elemen halaman html. Properti yang digunakan untuk keperluan ini ialah border
sintaks penulisan:

p
{
border: double
}


Sintaks diatas digunakan untuk membuat border dengan garis double dengan warna hitam (default).
Sebenarnya properti border ini bisa digunakan untuk mengatur lebar garis, style (bentuk) garis dan warna garis border sekaligus.
Properti border mempunyai tiga macam Value (nilai) yaitu:
1. border-width - mengatur lebar garis
2. border-style - mengatur bentuk garis
3. border-color - mengatur warna garis

Sintaks dengan tiga value sekaligus:


p
{
border: medium solid red
}

Susunan ketiga value tersebut bisa dibolak balik ( kayak ngegoreng pisang aja... )

Value untuk border-width



Value Keterangan
thin tipis
medium menengah
thick tebal
length lihat CSS unit


Value untuk border-style



Value Keterangan
none tanpa border
hidden border di sembunyikan
dotted titik-titik
dashed garis putus-putus
solid garis tebal
double garis double
groove berlekuk
ridge bergelombang
inset tebal pada bagian atas dan samping kiri
outset tebal pada bagian bawah dan samping kanan


Value untuk border-color



Value Keterangan
color masukkan warna sesuai kode atau namanya
lihat kembal cara memasukkan warna pada background-color

Contoh properti border:

<html>
<head>
<style type="text/css">
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>

<body>
<p>Contoh border: width=medium,style=double,color=rgb(250,0,255)</p>
</body>

</html>


Contoh tampilan

Contoh border: width=medium,style=double,color=rgb(250,0,255)


Contoh Tampilan beberapa jenis border:


Border = thin dotted red


Border = thin dotted red


Border = thick solid green


Border = 3pk double green


Border = medium groove blue


Border = medium ridge blue


Border = thick inset black


Border = thick outset blue



Silakan Pilih - Silakan Pilih....(kaya dagangan aja...)
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Outline

Properti ini digunakan untuk membuat garis untuk mengelilingi sebuah elemen. Kalau dibarengi dengan border, maka outline ini akan terletak diluar garis border.
Sayangnya properti outline tidak bisa ditampilkan dalam browser IE.
bagi pemakai IE boleh tidur dulu....
Sintak dan Contoh pemakaian :
Seperti halnya border, outline mempunya tiga macam value (outline-width, outline-style dan outline-color) yang bisa deklarasikan sekaligus.

p
{
border: medium solid red
}


Contohnya borongan aja yaa (kasihan fans IE kelamaan nunggunya..)

<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline</p>

<p class="ridge">A ridge outline</p>

<p class="inset">An inset outline</p>

<p class="outset">An outset outline</p>
</body>
</html>
Sorry yaa, contohnya hanya outline-style aja..., outline-width dan outline-color nya bisa dicoba sendiri..

Tampilan:


A dotted outline


A dashed outline


A solid outline


A double outline


A groove outline


A ridge outline


An inset outline


An outset outline



Dah..cukup dulu yaa, pemakai IE jangan heran kalau outline nya kagak kelihatan, bukannya mata anda yang error tapi emang IE yang pelit kaga mau nampilin... Untuk Opera ada beberapa jenis outline yang ditampilin sama...
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Margin

Properti ini (margin) digunakan untuk membuat ruang kosong disekeliling elemen.
Dengan properti margin, kita bisa mengatur sekaligus empat sisi dari sebuah elemen. CSS juga menyediakan properti tersendiri bila kita ingin mengatur masing-masing sisi yaitu:
margin-topmargin-right
margin-bottom
margin-left
Keempat properti diatas, adalah merupakan nilai dari properti margin
sintaks :

p.margin {margin: 2cm 4cm 3cm 4cm}

value (nilai) properti margin terdiri dari 3 macam yaitu :






Value Keterangan
autobrowser akan mengesetnya secara otomatis
length lihat kembali CSS Units
%mendefinisikan margin dalam % dari total lebar atau tinggi dokumen
(left, right : % dari total lebar dokumen)
(top, bottom : % dari total tinggi dokumen)

Contoh CSS margin

<html>
<head>
<style type="text/css">
p.margin {margin: 4cm 2cm 3cm 1cm}
</head>
<body>
<p>Paragraph dengan margin tidak ditentukan</p>
<p class="margin">Paragraph dengan margin yang ditentukan</p>
<p>Paragraph dengan margin tidak ditentukan</p>
</body>

</html>


Tampilan:

Paragraph dengan margin tidak ditentukan



Paragraph dengan margin yang ditentukan

Paragraph dengan margin tidak ditentukan


Value yang lainnya bisa dicoba sendiri...
Sorry agak pelit nih...
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

CSS Padding

Sebuah properti yang digunakan untuk membuat ruang kosong diantara border dan isi elemen.
Padding masing-masing sisi (atas, kanan, bawah, kiri) bisa diatur sendiri secara terpisah, bisa juga diatur sekaligus. Properti padding mempunyai dua value yaitu:
Value Keterangan
%Mendefinisikan padding dalam % dari isi elemen
length Mendefinisikan padding dengan nilai yang tertentu (pixels, pt, em, dll.)
lihat CSS unit


Contoh

<html>
<head>
<style type="text/css">
td.test1 {padding:15%}
td.test2 {padding:0.5cm 2.5cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td class="test1">
Sebuah Sel Tabel dengan padding 15% untuk semua sisi.
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
Sebuah Sel Tabel dengan padding atas dan bawah=0.5cm , kanan dan kiri= 2.5cm.
</td>
</tr>
</table>
</body>

</html>
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

VCC GRATIS 100%

  Virtual Credit Card atau VCC adalah kartu kredit yang tidak memiliki fisik kartu dan hanya memiliki 16 digit nomor kartu, expire date dan nomor CVV.

   Bila anda saat ini memiliki rekening PayPal yang belum terverifikasi, Anda bisa menggunakan VCC ini untuk memverifikasi akun PayPal tersebut, Hanya dengan USD $3 sudah cukup untuk proses verifikasi PayPal.

manfaat akun PayPal yang berstatus “verified” adalah:

1. Anda dapat mengirimkan uang dalam jumlah yang tak terbatas jika status Anda adalah terverifikasi, namun transfer dana Anda akan terbatas jika masih berstatus belum terverifikasi.

2. Anda dapat melakukan withdraw PayPal jika sudah terverifikasi. Dengan kata lain, Anda tidak dapat melakukan withdraw jika akun Anda masih berstatus “unverified”.

   Cara mendapatkannya cukup mudah dan tentunya gratis:
1. Menuju situsnya
2. Isi kolom pendaftaran
3. Verifikasi akunnya
4. Anda sudah memiliki VCC sendiri

""Untuk sementara saya tutup dulu,, dikarenakan ada beberapa laporan dari temen, kalau sekarang untuk Verifykasi akun VCCnya agak susah, karena adanya kebijakan baru dari situs tersebut,, Sambil mencari informasi lain siapa tau nanti ada yg lebih mudah""

Nih ada beberapa alternatif untuk memVerifikasi akun PayPal bagi yg tidak punya kartu credit:
1. Beli VCC
   Sudah banyak yg jual murah, sedikit saran saja harus pinter pilih negara

2. Daftar payoneer
   Daftar Verifikasi akunnya + dapat kartu debit gratis tapi tetep untuk verify paypal harus ada dana $3
Bisa baca DISINI

3. Daftar Neteller
   Kekurangannya karena adanya kebijakan baru, untuk verifikasi akunnya + kartu debit kita harus depo dulu
Bisa baca DISINI


Note:
PENTING untuk payoneer dan neteller akunnya harus sudah terverifikasi supaya bisa di gunakan untuk memverifikasi PayPal
Untuk pertanyaan lebih lanjut bisa INBOX ke akun Facebook saya DISINI

Baca juga :
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Trik Internet Gratis PC All Operator


Agan suka internetan via komputer atau laptop dan kesal dengan mahalnya biaya tarif internet kartu GSM dan CDMA. Tidak perlu khawatir boz, ada trik gretongan via pc yang dijamin full gratis tanpa malak. Sikat langsung caranya mumpung masih lancar dan anti lemot.


Trik Internet Gratis Telkomsel PC Juli 2013 [hot]
koleksi telkomsel inject + direct
telkomsel ssh
erot flash

Trik Internet Gratis 3Tri PC Juli 2013 [hot]
koleksi tri inject + direct
3aon ssh

Trik Internet Gratis Indosat PC Juli 2013 [hot]
koleksi indosat inject + direct
isat ssh

Trik Internet Gratis Axis PC Juli 2013

Trik Internet Gratis XL PC Juli 2013 [hot]
koleksi xl inject + direct
xl ssh

Trik Internet Gratis Smart Fren PC Juli 2013 [hot]
koleksi smart inject
smart ssh

Trik Internet Gratis Flexy PC Juli 2013

beDa Lubang beDa kenikmaTan
Konfigurasi terakhir diupdate dan dicek tanggal awal juli 2013, dan yang masih sukses di tempat ane trik untuk kartu telkomsel, indosat, 3aon, xl, dan smart. Lainnya mesnyusul gan.





Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

TRIK GRATIS SMARTFREN

Kali ini saya akan berbagi trik tentang Trik Internet Gratis Smartfren Juni 2013. Apa kabar netter semua. Awal pergantian bulan Mei ke bulan Juni 2013 sekarang ini, membuka kembali moment bagi para pengguna modem Smartfren, sebagaimana moment rutin yang biasa terjadi pada tiap pergantian bulan di bulan-bulan sebelumnya. Pasti anda bertanya-tanya, moment apa yang dimaksud di sini? Moment yang dimaksud, tentu saja tentang aktifitas serentak dimana para pengguna modem Smartfren sibuk mencari informasi mengenai trik internet gratis Smartfren Juni 2013. Dan saya yakin anda merupakan salah satu dari mereka, bukan. Hehe. Supaya tidak penasaran, mari langsung saja kita simak triknya di bawah ini!
smartfren
smartfren gratis

Berikut Trik Internet Gratis Smartfren Juni 2013 :


Trik internet Smartfren gratis Juni 2013 yang paling populer, yaitu seting pengaturan modem dengan Dial-up Number menggunakan #700 atau *99#. Anda bisa coba keduanya untuk menemukan setingan paling ideal pada modem Smartfren Anda. Kemudian, gunakan salah satu Username dari “wap”, “cdma”, atau “smart”. Silahkan terapkan masing-masing Username secara bergantian, untuk menemukan setingan paling tepat dan stabil. Sementara untuk Password, silahkan isi sesuai Username yang digunakan.

Jika sudah, lanjutkan dengan mengatur setingan ISPCE. Silahkan isi Front Query atau FQ dengan m.free.diooda.co.id. Kemudian, checklist “set proxy”, dan masukkan kolom set proxy dengan: 106.174.221.211 atau bisa juga menggunakan 154.220.132.214. Sedangkan pada kolom Port, masukkan salah satu dari “80”, “8080”, “8585”, atau “8000”.

Apabila setingan di atas sudah diterapkan semua, silahkan simpan setelan. Selanjutnya, masuk ke settingan proxy browser Anda. Ubah Proxy Address menjadi: 116.15.23.5 dan Port: 8088. Kemudian save setingan. Langkah terakhir, aktifkan koneksi Smartfren Anda dan selamat berinternet-ria.

Selain trik internet gratis Smartfren Mei 2013 di atas, terdapat juga trik yang lebih sederhana untuk diterapkan, yaitu:

Masuk ke setingan modem Anda. Lalu, checklist perintah “Use the Following DNS Server”. Kemudian, pada kolom Primary DNS, silahkan isi dengan angka: 8.8.8.8 atau bisa juga menggunakan 208.67.222.222. Sementara pada kolom Secondary DNS, bisa Anda isi dengan 8.8.4.4 atau 208.67.220.220. Semua DNS yang digunakan tersebut bukan DNS milik Smartfren, melainkan diambil dari DNS Google. Selanjutnya, simpan semua setelan. Dan silahkan berinternet sepuasnya dengan browser kesayangan Anda.

Sekian info dari saya tentang Trik Internet Gratis Smartfren Juni 2013, semoga bermanfaat untuk anda.
Lanjut Baca »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
0 Comments

Bitcoin gratis Free bitcoin | Macul bitcoin | Free PSD Graphics