Javascript Operator

Hai sobat sky . . .
Kali ini  judul materi kita yaitu "Javascript Operator", dimana ini adalah postingan ke - 4 dari 18 postingan dibawah ini:

1. Pengenalan Javascript dan Bagaimana Cara Kerja Javacript


2. Javascript Statement


3. Javascript Comment dan Variable



4. Javascript Operator



5. If...Else Statement Javascript


6. Perintah Switch Javascript


7. POP-UP BOXES Javascript


8. Fungsi Pada Javascript


9. Break dan Continue Javascript


10. Event Javascript


11. Javascript Try...Catch Statement


12. Javascript String


13. Javascript Object Date


14. Javascript Array


15. Javascript Print dan Length Javascript


16. Javascript Redirect


17. Form Validasi Pada Javascript


18. Javascript JSON

Operator digunakan untuk menghubungkan beberapah variable dan nilai variable. Operator dalam javascript terbagi dalam beberapah kategori berikut:

Operator Aritmatika

Operator Aritmatika pada javascript digunakan untuk menunjukkan aritmatikan antara variable and/or.

Misalnya y=10

Operator	Arti	Contoh	Hasil
+	Penjumlahan	X=y+5	X=5
-	Pengurangan	X=y-5	X=5
*	Perkalian	X=y*5	X=50
/	Pembagian	X=y/5	X=2
%	Sisa Pembagian	X=y%3	X=1
++	Increment	X=y++	X=11
--	Descrement	X=y--	X=9

Operator Pengealokasian (Assigment)

Operator ini digunakan untuk mengalokasikan nilai kedalam variable javascript.

Misalnya x=15 dan y=5

Operator	Arti	Contoh	Hasil
=	X=y	X=y	X=5
+=	X+=y	X=x+y	X=20
-=	X-=y	X=x-y	X=10
*=	X*=y	X=x*y	X=75
/=	X/=y	X=x/y	X=3
%=	X%=y	X=x%y	X=0

Operator tersebut dapat juga digunakan pada variable string atau kalimat.

Misalnya :
kata1=Belajar
kata2=Javascript
kata3=kata1+kata2

Maka kata3 akan berisi BelajarJavascript

Apabila kita menginginkan adanya spasi maka kita bisa lakukan seperti dibawah ini:
kata3=kata1+" "+kata2

Maka kata3 akan beriskan Belajar Javascript

Operator juga dapat menghubungkan variable string dengan angka
Misalnya :
x=5+5
maka x = 10
x=5+"5"
maka x = 55

Operator Perbandingan ( Comparasi )

Operator ini digunakan pada pernyataan logika untuk menentukan persamaan atau perbedaan antara variable atau nilai

Contoh x = 10

Operator	Arti	Contoh
= =	Sama dengan	X = =5 bernilai salah
= =  =	Benar - benar sama dengan	X = =  =10 bernilai benar, x "10" bernilai salah
!=	Tidak sama dengan	X!=7 bernilai benar
>	Lebih besar dari	x>6 bernilai benar
<	Lebih kecil dari	X<9 bernilai salah
>=	Lebih besar atau sama dengan	x>=11 bernilai salah
<=	Lebih kecil atau sama dengan	X<-10 bernilai benar

Operator Logika

Operator Logika digunakan untuk menentukan logika antara variable atau nilai

Contoh x=6 dan y=3

Operator	Arti	Contoh
&&	Dan	(x < 10&& > 1) bernilai benar
||	Atau	(x= =5 || y= =5) bernilai salah
!	Negasi atau lawan	!(x= =y) is true

Operator Kodisional

Bentuk umum dari operator kondisional adalah sebagai berikut :
variablename=(condition) ?value1:value2;

Operator lain yang sudah saya jelaskan diatas dapat digunakan untuk memberikan kodisi pada pernyataan bersyarat

Contoh
panggil=(sex= ="Pria") ?"Bapak":"Papa";

