Apa Perbedaan Break dan Continue Di JavaScript?

Pada kesempatan kali ini saya akan menjelaskan sedikit apa perbedaan break dan continue di javascript, dengan sedikit ilmu dan pengalaman yang pernah saya alami mengenai program break dan continue, maka apa salahnya saya menjelaskannya walau hanya sedikit saja.

Sebelum ke pembahasan, lihatlah dan simak program yang saya buat dengan sederhana, mungkin anda akan sedikit memahami apa perbedaan break dan continue, maka lihatlah di bawah ini dengan seksama:

Program Sederhana Break

Program atau script:

• public class Breakfor {
• public stastic void main(String[] args) {
• // TODO Auto-generated method stub
• for (int i = 1; i <= 10; i++) {
• if  (i == 5)
• break;
• system.out.println(i);
• }
• }
• }

Jika di eksekusi maka hasilnya akan seperti gambar di bawah ini :

Program Sederhana Continue

• public class Contfor {
• public stastic void main(String[] args) {
• // TODO Auto-generated method stub
• for (int i = 1; i <= 10; i++) {
• if  (i == 5)
• continue;
• system.out.println(i);
• }
• }
• }

Jika di eksekusi maka hasilnya akan seperti gambar di bawah ini :

Program atau script di atas menunjukan:

Untuk program atau script Break :

Perhatikan, ketika i bernilai 5, break membuat eksekusi for di hentikan. Itulah sebabnya, nilai i terakhir yang di kirimkan ke system.out.println() adalah 4 dan akan di hentikan programnya jika i bernilai 5.

Untuk program atu script Continue :

Perhatikan satu-satunya nilai 1 dan 10 yang tidak di tampilkan adalah 5. Hal itu di sebabkan continue di jalankan saat i bernilai 5, Akibatnya system.out.println(i) tidak di jalankan saat itu. lalu, pernyataan continue membuat i++ di jalankan dengan demikian i berikutnya adalah 6.

Perbedaan Break dan Continue :

Break adalah suatu penghentian nilai dari nilai i (i =1) sampai akhir nilai i (4) ( i == 5 ) angka 5 tidak di tampilkan karena suatu penghentian break di angka 4. Sedangkan continue adalah melanjutkan, continue ini memulai dari nilai i (i == 5) akhir dengan melanjutkan ke nilai akhir yang di masukan ke dalam nilai i (i <= 10) angka 5 tidak di tampilkan karena continue di jalankan saat i bernilai 5.

Catatan: Lihatlah program script di atas untuk memahaminya

Nah itu lah penjelasan mengenai apa perbedaan break dan continue di javascript, semoga dengan adanya artikel ini bisa bermanfaat bagi semua, baiklah waktunya saya pamit. Sampai jumpa salam Sukai penulis

Bagaimana cara membuat deret bilangan fibonacci seperti 1,1,2,3,5,8,13,21?

Dua suku pertama dalam deret bilangan fibonacci berupa 1(satu). Suku ketiga dan seterusnya merupakan penjumlahan dua suku yang mendahulunya. Jadi, bila a dan b secara berurutan adalah dua suku sebelumnya, suku ke i sama dengan a + b. persoalan berikutnya, adalah mengatur nilai a dan b yang baru agar bisa di gunakan untuk menghitung suku berikutnya.

Bagaimana cara membuat deret bilangan Fibonacci seperti 1,1,2,3,5,8,13,21?

Dengan adanya fibonacci anda bisa membuat deret bilangan seperti judul di atas, caranya ikutilah program, dan tips-tips cara tersebut di bawah ini dengan tersusun. Script programnya adalah :

• import java.util.Scanner;
• public class fibonacci{
• public static void main(String[] args){
• // TODO Auto-generated method stub
• System.out.println("Menampilkan deret bilangan fibonacci");
• System.out.print("Sampai suku (n > 2): ");
• Scanner scan = new Scanner(system.in);
• int n = scan.nextint();
• // Tampilkan dua suku pertama
• int a = 1;
• int b = 1;
• System.out.println(a);
• System.out.println(b);
•  // Tampilkan suku ketiga dst
• fot (int suku = 3; suku <= n; suku++){
• int c = a + b;
• a = b; // b menjadi a
• b = c; // dan c menjadi b untuk kepentingan perhitungan suku berikutnya
• System.out.println(c);
• }
• scan.close();
• }
• }

Bila di eksekusi hasil programnya akan seperti gambar di bawah ini :

Nah itulah penjelasan bagaimana cara membuat bilangan dengan fibonacci seperti contoh di atas, semoga dengan adanya artikel ini bisa dapat bermanfaat, okeh sampai di sini dulu pembahasanya. Sampai jumpa dan Salam Sukai Penulis

