Random Template

WELLCOME TO SKYLEX - ZONE

Jumat, 22 November 2013

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


Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di 4 komentar:
Label:

Selasa, 19 November 2013

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

Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

Senin, 18 November 2013

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



Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

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


Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

Minggu, 17 November 2013

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

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


  2. Fixed

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

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

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


Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

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


Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

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


Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

Sabtu, 16 November 2013

CSS MARGIN dan PADDING

Hai sobat sky . . .
Kali ini judul postingan saya adalah "CSS Margin dan Padding", dimana ini adalah postingan 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



Margin adalah salah satu property CSS yang berfungsi untuk memberikan jarak atau batas luar pada setiap sisi.
Margin atas, kanan, bawah, dan kiri dapat diubah secara independen menggunakan preoperty terpisah atau bisa juga mneggunakan property yang mengatur margin keempat sisi sekaligus.


Penulisan kodenya :


body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}


atau paling sering kita lihat kode singkatnya (shorthand) seperti ini :


body {
margin: 100px 40px 10px 70px;
}


Sedangkan padding adalah satu dari beberapah preperty dalam CSS yang berfungsi memberikan jarak atau batas (bagian dalam) pada tag / box / bidang html.

Berikut property padding, antara lain :

  • padding-top

  • padding-right,

  • padding-bottom,

  • padding-left

  • padding (khusus shorthand)


Berikut property padding, antara lain :

  • angka (panjang) dalam px(pixel)

  • % 

  • em, in, pt


NB : Paling sering digunakan adalah px dan %



Contoh kode CSS untuk padding

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;



Model singkatnya :

padding:25px 50px;


Okey, saya rasa materi kali ini cukup.
Selanjutnya kita akan membahas mengenai "CSS GROUPING DAN NESTING"

To be continue . . .





Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

CSS Outline (OUTLINE pada CSS)

Hai sobat sky . . .
kali ini judul potingan saya adalah "CSS OUTLINE", dimana ini adalah postingan 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


Outline adalah salah satu property dalam CSS yang berfungsi untuk memberikan garis atau batas bagian luar pada bidang / box / tag HTML

Namun, outline ini berbeda dengan border, karena outline tidak memiliki individual (outle-top, outline-bottom, outline left).
Outline juga tidak berpengaruh terhadapt width, misalnya jika membuat style dengan width 300px lalu menambahkan Outline width 20px, maka style awal tetap memiliki width 300px.
Lainya halnya jika menambahkan border-width 20px, maka style tadi akanmemiliki width (lebar) 340px.
Outline ini bisa kita tentukan bentuk / tampilannya, seperti warna, ketebalan, serta style / gaya.

Property Outline antara lain :

  • outline-color,

  • outline-style,

  • outline-width

  • outline(shorthand)


Value outline-color antara lain :

  • hex color,

  • red, blue, pink, silver, dll

  • rgr color


Value outline-style antara lain :

  • Solid,

  • Double,

  • Dotted,

  • Dashed,

  • Groove,

  • Ridge,

  • Inset

  • Outset


Value outline-width antara lain :

  • Angka (panjang / leght) dan px misalnya (1px, 2px, 3px, 4px, dst),

  • Medium

Contoh Kode :

<div style="background-color:blue; width:300px; outline-style:solid; outline-color:red; outline-width:5px;">
N a m a<br />
S a y a<br />
L e x y<br />
Y e w u n,<br />
S a y a<br />
S e d a n g<br />
B e l a j a r<br />
C S S
</div>


Maka akan tampil seperti ini :





Penulisan style outline seperti diatas sebenarnya tidak disarankan, karena kita harus menulis propertynyasatu persatu. untuk itu kadang penulisan outline dengan teknik shorthand (singkat) sangat dianjurkan, selain efisien kita juga tidak perlu menuliskan stylenya dengan terlalu  panjang.

Penulisan property shorthand singka bisa ditulis seperti ini :

outline:value-outline-color(spasi)value-outline-style(spasi)value-outline-width;

Dengan teknik ini, kita sudah mengenal outline-style, outline-width, outline-color.
outline:value; fungsinya untuk membuat sekeliling bidang / tag / box/ memiliki style garis pinggir, sedangkan value masing - masing sisi akan bernilai sama !

Contoh kode penulisan dengan kode panjang


<div style="background-color:blue; width:30px; height:300px; outline-style:solid; outline-color:red; outline-width:5px;">
N a m a<br />
S a y a<br />
L e x y<br />
Y e w u n<br />
S a y a<br />
S e d a n g<br />
B e l a j a r<br />
C S S
</div>



Jika dibuat dengan teknik shorthand akan menjadi seperti ini :

