Senin, 03 November 2014

Peringatan Hari Sumpah Pemuda SMK Daarut Tauhiid Bandung



28 oktober 2014 SMK Daarut Tauhiid boarding School Memperingati Hari Sumpah Pemuda,,,

Posted on 05.37 by Unknown

No comments

Selasa, 06 Mei 2014

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline


Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
      Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat.

Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya tampilkan sebuah illustrasi box model



penjelasan:
·         Margin - memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)
·         Border - sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background
·         Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content
·         Content - adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya

Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada sebuah div yang berukuran lebar 300px dan tinggi 200px
1
2
3
4
5
6
7
     div.column {
    width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
         }

berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel, melainkan 350 pixel x 250 pixel
·         Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px)
·         Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas bawah (margin:10px + border:5px + padding:10px)
·         Total lebar 350px dan tinggi 250px

Maaf hanya untuk pecinta i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk menyelesaikan masalah ini
i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat, supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
<html>
<head>
<title></title>
<style type="text/css">
div.column {
    width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}
</style>
</head>
<body>
<div class="column"> Test </div>
</body>
</html>

Penggunaan Border
Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty border-width digunakan untuk menentukan lebar dari border, border-color untuk warna dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis lurus, putus-putus, atau garis titik-titik.

Cara menuliskan border adalah sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.column {
    width:200px;
    height:20px;
    border-width:5px;
    border-color:#39F;
    border-style:solid;
}

/* CSS border diatas bisa juga dituliskan seperti ini*/

div.column {
    width:200px;
    height:20px;
    border:5px #39F solid;
}

Hasilnya dari penerapan border diatas :

Sample


Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property
Keterangan
Nilai
border
Menentukan semua gaya border dalam satu deklarasi
border-width
border-style
border-color
border-bottom
menentukan semua gaya border bawah dalam satu deklarasi
border-bottom-width
border-bottom-style
border-bottom-color
border-bottom-color
menentukan warna border bawah
border-color
border-bottom-style
menentukan gaya border bawah
border-style
border-bottom-width
menentukan lebar border bawah
border-width
border-color
menentukan warna kolom border
color_name
hex_number
rgb_number
transparent
inherit
border-left
menentukan semua gaya border kiri dalam satu deklarasi
border-left-width
border-left-style
border-left-color
border-left-color
menentukan warna border kiri
border-color
border-left-style
menentukan gaya border kiri
border-style
border-left-width
menentukan lebar border kiri
border-width
border-right
menentukan semua gaya border kanan dalam satu deklarasi
border-right-width
border-right-style
border-right-color
border-right-color
menentukan warna border kanan
border-color
border-right-style
menentukan gaya border kanan
border-style
border-right-width
menentukan lebar border kanan
border-width
border-style
menentukan gaya dari keseluruhan kolom border
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
border-top
menentukan semua gaya border atas dalam satu deklarasi
border-top-width
border-top-style
border-top-color
border-top-color
menentukan warna border kanan
border-color
border-top-style
menentukan gaya border kanan
border-style
border-top-width
menentukan lebar border kanan
border-width
border-width
menentukan lebar dari keseluruhan kolom border
thin
medium
thick
length
inherit

Penggunaan Outline
Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan border, sedangkan property dari outline dapat dilihat pada tabel dibawah
Keterangan
Nilai
outline
Menentukan semua opsi outline dalam satu deklarasi
outline-color
outline-style
outline-width
inherit
outline-color
menentukan warna outline
color_name
hex_number
rgb_number
invert
inherit
outline-style
menentukan gaya outline
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width
menentukan lebar outline
thin
medium
thick
length
inherit
Penggunaan Margin
Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja. Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property margin pada CSS dapat di lihat pada tabel di bawah.
Keterangan
Nilai
margin
digunakan untuk memnentukan jarak margin pada satu deklarasi
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
menentukan jarak margin bawah
auto
length
%
margin-left
menentukan jarak margin kiri
auto
length
%
margin-right
menentukan jarak margin kanan
auto
length
%
margin-top
menentukan jarak margin atas
auto
length
%

Penggunaan Padding
memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content berikut saya berikan sampel penggunaan padding dan border bersamaan:
?
1
2
3
4
5
6
div.column {
    width:200px;
    height:20px;
    padding 20px;
    border:5px #39F solid;
}
Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada border diatas akan terlihat perbedaanya:

Sample

Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property
Description
Values
padding
Menentukan keseluruhan opsi padding dalam satu deklarasi
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
menentukan lapisan padding bawah
length
%
padding-left
menentukan lapisan padding kiri
length
%
padding-right
menentukan lapisan padding kanan
length
%
padding-top
menentukan lapisan padding atas
length
%