Cara Membuat Kotak Di Program JavaScript

Pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat sebuah kotak dengan tinggi dan lebar kotak, cara ini mampu membuat program kita bisa berjalan dan membuat sebuah kotak dengan seperti yang kita inginkan, caranya anda hanya memasukan nilai tinggi kotak dan lebar kotak.

Baiklah simaklah penjelasan di bawah ini bagaimana cara membuat kotak di program javascript, caranya adalah sebagai berikut :

Cara membuat kotak di program javascript 

Pembuatan kotak memerlukan bahasa pemrograman yaitu for bersarang, namun, perintah yang di perlukan lebih kompleks bila tinggi kotak adalah M dan lebar kotak adalah N.

• Sebanyak N tanda * perlu di bentuk
• Hanya kolom pertama dan terakhir yang di beri

Berdasarkan keadaan seperti programnya bisa di buat, implementasinya adalah sebagai berikut :

• import java.util.Scanner;
• public class Kotak{
• public static void main (String[] args){
• // TODO Auto-generated method stub
• system.out.print("Tinggi Kotak : ";
• Scanner scan = new Scanner(System.in);
• int tinggi = scan.next.int();
• system.out.print("Lebar Tinggi : ";
• int lebar = scan.nextint();
• // Buat bingkai atas
• for (int kolom = 1; kolom <= lebar; kolom++)
• system.out.print ('*');
• system.out.println();
• // Buat kiti dan kanan untuk
• // baris = 2 s/d (tinggi-1)
• for (int baris = 2; baris <= tinggi-1; baris++){
• system.out.print('*');
• for (int kolom = 2; kolom <= lebar-1; kolom++)
• system.out.print(' '); //spasi
• system.out.println('*');
• }
• // Buat bingkai bawah
• for (int kolom =1; kolom<= lebar; kolom++)
• system.out.print('*');
• system.out.println();
• scan.close();
• }
• }

Hasilnya akan seperti berikut ini bila anda eksekusi :

Catatan : Untuk tinggi itu adalah 7 (tujuh bintang) dan untuk lebar 5 (lima bintang)

 

Nah itu dia penjelasan mengenai bagaimana cara membuat kotak di java script, semoga saja bisa membantu anda dan juga semoga saja bermanfaat, ok penjelasan saya cukup sampai di sini sampai jumpa di lain artikel lagi, salam Sukai Penulis

Bagaimana Cara Menggunakan Pengulangan Dengan For di JavaScript?

Pada kesempatan kali ini saya akan menjelaskan bagaimana cara menggunakan pengulangan for di javascript, dengan sedikitnya pengalaman, jadi sebisa mungkin saya akan menjelasakan apa yang saya tahu.

Saya yakin seorang programer tentunya pasti telah tahu apa itu FOR, dan cara menggunakannya, tetapi apa salahnya saya juga memberikan sedikit penjelasan dan tips menggunakan FOR di javascript, baiklah silahkan simak penjelasan di bawah ini.

Bagaimana bentuk pengulangan dengan for ?

Untuk menggunakan for ini anda harus tahu terlebih dahulu pernyataan for, maksudnya supaya paham untuk menggunakannya. Pernyataan for memiliki bentuk seperti berikut :

• For {insialisasi, penghenti, penaikan}
• pernyataan

1. Pengulangan terhadap pernyataan di tentukan oleh tiga bagian yaitu :
2. Insialisasi : Bagian insialisasi dijalankan sekali sebelum pernyataan di jalankan
3. Penghenti : Bagian Penghenti akan selalu di evakuasi terlebih dahulu sebelum bagian pernyataan di jalankan. Sekiranya bagian penghenti ini bernilai salah (false), pengulangan akan di hentikan.
4. Penaikan : Bagian penaikan di jalankan secara otomatis setiap kali bagian pernyataan di jalankan.

Apabila ada beberapa pernyataan akan di ulang melalui FOR, bentuknya akan menjadi seperti berikut di bawah ini :

• For (insialisasi, penghenti, penaikan){
• Pernyataan pertama (1)
• ...
• Pernyataan_N (akhir)
• }

Untuk memahami pernyataan For, perhatikan contoh dengan while berikut yang pernah di bahas di artikel sebelumnya :

• i = 1;
• while (i <= n) {
• system.out.println(i);
• i++;
• }

Bila di nyatakan dengan FOR, kodenya akan seperti di bawah ini :

• For (i = 1; i <= n; i++)
• system.out.println (i);

Kesamaan while dan for di atas di tunjukan pada gambar berikut :

Untuk contoh program untuk menampilkan bilangan 1 hingga N:

• import java.util.Scanner;
• public class for {
• public static void main (String[] args) {
• //TODO Auto-generated method stub
• System.ou.print("Masukan bilangan bulat (n) : ");
• int n = scan.nextint();
• int i;
• for (i = 1; i <= n; i++)
• System.out.println(i);
• scan.close();
• }
• }

Jika di eksekusi hasilnya akan seperti gambar di bawah ini : 

Nah itulah penjelasan mengenai bagaimana cara menggunakan pengulangan dengan for di javascript mudah-mudahan bisa bermanfaat untuk kita semua, oke waktunya saya pamit, Salam Sukai Penulis

Cara Menggunakan Do while di JavaScript (Pemula!!)

Penggunaan do while sering kali di bahas saat belajar di sekolah maupun di kuliahan karena ini adalah dasar program untuk memahami variabel, serta atribut-atribut lainnya, untuk itu maka saya kali akan membahas bagaimana cara menggunakan do while di javascript, untuk penjelasannya silahkan simak penjelasan di bawah ini.

Bagaimana Bentuk Pengulangan Do while ?

Bentuk pernyataan do while adalah sebagai berikut :

• do{
• pernyataan
• }while (kondisi)

Tanda {dan)} bisa di hilangkan kalau hanya satu pernyataan yang akan di ulang.

Perhatikan contoh gambar diagram alur pengulangan pada do while di atas:

Berbeda dengan while, do while ini menjalankan bagian pernyataan terlebih dahulu dan kemudian menguji kondisi. Dengan demikian, paling tidak bagian pernyataan do..while akan di jalankan sekali. Sebuah conoth yang menunjukan pengulangan dengan kemungkinan bagian pernyataan akan di jalankan sekali tunjukan di bawah ini.

• import java.util.Scanner;
• public class Bacaint {
• public static void main (string[] args) {
• //TODO Auto-generated merhod stub
• int bil = 0;
• booolean salah;
• scanner scan =new Scanner(system.in);
• do {
• system.out.print("Masukan bilangan bulat: ");
• 
  
• salah=false;
•  
• try {
• bil = scan.nextint();
• }
• catch (Execprion e){
• system.out.println ("Anda salah memasukan bilangan!");
• salah = true;
• scan.next(); // Bungs sisa teks
• }
• }while (salah);
• system.out.println ("Bilangan yang anda masukan: " + bil);
• scan.close();
• }
• }

Hasil akhir akan seperti gambar di bawah ini :

Apakah semua yang bisa di tangani oleh while juga biasa di tangani oleh do while?

Secara prinsip ya. Namunm do while biasa di gunakan untuk kasus yang memerlukan pengujian di belakang atau paling tidak bagian pernyataan yang berbeda antara do dan while di jalankan sekali. Oleh karena itu, do while lebih jarang di gunakan dari pada while 

Nah itulah penjelasan bagaimana cara menggunakan do while, semoga artikel ini bisa bermanfaat bagi semua, para pembaca. Terimakasih telah berkunjung, salam Sukai Penulis

Bagaimana Cara Menampilkan Bilangan Urutan Terbalik di JavaScript (N, N-1, 3,2,1)?

Anda akan sering menjumpai pengulangan dengan persoalan semacam itu, itulah sebabnya akan di berikan suatu tips untuk menangani persoalan seperti itu secara umum. Ada empat bagian yang menjadi kunci penting di dalam pengulangan dengan while. ke empat bagian tersebut adalah sebagai berikut :

• Bagian Pertama : Bagian ini adalah bagian insialisasi variabel yang di pakai sebagai pencacah. Bagian ini hanya di jalankan sekali.
• Bagian Kedua : Bagian ini berisi kondisi yang menentukan jumlah pengulangan.
• Bagian Ke Tiga: Bagian ini berfungsi untuk menaikan atau menurunkan nilai variabel pencacah, yang juga berperan sebagai penentu pengulangan (mengingat variabel pencacah biasa di pakai dalam kondisi (bagian ke dua).
• Bagian Ke Empat : Bagian ini berisi perintah yang umumnya di gunakan untuk menampilkan hasil. Bagin ini tentu saja juga merupakan bagian yang di ulang oleh while.

Lihat gambar di atas, Gambar di atas menunjukan ke empat bagian tersebut berdasarkan contoh program di depan.

Nah kalau ingin menampilkan bilangan dari n ke 1, variabel pencacah perlu di isii dengan terlebih dahulu. Kondisi penentu pengulangan perlu di ubah menjadi 1>=n. Bagian untuk menaikan atau menurunkan nilai tidak perlu di ubah. Dengan demikian, kode yang di perlukan adalah :

i = n;
while (i > 0) {
system.out.println(i);
i--;
}

Program yang lebih lengkapnya ada di bawah ini:

• import jav.util.scanner;
•  
• public class Turun {
• public static void main(string[] args) {
• //TODO Auto-generated method stub
• system.out.print("Masukan bilangan bulat (n) :");
• int n = scan.nextint();
•  
• int i = n;
• while (i > 0) {
• system.out.println (i);
• i--;
• }
• scan.close();
• }
• } 

Contoh hasil eksekusi program:

Nah itulah penjelasan bagaimana cara menampilkan bilangan urutan terbalik di javascript, semoga artikel ini dapat membantu dan barmangfaat bagi semua yang telah membaca artikel ini, sebelum di tutup saya ucapkan terimakasih anda telah mengunjungi Sukai Penulis, cukup sampai di sini samapai jumpa. Salam Sukai Penulis

Cara Pengulangan Menggunakan While Di JavaScript?

Dasar pemrograman sering kali adanya pengulangan seperti while dan do while, tapi di sini saya hanya akan membahas while saja, namun untuk penjelasan do while mungkin nanti saya akan bahas di artikel lain, baiklah silahkan simak di bawah ini.

Apa yang dimaksud dengan pengulangan ?

Pengulangan adalah suatu bentuk pemrograman yang ringkas di dalam menangani suatu langkah yang berulang. Contoh yang sederhana, pengulangan dapat di pakai untuk menampilkan seratus atau bahkan seribu tulisan "java". Apabila tidak ada bentuk pengulangan, hal itu hanya bisa di lakukan dengan menuliskan seratus pertanyaan sebagi berikut :

system.out.printl("java");

Walaupun hal itu bisa di lakukan dengan "Copy and Paste", tetap saja cara seperti itu tidak praktis. Bayangkan pula, terdapat sebuah gambar 1000 x 1000 pixel. Kebutuhannya adalah menghitung jumlah piksel yang bernilai nol (0), Tanpa proses pengulangan, apa jadi nya? mustahil!

Contoh yang paling sederhana untuk menggabarkan penggunaan while adalah untuk menampilkan bilangan 1 sampai N, dengan N di masukan dari keyboard, Algoritmanya adalah sebagai berikut :

1. Ambil sebuah bilangan buat keyboard dan simpan ke variabel N.
2. Berikan nilai 1 ke variabel I.
3. while I < N
4. Tampilkan I ke layar
5. Naikan isi variabel I sebesar 1 (satu).

Berdasarkan algoritma di depan, kita coba dengan N = 4, Berikut adalah langkah per langkah yang akan terjadi.

1. Langkah 1:N = 4
2. Langkah 2:I =1
3. Langkah 3:I < N benar, sebab 1 < 4
   • Langkah 3:a : Nilai 1 di tampilkan di layar
   • Langkah 3:b: I =2
4. Langkah 3:I < N benar, sebab 2 < 4
   • Langkah 3:a : Nilai 2 di tampilkan di layar
   • Langkah 3:b: I =3
5. Langkah 3:I < N benar, sebab 3 < 4
   • Langkah 3:a : Nilai 3 di tampilkan di layar
   • Langkah 3:b: I =4
6. Langkah 3:I < N benar, sebab 4 < 4
   • Langkah 3:a : Nilai 4 di tampilkan di layar
   • Langkah 3:b: I =5
7. Langkah 3:I < N benar, sebab 5 > 4
8. Selesai

Berdasarkan Langkah-langkah di atas, nilai yang di tampilkan di layar berupa 1,2,3,dan 4. Algoritma di atas dapat di terjemahkan ke dalam program java sebagai berikut :

Algorimat dan Program :
Algoritma	Program Java
Ambil sebuah bilangan buat dari keyboard dan simpan ke variabel N	n = scan.getin();
Berikan nilai 1 ke variabel I	I=1;
While I < N	While (I < = n {
3.a. Tamppilkan I ke Layar	System.out.println(i);
3.b Naikan isi variabel I sebesar satu	I++; }

Contoh dalam bentuk program yang utuh dapat di lihat di bawah ini :

• import java.util.Scanner;
• 
  
• public class NBilangan {
• 
  
• Public static void main {String[] args}{
• //TODO Auto-generated method stub
• System.out,print ("Masukan bilangan bulan (n) : ");
• Scanner scan = new Scanner (System.in);
• int n = scan.next Int();
• int i = 1;
• while (i <= n)
• system.out.println(i);
• i++;
• }
• scan.close();
• }
• }

Hasilnya akan seperti di bawah ini : 

 

Catatan: Memsaukan bilangan Bulat itu terserah anda memasukan nilai berapa juga tidak di batas

Nah itulah penjelasan mengenai pengulangan bagaimana cara pengulangan menggunakan while di javascript semoga bisa bermanfaat. Salam Sukai Penulis

Bisakah Menjalankan Program Java Tanpa Melalui Eclipse?

Hallo kembali lagi dengan saya, admin sukai penulis yang memberikan info seputar pengalaman yang di miliki, baik maupun dari sekolah, atau pun dari kampus. 

Baiklah kali ini ada beberapa pertanyaan mengenai program java, khusunya yang di atas, bisa kah kita menjalankan program java tanpa melalui esclipse? Sebelum itu alangkah baiknya anda tahu terlebih dahulu apa itu java ? Baiklah simak saja di bawah ini penjelasannya.

 

Apa itu Java ?

Java adalah nama sebuah bahasa pemrograman yang sangat terkenal. Sebagai bahasa pemrograman, java dapat di gunakan untuk menulis program. Sebagaimana di ketahui, program adalah kumpulan instruksi yang di tujukan untuk komputer.

Tugas tertentu sesuai yang di tentukan oleh pemrograman orang yang membuat program). Sebagai contoh, anda mungkin terbiasa menggunakan pengolah kata seperti word. Nah, word adalah contoh aplikasi yang di buat dengan menggunakan bahasa pemrograman. 

Bahasa java di kembangkan di sun Microsystems dan mulai di perkenalkan kepada publik pada tahun1995. Seperti halnya C++, java juga merupakan bahasa yang berorientasi objek. dengan demikian, java juga memudahkan dalam pembuatan aplikasi yang berskala besar.

Bisakah menjalankan program java tanpa melalui Eclipse?

Tentu bisa, cara ini mungkin bisa membuat anda bengong, tapi jangan bengong-bengong nanti lalat bisa masuk kedalam mulut anda, ada 1 (satu) cara menjalankan program java tanpa eclipse yaitu dengan cara melakukan melalui Command Prompt milik windows. Penampakannya seperti di bawah ini :

Untuk mengaktifkan cara di atas anda bisa mengikuti langkah-langkah di bawah ini dengan step by step ya :

1. Klik tombol start milik windows
2. Klik pada All program
3. Klik pada accesories
4. Cari bertulisan Command Prompt dan klik pada Command Prompt

Untuk mengaktifkan Command Prompt di windows 8, lakukan langkah-langkah seprti di bawah ini:

1. Klik pada Start milik windows
2. Ketikan Com
3. Klik pada Command Promp

Di dalam command prompt, ketikan perintah berikut untuk mengaktifkan folder C:\Latjava

Cd C:\LatJava lalu Enter

Setelah tombol Enter di tekan, prompt berubah menjadi seperti berikut :

C:\LatJava>_

Setelah itu, buatlah file bernama atur.bat pada folder C:\LatJava dengan menggunakan editor teks, Hal ini perlu di lakukan sekali saja. Isinya sebagi berikut :

SET CLASSPATH=.;c:\Program Files\Java\jdk1.7.0\lib\tools.jar

SET PATH=%PATH%;c:\Program Files\Java\jdk1.7.0\bin

Setiap kali Command Propmt di panggil, panggilah atur.bat setelah itu caranya sebagai berikut :

c:\LatJava>atur lalu Enter

Setelah itu, anda bisa menjalankan program java yang telah terkompilasi (berekstensi .Class) dengan memanfaatkan program bernama java. Sebagai contoh, Logika.class akan di folder bin milik proyek logika. Anda bisa menjalankannya dengan cara seperti berikut dengan asumsi folder aktif adalah c:\Latjava:

c:\LatJava>cd Logika\bin lalu Enter

Setelah tombol enter di tekan, prompt akan berubah menjadi seperti berikut:

c:\LatJava\Logika\bin>_

Selanjutnya ketikan java Logika seperti berikut :

c:\LatJava\Logika\bin>java Logika

Hasilnya sebagi berikut :

 

Nah itulah penjelasan mengenai pertanyaan Bisakah menjalankan program java tanpa melalui Eclipse, ok kali ini sekian dari saya semoga artikel ini dapat membantu, terimakasih telah berkunjung, sampai jumpa salam Sukai Penulis

Display Dalam CSS

Atribut Display

Dalam CSS, anda dapat pula memanipulaskan elemen-elemen dalam html agar tampilannya menjadi sesuai dengan yang anda inginkan, Saat ini kebanyakan halaman web dapat di buat hanya dengan menggunakan sedikit tag yang di susun rapi ke dalam style css yang akan mengatur tampilan dokumen web hingga sesuai dengan keinginan anda.

Kebanyakan dokumen html yang di tampilkan dalam browser saat ini terdiri dari berbagai style font, margin, padding, dan pada dasarnya adalah tipe display. Adapun penulisan display dalam css dapat di masukan ke dalam sebuah selector seperti contoh script berikut ini:

selector {display : tipe display;}

kebanyakan tipe pokok dari display adalah berupa tipe inline, block-line, dan none yang dapat di manipulasi dengan property display dan nilai inline, block serta none tersebut. Adapun maksud dari tipe display adalah:

Tipe-tipe Display

Inline	:	Seperti artinya di mana elemen-elemen yang di tampilkan secara inline akan mengikuti alur dari sebuah garis/line. Elemen-elemen seperti strong, anchor, dan emphasis adalah elemen yang biasa nya di tampilkan secara inline
Block	:	Akan menempatkan sebuah line break sebelum dan sesudah elemen yang di berikan property ini. Header dan paragraf adalah contoh dari elemen yang biasanya di tampilkan secara blok-line dalam display.
None	:	Maksud dari property ini adalah tidak akan menampilkan elemen yang memiliki property ini, walaupun terlihat tidak berguna, tetapi property ini dapat di gunakan dan akan terlihat bagus jika di gabungkan dengan elemen-elemen accessibility seperti accessbility link, alternate stylesheet, atau efek hover tingkat lanjut.

Berikut sebuah contoh penerapan property display dalam membuat layout sebuah dokumen web:

• <html>
• <head>
• <title>Belajar Display</title>
• </style>
• #bg{
• display: inline;
• z-index: 1;
• background: #ffccff;
• left: 10px;
• width : 100%;
• border-bottom: #fc9b52 20px solid;
• position: absolute;
• top: 10px;
• height: 150;
• }
• </style>
• </head>
• <body>
• div id=bg> </div>
• </body>
• <html>