<div style="backgroung-color:blue; width:300px; height:300px; outline:red solid 5px;">
N a m a<br />
S a y a<br />
L e x y<br />
Y e w u n<br />
S a y a<br />
S e d a n g<br />
B e l a j a r<br />
C S S
</div>


Kedua cara diatas akan menghasilkan tampilan browser yang sama seperti gambar berikut :























Okey, saya rasa cukup sekian dulu materi tentang "CSS OUTLINE".
Materi kita selanjutnya adalah  "CSS MARGIN DAN PADDING"

To be continue . . .




Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

CSS Border (BORDER pada CSS)

Hai sobat sky . . .
Kali ini judul potingan saya adalah "CSS Border", 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



Kali ini saya ingin mmbagikan sedikit materi mengenai "CSS Border".
Pembahasan kita saat ini berfokus pada border style, border width, border color



  1. Border Style



    2. Propoety border style, terdiri dari bermacam - macam bentuk border, antara lain dotted, dashed, solid, double, groove, ridge, inset, dan outset
    Untuk lebih jelasnya kita lihat contoh dibawah ini.

    • Contoh tanpa border / non border, penulisan kodenya : border-style:none

    • Contoh dotted border, penulisan kodenya : border-style:dotted

    • Contoh dashed border, penulisan kodenya : border-style:dashed

    • Contoh solid border, penulisan kodenya : border-style:solid



  2. Border Width


    3. Property border width digunakan untuk mengatur lebar / ketebalan batas.
    Untuk pengaturan ketebalan suatu border bisa menggunakan pixel (px) atau bisa menggunakan salah satu ukuran yang bisa digunakan dalam CSS, yaitu  thin (tipis), medium (sedang), thick (tebal)
    Dengan catatan property "border width" tidak bekerja jika digunakan sendiri, gunakan "border style" terlebih dahulu untuk mengaturnya.

    Contoh :

    p.one
    {
    border-style:solid;
    border-width:5px;
    }
    p.two
    {
    border-stye:solid;
    border-width:medium
    }


  3. Border Color


    4. Border color digunakan untuk mengatur warna border.

    Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa inggris)
    Misalnya :

    • Blue

    • Red

    • Yellow

    • Lime


    Atau menggunakan RGB :

    Misalnya :

    • rgb(0.51.26)



    Atau menggunakan HEX :

    Misalnya :

    • #330000




p.one

 {
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}


Didalam CSS, kita dapat menentukan border yang berbeda untuk sisi yang berbeda.
Contoh :

p.one
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dottet;
border-left-style:solid;
}


Contoh diatas juga bisa diatur dengan single property.

border-style:dotted solid;


Border juga dapat diset hanya pada bagian tertentu saja (individual border)
Misalnya :
  • Hanya memberi border pada bagian bawah, penulisannya : border-bottom

  • Hanya memberi border pada bagian atas, penulisannya : border-top

  • Hanya memberi border pada bagian kiri, penulisannya : border-left

  • Hanya memberi border pada bagian kanan, penulisannya : border-right

Contoh :
Pemberian border hanya pada bagian bawah saja (border-bottom) dengan style:dashed.
penulisan kodenya (langsung disingkat / shorthand) : border-bottom:dashed 3px #00331A;

Seperti bisa dilihat pada contoh diatas, akan ada banyak property untuk mengatur border.
Untuk mempersingkat kode, kita menggunakan shorthand property yaitu "border".

border:5px solid red;

pada bagian tertentu border juga bisa dibuat menjadi transparan / hidden / tersembunyi.
Misalnya pada bagian atas (border-top) dibuat menjadi tersembunyi / tranparan.

Penulisan kodenya langsung disingkat / shorthand :

border:solid 3px #00331A;border-top:none;

atau juga bisa seperti ini :

border:solid 0 3px 3px 3px #00331A;

Okey, saya rasa pengenalan dasar - dasar tentang border cukup sampai disini.
Materi selanjutnya adalah "CSS Outline".

To be Continue . . .


Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

Jumat, 15 November 2013

CSS BOX MODEL (MODEL BOX pada CSS)

Hai sobat sky . . .
Kali ini judul potingan saya mengenai "BOX CSS", dimana ininmerupakan 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
Setelah belajar dasar - dasar CSS beserta stylenya, sekarang kita mulai memasuki materi yang lebih advace lagi. yang akan kita bahas kali ini adalah "BOX CSS".

Didalam HTML, semua element seperti p, div, h, dll pada dasarnya dianggap kolom kotak yang membungkus isi (HTML) didalam CSS. Istilah "model kotak / box" digunakan ketika berbicara tentang desain dan tata letak.