Baca-baca saja gak ada gunanya kalo gak di coba :)


Posted on 20.44 by Unknown

No comments

Jumat, 02 Mei 2014

Tutorial Pembuatan Program Bulat dan Ganjil dalam bahasa C# menggunkan Microsoft Visual Studio


Assalamualaikum Wr. Wb.
Kali ini saya akan sharing tentang bagaimana membuat sebuah program bilangan bulat dan ganjil pada bahasa C# menggunakan Microsoft Visual Studio.

 Pengertian Pemrograman Visual
     Pemrograman visual adalah metode pembuatan program dimana programmer membuat koneksi antara objek-objek dengan cara  membuatgambar, menunjuk, dan mengklik pada diagram dan ikon dan dengan berinteraksi dengan diagram alur. Jadi, programmer bisa menciptakan program dengan cara mengklik pada ikon yang mewakili rutin-rutin pemrograman secara umum. Dalam pengeksekusian kode programnya, pemrograman visual merupakan konsep event-driven, yaitu pengeksekusian yang didasarkan atas kejadian(event) tertentu. Setiap kejadian tersebut mempunyai kode program sendiri yang disimpan dalam sebuah fungsi. Berbeda dengan pemrograman terstruktur atau procedural yang mengeksekusi kode-kode programnya mulai dari awal sampai akhir program secara beruntun.
 Langkah-langkahnya sebagai berikut :

1. Patikan Microsoft Visual studio telah terinstall di komputer anda , jika belum, silahkan install terlebih dahulu.
2. Buka Microsoft Visual studio tersebut dengan cara : klik star, All Program, kemudian pilih Microsoft     Visual studio , seperti pada gambar dibawah


klik kiri untuk membuka Microsoft Visual studio.































3. Setelah itu, maka akan muncul jendela kerja atau tampilan awal Microsoft Visual Studio seperti pada gambar dibawah ini,

 























4. Setelah muncul tampilan awal, maka kita akan memulai membuat sebuah program , langkah berikutrnya adalah di pojok kiri atas klik File,pilih New, kemudian pilih Project , seperti pada gambar dibawah ini :


 
5.Setelah itu, pilih bahasa C#, Consol application, dan atur tempat untuk penyimpanan file, seperti pada gambar berikut :


6. Setelah selesai langkah tersebut maka akan muncul jendela kerja seperti Gambar dibawah ini :


 

Console.Write("Masukan Bilangan : ");
            string Bilanagn = Console.ReadLine();
            int Bilanagan = int.Parse(angka);
            if (angkaa % 2 == 0)
            {
                Console.WriteLine(bilanagn + "Adalah Bilangan Genap");
            }
            else
            {
                Console.WriteLine(bilangan + adalah Bilangan Ganjil");
           }                                                                         keterangan
  warna merah =    perintah yang berguna  untuk menanyakan/memerintahkan pada awal program  berjalan.   warna biru =        perintah agar input dapat ikut tertulis dan dapat digunakan untuk selanjutnya.                             warna ungu =  perintah yang berguna sebagai proses dari pemilihan untuk output yang akan keluar.
       warna hijau = perintah yang berguna untuk tampil otomatis setelah proses berjalan. (pilihan dalam proses).

 Masukkan Sintax atau langkah seperti pada Gambar, ketik sintax diatas pada microsoft visual studiomu.
Setelah semua selesai, maka program siap dijalankan.

7. Untuk menjalankan program tersebut , langkah-langkah yang harus dilakukan adalah sebagai berikut :

- Pada visual studiomu pilih DEBAG, kemudian Kilik start Widhout Debaging. seperti gamabar berikut :

 

8. Setelah itu maka akan muncul progeram seperti berikut :


Ketika kita input bilangan bulat , seperti 2,4,6 dan sebagainya, maka program tersebut secara otomatis akan mengeluarkan output "..... adalah bilangan bulat"  contoh :




Tapi sebaliknya, jika kita menginput bilangan 'ganjil' maka program secara otomatis akan mengel;uarkan output "..... adalah bilangan ganjil"  contoh :


 itulah langkah-langkah membuat program sederhana bilangan bulat dan ganjil menggunbakan Microsoft Visual Studio 2012.
Selamat Mencoba, semoga berhasiiiiiiill.....  !!     : )


by : Agusn Setiawan  SMK DAARUT TAUHIID BS BANDUNG


Posted on 21.21 by Unknown

No comments

Langganan: Postingan (Atom)