Pada contoh kode di atas di gunakan sebuah property display yang di terapkan secara inline, kemudian posisi z-index 1, warna background #ffccff warna border bawah dengan nilai 20 piksel, posisi absolute, besar margin atas 10 piksel dan tinggi sebesar 150 piksel. Jika di dalam browser akan terlihat seperti pada gambar di bawah ini :

Tampilan Dalam Tabel

Dalam CSS kita dapat pula menampilkan data dalam bentuk tabel seperti yang di buat dengan html menggunakan property display css, seperti :

selector {display : table;}

Pada nilai inline-table tersebut akan mengatur data dalam sebuah tabel tanpa adanya line break sebelum dan sesudahnya.

Mungkin cara terbaik untuk memahami tabel yang berhubungan dengan nilai dari prperty display ini adalah dengan menggunakannya seperti tabel dalam Html. Tabel dalam CSS adalah display insial dan anda dapat menirukan elemen ter dan td dengan nilai dari baris tabel menggunakan table-roe dan cell table menggunakan table-cell secara terpisah. Penulissannya dalam CSS adalah:

selector {display : nilai table;} 

Property display semakin baik dengan menawarkan nilai yang lebih lengkap untuk tabel berupa table-column, table-row-group, table-column-group, dan table-caption  guna pengaturan data dalam sebuah tabel menggunakan css, di mana seluruh nilai tersebut cukup deskriptif untuk mewakili tampilan dari tabel dalam css.