Ada beberapa property dalam Box Model CSS, diantaranya :
  • Border
  • Padding
  • Margin
  • Isi HTML

Setiap Box Model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan Box Model ini setiap kolom bisa diberi ukuran jarak antara satu dan lainnya sehingga kotak - kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk dilihat.

Agar lebih mudah dipahami, berikut saya tampilkan ilustrasi Box Model.


Gambar CSS Box Model
Margin
Border
Padding

Isi


Penjelasan :

  1. Margin, Memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. Tidak memiliki background warna (transparan).

  2. Border, sama halnya dengan margin, yaitu meungkinkan kita untuk memberi jarak. Bedahnya pada border kita bisa mendefinisikan warna background.

  3. Padding, Memungkinkan kita untuk membuat lapisan pada isi HTML itu sendiri.

  4. Conten (isi), seperti text dan gambar yang ada kolom elemen HTML seperti div, p, h, dll


Penting untuk diingat jika anda mengatur lebar dan tinggi menggunakan CSS, anda hanya mengatur lebar dan tinggi dalam konten area.

Untukmenghitung elemen, anda harus menambahkan padding, border, dan margin.
Misalnya, anda memiliki kode CSS seperti ini :

width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;


Pada contoh diatas, lebar bukalah 250px, melainkan 300px.
hmmm . . . kenapa bisa begitu ??? Sekarang marilah kita berhitung

Lebar: 250px Batas kiri (margin: 10px + border: 5px + padding: 10px) + Batas Kanan (margin: 10px + border: 5px + padding: 10px) = 300px

Contoh diatas sebenarnya tidak bisa ditampilkan dengan benar apabila menggunakan browser IE(Internet Explorer).
Design CSS yg sudah mulus, di browser lain banyak sekali yg berantakan di IE dan sedikit yg tahu untuk menyelesaikan masalah ini, tambahkan saja DOCTYPE ke halaman HTML seperti contoh berikut ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtm11/DTD/xhtm11-transition.dtd">

<html>

<head>

<style type="text/CSS">

div.ex

{

width: 220px;

padding: 10px;

border: 5px solid gray;

margin: 0px;

}

</style>

</head>



Okey, saya rasa sampai disini dulu materi singkat mengenai "BOX CSS".
Selanjutnya yg akan kita bahas lebih lanjut lagi tentang BORDER, OUTLINE, MARGIN, dan PADDING.


To be Continue . . .

Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:

Mengenal CSS Table (TABLE pada CSS)

Hai sobat sky . . .
Kali ini judul postingan saya berbicara mengenai "CSS Table", dimana postingan ini adalah lanjutan dari :
  1. Pengenalan CSS
  2. CSS Id dan Class
  3. Mengatur Warna pada CSS
  4. Pengeturan Font dan Text pada CSS
  5. Mengenal CSS Link
  6. Mengenal CSS List
Kita langsung saja menuju topik kita.

Table akan terlihat biasa saja jika dibuat menggunakan HTML, tapi akan terlihat lebih bagus dan menarik bila menggunakan CSS.

Table berguna sekali untuk memuat data agar terlihat lebih rapi. Untuk mengaplikasikan table dalam CSS, kita mneggunakan table property.
Contoh dibawah ini akan menampilkan table yang memiliki garis luar hitam, serta elemen <th> dan <td>.

table, th, td
{
 border: 1px solid black;
}


Okey, berikut ini property umum yang sering digunakan dalam table.

  1. Border-colaps propert ini digunakan untuk memformat tampilan border menjadi single atau double lain

    2. table
    {
    border-collapse:collapse;
    }
    table, th, td
    {
    border: 1px solid black;
    }


  2. Border-spacing, property ini digunakan untuk mengatur jarak s p a s i antara border dan isi sel.

    3. td
    {
    padding:15px;
    }


  3. Tabel text alignment, mengatur text dalam table. untuk horizontal mengatur kanan, kiri, atau tengah.


    4. td

    {
    text-alin:right;
    }


    Sedangkan text align vertical mengtur text secara vertikal

    td

    {
    height:50px;
    vertical-align:bottom;
    }


  4. Table-Color, digunakan untuk mengatur warna dari border, text, maupun background


    5. table, td, th
    {
    border:1px solid green;
    }
    th
    {
    background-color:green;
    color: white;
    }


Akhirnya selesai juga kita mempelajari macam - macam style pada CSS
Materi berikut adalah mengatur Model Box atau kotak dalam CSS.




Skylex-Zone
Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This
Diposting oleh di Tidak ada komentar:
Label:
Langganan: Komentar (Atom)