Ketika ada variable yang bernilai Pria, maka variable panggil akan bernilai Bapak. Selain itu variable panggil akan bernilai Papa

Okey, saya rasa cukup materi kita kali ini.
Materi kita berikutnya adalah "If...Else Statement Javascript"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

Javascript Comment dan Variable

Hai sobat sky . . .
Gimana kabarnya ni ??? pastinya baik" sajakan . . .
Okey, kali ini judul postingan saya adalah "Javascript Comment dan Variable" dimana ini adalah postingan ke-3 dari 18 postingan dibawah ini :

1. Pengenalan Javascript dan Bagaimana Cara Kerja Javacript


2. Javascript Statement



3. Javascript Comment dan Variable



4. Javascript Operator


5. If...Else Statement Javascript


6. Perintah Switch Javascript


7. POP-UP BOXES Javascript


8. Fungsi Pada Javascript


9. Break dan Continue Javascript


10. Event Javascript


11. Javascript Try...Catch Statement


12. Javascript String


13. Javascript Object Date


14. Javascript Array


15. Javascript Print dan Length Javascript


16. Javascript Redirect


17. Form Validasi Pada Javascript


18. Javascript JSON

Javascript Comment

Javascript Comment atau komentar dapat digunakan untuk membuat kode lebih muda dibaca.
Sama seperti bahasa pemograman lainya, javascript juga menyediakan fasilitas untuk menuliskan komentar. Komentar tidak akan muncul ketika program dijalankan diweb browser, tetapi akan muncul ketika kita mengeditnya.
Pemberian komentar di javascript mirip dengan yang ada pada PHP. Komentar dapat dilakukan dengan 2 cara yaitu:

1. Dengan menuliskan komentar setelah tanda garis miring dua kali
   Seperti contoh berikut ini:
   
   

   <script type="text/javascript"> // Write a heading documen.write("<h1>Ini adalah heading</h1>"); // Write two paragraf document.write("<p>Ini paragraf 1</p>"); document.write("<p>Ini paragraf 2</p>"); </script>




2. Dengan multi line comment yang dimulai dengan tanda /* dan diakhiri dengan tanda */
   Seperti contoh berikut ini:
   
   

   <script type="text/javascript">  /* Buat sebuah heading dan dua paragraf */ documen.write("<h1>Ini adalah heading</h1>"); document.write("<p>Ini paragraf 1</p>"); document.write("<p>Ini paragraf 2</p>"); </script>

Perbedaan antara // dan /*...*/

//	Hanya berlaku pada baris itu saja
/*...*/	Berlaku sebagai komentar selama belum ditutup dengan tanda */

Javascript Variable

Variable didefinisikan sebagai tempat kita menyimpan suatu nilai - nilai atau informasi - informasi pada javascript.
Dalam javascript suatu variable bersifat opsional yang berarti variable boleh dideklarasikan atau tidak dideklarasikan, dan variable javascript bisa bernilai apa saja.

Ada beberapa aturan dalam penulisan javascript, yaitu :

• Harus diawali dengan karakter (huruf atau baris bawah)


• Tidak boleh menggunakan spasi


• Huruf kapital dan kecil memiliki arti yang berbeda


• Tidak boleh menggunakan kata - kata yang merupakan perintah dalam javascript

Contoh mendeklarasikan variable :

var x; var carname;

Setelah dideklarasikan, variable diatas masih kosong (tidak memiliki nilai). Kita juga bisa langsung mengisinya dengan menetapkan nilai variable ketika kita mendeklarasikan mereka, seperti contoh berikut :

var x=5; var carname="Lamborgini"

Setelah pertnyataan diatas dieksekusi, variable x akana mempunyai nilai 5, dan carname mempunyai "Lamborgini"

Javascript mempunyai tipe data implisit yaitu :

• Numerik, seperti 123456, 2013, 0.2454