Keunggulan dari nilai ini adalah bahwa anda dapat membuat tabel dengan kolom di bandingkan tabel yang di gunakan dalam html yang lebih condong pada metode menggunakan baris.

Catatan : Menggunakan sebuah tabel css dalam dokumen web yang anda buat dapat merusak tampilan dokumen web yang anda buat menggunkan html. Html biasanya di gunakan untuk menyampaikan pesan. Jadi, jika anda memiliki data-data yang tersusun dalam tabel, ada baiknya jika data tersebut di susun dalam tabel html.

Tipe-tipe display lainnya:

1.List-item	:	Untuk tampilan data daftar yang biasanya di gunakan seperti pada tag li dalam elemen html. Agar tipe ini bekerja dengan baik, elemen yang akan menggunakan tipe ini sebaiknya menggunakan elemen ul atau ol sehingga akan menampilkan berupa daftar
2.Run-in	:	Akan membuat sebuah elemen baik berupa in-line maupun block-line tergantung tipe ini adalah tidak dapata bekerja dalam browser Internet Explorer atau Mozilla
3.Compact	:	Sama dengan run-in, yaitu membuat elemen terlihat dalam bentuk inline atau block-line tergantung pada isinya. Namun tipe ini tidak dapat bekerja dengan baik pula dalam kedua browser di atas
4.Marker	:	Di gunakan bersama dengan pseudo element : before dan after untuk menentukan tampilan dari nilai property isi yang telah di tandai dengan tag ini. Jadi tipe ini hanya dapat berjalan dengan baik jika anda mengesampingkan nilai pseudo elemen property display sebelumnya.