• String, seperti "Test", "javascript", "Replace ID"


• Boolean, bernilai false atau true, contoh: var x = ( y >100 )


• Null, variable yang tidak didefinisikan atau diinisilisasi

Okey, saya rasa cukup materi kita kali ini.
Materi kita berikutnya adalah "Javascript Operator"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

Javascript Statement

Hai sobat sky . . .
Udah lama ni ngak ngeblog . . . jadi rindu ni. . .
Kali ini judul postingan saya adalah "Javascript Statement" dimana ini adalah postingan Ke-2 dari 18 postingan dibawah ini :

1. Pengenalan Javascript dan Bagaimana Cara Kerja Javacript



2. Javascript Statement



3. Javascript Comment dan Variable


4. Javascript Operator


5. If...Else Statement Javascript


6. Perintah Switch Javascript


7. POP-UP BOXES Javascript


8. Fungsi Pada Javascript


9. Break dan Continue Javascript


10. Event Javascript


11. Javascript Try...Catch Statement


12. Javascript String


13. Javascript Object Date


14. Javascript Array


15. Javascript Print dan Length Javascript


16. Javascript Redirect


17. Form Validasi Pada Javascript


18. Javascript JSON

Dalam dunia pemograman, statement adalah pernyataan yang dituliskan berupa kode - kode yang dikenal oleh komputer sesuai bahasa pemograman yang bersangkutan agar dapat dieksekusi dengan benar oleh system.
Tidak seperti HTML, Penulisan Javascript ini bersifat case-sensitive yang artinya huruf BESAR/CAPITAL berbeda dengan huruf kecil/lowercase, jadi disarankan anda agar lebih berhati - hati dalam penulisan command, variable, objeck, dan fungsi.

Berikut adalah contoh javascript statement, penulisan "Belajar Javscript" pada sebuah web.

document.write("Belajar Javascript");

Anda boleh menambahkan titik koma(;) tiap akhir statement, dan kebanyakan orang berfikir bahwa itu adalah baik padahal sebenarnya "titik koma" adalah optional.
Kenapa kebanyakan programer menggunakan "titik koma" ???
Salah satunya adalah karena menggunakan "titik koma" memungkinkan untuk menulis beberapah laporan pada satu baris.

Kode Javascript

Kode Javascript adalah urutan dari yang nantinya akan dieksekusi oleh browser sesuai dengan urutan yang ditulis.

Perhatikan contoh dengan penulisan judul dan 2 paragraf :
 

<script type="text/javascript"> document.write("<h1>Ini Judul</h1>"); document.write("<p>Ini Paragraf 1</p>") ; document.write("<p>Ini Paragraf ke-2</p>"); </script>

Javascript Block

Seperti halnya CSS, javascript statement juga dikelompokkan dalam beberapah block. Block dimulai dengan kurung kurawal kiri"{" dana diakhiri dengan kurung kurawal kanan "}".
Tujuan dibuat block agar urutan oengeksekusian dilakukan secara bersamaan. seperti contoh dibawah ini, penulisan judul dan 2 paragraf :

<script type="text/javascript"> { document.write("<h1>Ini Judul</h1>"); document.write("<p>Ini Paragraf 1</p>"); document.write("<p>Ini Paragraf ke-2</p>"); } </script>

Statement diatas hanya menunjukkan penggunaan block, biasanya statement block digunakan untuk kelompok statement dalam sebuah fungsi (function) dan kondisi (condition) dimana sekelompok statement itu harus dieksekusi.

Okey, saya rasa cukup materi kita kali ini.
Materi kita selanjutnya adalah "Javascript Comment dan Variable"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

Pengenalan Javascript dan Bagaimana Cara Kerja Javascript

Hai sobat sky . . .
udah hampir seminggu ngak ngeblog.
kali ini saya ingin mengenalkan "JAVASCRIPT" dimana saya akan memberikan pengenalan mulai dari :