Nah itulah pembahasan dari saya mengenai Display Dalam CSS, semoga artikel ini dapat membantu, ok saya pamit dulu sampai bertemu di artikel selanjutnya. Salam Sukai Penulis

Cara mengatur posisi Absolute dan Relative di CSS

Dalam membuat layout menggunakan CSS, anda dapat menentukan posisi sebuah elemen dengan menggunakan fungsi dari position. Adapun property position tersebut berupa absolute, relative, dan static atau fixed.

Nilai dari static merupakan nilai default dari seluruh elemen yang terlihat dalam html. Relative hampir seperti nilai static, tetapi elemen-eleemennya dapat di set dari posisi orsinil dengan menggunakan nilai top, right, bottom, dan left.

Property fixed pada absolute, tetapi secara teoeri elemen yang menggunakan property ini akan tetap berada pada posisi tersebut walau halaan tersebut kita scroll ke atas atau ke bawah. Namun property fixed ini walau terlihat bekerja lebih baik dalam browser seperti mozilla dan opera, tetapi tidak bekerja sama sekali pada internet explorer.

Penerapannya di dalam dokumen web anda di hitung dari posisi atau koordinat samping kiri atas (absolute) atau mengakalkulasikan dari posisi atau koordinat di mana elemen tersebut di masukan (relative).

Catatan : Sebelum ke kode script, alangkah baiknya anda tahu pengertiannya

Posisi Absolute

Jika anda menentukan posisi ke dalama posisi absolute maka akan di kalkulasikan dari sebelah ujung kiri atas halaman kecuali layer tersebut di definisikan di dalam layer yang lain, dimana dalam kasus ini akan dikalkulasikan dari sebelah ujung kiri atas dari layer utama.

<div style="position:absolute; top:10; left:60; font-family: verdana; font-size:35pt; color: green">

Posisi Relative

Jika anda menentukan pisisi menjadi rekative maka akan di posisikan relative ke dalam tag yang di usung dalam stylenya. Jika anda menambahkan sebuah layer dengan posisi relative di tengah halaman, posisi akan dikalkulasikan tepat dari tempat yang sama dalam tengah halaman di mana ia di tambahkan.

<div style="position:relative; top:50; left:50; color:red; font-size:80px; z-index:4">

Ketika property position mengindikasikan sumber luar dari koordinat sistem, maka property left dan top akan menentukan posisi yang tetap pada layer, yaitu posisi sebelah kiri halaman (left) dan posisi sebelah kanan halaman (right).Anda dapat memasukan baik nilai positif maupun negatif untuk property tersebut. 

Dengan demikian, sangat mungkin untuk menempatkan isi atau content menjadi lebih tinggi dan ke lebih ke kiri dalam halaman di bandingkan posisi logical dalam kode atau script yang di buat dengan menggunakan html di mana layer tersebut di definisikan. Jadi di bawah kode html, anda akan dapat memasukkan kode untuk layer yang di posisikan pada atas halaman yang di hasilkan.