1. Pengenalan Javascript dan Bagaimana Cara Kerja Javacript


2. Javascript Statement


3. Javascript Comment dan Variable


4. Javascript Operator


5. If...Else Statement Javascript


6. Perintah Switch Javascript


7. POP-UP BOXES Javascript


8. Fungsi Pada Javascript


9. Break dan Continue Javascript


10. Event Javascript


11. Javascript Try...Catch Statement


12. Javascript String


13. Javascript Object Date


14. Javascript Array


15. Javascript Print dan Length Javascript


16. Javascript Redirect


17. Form Validasi Pada Javascript


18. Javascript JSON

Pengenalan Javascript

Javascript adalah bahasa pemograman yang membuat web lebih dinamis dan interaktif. Javasccript terintegrasi langsung dengan HTML.
Kode Javascript biasanya dituliskan dalam bentuk fungsi yang ditaruh ditad <head>yang dibuka dengan tag <script type="texs/javacript">.
lebih jelasnya lihat table berikut :

<script type="text/javascript"> alert("Halo Dunia!"); </script>

Kode javscript juga bisa ditaruh difile tersendiri yang bereksensi .js (singkatan dari javascript). Untuk membuka kode javascript yang terdapat pada file yang tersendiri, dibagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut ini :

<script type="text/javascript" src="alamat.js"></script>

Bagaimana Cara Kerja Javacript

Berbeda dengan PHP yang merupakan pemograman server side, javascript merupakan pemograman client side

Untuk membuktikannya sangat simple, coba buka source code sebuah website yang memiliki kode PHP dan JAVACRIPT, anda tidak akan menemukan kode PHP dalam kode sumber manapun, tapi kemungkinan besar anda akan menemukan JAVASCRIPT seperti halnya kode HTML.
Itu  karena JAVASCRIPT dijalankan di client (dalam hal ini browser sebagai client), sedangkan PHP dijalankan di server.

Script Javascript akan dikirimkan bersamaan dengan kode HTML dan dijalankan oleh BROWSER.
Mari kita lihat cara menyisipkan kode javascript kedalam sebuah file HTML.

Script Pada <head>

Script ini akan dieksekusi saat dipanggil (biasa berbentuk fungtion) atau dipanggil berdasarkan trigger pada event tertentu.
Peletakan script di <head> akan menjamin script di-load terlebih dahulu sebelum digunakan (dipanggil)

<html> <head> <script type="text/javascript"> ........ </script> </head> </html>

Script Pada <body>

Script ini dieksekusi setelah halaman di-load sampai dibagian <body> ketika menenpatkan script pada bagian <body>, berarti antara isi dan javascript dijadikan satu bagian.

<html> <head> </head> <body> <script type="text/javascript"> .......... </script> </body> </html>

Okey untuk pengenalan javascript dan cara kerjanya saya rasa cukup.
Kita akan melanjutkan pada postingan berikut yaitu "Javascript Statement"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

CSS div dan CSS span

Hai sobat sky . . .
Kali ini judul potingan saya adalah "CSS <div> dan CSS <span>", dimana postigan ini adalah lanjutan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING


12. CSS GROUPING dan NESTING


13. CSS DIMENSION, DISPLAY dan VISIBILITY


14. CSS POSITIONING dan FLOATING


15. CSS ALIGN


16. NAVIGASI CSS

CSS <div>

Tag <div> mambagi brbrrapah konten kedalama beberapah bagian. setiap bagian dapat memiliki style atau format sendiri - sendiri sesuai spersifikasi yang dapat kita lakukan pada CSS. Tag <div> dapat dibayangkan sebagai kontainer (wadah) besar untuk diterapkan pada suatu blok tertentu. wadah besar ini akan kita batasi diawal menggunakan tag <div> dan akhir dengan </div>, browser akan selaluh menambah baris kosong (line feed).

Contoh kode pendefinisian huruf menggunakan CSS:

<style> .hurufbesarhijau { color: #00FF00; font-family: arial; font-size: 20px; } </style>

Kemudian kita bisa menerpkan pendefinisian CSS tersebut menggunakan tag <div> seperti ini :

<div class="hurufbesarhijau"> semua teks dalam sini akan sesuai dengan pendefinisian CSS diatas </div>

Jika kedua potongan kode tersebut digabungkan maka akan tempil seperti gambar dibawah ini :

Ini kode gabungannya

<style> .hurufbesarshijau{ color: #00FF00; font-family: arial; font-size: 20pt } </style> <div class="hurufbesarhijau"> Semua text dalam sini akan sesuai dengan pendefinisian CSS diatas </div>

CSS <span>

Secara fungsi span hampir mirip dengan div. keduanya berfungsi untuk mebagi konten menjadi beberapa bagian yang memiliki stylenya sendiri - sendiri. Perbedaannya adalah span kita gunakan untuk membuat bagian yang lebih kecil daripada div. Selain itu, tidak ada penembahan baris kosong setelah baris penutup

Sebagai contoh :

<style> .hurufspan { color: #0066FF; font-family: arial; font-style: 15pt; } </style>

Kemudian kita terapkan kode HTML menggunakan span seperti contoh dibawah ini :

Span bisa diterapkan pada <span class="hurufspan">sebagian kecil paragraf</span>

Maka keduanya akan menampilkan hasil seperti ini :

Ini adalah kode gabunganya :

<style> .hurufspan { color: #0066FF; font-family: arial; font-size: 15pt; } </style> Span bisa diterapkan pada <span class="hurufspan">sebagian kecil paragraf</span>

Gimana ?
Mudah bukan ?

Saya rasa sampai disini dulu materi tentang "CSS DIV dan CSS SPAN"


Sampai jumpa di materi berikutnya . . .

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

NAVIGASI CSS

Hai sobat sky . . .
Kali ini judul postingan saya adalah "NAVIGASI CSS", dimana postingan ini adalah lanjutan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING


12. CSS GROUPING dan NESTING


13. CSS DIMENSION, DISPLAY dan VISIBILITY


14. CSS POSITIONING dan FLOATING


15. CSS ALIGN

Dengan kode CSS kita dapat mengubah menu yang tidak enak dilihat menjadi tampilan yang menarik dan keren. Navigasi membutuhkan standar HTML sebagai dasarnya. Dibawah ini saya akan contohkan membuat navigasi dengan menggunakan HTML standar.

List navigasi bisa berupah link, jadi pada umumnya kita akan menggunakan tag <ul> dan <li>

<ul> <li><a href="http://skylexzone23.blogspot.com/">HOME</a></li> <li><a href="http://skylexzone23.blogspot.com/search/label/CSS">CSS</a></li> <li><a href="http://skylexzone23.blogspot.com/about">About</a></li> <li><a href="taruh-link-kamu-disini"></a>Judul Kamu</li> </ul>

Hasilnya seperti dibawah ini :

 

Sekarang hilangkan tanda lingkaran, margin dan padding sehingga kode lengkapnya menjadi :

<style> ul { list-style-type:none; margin:0; paddding:0; } </style> <ul> <li><a href="http://skylexzone23.blogspot.com/">HOME</a></li> <li><a href="http://skylexzone23.blogspot.com/search/label/CSS">CSS</a></li> <li><a href="http://skylexzone23.blogspot.com/about">About</a></li> <li><a href="taruh-link-kamu-disini"></a>Judul Kamu</li> </ul>

Maka hasilnya akan seperti berikut ini :

Coba lihat perbandingannya . . .
Jelas bukan ???
Kode dalam contoh diatas merupakan kode standar yang digunakan untuk navigasi vertika dan navigasi horozontal.
Okey, kita akanmembahasnya satu persatu.

Navigasi Vertikal

Selain kode standar diatas, untuk membuat navigasi vertikal, biasanya memerlukan elemen a.
Contoh :

a { display:block; width:60px; }

Navigasi Horizontal

Masih berlanjut dengan kode standar diatas, navigasi horizontal menggunakan inline atau float.
Contoh :

li { display:inline; }

Maka hasilnya sebagai berikut :

Contoh dengan float :

Gimana ?
Mudah bukan ?
Kurang lebih seperti itu untuk menentukan navigasi bar. Kalau anda kreatif banyak sekali modifikasi - modifikasi agar tampilan navigasi kita menjadi keren seperti bermain dengan warna, font dll
Okey, sampai disini dulu maeteri singkat dari saya, dan materi kita selanjutnya adalah "CSS <div> dan CSS <span>".

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

CSS ALIGN

Hai sobat sky . . .
kali ini judul postingan saya mengenai "CSS ALIGN", dimana ini adalah lanjutan postingan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING


12. CSS GROUPING dan NESTING


13. CSS DIMENSION, DISPLAY dan VISIBILITY


14. CSS POSITIONING dan FLOATING

Materi belajar CSS kali ini adalah tentang property CSS ALIGN. Yang akan kita bahas adalah horizontal align. Didalam CSS beberapah property menggunakan elemen align horizontan.
Fungsi align itu sendiri adalah untuk membuat perataan.

Elemen Align Block

Elemen block merupakan elemen yang mengambil keseluruhan lebar yang tersedia, dan memiliki satu baris sebelum dan sesuadahnya.

Contoh dari block elemen adalah:

<h1> <p> <div>

Center Align Menggunakan Property Margin

Block elemen dapat dijadikan aign dengan mengarur kiri kanan margin menggunakan "auto".
Dengan catatan margin align tidak dapat bekerja saati menggunakan browser IE, kecuali mengikuti deklarasi !DOCTYPE.

Mengatur margin kiri dan kanan ke auto berarti bahwa mereka membagi sama margin yang tersedia secara otomatis.

Berikut Contoh Kodenya :

.center { margin-left:auto; margin-right:auto; top:70px; background-color:#b0e0e6; }

Align Left dan Right Menggunakan Property Position

Salah satu motode menggunakan absoluter position.

.right { position:absolute; right:0px; width:300px; background-color:b0e0e6; }

Align Left dan Right Menggunakan Property Float

Salah satu metode align menggunakan property float, kodenya :

.right { floatt:right; width:300px; background-color:#b0e0e6;  }

Okey, kita sudah membahas metode - metode dalam mengatur align.
Jangan lupa untuk terus mempraktekkan caranya dengan membuat beberapah versi seperti yang telah saya contohkan diatas. Praktekkan di notepad dan lihat hasilnya di browser.

Materi kita selanjutnya yang akan kita bahas adalah "NAVIGASI CSS"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

CSS POSITIONING dan FLOATING

Hai sobat sky . . .
Kali ini judul postingan saya adalah "CSS POSITIONING dan FLOATING", dimana postingan ini adalah lanjutan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING


12. CSS GROUPING dan NESTING


13. CSS DIMENSION, DISPLAY dan VISIBILITY

Belajar CSS tidaklah sulit jika kita mempelajarinya secara bertahap.
Setelah mempelajari kode - kode CSS dasar, kita sekarang melanjutkanya ketahap yang lebih advancae.
Kali ini kita belajar mengenai CSS POSITIONING dan FLOATING, dimana ke-2 property tersebut berguna untuk mengatur tataletak elemen - elemen HTML.

Positioning dan Float merupakan elemen yang berguna mengatur posisi elemen.

Positioning, mirip dengan float yang membedakan hanya penempatan elemen. Jika dengan float kita hanya bisa membuat elemen HTML saling berdampingan, dengan positioning kita dapat membuat elemen HTML saling tindiih.

Ada 4 metode penentuan posisi yang berbeda, yaitu static, fixed, relatif, dan absolute

1. Static Positioning

Elemen HTML statis diposisikan secara default.
Statis tidak dipengaruhi oleh bagian atas, bagian bawah, kiri dan kanan.




2. Fixed

Menenpatkan elemen HTML relative dengan browser, tidak akan ikut bergeser ketika kita lakukan scroling pada browser.

Elemen dengan positioning fixed, akan mengubah default HTML. Elemen ini dapat menindih elemen yang lainnya. Sebagai catata, untuk IE7 dan IE8 tidak mendukung elemen ini jika tidak mendeklarasikan !DOCTYPE. Kalau kurang jelas dengan IDOCTYPE silahkan buka CSS BOX MODEL diatas.

Contoh Kode :



p.pos_fixed { positioning:fixed; top:30px; right:5px }





3. Relative

Menempatkan elemen HTML pada posisi normal. Elemen position dengan nilai relatif dapat berpindah dan menindih elemen yang lain.

Contoh Kode :



h2.pos_left { position:relatif; left:-20px; } h2.post_right { position:relatif; left:20px; }






4. Absolute

Menempatkan elemen secara relatif terhadap elemen induk / bungkus kecuali elemen dengan posisi static.



h2 { position:absolute; left:100px; right:150px; }

Kita bisa menggunaka metode overlapping untuk menenpatkan elemen HTML seperti layaknya layer.
Ketika posisi elemen diluar arus, elemen tersebut dapat overlap elemen yang lain. Overlapping sendiri bukan termasuk elemen dari property Positioning, tetapi berguna untuk mengatur dimana kita meletakkan sebuah elemen entah itu didepan, dibelakan.
Untuk menggunakannya, setelah positioning gunakan syntax.

z-index:-1

Nilai dari property ini bisa berupa positiif atau negatif

Contoh Kodenya :

img { position:absolute; left:0px; top:0px z-index:-1 }

Float merupakan elemen yang berguna untuk mengatur posisi elemen HTML secara horizontal yang berpatokan pada elemen - elemen yang membungkusnya, yaitu div, table, browser dll
Elemen ini hanya dapat mengatur posisi secara horizontal, sehingga hanya memiliki 4 buah nilai yang bisa dipakai yaitu : LEFT, RIGHT, NONE, dan INHERIT
.

Contoh Kode :

img { float:right; }

Jika anda menenpatkan beberapah elemen secara float satu sama lain, mereka akan floating disamping yang lainya.
Contoh dibawah kita akan membuat sebuah gambar dengan menggunakan property float

.thumnail { float:left; width:110px; height:90px; margin:5px; }

Cara kerja elemen ini adalah melayang secara horizontal. Jika disebelah kiri ada elemen float lainanya, secara otomatis elemen float yang kedua akan bergeser disamping elemen float pertama selama jendela browser masih cukup. Jika jendela browser tidak mencukupi maka dengan terpaksa elemen float kedua akan bergeser dibawah elemen float pertama.

Okey, penjelasan tentang "POSITIONING dan FLOATING" telah selesai.
Saya berharap anda dapat mencobanya sendiri.
Materi kita selanjutnya adalah "CSS ALIGN"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

CSS DIMENSION, DISPLAY dan VISIBILITY

Hai sobat sky . . .
kali ini judul postingan saya adalah "CSS DIMENSION, DISPLAY dan VISIBILITY", dimana postingan ini adalah lanjutan potingan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING


12. CSS GROUPING dan NESTING

Property dimension memungkinkan kita untuk mengatur tinggi dan lebar suatu elemen.
Berikut ini adalah macam - macam property CSS DIMENSION :

• Height : Mengatur tinggi elemen


• Max-height : Mengatur tinggi maximal suatu elemen


• Max-width : Mengatur lebar maximal suatu elemen


• Min-height : Mengatur tinggi minimum suatu elemen


• Min-width : Mengatur lebar minimun suatu elemen


• Width : Mengatur lebar suatu elemen

Kita tidak akan membahas terlalu banya soal dimension, karena sudah banyak yang dibahas di property - property lain, bila sobat sky ingin melihat nya silahkan pilih saja dari nomor urut 1 - 12 diatas karena sudah saya jabarkan disana semuanya.

Kita lanjutkan ke CSS DISPLAY dan VISIBILITY, ini biasa digunakan untuk menampilkan atau menyembunyikan objek dalam halaman HTML.
Untuk DISPLAY, mempunyai 2 property yang utama, yaitu :

• None : tidak kelihata


• Block : kelihatan

Sedangkan untuk VISIBILYTY, juga mempunyai 2 property yang dapat diatur nilainya, yaitu:

• Hidden : tidak kelihatan


• Visible : kelihatan

Contoh kode :

h1.hidden {visibility:hidden;}

Perbedaan antara keduanya mungkin tidak begitu menyok, hanya pada masalah space saja. Jika menambahkan space pada bagian yang akan dihilangkan, penggunaan style visibility:hidden akan tetap memunculkan space tersebut.

Misalnya kita akan membuat trigger yang akan memunculka dan akan menyembunyikan gambar ataupun ibjek lainnya, dapat kita tuliskan sebagai berikut.

fungtion changeme(id, action){ if (action=="hidden"){ document .getElemenById(id) .style .display = "none"; } else{ document .getElementById(id) .style .display = "black"; } }

Okey, saya rasa sampai disini dulu materi singkat dari saya.
Postingan berikutnya adalah "CSS POSITIONING dan FLOATING"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

CSS Grouping dan Nesting

Hai sobat sky . . .
kali ini judul postingan saya adalah "CSS Grouping dan Nesting", dimana postingan ini adalah lanjutan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING

Dalam stylesheet, sering kita temukan elemen dengan style yang sama.
Untuk meminimalkan kode yang sama tersebut, kita bisa menggunakan kode grouping.

Grouping atau pengelompokan adalah salah satu teknik penulisan dalam CSS yang berfungsi untuk mengelompokkan beberapah selector maupun tag HTML yang berstyle sama (property dan valuenya) dimana setiap selector dipisahkan dengan , (koma). Dengan teknik grouping ini kita dapat mempersingkat penulisan CSS.

Untuk lebih jelasnya saya akan tampilkan contoh kode yang sama stylenya.

h1 { color:green; } h2 { color:green; } p { color:green; }

Dari kode diatas dapat kita kelompokkan menjadi seperti ini

h1, h2, p { color:green; }

Gimana ???
Mudah bukan ???

Sekarang kita masuk pada Nesting dimana Nesting merupakan kebalikan dari Grouping.
Nesting berfungsi membuat style berbeda pada tag_atau_selector yang sama.
Dengan teknik Nesting ini kita bisa membuat style yang berbeda disetiap tag, juga sangat memungkinkan untuk menerapkan style untuk selector.

Pada contoh dibawah ini, satu style yang ditentukan untuk semua elemen p, satu style yang ditentukan untuk semua elemen dengan class="ditandai", dan style yang ketiga adalah satu style yang ditentukan hanya untuk elemen p dalam elemen dengan class="ditandai".

p { color:blue; text-align:center } .ditandai { background-color:red; } .ditandai { color:white; }

Dari contoh diatas dapat kita lihat penulisan Nesting sebagai berikut

selector_atau_tag(s p a s i)selector_atau_tagkedua{property:value;} .misal p{property:value;} .misal2 p{property:value;} #misal .misallagi{property:value}

Okey, saya rasa sampai disini dulu materi singkat tentang "CSS Grouping dan Nesting"
Materi kita selanjutnya adalah "CSS DIMENSION, DISPLAY, dan VISIBILITY"

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This