Baik property left maupun tip dapat di ubah secara dinamis dengan menggunakan bahasa javascript. Ini artinya bahwa anda akan dapat menggerakan objek pada layer bahkan setelah halaman web tersebut selesai di load. 

Kegunaan lain dari layer yang di buat dengan CSS adalah berupa menu yang keluar ketika mouse bergerak melewati sebuah link yang telah di berikan script ini.

Property "z-index", berfungsi untuk meletakkan "stacking order" dari layar-layar yang di letakan antara satu dengan yang lain. Nilai z-index yang tertinggi akan menekan elemen yang terendah dan nilai yang terendah akan secara pasti mengikuti aturan di atasnya.

Sebagai contoh, Sebuah permainan kartu di mana kita sebuah as sekop jika berada pada dasar maka dapat di katakan memiliki z-index:52;. Hebatnya lagi bahwa z-index ini dapat di buat menjadi lebih baik lagi menggunakan javascript, tetapi tentu saja kita juga harus menguasai bahasa ini.

Anda dapat membuat beberapa halaman di atas tiap halaman lainnya seleuruhnya dalam sebuah halaman. Ketika pengguna memilih sebuah link, maka akan secara otomatis memindahkan layer dengan info yang kita inginkan di atasnya dari pada membuka sebuah halaman baru.

Tekhnik membuat efek seperti saat ini banyak mengacau pada DHTML (Dinamic HTML atau gabungan antara javascript dan CSS) yang lebih mengarah pada tujuan tersebut.

Salah satu penggunaan properti "z-index" adalah untuk menciptakan bayangan (drop shadow). Contoh berikut adalah penerapan z-index untuk membuat bayangan :

• <html>
• <head>
• <title> Membuat Bayangan<title>
• <style>
• .posisi1 {position:relative; top:15; left:25; z-index:10; color:#00000; font-family: arial; font-size:25pt;}
• .posisi2 {position:relative; top:-22; left:28; z-index:6; color:#00ccff; font-family: arial; font-size:25pt;}
• .posisi3 {position:relative; top:-59; left:29; z-index:6; color:#ff00ff; font-family: arial; font-size:25pt;}
• </syle>
•  </head>
• <body>
• <div class="posisi1">Bayangan dengan Layer </div>
• <div class="posisi2">Bayangan dengan Layer </div>
• <div class="posisi3">Bayangan dengan Layer </div> 
• </body>
• </html>

Dalam browser akan terlihat seperti gambar di bawah ini:

Property terkahir adalah visibility property yang memungkinkan anda membuat layer yang tidak terlihat untuk menambahkan berbagai bentuk pop up menu dan berbagai efek lain dalam halaman anda. Nilai dari peroperty ini adalah "visible" untuk memperlihatkan layer dan "hidden" untuk menyembunyikan layer.

Dengan dynamic html akan memudahkan anda mengbah penampakan dari layer menurut masing-masing event. Kegunaan yang paling umum adalah dalam membuat menu yang dapat keluar (pop up), seperti menu statt dalam windwos di mana sub-menu-sub-menu yang akan keluar (pop up) tersebut harus di buat sebagai layer yang tidak terlihat (invisble layer).

Kemudian, sebuah mouse melintas di atas sebuah link maka layer yang kita tentukan akan terlihat. Namun browser netscape agaknya kurang mendukung teknologi css ini. Berikut adalah contoh pembuatan dokumen dengan properti "visibility", yang menerima nilai "visible" dan "hidden".

• <html>
• <head>
• <title>Property visibility</title>
• </head>
• <div style="position: absoulte; top:10; left:50; font-family:verdana; font-size:30pt; color:green; font-variant:small-caps;">
• Contoh Properti Visibility :</div>
• <div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:hidden;">
• 1. Teks ini tidak terlihat karena visibility : hidden
• </div>
• <div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:visible;"> 
• 2. Teks ini telihat karena visibility : visible
• </div>
• </body>
• </html>

Dalam browser akan terlihat seperti gambar di bawah ini:

Selain properti di atas, ada lagui yang namanya float. seperti artinya yaitu mengapung, maka elemen yang akan di buat ke kanan atau ke kiri dari sebuah garis dengan isi yang melingkupnya. Floating di gunakan untuk memosisikan elemen yang lebih keci dalam sebuah halaman, contoh script di bawah:

#navigasi {float: left; width:10px;}

#navigasi {float: right; width:10px;}

#isi {margin:0 10px;} 

Jika anda tidak menginginkan elemen berikutnya elemen berikutnya mengelilingi objek yang di floating. Anda dapat menerapkan propery clear.

• Clear: left (akan menghilangkan elemen float kiri)
• Clear: Right (akan menghilangkan elemen float kanan)
• Clear: Both (akan menghilangkan elemen float kiri dan kanan).

Sebagai contoh, jika anda membuat sebuah footer dalam halaman, anda dapat menambahkan sebuah id footer dan membahkan :

#footer {clear: both;)

contoh:

• <html>
• <head>
• <title>Belajar float</title> 
• <style>
• #navigasi {float: left; width:10px;}
• #navigasi2 {float: right; width:50px;}
• #footer {clear:both;} 
• </style>
• </head>
• <body>
• <div id=navigasi> float kiri</div>
• <div id=navigasi2> float kanan</div>
• <div id=footer> clear float</div>
• </body>
• </html> 

Jika di lihat di dalam browser akan terlihat seperti gambar di bawah ini:

Cukup sekian pembahasan kali ini, terimakasih sudah mau membaca artikel ini, sampai jumpa dan salam Sukai Penulis